chore: select-rich Subclasser examples

docs/components/inputs/select-rich/examples.md

@@ -0,0 +1,31 @@
+# Inputs >> Select Rich >> Examples ||30
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import { repeat } from '@lion/core';
+import '@lion/select-rich/define';
+import './src/intl-select-rich.js';
+import { regionMetaList } from './src/regionMetaList.js';
+```
+
+## Select Rich International
+
+A visually advanced Subclasser implementation of `LionSelectRich`.
+
+Inspired by:
+
+- [intl-tel-input](https://intl-tel-input.com/)
+
+```js story
+export const IntlSelectRich = () => html`
+  <intl-select-rich label="Choose a region" name="regions">
+    ${repeat(
+      regionMetaList,
+      regionMeta => regionMeta.regionCode,
+      regionMeta =>
+        html` <intl-option .choiceValue="${regionMeta.regionCode}" .regionMeta="${regionMeta}">
+        </intl-option>`,
+    )}
+  </intl-select-rich>
+`;
+```

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

@@ -0,0 +1,193 @@
+import { html, css, LitElement } from '@lion/core';
+import { LionSelectRich, LionOption, LionSelectInvoker } from '@lion/select-rich';
+import { flagStyles } from './flagStyles.js';
+
+/**
+ * @typedef {import('@lion/core').RenderOptions} RenderOptions
+ * @typedef {import('@lion/input-tel/types/types').RegionAndCountryCode} RegionAndCountryCode
+ * @typedef {import('@lion/input-tel/types/types').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);