@lion/ui 0.0.2 → 0.0.3

package/docs/components/select-rich/src/intl-select-rich.js

@@ -0,0 +1,194 @@
+import { html, css, LitElement } from 'lit';
+import { LionSelectRich, LionSelectInvoker } from '@lion/ui/select-rich.js';
+import { LionOption } from '@lion/ui/listbox.js';
+import { flagStyles } from './flagStyles.js';
+
+/**
+ * @typedef {import('@lion/ui/core.js').RenderOptions} RenderOptions
+ * @typedef {import('@lion/ui/input-tel/types/types.js').RegionAndCountryCode} RegionAndCountryCode
+ * @typedef {import('@lion/ui/input-tel/types/types.js').TemplateDataForDropdownInputTel} TemplateDataForDropdownInputTel
+ * @typedef {{countryCode: string; regionCode: string; nameForRegion: string; nameForLocale: string}} RegionMetaList
+ * @typedef {TemplateDataForDropdownInputTel & {data: {regionMetaList:RegionMetaList}}} TemplateDataForIntlInputTel
+ */
+
+export class IntlOption extends LionOption {
+  static properties = { regionMeta: { type: Object } };
+
+  static styles = [
+    super.styles,
+    flagStyles,
+    css`
+      :host {
+        padding: 5px 10px;
+        outline: none;
+      }
+
+      :host(:hover),
+      :host([active]),
+      :host([checked]) {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+    `,
+  ];
+
+  get _regionCode() {
+    return this.choiceValue?.toUpperCase();
+  }
+
+  render() {
+    const ctor = /** @type {typeof IntlOption} */ (this.constructor);
+    return ctor._contentTemplate({
+      data: this.regionMeta,
+    });
+  }
+
+  static _contentTemplate({ data: { regionCode, countryCode, nameForLocale, nameForRegion } }) {
+    return html`
+      <div class="iti__flag-box">
+        <div class="iti__flag iti__${regionCode?.toLowerCase()}"></div>
+      </div>
+      <span class="iti__country-name"> ${nameForLocale} (${nameForRegion}) </span>
+      <span class="iti__dial-code">+${countryCode}</span>
+    `;
+  }
+}
+customElements.define('intl-option', IntlOption);
+
+class IntlSelectInvoker extends LionSelectInvoker {
+  /**
+   * @configure LitElement
+   * @enhance LionSelectInvoker
+   */
+  static styles = [
+    super.styles,
+    flagStyles,
+    css`
+      :host {
+        /** TODO: avoid importants; should actually be configured in overlay */
+        width: auto !important;
+        background-color: transparent;
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+      }
+
+      #content-wrapper {
+        display: flex;
+        align-items: center;
+      }
+    `,
+  ];
+
+  /**
+   * @configure SlotMixin
+   * @override LionSelectInvoker
+   */
+  get slots() {
+    return {};
+  }
+
+  /**
+   * @override LionSelectInvoker
+   */
+  render() {
+    const ctor = /** @type {typeof LionSelectInvoker} */ (this.constructor);
+    return ctor._mainTemplate(this._templateData);
+  }
+
+  get _templateData() {
+    return {
+      data: { selectedElement: this.selectedElement, hostElement: this.hostElement },
+    };
+  }
+
+  static _mainTemplate(templateData) {
+    return html` <div id="content-wrapper">${this._contentTemplate(templateData)}</div> `;
+  }
+
+  static _contentTemplate({ data: { selectedElement, hostElement } }) {
+    if (!selectedElement) {
+      return ``;
+    }
+    return html`
+      <div class="iti__flag iti__${selectedElement.regionMeta.regionCode?.toLowerCase()}"></div>
+      <div class="iti__arrow iti__arrow--${hostElement.opened ? 'up' : 'down'}"></div>
+    `;
+  }
+}
+customElements.define('intl-select-invoker', IntlSelectInvoker);
+
+export class IntlSeparator extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        padding-bottom: 5px;
+        margin-bottom: 5px;
+        border-bottom: 1px solid #ccc;
+      }
+    `,
+  ];
+
+  /**
+   * @lifecycle platform
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'separator');
+  }
+}
+customElements.define('intl-separator', IntlSeparator);
+
+export class IntlSelectRich extends LionSelectRich {
+  static styles = [
+    super.styles,
+    css`
+      :host,
+      ::slotted(*) {
+        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        font-size: 14px;
+        line-height: 1.42857143;
+        color: #333;
+      }
+
+      ::slotted([role='listbox']) {
+        margin-left: -3px;
+        display: block;
+        white-space: nowrap;
+        max-height: 200px;
+        overflow-y: scroll;
+        position: absolute;
+        z-index: 2;
+        list-style: none;
+        text-align: left;
+        padding: 0;
+        margin: 0 0 0 -1px;
+        box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
+        background-color: white;
+        border: 1px solid #ccc;
+        -webkit-overflow-scrolling: touch;
+        outline: none;
+      }
+
+      .form-field__group-two,
+      .input-group,
+      .input-group__container,
+      .input-group__input {
+        height: 100%;
+      }
+    `,
+  ];
+
+  /**
+   * @configure ScopedElementsMixin
+   */
+  static scopedElements = { 'intl-select-invoker': IntlSelectInvoker };
+
+  /**
+   * @configure SlotMixin
+   */
+  slots = {
+    ...super.slots,
+    invoker: () => html`<intl-select-invoker></intl-select-invoker>`,
+  };
+}
+customElements.define('intl-select-rich', IntlSelectRich);