npm - @nordhealth/components - Versions diffs - 4.13.0 → 4.14.0 - Mend

@nordhealth/components 4.13.0 → 4.14.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.

Files changed (29) hide show

package/custom-elements.json +11322 -2335
package/lib/Button.js.map +1 -1
package/lib/Card.js.map +1 -1
package/lib/DatePicker.js +1 -1
package/lib/Dropdown.js +1 -1
package/lib/IconManager.js +1 -1
package/lib/Input.js.map +1 -1
package/lib/Modal.js +1 -1
package/lib/Modal.js.map +1 -1
package/lib/ModalController.js +1 -1
package/lib/ModalController.js.map +1 -1
package/lib/Popout-vR6LxNS9.js +2 -0
package/lib/Popout-vR6LxNS9.js.map +1 -0
package/lib/Popout.js +1 -1
package/lib/bundle.js +7 -7
package/lib/bundle.js.map +1 -1
package/lib/index.js +1 -1
package/lib/react.d.ts +12 -2
package/lib/src/button/Button.d.ts +1 -0
package/lib/src/card/Card.d.ts +4 -0
package/lib/src/index.d.ts +1 -1
package/lib/src/input/Input.d.ts +1 -2
package/lib/src/modal/Modal.d.ts +23 -3
package/lib/src/modal/ModalController.d.ts +2 -2
package/lib/src/popout/Popout.d.ts +7 -0
package/lib/vue.d.ts +24 -3
package/package.json +29 -24
package/lib/Popout-pKfh0-Zv.js +0 -2
package/lib/Popout-pKfh0-Zv.js.map +0 -1

package/lib/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["/* eslint-disable lit-a11y/accessible-name /\nimport type { TemplateResult } from 'lit'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDomController } from '../common/controllers/LightDomController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\n\nimport { cond } from '../common/directives/cond.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Button.css'\nimport '../spinner/Spinner.js'\n\n/\n Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n \n @status ready\n * @category action\n * @slot - The button content\n * @slot start - Used to place content at the start of button text. Typically used for icons.\n * @slot end - Used to place content at the end of button text. Typically used for icons.\n \n @cssprop [--n-button-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-button-gap=var(--n-space-s)] - Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the button.\n * @cssprop [--n-button-background-color=var(--n-color-button)] - Controls the background color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-border-color=var(--n-color-border-strong)] - Controls the border color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-text-align=center] - Controls the text alignment for the text in the button.\n * @cssprop [--n-button-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-button-color=var(--n-color-text)] - Controls the color of the text within the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the button.\n * @cssprop [--n-button-font-size=var(--n-font-size-m)] - Controls the size of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-font-weight=var(--n-font-weight)] - Controls the weight of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-min-block-size=var(--n-space-xl)] - Controls the minimum block size, or height, of the button using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-toggle-icon-color=var(--n-color-icon)] - Controls the color of toggle icon that gets rendered when the button is used as a [Dropdown](/components/dropdown/) toggle.\n /\n@customElement('nord-button')\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n static styles = [componentStyle, style]\n\n private defaultSlot = new SlotController(this)\n private buttonRef = createRef<HTMLButtonElement>()\n private events = new EventController(this)\n private lightDom = new LightDomController(this, {\n render: () => this.renderLightDom(),\n })\n\n /\n The style variant of the button.\n /\n @property({ reflect: true }) variant: 'default' \| 'primary' \| 'dashed' \| 'plain' \| 'danger' = 'default'\n\n /\n The type of the button.\n /\n @property({ reflect: true }) type: 'button' \| 'submit' \| 'reset' = 'submit'\n\n /\n The size of the button.\n * This affects font-size and padding.\n /\n @property({ reflect: true }) size: 's' \| 'm' \| 'l' = 'm'\n\n /\n This does not need to be documented,\n * since it is only for forwarding the aria-expanded attribute\n * to the internal button element.\n * @private\n /\n @property({ attribute: 'aria-expanded' }) accessibleExpanded?: 'true' \| 'false'\n\n /\n This does not need to be documented,\n * since it is only for forwarding the aria-haspopup attribute\n * to the internal button element.\n * @private\n /\n @property({ attribute: 'aria-haspopup' }) accessibleHasPopup?:\n \| 'false'\n \| 'true'\n \| 'menu'\n \| 'listbox'\n \| 'tree'\n \| 'grid'\n \| 'dialog'\n\n /\n When provided, renders the button as a link,\n * with its href attribute set to the given value.\n /\n @property({ reflect: true }) href?: string\n\n /\n When provided together with a href property, the button will\n * trigger a file download instead of a page visit.\n /\n @property({ reflect: true, type: Boolean }) download = false\n\n /\n When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n /\n @property() target: '_self' \| '_blank' \| '_parent' \| '_top' = '_self'\n\n /\n Controls whether the button expands to fill the width of its container.\n /\n @property({ reflect: true, type: Boolean }) expand = false\n\n /\n When provided, the button is rendered as a square button. Use this for icon only buttons.\n /\n @property({ reflect: true, type: Boolean }) square = false\n\n /\n Controls whether the button is in loading state. Please note that the spinner\n * is hidden from assistive technologies, so you need to make sure to announce\n * the loading state to e.g. screen reader users. We also recommend disabling\n * all user interactions on the button itself while in loading state.\n /\n @property({ reflect: true, type: Boolean }) loading = false\n\n /\n Controls whether the `interface-dropdown-small` icon from Nordicons is hidden\n * in the `end` slot when used as a dropdown toggle.\n /\n @property({ reflect: true, type: Boolean, attribute: 'hide-dropdown-icon' }) hideDropdownIcon = false\n\n connectedCallback() {\n super.connectedCallback()\n this.events.listen(this, 'click', this.handleOuterClick, true)\n }\n\n render() {\n const isDropdownToggle = this.assignedSlot?.name === 'toggle'\n const isIconButton = this.defaultSlot.assigned.some(node => node.localName === 'nord-icon')\n const shouldShowDropdownIcon = isDropdownToggle && !this.hideDropdownIcon && !isIconButton && !this.href\n\n const innards = html`\n <slot name=\"start\"></slot>\n <div class=\"n-content\">\n <slot></slot>\n </div>\n <nord-spinner\n class=\"n-button-spinner\"\n color=\"currentColor\"\n ?hidden=${!this.loading \|\| Boolean(this.href)}\n ></nord-spinner>\n <slot name=\"end\">\n ${shouldShowDropdownIcon\n ? html`<nord-icon name=\"interface-dropdown-small\" class=\"n-toggle-icon\"></nord-icon>`\n : nothing}\n </slot>\n `\n\n return this.href ? this.renderLink(innards) : this.renderButton(innards)\n }\n\n /\n We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n \n @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n /\n private renderLink(innards: TemplateResult) {\n return html`\n <a\n ${ref(this.focusableRef)}\n class=\"n-button\"\n target=${this.target}\n ?download=${this.download}\n href=${cond(this.disabled, nothing, this.href)}\n tabindex=${cond(this.disabled, '-1')}\n aria-disabled=${cond(this.disabled, 'true')}\n role=${cond(this.disabled, 'link')}\n >${innards}\n </a>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return html`\n <slot name=\"proxy\" @slotchange=${this.handleProxyChange}></slot>\n <button\n ${ref(this.focusableRef)}\n class=\"n-button\"\n ?disabled=${this.disabled}\n name=${cond(this.name)}\n value=${cond(this.value)}\n @click=${this.handleClick}\n aria-disabled=${cond(this.loading, 'true')}\n aria-expanded=${cond(this.accessibleExpanded)}\n aria-haspopup=${cond(this.accessibleHasPopup)}\n >\n ${innards}\n </button>\n `\n }\n\n private renderLightDom() {\n if (this.href \|\| !this.form) {\n return nothing\n }\n\n return html`\n <button\n ${ref(this.buttonRef)}\n slot=\"proxy\"\n name=${cond(this.name)}\n value=${cond(this.value)}\n ?disabled=${this.disabled}\n form=${cond(this._formId)}\n type=${this.type}\n ></button>\n `\n }\n\n private handleOuterClick = (e: MouseEvent) => {\n // we want to avoid emitting click events when a click\n // happens in blank space in the host, but not on the button\n // so we stop propagation of any events if click didn't happen on the internal or proxy button\n const isInternalButton = e\n .composedPath()\n .some(node => node === this.focusableRef.value \|\| node === this.buttonRef.value)\n\n if (!isInternalButton) {\n e.stopPropagation()\n }\n }\n\n private handleClick(e: Event) {\n if (this.buttonRef.value) {\n // prevents two events: one from internal button, one from proxy button\n e.stopPropagation()\n this.buttonRef.value.click()\n }\n }\n\n /\n React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\n * So we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in.\n */\n private handleProxyChange(e: Event) {\n const slot = e.target as HTMLSlotElement\n const proxyButton = this.buttonRef.value\n\n if (proxyButton && proxyButton.assignedSlot !== slot) {\n this.appendChild(proxyButton)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-button': Button\n }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","buttonRef","createRef","events","EventController","lightDom","LightDomController","render","renderLightDom","variant","type","size","download","target","expand","square","loading","hideDropdownIcon","handleOuterClick","e","composedPath","some","node","focusableRef","value","stopPropagation","connectedCallback","super","listen","isDropdownToggle","_a","assignedSlot","name","isIconButton","assigned","localName","shouldShowDropdownIcon","href","innards","html","Boolean","nothing","renderLink","renderButton","ref","cond","disabled","handleProxyChange","handleClick","accessibleExpanded","accessibleHasPopup","form","_formId","click","slot","proxyButton","appendChild","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["/* eslint-disable lit-a11y/accessible-name /\nimport type { TemplateResult } from 'lit'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDomController } from '../common/controllers/LightDomController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\n\nimport { cond } from '../common/directives/cond.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Button.css'\nimport '../spinner/Spinner.js'\n\n/\n Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n \n @status ready\n * @category action\n * @slot - The button content\n * @slot start - Used to place content at the start of button text. Typically used for icons.\n * @slot end - Used to place content at the end of button text. Typically used for icons.\n \n @cssprop [--n-button-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-button-gap=var(--n-space-s)] - Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the button.\n * @cssprop [--n-button-background-color=var(--n-color-button)] - Controls the background color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-border-color=var(--n-color-border-strong)] - Controls the border color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-text-align=center] - Controls the text alignment for the text in the button.\n * @cssprop [--n-button-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-button-color=var(--n-color-text)] - Controls the color of the text within the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the button.\n * @cssprop [--n-button-font-size=var(--n-font-size-m)] - Controls the size of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-font-weight=var(--n-font-weight)] - Controls the weight of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-min-block-size=var(--n-space-xl)] - Controls the minimum block size, or height, of the button using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-toggle-icon-color=var(--n-color-icon)] - Controls the color of toggle icon that gets rendered when the button is used as a [Dropdown](/components/dropdown/) toggle.\n * @cssprop [--n-button-user-select=none] - Controls the text selection behavior of the button text.\n /\n@customElement('nord-button')\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n static styles = [componentStyle, style]\n\n private defaultSlot = new SlotController(this)\n private buttonRef = createRef<HTMLButtonElement>()\n private events = new EventController(this)\n private lightDom = new LightDomController(this, {\n render: () => this.renderLightDom(),\n })\n\n /\n The style variant of the button.\n /\n @property({ reflect: true }) variant: 'default' \| 'primary' \| 'dashed' \| 'plain' \| 'danger' = 'default'\n\n /\n The type of the button.\n /\n @property({ reflect: true }) type: 'button' \| 'submit' \| 'reset' = 'submit'\n\n /\n The size of the button.\n * This affects font-size and padding.\n /\n @property({ reflect: true }) size: 's' \| 'm' \| 'l' = 'm'\n\n /\n This does not need to be documented,\n * since it is only for forwarding the aria-expanded attribute\n * to the internal button element.\n * @private\n /\n @property({ attribute: 'aria-expanded' }) accessibleExpanded?: 'true' \| 'false'\n\n /\n This does not need to be documented,\n * since it is only for forwarding the aria-haspopup attribute\n * to the internal button element.\n * @private\n /\n @property({ attribute: 'aria-haspopup' }) accessibleHasPopup?:\n \| 'false'\n \| 'true'\n \| 'menu'\n \| 'listbox'\n \| 'tree'\n \| 'grid'\n \| 'dialog'\n\n /\n When provided, renders the button as a link,\n * with its href attribute set to the given value.\n /\n @property({ reflect: true }) href?: string\n\n /\n When provided together with a href property, the button will\n * trigger a file download instead of a page visit.\n /\n @property({ reflect: true, type: Boolean }) download = false\n\n /\n When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n /\n @property() target: '_self' \| '_blank' \| '_parent' \| '_top' = '_self'\n\n /\n Controls whether the button expands to fill the width of its container.\n /\n @property({ reflect: true, type: Boolean }) expand = false\n\n /\n When provided, the button is rendered as a square button. Use this for icon only buttons.\n /\n @property({ reflect: true, type: Boolean }) square = false\n\n /\n Controls whether the button is in loading state. Please note that the spinner\n * is hidden from assistive technologies, so you need to make sure to announce\n * the loading state to e.g. screen reader users. We also recommend disabling\n * all user interactions on the button itself while in loading state.\n /\n @property({ reflect: true, type: Boolean }) loading = false\n\n /\n Controls whether the `interface-dropdown-small` icon from Nordicons is hidden\n * in the `end` slot when used as a dropdown toggle.\n /\n @property({ reflect: true, type: Boolean, attribute: 'hide-dropdown-icon' }) hideDropdownIcon = false\n\n connectedCallback() {\n super.connectedCallback()\n this.events.listen(this, 'click', this.handleOuterClick, true)\n }\n\n render() {\n const isDropdownToggle = this.assignedSlot?.name === 'toggle'\n const isIconButton = this.defaultSlot.assigned.some(node => node.localName === 'nord-icon')\n const shouldShowDropdownIcon = isDropdownToggle && !this.hideDropdownIcon && !isIconButton && !this.href\n\n const innards = html`\n <slot name=\"start\"></slot>\n <div class=\"n-content\">\n <slot></slot>\n </div>\n <nord-spinner\n class=\"n-button-spinner\"\n color=\"currentColor\"\n ?hidden=${!this.loading \|\| Boolean(this.href)}\n ></nord-spinner>\n <slot name=\"end\">\n ${shouldShowDropdownIcon\n ? html`<nord-icon name=\"interface-dropdown-small\" class=\"n-toggle-icon\"></nord-icon>`\n : nothing}\n </slot>\n `\n\n return this.href ? this.renderLink(innards) : this.renderButton(innards)\n }\n\n /\n We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n \n @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n /\n private renderLink(innards: TemplateResult) {\n return html`\n <a\n ${ref(this.focusableRef)}\n class=\"n-button\"\n target=${this.target}\n ?download=${this.download}\n href=${cond(this.disabled, nothing, this.href)}\n tabindex=${cond(this.disabled, '-1')}\n aria-disabled=${cond(this.disabled, 'true')}\n role=${cond(this.disabled, 'link')}\n >${innards}\n </a>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return html`\n <slot name=\"proxy\" @slotchange=${this.handleProxyChange}></slot>\n <button\n ${ref(this.focusableRef)}\n class=\"n-button\"\n ?disabled=${this.disabled}\n name=${cond(this.name)}\n value=${cond(this.value)}\n @click=${this.handleClick}\n aria-disabled=${cond(this.loading, 'true')}\n aria-expanded=${cond(this.accessibleExpanded)}\n aria-haspopup=${cond(this.accessibleHasPopup)}\n >\n ${innards}\n </button>\n `\n }\n\n private renderLightDom() {\n if (this.href \|\| !this.form) {\n return nothing\n }\n\n return html`\n <button\n ${ref(this.buttonRef)}\n slot=\"proxy\"\n name=${cond(this.name)}\n value=${cond(this.value)}\n ?disabled=${this.disabled}\n form=${cond(this._formId)}\n type=${this.type}\n ></button>\n `\n }\n\n private handleOuterClick = (e: MouseEvent) => {\n // we want to avoid emitting click events when a click\n // happens in blank space in the host, but not on the button\n // so we stop propagation of any events if click didn't happen on the internal or proxy button\n const isInternalButton = e\n .composedPath()\n .some(node => node === this.focusableRef.value \|\| node === this.buttonRef.value)\n\n if (!isInternalButton) {\n e.stopPropagation()\n }\n }\n\n private handleClick(e: Event) {\n if (this.buttonRef.value) {\n // prevents two events: one from internal button, one from proxy button\n e.stopPropagation()\n this.buttonRef.value.click()\n }\n }\n\n /\n React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\n * So we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in.\n */\n private handleProxyChange(e: Event) {\n const slot = e.target as HTMLSlotElement\n const proxyButton = this.buttonRef.value\n\n if (proxyButton && proxyButton.assignedSlot !== slot) {\n this.appendChild(proxyButton)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-button': Button\n }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","buttonRef","createRef","events","EventController","lightDom","LightDomController","render","renderLightDom","variant","type","size","download","target","expand","square","loading","hideDropdownIcon","handleOuterClick","e","composedPath","some","node","focusableRef","value","stopPropagation","connectedCallback","super","listen","isDropdownToggle","_a","assignedSlot","name","isIconButton","assigned","localName","shouldShowDropdownIcon","href","innards","html","Boolean","nothing","renderLink","renderButton","ref","cond","disabled","handleProxyChange","handleClick","accessibleExpanded","accessibleHasPopup","form","_formId","click","slot","proxyButton","appendChild","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","customElement"],"mappings":"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"}

package/lib/Card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","sources":["../src/card/Card.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Card.css'\n\n/*\n Cards are shadowed surfaces that display content and actions on a\n * single topic. They should be easy to scan for relevant and\n * actionable information.\n \n @status ready\n * @category structure\n * @slot - The card content.\n * @slot header - Optional slot that holds a header for the card.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n * @slot footer - Optional slot that holds footer content for the card.\n \n @cssprop [--n-card-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-card-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-card-padding=var(--n-space-m)] - Controls the padding on all sides of the card.\n * @cssprop [--n-card-slot-padding=var(--n-space-m)] - Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.\n * @cssprop [--n-card-header-background=transparent] - Controls the background color of the card header.\n /\n@customElement('nord-card')\nexport default class Card extends LitElement {\n static styles = [componentStyle, style]\n\n private headerSlot = new SlotController(this, 'header')\n private headerEndSlot = new SlotController(this, 'header-end')\n private footerSlot = new SlotController(this, 'footer')\n\n /\n Controls the padding of the card component. When set to “none”,\n * the header and footer slots will still have padding.\n /\n @property({ reflect: true }) padding: 'm' \| 'l' \| 'none' = 'm'\n\n /\n When set, adds a divider border above the footer slot.\n */\n @property({ type: Boolean, reflect: true, attribute: 'footer-divider' }) footerDivider = false\n\n render() {\n return html`\n <div class=\"n-card\">\n <div class=\"header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n <slot name=${this.headerSlot.slotName}></slot>\n <slot name=${this.headerEndSlot.slotName}></slot>\n </div>\n <slot></slot>\n <slot name=${this.footerSlot.slotName} ?hidden=${this.footerSlot.isEmpty}></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-card': Card\n }\n}\n"],"names":["Card","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","footerSlot","padding","footerDivider","render","html","isEmpty","slotName","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","attribute","customElement"],"mappings":"~~wzFAyBe~~,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cACzCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAMjBA,KAAOK,QAAuB,IAKcL,KAAaM,eAAG,CAc1F,CAZC,MAAAC,GACE,OAAOC,CAAI,oDAEuBR,KAAKC,WAAWQ,SAAWT,KAAKG,cAAcM,wBAC7DT,KAAKC,WAAWS,gCAChBV,KAAKG,cAAcO,mDAGrBV,KAAKI,WAAWM,sBAAoBV,KAAKI,WAAWK,wBAGtE,GA5BMZ,EAAAc,OAAS,CAACC,EAAgBC,GAUJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyCnB,EAAAoB,UAAA,eAAA,GAKWH,EAAA,CAAxEC,EAAS,CAAEG,KAAMC,QAASH,SAAS,EAAMI,UAAW,oBAAyCvB,EAAAoB,UAAA,qBAAA,GAhB3EpB,EAAIiB,EAAA,CADxBO,EAAc,cACMxB,SAAAA"}
1	+ {"version":3,"file":"Card.js","sources":["../src/card/Card.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Card.css'\n\n/*\n Cards are shadowed surfaces that display content and actions on a\n * single topic. They should be easy to scan for relevant and\n * actionable information.\n \n @status ready\n * @category structure\n * @slot - The card content.\n * @slot header - Optional slot that holds a header for the card.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n * @slot footer - Optional slot that holds footer content for the card.\n \n @cssprop [--n-card-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-card-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-card-padding=var(--n-space-m)] - Controls the padding on all sides of the card.\n * @cssprop [--n-card-slot-padding=var(--n-space-m)] - Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.\n * @cssprop [--n-card-header-background=transparent] - Controls the background color of the card header.\n * @cssprop [--n-card-border-color=var(--n-color-border)] - Controls the border color of the card header and footer divider.\n * @cssprop [--n-card-header-padding-block=var(--n-space-m)] - Controls the block (top and bottom) padding of the card header.\n * @cssprop [--n-card-header-padding-inline=var(--n-card-slot-padding)] - Controls the inline (left and right) padding of the card header.\n * @cssprop [--n-card-header-slot-flex-grow=0] - Controls the flex-grow value of the header slot.\n /\n@customElement('nord-card')\nexport default class Card extends LitElement {\n static styles = [componentStyle, style]\n\n private headerSlot = new SlotController(this, 'header')\n private headerEndSlot = new SlotController(this, 'header-end')\n private footerSlot = new SlotController(this, 'footer')\n\n /\n Controls the padding of the card component. When set to “none”,\n * the header and footer slots will still have padding.\n /\n @property({ reflect: true }) padding: 'm' \| 'l' \| 'none' = 'm'\n\n /\n When set, adds a divider border above the footer slot.\n */\n @property({ type: Boolean, reflect: true, attribute: 'footer-divider' }) footerDivider = false\n\n render() {\n return html`\n <div class=\"n-card\">\n <div class=\"header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n <slot name=${this.headerSlot.slotName}></slot>\n <slot name=${this.headerEndSlot.slotName}></slot>\n </div>\n <slot></slot>\n <slot name=${this.footerSlot.slotName} ?hidden=${this.footerSlot.isEmpty}></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-card': Card\n }\n}\n"],"names":["Card","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","footerSlot","padding","footerDivider","render","html","isEmpty","slotName","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","attribute","customElement"],"mappings":"wzFA6Be,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cACzCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAMjBA,KAAOK,QAAuB,IAKcL,KAAaM,eAAG,CAc1F,CAZC,MAAAC,GACE,OAAOC,CAAI,oDAEuBR,KAAKC,WAAWQ,SAAWT,KAAKG,cAAcM,wBAC7DT,KAAKC,WAAWS,gCAChBV,KAAKG,cAAcO,mDAGrBV,KAAKI,WAAWM,sBAAoBV,KAAKI,WAAWK,wBAGtE,GA5BMZ,EAAAc,OAAS,CAACC,EAAgBC,GAUJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyCnB,EAAAoB,UAAA,eAAA,GAKWH,EAAA,CAAxEC,EAAS,CAAEG,KAAMC,QAASH,SAAS,EAAMI,UAAW,oBAAyCvB,EAAAoB,UAAA,qBAAA,GAhB3EpB,EAAIiB,EAAA,CADxBO,EAAc,cACMxB,SAAAA"}

package/lib/DatePicker.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-close-small-CnpAFMO3.js";import{css as i,html as o,nothing as a,LitElement as s}from"lit";import{query as r,property as n,customElement as l}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{ref as p}from"lit/directives/ref.js";import{S as c,i as h}from"./Calendar-CL_eqbiT.js";import{D as m,c as u,p as v,a as f}from"./dates-CAAlPKZi.js";import{c as b}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as j}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-DFL7yabe.js";import{I as $}from"./InputMixin-LetXsCyv.js";import{R as D,s as k}from"./TextField-BdEdZ0_b.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-DSU3Qp0O.js";import{s as z}from"./FormField--eLuhPue.js";import C from"./Icon.js";import{LocalizeController as F}from"./LocalizeController.js";import{isoAdapter as S}from"./date-adapter.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-pKfh0-Zv.js";import"./Stack.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./observe-D0n0zOfU.js";import"./number-Dg2vCfGd.js";import"./DateSelectEvent.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./ScrollbarController-BFC67Y2x.js";var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',tags:"nordicon interface calendar date time day week month year",title:"interface-calendar"});const I=i`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;C.registerIcon(A),C.registerIcon(e);const L=()=>!1,B=()=>!1;let M=class extends(x(y(D($(j(s)))))){constructor(){super(...arguments),this.swipe=new c(this,{target:()=>this.popout,matchesGesture:h,onSwipeEnd:()=>this.hide()}),this.localize=new F(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=m.Monday,this.dateAdapter=S,this.isDateDisabled=L,this.isDateHighlighted=B,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new g("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new g("focus"))},this.handleInputChange=t=>{var e;const i=t.target,o=this.dateAdapter.parse(i.value,u);this.rawValue=null===(e=this.focusableRef.value)||void 0===e?void 0:e.value,(o||""===i.value)&&this.setValue(o)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?f(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:Number.NaN}set valueAsNumber(t){this.value=t?f(new Date(t)):""}firstUpdated(){var t;this.rawValue=null===(t=this.focusableRef.value)||void 0===t?void 0:t.value}render(){const{valueAsDate:t}=this,e=t?this.dateAdapter.format(t):"";return o`<nord-input class="n-date-picker-input" value="${e}" label="${d(this.label)}" hint="${d(this.hint)}" error="${b(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${p(this.focusableRef)} aria-invalid="${b(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?a:o`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?a:o`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:a}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" today="${d(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{timeZone:"UTC",day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"";const{valueAsDate:e}=this,i=e?this.dateAdapter.format(e):"";this.rawValue=i,this.dispatchEvent(new g("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};M.styles=[w,z,k,I],t([r(".n-date-picker-toggle",!0)],M.prototype,"toggleButton",void 0),t([r(".n-date-picker-close-button",!0)],M.prototype,"closeButton",void 0),t([r("nord-calendar",!0)],M.prototype,"calendar",void 0),t([r('[role="dialog"]',!0)],M.prototype,"popout",void 0),t([n()],M.prototype,"value",void 0),t([n({attribute:!1})],M.prototype,"rawValue",void 0),t([n({type:Boolean,reflect:!0})],M.prototype,"open",void 0),t([n({reflect:!0})],M.prototype,"min",void 0),t([n({reflect:!0})],M.prototype,"max",void 0),t([n({reflect:!0})],M.prototype,"today",void 0),t([n({reflect:!0,attribute:"first-day-of-week",type:Number})],M.prototype,"firstDayOfWeek",void 0),t([n({attribute:!1})],M.prototype,"dateAdapter",void 0),t([n({attribute:!1})],M.prototype,"isDateDisabled",void 0),t([n({attribute:!1})],M.prototype,"isDateHighlighted",void 0),t([n({reflect:!0,type:Boolean})],M.prototype,"expand",void 0),M=t([l("nord-date-picker")],M);var E=M;export{E as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-close-small-CnpAFMO3.js";import{css as i,html as o,nothing as a,LitElement as s}from"lit";import{query as r,property as n,customElement as l}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{ref as p}from"lit/directives/ref.js";import{S as c,i as h}from"./Calendar-CL_eqbiT.js";import{D as m,c as u,p as v,a as f}from"./dates-CAAlPKZi.js";import{c as b}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as j}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-DFL7yabe.js";import{I as $}from"./InputMixin-LetXsCyv.js";import{R as D,s as k}from"./TextField-BdEdZ0_b.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-DSU3Qp0O.js";import{s as z}from"./FormField--eLuhPue.js";import C from"./Icon.js";import{LocalizeController as F}from"./LocalizeController.js";import{isoAdapter as S}from"./date-adapter.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-vR6LxNS9.js";import"./Stack.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./observe-D0n0zOfU.js";import"./number-Dg2vCfGd.js";import"./DateSelectEvent.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./ScrollbarController-BFC67Y2x.js";var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',tags:"nordicon interface calendar date time day week month year",title:"interface-calendar"});const I=i`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;C.registerIcon(A),C.registerIcon(e);const L=()=>!1,B=()=>!1;let M=class extends(x(y(D($(j(s)))))){constructor(){super(...arguments),this.swipe=new c(this,{target:()=>this.popout,matchesGesture:h,onSwipeEnd:()=>this.hide()}),this.localize=new F(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=m.Monday,this.dateAdapter=S,this.isDateDisabled=L,this.isDateHighlighted=B,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new g("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new g("focus"))},this.handleInputChange=t=>{var e;const i=t.target,o=this.dateAdapter.parse(i.value,u);this.rawValue=null===(e=this.focusableRef.value)||void 0===e?void 0:e.value,(o||""===i.value)&&this.setValue(o)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?f(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:Number.NaN}set valueAsNumber(t){this.value=t?f(new Date(t)):""}firstUpdated(){var t;this.rawValue=null===(t=this.focusableRef.value)||void 0===t?void 0:t.value}render(){const{valueAsDate:t}=this,e=t?this.dateAdapter.format(t):"";return o`<nord-input class="n-date-picker-input" value="${e}" label="${d(this.label)}" hint="${d(this.hint)}" error="${b(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${p(this.focusableRef)} aria-invalid="${b(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?a:o`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?a:o`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:a}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" today="${d(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{timeZone:"UTC",day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"";const{valueAsDate:e}=this,i=e?this.dateAdapter.format(e):"";this.rawValue=i,this.dispatchEvent(new g("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};M.styles=[w,z,k,I],t([r(".n-date-picker-toggle",!0)],M.prototype,"toggleButton",void 0),t([r(".n-date-picker-close-button",!0)],M.prototype,"closeButton",void 0),t([r("nord-calendar",!0)],M.prototype,"calendar",void 0),t([r('[role="dialog"]',!0)],M.prototype,"popout",void 0),t([n()],M.prototype,"value",void 0),t([n({attribute:!1})],M.prototype,"rawValue",void 0),t([n({type:Boolean,reflect:!0})],M.prototype,"open",void 0),t([n({reflect:!0})],M.prototype,"min",void 0),t([n({reflect:!0})],M.prototype,"max",void 0),t([n({reflect:!0})],M.prototype,"today",void 0),t([n({reflect:!0,attribute:"first-day-of-week",type:Number})],M.prototype,"firstDayOfWeek",void 0),t([n({attribute:!1})],M.prototype,"dateAdapter",void 0),t([n({attribute:!1})],M.prototype,"isDateDisabled",void 0),t([n({attribute:!1})],M.prototype,"isDateHighlighted",void 0),t([n({reflect:!0,type:Boolean})],M.prototype,"expand",void 0),M=t([l("nord-date-picker")],M);var E=M;export{E as default};
 //# sourceMappingURL=DatePicker.js.map

package/lib/Dropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,LitElement as n}from"lit";import{query as r,property as s,customElement as d}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{S as i}from"./SlotController-Z6eG7LSZ.js";import{o as l}from"./observe-D0n0zOfU.js";import{F as p}from"./Popout-pKfh0-Zv.js";import{s as c}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./events-Bv6wNHwJ.js";const h=e`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px);--_n-dropdown-max-block-size:var(--n-dropdown-max-block-size, 460px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size='s']){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size='l']){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(p(n)){constructor(){super(...arguments),this.headerSlot=new i(this,"header"),this.headerEndSlot=new i(this,"header-end"),this.expand=!1,this.size="m",this.alwaysFloating=!1}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return t`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${a(this.align)}" position="${a(this.position)}" ?open="${this.open}" ?always-floating="${this.alwaysFloating}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([r(".n-dropdown-content")],m.prototype,"list",void 0),o([r("nord-popout",!0)],m.prototype,"popout",void 0),o([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),o([s({reflect:!0})],m.prototype,"size",void 0),o([s({reflect:!0,type:Boolean,attribute:"always-floating"})],m.prototype,"alwaysFloating",void 0),o([l("open","updated")],m.prototype,"handleOpenChange",null),m=o([d("nord-dropdown")],m);var u=m;export{u as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,LitElement as n}from"lit";import{query as r,property as s,customElement as d}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{S as i}from"./SlotController-Z6eG7LSZ.js";import{o as l}from"./observe-D0n0zOfU.js";import{F as p}from"./Popout-vR6LxNS9.js";import{s as c}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./events-Bv6wNHwJ.js";const h=e`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px);--_n-dropdown-max-block-size:var(--n-dropdown-max-block-size, 460px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size='s']){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size='l']){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(p(n)){constructor(){super(...arguments),this.headerSlot=new i(this,"header"),this.headerEndSlot=new i(this,"header-end"),this.expand=!1,this.size="m",this.alwaysFloating=!1}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return t`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${a(this.align)}" position="${a(this.position)}" ?open="${this.open}" ?always-floating="${this.alwaysFloating}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([r(".n-dropdown-content")],m.prototype,"list",void 0),o([r("nord-popout",!0)],m.prototype,"popout",void 0),o([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),o([s({reflect:!0})],m.prototype,"size",void 0),o([s({reflect:!0,type:Boolean,attribute:"always-floating"})],m.prototype,"alwaysFloating",void 0),o([l("open","updated")],m.prototype,"handleOpenChange",null),m=o([d("nord-dropdown")],m);var u=m;export{u as default};
 //# sourceMappingURL=Dropdown.js.map

package/lib/IconManager.js CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=e=>fetch(`https://nordcdn.net/ds/icons/3.15.4/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
+const e=e=>fetch(`https://nordcdn.net/ds/icons/3.15.5/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
 //# sourceMappingURL=IconManager.js.map

package/lib/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/common/controllers/ResizeController.ts","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z\" fill=\"currentColor\"/></svg>';\nexport const title = \"navigation-search\";\nexport const tags = \"nordicon navigation menu find search magnifying glass\";\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { isServer } from 'lit'\n\nexport class ResizeController implements ReactiveController {\n private observer?: ResizeObserver\n private hadFirstUpdate = false\n private borderBoxSize?: ResizeObserverSize\n\n constructor(\n host: ReactiveControllerHost,\n private target: () => HTMLElement,\n ) {\n host.addController(this)\n\n if (!isServer) {\n this.observer = new ResizeObserver(([entry]) => {\n const [borderBoxSize] = entry.borderBoxSize\n this.borderBoxSize = borderBoxSize\n host.requestUpdate()\n })\n }\n }\n\n get inlineSize() {\n return this.borderBoxSize?.inlineSize\n }\n\n get blockSize() {\n return this.borderBoxSize?.blockSize\n }\n\n hostUpdated() {\n if (!this.hadFirstUpdate && this.observer) {\n this.observer.observe(this.target())\n this.hadFirstUpdate = true\n }\n }\n\n hostConnected() {\n // in case the host has rendered, disconnected, and is now reconnected\n if (this.hadFirstUpdate && this.observer) {\n this.observer.observe(this.target())\n }\n }\n\n hostDisconnected() {\n if (this.observer) {\n this.observer.disconnect()\n }\n }\n}\n","import * as searchIcon from '@nordhealth/icons/lib/assets/navigation-search.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { ResizeController } from '../common/controllers/ResizeController.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\nimport { getSubmitButton } from '../common/form.js'\nimport { cleanValue } from '../common/input.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { ReadonlyMixin } from '../common/mixins/ReadonlyMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport { TextSelectableMixin } from '../common/mixins/TextSelectableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport textFieldStyle from '../common/styles/TextField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Input.css'\n\nIcon.registerIcon(searchIcon)\n\nconst px = (value?: number) => (value ? `${value}px` : undefined)\n\ntype InputMode = 'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search'\nconst defaultInputmodeMap: Record<string, InputMode> = {\n number: 'numeric',\n email: 'email',\n tel: 'tel',\n url: 'url',\n search: 'search',\n}\n\n/*\n Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n \n @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n \n @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-active)] - Controls the background of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-color=var(--n-color-text)] - Controls the text color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-input-text-align=start] - Controls the alignment of text within the input itself.\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n /\n@customElement('nord-input')\nexport default class Input extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(InputMixin(FocusableMixin(LitElement)))))),\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n @query('slot[name=\\'start\\']') private startSlot!: HTMLSlotElement\n @query('slot[name=\\'end\\']') private endSlot!: HTMLSlotElement\n private startObserver = new ResizeController(this, () => this.startSlot)\n private endObserver = new ResizeController(this, () => this.endSlot)\n private direction = new DirectionController(this)\n\n /\n The type of the input.\n /\n @property({ reflect: true }) type:\n \| 'text'\n \| 'email'\n \| 'password'\n \| 'tel'\n \| 'url'\n \| 'search'\n \| 'number'\n \| 'unit'\n \| 'button' = 'text'\n\n /\n Controls whether the input expands to fill the width of its container.\n /\n @property({ reflect: true, type: Boolean }) expand = false\n\n /\n Optionally disallow certain characters from being used inside the input, using a regex pattern.\n /\n @property({ reflect: true, attribute: 'disallow-pattern' }) disallowPattern?: string = undefined\n\n /\n The inputmode attribute provides a hint to the browser about what type of keyboard to open on mobile devices.\n * Valid values: none, text, decimal, numeric, tel, search, email, url\n * When not explicitly set, defaults based on input type:\n * - type=\"number\" → inputmode=\"numeric\"\n * - type=\"email\" → inputmode=\"email\"\n * - type=\"tel\" → inputmode=\"tel\"\n * - type=\"url\" → inputmode=\"url\"\n * - type=\"search\" → inputmode=\"search\"\n * Can be explicitly overridden for any type.\n /\n @property({ reflect: true }) inputmode?: InputMode = undefined\n\n render() {\n const isNumber = this.type === 'number'\n\n const inputmodeValue = this.inputmode \|\| defaultInputmodeMap[this.type]\n\n return html`\n ${this.renderLabel()}\n\n <div\n class=${classMap({\n 'n-input-container': true,\n 'is-rtl': this.direction.dir === 'rtl',\n })}\n style=${styleMap({\n '--_n-input-start-inline-size': px(this.startObserver.inlineSize),\n '--_n-input-end-inline-size': px(this.endObserver.inlineSize),\n })}\n >\n <slot name=\"start\">\n ${this.type === 'search' ? html`<nord-icon name=\"navigation-search\"></nord-icon>` : nothing}\n </slot>\n <input\n ${ref(this.textSelectableRef)}\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n type=${isNumber \|\| this.type === 'unit' ? 'text' : this.type}\n inputmode=${ifDefined(inputmodeValue)}\n pattern=${cond(isNumber, '[0-9]')}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n name=${ifDefined(this.name)}\n .value=${this.value ?? ''}\n placeholder=${ifDefined(this.placeholder)}\n @input=${this.handleInputChange}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n @select=${this.handleSelect}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n spellcheck=\"false\"\n autocomplete=${this.autocomplete as any}\n />\n <slot name=\"end\"></slot>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (e.key !== 'Enter') {\n return\n }\n\n const { form } = this\n\n if (form) {\n const button = getSubmitButton(form)\n setTimeout(() => button?.click(), 0)\n }\n }\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement\n\n // clean up any invalid characters\n if (this.disallowPattern) {\n cleanValue(target, new RegExp(this.disallowPattern, 'g'))\n }\n this.handleInput(e)\n }\n\n protected handleSelect(e: Event) {\n e.stopPropagation()\n\n /*\n Fired when some text has been selected.\n /\n this.dispatchEvent(new NordEvent('select'))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-input': Input\n }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n const { value } = inputEl\n const cursor = inputEl.selectionStart as number\n\n const beforeCursor = value.slice(0, cursor)\n const afterCursor = value.slice(cursor, value.length)\n\n const filteredBeforeCursor = beforeCursor.replace(regex, '')\n const filterAfterCursor = afterCursor.replace(regex, '')\n\n const newValue = filteredBeforeCursor + filterAfterCursor\n const newCursor = filteredBeforeCursor.length\n\n inputEl.value = newValue\n inputEl.selectionStart = newCursor\n inputEl.selectionEnd = newCursor\n\n return newValue\n}\n","/\n Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement \| null {\n // we can get away with just looking for native <button> elements,\n // rather than our component, since our button component renders one to light dom.\n let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n if (!button && form.id) {\n const root = form.getRootNode() as ShadowRoot \| Document\n button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n }\n\n return button\n}\n"],"names":["ResizeController","constructor","host","target","this","hadFirstUpdate","addController","isServer","observer","ResizeObserver","entry","borderBoxSize","requestUpdate","inlineSize","_a","blockSize","hostUpdated","observe","hostConnected","hostDisconnected","disconnect","Icon","registerIcon","searchIcon","px","value","undefined","defaultInputmodeMap","number","email","tel","url","search","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","startObserver","startSlot","endObserver","endSlot","direction","DirectionController","type","expand","disallowPattern","inputmode","handleInputChange","e","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","isNumber","inputmodeValue","html","renderLabel","classMap","dir","styleMap","nothing","ref","textSelectableRef","focusableRef","inputId","ifDefined","cond","disabled","required","readonly","name","placeholder","handleChange","handleKeydown","handleSelect","getDescribedBy","getInvalid","autocomplete","renderError","key","form","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","stopPropagation","dispatchEvent","NordEvent","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","reflect","Boolean","attribute","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"Input.js","sources":["../../icons/lib/assets/navigation-search.js","../src/common/controllers/ResizeController.ts","../src/input/Input.ts","../src/common/input.ts","../src/common/form.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z\" fill=\"currentColor\"/></svg>';\nexport const title = \"navigation-search\";\nexport const tags = \"nordicon navigation menu find search magnifying glass\";\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { isServer } from 'lit'\n\nexport class ResizeController implements ReactiveController {\n private observer?: ResizeObserver\n private hadFirstUpdate = false\n private borderBoxSize?: ResizeObserverSize\n\n constructor(\n host: ReactiveControllerHost,\n private target: () => HTMLElement,\n ) {\n host.addController(this)\n\n if (!isServer) {\n this.observer = new ResizeObserver(([entry]) => {\n const [borderBoxSize] = entry.borderBoxSize\n this.borderBoxSize = borderBoxSize\n host.requestUpdate()\n })\n }\n }\n\n get inlineSize() {\n return this.borderBoxSize?.inlineSize\n }\n\n get blockSize() {\n return this.borderBoxSize?.blockSize\n }\n\n hostUpdated() {\n if (!this.hadFirstUpdate && this.observer) {\n this.observer.observe(this.target())\n this.hadFirstUpdate = true\n }\n }\n\n hostConnected() {\n // in case the host has rendered, disconnected, and is now reconnected\n if (this.hadFirstUpdate && this.observer) {\n this.observer.observe(this.target())\n }\n }\n\n hostDisconnected() {\n if (this.observer) {\n this.observer.disconnect()\n }\n }\n}\n","import * as searchIcon from '@nordhealth/icons/lib/assets/navigation-search.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { ResizeController } from '../common/controllers/ResizeController.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\nimport { getSubmitButton } from '../common/form.js'\nimport { cleanValue } from '../common/input.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { ReadonlyMixin } from '../common/mixins/ReadonlyMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport { TextSelectableMixin } from '../common/mixins/TextSelectableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport textFieldStyle from '../common/styles/TextField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Input.css'\n\nIcon.registerIcon(searchIcon)\n\nconst px = (value?: number) => (value ? `${value}px` : undefined)\n\ntype InputMode = 'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search'\nconst defaultInputmodeMap: Record<string, InputMode> = {\n number: 'numeric',\n email: 'email',\n tel: 'tel',\n url: 'url',\n search: 'search',\n}\n\n/*\n Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n \n @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon or prefix at the start of the input.\n * @slot end - Optional slot used to place an icon or suffix at the end of the input.\n \n @cssprop [--n-input-inline-size=240px] - Controls the inline size, or width, of the input.\n * @cssprop [--n-input-background=var(--n-color-active)] - Controls the background of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-color=var(--n-color-text)] - Controls the text color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-color=var(--n-color-border-strong)] - Controls the border color of the input, using our [color tokens](/tokens/#color).\n * @cssprop [--n-input-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-input-text-align=start] - Controls the alignment of text within the input itself.\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n /\n@customElement('nord-input')\nexport default class Input extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(InputMixin(FocusableMixin(LitElement)))))),\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n @query('slot[name=\\'start\\']') private startSlot!: HTMLSlotElement\n @query('slot[name=\\'end\\']') private endSlot!: HTMLSlotElement\n private startObserver = new ResizeController(this, () => this.startSlot)\n private endObserver = new ResizeController(this, () => this.endSlot)\n private direction = new DirectionController(this)\n\n /\n The type of the input.\n /\n @property({ reflect: true }) type:\n \| 'text'\n \| 'email'\n \| 'password'\n \| 'tel'\n \| 'url'\n \| 'search'\n \| 'number'\n \| 'unit'\n \| 'button' = 'text'\n\n /\n Controls whether the input expands to fill the width of its container.\n /\n @property({ reflect: true, type: Boolean }) expand = false\n\n /\n Optionally disallow certain characters from being used inside the input, using a regex pattern.\n /\n @property({ reflect: true, attribute: 'disallow-pattern' }) disallowPattern?: string = undefined\n\n /\n The inputmode attribute provides a hint to the browser about what type of keyboard to open on mobile devices.\n * Valid values: none, text, decimal, numeric, tel, search, email, url\n * When not explicitly set, defaults based on input type:\n * - type=\"number\" → inputmode=\"numeric\"\n * - type=\"email\" → inputmode=\"email\"\n * - type=\"tel\" → inputmode=\"tel\"\n * - type=\"url\" → inputmode=\"url\"\n * - type=\"search\" → inputmode=\"search\"\n * Can be explicitly overridden for any type.\n /\n @property({ reflect: true }) inputmode?: 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url' = undefined\n\n render() {\n const isNumber = this.type === 'number'\n\n const inputmodeValue = this.inputmode \|\| defaultInputmodeMap[this.type]\n\n return html`\n ${this.renderLabel()}\n\n <div\n class=${classMap({\n 'n-input-container': true,\n 'is-rtl': this.direction.dir === 'rtl',\n })}\n style=${styleMap({\n '--_n-input-start-inline-size': px(this.startObserver.inlineSize),\n '--_n-input-end-inline-size': px(this.endObserver.inlineSize),\n })}\n >\n <slot name=\"start\">\n ${this.type === 'search' ? html`<nord-icon name=\"navigation-search\"></nord-icon>` : nothing}\n </slot>\n <input\n ${ref(this.textSelectableRef)}\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n type=${isNumber \|\| this.type === 'unit' ? 'text' : this.type}\n inputmode=${ifDefined(inputmodeValue)}\n pattern=${cond(isNumber, '[0-9]')}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n name=${ifDefined(this.name)}\n .value=${this.value ?? ''}\n placeholder=${ifDefined(this.placeholder)}\n @input=${this.handleInputChange}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n @select=${this.handleSelect}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n spellcheck=\"false\"\n autocomplete=${this.autocomplete as any}\n />\n <slot name=\"end\"></slot>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (e.key !== 'Enter') {\n return\n }\n\n const { form } = this\n\n if (form) {\n const button = getSubmitButton(form)\n setTimeout(() => button?.click(), 0)\n }\n }\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement\n\n // clean up any invalid characters\n if (this.disallowPattern) {\n cleanValue(target, new RegExp(this.disallowPattern, 'g'))\n }\n this.handleInput(e)\n }\n\n protected handleSelect(e: Event) {\n e.stopPropagation()\n\n /*\n Fired when some text has been selected.\n /\n this.dispatchEvent(new NordEvent('select'))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-input': Input\n }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n const { value } = inputEl\n const cursor = inputEl.selectionStart as number\n\n const beforeCursor = value.slice(0, cursor)\n const afterCursor = value.slice(cursor, value.length)\n\n const filteredBeforeCursor = beforeCursor.replace(regex, '')\n const filterAfterCursor = afterCursor.replace(regex, '')\n\n const newValue = filteredBeforeCursor + filterAfterCursor\n const newCursor = filteredBeforeCursor.length\n\n inputEl.value = newValue\n inputEl.selectionStart = newCursor\n inputEl.selectionEnd = newCursor\n\n return newValue\n}\n","/\n Finds a form's submit button. First looking for a button inside form,\n * and then looking for a button whose form attribute is equal to the ID of the form.\n */\nexport function getSubmitButton(form: HTMLFormElement): HTMLButtonElement \| null {\n // we can get away with just looking for native <button> elements,\n // rather than our component, since our button component renders one to light dom.\n let button = form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)\n\n if (!button && form.id) {\n const root = form.getRootNode() as ShadowRoot \| Document\n button = root.querySelector<HTMLButtonElement>(`button[form=${form.id}]`)\n }\n\n return button\n}\n"],"names":["ResizeController","constructor","host","target","this","hadFirstUpdate","addController","isServer","observer","ResizeObserver","entry","borderBoxSize","requestUpdate","inlineSize","_a","blockSize","hostUpdated","observe","hostConnected","hostDisconnected","disconnect","Icon","registerIcon","searchIcon","px","value","undefined","defaultInputmodeMap","number","email","tel","url","search","Input","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","startObserver","startSlot","endObserver","endSlot","direction","DirectionController","type","expand","disallowPattern","inputmode","handleInputChange","e","inputEl","regex","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","RegExp","handleInput","render","isNumber","inputmodeValue","html","renderLabel","classMap","dir","styleMap","nothing","ref","textSelectableRef","focusableRef","inputId","ifDefined","cond","disabled","required","readonly","name","placeholder","handleChange","handleKeydown","handleSelect","getDescribedBy","getInvalid","autocomplete","renderError","key","form","button","querySelector","id","getRootNode","getSubmitButton","setTimeout","click","stopPropagation","dispatchEvent","NordEvent","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","reflect","Boolean","attribute","customElement"],"mappings":"swCAAe,sTAEK,8DADC,4BCERA,EAKX,WAAAC,CACEC,EACQC,GAAAC,KAAMD,OAANA,EALFC,KAAcC,gBAAG,EAOvBH,EAAKI,cAAcF,MAEdG,IACHH,KAAKI,SAAW,IAAIC,gBAAe,EAAEC,MACnC,MAAOC,GAAiBD,EAAMC,cAC9BP,KAAKO,cAAgBA,EACrBT,EAAKU,eAAe,IAGzB,CAED,cAAIC,SACF,OAAyB,UAAlBT,KAAKO,qBAAa,IAAAG,OAAA,EAAAA,EAAED,UAC5B,CAED,aAAIE,SACF,OAAyB,UAAlBX,KAAKO,qBAAa,IAAAG,OAAA,EAAAA,EAAEC,SAC5B,CAED,WAAAC,IACOZ,KAAKC,gBAAkBD,KAAKI,WAC/BJ,KAAKI,SAASS,QAAQb,KAAKD,UAC3BC,KAAKC,gBAAiB,EAEzB,CAED,aAAAa,GAEMd,KAAKC,gBAAkBD,KAAKI,UAC9BJ,KAAKI,SAASS,QAAQb,KAAKD,SAE9B,CAED,gBAAAgB,GACMf,KAAKI,UACPJ,KAAKI,SAASY,YAEjB,ytGCrBHC,EAAKC,aAAaC,GAElB,MAAMC,EAAMC,GAAoBA,EAAQ,GAAGA,WAAYC,EAGjDC,EAAiD,CACrDC,OAAQ,UACRC,MAAO,QACPC,IAAK,MACLC,IAAK,MACLC,OAAQ,UAwBK,IAAMC,EAAN,cAAoBC,EACjCC,EAAoBC,EAAkBC,EAAcC,EAAoBC,EAAWC,EAAeC,UADrF,WAAAxC,uBAOLG,KAAAsC,cAAgB,IAAI1C,EAAiBI,MAAM,IAAMA,KAAKuC,YACtDvC,KAAAwC,YAAc,IAAI5C,EAAiBI,MAAM,IAAMA,KAAKyC,UACpDzC,KAAA0C,UAAY,IAAIC,EAAoB3C,MAKfA,KAAI4C,KASlB,OAK6B5C,KAAM6C,QAAG,EAKO7C,KAAe8C,qBAAYxB,EAa1DtB,KAAS+C,eAAkFzB,EAkEhHtB,KAAAgD,kBAAqBC,IAC3B,MAAMlD,EAASkD,EAAElD,OAGbC,KAAK8C,iBClLG,SAAWI,EAA2BC,GACpD,MAAM9B,MAAEA,GAAU6B,EACZE,EAASF,EAAQG,eAEjBC,EAAejC,EAAMkC,MAAM,EAAGH,GAC9BI,EAAcnC,EAAMkC,MAAMH,EAAQ/B,EAAMoC,QAExCC,EAAuBJ,EAAaK,QAAQR,EAAO,IAGnDS,EAAWF,EAFSF,EAAYG,QAAQR,EAAO,IAG/CU,EAAYH,EAAqBD,OAEvCP,EAAQ7B,MAAQuC,EAChBV,EAAQG,eAAiBQ,EACzBX,EAAQY,aAAeD,CAGzB,CDiKME,CAAWhE,EAAQ,IAAIiE,OAAOhE,KAAK8C,gBAAiB,MAEtD9C,KAAKiE,YAAYhB,EAAE,CAWtB,CAlFC,MAAAiB,SACE,MAAMC,EAAyB,WAAdnE,KAAK4C,KAEhBwB,EAAiBpE,KAAK+C,WAAaxB,EAAoBvB,KAAK4C,MAElE,OAAOyB,CAAI,GACPrE,KAAKsE,4BAGGC,EAAS,CACf,qBAAqB,EACrB,SAAiC,QAAvBvE,KAAK0C,UAAU8B,iBAEnBC,EAAS,CACf,+BAAgCrD,EAAGpB,KAAKsC,cAAc7B,YACtD,6BAA8BW,EAAGpB,KAAKwC,YAAY/B,qCAIlC,WAAdT,KAAK4C,KAAoByB,CAAI,mDAAqDK,kBAGlFC,EAAI3E,KAAK4E,sBACTD,EAAI3E,KAAK6E,qBACN7E,KAAK8E,kCAEHX,GAA0B,SAAdnE,KAAK4C,KAAkB,OAAS5C,KAAK4C,oBAC5CmC,EAAUX,gBACZY,EAAKb,EAAU,yBACbnE,KAAKiF,wBACLjF,KAAKkF,wBACLlF,KAAKmF,mBACVJ,EAAU/E,KAAKoF,kBACH,QAAV1E,EAAAV,KAAKqB,aAAK,IAAAX,EAAAA,EAAI,oBACTqE,EAAU/E,KAAKqF,yBACpBrF,KAAKgD,+BACJhD,KAAKsF,2BACJtF,KAAKuF,2BACNvF,KAAKwF,mCACIT,EAAU/E,KAAKyF,oCACnBV,EAAU/E,KAAK0F,mDAEf1F,KAAK2F,+CAKtB3F,KAAK4F,eAEV,CAEO,aAAAL,CAActC,GACpB,GAAc,UAAVA,EAAE4C,IACJ,OAGF,MAAMC,KAAEA,GAAS9F,KAEjB,GAAI8F,EAAM,CACR,MAAMC,EErKN,SAA0BD,GAG9B,IAAIC,EAASD,EAAKE,cAAiC,0BAE9CD,GAAUD,EAAKG,KAElBF,EADaD,EAAKI,cACJF,cAAiC,eAAeF,EAAKG,QAGrE,OAAOF,CACT,CF0JqBI,CAAgBL,GAC/BM,YAAW,IAAML,aAAA,EAAAA,EAAQM,SAAS,EACnC,CACF,CAYS,YAAAb,CAAavC,GACrBA,EAAEqD,kBAKFtG,KAAKuG,cAAc,IAAIC,EAAU,UAClC,GA9HM3E,EAAM4E,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAE1BC,EAAA,CAAtCC,EAAM,uBAA2DlF,EAAAmF,UAAA,iBAAA,GAC7BF,EAAA,CAApCC,EAAM,qBAAuDlF,EAAAmF,UAAA,eAAA,GAQjCF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KASArF,EAAAmF,UAAA,YAAA,GAKuBF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMtE,KAAMuE,WAAyBtF,EAAAmF,UAAA,cAAA,GAKEF,EAAA,CAA3DG,EAAS,CAAEC,SAAS,EAAME,UAAW,sBAA0DvF,EAAAmF,UAAA,uBAAA,GAanEF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA4GrF,EAAAmF,UAAA,iBAAA,GA9C9GnF,EAAKiF,EAAA,CADzBO,EAAc,eACMxF,SAAAA"}

package/lib/Modal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as n}from"./interface-close-small-CnpAFMO3.js";import{css as i,LitElement as e,html as t}from"lit";import{query as a,property as l,customElement as r}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{o as p}from"./observe-D0n0zOfU.js";import{N as c}from"./events-Bv6wNHwJ.js";import{s as m}from"./Component-DSU3Qp0O.js";import h from"./Icon.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as u}from"./ModalController.js";import"./Footer.js";import"./EventController-BBOmvfLa.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";const f=i`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:transparent;--n-footer-box-shadow:none;position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-overflow-hidden{overflow:hidden}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding-block:var(--n-space-l) var(--n-space-xl);padding-inline:var(--_n-modal-padding-inline)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border)}.n-padded{padding-block:var(--_n-modal-padding-block);padding-inline:var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:'';position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size='s']){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size='l']){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, none)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:var(--n-space-xs);flex-direction:column;inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;h.registerIcon(n);let b=class extends e{constructor(){super(...arguments),this.defaultSlot=new d(this),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new u(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new c("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return t`<div class="n-modal-backdrop"><div class="${s({"n-modal":!0,"n-overflow-hidden":this.featureSlot.hasContent&&this.defaultSlot.isEmpty&&this.footerSlot.isEmpty})}" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="${this.defaultSlot.isEmpty?"":"n-body-padded"}"></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new c("cancel",{cancelable:!0}))&&this.close()}};b.styles=[m,f],o([a(".n-modal",!0)],b.prototype,"modal",void 0),o([a(".n-modal-backdrop",!0)],b.prototype,"backdrop",void 0),o([l({type:Boolean,reflect:!0})],b.prototype,"open",void 0),o([l({reflect:!0})],b.prototype,"size",void 0),o([l({attribute:!1})],b.prototype,"returnValue",void 0),o([l({type:Boolean,reflect:!0})],b.prototype,"scrollable",void 0),o([p("open","updated")],b.prototype,"handleOpenUpdated",null),b=o([r("nord-modal")],b);var x=b;export{x as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as n}from"./interface-close-small-CnpAFMO3.js";import{css as e,LitElement as i,html as t}from"lit";import{query as a,property as l,customElement as r}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as p}from"./events-Bv6wNHwJ.js";import{s as m}from"./Component-DSU3Qp0O.js";import h from"./Icon.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as u}from"./ModalController.js";import"./Footer.js";import"./EventController-BBOmvfLa.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";const f=e`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:transparent;--n-footer-box-shadow:none;position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-overflow-hidden{overflow:hidden}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding-block:var(--n-space-l) var(--n-space-xl);padding-inline:var(--_n-modal-padding-inline)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border)}.n-padded{padding-block:var(--_n-modal-padding-block);padding-inline:var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:'';position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size='s']){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size='l']){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, none)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:var(--n-space-xs);flex-direction:column;inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;h.registerIcon(n);class b extends p{constructor(o){super("cancel",{cancelable:!0}),Object.defineProperty(this,"trigger",{value:o,enumerable:!0,writable:!1})}}class g extends p{constructor(o){super("close"),Object.defineProperty(this,"trigger",{value:o,enumerable:!0,writable:!1})}}let x=class extends i{constructor(){super(...arguments),this.defaultSlot=new d(this),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new u(this,{isOpen:()=>this.open,onDismiss:o=>this.handleDismiss(o),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:(o,n)=>this.close(o,n)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog")}disconnectedCallback(){super.disconnectedCallback(),this.lastTrigger=void 0}showModal(){this.open=!0}close(o,n){this.open=!1,null!=o&&(this.returnValue=o);const e=null!=n?n:this.lastTrigger;this.dispatchEvent(new g(e)),this.lastTrigger=void 0}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return t`<div class="n-modal-backdrop"><div class="${s({"n-modal":!0,"n-overflow-hidden":this.featureSlot.hasContent&&this.defaultSlot.isEmpty&&this.footerSlot.isEmpty})}" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${o=>this.handleDismiss(o)}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="${this.defaultSlot.isEmpty?"":"n-body-padded"}"></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(o){this.dispatchEvent(new b(o))&&(this.lastTrigger=o,this.close())}};x.styles=[m,f],o([a(".n-modal",!0)],x.prototype,"modal",void 0),o([a(".n-modal-backdrop",!0)],x.prototype,"backdrop",void 0),o([l({type:Boolean,reflect:!0})],x.prototype,"open",void 0),o([l({reflect:!0})],x.prototype,"size",void 0),o([l({attribute:!1})],x.prototype,"returnValue",void 0),o([l({type:Boolean,reflect:!0})],x.prototype,"scrollable",void 0),o([c("open","updated")],x.prototype,"handleOpenUpdated",null),x=o([r("nord-modal")],x);var y=x;export{b as ModalCancelEvent,g as ModalCloseEvent,y as default};
 //# sourceMappingURL=Modal.js.map

package/lib/Modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { NordEvent } from '../common/events.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Modal.css'\nimport { ModalController } from './ModalController.js'\n\nimport '../footer/Footer.js'\n\nIcon.registerIcon(closeIcon)\n\n/*\n Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n \n @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot feature - Slot for full bleed content like an image.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n \n @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the header of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n \n @localization closeLabel - Accessible label for the close button.\n /\n@customElement('nord-modal')\nexport default class Modal extends LitElement {\n static styles = [componentStyle, style]\n\n @query('.n-modal', true) private modal!: HTMLDivElement\n @query('.n-modal-backdrop', true) private backdrop!: HTMLDivElement\n\n private defaultSlot = new SlotController(this)\n private headerSlot = new SlotController(this, 'header')\n private featureSlot = new SlotController(this, 'feature')\n private footerSlot = new SlotController(this, 'footer')\n\n private localize = new LocalizeController<'nord-modal'>(this)\n private modalController = new ModalController(this, {\n isOpen: () => this.open,\n onDismiss: () => this.handleDismiss(),\n dialog: () => this.modal,\n backdrop: () => this.backdrop,\n close: returnValue => this.close(returnValue),\n })\n\n /\n Controls whether the modal is open or not.\n /\n @property({ type: Boolean, reflect: true }) open = false\n\n /\n Controls the max-width of the modal when open.\n /\n @property({ reflect: true }) size: 's' \| 'm' \| 'l' \| 'xl' = 'm'\n\n /\n The reason why the modal was closed. This typically indicates\n * which button the user pressed to close the modal, though any value\n * can be supplied if the modal is programmatically closed.\n /\n @property({ attribute: false }) returnValue: string = ''\n\n /\n By default if a modal is too big for the browser window,\n * the entire modal will scroll. This setting changes that behavior\n * so that the body of the modal scrolls instead, with the modal\n * itself remaining fixed.\n /\n @property({ type: Boolean, reflect: true }) scrollable = false\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.setAttribute('role', 'dialog')\n }\n\n /\n Show the modal, automatically moving focus to the modal or a child\n * element with an `autofocus` attribute.\n /\n showModal() {\n this.open = true\n }\n\n /\n Programmatically close the modal.\n * @param returnValue An optional value to indicate why the modal was closed.\n /\n close(returnValue?: string) {\n this.open = false\n\n if (returnValue != null) {\n this.returnValue = returnValue\n }\n\n this.dispatchEvent(new NordEvent('close'))\n }\n\n /\n Programmatically focus the modal.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions) {\n this.modal.focus({ preventScroll: true, ...options })\n }\n\n render() {\n return html`\n <div class=\"n-modal-backdrop\">\n <div\n class=${classMap({\n 'n-modal': true,\n 'n-overflow-hidden': this.featureSlot.hasContent && this.defaultSlot.isEmpty && this.footerSlot.isEmpty,\n })}\n tabindex=\"0\"\n >\n <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n <button class=\"n-close\" @click=${this.handleDismiss}>\n <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term('closeLabel')}></nord-icon>\n </button>\n </div>\n\n <div class=\"n-modal-body\">\n <slot\n name=${this.featureSlot.slotName}\n class=${this.headerSlot.isEmpty ? 'n-rounded-top' : ''}\n ?hidden=${this.featureSlot.isEmpty}\n ></slot>\n <slot class=${this.defaultSlot.isEmpty ? '' : 'n-body-padded'}></slot>\n </div>\n\n <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n <slot name=${this.footerSlot.slotName}></slot>\n </nord-footer>\n </div>\n </div>\n `\n }\n\n @observe('open', 'updated')\n protected handleOpenUpdated(prev: boolean) {\n if (this.open) {\n this.modalController.block()\n }\n else if (prev === true) {\n this.modalController.unblock()\n }\n }\n\n private handleDismiss() {\n // allow cancelling of close\n const allowed = this.dispatchEvent(new NordEvent('cancel', { cancelable: true }))\n\n if (allowed) {\n this.close()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-modal': Modal\n }\n}\n"],"names":["Icon","registerIcon","closeIcon","Modal","LitElement","constructor","this","defaultSlot","SlotController","headerSlot","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","super","setAttribute","showModal","dispatchEvent","NordEvent","focus","options","preventScroll","render","html","classMap","hasContent","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","cancelable","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"0wKAiBAA,EAAKC,aAAaC,GAuBH,IAAMC,EAAN,cAAoBC,EAApB,WAAAC,uBAMLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAUG,WAAG,IAAID,EAAeF,KAAM,UACtCA,KAAWI,YAAG,IAAIF,EAAeF,KAAM,WACvCA,KAAUK,WAAG,IAAIH,EAAeF,KAAM,UAEtCA,KAAAM,SAAW,IAAIC,EAAiCP,MAChDA,KAAAQ,gBAAkB,IAAIC,EAAgBT,KAAM,CAClDU,OAAQ,IAAMV,KAAKW,KACnBC,UAAW,IAAMZ,KAAKa,gBACtBC,OAAQ,IAAMd,KAAKe,MACnBC,SAAU,IAAMhB,KAAKgB,SACrBC,MAAOC,GAAelB,KAAKiB,MAAMC,KAMSlB,KAAIW,MAAG,EAKtBX,KAAImB,KAA2B,IAO5BnB,KAAWkB,YAAW,GAQVlB,KAAUoB,YAAG,CA0F1D,CAxFC,iBAAAC,GACEC,MAAMD,oBAENrB,KAAKuB,aAAa,OAAQ,SAC3B,CAMD,SAAAC,GACExB,KAAKW,MAAO,CACb,CAMD,KAAAM,CAAMC,GACJlB,KAAKW,MAAO,EAEO,MAAfO,IACFlB,KAAKkB,YAAcA,GAGrBlB,KAAKyB,cAAc,IAAIC,EAAU,SAClC,CAMD,KAAAC,CAAMC,GACJ5B,KAAKe,MAAMY,MAAM,CAAEE,eAAe,KAASD,GAC5C,CAED,MAAAE,GACE,OAAOC,CAAI,6CAGGC,EAAS,CACf,WAAW,EACX,oBAAqBhC,KAAKI,YAAY6B,YAAcjC,KAAKC,YAAYiC,SAAWlC,KAAKK,WAAW6B,8EAI9ClC,KAAKG,WAAW+B,yCACpClC,KAAKG,WAAWgC,oDACbnC,KAAKa,0EACqBb,KAAKM,SAAS8B,KAAK,mFAMrEpC,KAAKI,YAAY+B,oBAChBnC,KAAKG,WAAW+B,QAAU,gBAAkB,gBAC1ClC,KAAKI,YAAY8B,gCAEflC,KAAKC,YAAYiC,QAAU,GAAK,uDAGzBlC,KAAKK,WAAW6B,wBACxBlC,KAAKK,WAAW8B,6CAKtC,CAGS,iBAAAE,CAAkBC,GACtBtC,KAAKW,KACPX,KAAKQ,gBAAgB+B,SAEL,IAATD,GACPtC,KAAKQ,gBAAgBgC,SAExB,CAEO,aAAA3B,GAEUb,KAAKyB,cAAc,IAAIC,EAAU,SAAU,CAAEe,YAAY,MAGvEzC,KAAKiB,OAER,GAnIMpB,EAAA6C,OAAS,CAACC,EAAgBC,GAEAC,EAAA,CAAhCC,EAAM,YAAY,IAAoCjD,EAAAkD,UAAA,aAAA,GACbF,EAAA,CAAzCC,EAAM,qBAAqB,IAAuCjD,EAAAkD,UAAA,gBAAA,GAmBvBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoBtD,EAAAkD,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAA0CtD,EAAAkD,UAAA,YAAA,GAO/BF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAiCvD,EAAAkD,UAAA,mBAAA,GAQZF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAA0BtD,EAAAkD,UAAA,kBAAA,GAyEpDF,EAAA,CADTQ,EAAQ,OAAQ,YAQhBxD,EAAAkD,UAAA,oBAAA,MA3HkBlD,EAAKgD,EAAA,CADzBS,EAAc,eACMzD,SAAAA"}
1	+ {"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { NordEvent } from '../common/events.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Modal.css'\nimport { ModalController } from './ModalController.js'\n\nimport '../footer/Footer.js'\n\nIcon.registerIcon(closeIcon)\n\n/*\n Event dispatched when a modal is about to be dismissed.\n * The `trigger` property contains the original event that caused the dismiss.\n /\nexport class ModalCancelEvent extends NordEvent {\n declare trigger: Event\n\n constructor(trigger: Event) {\n super('cancel', { cancelable: true })\n Object.defineProperty(this, 'trigger', {\n value: trigger,\n enumerable: true,\n writable: false,\n })\n }\n}\n\n/\n Event dispatched when a modal is closed.\n * The `trigger` property contains the original event that caused the close, if available.\n /\nexport class ModalCloseEvent extends NordEvent {\n declare trigger: Event \| undefined\n\n constructor(trigger?: Event) {\n super('close')\n Object.defineProperty(this, 'trigger', {\n value: trigger,\n enumerable: true,\n writable: false,\n })\n }\n}\n\n/\n Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n \n @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot feature - Slot for full bleed content like an image.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel {ModalCancelEvent} - Dispatched before the modal has closed when a user attempts to dismiss a modal. The event includes a `trigger` property containing the original event that caused the dismiss. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close {ModalCloseEvent} - Dispatched when a modal is closed for any reason. The event includes an optional `trigger` property containing the original event that caused the close, if the modal was closed by a user action.\n \n @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the header of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n \n @localization closeLabel - Accessible label for the close button.\n /\n@customElement('nord-modal')\nexport default class Modal extends LitElement {\n static styles = [componentStyle, style]\n\n @query('.n-modal', true) private modal!: HTMLDivElement\n @query('.n-modal-backdrop', true) private backdrop!: HTMLDivElement\n\n private lastTrigger?: Event\n\n private defaultSlot = new SlotController(this)\n private headerSlot = new SlotController(this, 'header')\n private featureSlot = new SlotController(this, 'feature')\n private footerSlot = new SlotController(this, 'footer')\n\n private localize = new LocalizeController<'nord-modal'>(this)\n private modalController = new ModalController(this, {\n isOpen: () => this.open,\n onDismiss: (e: Event) => this.handleDismiss(e),\n dialog: () => this.modal,\n backdrop: () => this.backdrop,\n close: (returnValue, trigger) => this.close(returnValue, trigger),\n })\n\n /\n Controls whether the modal is open or not.\n /\n @property({ type: Boolean, reflect: true }) open = false\n\n /\n Controls the max-width of the modal when open.\n /\n @property({ reflect: true }) size: 's' \| 'm' \| 'l' \| 'xl' = 'm'\n\n /\n The reason why the modal was closed. This typically indicates\n * which button the user pressed to close the modal, though any value\n * can be supplied if the modal is programmatically closed.\n /\n @property({ attribute: false }) returnValue: string = ''\n\n /\n By default if a modal is too big for the browser window,\n * the entire modal will scroll. This setting changes that behavior\n * so that the body of the modal scrolls instead, with the modal\n * itself remaining fixed.\n /\n @property({ type: Boolean, reflect: true }) scrollable = false\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.setAttribute('role', 'dialog')\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n // Clear trigger reference when modal is removed from DOM to prevent memory leaks\n this.lastTrigger = undefined\n }\n\n /\n Show the modal, automatically moving focus to the modal or a child\n * element with an `autofocus` attribute.\n /\n showModal() {\n this.open = true\n }\n\n /\n Programmatically close the modal.\n * @param returnValue An optional value to indicate why the modal was closed.\n * @param trigger An optional event that triggered the close.\n /\n close(returnValue?: string, trigger?: Event) {\n this.open = false\n\n if (returnValue != null) {\n this.returnValue = returnValue\n }\n\n const closeTrigger = trigger ?? this.lastTrigger\n this.dispatchEvent(new ModalCloseEvent(closeTrigger))\n this.lastTrigger = undefined\n }\n\n /\n Programmatically focus the modal.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions) {\n this.modal.focus({ preventScroll: true, ...options })\n }\n\n render() {\n return html`\n <div class=\"n-modal-backdrop\">\n <div\n class=${classMap({\n 'n-modal': true,\n 'n-overflow-hidden': this.featureSlot.hasContent && this.defaultSlot.isEmpty && this.footerSlot.isEmpty,\n })}\n tabindex=\"0\"\n >\n <!-- eslint-disable-next-line @nordhealth/no-unknown-legacy-classes -->\n <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n <button class=\"n-close\" @click=${(e: Event) => this.handleDismiss(e)}>\n <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term('closeLabel')}></nord-icon>\n </button>\n </div>\n\n <div class=\"n-modal-body\">\n <slot\n name=${this.featureSlot.slotName}\n class=${this.headerSlot.isEmpty ? 'n-rounded-top' : ''}\n ?hidden=${this.featureSlot.isEmpty}\n ></slot>\n <slot class=${this.defaultSlot.isEmpty ? '' : 'n-body-padded'}></slot>\n </div>\n\n <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n <slot name=${this.footerSlot.slotName}></slot>\n </nord-footer>\n </div>\n </div>\n `\n }\n\n @observe('open', 'updated')\n protected handleOpenUpdated(prev: boolean) {\n if (this.open) {\n this.modalController.block()\n }\n else if (prev === true) {\n this.modalController.unblock()\n }\n }\n\n private handleDismiss(trigger: Event) {\n // allow cancelling of close\n const allowed = this.dispatchEvent(new ModalCancelEvent(trigger))\n\n if (allowed) {\n this.lastTrigger = trigger\n this.close()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-modal': Modal\n }\n}\n"],"names":["Icon","registerIcon","closeIcon","ModalCancelEvent","NordEvent","constructor","trigger","super","cancelable","Object","defineProperty","this","value","enumerable","writable","ModalCloseEvent","Modal","LitElement","defaultSlot","SlotController","headerSlot","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","e","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","setAttribute","disconnectedCallback","lastTrigger","undefined","showModal","closeTrigger","dispatchEvent","focus","options","preventScroll","render","html","classMap","hasContent","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"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"}

package/lib/ModalController.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{E as t}from"./EventController-BBOmvfLa.js";import{L as s}from"./LightDismissController-4pH8cdko.js";import{S as i}from"./ScrollbarController-BFC67Y2x.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";function e(t,s){t.forEach((t=>function(t,s){if(s){const s=t.getAttribute("inert");null!==s&&t.setAttribute("data-n-inert",s),t.setAttribute("inert","")}else{const s=t.getAttribute("data-n-inert");null!==s?(t.setAttribute("inert",s),t.removeAttribute("data-n-inert")):t.removeAttribute("inert")}}(t,s)))}function o(t){const s=[];let i=t.nextElementSibling;for(;i;)s.push(i),i=i.nextElementSibling;for(i=t.previousElementSibling;i;)s.push(i),i=i.previousElementSibling;return t.parentElement&&t.parentElement!==document.body&&s.push(...o(t.parentElement)),s}class n{constructor(t){this.host=t,this.inertElements=[],t.addController(this)}hostDisconnected(){this.release()}trap(){const t=o(this.host);e(t,!0),this.inertElements=t}release(){e(this.inertElements,!1),this.inertElements=[]}}class r{constructor(e,o){this.host=e,this.trackLastButton=t=>{const s=t.target;"button"===s.localName&&(this.lastButton=s)},this.polyfillSubmitter=t=>{t.submitter=this.lastButton},this.handleTransitionEnd=t=>{this.options.isOpen()||t.target!==this.host||this.scrollBar.unlockScroll()},this.handleLightDismiss=t=>{this.host.contains(t.target)&&this.options.onDismiss(t)},this.handleSubmit=t=>{this.lastButton=void 0;const s=t.target,i=t.submitter,e="dialog"===s.method,o="dialog"===s.getAttribute("method");o&&!e&&t.preventDefault(),(o||e)&&this.options.close(null==i?void 0:i.value)},e.addController(this),this.options=o,this.scrollBar=new i(e),this.focusTrap=new n(e),this.events=new t(e),this.lightDismiss=new s(e,{isOpen:o.isOpen,isDismissible:t=>t!==o.dialog(),onDismiss:this.handleLightDismiss})}hostConnected(){window.SubmitEvent||(this.events.listen(this.host,"click",this.trackLastButton,!0),this.events.listen(this.host,"submit",this.polyfillSubmitter,!0)),this.events.listen(this.host,"transitionend",this.handleTransitionEnd),this.events.listen(this.host,"submit",this.handleSubmit)}hostDisconnected(){r.openModals.remove(this)}block(){var t;null===(t=r.openModals.top)||void 0===t||t.focusTrap.release(),r.openModals.push(this),this.scrollBar.lockScroll(),this.trigger=document.activeElement;(this.host.querySelector("[autofocus]")||this.host).focus(),this.focusTrap.trap()}unblock(){var t,s;r.openModals.top===this&&(r.openModals.pop(),this.options.backdrop().scrollTop=0,this.focusTrap.release(),null===(t=this.trigger)||void 0===t||t.focus(),this.trigger=void 0,null===(s=r.openModals.top)||void 0===s||s.focusTrap.trap())}}r.openModals=new class{constructor(){this.items=[]}get length(){return this.items.length}get top(){return this.items[this.length-1]}push(t){this.items.push(t)}pop(){return this.items.pop()}remove(t){const s=this.items.indexOf(t);-1!==s&&this.items.splice(s,1)}};export{r as ModalController};
+import{E as t}from"./EventController-BBOmvfLa.js";import{L as s}from"./LightDismissController-4pH8cdko.js";import{S as i}from"./ScrollbarController-BFC67Y2x.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";function e(t,s){t.forEach((t=>function(t,s){if(s){const s=t.getAttribute("inert");null!==s&&t.setAttribute("data-n-inert",s),t.setAttribute("inert","")}else{const s=t.getAttribute("data-n-inert");null!==s?(t.setAttribute("inert",s),t.removeAttribute("data-n-inert")):t.removeAttribute("inert")}}(t,s)))}function o(t){const s=[];let i=t.nextElementSibling;for(;i;)s.push(i),i=i.nextElementSibling;for(i=t.previousElementSibling;i;)s.push(i),i=i.previousElementSibling;return t.parentElement&&t.parentElement!==document.body&&s.push(...o(t.parentElement)),s}class n{constructor(t){this.host=t,this.inertElements=[],t.addController(this)}hostDisconnected(){this.release()}trap(){const t=o(this.host);e(t,!0),this.inertElements=t}release(){e(this.inertElements,!1),this.inertElements=[]}}class r{constructor(e,o){this.host=e,this.trackLastButton=t=>{const s=t.target;"button"===s.localName&&(this.lastButton=s)},this.polyfillSubmitter=t=>{t.submitter=this.lastButton},this.handleTransitionEnd=t=>{this.options.isOpen()||t.target!==this.host||this.scrollBar.unlockScroll()},this.handleLightDismiss=t=>{this.host.contains(t.target)&&this.options.onDismiss(t)},this.handleSubmit=t=>{this.lastButton=void 0;const s=t.target,i=t.submitter,e="dialog"===s.method,o="dialog"===s.getAttribute("method");o&&!e&&t.preventDefault(),(o||e)&&this.options.close(null==i?void 0:i.value,t)},e.addController(this),this.options=o,this.scrollBar=new i(e),this.focusTrap=new n(e),this.events=new t(e),this.lightDismiss=new s(e,{isOpen:o.isOpen,isDismissible:t=>t!==o.dialog(),onDismiss:this.handleLightDismiss})}hostConnected(){window.SubmitEvent||(this.events.listen(this.host,"click",this.trackLastButton,!0),this.events.listen(this.host,"submit",this.polyfillSubmitter,!0)),this.events.listen(this.host,"transitionend",this.handleTransitionEnd),this.events.listen(this.host,"submit",this.handleSubmit)}hostDisconnected(){r.openModals.remove(this)}block(){var t;null===(t=r.openModals.top)||void 0===t||t.focusTrap.release(),r.openModals.push(this),this.scrollBar.lockScroll(),this.trigger=document.activeElement;(this.host.querySelector("[autofocus]")||this.host).focus(),this.focusTrap.trap()}unblock(){var t,s;r.openModals.top===this&&(r.openModals.pop(),this.options.backdrop().scrollTop=0,this.focusTrap.release(),null===(t=this.trigger)||void 0===t||t.focus(),this.trigger=void 0,null===(s=r.openModals.top)||void 0===s||s.focusTrap.trap())}}r.openModals=new class{constructor(){this.items=[]}get length(){return this.items.length}get top(){return this.items[this.length-1]}push(t){this.items.push(t)}pop(){return this.items.pop()}remove(t){const s=this.items.indexOf(t);-1!==s&&this.items.splice(s,1)}};export{r as ModalController};
 //# sourceMappingURL=ModalController.js.map

package/lib/ModalController.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalController.js","sources":["../src/common/inert.ts","../src/common/controllers/FocusTrapController.ts","../src/modal/ModalController.ts"],"sourcesContent":["/*\n Set or remove the `inert` attribute on an element.\n \n @param element The element to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n /\nfunction setInertAttribute(element: Element, enabled: boolean) {\n if (enabled) {\n const current = element.getAttribute('inert')\n\n // store previous value\n if (current !== null) {\n element.setAttribute('data-n-inert', current)\n }\n\n element.setAttribute('inert', '')\n }\n else {\n const current = element.getAttribute('data-n-inert')\n\n // restore previous value if necessary\n if (current !== null) {\n element.setAttribute('inert', current)\n element.removeAttribute('data-n-inert')\n }\n else {\n element.removeAttribute('inert')\n }\n }\n}\n\n/\n Set or remove the `inert` attribute on all given elements.\n \n @param elements The elements to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n /\nexport function setInertAttributes(elements: Element[], enabled: boolean) {\n elements.forEach(element => setInertAttribute(element, enabled))\n}\n\n/\n Get all siblings of an element, including the siblings of its parents.\n * Use this to find all elements that should be inert when a modal is open.\n * And then use `setInertAttributes` to set or remove the `inert` attribute\n * on all of them.\n /\nexport function getElementsAround(element: Element): Element[] {\n const elements = []\n let next = element.nextElementSibling\n\n while (next) {\n elements.push(next)\n next = next.nextElementSibling\n }\n\n next = element.previousElementSibling\n\n while (next) {\n elements.push(next)\n next = next.previousElementSibling\n }\n\n if (element.parentElement && element.parentElement !== document.body) {\n elements.push(...getElementsAround(element.parentElement))\n }\n\n return elements\n}\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { getElementsAround, setInertAttributes } from '../../common/inert.js'\n\nexport class FocusTrapController implements ReactiveController {\n private inertElements: Element[] = []\n\n constructor(private host: ReactiveControllerHost & HTMLElement) {\n host.addController(this)\n }\n\n hostDisconnected() {\n this.release()\n }\n\n trap() {\n const elements = getElementsAround(this.host)\n\n setInertAttributes(elements, true)\n this.inertElements = elements\n }\n\n release() {\n setInertAttributes(this.inertElements, false)\n this.inertElements = []\n }\n}\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type { LightDismissOptions } from '../common/controllers/LightDismissController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { FocusTrapController } from '../common/controllers/FocusTrapController.js'\nimport { LightDismissController } 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\ninterface 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(\n private host: ReactiveControllerHost & HTMLElement,\n options: ModalControllerOptions,\n ) {\n host.addController(this)\n this.options = options\n\n this.scrollBar = new ScrollbarController(host)\n this.focusTrap = new FocusTrapController(host)\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.lockScroll()\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 modal has transitioned,\n // that way we avoid awkward double scrollbars.\n if (!this.options.isOpen() && e.target === this.host) {\n this.scrollBar.unlockScroll()\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":["setInertAttributes","elements","enabled","forEach","element","current","getAttribute","setAttribute","removeAttribute","setInertAttribute","getElementsAround","next","nextElementSibling","push","previousElementSibling","parentElement","document","body","FocusTrapController","constructor","host","this","inertElements","addController","hostDisconnected","release","trap","ModalController","options","trackLastButton","e","target","localName","lastButton","polyfillSubmitter","submitter","handleTransitionEnd","isOpen","scrollBar","unlockScroll","handleLightDismiss","contains","onDismiss","handleSubmit","undefined","isDialogProperty","method","isDialogAttr","preventDefault","close","value","ScrollbarController","focusTrap","events","EventController","lightDismiss","LightDismissController","isDismissible","node","dialog","hostConnected","window","SubmitEvent","listen","openModals","remove","block","_a","top","lockScroll","trigger","activeElement","querySelector","focus","unblock","pop","backdrop","scrollTop","_b","items","length","item","index","indexOf","splice"],"mappings":"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"}
1	+ {"version":3,"file":"ModalController.js","sources":["../src/common/inert.ts","../src/common/controllers/FocusTrapController.ts","../src/modal/ModalController.ts"],"sourcesContent":["/*\n Set or remove the `inert` attribute on an element.\n \n @param element The element to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n /\nfunction setInertAttribute(element: Element, enabled: boolean) {\n if (enabled) {\n const current = element.getAttribute('inert')\n\n // store previous value\n if (current !== null) {\n element.setAttribute('data-n-inert', current)\n }\n\n element.setAttribute('inert', '')\n }\n else {\n const current = element.getAttribute('data-n-inert')\n\n // restore previous value if necessary\n if (current !== null) {\n element.setAttribute('inert', current)\n element.removeAttribute('data-n-inert')\n }\n else {\n element.removeAttribute('inert')\n }\n }\n}\n\n/\n Set or remove the `inert` attribute on all given elements.\n \n @param elements The elements to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n /\nexport function setInertAttributes(elements: Element[], enabled: boolean) {\n elements.forEach(element => setInertAttribute(element, enabled))\n}\n\n/\n Get all siblings of an element, including the siblings of its parents.\n * Use this to find all elements that should be inert when a modal is open.\n * And then use `setInertAttributes` to set or remove the `inert` attribute\n * on all of them.\n /\nexport function getElementsAround(element: Element): Element[] {\n const elements = []\n let next = element.nextElementSibling\n\n while (next) {\n elements.push(next)\n next = next.nextElementSibling\n }\n\n next = element.previousElementSibling\n\n while (next) {\n elements.push(next)\n next = next.previousElementSibling\n }\n\n if (element.parentElement && element.parentElement !== document.body) {\n elements.push(...getElementsAround(element.parentElement))\n }\n\n return elements\n}\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { getElementsAround, setInertAttributes } from '../../common/inert.js'\n\nexport class FocusTrapController implements ReactiveController {\n private inertElements: Element[] = []\n\n constructor(private host: ReactiveControllerHost & HTMLElement) {\n host.addController(this)\n }\n\n hostDisconnected() {\n this.release()\n }\n\n trap() {\n const elements = getElementsAround(this.host)\n\n setInertAttributes(elements, true)\n this.inertElements = elements\n }\n\n release() {\n setInertAttributes(this.inertElements, false)\n this.inertElements = []\n }\n}\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type { LightDismissOptions } from '../common/controllers/LightDismissController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { FocusTrapController } from '../common/controllers/FocusTrapController.js'\nimport { LightDismissController } 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\ninterface ModalControllerOptions {\n isOpen: LightDismissOptions['isOpen']\n onDismiss: (trigger: Event) => void\n close: (returnValue?: string, trigger?: Event) => 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(\n private host: ReactiveControllerHost & HTMLElement,\n options: ModalControllerOptions,\n ) {\n host.addController(this)\n this.options = options\n\n this.scrollBar = new ScrollbarController(host)\n this.focusTrap = new FocusTrapController(host)\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.lockScroll()\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 modal has transitioned,\n // that way we avoid awkward double scrollbars.\n if (!this.options.isOpen() && e.target === this.host) {\n this.scrollBar.unlockScroll()\n }\n }\n\n private handleLightDismiss = (trigger: Event) => {\n if (this.host.contains(trigger.target as Node)) {\n this.options.onDismiss(trigger)\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, e)\n }\n }\n}\n"],"names":["setInertAttributes","elements","enabled","forEach","element","current","getAttribute","setAttribute","removeAttribute","setInertAttribute","getElementsAround","next","nextElementSibling","push","previousElementSibling","parentElement","document","body","FocusTrapController","constructor","host","this","inertElements","addController","hostDisconnected","release","trap","ModalController","options","trackLastButton","e","target","localName","lastButton","polyfillSubmitter","submitter","handleTransitionEnd","isOpen","scrollBar","unlockScroll","handleLightDismiss","trigger","contains","onDismiss","handleSubmit","undefined","isDialogProperty","method","isDialogAttr","preventDefault","close","value","ScrollbarController","focusTrap","events","EventController","lightDismiss","LightDismissController","isDismissible","node","dialog","hostConnected","window","SubmitEvent","listen","openModals","remove","block","_a","top","lockScroll","activeElement","querySelector","focus","unblock","pop","backdrop","scrollTop","_b","items","length","item","index","indexOf","splice"],"mappings":"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"}

package/lib/Popout-vR6LxNS9.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{o as e,a as o,s as i,h as s,l as n,c as a,b as r,f as l}from"./positioning-D-K8Mueq.js";import{css as h,html as p,LitElement as d}from"lit";import{property as c,query as m,state as u,customElement as v}from"lit/decorators.js";import{D as g}from"./DirectionController-ChvNGESZ.js";import{E as f}from"./EventController-BBOmvfLa.js";import{L as y}from"./LightDismissController-4pH8cdko.js";import{S as b}from"./ScrollbarController-BFC67Y2x.js";import{o as w}from"./observe-D0n0zOfU.js";import{N as E,t as x}from"./events-Bv6wNHwJ.js";import{s as A}from"./Component-DSU3Qp0O.js";function k(e){class o extends e{constructor(){super(...arguments),this.open=!1,this.align="start",this.position="block-end"}}return t([c({type:Boolean,reflect:!0})],o.prototype,"open",void 0),t([c({reflect:!0})],o.prototype,"align",void 0),t([c({reflect:!0})],o.prototype,"position",void 0),o}const C=h`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);color:var(--n-color-text);opacity:0;transition:opacity var(--n-transition-slowly);inset:auto;inline-size:auto;block-size:auto;margin:0;padding:0;border:none;background:0 0;overflow:visible;left:var(--_n-popout-position-x);top:var(--_n-popout-position-y)}.n-popout{pointer-events:none;transform:translateY(-10px) scale(.97);visibility:hidden;transition:transform var(--n-transition-slowly),visibility var(--n-transition-slowly);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)}:host([open]){opacity:1}:host([open]) .n-popout{transition-property:transform;visibility:visible;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}@media (max-width:35.9375em){:host(:not([always-floating])){position:fixed;inset:0;overflow-y:auto;opacity:1;background:0 0;transition:background var(--n-transition-mobile)}:host([open]:not([always-floating])){pointer-events:auto;background:var(--n-color-overlay)}:host([open]:not([always-floating])) .n-popout{transform:translateY(0)}:host(:not([always-floating])) .n-popout{position:fixed;inset:0;inset-block-start:auto;transform:translateY(100%);transition:transform var(--n-transition-mobile),visibility var(--n-transition-mobile);transform-origin:bottom center;border-radius:0}}.top-end,.top-start{transform:translateY(10px) scale(.97)}.left-end,.left-start{transform:translateX(10px) scale(.97)}.right-end,.right-start{transform:translateX(-10px) scale(.97)}.bottom-start.is-rtl,.left-end,.top-end{transform-origin:bottom right}.bottom-end,.left-start,.top-start.is-rtl{transform-origin:top right}.bottom-end.is-rtl,.right-end,.right-start{transform-origin:bottom left}.right-start,.top-end.is-rtl{transform-origin:top left}`,P="undefined"==typeof matchMedia?{matches:!1,addEventListener(){}}:matchMedia("(max-width: 35.9375em)");let S=class extends(k(d)){constructor(){super(...arguments),this.scrollBar=new b(this),this.dismiss=new y(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this.popout&&t!==this.targetElement}),this.events=new f(this),this.direction=new g(this),this.smallViewport=P.matches,this.id="",this.alwaysFloating=!1,this.enableScroll=()=>{this.open\|\|(this.scrollBar.unlockScroll(),this.leaveTopLayer())},this.updatePosition=async()=>{var t;if(!this.anchorElement)return;const r={strategy:"fixed"};"auto"===this.position?r.middleware=[e(8),o({alignment:this.align,padding:8}),i({padding:8}),s()]:(r.placement=n(this.position,this.align,this.direction.dir),r.middleware=[e(8),l(),i({padding:8}),s()]);const{x:h,y:p,placement:d,middlewareData:c}=await a(this.anchorElement,this,r);this.computedPosition=d,this.style.setProperty("--_n-popout-position-x",`${h}px`),this.style.setProperty("--_n-popout-position-y",`${p}px`),(null===(t=c.hide)\|\|void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):!this.smallViewport\|\|this.alwaysFloating?(this.enterTopLayer(),this.updatePosition().then((()=>this.show()))):this.show()},this.handleMediaQueryChange=()=>{var t;this.smallViewport=P.matches,null===(t=this.cleanupAutoUpdate)\|\|void 0===t\|\|t.call(this),(!this.smallViewport\|\|this.alwaysFloating)&&this.open&&this.anchorElement?(this.cleanupAutoUpdate=r(this.anchorElement,this,this.updatePosition),this.scrollBar.unlockScroll()):this.open&&this.scrollBar.lockScroll()}}async show(){return this.open?Promise.resolve():(this.enterTopLayer(),this.open=!0,await this.updateComplete,this.dispatchEvent(new E("open")),x(this.popout))}async hide(t=!0){var e,o;if(!this.open)return Promise.resolve();this.open=!1,null===(e=this.cleanupAutoUpdate)\|\|void 0===e\|\|e.call(this),this.dispatchEvent(new E("close")),t&&(null===(o=this.targetElement)\|\|void 0===o\|\|o.focus({preventScroll:!0}));const i=await x(this.popout);return this.leaveTopLayer(),i}firstUpdated(){this.smallViewport&&!this.alwaysFloating\|\|this.updatePosition()}connectedCallback(){super.connectedCallback(),this.events.listen(P,"change",this.handleMediaQueryChange),this.initializeElements()}disconnectedCallback(){var t,e;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)\|\|void 0===t\|\|t.call(this),null===(e=this.targetElement)\|\|void 0===e\|\|e.removeAttribute("aria-expanded")}render(){return p`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}" @transitionend="${this.enableScroll}"><slot></slot></div>`}handleIdChange(){var t;null===(t=this.targetElement)\|\|void 0===t\|\|t.removeEventListener("click",this.toggleOpen),this.id?this.initializeElements():console.warn("NORD: popout requires an id attribute and value")}initializeElements(){this.targetElement=this.getToggle(),this.anchorElement=this.getAnchor(),this.events.listen(this.targetElement,"click",this.toggleOpen)}handleOpenChange(){var t,e;null===(t=this.targetElement)\|\|void 0===t\|\|t.setAttribute("aria-expanded",`${this.open}`),this.open?(this.enterTopLayer(),this.smallViewport&&!this.alwaysFloating?this.scrollBar.lockScroll():this.anchorElement&&(this.cleanupAutoUpdate=r(this.anchorElement,this,this.updatePosition))):null===(e=this.cleanupAutoUpdate)\|\|void 0===e\|\|e.call(this)}handleAnchorChange(){var t;null===(t=this.cleanupAutoUpdate)\|\|void 0===t\|\|t.call(this),this.anchorElement=this.getAnchor(),this.open&&(!this.smallViewport\|\|this.alwaysFloating)&&this.anchorElement&&(this.cleanupAutoUpdate=r(this.anchorElement,this,this.updatePosition))}enterTopLayer(){if("function"==typeof this.showPopover)try{this.setAttribute("popover","manual"),this.showPopover()}catch(t){this.removeAttribute("popover")}}leaveTopLayer(){this.removeAttribute("popover")}getToggle(){const t=this.getRootNode(),e=t.querySelectorAll(`[aria-controls='${this.id}']`);let o=e[0];if(e.length>1){const i=[...t.querySelectorAll(`[id='${this.id}']`)].indexOf(this);i>=0&&i<e.length&&(o=e[i])}return o instanceof HTMLSlotElement?o.assignedElements()[0]:o}getAnchor(){if(!this.anchor)return this.targetElement;const t=this.getRootNode().querySelector(`#${this.anchor}`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};S.styles=[A,C],t([m(".n-popout",!0)],S.prototype,"popout",void 0),t([u()],S.prototype,"computedPosition",void 0),t([u()],S.prototype,"smallViewport",void 0),t([c({reflect:!0})],S.prototype,"id",void 0),t([c({reflect:!0})],S.prototype,"anchor",void 0),t([c({reflect:!0,type:Boolean,attribute:"always-floating"})],S.prototype,"alwaysFloating",void 0),t([w("id")],S.prototype,"handleIdChange",null),t([w("open")],S.prototype,"handleOpenChange",null),t([w("anchor")],S.prototype,"handleAnchorChange",null),S=t([v("nord-popout")],S);var L=S;export{k as F,L as P};
2	+ //# sourceMappingURL=Popout-vR6LxNS9.js.map

package/lib/Popout-vR6LxNS9.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Popout-vR6LxNS9.js","sources":["../src/common/mixins/FloatingComponentMixin.ts","../src/popout/Popout.ts"],"sourcesContent":["import type { Alignment } from '@floating-ui/dom'\nimport type { LitElement } from 'lit'\nimport type { LogicalSide } from '../positioning.js'\nimport { property } from 'lit/decorators.js'\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FloatingMixinInterface {\n open: boolean\n align: Alignment\n position: LogicalSide | 'auto'\n}\n\nexport function FloatingMixin<T extends Constructor<LitElement>>(\n superClass: T,\n): Constructor<FloatingMixinInterface> & T {\n class FloatingElement extends superClass {\n /**\n * Controls whether the component is open or not.\n */\n @property({ type: Boolean, reflect: true }) open = false\n\n /**\n * Set the alignment in relation to the toggle (or anchor) depending on the position.\n * `start` will align it to the left of the toggle (or anchor).\n * `end` will align it to the right of the toggle (or anchor).\n * Setting the `position` to `inline-start` or `inline-end` will switch\n * `start` and `end` to the top and bottom respectively.\n */\n @property({ reflect: true }) align: 'start' | 'end' = 'start'\n\n /**\n * Set the position in relation to the toggle (or anchor).\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 * You can also set it to `auto` for automatic positioning depending on\n * which side has the most space available.\n */\n @property({ reflect: true }) position: 'block-end' | 'block-start' | 'inline-start' | 'inline-end' | 'auto'\n = 'block-end'\n }\n\n return FloatingElement\n}\n","import type {\n ComputePositionConfig,\n Placement,\n} from '@floating-ui/dom'\nimport {\n autoPlacement,\n autoUpdate,\n computePosition,\n flip,\n hide,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { ScrollbarController } from '../common/controllers/ScrollbarController.js'\n\nimport { observe } from '../common/decorators/observe.js'\nimport { NordEvent, transition } from '../common/events.js'\nimport { FloatingMixin } from '../common/mixins/FloatingComponentMixin.js'\nimport { logicalToPhysical } from '../common/positioning.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Popout.css'\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery\n = typeof matchMedia === 'undefined'\n ? ({\n matches: false,\n addEventListener() {\n /* noop */\n },\n } as unknown as MediaQueryList)\n : 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 FloatingMixin(LitElement) {\n static styles = [componentStyle, style]\n\n private targetElement?: HTMLElement\n private anchorElement?: HTMLElement\n private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n @query('.n-popout', true) private popout!: HTMLDivElement\n\n private scrollBar = new ScrollbarController(this)\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.popout && node !== this.targetElement,\n })\n\n private events = new EventController(this)\n private direction = new DirectionController(this)\n\n @state() private computedPosition?: Placement\n\n @state() private smallViewport = mediaQuery.matches\n\n /**\n * The id for the active element to reference via aria-controls.\n */\n\n @property({ reflect: true }) id: string = ''\n\n /**\n * Set an optional anchor element to align against, replacing the triggering element.\n */\n @property({ reflect: true }) anchor?: string\n\n /**\n * Set to true to always display the popout as a floating overlay, even on smaller viewports.\n */\n @property({ reflect: true, type: Boolean, attribute: 'always-floating' }) alwaysFloating: boolean = false\n\n /**\n * Show the popout.\n * A promise that resolves to a `TransitionEvent` when the popout's show animation ends or is cancelled.\n * If the popout is already open, the promise resolves immediately with `undefined`.\n */\n async show(): Promise<TransitionEvent | void> {\n if (this.open) {\n return Promise.resolve()\n }\n\n this.enterTopLayer()\n this.open = true\n\n // we should only focus once the popout is visible after render is complete\n await this.updateComplete\n\n /**\n * Dispatched when the popout is opened.\n */\n this.dispatchEvent(new NordEvent('open'))\n\n return transition(this.popout)\n }\n\n /**\n * Hide the popout.\n * Returns a promise that resolves to a `TransitionEvent` when the popout's hide animation ends or is cancelled.\n * If the popout is already closed, the promise resolves immediately with `undefined`.\n * @param {boolean} moveFocusToButton prevent focus returning to the target button. Default is true.\n */\n async hide(moveFocusToButton: boolean = true): Promise<TransitionEvent | void> {\n if (!this.open) {\n return Promise.resolve()\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 const result = await transition(this.popout)\n this.leaveTopLayer()\n return result\n }\n\n /**\n * Position the popout on load.\n */\n firstUpdated() {\n if (!this.smallViewport || this.alwaysFloating) {\n this.updatePosition()\n }\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n\n this.initializeElements()\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 @transitionend=${this.enableScroll}\n >\n <slot></slot>\n </div>\n `\n }\n\n @observe('id')\n protected handleIdChange() {\n // clean up any old listeners\n this.targetElement?.removeEventListener('click', this.toggleOpen)\n\n if (!this.id) {\n console.warn('NORD: popout requires an id attribute and value')\n }\n else {\n this.initializeElements()\n }\n }\n\n private initializeElements() {\n this.targetElement = this.getToggle()\n this.anchorElement = this.getAnchor()\n\n this.events.listen(this.targetElement, 'click', this.toggleOpen)\n }\n\n @observe('open')\n protected handleOpenChange() {\n this.targetElement?.setAttribute('aria-expanded', `${this.open}`)\n\n if (this.open) {\n this.enterTopLayer()\n\n if (this.smallViewport && !this.alwaysFloating) {\n // hide scrollbar and prevent scroll on body\n this.scrollBar.lockScroll()\n }\n else if (this.anchorElement) {\n this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n }\n }\n else {\n this.cleanupAutoUpdate?.()\n }\n }\n\n @observe('anchor')\n protected handleAnchorChange() {\n this.cleanupAutoUpdate?.()\n this.anchorElement = this.getAnchor()\n\n // if the popout is already open when the anchor changes, we should update its position\n if (this.open && (!this.smallViewport || this.alwaysFloating) && this.anchorElement) {\n this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n }\n }\n\n private enableScroll = () => {\n // scrollbar should only be restored when the backdrop has transitioned\n // that way we avoid awkward double scrollbars.\n if (!this.open) {\n this.scrollBar.unlockScroll()\n this.leaveTopLayer()\n }\n }\n\n /**\n * Place the element in the top layer via the Popover API so that\n * position: fixed works relative to the viewport regardless of\n * container queries or other containing block ancestors.\n */\n private enterTopLayer() {\n if (typeof this.showPopover !== 'function')\n return\n\n try {\n this.setAttribute('popover', 'manual')\n this.showPopover()\n }\n catch {\n this.removeAttribute('popover')\n }\n }\n\n private leaveTopLayer() {\n this.removeAttribute('popover')\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 if (!this.anchorElement) {\n return\n }\n\n const computePositionConfig: ComputePositionConfig = {\n strategy: 'fixed',\n }\n\n if (this.position === 'auto') {\n computePositionConfig.middleware = [\n offset(8),\n autoPlacement({ alignment: this.align, padding: 8 }),\n shift({\n padding: 8,\n }),\n hide(),\n ]\n }\n else {\n computePositionConfig.placement = logicalToPhysical(this.position, this.align, this.direction.dir)\n computePositionConfig.middleware = [\n offset(8),\n flip(),\n shift({\n padding: 8,\n }),\n hide(),\n ]\n }\n\n const { x, y, placement, middlewareData } = await computePosition(this.anchorElement, this, computePositionConfig)\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 }\n else if (!this.smallViewport || this.alwaysFloating) {\n this.enterTopLayer()\n this.updatePosition().then(() => this.show())\n }\n else {\n this.show()\n }\n }\n\n private getToggle() {\n const rootNode = this.getRootNode() as Document | ShadowRoot\n const allToggles = rootNode.querySelectorAll<HTMLElement>(`[aria-controls='${this.id}']`)\n\n let toggle = allToggles[0]\n\n // When multiple toggles share the same aria-controls (duplicate IDs on page),\n // pair each toggle with its corresponding popout by document order.\n if (allToggles.length > 1) {\n const index = [...rootNode.querySelectorAll<HTMLElement>(`[id='${this.id}']`)].indexOf(this)\n if (index >= 0 && index < allToggles.length) {\n toggle = allToggles[index]\n }\n }\n\n if (toggle instanceof HTMLSlotElement) {\n return toggle.assignedElements()[0] as HTMLElement\n }\n\n return toggle\n }\n\n private getAnchor() {\n if (!this.anchor) {\n return this.targetElement\n }\n\n const rootNode = this.getRootNode() as Document | ShadowRoot\n const anchor = <HTMLElement>rootNode.querySelector(`#${this.anchor}`)\n\n if (anchor instanceof HTMLSlotElement) {\n return anchor.assignedElements()[0] as HTMLElement\n }\n\n return anchor\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\n this.cleanupAutoUpdate?.()\n\n if ((!this.smallViewport || this.alwaysFloating) && this.open && this.anchorElement) {\n this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n this.scrollBar.unlockScroll()\n }\n else if (this.open) {\n this.scrollBar.lockScroll()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-popout': Popout\n }\n}\n"],"names":["FloatingMixin","superClass","FloatingElement","constructor","this","open","align","position","__decorate","property","type","Boolean","reflect","prototype","mediaQuery","matchMedia","matches","addEventListener","Popout","LitElement","scrollBar","ScrollbarController","dismiss","LightDismissController","isOpen","onDismiss","e","hide","isDismissible","node","popout","targetElement","events","EventController","direction","DirectionController","smallViewport","id","alwaysFloating","enableScroll","unlockScroll","leaveTopLayer","updatePosition","async","anchorElement","computePositionConfig","strategy","middleware","offset","autoPlacement","alignment","padding","shift","placement","logicalToPhysical","dir","flip","x","y","middlewareData","computePosition","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","enterTopLayer","then","show","handleMediaQueryChange","cleanupAutoUpdate","call","autoUpdate","lockScroll","Promise","resolve","updateComplete","dispatchEvent","NordEvent","transition","moveFocusToButton","_b","focus","preventScroll","result","firstUpdated","connectedCallback","super","listen","initializeElements","disconnectedCallback","removeAttribute","render","html","handleIdChange","removeEventListener","console","warn","getToggle","getAnchor","handleOpenChange","setAttribute","handleAnchorChange","showPopover","rootNode","getRootNode","allToggles","querySelectorAll","toggle","length","index","indexOf","HTMLSlotElement","assignedElements","anchor","querySelector","styles","componentStyle","query","state","attribute","observe","customElement"],"mappings":"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"}

package/lib/Popout.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./tslib.es6-CmLYFWVC.js";import"./positioning-D-K8Mueq.js";import"lit";import"lit/decorators.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./LightDismissController-4pH8cdko.js";import"./ScrollbarController-BFC67Y2x.js";import"./observe-D0n0zOfU.js";import"./events-Bv6wNHwJ.js";export{P as default}from"./Popout-pKfh0-Zv.js";import"./Component-DSU3Qp0O.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";
+import"./tslib.es6-CmLYFWVC.js";import"./positioning-D-K8Mueq.js";import"lit";import"lit/decorators.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./LightDismissController-4pH8cdko.js";import"./ScrollbarController-BFC67Y2x.js";import"./observe-D0n0zOfU.js";import"./events-Bv6wNHwJ.js";export{P as default}from"./Popout-vR6LxNS9.js";import"./Component-DSU3Qp0O.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";
 //# sourceMappingURL=Popout.js.map