@nordhealth/components 1.14.0 → 1.14.3

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/lib/Popout.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as o,s as i,y as s}from"./lit-element-79bc2e0e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as p,o as l,f as d,s as h,h as m,a as c}from"./positioning-3bbd3548.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{N as g}from"./events-731d0007.js";import{s as f}from"./Component-49a41387.js";import{D as v}from"./DirectionController-8b298382.js";import{o as b}from"./observe-a9c6dfb6.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";const y=o`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--n-popout-position-x);top:var(--n-popout-position-y);color:var(--n-color-text)}.n-popout{visibility:hidden;opacity:0;pointer-events:none;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transform:translateY(-10px) scale(.97);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}@media (max-width:35.9375em){:host{inline-size:100%;inset:0;inset-block-start:auto}.n-popout{transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);transform:translateY(100%);transform-origin:bottom center;border-radius:0}}.n-popout.top-end,.n-popout.top-start{transform:translateY(10px) scale(.97)}.n-popout.left-start{transform:translateX(10px) scale(.97)}.n-popout.left-end,.n-popout.top-end{transform-origin:bottom right}.n-popout.bottom-end,.n-popout.left-start{transform-origin:top right}.n-popout.left-end{transform:translateX(10px) scale(.97);transform-origin:bottom right}.n-popout.right-end,.n-popout.right-start{transform:translateX(-10px) scale(.97);transform-origin:bottom left}.n-popout.right-start{transform-origin:top left}.n-popout.top-start.is-rtl{transform-origin:top right}.n-popout.top-end.is-rtl{transform-origin:top left}.n-popout.bottom-start.is-rtl{transform-origin:bottom right}.n-popout.bottom-end.is-rtl{transform-origin:bottom left}.n-popout[aria-hidden=false]{transition-property:transform,opacity;visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}`,w=matchMedia("(max-width: 35.9375em)");let x=class extends i{constructor(){super(...arguments),this.dismiss=new u(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this&&t!==this.targetElement}),this.direction=new v(this),this.open=!1,this.smallViewport=w.matches,this.align="start",this.position="block-end",this.id="",this.updatePosition=async()=>{var t;const{x:e,y:o,placement:i,middlewareData:s}=await a(this.targetElement,this,{strategy:"fixed",placement:p(this.position,this.align,this.direction.dir),middleware:[l(8),d(),h({padding:8}),m()]});this.computedPosition=i,this.style.setProperty("--n-popout-position-x",`${e}px`),this.style.setProperty("--n-popout-position-y",`${o}px`),(null===(t=s.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.smallViewport?this.show():this.updatePosition().then((()=>this.show()))},this.handleMediaQueryChange=()=>{this.smallViewport=w.matches,this.smallViewport||(this.cleanupAutoUpdate=c(this.targetElement,this,this.updatePosition))}}show(){this.open||(this.open=!0,this.smallViewport||(this.cleanupAutoUpdate=c(this.targetElement,this,this.updatePosition)),this.updateComplete.then((()=>{this.dispatchEvent(new g("open"))})))}hide(t=!0){var e;this.open&&(this.open=!1,null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.dispatchEvent(new g("close")),t&&this.targetElement.focus({preventScroll:!0}))}firstUpdated(){this.smallViewport||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.targetElement=this.getToggle(),this.targetElement.addEventListener("click",this.toggleOpen),w.addEventListener("change",this.handleMediaQueryChange)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.targetElement.removeAttribute("aria-expanded"),this.targetElement.removeEventListener("click",this.toggleOpen),w.removeEventListener("change",this.handleMediaQueryChange)}render(){return s`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}"><slot></slot></div>`}handleIdChange(){this.id||console.warn("NORD: popout requires an id attribute and value")}handleOpenChange(){this.targetElement.setAttribute("aria-expanded",`${this.open}`)}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};x.styles=[f,y],t([r()],x.prototype,"open",void 0),t([r()],x.prototype,"computedPosition",void 0),t([r()],x.prototype,"smallViewport",void 0),t([n({reflect:!0})],x.prototype,"align",void 0),t([n({reflect:!0})],x.prototype,"position",void 0),t([n({reflect:!0})],x.prototype,"id",void 0),t([b("id")],x.prototype,"handleIdChange",null),t([b("open")],x.prototype,"handleOpenChange",null),x=t([e("nord-popout")],x);var E=x;export{E as default};
1
+ import{_ as t,e as o}from"./query-assigned-elements-e6cbac30.js";import{i as e,s as i,y as s}from"./lit-element-79bc2e0e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as p,o as l,f as h,s as d,h as m,a as c}from"./positioning-3bbd3548.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{N as f}from"./events-731d0007.js";import{s as g}from"./Component-49a41387.js";import{D as v}from"./DirectionController-8b298382.js";import{o as b}from"./observe-a9c6dfb6.js";import{E as y}from"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";const w=e`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--n-popout-position-x);top:var(--n-popout-position-y);color:var(--n-color-text)}.n-popout{visibility:hidden;opacity:0;pointer-events:none;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transform:translateY(-10px) scale(.97);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}@media (max-width:35.9375em){:host{inline-size:100%;inset:0;inset-block-start:auto}.n-popout{transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);transform:translateY(100%);transform-origin:bottom center;border-radius:0}}.n-popout.top-end,.n-popout.top-start{transform:translateY(10px) scale(.97)}.n-popout.left-start{transform:translateX(10px) scale(.97)}.n-popout.left-end,.n-popout.top-end{transform-origin:bottom right}.n-popout.bottom-end,.n-popout.left-start{transform-origin:top right}.n-popout.left-end{transform:translateX(10px) scale(.97);transform-origin:bottom right}.n-popout.right-end,.n-popout.right-start{transform:translateX(-10px) scale(.97);transform-origin:bottom left}.n-popout.right-start{transform-origin:top left}.n-popout.top-start.is-rtl{transform-origin:top right}.n-popout.top-end.is-rtl{transform-origin:top left}.n-popout.bottom-start.is-rtl{transform-origin:bottom right}.n-popout.bottom-end.is-rtl{transform-origin:bottom left}.n-popout[aria-hidden=false]{transition-property:transform,opacity;visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}`,x=matchMedia("(max-width: 35.9375em)");let C=class extends i{constructor(){super(...arguments),this.dismiss=new u(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this&&t!==this.targetElement}),this.events=new y(this),this.direction=new v(this),this.open=!1,this.smallViewport=x.matches,this.align="start",this.position="block-end",this.id="",this.updatePosition=async()=>{var t;const{x:o,y:e,placement:i,middlewareData:s}=await a(this.targetElement,this,{strategy:"fixed",placement:p(this.position,this.align,this.direction.dir),middleware:[l(8),h(),d({padding:8}),m()]});this.computedPosition=i,this.style.setProperty("--n-popout-position-x",`${o}px`),this.style.setProperty("--n-popout-position-y",`${e}px`),(null===(t=s.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.smallViewport?this.show():this.updatePosition().then((()=>this.show()))},this.handleMediaQueryChange=()=>{this.smallViewport=x.matches,this.smallViewport||(this.cleanupAutoUpdate=c(this.targetElement,this,this.updatePosition))}}show(){this.open||(this.open=!0,this.smallViewport||(this.cleanupAutoUpdate=c(this.targetElement,this,this.updatePosition)),this.updateComplete.then((()=>{this.dispatchEvent(new f("open"))})))}hide(t=!0){var o;this.open&&(this.open=!1,null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this),this.dispatchEvent(new f("close")),t&&this.targetElement.focus({preventScroll:!0}))}firstUpdated(){this.smallViewport||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.targetElement=this.getToggle(),this.events.listen(this.targetElement,"click",this.toggleOpen),this.events.listen(x,"change",this.handleMediaQueryChange)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.targetElement.removeAttribute("aria-expanded")}render(){return s`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}"><slot></slot></div>`}handleIdChange(){this.id||console.warn("NORD: popout requires an id attribute and value")}handleOpenChange(){this.targetElement.setAttribute("aria-expanded",`${this.open}`)}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};C.styles=[g,w],t([r()],C.prototype,"open",void 0),t([r()],C.prototype,"computedPosition",void 0),t([r()],C.prototype,"smallViewport",void 0),t([n({reflect:!0})],C.prototype,"align",void 0),t([n({reflect:!0})],C.prototype,"position",void 0),t([n({reflect:!0})],C.prototype,"id",void 0),t([b("id")],C.prototype,"handleIdChange",null),t([b("open")],C.prototype,"handleOpenChange",null),C=t([o("nord-popout")],C);var E=C;export{E as default};
2
2
  //# sourceMappingURL=Popout.js.map
package/lib/Popout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Popout.js","sources":["../src/popout/Popout.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, shift, offset, flip, hide, autoUpdate, Placement } from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery = matchMedia(\"(max-width: 35.9375em)\")\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status ready\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends LitElement {\n static styles = [componentStyle, style]\n\n private targetElement!: HTMLElement\n private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n /**\n * Handle dismissal of the popout, clicking outside the target button and popout.\n */\n private dismiss = new LightDismissController(this, {\n isOpen: () => this.open,\n onDismiss: e => this.hide(e.type !== \"click\"),\n isDismissible: node => node !== this && node !== this.targetElement,\n })\n\n private direction = new DirectionController(this)\n\n @state() private open = false\n\n @state() private computedPosition?: Placement\n\n @state() private smallViewport = mediaQuery.matches\n\n /**\n * Set the alignment of the popout in relation to the toggle depending on the position.\n * `start` will align the left of the popout to the left of the toggle.\n * `end` will align the right of the popout to the right of the toggle.\n * A popout with a set position of `inline-start` or `inline-end` will switch\n * `start` and `end` to the top and bottom of the popout respectively.\n */\n @property({ reflect: true }) align: \"start\" | \"end\" = \"start\"\n\n /**\n * Set the position of the popout in relation to the toggle.\n * Options follow logical properties.\n * `block-start` and `block-end` referring to top and bottom respectively,\n * `inline-start` and `inline-end` referring to left and right respectively.\n */\n @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-end\"\n\n /**\n * The id for the active element to reference via aria-controls.\n */\n @property({ reflect: true }) id: string = \"\"\n\n /**\n * Show the popout, moving focus to the calendar inside.\n */\n show() {\n if (this.open) {\n return\n }\n\n this.open = true\n\n if (!this.smallViewport) {\n this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n }\n\n // we should only focus once the popout is visible after render is complete\n this.updateComplete.then(() => {\n /**\n * Dispatched when the popout is opened.\n */\n this.dispatchEvent(new NordEvent(\"open\"))\n })\n }\n\n /**\n * Hide the popout.\n * @param {boolean} moveFocusToButton prevent focus returning to the target\n * button. Default is true.\n */\n hide(moveFocusToButton = true) {\n if (!this.open) {\n return\n }\n\n this.open = false\n\n this.cleanupAutoUpdate?.()\n\n /**\n * Dispatched when the popout is closed.\n */\n this.dispatchEvent(new NordEvent(\"close\"))\n\n if (moveFocusToButton) {\n this.targetElement.focus({ preventScroll: true })\n }\n }\n\n /**\n * Position the popout on load.\n */\n firstUpdated() {\n if (!this.smallViewport) {\n this.updatePosition()\n }\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.targetElement = this.getToggle()\n this.targetElement.addEventListener(\"click\", this.toggleOpen)\n\n mediaQuery.addEventListener(\"change\", this.handleMediaQueryChange)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this.cleanupAutoUpdate?.()\n\n this.targetElement.removeAttribute(\"aria-expanded\")\n this.targetElement.removeEventListener(\"click\", this.toggleOpen)\n\n mediaQuery.removeEventListener(\"change\", this.handleMediaQueryChange)\n }\n\n render() {\n return html`\n <div\n class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n >\n <slot></slot>\n </div>\n `\n }\n\n @observe(\"id\")\n protected handleIdChange() {\n if (!this.id) {\n // eslint-disable-next-line no-console\n console.warn(\"NORD: popout requires an id attribute and value\")\n }\n }\n\n @observe(\"open\")\n protected handleOpenChange() {\n this.targetElement.setAttribute(\"aria-expanded\", `${this.open}`)\n }\n\n /**\n * Get the position of the element toggling the popout\n * and position the popout underneath it, taking into account the optional placement.\n */\n private updatePosition = async () => {\n const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this, {\n strategy: \"fixed\",\n placement: logicalToPhysical(this.position, this.align, this.direction.dir),\n middleware: [\n offset(8),\n flip(),\n shift({\n padding: 8,\n }),\n hide(),\n ],\n })\n\n this.computedPosition = placement\n\n // use physical properties here since floating-ui\n // works exclusively in physical dimensions\n // we do all the mapping in logicalToPhysical\n this.style.setProperty(\"--n-popout-position-x\", `${x}px`)\n this.style.setProperty(\"--n-popout-position-y\", `${y}px`)\n\n if (middlewareData.hide?.referenceHidden) {\n this.hide()\n }\n }\n\n /**\n * Toggle the popout open or closed using state.\n * Updating the position to underneath the target button before the popout is opened.\n */\n private toggleOpen = (e: Event) => {\n e.preventDefault()\n if (this.open) {\n this.hide(false)\n } else if (!this.smallViewport) {\n this.updatePosition().then(() => this.show())\n } else {\n this.show()\n }\n }\n\n private getToggle() {\n const rootNode = this.getRootNode() as Document | ShadowRoot\n const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n if (toggle instanceof HTMLSlotElement) {\n return toggle.assignedElements()[0] as HTMLElement\n }\n\n return toggle\n }\n\n /**\n * Update the smallViewport flag to switch between \"sheet\" and \"floating\".\n * autoUpdate is needed when a viewport gets larger and the popout is open.\n */\n private handleMediaQueryChange = () => {\n this.smallViewport = mediaQuery.matches\n if (!this.smallViewport) {\n this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-popout\": Popout\n }\n}\n"],"names":["mediaQuery","matchMedia","Popout","LitElement","constructor","this","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","targetElement","direction","DirectionController","smallViewport","matches","align","position","id","updatePosition","async","x","y","placement","middlewareData","computePosition","strategy","logicalToPhysical","dir","middleware","offset","flip","shift","padding","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","show","then","handleMediaQueryChange","cleanupAutoUpdate","autoUpdate","updateComplete","dispatchEvent","NordEvent","moveFocusToButton","call","focus","preventScroll","firstUpdated","connectedCallback","super","getToggle","addEventListener","disconnectedCallback","removeAttribute","removeEventListener","render","html","handleIdChange","console","warn","handleOpenChange","setAttribute","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","styles","componentStyle","__decorate","state","prototype","property","reflect","observe","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"Popout.js","sources":["../src/popout/Popout.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, shift, offset, flip, hide, autoUpdate, Placement } from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery = matchMedia(\"(max-width: 35.9375em)\")\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status ready\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends LitElement {\n static styles = [componentStyle, style]\n\n private targetElement!: HTMLElement\n private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n /**\n * Handle dismissal of the popout, clicking outside the target button and popout.\n */\n private dismiss = new LightDismissController(this, {\n isOpen: () => this.open,\n onDismiss: e => this.hide(e.type !== \"click\"),\n isDismissible: node => node !== this && node !== this.targetElement,\n })\n\n private events = new EventController(this)\n private direction = new DirectionController(this)\n\n @state() private open = false\n\n @state() private computedPosition?: Placement\n\n @state() private smallViewport = mediaQuery.matches\n\n /**\n * Set the alignment of the popout in relation to the toggle depending on the position.\n * `start` will align the left of the popout to the left of the toggle.\n * `end` will align the right of the popout to the right of the toggle.\n * A popout with a set position of `inline-start` or `inline-end` will switch\n * `start` and `end` to the top and bottom of the popout respectively.\n */\n @property({ reflect: true }) align: \"start\" | \"end\" = \"start\"\n\n /**\n * Set the position of the popout in relation to the toggle.\n * Options follow logical properties.\n * `block-start` and `block-end` referring to top and bottom respectively,\n * `inline-start` and `inline-end` referring to left and right respectively.\n */\n @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-end\"\n\n /**\n * The id for the active element to reference via aria-controls.\n */\n @property({ reflect: true }) id: string = \"\"\n\n /**\n * Show the popout, moving focus to the calendar inside.\n */\n show() {\n if (this.open) {\n return\n }\n\n this.open = true\n\n if (!this.smallViewport) {\n this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n }\n\n // we should only focus once the popout is visible after render is complete\n this.updateComplete.then(() => {\n /**\n * Dispatched when the popout is opened.\n */\n this.dispatchEvent(new NordEvent(\"open\"))\n })\n }\n\n /**\n * Hide the popout.\n * @param {boolean} moveFocusToButton prevent focus returning to the target\n * button. Default is true.\n */\n hide(moveFocusToButton = true) {\n if (!this.open) {\n return\n }\n\n this.open = false\n\n this.cleanupAutoUpdate?.()\n\n /**\n * Dispatched when the popout is closed.\n */\n this.dispatchEvent(new NordEvent(\"close\"))\n\n if (moveFocusToButton) {\n this.targetElement.focus({ preventScroll: true })\n }\n }\n\n /**\n * Position the popout on load.\n */\n firstUpdated() {\n if (!this.smallViewport) {\n this.updatePosition()\n }\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.targetElement = this.getToggle()\n this.events.listen(this.targetElement, \"click\", this.toggleOpen)\n this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this.cleanupAutoUpdate?.()\n this.targetElement.removeAttribute(\"aria-expanded\")\n }\n\n render() {\n return html`\n <div\n class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n >\n <slot></slot>\n </div>\n `\n }\n\n @observe(\"id\")\n protected handleIdChange() {\n if (!this.id) {\n // eslint-disable-next-line no-console\n console.warn(\"NORD: popout requires an id attribute and value\")\n }\n }\n\n @observe(\"open\")\n protected handleOpenChange() {\n this.targetElement.setAttribute(\"aria-expanded\", `${this.open}`)\n }\n\n /**\n * Get the position of the element toggling the popout\n * and position the popout underneath it, taking into account the optional placement.\n */\n private updatePosition = async () => {\n const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this, {\n strategy: \"fixed\",\n placement: logicalToPhysical(this.position, this.align, this.direction.dir),\n middleware: [\n offset(8),\n flip(),\n shift({\n padding: 8,\n }),\n hide(),\n ],\n })\n\n this.computedPosition = placement\n\n // use physical properties here since floating-ui\n // works exclusively in physical dimensions\n // we do all the mapping in logicalToPhysical\n this.style.setProperty(\"--n-popout-position-x\", `${x}px`)\n this.style.setProperty(\"--n-popout-position-y\", `${y}px`)\n\n if (middlewareData.hide?.referenceHidden) {\n this.hide()\n }\n }\n\n /**\n * Toggle the popout open or closed using state.\n * Updating the position to underneath the target button before the popout is opened.\n */\n private toggleOpen = (e: Event) => {\n e.preventDefault()\n if (this.open) {\n this.hide(false)\n } else if (!this.smallViewport) {\n this.updatePosition().then(() => this.show())\n } else {\n this.show()\n }\n }\n\n private getToggle() {\n const rootNode = this.getRootNode() as Document | ShadowRoot\n const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n if (toggle instanceof HTMLSlotElement) {\n return toggle.assignedElements()[0] as HTMLElement\n }\n\n return toggle\n }\n\n /**\n * Update the smallViewport flag to switch between \"sheet\" and \"floating\".\n * autoUpdate is needed when a viewport gets larger and the popout is open.\n */\n private handleMediaQueryChange = () => {\n this.smallViewport = mediaQuery.matches\n if (!this.smallViewport) {\n this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-popout\": Popout\n }\n}\n"],"names":["mediaQuery","matchMedia","Popout","LitElement","constructor","this","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","targetElement","events","EventController","direction","DirectionController","smallViewport","matches","align","position","id","updatePosition","async","x","y","placement","middlewareData","computePosition","strategy","logicalToPhysical","dir","middleware","offset","flip","shift","padding","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","show","then","handleMediaQueryChange","cleanupAutoUpdate","autoUpdate","updateComplete","dispatchEvent","NordEvent","moveFocusToButton","call","focus","preventScroll","firstUpdated","connectedCallback","super","getToggle","listen","disconnectedCallback","removeAttribute","render","html","handleIdChange","console","warn","handleOpenChange","setAttribute","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","styles","componentStyle","__decorate","state","prototype","property","reflect","observe","customElement"],"mappings":"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"}
package/lib/Select.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as n,s as r}from"./lit-element-79bc2e0e.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-f43b1487.js";import{n as a}from"./ref-697b28b5.js";import{o as l}from"./unsafe-html-be8023cd.js";import"./Button.js";import{I as d}from"./InputMixin-158f63fb.js";import{F as c}from"./FocusableMixin-99db12c1.js";import{F as p}from"./FormAssociatedMixin-f6e5b3cd.js";import{A as u}from"./AutocompleteMixin-370de2be.js";import{s as b}from"./Component-49a41387.js";import{s as v}from"./FormField-72062bf1.js";import{S as m}from"./SlotController-ea6eff46.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-9a6e398f.js";import"./cond-0a8d4554.js";import"./Spinner.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const h=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}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{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]) svg{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}[slot=end] svg{color:var(--n-color-icon);min-inline-size:var(--n-size-icon-s);max-inline-size:var(--n-size-icon-s)}::slotted([slot=start]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let f=class extends(p(u(d(c(r))))){constructor(){super(...arguments),this.defaultSlot=new m(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const t=this.options,e=this.getButtonText(t);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>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="start"></slot>${e}<div slot="end">${l('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><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"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(t){const e=t.find((t=>t.value===this.value.toString()));return e?e.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return n`<option value="${s(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};f.styles=[b,v,h],t([i({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),f=t([e("nord-select")],f);var x=f;export{x as default};
1
+ import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as n,s as r}from"./lit-element-79bc2e0e.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-f43b1487.js";import{n as a}from"./ref-697b28b5.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-158f63fb.js";import{F as c}from"./FocusableMixin-99db12c1.js";import{F as p}from"./FormAssociatedMixin-f6e5b3cd.js";import{A as u}from"./AutocompleteMixin-370de2be.js";import{s as b}from"./Component-49a41387.js";import{s as m}from"./FormField-72062bf1.js";import{S as h}from"./SlotController-ea6eff46.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-9a6e398f.js";import"./cond-0a8d4554.js";import"./Spinner.js";import"./state-70f38ceb.js";import"./unsafe-html-be8023cd.js";import"./observe-a9c6dfb6.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><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"/></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const f=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-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-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}::slotted([slot=start]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(v);let x=class extends(p(u(d(c(r))))){constructor(){super(...arguments),this.defaultSlot=new h(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const t=this.options,e=this.getButtonText(t);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>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="start"></slot>${e}<nord-icon slot="end" size="s" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(t){const e=t.find((t=>t.value===this.value.toString()));return e?e.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return n`<option value="${s(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};x.styles=[b,m,f],t([i({reflect:!0,type:Boolean})],x.prototype,"expand",void 0),x=t([e("nord-select")],x);var g=x;export{g as default};
2
2
  //# sourceMappingURL=Select.js.map
package/lib/Select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../../icons/lib/assets/interface-dropdown-small.js"],"sourcesContent":["/* 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 { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport \"../button/Button.js\"\n\nimport dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\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\"\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\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 FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement)))) {\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\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 tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"start\" name=\"start\"></slot>\n ${buttonText}\n <div slot=\"end\">${unsafeHTML(dropdownIcon)}</div>\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","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><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\"/></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n"],"names":["Select","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","unsafeHTML","renderError","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"g7EAgCA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAkBC,EAAWC,EAAeC,OAApGC,kCAOUC,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SAKwBH,KAAMI,QAAG,CAuEtD,CAlFwBC,gBACrB,OAAOL,KAAKM,YAASC,CACtB,CAWDC,SACE,MAAMC,EAAiBT,KAAKU,QACtBC,EAAaX,KAAKY,cAAcH,GAEtC,OAAOI,CAAI,gBAEPb,KAAKc,wDAIDC,EAAIf,KAAKgB,qBACNhB,KAAKG,uBACEH,KAAKiB,wBACLjB,KAAKkB,mBACVC,EAAUnB,KAAKoB,mBACZpB,KAAKqB,yBACNrB,KAAKsB,kCACKH,EAAUnB,KAAKuB,oCACnBJ,EAAUnB,KAAKwB,gCACfxB,KAAKyB,iBAElBzB,KAAK0B,aAAeb,CAAI,oDAAwCb,KAAKM,UAASN,KAAK0B,0BACnFjB,EAAekB,KAAIC,GAAU5B,KAAK6B,aAAaD,sDAGZ5B,KAAKiB,sBAAoBjB,KAAKI,mFAEjEO,oBACgBmB,EC5Eb,ofDgFP9B,KAAK+B,eAEV,CAEWrB,cACV,OAAOsB,MAAMC,KAAKjC,KAAKkC,iBAAiB,UACzC,CAEOtB,cAAcF,GACpB,MAAMyB,EAAWzB,EAAQ0B,MAAKR,GAAUA,EAAOtB,QAAUN,KAAKM,MAAM+B,aAEpE,OAAIF,EACKA,EAASG,KAGdtC,KAAK0B,YACA1B,KAAK0B,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,EACR,CAEOT,aAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOtB,sBACbsB,EAAOX,wBACPW,EAAOtB,QAAUN,KAAKM,MAAM+B,eAEtCT,EAAOU,eAGd,GAnFM7C,EAAM8C,OAAG,CAACC,EAAgBC,EAAgBC,GAaLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBtD,EAAAuD,UAAA,cAAA,GAdvCvD,EAAMkD,EAAA,CAD1BM,EAAc,gBACMxD,SAAAA"}
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\"><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\"/></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\"\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 FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement)))) {\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\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 tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"start\" name=\"start\"></slot>\n ${buttonText}\n <nord-icon slot=\"end\" size=\"s\" 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","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","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":"o9BAAe,6dACM,gCACD,omDCkBpBA,EAAKC,aAAaC,GAclB,IAAqBC,EAArB,cAAoCC,EAAoBC,EAAkBC,EAAWC,EAAeC,OAApGC,kCAOUC,KAAAC,YAAc,IAAIC,EAAeF,MAE/BA,KAAOG,QAAG,SAKwBH,KAAMI,QAAG,CAuEtD,CAlFwBC,gBACrB,OAAOL,KAAKM,YAASC,CACtB,CAWDC,SACE,MAAMC,EAAiBT,KAAKU,QACtBC,EAAaX,KAAKY,cAAcH,GAEtC,OAAOI,CAAI,gBAEPb,KAAKc,wDAIDC,EAAIf,KAAKgB,qBACNhB,KAAKG,uBACEH,KAAKiB,wBACLjB,KAAKkB,mBACVC,EAAUnB,KAAKoB,mBACZpB,KAAKqB,yBACNrB,KAAKsB,kCACKH,EAAUnB,KAAKuB,oCACnBJ,EAAUnB,KAAKwB,gCACfxB,KAAKyB,iBAElBzB,KAAK0B,aAAeb,CAAI,oDAAwCb,KAAKM,UAASN,KAAK0B,0BACnFjB,EAAekB,KAAIC,GAAU5B,KAAK6B,aAAaD,sDAGZ5B,KAAKiB,sBAAoBjB,KAAKI,mFAEjEO,mGAKJX,KAAK8B,eAEV,CAEWpB,cACV,OAAOqB,MAAMC,KAAKhC,KAAKiC,iBAAiB,UACzC,CAEOrB,cAAcF,GACpB,MAAMwB,EAAWxB,EAAQyB,MAAKP,GAAUA,EAAOtB,QAAUN,KAAKM,MAAM8B,aAEpE,OAAIF,EACKA,EAASG,KAGdrC,KAAK0B,YACA1B,KAAK0B,YAGVhB,EAAQ,GACHA,EAAQ,GAAG2B,KAGb,EACR,CAEOR,aAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOtB,sBACbsB,EAAOX,wBACPW,EAAOtB,QAAUN,KAAKM,MAAM8B,eAEtCR,EAAOS,eAGd,GAnFM5C,EAAM6C,OAAG,CAACC,EAAgBC,EAAgBC,GAaLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBrD,EAAAsD,UAAA,cAAA,GAdvCtD,EAAMiD,EAAA,CAD1BM,EAAc,gBACMvD,SAAAA"}