@nordhealth/components 3.16.0-alpha.0 → 3.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +2318 -2316
- package/lib/Checkbox.js +1 -1
- package/lib/CommandMenu.js +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/DatePicker.js.map +1 -1
- package/lib/Dropdown.js +1 -1
- package/lib/Fieldset.js +1 -1
- package/lib/Fieldset.js.map +1 -1
- package/lib/{FormField-87551be2.js → FormField-b0da767b.js} +2 -2
- package/lib/FormField-b0da767b.js.map +1 -0
- package/lib/Input.js +1 -1
- package/lib/Layout.js +1 -1
- package/lib/LightDismissController-0a66b0a0.js +2 -0
- package/lib/LightDismissController-0a66b0a0.js.map +1 -0
- package/lib/Modal.js +1 -1
- package/lib/ModalController.js +1 -1
- package/lib/Popout-9ea00c67.js +2 -0
- package/lib/Popout-9ea00c67.js.map +1 -0
- package/lib/Popout.js +1 -1
- package/lib/Radio.js +1 -1
- package/lib/Range.js +1 -1
- package/lib/Select.js +1 -1
- package/lib/Textarea.js +1 -1
- package/lib/Textarea.js.map +1 -1
- package/lib/Toggle.js +1 -1
- package/lib/bundle.js +9 -9
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/common/controllers/LightDismissController.d.ts +1 -1
- package/lib/src/date-picker/DatePicker.d.ts +0 -4
- package/lib/src/fieldset/Fieldset.d.ts +4 -0
- package/lib/src/fieldset/Fieldset.test.d.ts +1 -0
- package/package.json +2 -2
- package/lib/FormField-87551be2.js.map +0 -1
- package/lib/LightDismissController-11ae4745.js +0 -2
- package/lib/LightDismissController-11ae4745.js.map +0 -1
- package/lib/Popout-b6f0175c.js +0 -2
- package/lib/Popout-b6f0175c.js.map +0 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{_ as t,i as e,x as o,e as i,s}from"./query-assigned-elements-92ce7494.js";import{n}from"./property-c78323b1.js";import{t as r}from"./state-d31c6912.js";import{i as a}from"./query-36bfe0e4.js";import{c as l,l as p,o as h,f as d,s as c,h as m,a as u}from"./positioning-35c8d434.js";import{L as v}from"./LightDismissController-0a66b0a0.js";import{S as f}from"./ScrollbarController-773c79f4.js";import{N as g,t as y}from"./events-d9666e88.js";import{s as b}from"./Component-2253424f.js";import{D as w}from"./DirectionController-f35f5476.js";import{o as E}from"./observe-a9c6dfb6.js";import{E as x}from"./EventController-d99ebeef.js";function C(e){class o extends e{constructor(){super(...arguments),this.open=!1,this.align="start",this.position="block-end"}}return t([n({type:Boolean,reflect:!0})],o.prototype,"open",void 0),t([n({reflect:!0})],o.prototype,"align",void 0),t([n({reflect:!0})],o.prototype,"position",void 0),o}const k=e`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--_n-popout-position-x);top:var(--_n-popout-position-y);color:var(--n-color-text);opacity:0;transition:opacity var(--n-transition-slowly)}.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{position:fixed;inset:0;overflow-y:auto;opacity:1;background:0 0;transition:background var(--n-transition-mobile)}:host([open]){pointer-events:auto;background:var(--n-color-overlay)}:host .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}`,A=matchMedia("(max-width: 35.9375em)");let P=class extends(C(s)){constructor(){super(...arguments),this.scrollBar=new f(this),this.dismiss=new v(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this.popout&&t!==this.targetElement}),this.events=new x(this),this.direction=new w(this),this.smallViewport=A.matches,this.id="",this.enableScroll=()=>{this.open||this.scrollBar.unlockScroll()},this.updatePosition=async()=>{var t;if(!this.anchorElement)return;const{x:e,y:o,placement:i,middlewareData:s}=await l(this.anchorElement,this,{strategy:"fixed",placement:p(this.position,this.align,this.direction.dir),middleware:[h(8),d(),c({padding:8}),m()]});this.computedPosition=i,this.style.setProperty("--_n-popout-position-x",`${e}px`),this.style.setProperty("--_n-popout-position-y",`${o}px`),(null===(t=s.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.smallViewport?this.show():this.updatePosition().then((()=>this.show()))},this.handleMediaQueryChange=()=>{var t;this.smallViewport=A.matches,null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),!this.smallViewport&&this.open&&this.anchorElement?(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition),this.scrollBar.unlockScroll()):this.open&&this.scrollBar.lockScroll()}}async show(){return this.open?Promise.resolve():(this.open=!0,await this.updateComplete,this.dispatchEvent(new g("open")),y(this.popout))}async hide(t=!0){var e,o;return this.open?(this.open=!1,null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.dispatchEvent(new g("close")),t&&(null===(o=this.targetElement)||void 0===o||o.focus({preventScroll:!0})),y(this.popout)):Promise.resolve()}firstUpdated(){this.smallViewport||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.events.listen(A,"change",this.handleMediaQueryChange)}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 o`<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.targetElement=this.getToggle(),this.anchorElement=this.getAnchor(),this.events.listen(this.targetElement,"click",this.toggleOpen)):console.warn("NORD: popout requires an id attribute and value")}handleOpenChange(){var t,e;null===(t=this.targetElement)||void 0===t||t.setAttribute("aria-expanded",`${this.open}`),this.open?this.smallViewport?this.scrollBar.lockScroll():this.anchorElement&&(this.cleanupAutoUpdate=u(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.anchorElement&&(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition))}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}getAnchor(){if(!this.anchor)return this.targetElement;const t=this.getRootNode().querySelector(`#${this.anchor}`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};P.styles=[b,k],t([a(".n-popout",!0)],P.prototype,"popout",void 0),t([r()],P.prototype,"computedPosition",void 0),t([r()],P.prototype,"smallViewport",void 0),t([n({reflect:!0})],P.prototype,"id",void 0),t([n({reflect:!0})],P.prototype,"anchor",void 0),t([E("id")],P.prototype,"handleIdChange",null),t([E("open")],P.prototype,"handleOpenChange",null),t([E("anchor")],P.prototype,"handleAnchorChange",null),P=t([i("nord-popout")],P);var S=P;export{C as F,S as P};
|
|
2
|
+
//# sourceMappingURL=Popout-9ea00c67.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popout-9ea00c67.js","sources":["../src/common/mixins/FloatingComponentMixin.ts","../src/popout/Popout.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { Alignment } from \"@floating-ui/dom\"\nimport { LogicalSide } from \"../positioning.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\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 */\n @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-end\"\n }\n\n return FloatingElement\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { computePosition, shift, offset, flip, hide, autoUpdate, Placement } from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\nimport { NordEvent, transition } from \"../common/events.js\"\nimport { FloatingMixin } from \"../common/mixins/FloatingComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery = matchMedia(\"(max-width: 35.9375em)\")\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status ready\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends 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 // eslint-disable-next-line lit/no-native-attributes\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 * 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.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 return transition(this.popout)\n }\n\n /**\n * Position the popout on load.\n */\n firstUpdated() {\n if (!this.smallViewport) {\n this.updatePosition()\n }\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this.cleanupAutoUpdate?.()\n this.targetElement?.removeAttribute(\"aria-expanded\")\n }\n\n render() {\n return html`\n <div\n class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n @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 // eslint-disable-next-line no-console\n console.warn(\"NORD: popout requires an id attribute and value\")\n } else {\n this.targetElement = this.getToggle()\n this.anchorElement = this.getAnchor()\n\n this.events.listen(this.targetElement, \"click\", this.toggleOpen)\n }\n }\n\n @observe(\"open\")\n protected handleOpenChange() {\n this.targetElement?.setAttribute(\"aria-expanded\", `${this.open}`)\n\n if (this.open) {\n if (this.smallViewport) {\n // hide scrollbar and prevent scroll on body\n this.scrollBar.lockScroll()\n } else if (this.anchorElement) {\n this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\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.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 }\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 { x, y, placement, middlewareData } = await computePosition(this.anchorElement, this, {\n strategy: \"fixed\",\n placement: logicalToPhysical(this.position, this.align, this.direction.dir),\n middleware: [\n offset(8),\n flip(),\n shift({\n padding: 8,\n }),\n hide(),\n ],\n })\n\n this.computedPosition = placement\n\n // use physical properties here since floating-ui\n // works exclusively in physical dimensions\n // we do all the mapping in logicalToPhysical\n this.style.setProperty(\"--_n-popout-position-x\", `${x}px`)\n this.style.setProperty(\"--_n-popout-position-y\", `${y}px`)\n\n if (middlewareData.hide?.referenceHidden) {\n this.hide()\n }\n }\n\n /**\n * Toggle the popout open or closed using state.\n * Updating the position to underneath the target button before the popout is opened.\n */\n private toggleOpen = (e: Event) => {\n e.preventDefault()\n if (this.open) {\n this.hide(false)\n } else if (!this.smallViewport) {\n this.updatePosition().then(() => this.show())\n } else {\n this.show()\n }\n }\n\n private getToggle() {\n const rootNode = this.getRootNode() as Document | ShadowRoot\n const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n if (toggle instanceof HTMLSlotElement) {\n return toggle.assignedElements()[0] as HTMLElement\n }\n\n return toggle\n }\n\n 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.open && this.anchorElement) {\n this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n this.scrollBar.unlockScroll()\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","Popout","LitElement","scrollBar","ScrollbarController","dismiss","LightDismissController","isOpen","onDismiss","e","hide","isDismissible","node","popout","targetElement","events","EventController","direction","DirectionController","smallViewport","matches","id","enableScroll","unlockScroll","updatePosition","async","anchorElement","x","y","placement","middlewareData","computePosition","strategy","logicalToPhysical","dir","middleware","offset","flip","shift","padding","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","show","then","handleMediaQueryChange","cleanupAutoUpdate","call","autoUpdate","lockScroll","Promise","resolve","updateComplete","dispatchEvent","NordEvent","transition","moveFocusToButton","_b","focus","preventScroll","firstUpdated","connectedCallback","super","listen","disconnectedCallback","removeAttribute","render","html","handleIdChange","removeEventListener","getToggle","getAnchor","console","warn","handleOpenChange","setAttribute","handleAnchorChange","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","anchor","styles","componentStyle","query","state","observe","customElement"],"mappings":"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"}
|
package/lib/Popout.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"./query-assigned-elements-92ce7494.js";import"./property-c78323b1.js";import"./state-d31c6912.js";import"./query-36bfe0e4.js";import"./positioning-35c8d434.js";import"./LightDismissController-
|
|
1
|
+
import"./query-assigned-elements-92ce7494.js";import"./property-c78323b1.js";import"./state-d31c6912.js";import"./query-36bfe0e4.js";import"./positioning-35c8d434.js";import"./LightDismissController-0a66b0a0.js";import"./ScrollbarController-773c79f4.js";import"./events-d9666e88.js";export{P as default}from"./Popout-9ea00c67.js";import"./Component-2253424f.js";import"./DirectionController-f35f5476.js";import"./observe-a9c6dfb6.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";
|
|
2
2
|
//# sourceMappingURL=Popout.js.map
|
package/lib/Radio.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,x as t,A as i,_ as n,e as o,s as r}from"./query-assigned-elements-92ce7494.js";import{n as a}from"./property-c78323b1.js";import{n as s}from"./ref-99418ab4.js";import{L as l}from"./LightDomController-5388d84c.js";import{L as d}from"./LightSlotController-c51e9cf5.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as h}from"./cond-bb9ee891.js";import{F as p}from"./FocusableMixin-d30213b4.js";import{F as
|
|
1
|
+
import{i as e,x as t,A as i,_ as n,e as o,s as r}from"./query-assigned-elements-92ce7494.js";import{n as a}from"./property-c78323b1.js";import{n as s}from"./ref-99418ab4.js";import{L as l}from"./LightDomController-5388d84c.js";import{L as d}from"./LightSlotController-c51e9cf5.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as h}from"./cond-bb9ee891.js";import{F as p}from"./FocusableMixin-d30213b4.js";import{F as b}from"./FormAssociatedMixin-3fa55d53.js";import{I as m}from"./InputMixin-83b5bd46.js";import{S as v}from"./SizeMixin-ab074eff.js";import{s as u}from"./Component-2253424f.js";import{s as f}from"./FormField-b0da767b.js";import"./directive-e9ce14b4.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./FormDataController-592ff3dd.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";const g=e`:host{--_n-radio-size:calc(var(--n-space-m) * 1.25);--_n-radio-dot-size:var(--n-space-s);--_n-radio-dot-inset:calc((var(--_n-radio-size) - var(--_n-radio-dot-size)) / 2);display:inline-block;line-height:var(--n-line-height)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--_n-radio-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;padding:0!important;border:1px solid var(--_n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;transition:none!important;display:block!important;inline-size:var(--_n-radio-size)!important;block-size:var(--_n-radio-size)!important;cursor:pointer}::slotted(input:checked){--_n-radio-border-color:var(--n-color-accent);background:var(--_n-radio-accent-color)!important}::slotted(input[aria-invalid]){--_n-radio-accent-color:var(--n-color-status-danger);--_n-radio-border-color:var(--_n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)!important}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}:host([disabled]) ::slotted(input){background:var(--_n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(input:not(:checked)){--_n-radio-accent-color:var(--n-color-active);--_n-radio-border-color:var(--n-color-border-neutral)}:host([disabled]) ::slotted(input:checked){opacity:.3}.n-dot{position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--_n-radio-dot-size);block-size:var(--_n-radio-dot-size);background-color:var(--n-color-text-on-accent);inset-inline-start:var(--_n-radio-dot-inset);inset-block-start:var(--_n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{margin-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([size="s"]){--_n-radio-size:var(--n-size-icon-m);--_n-radio-dot-size:calc(var(--n-size-icon-s) / 2)}:host([size="s"]:not([hide-label])) .n-input-container{margin:calc(var(--n-space-s)/ 3) 0}:host([size="l"]){--_n-radio-size:var(--n-size-icon-l);--_n-radio-dot-size:var(--n-size-icon-xs)}:host([size="l"]:not([hide-label])) .n-label-container{margin:2px 0 0}`;let k=0;const z=e=>`nord-radio-${e}-${k++}`;let $=class extends(v(b(m(p(r))))){constructor(){super(...arguments),this.inputId=z("input"),this.hintId=z("hint"),this.errorId=z("error"),this.hintSlot=new d(this,{slotName:"hint",render:()=>this.hint?t`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:i,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new d(this,{slotName:"label",render:()=>this.label?t`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:i,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new d(this,{slotName:"error",render:()=>this.error?t`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:i,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new l(this,{render:()=>t`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${s(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${h(this.name)}" .value="${h(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${h(this.getDescribedBy())}" aria-invalid="${h(this.getInvalid())}" form="${h(this._formId)}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}render(){return t`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?t`<div class="n-dot"></div>`:i}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,n=()=>t`<slot name="label"></slot><slot name="label-internal"></slot>`,o=e=>t`<nord-visually-hidden>${e}</nord-visually-hidden>`,e?o(n()):n()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var e,n,o}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};$.styles=[u,f,g],n([a({type:Boolean,reflect:!0})],$.prototype,"checked",void 0),n([c("checked")],$.prototype,"handleCheckedChange",null),$=n([o("nord-radio")],$);var _=$;export{_ as default};
|
|
2
2
|
//# sourceMappingURL=Radio.js.map
|
package/lib/Range.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as r,x as e,_ as n,e as a,s as o}from"./query-assigned-elements-92ce7494.js";import{n as t}from"./ref-99418ab4.js";import{o as i}from"./class-map-512f0bc1.js";import{n as s}from"./property-c78323b1.js";import{l as c}from"./if-defined-cccde88f.js";import{N as l}from"./events-d9666e88.js";import{F as d}from"./FocusableMixin-d30213b4.js";import{F as b}from"./FormAssociatedMixin-3fa55d53.js";import{I as m}from"./InputMixin-83b5bd46.js";import{R as g,s as u}from"./TextField-2d778949.js";import{A as h}from"./AutocompleteMixin-5a7e10b2.js";import{D as p}from"./DirectionController-f35f5476.js";import{s as v}from"./Component-2253424f.js";import{s as f}from"./FormField-
|
|
1
|
+
import{i as r,x as e,_ as n,e as a,s as o}from"./query-assigned-elements-92ce7494.js";import{n as t}from"./ref-99418ab4.js";import{o as i}from"./class-map-512f0bc1.js";import{n as s}from"./property-c78323b1.js";import{l as c}from"./if-defined-cccde88f.js";import{N as l}from"./events-d9666e88.js";import{F as d}from"./FocusableMixin-d30213b4.js";import{F as b}from"./FormAssociatedMixin-3fa55d53.js";import{I as m}from"./InputMixin-83b5bd46.js";import{R as g,s as u}from"./TextField-2d778949.js";import{A as h}from"./AutocompleteMixin-5a7e10b2.js";import{D as p}from"./DirectionController-f35f5476.js";import{s as v}from"./Component-2253424f.js";import{s as f}from"./FormField-b0da767b.js";import"./directive-e9ce14b4.js";import"./FormDataController-592ff3dd.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./VisuallyHidden.js";const _=r`:host{--_n-range-progress:0%;--_n-range-thumb-focus-ring:0 0 0 1px var(--n-color-accent);--_n-range-thumb-color:var(--n-color-text-on-accent);--_n-range-thumb-border-size:1px;--_n-range-thumb-border-color:var(--n-color-border-strong);--_n-range-gradient-direction:right;--_n-range-thumb-size:var(--n-range-thumb-size, 20px);--_n-range-track-color-active:var(--n-range-track-color-active, var(--n-color-accent));--_n-range-track-color-inactive:var(--n-range-track-color-inactive, var(--n-color-border-strong));--_n-range-track-size:var(--n-range-track-size, 3px)}.n-range{-webkit-appearance:none;appearance:none;inline-size:100%;background:linear-gradient(to var(--_n-range-gradient-direction),var(--_n-range-track-color-active) 0,var(--_n-range-track-color-active) var(--_n-range-progress),var(--_n-range-track-color-inactive) var(--_n-range-progress));border-radius:var(--n-border-radius-s)}.n-range.is-rtl{--_n-range-gradient-direction:left}.n-range::-webkit-slider-runnable-track{inline-size:100%;block-size:var(--_n-range-track-size)}.n-range::-webkit-slider-thumb{block-size:var(--_n-range-thumb-size);inline-size:var(--_n-range-thumb-size);box-shadow:var(--n-box-shadow),var(--n-box-shadow);border-radius:var(--n-border-radius-circle);background:var(--_n-range-thumb-color);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);cursor:pointer;-webkit-appearance:none;margin-block-start:calc(calc(var(--_n-range-thumb-size) - var(--_n-range-track-size))/ 2 * -1)}.n-range::-moz-range-track{border:var(--n-space-s) solid var(--n-color-surface);inline-size:100%;block-size:var(--_n-range-track-size)}.n-range::-moz-range-thumb{block-size:var(--_n-range-thumb-size);inline-size:var(--_n-range-thumb-size);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-circle);background:var(--_n-range-thumb-color);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);cursor:pointer;appearance:none;margin-block-start:calc(calc(var(--_n-range-thumb-size) - var(--_n-range-track-size))/ 2 * -1)}.n-label-container{margin-block-end:0;inline-size:100%}label{display:flex!important}.n-range-output{font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);font-size:var(--n-font-size-m);margin-inline-start:auto}.n-range:focus{outline:0}.n-label-container:hover+.n-input-container .n-input:disabled,.n-range:disabled{opacity:.5}.n-range:disabled::-webkit-slider-thumb,.n-range[readonly]::-webkit-slider-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:disabled::-moz-range-thumb,.n-range[readonly]::-moz-range-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:focus::-webkit-slider-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}.n-range:focus::-moz-range-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}`;let z=class extends(b(h(g(m(d(o)))))){constructor(){super(...arguments),this.direction=new p(this),this.min=0,this.max=10,this.step=1,this.expand=!1}render(){const r=Number(this.value)||0,n=Math.max(0,(r-this.min)/(this.max-this.min));return e`<div class="n-input-container">${this.renderLabel(e`<span class="n-range-output" aria-hidden="true">${r}</span>`)} <input ${t(this.focusableRef)} id="${this.inputId}" type="range" class="${i({"n-range":!0,"is-rtl":this.direction.isRTL})}" name="${c(this.name)}" min="${this.min}" step="${this.step}" max="${this.max}" style="${`--_n-range-progress: ${100*n}%`}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" .value="${this.value?this.value:"0"}" @input="${this.handleInput}" @change="${this.handleChange}" aria-describedby="${c(this.getDescribedBy())}" aria-invalid="${c(this.getInvalid())}"></div>${this.renderError()}`}handleInput(r){r.stopPropagation();const e=r.target;if(this.readonly)return r.preventDefault(),void(e.value=this.value);this.value=e.value,this.dispatchEvent(new l("input"))}};z.styles=[v,f,u,_],n([s({reflect:!0,type:Number})],z.prototype,"min",void 0),n([s({reflect:!0,type:Number})],z.prototype,"max",void 0),n([s({reflect:!0,type:Number})],z.prototype,"step",void 0),n([s({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),z=n([a("nord-range")],z);var k=z;export{k as default};
|
|
2
2
|
//# sourceMappingURL=Range.js.map
|
package/lib/Select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,x as o,_ as e,e as r,s as n}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{l as s}from"./if-defined-cccde88f.js";import{n as a}from"./ref-99418ab4.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-83b5bd46.js";import{F as c}from"./FocusableMixin-d30213b4.js";import{F as p}from"./FormAssociatedMixin-3fa55d53.js";import{A as
|
|
1
|
+
import{i as t,x as o,_ as e,e as r,s as n}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{l as s}from"./if-defined-cccde88f.js";import{n as a}from"./ref-99418ab4.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-83b5bd46.js";import{F as c}from"./FocusableMixin-d30213b4.js";import{F as p}from"./FormAssociatedMixin-3fa55d53.js";import{A as b}from"./AutocompleteMixin-5a7e10b2.js";import{S as u}from"./SizeMixin-ab074eff.js";import{s as m}from"./Component-2253424f.js";import{s as h}from"./FormField-b0da767b.js";import{S as v}from"./SlotController-d733c575.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./Spinner.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./FormDataController-592ff3dd.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const x=t`:host{--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(f);let g=class extends(u(p(b(d(c(n)))))){constructor(){super(...arguments),this.defaultSlot=new v(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const t=this.options,e=this.getButtonText(t);return o`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&o`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button size="${this.size}" tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="icon"></slot>${e}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(t){const o=t.find((t=>t.value===this.value.toString()));return o?o.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return o`<option value="${s(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};g.styles=[m,h,x],e([i({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),g=e([r("nord-select")],g);var j=g;export{j as default};
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|
package/lib/Textarea.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,x as r,A as t,_ as
|
|
1
|
+
import{i as e,x as r,A as t,_ as n,e as o,s as a}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{l}from"./if-defined-cccde88f.js";import{n as s}from"./ref-99418ab4.js";import{o as c}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-d30213b4.js";import{F as p}from"./FormAssociatedMixin-3fa55d53.js";import{I as u}from"./InputMixin-83b5bd46.js";import{R as h,s as v}from"./TextField-2d778949.js";import{A as m}from"./AutocompleteMixin-5a7e10b2.js";import{S as b}from"./SizeMixin-ab074eff.js";import{T as x}from"./TextSelectableMixin-aac97d82.js";import{s as f}from"./Component-2253424f.js";import{s as g}from"./FormField-b0da767b.js";import{LocalizeController as z}from"./LocalizeController.js";import{N as j}from"./events-d9666e88.js";import"./directive-e9ce14b4.js";import"./FormDataController-592ff3dd.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./VisuallyHidden.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";const y=e`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size, 240px);--_n-textarea-block-size:var(--n-textarea-block-size, 76px);--_n-input-background:var(--n-textarea-background, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius, var(--n-border-radius-s))}.n-input-container{position:relative;inline-size:var(--_n-textarea-inline-size)}.n-input{min-block-size:var(--_n-textarea-block-size);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{margin-block-start:var(--n-space-xs);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker)}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent));--_n-input-background:var(--n-textarea-background, var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent))}`;let $=class extends(b(p(m(h(x(u(d(a)))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new z(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var e;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${s(this.textSelectableRef)} ${s(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${l(this.name)}" maxlength="${l(this.maxLength)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${l(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" @select="${this.handleSelect}" aria-describedby="${l(this.getDescribedBy())}" aria-invalid="${l(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():t}</div>${this.renderError()}`}handleSelect(e){e.stopPropagation(),this.dispatchEvent(new j("select"))}renderCharacterCounter(){const{value:e,maxLength:t}=this,n="string"==typeof e?this.lengthMeasurer(e):0,o=t?t-n:null,a=t?`${n}/${t}`:n;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=o&&o<=10?this.localize.term("remainingCharacters",o):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const e=this.localize.resolvedLang;this.lengthMeasurer=function(e){if(Intl.Segmenter){const r=new Intl.Segmenter(e);return e=>[...r.segment(e)].length}return e=>e.length}(e)}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height="")}};$.styles=[f,g,v,y],n([i({reflect:!0})],$.prototype,"resize",void 0),n([i({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),n([i({reflect:!0,attribute:"maxlength",type:Number})],$.prototype,"maxLength",void 0),n([i({reflect:!0,type:Boolean,attribute:"character-counter"})],$.prototype,"characterCounter",void 0),n([c("resize","updated"),c("value","updated")],$.prototype,"resizeToFitContent",null),$=n([o("nord-textarea")],$);var C=$;export{C as default};
|
|
2
2
|
//# sourceMappingURL=Textarea.js.map
|
package/lib/Textarea.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { observe } from \"../common/decorators/observe.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 { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\nimport { TextSelectableMixin } from \"../common/mixins/TextSelectableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nfunction createLengthMeasurer(locale: string) {\n if (Intl.Segmenter) {\n const segmenter = new Intl.Segmenter(locale)\n return (value: string) => [...segmenter.segment(value)].length\n }\n\n return (value: string) => value.length\n}\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\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 textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n *\n * @cssprop [--n-textarea-inline-size=240px] - Controls the inline size, or width, of the textarea.\n * @cssprop [--n-textarea-block-size=76px] - Controls the block size, or height, of the textarea.\n * @cssprop [--n-textarea-background=var(--n-color-active)] - Controls the background of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-color=var(--n-color-text)] - Controls the text color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-color=var(--n-color-border-strong)] - Controls the border color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n *\n * @localization remainingCharacters - A function which receives the number of remaining characters and returns a string to be used as the aria-live message.\n */\n@customElement(\"nord-textarea\")\nexport default class Textarea extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(InputMixin(FocusableMixin(LitElement))))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n protected inputId = \"textarea\"\n\n private lengthMeasurer!: (value: string) => number\n private localize = new LocalizeController<\"nord-textarea\">(this, {\n onLangChange: () => this.handleLangChange(),\n })\n\n /**\n * Controls whether the textarea is resizable.\n * By default is manually resizable vertically.\n * Set to \"auto\" to enable auto-resizing as content grows.\n */\n @property({ reflect: true }) resize: \"vertical\" | \"auto\" = \"vertical\"\n\n /**\n * Controls whether the textarea expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * Controls the max allowed length for the textarea.\n */\n @property({ reflect: true, attribute: \"maxlength\", type: Number }) maxLength?: number\n\n /**\n * Controls whether to show a count of the number of characters in the textarea.\n * When combined with `maxlength`, both the count and the max length are shown.\n */\n @property({ reflect: true, type: Boolean, attribute: \"character-counter\" }) characterCounter = false\n\n render() {\n return html`\n ${this.renderLabel()}\n\n <div class=\"n-input-container\">\n <textarea\n ${ref(this.textSelectableRef)}\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n maxlength=${ifDefined(this.maxLength)}\n .value=${this.value ?? \"\"}\n placeholder=${ifDefined(this.placeholder)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @select=${this.handleSelect}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n autocomplete=${this.autocomplete as any}\n ></textarea>\n\n ${this.characterCounter ? this.renderCharacterCounter() : nothing}\n </div>\n\n ${this.renderError()}\n `\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 private renderCharacterCounter() {\n const { value, maxLength } = this\n const length = typeof value === \"string\" ? this.lengthMeasurer(value) : 0\n\n const remainder = maxLength ? maxLength - length : null\n const counter = maxLength ? `${length}/${maxLength}` : length\n\n return html`\n <nord-visually-hidden aria-live=\"polite\" aria-atomic=\"true\">\n ${remainder != null && remainder <= 10 ? this.localize.term(\"remainingCharacters\", remainder) : \"\"}\n </nord-visually-hidden>\n <div class=\"n-character-counter\">${counter}</div>\n `\n }\n\n private handleLangChange() {\n const lang = this.localize.resolvedLang\n this.lengthMeasurer = createLengthMeasurer(lang)\n }\n\n @observe(\"resize\", \"updated\")\n @observe(\"value\", \"updated\")\n protected resizeToFitContent() {\n const textarea = this.focusableRef.value\n\n if (!textarea) {\n return\n }\n\n if (this.resize === \"auto\") {\n textarea.style.height = \"auto\"\n textarea.style.height = `${textarea.scrollHeight}px`\n } else {\n textarea.style.height = \"\"\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-textarea\": Textarea\n }\n}\n"],"names":["Textarea","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","localize","LocalizeController","onLangChange","handleLangChange","resize","expand","characterCounter","render","html","renderLabel","ref","textSelectableRef","focusableRef","disabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","handleSelect","getDescribedBy","getInvalid","autocomplete","renderCharacterCounter","nothing","renderError","e","stopPropagation","dispatchEvent","NordEvent","length","lengthMeasurer","remainder","counter","term","lang","resolvedLang","locale","Intl","Segmenter","segmenter","segment","createLengthMeasurer","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","attribute","Number","observe","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { observe } from \"../common/decorators/observe.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 { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\nimport { TextSelectableMixin } from \"../common/mixins/TextSelectableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nfunction createLengthMeasurer(locale: string) {\n if (Intl.Segmenter) {\n const segmenter = new Intl.Segmenter(locale)\n return (value: string) => [...segmenter.segment(value)].length\n }\n\n return (value: string) => value.length\n}\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\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 textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n *\n * @cssprop [--n-textarea-inline-size=240px] - Controls the inline size, or width, of the textarea.\n * @cssprop [--n-textarea-block-size=76px] - Controls the block size, or height, of the textarea.\n * @cssprop [--n-textarea-background=var(--n-color-active)] - Controls the background of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-color=var(--n-color-text)] - Controls the text color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-color=var(--n-color-border-strong)] - Controls the border color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n *\n * @localization remainingCharacters - A function which receives the number of remaining characters and returns a string to be used as the aria-live message.\n */\n@customElement(\"nord-textarea\")\nexport default class Textarea extends SizeMixin(\n FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(InputMixin(FocusableMixin(LitElement))))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n protected inputId = \"textarea\"\n\n private lengthMeasurer!: (value: string) => number\n private localize = new LocalizeController<\"nord-textarea\">(this, {\n onLangChange: () => this.handleLangChange(),\n })\n\n /**\n * Controls whether the textarea is resizable.\n * By default is manually resizable vertically.\n * Set to \"auto\" to enable auto-resizing as content grows.\n */\n @property({ reflect: true }) resize: \"vertical\" | \"auto\" = \"vertical\"\n\n /**\n * Controls whether the textarea expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * Controls the max allowed length for the textarea.\n */\n @property({ reflect: true, attribute: \"maxlength\", type: Number }) maxLength?: number\n\n /**\n * Controls whether to show a count of the number of characters in the textarea.\n * When combined with `maxlength`, both the count and the max length are shown.\n */\n @property({ reflect: true, type: Boolean, attribute: \"character-counter\" }) characterCounter = false\n\n render() {\n return html`\n ${this.renderLabel()}\n\n <div class=\"n-input-container\">\n <textarea\n ${ref(this.textSelectableRef)}\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n maxlength=${ifDefined(this.maxLength)}\n .value=${this.value ?? \"\"}\n placeholder=${ifDefined(this.placeholder)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @select=${this.handleSelect}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n autocomplete=${this.autocomplete as any}\n ></textarea>\n\n ${this.characterCounter ? this.renderCharacterCounter() : nothing}\n </div>\n\n ${this.renderError()}\n `\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 private renderCharacterCounter() {\n const { value, maxLength } = this\n const length = typeof value === \"string\" ? this.lengthMeasurer(value) : 0\n\n const remainder = maxLength ? maxLength - length : null\n const counter = maxLength ? `${length}/${maxLength}` : length\n\n return html`\n <nord-visually-hidden aria-live=\"polite\" aria-atomic=\"true\">\n ${remainder != null && remainder <= 10 ? this.localize.term(\"remainingCharacters\", remainder) : \"\"}\n </nord-visually-hidden>\n <div class=\"n-character-counter\">${counter}</div>\n `\n }\n\n private handleLangChange() {\n const lang = this.localize.resolvedLang\n this.lengthMeasurer = createLengthMeasurer(lang)\n }\n\n @observe(\"resize\", \"updated\")\n @observe(\"value\", \"updated\")\n protected resizeToFitContent() {\n const textarea = this.focusableRef.value\n\n if (!textarea) {\n return\n }\n\n if (this.resize === \"auto\") {\n textarea.style.height = \"auto\"\n textarea.style.height = `${textarea.scrollHeight}px`\n } else {\n textarea.style.height = \"\"\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-textarea\": Textarea\n }\n}\n"],"names":["Textarea","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","localize","LocalizeController","onLangChange","handleLangChange","resize","expand","characterCounter","render","html","renderLabel","ref","textSelectableRef","focusableRef","disabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","handleSelect","getDescribedBy","getInvalid","autocomplete","renderCharacterCounter","nothing","renderError","e","stopPropagation","dispatchEvent","NordEvent","length","lengthMeasurer","remainder","counter","term","lang","resolvedLang","locale","Intl","Segmenter","segmenter","segment","createLengthMeasurer","resizeToFitContent","textarea","style","height","scrollHeight","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","attribute","Number","observe","customElement"],"mappings":"mpGAmDe,IAAMA,EAAN,cAAuBC,EACpCC,EAAoBC,EAAkBC,EAAcC,EAAoBC,EAAWC,EAAeC,UADrF,WAAAC,uBAKHC,KAAOC,QAAG,WAGZD,KAAAE,SAAW,IAAIC,EAAoCH,KAAM,CAC/DI,aAAc,IAAMJ,KAAKK,qBAQEL,KAAMM,OAAwB,WAKfN,KAAMO,QAAG,EAWuBP,KAAgBQ,kBAAG,CA+EhG,CA7EC,MAAAC,SACE,OAAOC,CAAI,GACPV,KAAKW,yDAIDC,EAAIZ,KAAKa,sBACTD,EAAIZ,KAAKc,qBACNd,KAAKC,uCAEED,KAAKe,wBACLf,KAAKgB,wBACLhB,KAAKiB,mBACVC,EAAUlB,KAAKmB,qBACVD,EAAUlB,KAAKoB,uBACR,QAAVC,EAAArB,KAAKsB,aAAK,IAAAD,EAAAA,EAAI,oBACTH,EAAUlB,KAAKuB,0BACnBvB,KAAKwB,yBACNxB,KAAKyB,yBACJzB,KAAK0B,mCACIR,EAAUlB,KAAK2B,oCACnBT,EAAUlB,KAAK4B,gCACf5B,KAAK6B,6BAGpB7B,KAAKQ,iBAAmBR,KAAK8B,yBAA2BC,UAG1D/B,KAAKgC,eAEV,CAES,YAAAN,CAAaO,GACrBA,EAAEC,kBAKFlC,KAAKmC,cAAc,IAAIC,EAAU,UAClC,CAEO,sBAAAN,GACN,MAAMR,MAAEA,EAAKF,UAAEA,GAAcpB,KACvBqC,EAA0B,iBAAVf,EAAqBtB,KAAKsC,eAAehB,GAAS,EAElEiB,EAAYnB,EAAYA,EAAYiB,EAAS,KAC7CG,EAAUpB,EAAY,GAAGiB,KAAUjB,IAAciB,EAEvD,OAAO3B,CAAI,+DAEQ,MAAb6B,GAAqBA,GAAa,GAAKvC,KAAKE,SAASuC,KAAK,sBAAuBF,GAAa,6DAE/DC,SAEtC,CAEO,gBAAAnC,GACN,MAAMqC,EAAO1C,KAAKE,SAASyC,aAC3B3C,KAAKsC,eA3HT,SAA8BM,GAC5B,GAAIC,KAAKC,UAAW,CAClB,MAAMC,EAAY,IAAIF,KAAKC,UAAUF,GACrC,OAAQtB,GAAkB,IAAIyB,EAAUC,QAAQ1B,IAAQe,MACzD,CAED,OAAQf,GAAkBA,EAAMe,MAClC,CAoH0BY,CAAqBP,EAC5C,CAIS,kBAAAQ,GACR,MAAMC,EAAWnD,KAAKc,aAAaQ,MAE9B6B,IAIe,SAAhBnD,KAAKM,QACP6C,EAASC,MAAMC,OAAS,OACxBF,EAASC,MAAMC,OAAS,GAAGF,EAASG,kBAEpCH,EAASC,MAAMC,OAAS,GAE3B,GA5GM/D,EAAMiE,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBN,GAcpCO,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgDvE,EAAAwE,UAAA,cAAA,GAKzBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyB1E,EAAAwE,UAAA,cAAA,GAKSH,EAAA,CAAlEC,EAAS,CAAEC,SAAS,EAAMI,UAAW,YAAaF,KAAMG,UAA4B5E,EAAAwE,UAAA,iBAAA,GAMTH,EAAA,CAA3EC,EAAS,CAAEC,SAAS,EAAME,KAAMC,QAASC,UAAW,uBAA+C3E,EAAAwE,UAAA,wBAAA,GAiE1FH,EAAA,CAFTQ,EAAQ,SAAU,WAClBA,EAAQ,QAAS,YAcjB7E,EAAAwE,UAAA,qBAAA,MA/GkBxE,EAAQqE,EAAA,CAD5BS,EAAc,kBACM9E,SAAAA"}
|
package/lib/Toggle.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,x as n,_ as r,e as i,s as t}from"./query-assigned-elements-92ce7494.js";import{n as o}from"./property-c78323b1.js";import{l as
|
|
1
|
+
import{i as e,x as n,_ as r,e as i,s as t}from"./query-assigned-elements-92ce7494.js";import{n as o}from"./property-c78323b1.js";import{l as a}from"./if-defined-cccde88f.js";import{n as s}from"./ref-99418ab4.js";import{F as l}from"./FocusableMixin-d30213b4.js";import{F as c}from"./FormAssociatedMixin-3fa55d53.js";import{I as d}from"./InputMixin-83b5bd46.js";import{s as g}from"./Component-2253424f.js";import{s as p}from"./FormField-b0da767b.js";import"./directive-e9ce14b4.js";import"./FormDataController-592ff3dd.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";const h=e`:host{--_n-toggle-block-size:calc(var(--_n-toggle-inline-size) / 1.6);--_n-toggle-inline-size:3.2143em;--_n-toggle-thumb-margin:0.35em;display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;inline-size:var(--_n-toggle-inline-size);block-size:var(--_n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--_n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--_n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:"";display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--_n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--_n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--_n-toggle-background:var(--n-color-accent)}input:checked::before{margin-inline-start:calc(var(--_n-toggle-inline-size) - var(--_n-toggle-block-size) + var(--_n-toggle-thumb-margin))}input:checked[aria-invalid]{--_n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{cursor:default}:host([disabled]) input:not(:checked){--_n-toggle-background:var(--n-color-border-neutral)}:host([disabled]) input:checked{opacity:.3}.n-label-container{margin-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([size="s"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xs)}:host([size="l"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xl)}`;let b=class extends(c(d(l(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=n`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,r=n`<div class="n-input-container"><input ${s(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"></div>`;return n`<div class="n-flex">${this.reverse?[e,r]:[r,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};b.styles=[g,p,h],r([o({reflect:!0,type:Boolean})],b.prototype,"checked",void 0),r([o({reflect:!0,type:Boolean})],b.prototype,"reverse",void 0),r([o({reflect:!0})],b.prototype,"size",void 0),b=r([i("nord-toggle")],b);var v=b;export{v as default};
|
|
2
2
|
//# sourceMappingURL=Toggle.js.map
|