@nordhealth/components 2.7.0 → 2.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +1184 -1091
- package/lib/Avatar.js +1 -1
- package/lib/Avatar.js.map +1 -1
- package/lib/Button.js +1 -1
- package/lib/Button.js.map +1 -1
- package/lib/{Calendar-1cdf8429.js → Calendar-685c3990.js} +1 -1
- package/lib/{Calendar-1cdf8429.js.map → Calendar-685c3990.js.map} +1 -1
- package/lib/Calendar.js +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/LightDismissController-a2645ae6.js.map +1 -1
- package/lib/Modal.js +1 -1
- package/lib/Modal.js.map +1 -1
- package/lib/ModalController.js +2 -0
- package/lib/ModalController.js.map +1 -0
- package/lib/Select.js +1 -1
- package/lib/Select.js.map +1 -1
- package/lib/bundle.js +7 -7
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/common/controllers/LightDismissController.d.ts +1 -2
- package/lib/src/modal/Modal.d.ts +14 -14
- package/lib/src/modal/ModalController.d.ts +34 -0
- package/package.json +3 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalController.js","sources":["../src/common/controllers/FocusTrapController.ts","../src/modal/ModalController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport class FocusTrapController implements ReactiveController {\n private lastScrollY = 0\n private lastFocused?: HTMLElement\n\n constructor(host: ReactiveControllerHost & HTMLElement, private boundary: () => HTMLElement = () => host) {\n host.addController(this)\n }\n\n hostDisconnected() {\n this.release()\n }\n\n trap() {\n this.lastScrollY = window.scrollY\n this.boundary().addEventListener(\"focusout\", this.handleFocusOut)\n window.addEventListener(\"scroll\", this.restoreScroll)\n window.addEventListener(\"focusin\", this.handleFocusIn)\n }\n\n release() {\n this.lastScrollY = 0\n this.lastFocused = undefined\n\n this.boundary().removeEventListener(\"focusout\", this.handleFocusOut)\n window.removeEventListener(\"scroll\", this.restoreScroll)\n window.removeEventListener(\"focusin\", this.handleFocusIn)\n }\n\n private handleFocusOut = (e: FocusEvent) => {\n this.lastFocused = e.target as HTMLElement\n\n if (e.relatedTarget === this.boundary()) {\n this.recaptureFocus()\n }\n }\n\n private handleFocusIn = (e: FocusEvent) => {\n const isOutside = !e.composedPath().includes(this.boundary())\n\n if (isOutside) {\n this.recaptureFocus()\n }\n }\n\n private recaptureFocus() {\n this.lastFocused?.focus({ preventScroll: true })\n }\n\n private restoreScroll = () => {\n window.scrollTo(window.scrollX, this.lastScrollY)\n }\n}\n","/* eslint-disable max-classes-per-file */\nimport { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { FocusTrapController } from \"../common/controllers/FocusTrapController.js\"\nimport { LightDismissController, LightDismissOptions } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\n\nclass Stack<T> {\n private items: T[] = []\n\n get length() {\n return this.items.length\n }\n\n get top(): T | undefined {\n return this.items[this.length - 1]\n }\n\n push(item: T) {\n this.items.push(item)\n }\n\n pop() {\n return this.items.pop()\n }\n\n remove(item: T) {\n const index = this.items.indexOf(item)\n\n if (index !== -1) {\n this.items.splice(index, 1)\n }\n }\n}\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === \"button\"\n\ntype ModalControllerOptions = {\n isOpen: LightDismissOptions[\"isOpen\"]\n onDismiss: LightDismissOptions[\"onDismiss\"]\n close: (returnValue?: string) => void\n backdrop: () => HTMLElement\n dialog: () => HTMLElement\n}\n\nexport class ModalController implements ReactiveController {\n private static openModals = new Stack<ModalController>()\n\n private scrollBar: ScrollbarController\n private focusTrap: FocusTrapController\n private lightDismiss: LightDismissController\n private events: EventController\n private options: ModalControllerOptions\n\n private trigger?: HTMLElement\n private lastButton?: HTMLButtonElement\n\n constructor(private host: ReactiveControllerHost & HTMLElement, options: ModalControllerOptions) {\n host.addController(this)\n this.options = options\n\n this.scrollBar = new ScrollbarController(host)\n this.focusTrap = new FocusTrapController(host, options.dialog)\n this.events = new EventController(host)\n this.lightDismiss = new LightDismissController(host, {\n isOpen: options.isOpen,\n isDismissible: node => node !== options.dialog(),\n onDismiss: this.handleLightDismiss,\n })\n }\n\n hostConnected() {\n // if submit event is not supported, let's do a basic polyfill\n if (!window.SubmitEvent) {\n this.events.listen(this.host, \"click\", this.trackLastButton, true)\n this.events.listen(this.host, \"submit\", this.polyfillSubmitter, true)\n }\n\n this.events.listen(this.host, \"transitionend\", this.handleTransitionEnd)\n this.events.listen(this.host, \"submit\", this.handleSubmit)\n }\n\n hostDisconnected(): void {\n ModalController.openModals.remove(this)\n }\n\n block() {\n // if there is already a modal open, release its focus trap\n ModalController.openModals.top?.focusTrap.release()\n\n // add this modal to the stack of open modals\n ModalController.openModals.push(this)\n\n // hide scrollbar and prevent scroll on body\n this.scrollBar.hide()\n\n // store the element that was focused prior to modal opening\n this.trigger = document.activeElement as HTMLElement\n\n // handle initial (auto)focus\n const focusTarget = this.host.querySelector<HTMLElement>(\"[autofocus]\") || this.host\n focusTarget.focus()\n\n // finally, we should enable the focus trap\n this.focusTrap.trap()\n }\n\n unblock() {\n // it does not make sense to unblock a modal if it is not the top-most modal\n if (ModalController.openModals.top !== this) {\n return\n }\n\n ModalController.openModals.pop()\n\n // ensure modal is scrolled to top ready for re-open\n this.options.backdrop().scrollTop = 0\n\n // we need to release the focus trap...\n this.focusTrap.release()\n\n // ...before we can return focus to the trigger\n this.trigger?.focus()\n this.trigger = undefined\n\n // if there are still modals open, enable the next modal's focus trap\n ModalController.openModals.top?.focusTrap.trap()\n }\n\n /**\n * capture the last button clicked, so that we can polyfill `submitter` property in submit event\n */\n private trackLastButton = (e: Event) => {\n const target = e.target as HTMLElement\n\n if (isButton(target)) {\n this.lastButton = target\n }\n }\n\n private polyfillSubmitter = (e: Event) => {\n // @ts-expect-error submitter is readonly, but this is only called if SubmitEvent is not supported\n e.submitter = this.lastButton\n }\n\n private handleTransitionEnd = (e: TransitionEvent) => {\n // scrollbar should only be restored when the backdrop has transitioned\n // that way we avoid awkward double scrollbars.\n if (!this.options.isOpen() && e.target === this.options.backdrop()) {\n this.scrollBar.restore()\n }\n }\n\n private handleLightDismiss = (e: Event) => {\n if (this.host.contains(e.target as Node)) {\n this.options.onDismiss(e)\n }\n }\n\n private handleSubmit = (e: SubmitEvent) => {\n this.lastButton = undefined\n\n const target = e.target as HTMLFormElement\n const submitter = e.submitter as HTMLButtonElement\n\n const isDialogProperty = target.method === \"dialog\"\n const isDialogAttr = target.getAttribute(\"method\") === \"dialog\"\n\n // if they mismatch, it means \"dialog\" method is not supported,\n // so we should polyfill the fact it does not do a full submit\n if (isDialogAttr && !isDialogProperty) {\n e.preventDefault()\n }\n\n if (isDialogAttr || isDialogProperty) {\n this.options.close(submitter?.value)\n }\n }\n}\n"],"names":["FocusTrapController","constructor","host","boundary","this","lastScrollY","handleFocusOut","e","lastFocused","target","relatedTarget","recaptureFocus","handleFocusIn","composedPath","includes","restoreScroll","window","scrollTo","scrollX","addController","hostDisconnected","release","trap","scrollY","addEventListener","undefined","removeEventListener","_a","focus","preventScroll","ModalController","options","trackLastButton","localName","lastButton","polyfillSubmitter","submitter","handleTransitionEnd","isOpen","backdrop","scrollBar","restore","handleLightDismiss","contains","onDismiss","handleSubmit","isDialogProperty","method","isDialogAttr","getAttribute","preventDefault","close","value","ScrollbarController","focusTrap","dialog","events","EventController","lightDismiss","LightDismissController","isDismissible","node","hostConnected","SubmitEvent","listen","openModals","remove","block","top","push","hide","trigger","document","activeElement","querySelector","unblock","pop","scrollTop","_b","items","length","item","index","indexOf","splice"],"mappings":"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"}
|
package/lib/Select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as n,s as r}from"./lit-element-9178eae5.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-4598a996.js";import{n as a}from"./ref-0e619221.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-158f63fb.js";import{F as c}from"./FocusableMixin-34870ed3.js";import{F as p}from"./FormAssociatedMixin-3cc6e83b.js";import{A as u}from"./AutocompleteMixin-370de2be.js";import{S as b,i as m}from"./SizeMixin-4559b224.js";import{s as h}from"./Component-92eb6234.js";import{s as v}from"./FormField-081da729.js";import{S as f}from"./SlotController-ea6eff46.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-3c726b20.js";import"./cond-338158e9.js";import"./Spinner.js";import"./state-70f38ceb.js";import"./unsafe-html-6be42999.js";import"./observe-a9c6dfb6.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var x=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g transform="translate(6,6) scale(0.9)"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></g></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const g=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-border-color:var(--n-color-border-hover);--_n-button-background-color:var(--n-color-button-hover)}.n-label-container:hover+.n-select-container nord-button nord-icon,select:hover+nord-button nord-icon{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--_n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}
|
|
1
|
+
import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as n,s as r}from"./lit-element-9178eae5.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-4598a996.js";import{n as a}from"./ref-0e619221.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-158f63fb.js";import{F as c}from"./FocusableMixin-34870ed3.js";import{F as p}from"./FormAssociatedMixin-3cc6e83b.js";import{A as u}from"./AutocompleteMixin-370de2be.js";import{S as b,i as m}from"./SizeMixin-4559b224.js";import{s as h}from"./Component-92eb6234.js";import{s as v}from"./FormField-081da729.js";import{S as f}from"./SlotController-ea6eff46.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-3c726b20.js";import"./cond-338158e9.js";import"./Spinner.js";import"./state-70f38ceb.js";import"./unsafe-html-6be42999.js";import"./observe-a9c6dfb6.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var x=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g transform="translate(6,6) scale(0.9)"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></g></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const g=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-border-color:var(--n-color-border-hover);--_n-button-background-color:var(--n-color-button-hover)}.n-label-container:hover+.n-select-container nord-button nord-icon,select:hover+nord-button nord-icon{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--_n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(x);let j=class extends(b(p(u(d(c(r)))))){constructor(){super(...arguments),this.defaultSlot=new f(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e),o=m[this.size]||m.m;return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button size="${this.size}" tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="icon"></slot>${t}<nord-icon slot="end" size="${o}" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${s(e.value)}" ?disabled="${e.disabled}" .selected="${e.value===this.value.toString()}">${e.text}</option>`}};j.styles=[h,v,g],e([i({reflect:!0,type:Boolean})],j.prototype,"expand",void 0),j=e([t("nord-select")],j);var $=j;export{$ as default};
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|
package/lib/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../icons/lib/assets/interface-dropdown-small.js","../src/select/Select.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"translate(6,6) scale(0.9)\"><path fill=\"currentColor\" d=\"M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z\"/></g></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n","/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport * as dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin, iconSizeMap } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nIcon.registerIcon(dropdownIcon)\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-select\")\nexport default class Select extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.value || undefined\n }\n\n private defaultSlot = new SlotController(this)\n\n protected inputId = \"select\"\n\n /**\n * Controls whether the select expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n const iconSize = iconSizeMap[this.size] || iconSizeMap.m\n\n return html`\n <slot></slot>\n ${this.renderLabel()}\n\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n autocomplete=${this.autocomplete as any}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button\n size=${this.size}\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n ?expand=${this.expand}\n aria-hidden=\"true\"\n type=\"button\"\n >\n <slot slot=\"start\" name=\"
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../icons/lib/assets/interface-dropdown-small.js","../src/select/Select.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"translate(6,6) scale(0.9)\"><path fill=\"currentColor\" d=\"M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z\"/></g></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n","/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport * as dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin, iconSizeMap } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nIcon.registerIcon(dropdownIcon)\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-select\")\nexport default class Select extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.value || undefined\n }\n\n private defaultSlot = new SlotController(this)\n\n protected inputId = \"select\"\n\n /**\n * Controls whether the select expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n const iconSize = iconSizeMap[this.size] || iconSizeMap.m\n\n return html`\n <slot></slot>\n ${this.renderLabel()}\n\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n autocomplete=${this.autocomplete as any}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button\n size=${this.size}\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n ?expand=${this.expand}\n aria-hidden=\"true\"\n type=\"button\"\n >\n <slot slot=\"start\" name=\"icon\"></slot>\n ${buttonText}\n <nord-icon slot=\"end\" size=${iconSize} name=\"interface-dropdown-small\"></nord-icon>\n </nord-button>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private get options() {\n return Array.from(this.querySelectorAll(\"option\"))\n }\n\n private getButtonText(options: HTMLOptionElement[]): string {\n const selected = options.find(option => option.value === this.value.toString())\n\n if (selected) {\n return selected.text\n }\n\n if (this.placeholder) {\n return this.placeholder\n }\n\n if (options[0]) {\n return options[0].text\n }\n\n return \"\"\n }\n\n private renderOption(option: HTMLOptionElement) {\n return html`\n <option\n value=${ifDefined(option.value)}\n ?disabled=${option.disabled}\n .selected=${option.value === this.value.toString()}\n >\n ${option.text}\n </option>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-select\": Select\n }\n}\n"],"names":["Icon","registerIcon","dropdownIcon","Select","SizeMixin","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","iconSize","iconSizeMap","size","m","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"4gCAAe,0gBACM,gCACD,8/CCmBpBA,EAAKC,aAAaC,GAclB,IAAqBC,EAArB,cAAoCC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADlEC,kCASUC,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SAKwBH,KAAMI,QAAG,CA+EtD,CA1FwBC,gBACrB,OAAOL,KAAKM,YAASC,CACtB,CAWDC,SACE,MAAMC,EAAiBT,KAAKU,QACtBC,EAAaX,KAAKY,cAAcH,GAChCI,EAAWC,EAAYd,KAAKe,OAASD,EAAYE,EAEvD,OAAOC,CAAI,gBAEPjB,KAAKkB,wDAIDC,EAAInB,KAAKoB,qBACNpB,KAAKG,uBACEH,KAAKqB,wBACLrB,KAAKsB,mBACVC,EAAUvB,KAAKwB,mBACZxB,KAAKyB,yBACNzB,KAAK0B,kCACKH,EAAUvB,KAAK2B,oCACnBJ,EAAUvB,KAAK4B,gCACf5B,KAAK6B,iBAElB7B,KAAK8B,aAAeb,CAAI,oDAAwCjB,KAAKM,UAASN,KAAK8B,0BACnFrB,EAAesB,KAAIC,GAAUhC,KAAKiC,aAAaD,mCAI1ChC,KAAKe,kCAEAf,KAAKqB,sBACPrB,KAAKI,kFAKbO,gCAC2BE,sEAI/Bb,KAAKkC,eAEV,CAEWxB,cACV,OAAOyB,MAAMC,KAAKpC,KAAKqC,iBAAiB,UACzC,CAEOzB,cAAcF,GACpB,MAAM4B,EAAW5B,EAAQ6B,MAAKP,GAAUA,EAAO1B,QAAUN,KAAKM,MAAMkC,aAEpE,OAAIF,EACKA,EAASG,KAGdzC,KAAK8B,YACA9B,KAAK8B,YAGVpB,EAAQ,GACHA,EAAQ,GAAG+B,KAGb,EACR,CAEOR,aAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAO1B,sBACb0B,EAAOX,wBACPW,EAAO1B,QAAUN,KAAKM,MAAMkC,eAEtCR,EAAOS,eAGd,GA3FMjD,EAAMkD,OAAG,CAACC,EAAgBC,EAAgBC,GAaLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyB1D,EAAA2D,UAAA,cAAA,GAhBvC3D,EAAMsD,EAAA,CAD1BM,EAAc,gBACM5D,SAAAA"}
|