@govtechsg/sgds-web-component 3.1.0-rc.6 → 3.1.0

package/components/Select/select-item.d.ts

@@ -0,0 +1,17 @@
+import SgdsElement from "../../base/sgds-element";
+import SgdsIcon from "../Icon/sgds-icon";
+export declare class SelectItem extends SgdsElement {
+    /** @internal */
+    static dependencies: {
+        "sgds-icon": typeof SgdsIcon;
+    };
+    static styles: import("lit").CSSResult[];
+    /** when true, sets the active stylings */
+    active: boolean;
+    /** Disables the Item */
+    disabled: boolean;
+    connectedCallback(): void;
+    private _handleClickItem;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default SelectItem;

package/components/Select/select-item.js

@@ -0,0 +1,61 @@
+import { __decorate } from 'tslib';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
+import css_248z from './select-item2.js';
+
+class SelectItem extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** when true, sets the active stylings */
+        this.active = false;
+        /** Disables the Item */
+        this.disabled = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "menuitem");
+        this.setAttribute("aria-disabled", `${this.disabled}`);
+        this.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") {
+                this._handleClickItem();
+            }
+        });
+        this.addEventListener("click", () => {
+            this._handleClickItem();
+        });
+    }
+    _handleClickItem() {
+        this.emit("sgds-select");
+    }
+    render() {
+        const classes = {
+            disabled: this.disabled,
+            active: this.active
+        };
+        return html `
+      <div class="dropdown-item ${classMap(classes)}" tabindex=${this.disabled ? "-1" : "0"}>
+        <div class="normal-item-content">
+          <slot></slot>
+          ${this.active ? html ` <sgds-icon name="check"></sgds-icon> ` : nothing}
+        </div>
+      </div>
+    `;
+    }
+}
+/** @internal */
+SelectItem.dependencies = {
+    "sgds-icon": SgdsIcon
+};
+SelectItem.styles = [css_248z];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SelectItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SelectItem.prototype, "disabled", void 0);
+
+export { SelectItem, SelectItem as default };
+//# sourceMappingURL=select-item.js.map

package/components/Select/select-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-item.js","sources":["../../../src/components/Select/select-item.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectItemStyles from \"./select-item.css\";\n\nexport class SelectItem extends SgdsElement {\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  static styles = [selectItemStyles];\n  /** when true, sets the active stylings */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Disables the Item */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"menuitem\");\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (e.key === \"Enter\") {\n        this._handleClickItem();\n      }\n    });\n    this.addEventListener(\"click\", () => {\n      this._handleClickItem();\n    });\n  }\n\n  private _handleClickItem() {\n    this.emit(\"sgds-select\");\n  }\n\n  render() {\n    const classes = {\n      disabled: this.disabled,\n      active: this.active\n    };\n\n    return html`\n      <div class=\"dropdown-item ${classMap(classes)}\" tabindex=${this.disabled ? \"-1\" : \"0\"}>\n        <div class=\"normal-item-content\">\n          <slot></slot>\n          ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SelectItem;\n"],"names":["selectItemStyles"],"mappings":";;;;;;;;AAOM,MAAO,UAAW,SAAQ,WAAW,CAAA;AAA3C,IAAA,WAAA,GAAA;;;QAQ8C,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAGf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KAmC9D;IAjCC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;QACvD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gBACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;aACzB;AACH,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAK;YAClC,IAAI,CAAC,gBAAgB,EAAE,CAAC;AAC1B,SAAC,CAAC,CAAC;KACJ;IAEO,gBAAgB,GAAA;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KAC1B;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;AAEF,QAAA,OAAO,IAAI,CAAA,CAAA;AACmB,gCAAA,EAAA,QAAQ,CAAC,OAAO,CAAC,CAAA,WAAA,EAAc,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;;;YAG/E,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,CAAwC,sCAAA,CAAA,GAAG,OAAO,CAAA;;;KAG3E,CAAC;KACH;;AA5CD;AACO,UAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB,CAEjB;AAEK,UAAA,CAAA,MAAM,GAAG,CAACA,QAAgB,CAAC,CAAC;AAES,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGf,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/Select/select-item2.js

@@ -0,0 +1,6 @@
+import { css } from 'lit';
+
+var css_248z = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
+
+export { css_248z as default };
+//# sourceMappingURL=select-item2.js.map

package/components/Select/select-item2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-item2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/Select/select.js

@@ -0,0 +1,6 @@
+import { css } from 'lit';
+
+var css_248z = css`:host{display:block;position:relative}.select{flex-direction:column;gap:var(--sgds-form-gap-md)}.select .dropdown-menu{min-width:100%}.dropdown{display:flex;height:100%}.select{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;caret-color:transparent;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.select-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);width:100%}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=select.js.map

package/components/Select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/Select/sgds-select.d.ts

@@ -0,0 +1,27 @@
+import { SelectElement } from "../../base/select-element";
+import SgdsIcon from "../Icon/sgds-icon";
+import SelectItem from "./select-item";
+/**
+ * @summary Select is used to make one selection from a list through keyboard or mouse actions
+ *
+ * @event sgds-select - Emitted when an option is selected and the value of select is updated
+ */
+export declare class SgdsSelect extends SelectElement {
+    static styles: import("lit").CSSResult[];
+    /** @internal */
+    static dependencies: {
+        "sgds-icon": typeof SgdsIcon;
+        "sgds-select-item": typeof SelectItem;
+    };
+    connectedCallback(): void;
+    firstUpdated(): Promise<void>;
+    _handleValueChange(): Promise<void>;
+    protected _handleItemSelected(e: CustomEvent): Promise<void>;
+    protected _handleInputBlur(e: Event): Promise<void>;
+    /** For form reset  */
+    protected _mixinResetFormControl(): Promise<void>;
+    protected _renderMenu(): import("lit-html").TemplateResult<1> | import("lit-html").TemplateResult<1>[];
+    protected _renderInput(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default SgdsSelect;

package/components/Select/sgds-select.js

@@ -0,0 +1,158 @@
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { ref } from 'lit/directives/ref.js';
+import { SelectElement } from '../../base/select-element.js';
+import { watch } from '../../utils/watch.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
+import css_248z from './select.js';
+import { SelectItem } from './select-item.js';
+
+/**
+ * @summary Select is used to make one selection from a list through keyboard or mouse actions
+ *
+ * @event sgds-select - Emitted when an option is selected and the value of select is updated
+ */
+class SgdsSelect extends SelectElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("sgds-hide", async () => {
+            const sgdsInput = await this._input;
+            sgdsInput.focus();
+        });
+    }
+    async firstUpdated() {
+        super.firstUpdated();
+        if (this.value) {
+            const valueArray = this.value.split(";");
+            const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));
+            this.selectedItems = [...initialSelectedItem, ...this.selectedItems];
+            this.displayValue = initialSelectedItem[0].label;
+        }
+        this.input = await this._input;
+        this._mixinValidate(this.input);
+        if (this.menuIsOpen && !this.readonly) {
+            this.showMenu();
+        }
+    }
+    async _handleValueChange() {
+        if (this.value) {
+            this.emit("sgds-select");
+        }
+        const sgdsInput = await this._input;
+        this._mixinSetFormValue();
+        this._mixinValidate(sgdsInput);
+        if (!this._isTouched && this.value === "")
+            return;
+        this.invalid = !this._mixinReportValidity();
+    }
+    async _handleItemSelected(e) {
+        var _a, _b, _c;
+        const itemEl = e.target;
+        const itemLabel = (_b = (_a = itemEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
+        const itemValueAttr = (_c = itemEl.getAttribute("value")) !== null && _c !== void 0 ? _c : itemLabel;
+        const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {
+            label: itemLabel,
+            value: itemValueAttr
+        };
+        this.selectedItems = [foundItem];
+        this.value = foundItem.value.toString();
+        this.displayValue = this.selectedItems[0].label;
+        this.hideMenu();
+    }
+    async _handleInputBlur(e) {
+        e.preventDefault();
+        if (this.selectedItems.length > 0) {
+            this.displayValue = this.selectedItems[0].label;
+        }
+        else {
+            this.displayValue = "";
+        }
+    }
+    /** For form reset  */
+    async _mixinResetFormControl() {
+        this.value = this.defaultValue;
+        const initialItem = this.menuList.filter(({ value }) => value === this.value);
+        if (initialItem.length <= 0) {
+            this.displayValue = "";
+        }
+        else {
+            this.displayValue = initialItem[0].label;
+        }
+        this._mixinResetValidity(await this._input);
+    }
+    _renderMenu() {
+        const emptyMenu = html ` <div class="empty-menu">No options</div> `;
+        const menu = this.menuList.map(item => {
+            const isActive = item.value === this.value;
+            return html `
+        <sgds-select-item ?active=${isActive} value=${item.value} @sgds-select=${this._handleItemSelected}>
+          ${item.label}
+        </sgds-select-item>
+      `;
+        });
+        return this.menuList.length === 0 ? emptyMenu : menu;
+    }
+    _renderInput() {
+        const wantFeedbackStyle = this.hasFeedback;
+        return html `
+      <div
+        ${ref(this.myDropdown)}
+        class="form-control-group ${classMap({
+            disabled: this.disabled,
+            readonly: this.readonly,
+            "is-invalid": this.invalid && wantFeedbackStyle
+        })}"
+        @click=${this._handleClick}
+      >
+        <div class="select-input-container">
+          <input
+            class="form-control"
+            type="text"
+            id=${this._controlId}
+            name=${ifDefined(this.name)}
+            placeholder=${ifDefined(this.placeholder)}
+            aria-invalid=${this.invalid ? "true" : "false"}
+            ?autofocus=${this.autofocus}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            .value=${this.displayValue}
+            @blur=${this._handleInputBlur}
+            aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}
+            aria-labelledby="${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback
+            ? `${this._controlId}-invalid`
+            : ""}"
+            @keydown=${(e) => e.preventDefault()}
+          />
+        </div>
+        <sgds-icon name="chevron-down" size="md"></sgds-icon>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <div class="select">
+        ${this._renderLabel()}
+        <!-- The input -->
+        ${this._renderInput()} ${this._renderFeedback()}
+        <ul id=${this.dropdownMenuId} class="dropdown-menu" part="menu" tabindex="-1">
+          ${this._renderMenu()}
+        </ul>
+      </div>
+    `;
+    }
+}
+SgdsSelect.styles = [...SelectElement.styles, css_248z];
+/** @internal */
+SgdsSelect.dependencies = {
+    "sgds-icon": SgdsIcon,
+    "sgds-select-item": SelectItem
+};
+__decorate([
+    watch("value", { waitUntilFirstUpdate: true })
+], SgdsSelect.prototype, "_handleValueChange", null);
+
+export { SgdsSelect, SgdsSelect as default };
+//# sourceMappingURL=sgds-select.js.map

package/components/Select/sgds-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-select.js","sources":["../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SelectItem from \"./select-item\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected and the value of select is updated\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, selectStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-select-item\": SelectItem\n  };\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n    });\n  }\n\n  async firstUpdated() {\n    super.firstUpdated();\n\n    if (this.value) {\n      const valueArray = this.value.split(\";\");\n      const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));\n      this.selectedItems = [...initialSelectedItem, ...this.selectedItems];\n      this.displayValue = initialSelectedItem[0].label;\n    }\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen && !this.readonly) {\n      this.showMenu();\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n\n    this._mixinValidate(sgdsInput);\n\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: CustomEvent) {\n    const itemEl = e.target as SelectItem;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = this.filteredMenuList.find(i => i.value.toString() === itemValueAttr) || {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.selectedItems = [foundItem];\n    this.value = foundItem.value.toString();\n    this.displayValue = this.selectedItems[0].label;\n    this.hideMenu();\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    if (this.selectedItems.length > 0) {\n      this.displayValue = this.selectedItems[0].label;\n    } else {\n      this.displayValue = \"\";\n    }\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n\n  protected _renderMenu() {\n    const emptyMenu = html` <div class=\"empty-menu\">No options</div> `;\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n\n      return html`\n        <sgds-select-item ?active=${isActive} value=${item.value} @sgds-select=${this._handleItemSelected}>\n          ${item.label}\n        </sgds-select-item>\n      `;\n    });\n    return this.menuList.length === 0 ? emptyMenu : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <div class=\"select-input-container\">\n          <input\n            class=\"form-control\"\n            type=\"text\"\n            id=${this._controlId}\n            name=${ifDefined(this.name)}\n            placeholder=${ifDefined(this.placeholder)}\n            aria-invalid=${this.invalid ? \"true\" : \"false\"}\n            ?autofocus=${this.autofocus}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            .value=${this.displayValue}\n            @blur=${this._handleInputBlur}\n            aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n            aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n              ? `${this._controlId}-invalid`\n              : \"\"}\"\n            @keydown=${(e: KeyboardEvent) => e.preventDefault()}\n          />\n        </div>\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div class=\"select\">\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\">\n          ${this._renderMenu()}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"names":["selectStyle"],"mappings":"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"}

package/components/Subnav/index.d.ts

@@ -0,0 +1,8 @@
+import { SgdsSubnav } from "./sgds-subnav";
+import { SgdsSubnavItem } from "./sgds-subnav-item";
+declare global {
+    interface HTMLElementTagNameMap {
+        "sgds-subnav": SgdsSubnav;
+        "sgds-subnav-item": SgdsSubnavItem;
+    }
+}

package/components/Subnav/index.js

@@ -0,0 +1,6 @@
+import { SgdsSubnav } from './sgds-subnav.js';
+import { SgdsSubnavItem } from './sgds-subnav-item.js';
+
+customElements.define("sgds-subnav", SgdsSubnav);
+customElements.define("sgds-subnav-item", SgdsSubnavItem);
+//# sourceMappingURL=index.js.map

package/components/Subnav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Subnav/index.ts"],"sourcesContent":["import { SgdsSubnav } from \"./sgds-subnav\";\nimport { SgdsSubnavItem } from \"./sgds-subnav-item\";\n\ncustomElements.define(\"sgds-subnav\", SgdsSubnav);\ncustomElements.define(\"sgds-subnav-item\", SgdsSubnavItem);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"sgds-subnav\": SgdsSubnav;\n    \"sgds-subnav-item\": SgdsSubnavItem;\n  }\n}\n"],"names":[],"mappings":";;;AAGA,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AACjD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC"}