125 lines
4 KiB
JavaScript
125 lines
4 KiB
JavaScript
import { css, html, LitElement } from 'lit';
|
|
import { LocalizeMixin } from '@lion/ui/localize.js';
|
|
|
|
export class LionCalendarOverlayFrame extends LocalizeMixin(LitElement) {
|
|
static get styles() {
|
|
return [
|
|
css`
|
|
:host {
|
|
display: inline-block;
|
|
background: white;
|
|
position: relative;
|
|
}
|
|
|
|
:host([hidden]) {
|
|
display: none;
|
|
}
|
|
|
|
.calendar-overlay__header {
|
|
display: flex;
|
|
}
|
|
|
|
.calendar-overlay__heading {
|
|
padding: 16px 16px 8px;
|
|
flex: 1;
|
|
}
|
|
|
|
.calendar-overlay__heading > .calendar-overlay__close-button {
|
|
flex: none;
|
|
}
|
|
|
|
.calendar-overlay__close-button {
|
|
min-width: 40px;
|
|
min-height: 32px;
|
|
border-width: 0;
|
|
padding: 0;
|
|
font-size: 24px;
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
|
|
static get localizeNamespaces() {
|
|
return [
|
|
{
|
|
'lion-calendar-overlay-frame': /** @param {string} locale */ locale => {
|
|
switch (locale) {
|
|
case 'bg-BG':
|
|
return import('@lion/ui/overlays-translations/bg-BG.js');
|
|
case 'cs-CZ':
|
|
return import('@lion/ui/overlays-translations/cs-CZ.js');
|
|
case 'de-DE':
|
|
return import('@lion/ui/overlays-translations/de-DE.js');
|
|
case 'en-AU':
|
|
return import('@lion/ui/overlays-translations/en-AU.js');
|
|
case 'en-GB':
|
|
return import('@lion/ui/overlays-translations/en-GB.js');
|
|
case 'en-US':
|
|
return import('@lion/ui/overlays-translations/en-US.js');
|
|
case 'en-PH':
|
|
return import('@lion/ui/overlays-translations/en.js');
|
|
case 'es-ES':
|
|
return import('@lion/ui/overlays-translations/es-ES.js');
|
|
case 'fr-FR':
|
|
return import('@lion/ui/overlays-translations/fr-FR.js');
|
|
case 'fr-BE':
|
|
return import('@lion/ui/overlays-translations/fr-BE.js');
|
|
case 'hu-HU':
|
|
return import('@lion/ui/overlays-translations/hu-HU.js');
|
|
case 'it-IT':
|
|
return import('@lion/ui/overlays-translations/it-IT.js');
|
|
case 'nl-BE':
|
|
return import('@lion/ui/overlays-translations/nl-BE.js');
|
|
case 'nl-NL':
|
|
return import('@lion/ui/overlays-translations/nl-NL.js');
|
|
case 'pl-PL':
|
|
return import('@lion/ui/overlays-translations/pl-PL.js');
|
|
case 'ro-RO':
|
|
return import('@lion/ui/overlays-translations/ro-RO.js');
|
|
case 'ru-RU':
|
|
return import('@lion/ui/overlays-translations/ru-RU.js');
|
|
case 'sk-SK':
|
|
return import('@lion/ui/overlays-translations/sk-SK.js');
|
|
case 'uk-UA':
|
|
return import('@lion/ui/overlays-translations/uk-UA.js');
|
|
case 'zh-CN':
|
|
return import('@lion/ui/overlays-translations/zh.js');
|
|
default:
|
|
return import('@lion/ui/overlays-translations/en.js');
|
|
}
|
|
},
|
|
},
|
|
...super.localizeNamespaces,
|
|
];
|
|
}
|
|
|
|
/** @private */
|
|
__dispatchCloseEvent() {
|
|
this.dispatchEvent(new Event('close-overlay'));
|
|
}
|
|
|
|
render() {
|
|
// eslint-disable-line class-methods-use-this
|
|
return html`
|
|
<div class="calendar-overlay">
|
|
<div class="calendar-overlay__header">
|
|
<h1 class="calendar-overlay__heading">
|
|
<slot name="heading"></slot>
|
|
</h1>
|
|
<button
|
|
@click="${this.__dispatchCloseEvent}"
|
|
id="close-button"
|
|
title="${this.msgLit('lion-calendar-overlay-frame:close')}"
|
|
aria-label="${this.msgLit('lion-calendar-overlay-frame:close')}"
|
|
class="calendar-overlay__close-button"
|
|
>
|
|
<slot name="close-icon">×</slot>
|
|
</button>
|
|
</div>
|
|
<div id="overlay-content-node-wrapper">
|
|
<slot name="content"></slot>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|