@felleslosninger/minid-elements 0.0.88

package/dist/components/paragraph.js

@@ -0,0 +1,48 @@
+import { LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styled } from "../mixins/tailwind.mixin.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let MinidParagraph = class extends styled(LitElement) {
+  constructor() {
+    super(...arguments);
+    this.size = "md";
+    this.spacing = false;
+  }
+  render() {
+    return html`<p
+      class="${classMap({
+      "fds-paragraph": true,
+      "fds-paragraph--spacing": this.spacing,
+      "fds-paragraph--xs": this.size === "xs",
+      "fds-paragraph--sm": this.size === "sm",
+      "fds-paragraph--md": this.size === "md",
+      "fds-paragraph--lg": this.size === "lg"
+    })}"
+    >
+      <slot></slot>
+    </p> `;
+  }
+};
+__decorateClass([
+  property()
+], MinidParagraph.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidParagraph.prototype, "spacing", 2);
+MinidParagraph = __decorateClass([
+  customElement("mid-paragraph")
+], MinidParagraph);
+export {
+  MinidParagraph
+};
+//# sourceMappingURL=paragraph.js.map

package/dist/components/paragraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.js","sources":["../../src/components/paragraph.component.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-paragraph': MinidParagraph;\n  }\n}\n\n/**\n * A paragraph\n */\n@customElement('mid-paragraph')\nexport class MinidParagraph extends styled(LitElement) {\n  /**\n   * `'xs' = 14px`\n   * `'sm' = 16px`\n   * `'md' = 18px`\n   * `'lg' = 21px`\n   * @default 'md'\n   */\n  @property()\n  size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Add margin below element\n   * @default false\n   */\n  @property({ type: Boolean })\n  spacing = false;\n\n  override render() {\n    return html`<p\n      class=\"${classMap({\n        'fds-paragraph': true,\n        'fds-paragraph--spacing': this.spacing,\n        'fds-paragraph--xs': this.size === 'xs',\n        'fds-paragraph--sm': this.size === 'sm',\n        'fds-paragraph--md': this.size === 'md',\n        'fds-paragraph--lg': this.size === 'lg',\n      })}\"\n    >\n      <slot></slot>\n    </p> `;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAeO,IAAM,iBAAN,cAA6B,OAAO,UAAU,EAAE;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAS6B,SAAA,OAAA;AAOxB,SAAA,UAAA;AAAA,EAAA;AAAA,EAED,SAAS;AACT,WAAA;AAAA,eACI,SAAS;AAAA,MAChB,iBAAiB;AAAA,MACjB,0BAA0B,KAAK;AAAA,MAC/B,qBAAqB,KAAK,SAAS;AAAA,MACnC,qBAAqB,KAAK,SAAS;AAAA,MACnC,qBAAqB,KAAK,SAAS;AAAA,MACnC,qBAAqB,KAAK,SAAS;AAAA,IAAA,CACpC,CAAC;AAAA;AAAA;AAAA;AAAA,EAAA;AAKR;AAvBE,gBAAA;AAAA,EADC,SAAS;AAAA,GARC,eASX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAfhB,eAgBX,WAAA,WAAA,CAAA;AAhBW,iBAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,cAAA;"}

package/dist/components/phone-input.component.d.ts

@@ -0,0 +1,73 @@
+import { LitElement } from 'lit';
+import { CountryCode } from 'libphonenumber-js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mid-phone-input': MinidPhoneInput;
+    }
+}
+declare const MinidPhoneInput_base: typeof LitElement & import('../types/mixin-constructor').Constructor<import('../mixins/form-controller.mixin').FormAssociatedMixinInterface>;
+/**
+ * @event {Event} mid-country-click - Emitted when the country button is clicked
+ * @event {Event} mid-change - Emitted when the value is modified by the user
+ * @event {Event} mid-input - Emitted after a new user input
+ * @event {Event} mid-blur - Emitted after focus is moved away from input
+ * @event {Event} mid-focus - Emitted after input gains focus
+ *
+ * @part base - Select the container outside the country button and phone number input
+ * @part form-control - Select the container around the label and the inputs
+ * @part label - Select the label element
+ * @part country-button - Select the country button
+ * @part input - Select the phone number input
+ */
+export declare class MinidPhoneInput extends MinidPhoneInput_base {
+    #private;
+    /**
+     * @ignore
+     */
+    input: HTMLInputElement;
+    /**
+     * The value of the phone number in E.164 format. Example: `"+4799999999"`
+     *
+     */
+    value: string;
+    /**
+     * The phone number without the country code prefix. Example: `"99999999"`
+     */
+    nationalnumber: string;
+    /**
+     * The country code of the current phone number value. Example: `"+47"`
+     */
+    countrycode: string;
+    /**
+     * Label for the phone input.
+     * Passed label will be encapsulated by a label element.
+     */
+    label: string;
+    /**
+     * Hide label visually. Still available for screen readers
+     */
+    hidelabel: boolean;
+    /**
+     * The country selected. A two letter ISO country code like: `"NO"`
+     */
+    country?: CountryCode;
+    hasFocus: boolean;
+    handleCountryClick(): void;
+    handleCountryKeyDown(event: KeyboardEvent): void;
+    connectedCallback(): void;
+    get parseTemplate(): import('input-format').ParseFunction;
+    get formatTemplate(): import('input-format').FormatFunction;
+    private handleBlur;
+    private handleChange;
+    private handleKeydown;
+    private handleInput;
+    private setValue;
+    private valueChangeCallback;
+    private handleFocus;
+    private removePhonePrefix;
+    focus(): void;
+    handleCountryChange(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=phone-input.component.d.ts.map

package/dist/components/phone-input.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-input.component.d.ts","sourceRoot":"","sources":["../../src/components/phone-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,OAAO,EAIL,WAAW,EAEZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAU/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,eAAe,CAAC;KACpC;CACF;;AA0CD;;;;;;;;;;;;GAYG;AACH,qBACa,eAAgB,SAAQ,oBAEpC;;IAMC;;OAEG;IAEH,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,WAAW,CAAC;IAGtB,QAAQ,UAAS;IAEjB,kBAAkB;IAMlB,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAQzC,iBAAiB,IAAI,IAAI;IAkBzB,IAAI,aAAa,yCAEhB;IAED,IAAI,cAAc,0CAEjB;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,QAAQ;IAkBhB,OAAO,CAAC,mBAAmB,CAkBzB;IAEF,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,iBAAiB;IAUzB,KAAK;IAWL,mBAAmB;IAmBV,MAAM;CA6EhB"}

package/dist/components/phone-input.js

@@ -0,0 +1,321 @@
+import { css, LitElement, nothing, html } from "lit";
+import { query, property, state, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styled } from "../mixins/tailwind.mixin.js";
+import { AsYouType, getCountryCallingCode, formatIncompletePhoneNumber, parsePhoneNumberCharacter } from "libphonenumber-js";
+import "./icon/icon.js";
+import { templateParser, templateFormatter, onKeyDown, onChange } from "input-format";
+import { watch } from "../internal/watch.js";
+import { FormControllerMixin } from "../mixins/form-controller.mixin.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _formatter, _skipCountryUpdate, _currentEvent, _currentTemplate;
+const styles = [
+  css`
+    :host {
+      display: flex;
+    }
+
+    .country-code,
+    .phone-number {
+      outline: none;
+      box-shadow: none;
+      background-color: transparent;
+    }
+
+    .phone-number {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    .country-code {
+      border-right: 1px solid currentColor;
+    }
+
+    .country-button {
+      border: 1px solid var(--fds-semantic-border-input-default);
+      border-right: 0;
+      border-top-left-radius: var(--fds-border_radius-medium);
+      border-bottom-left-radius: var(--fds-border_radius-medium);
+    }
+
+    .fds-focus:focus-within {
+      --fds-focus-border-width: 3px;
+      outline: var(--fds-focus-border-width) solid
+        var(--fds-semantic-border-focus-outline);
+      outline-offset: var(--fds-focus-border-width);
+      box-shadow: 0 0 0 var(--fds-focus-border-width)
+        var(--fds-semantic-border-focus-boxshadow);
+    }
+  `
+];
+let MinidPhoneInput = class extends FormControllerMixin(
+  styled(LitElement, styles)
+) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _formatter, new AsYouType());
+    __privateAdd(this, _skipCountryUpdate, false);
+    __privateAdd(this, _currentEvent, new Event(""));
+    __privateAdd(this, _currentTemplate, "");
+    this.value = "";
+    this.nationalnumber = "";
+    this.countrycode = "";
+    this.label = "";
+    this.hidelabel = false;
+    this.hasFocus = false;
+    this.valueChangeCallback = (value) => {
+      const country = value.length < 2 ? void 0 : __privateGet(this, _formatter).getCountry() ?? this.country;
+      if (country !== this.country) {
+        this.country = country;
+        this.countrycode = this.country ? `+${getCountryCallingCode(this.country)}` : "+";
+        __privateSet(this, _skipCountryUpdate, true);
+      }
+      this.value = value;
+      this.nationalnumber = this.removePhonePrefix(value);
+      this.dispatchEvent(__privateGet(this, _currentEvent));
+      this.setFormValue(this.value);
+    };
+  }
+  handleCountryClick() {
+    this.dispatchEvent(
+      new CustomEvent("mid-country-click", { composed: true, bubbles: true })
+    );
+  }
+  handleCountryKeyDown(event) {
+    if ([" ", "Enter"].includes(event.key)) {
+      this.dispatchEvent(
+        new CustomEvent("mid-country-click", { composed: true, bubbles: true })
+      );
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateGet(this, _formatter).input(this.value);
+    this.country = __privateGet(this, _formatter).getCountry() ?? this.country;
+    this.countrycode = this.country ? `+${getCountryCallingCode(this.country)}` : "+";
+    this.value = formatIncompletePhoneNumber(this.value);
+    this.value ??= this.countrycode;
+    this.nationalnumber = this.removePhonePrefix(this.value);
+    setTimeout(() => {
+      this.input.value = `${this.countrycode}${this.nationalnumber}`;
+    }, 0);
+  }
+  get parseTemplate() {
+    return templateParser(__privateGet(this, _currentTemplate), parsePhoneNumberCharacter);
+  }
+  get formatTemplate() {
+    return templateFormatter(__privateGet(this, _currentTemplate));
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.dispatchEvent(
+      new Event("mid-blur", { bubbles: true, composed: true })
+    );
+  }
+  handleChange(event) {
+    __privateSet(this, _currentEvent, new Event("mid-change", {
+      bubbles: true,
+      composed: true
+    }));
+    this.setValue(event);
+  }
+  handleKeydown(event) {
+    if (event.key === "Backspace" && this.input.selectionStart === 1) {
+      event.preventDefault();
+      return;
+    }
+    onKeyDown(
+      event,
+      this.input,
+      this.parseTemplate,
+      this.formatTemplate,
+      this.valueChangeCallback
+    );
+  }
+  handleInput(event) {
+    __privateSet(this, _currentEvent, new Event("mid-input", {
+      composed: true,
+      bubbles: true
+    }));
+    this.setValue(event);
+  }
+  setValue(event) {
+    __privateGet(this, _formatter).reset();
+    if (!this.input.value.startsWith("+")) {
+      this.input.value = `+${this.input.value}`;
+    }
+    __privateGet(this, _formatter).input(this.input.value);
+    __privateSet(this, _currentTemplate, __privateGet(this, _formatter).getTemplate());
+    onChange(
+      event,
+      this.input,
+      this.parseTemplate,
+      this.formatTemplate,
+      this.valueChangeCallback
+    );
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.dispatchEvent(
+      new Event("mid-focus", { composed: true, bubbles: true })
+    );
+  }
+  removePhonePrefix(value) {
+    if (this.countrycode) {
+      value = value.slice(this.countrycode.length);
+      if (value[0] === " ") {
+        value = value.slice(1);
+      }
+    }
+    return value;
+  }
+  focus() {
+    this.input.focus();
+    setTimeout(() => {
+      this.input.setSelectionRange(
+        (this.countrycode?.length ?? 0) + 1,
+        this.input.value.length
+      );
+    }, 0);
+  }
+  handleCountryChange() {
+    if (__privateGet(this, _skipCountryUpdate)) {
+      __privateSet(this, _skipCountryUpdate, false);
+      return;
+    }
+    __privateSet(this, _formatter, new AsYouType(this.country));
+    this.nationalnumber = this.removePhonePrefix(this.input.value);
+    this.countrycode = this.country ? `+${getCountryCallingCode(this.country)}` : "+";
+    this.input.value = formatIncompletePhoneNumber(
+      `${this.countrycode}${this.nationalnumber}`
+    );
+    this.input.dispatchEvent(new Event("input", { bubbles: true }));
+    this.input.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  render() {
+    const lg = false;
+    const md = true;
+    const sm = false;
+    return html`
+      <div
+        part="form-control"
+        class="${classMap({
+      "form-control": true,
+      "fds-paragraph": true,
+      "fds-textfield": true,
+      "fds-paragraph--sm": sm,
+      "fds-paragraph--md": md,
+      "fds-paragraph--lg": lg,
+      "fds-textfield--sm": sm,
+      "fds-textfield--md": md,
+      "fds-textfield--lg": lg
+    })}"
+      >
+        ${!this.label ? nothing : html`<label
+              part="label"
+              for="input"
+              class="${classMap({
+      "sr-only": this.hidelabel,
+      "fds-label": true,
+      "fds-label--medium-weight": true,
+      "fds-textfield__label": true,
+      "fds-label--sm": sm,
+      "fds-label--md": md,
+      "fds-label--lg": lg
+    })}"
+            >
+              ${this.label}
+            </label>`}
+        <div part="base" class="flex">
+          <button
+            part="country-button"
+            class="country-button fds-focus flex h-full items-center border pl-3"
+            iconstyled
+            variant="tertiary"
+            @click=${this.handleCountryClick}
+            @keydown=${this.handleCountryKeyDown}
+          >
+            ${this.country ? html`
+                  <mid-icon
+                    class="h-4 w-6 overflow-hidden rounded"
+                    library="country"
+                    name="${this.country}"
+                  ></mid-icon>
+                ` : html`<div
+                  class="bg-neutral-surface-active h-4 w-6 overflow-hidden rounded"
+                ></div>`}
+            <mid-icon name="chevron-down"></mid-icon>
+          </button>
+
+          <input
+            id="input"
+            class="phone-number fds-textfield__field fds-textfield__input fds-focus"
+            part="phone-number"
+            type="tel"
+            autocomplete="tel"
+            value=${this.value}
+            @input=${this.handleInput}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+            @keydown=${this.handleKeydown}
+            @change=${this.handleChange}
+          />
+        </div>
+      </div>
+    `;
+  }
+};
+_formatter = /* @__PURE__ */ new WeakMap();
+_skipCountryUpdate = /* @__PURE__ */ new WeakMap();
+_currentEvent = /* @__PURE__ */ new WeakMap();
+_currentTemplate = /* @__PURE__ */ new WeakMap();
+__decorateClass([
+  query(".phone-number")
+], MinidPhoneInput.prototype, "input", 2);
+__decorateClass([
+  property({ reflect: true })
+], MinidPhoneInput.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], MinidPhoneInput.prototype, "nationalnumber", 2);
+__decorateClass([
+  property({ reflect: true })
+], MinidPhoneInput.prototype, "countrycode", 2);
+__decorateClass([
+  property()
+], MinidPhoneInput.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MinidPhoneInput.prototype, "hidelabel", 2);
+__decorateClass([
+  property({ reflect: true })
+], MinidPhoneInput.prototype, "country", 2);
+__decorateClass([
+  state()
+], MinidPhoneInput.prototype, "hasFocus", 2);
+__decorateClass([
+  watch("country", { waitUntilFirstUpdate: true })
+], MinidPhoneInput.prototype, "handleCountryChange", 1);
+MinidPhoneInput = __decorateClass([
+  customElement("mid-phone-input")
+], MinidPhoneInput);
+export {
+  MinidPhoneInput
+};
+//# sourceMappingURL=phone-input.js.map

package/dist/components/phone-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-input.js","sources":["../../src/components/phone-input.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport {\n  AsYouType,\n  formatIncompletePhoneNumber,\n  getCountryCallingCode,\n  CountryCode,\n  parsePhoneNumberCharacter,\n} from 'libphonenumber-js';\nimport './icon/icon.component';\nimport {\n  onChange,\n  onKeyDown,\n  templateFormatter,\n  templateParser,\n} from 'input-format';\nimport { watch } from '../internal/watch';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-phone-input': MinidPhoneInput;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      display: flex;\n    }\n\n    .country-code,\n    .phone-number {\n      outline: none;\n      box-shadow: none;\n      background-color: transparent;\n    }\n\n    .phone-number {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n\n    .country-code {\n      border-right: 1px solid currentColor;\n    }\n\n    .country-button {\n      border: 1px solid var(--fds-semantic-border-input-default);\n      border-right: 0;\n      border-top-left-radius: var(--fds-border_radius-medium);\n      border-bottom-left-radius: var(--fds-border_radius-medium);\n    }\n\n    .fds-focus:focus-within {\n      --fds-focus-border-width: 3px;\n      outline: var(--fds-focus-border-width) solid\n        var(--fds-semantic-border-focus-outline);\n      outline-offset: var(--fds-focus-border-width);\n      box-shadow: 0 0 0 var(--fds-focus-border-width)\n        var(--fds-semantic-border-focus-boxshadow);\n    }\n  `,\n];\n\n/**\n * @event {Event} mid-country-click - Emitted when the country button is clicked\n * @event {Event} mid-change - Emitted when the value is modified by the user\n * @event {Event} mid-input - Emitted after a new user input\n * @event {Event} mid-blur - Emitted after focus is moved away from input\n * @event {Event} mid-focus - Emitted after input gains focus\n *\n * @part base - Select the container outside the country button and phone number input\n * @part form-control - Select the container around the label and the inputs\n * @part label - Select the label element\n * @part country-button - Select the country button\n * @part input - Select the phone number input\n */\n@customElement('mid-phone-input')\nexport class MinidPhoneInput extends FormControllerMixin(\n  styled(LitElement, styles)\n) {\n  #formatter = new AsYouType();\n  #skipCountryUpdate = false; // avoids unwanted update loop\n  #currentEvent = new Event(''); // the event to be emitted after value is set\n  #currentTemplate = '';\n\n  /**\n   * @ignore\n   */\n  @query('.phone-number')\n  input!: HTMLInputElement;\n\n  /**\n   * The value of the phone number in E.164 format. Example: `\"+4799999999\"`\n   *\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * The phone number without the country code prefix. Example: `\"99999999\"`\n   */\n  @property({ reflect: true })\n  nationalnumber = '';\n\n  /**\n   * The country code of the current phone number value. Example: `\"+47\"`\n   */\n  @property({ reflect: true })\n  countrycode = '';\n\n  /**\n   * Label for the phone input.\n   * Passed label will be encapsulated by a label element.\n   */\n  @property()\n  label = '';\n\n  /**\n   * Hide label visually. Still available for screen readers\n   */\n  @property({ type: Boolean })\n  hidelabel = false;\n\n  /**\n   * The country selected. A two letter ISO country code like: `\"NO\"`\n   */\n  @property({ reflect: true })\n  country?: CountryCode;\n\n  @state()\n  hasFocus = false;\n\n  handleCountryClick() {\n    this.dispatchEvent(\n      new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n    );\n  }\n\n  handleCountryKeyDown(event: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(event.key)) {\n      this.dispatchEvent(\n        new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#formatter.input(this.value);\n    this.country = this.#formatter.getCountry() ?? this.country;\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n\n    this.value = formatIncompletePhoneNumber(this.value);\n    this.value ??= this.countrycode;\n    this.nationalnumber = this.removePhonePrefix(this.value);\n\n    setTimeout(() => {\n      this.input.value = `${this.countrycode}${this.nationalnumber}`;\n    }, 0);\n  }\n\n  get parseTemplate() {\n    return templateParser(this.#currentTemplate, parsePhoneNumberCharacter);\n  }\n\n  get formatTemplate() {\n    return templateFormatter(this.#currentTemplate);\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new Event('mid-blur', { bubbles: true, composed: true })\n    );\n  }\n\n  private handleChange(event: Event) {\n    // Event is dispatched after value is set\n    this.#currentEvent = new Event('mid-change', {\n      bubbles: true,\n      composed: true,\n    });\n\n    this.setValue(event);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Backspace' && this.input.selectionStart === 1) {\n      event.preventDefault();\n      return;\n    }\n\n    onKeyDown(\n      event,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private handleInput(event: InputEvent) {\n    // Event is dispatched after value is set\n    this.#currentEvent = new Event('mid-input', {\n      composed: true,\n      bubbles: true,\n    });\n    this.setValue(event);\n  }\n\n  private setValue(event: Event) {\n    this.#formatter.reset();\n\n    if (!this.input.value.startsWith('+')) {\n      this.input.value = `+${this.input.value}`;\n    }\n    this.#formatter.input(this.input.value);\n    this.#currentTemplate = this.#formatter.getTemplate();\n\n    onChange(\n      event,\n      this.input,\n      this.parseTemplate,\n      this.formatTemplate,\n      this.valueChangeCallback\n    );\n  }\n\n  private valueChangeCallback = (value: string) => {\n    const country =\n      value.length < 2\n        ? undefined\n        : (this.#formatter.getCountry() ?? this.country);\n\n    if (country !== this.country) {\n      this.country = country;\n      this.countrycode = this.country\n        ? `+${getCountryCallingCode(this.country)}`\n        : '+';\n      this.#skipCountryUpdate = true;\n    }\n\n    this.value = value;\n    this.nationalnumber = this.removePhonePrefix(value);\n    this.dispatchEvent(this.#currentEvent);\n    this.setFormValue(this.value);\n  };\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new Event('mid-focus', { composed: true, bubbles: true })\n    );\n  }\n\n  private removePhonePrefix(value: string) {\n    if (this.countrycode) {\n      value = value.slice(this.countrycode.length);\n      if (value[0] === ' ') {\n        value = value.slice(1);\n      }\n    }\n    return value;\n  }\n\n  focus() {\n    this.input.focus();\n    setTimeout(() => {\n      this.input.setSelectionRange(\n        (this.countrycode?.length ?? 0) + 1,\n        this.input.value.length\n      );\n    }, 0);\n  }\n\n  @watch('country', { waitUntilFirstUpdate: true })\n  handleCountryChange() {\n    if (this.#skipCountryUpdate) {\n      this.#skipCountryUpdate = false;\n      return;\n    }\n\n    this.#formatter = new AsYouType(this.country);\n    this.nationalnumber = this.removePhonePrefix(this.input.value);\n\n    this.countrycode = this.country\n      ? `+${getCountryCallingCode(this.country)}`\n      : '+';\n    this.input.value = formatIncompletePhoneNumber(\n      `${this.countrycode}${this.nationalnumber}`\n    );\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  override render() {\n    const lg = false;\n    const md = true;\n    const sm = false;\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=\"${classMap({\n          'form-control': true,\n          'fds-paragraph': true,\n          'fds-textfield': true,\n          'fds-paragraph--sm': sm,\n          'fds-paragraph--md': md,\n          'fds-paragraph--lg': lg,\n          'fds-textfield--sm': sm,\n          'fds-textfield--md': md,\n          'fds-textfield--lg': lg,\n        })}\"\n      >\n        ${!this.label\n          ? nothing\n          : html`<label\n              part=\"label\"\n              for=\"input\"\n              class=\"${classMap({\n                'sr-only': this.hidelabel,\n                'fds-label': true,\n                'fds-label--medium-weight': true,\n                'fds-textfield__label': true,\n                'fds-label--sm': sm,\n                'fds-label--md': md,\n                'fds-label--lg': lg,\n              })}\"\n            >\n              ${this.label}\n            </label>`}\n        <div part=\"base\" class=\"flex\">\n          <button\n            part=\"country-button\"\n            class=\"country-button fds-focus flex h-full items-center border pl-3\"\n            iconstyled\n            variant=\"tertiary\"\n            @click=${this.handleCountryClick}\n            @keydown=${this.handleCountryKeyDown}\n          >\n            ${this.country\n              ? html`\n                  <mid-icon\n                    class=\"h-4 w-6 overflow-hidden rounded\"\n                    library=\"country\"\n                    name=\"${this.country}\"\n                  ></mid-icon>\n                `\n              : html`<div\n                  class=\"bg-neutral-surface-active h-4 w-6 overflow-hidden rounded\"\n                ></div>`}\n            <mid-icon name=\"chevron-down\"></mid-icon>\n          </button>\n\n          <input\n            id=\"input\"\n            class=\"phone-number fds-textfield__field fds-textfield__input fds-focus\"\n            part=\"phone-number\"\n            type=\"tel\"\n            autocomplete=\"tel\"\n            value=${this.value}\n            @input=${this.handleInput}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @keydown=${this.handleKeydown}\n            @change=${this.handleChange}\n          />\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/popup.component.d.ts

@@ -0,0 +1,172 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mid-popup': MinidPopup;
+    }
+}
+export interface VirtualElement {
+    getBoundingClientRect: () => DOMRect;
+    contextElement?: Element;
+}
+declare const MinidPopup_base: typeof LitElement;
+/**
+ * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
+ * @documentation https://shoelace.style/components/popup
+ * @status stable
+ * @since 2.0
+ *
+ * @event mid-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
+ *  operations in your listener or consider debouncing it.
+ *
+ * @slot - The popup's content.
+ * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the
+ *  `anchor` attribute or property instead.
+ *
+ * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are
+ *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
+ *  maybe a border or box shadow.
+ * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
+ * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
+ *
+ * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
+ *  attribute is used.
+ * @cssproperty [--arrow-color=var(--sl-color-neutral-0)] - The color of the arrow.
+ * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
+ *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
+ *  available when using `auto-size`.
+ * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the
+ *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
+ *  available when using `auto-size`.
+ */
+export declare class MinidPopup extends MinidPopup_base {
+    #private;
+    private anchorEl;
+    private cleanup?;
+    /**
+     * A reference to the internal popup container. Useful for animating and styling the popup with JavaScript.
+     */
+    popup: HTMLElement;
+    private arrowEl;
+    /**
+     * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
+     * element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the
+     * `anchor` slot instead.
+     */
+    anchor: Element | string | VirtualElement;
+    /**
+     * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
+     * down and the popup will be hidden.
+     */
+    active: boolean;
+    /**
+     * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the
+     * panel inside of the viewport.
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+    /**
+     * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is
+     * clipped, using a `fixed` position strategy can often workaround it.
+     */
+    strategy: 'absolute' | 'fixed';
+    /**
+     * The distance in pixels from which to offset the panel away from its anchor.
+     */
+    distance: number;
+    /**
+     * The distance in pixels from which to offset the panel along its anchor.
+     */
+    skidding: number;
+    /**
+     * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and
+     * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using
+     * `::part(arrow)` in your stylesheet.
+     */
+    arrow: boolean;
+    /**
+     * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
+     * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will
+     * align the arrow to the start, end, or center of the popover instead.
+     */
+    arrowPlacement: 'start' | 'end' | 'center' | 'anchor';
+    /**
+     * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
+     * this will prevent it from overflowing the corners.
+     */
+    arrowPadding: number;
+    /**
+     * When set, placement of the popup will flip to the opposite site to keep it in view. You can use
+     * `flipFallbackPlacements` to further configure how the fallback placement is determined.
+     */
+    flip: boolean;
+    /**
+     * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a
+     * string of any number of placements separated by a space, e.g. "top bottom left". If no placement fits, the flip
+     * fallback strategy will be used instead.
+     */
+    flipFallbackPlacements: string;
+    /**
+     * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether
+     * the popup should be positioned using the best available fit based on available space or as it was initially
+     * preferred.
+     */
+    flipFallbackStrategy: 'best-fit' | 'initial';
+    /**
+     * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By
+     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+     * change the boundary by passing a reference to one or more elements to this property.
+     */
+    flipBoundary?: Element | Element[];
+    /**
+     * The amount of padding, in pixels, to exceed before the flip behavior will occur.
+     */
+    flipPadding: number;
+    /**
+     * Moves the popup along the axis to keep it in view when clipped.
+     */
+    shift: boolean;
+    /**
+     * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By
+     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+     * change the boundary by passing a reference to one or more elements to this property.
+     */
+    shiftBoundary?: Element | Element[];
+    /**
+     * The amount of padding, in pixels, to exceed before the shift behavior will occur.
+     */
+    shiftPadding: number;
+    /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */
+    autoSize?: 'horizontal' | 'vertical' | 'both';
+    /**
+     * Syncs the popup's width or height to that of the anchor element.
+     */
+    sync?: 'width' | 'height' | 'both';
+    /**
+     * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By
+     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+     * change the boundary by passing a reference to one or more elements to this property.
+     */
+    autoSizeBoundary?: Element | Element[];
+    /**
+     * The amount of padding, in pixels, to exceed before the auto-size behavior will occur.
+     */
+    autoSizePadding: number;
+    /**
+     * When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the
+     * gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane
+     * because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is
+     * active.
+     */
+    hoverBridge: boolean;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    updated(changedProps: Map<string, unknown>): Promise<void>;
+    private handleAnchorChange;
+    private start;
+    private stop;
+    /** Forces the popup to recalculate and reposition itself. */
+    reposition(): void;
+    private updateHoverBridge;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=popup.component.d.ts.map

package/dist/components/popup.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.component.d.ts","sourceRoot":"","sources":["../../src/components/popup.component.ts"],"names":[],"mappings":"AAuBA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;AAED,MAAM,WAAW,cAAc;IAC7B,qBAAqB,EAAE,MAAM,OAAO,CAAC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;;AA8GD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,qBACa,UAAW,SAAQ,eAA0B;;IACxD,OAAO,CAAC,QAAQ,CAAyC;IACzD,OAAO,CAAC,OAAO,CAAC,CAAgC;IAEhD;;OAEG;IAEH,KAAK,EAAG,WAAW,CAAC;IAGpB,OAAO,CAAC,OAAO,CAAe;IAE9B;;;;OAIG;IAEH,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,cAAc,CAAM;IAE/C;;;OAGG;IAEH,MAAM,UAAS;IAEf;;;OAGG;IAEH,SAAS,EACL,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,OAAO,GACP,aAAa,GACb,WAAW,GACX,MAAM,GACN,YAAY,GACZ,UAAU,CAAS;IAEvB;;;OAGG;IAEH,QAAQ,EAAE,UAAU,GAAG,OAAO,CAAc;IAE5C;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,QAAQ,SAAK;IAEb;;;;OAIG;IAEH,KAAK,UAAS;IAEd;;;;OAIG;IAEH,cAAc,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAY;IAEjE;;;OAGG;IAEH,YAAY,SAAM;IAElB;;;OAGG;IAEH,IAAI,UAAS;IAEb;;;;OAIG;IAeH,sBAAsB,SAAM;IAE5B;;;;OAIG;IAEH,oBAAoB,EAAE,UAAU,GAAG,SAAS,CAAc;IAE1D;;;;OAIG;IAEH,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAEnC;;OAEG;IAEH,WAAW,SAAK;IAEhB;;OAEG;IAEH,KAAK,UAAS;IAEd;;;;OAIG;IAEH,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAEpC;;OAEG;IAEH,YAAY,SAAK;IAEjB,yGAAyG;IACnE,QAAQ,CAAC,EAC3C,YAAY,GACZ,UAAU,GACV,MAAM,CAAC;IAEX;;OAEG;IAEH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEnC;;;;OAIG;IAEH,gBAAgB,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAEvC;;OAEG;IACyD,eAAe,SACvE;IAEJ;;;;;OAKG;IACqD,WAAW,UAAS;IAEtE,iBAAiB;IAQvB,oBAAoB;IAKd,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;YAwBlC,kBAAkB;IAgChC,OAAO,CAAC,KAAK;YAWC,IAAI;IAelB,6DAA6D;IAC7D,UAAU;IAiNV,OAAO,CAAC,iBAAiB,CAsFvB;IAaF,MAAM;CAoCP"}