@nordhealth/components 2.17.0 → 2.17.1
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 +585 -585
- package/lib/{AutocompleteMixin-5163f8db.js → AutocompleteMixin-3cf61f49.js} +2 -2
- package/lib/{AutocompleteMixin-5163f8db.js.map → AutocompleteMixin-3cf61f49.js.map} +1 -1
- package/lib/Avatar.js +1 -1
- package/lib/Badge.js +1 -1
- package/lib/Banner.js +1 -1
- package/lib/Banner.js.map +1 -1
- package/lib/Button.js +1 -1
- package/lib/Button.js.map +1 -1
- package/lib/ButtonGroup.js +1 -1
- package/lib/{Calendar-8ee21eab.js → Calendar-70103fd4.js} +2 -2
- package/lib/{Calendar-8ee21eab.js.map → Calendar-70103fd4.js.map} +1 -1
- package/lib/Calendar.js +1 -1
- package/lib/Card.js +1 -1
- package/lib/Checkbox.js +1 -1
- package/lib/CommandMenu.js +1 -1
- package/lib/CommandMenu.js.map +1 -1
- package/lib/CommandMenuAction.js +1 -1
- package/lib/CommandMenuAction.js.map +1 -1
- package/lib/{Component-449e40fb.js → Component-420bbc41.js} +2 -2
- package/lib/Component-420bbc41.js.map +1 -0
- package/lib/DatePicker.js +1 -1
- package/lib/DatePicker.js.map +1 -1
- package/lib/Divider.js +1 -1
- package/lib/Drawer.js +1 -1
- package/lib/Dropdown.js +1 -1
- package/lib/Dropdown.js.map +1 -1
- package/lib/DropdownGroup.js +1 -1
- package/lib/DropdownItem.js +1 -1
- package/lib/EmptyState.js +1 -1
- package/lib/Fieldset.js +1 -1
- package/lib/FocusableMixin-4300e44e.js +2 -0
- package/lib/{FocusableMixin-32631bff.js.map → FocusableMixin-4300e44e.js.map} +1 -1
- package/lib/{FormAssociatedMixin-9e798802.js → FormAssociatedMixin-edf83ac6.js} +2 -2
- package/lib/{FormAssociatedMixin-9e798802.js.map → FormAssociatedMixin-edf83ac6.js.map} +1 -1
- package/lib/{FormField-3f772bad.js → FormField-cbfebb3f.js} +2 -2
- package/lib/FormField-cbfebb3f.js.map +1 -0
- package/lib/Header.js +1 -1
- package/lib/Icon.js +2 -2
- package/lib/Icon.js.map +1 -1
- package/lib/IconManager.js +1 -1
- package/lib/Input.js +1 -1
- package/lib/{InputMixin-7fa755e1.js → InputMixin-4037827f.js} +2 -2
- package/lib/{InputMixin-7fa755e1.js.map → InputMixin-4037827f.js.map} +1 -1
- package/lib/Layout.js +1 -1
- package/lib/Layout.js.map +1 -1
- package/lib/{LightDomController-052f446a.js → LightDomController-f78fb046.js} +2 -2
- package/lib/{LightDomController-052f446a.js.map → LightDomController-f78fb046.js.map} +1 -1
- package/lib/Modal.js +1 -1
- package/lib/NavGroup.js +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/NavToggle.js +1 -1
- package/lib/NavToggle.js.map +1 -1
- package/lib/Navigation.js +1 -1
- package/lib/Notification.js +1 -1
- package/lib/NotificationGroup.js +1 -1
- package/lib/{NotificationMixin-86b09bcd.js → NotificationMixin-c06bb631.js} +2 -2
- package/lib/{NotificationMixin-86b09bcd.js.map → NotificationMixin-c06bb631.js.map} +1 -1
- package/lib/{Popout-bb7ff989.js → Popout-9f0393b2.js} +2 -2
- package/lib/{Popout-bb7ff989.js.map → Popout-9f0393b2.js.map} +1 -1
- package/lib/Popout.js +1 -1
- package/lib/ProgressBar.js +1 -1
- package/lib/Qrcode.js +1 -1
- package/lib/Qrcode.js.map +1 -1
- package/lib/Radio.js +1 -1
- package/lib/Range.js +1 -1
- package/lib/Select.js +1 -1
- package/lib/{SizeMixin-4d04817d.js → SizeMixin-fb379434.js} +2 -2
- package/lib/{SizeMixin-4d04817d.js.map → SizeMixin-fb379434.js.map} +1 -1
- package/lib/Skeleton.js +1 -1
- package/lib/Spinner.js +1 -1
- package/lib/Stack.js +1 -1
- package/lib/{Sticky-c4cf185e.js → Sticky-69666e8c.js} +2 -2
- package/lib/Sticky-69666e8c.js.map +1 -0
- package/lib/Tab.js +1 -1
- package/lib/TabGroup.js +1 -1
- package/lib/TabPanel.js +1 -1
- package/lib/Table.js +1 -1
- package/lib/{TextField-55a08df5.js → TextField-d617d0ad.js} +2 -2
- package/lib/{TextField-55a08df5.js.map → TextField-d617d0ad.js.map} +1 -1
- package/lib/Textarea.js +1 -1
- package/lib/Toast.js +1 -1
- package/lib/ToastGroup.js +1 -1
- package/lib/Toggle.js +1 -1
- package/lib/Tooltip.js +1 -1
- package/lib/VisuallyHidden.js +1 -1
- package/lib/bundle.js +17 -18
- package/lib/bundle.js.map +1 -1
- package/lib/class-map-cb77ead2.js +7 -0
- package/lib/{class-map-21152cee.js.map → class-map-cb77ead2.js.map} +1 -1
- package/lib/collection-2f8e38bd.js +7 -0
- package/lib/{collection-7eee4e72.js.map → collection-2f8e38bd.js.map} +1 -1
- package/lib/cond-44672025.js +2 -0
- package/lib/{cond-2da54107.js.map → cond-44672025.js.map} +1 -1
- package/lib/{if-defined-720964c0.js → if-defined-9b177db4.js} +2 -2
- package/lib/{if-defined-720964c0.js.map → if-defined-9b177db4.js.map} +1 -1
- package/lib/index.js +1 -1
- package/lib/positioning-cc75c800.js +2 -0
- package/lib/positioning-cc75c800.js.map +1 -0
- package/lib/query-assigned-elements-15485e3d.js +34 -0
- package/lib/query-assigned-elements-15485e3d.js.map +1 -0
- package/lib/ref-5526fb07.js +17 -0
- package/lib/{ref-c44e9f3c.js.map → ref-5526fb07.js.map} +1 -1
- package/lib/style-map-ed7e6cc6.js +7 -0
- package/lib/style-map-ed7e6cc6.js.map +1 -0
- package/package.json +3 -3
- package/lib/Component-449e40fb.js.map +0 -1
- package/lib/FocusableMixin-32631bff.js +0 -2
- package/lib/FormField-3f772bad.js.map +0 -1
- package/lib/Sticky-c4cf185e.js.map +0 -1
- package/lib/class-map-21152cee.js +0 -7
- package/lib/collection-7eee4e72.js +0 -7
- package/lib/cond-2da54107.js +0 -2
- package/lib/positioning-3bbd3548.js +0 -2
- package/lib/positioning-3bbd3548.js.map +0 -1
- package/lib/query-assigned-elements-cf502539.js +0 -35
- package/lib/query-assigned-elements-cf502539.js.map +0 -1
- package/lib/ref-c44e9f3c.js +0 -17
- package/lib/style-map-2e8fcab6.js +0 -7
- package/lib/style-map-2e8fcab6.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusableMixin-
|
|
1
|
+
{"version":3,"file":"FocusableMixin-4300e44e.js","sources":["../src/common/mixins/FocusableMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\n\nimport { LitElement } from \"lit\"\nimport { createRef, Ref } from \"lit/directives/ref.js\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FocusableMixinInterface {\n protected focusableRef: Ref<HTMLElement>\n focus(options?: FocusOptions): void\n blur(): void\n click(): void\n}\n\nexport function FocusableMixin<T extends Constructable<LitElement>>(superClass: T) {\n class FocusableElement extends superClass {\n protected focusableRef = createRef<HTMLElement>()\n\n /**\n * Programmatically move focus to the component.\n * @param {FocusOptions} options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions) {\n this.focusableRef.value?.focus(options)\n }\n\n /**\n * Programmatically remove focus from the component.\n */\n blur() {\n this.focusableRef.value?.blur()\n }\n\n /**\n * Programmatically simulates a click on the component.\n */\n click() {\n this.focusableRef.value?.click()\n }\n }\n\n return FocusableElement as unknown as Constructable<FocusableMixinInterface> & T\n}\n"],"names":["FocusableMixin","superClass","constructor","this","focusableRef","createRef","focus","options","_a","value","blur","click"],"mappings":"sCAcM,SAAUA,EAAoDC,GA2BlE,OA1BA,cAA+BA,EAA/BC,kCACYC,KAAYC,aAAGC,GAuB1B,CAjBCC,MAAMC,iBACJC,EAAAL,KAAKC,aAAaK,sBAAOH,MAAMC,EAChC,CAKDG,aAC2B,QAAzBF,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAE,MAC1B,CAKDC,cAC2B,QAAzBH,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAG,OAC1B,EAIL"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,
|
|
2
|
-
//# sourceMappingURL=FormAssociatedMixin-
|
|
1
|
+
import{_ as t,x as e}from"./query-assigned-elements-15485e3d.js";import{e as r}from"./property-03f59dce.js";import{E as i}from"./EventController-d99ebeef.js";import{S as o}from"./SlotController-d733c575.js";import{N as s}from"./events-d9666e88.js";import"./VisuallyHidden.js";class n{constructor(t,e){this.host=t,this.options=e,this.handleFormData=t=>{const{disabled:e,name:r}=this.host;if(e)return;const i=this.options.value();r&&null!=i&&t.formData.append(r,i)},t.addController(this),this.events=new i(t)}hostConnected(){this.host.form&&this.events.listen(this.host.form,"formdata",this.handleFormData)}}function h(i){class h extends i{constructor(){super(...arguments),this.labelSlot=new o(this,"label"),this.errorSlot=new o(this,"error"),this.hintSlot=new o(this,"hint"),this.formData=new n(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1,this.hideRequired=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new s("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new s("change"))}renderLabel(t){const r=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot><span ?hidden="${!this.required||this.hideRequired}" aria-hidden="true" class="n-required">*</span> ${t}</label><div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`;return this.hideLabel?e`<nord-visually-hidden>${r}</nord-visually-hidden>`:e`<div class="n-label-container">${r}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}}return t([r()],h.prototype,"label",void 0),t([r()],h.prototype,"hint",void 0),t([r({type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r()],h.prototype,"placeholder",void 0),t([r()],h.prototype,"error",void 0),t([r({type:Boolean})],h.prototype,"required",void 0),t([r({type:Boolean,attribute:"hide-required"})],h.prototype,"hideRequired",void 0),h}export{h as F};
|
|
2
|
+
//# sourceMappingURL=FormAssociatedMixin-edf83ac6.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormAssociatedMixin-
|
|
1
|
+
{"version":3,"file":"FormAssociatedMixin-edf83ac6.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\nimport { EventController } from \"./EventController.js\"\n\ntype FormDataOptions = {\n value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n private events: EventController\n constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n host.addController(this)\n this.events = new EventController(host)\n }\n\n hostConnected() {\n if (this.host.form) {\n this.events.listen(this.host.form, \"formdata\", this.handleFormData)\n }\n }\n\n private handleFormData = (e: FormDataEvent) => {\n const { disabled, name } = this.host\n\n if (disabled) {\n return\n }\n\n const value = this.options.value()\n\n if (name && value != null) {\n e.formData.append(name, value)\n }\n }\n}\n","/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n label: string\n required: boolean\n hideRequired: boolean\n hint?: string\n hideLabel: boolean\n placeholder?: string\n error?: string\n\n protected inputId: string\n protected errorId: string\n protected hintId: string\n protected labelSlot: SlotController\n protected hintSlot: SlotController\n protected errorSlot: SlotController\n protected formData: FormDataController\n\n protected get formValue(): string | undefined\n protected get hasError(): boolean\n protected get hasHint(): boolean\n\n protected handleChange(e: Event): void\n protected handleInput(e: Event): void\n protected renderLabel(additionalContent?: TemplateResult): TemplateResult\n protected renderError(): TemplateResult\n protected getDescribedBy(): string | undefined\n protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n /**\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n class FormAssociatedElement extends superClass {\n protected labelSlot = new SlotController(this, \"label\")\n protected errorSlot = new SlotController(this, \"error\")\n protected hintSlot = new SlotController(this, \"hint\")\n protected formData = new FormDataController(this, { value: () => this.formValue })\n\n protected get formValue() {\n return this.value\n }\n\n protected inputId = \"input\"\n protected errorId = \"error\"\n protected hintId = \"hint\"\n\n /**\n * Label for the input.\n */\n @property() label: string = \"\"\n\n /**\n * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n */\n @property() hint?: string\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n /**\n * Placeholder text to display within the input.\n */\n @property() placeholder?: string\n\n /**\n * Optional error to be shown with the input. Alternatively use the error slot.\n */\n @property() error?: string\n\n /**\n * Determines whether the input is required or not.\n * An input marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n */\n @property({ type: Boolean }) required = false\n\n /**\n * Visually hide the required indicator, but still show\n * required attribute to assistive technologies like screen readers.\n */\n @property({ type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n protected handleInput(e: Event) {\n e.stopPropagation()\n const target = e.target as NativeInputElement\n this.value = target.value\n\n /**\n * Fired as the user types into the input.\n */\n this.dispatchEvent(new NordEvent(\"input\"))\n }\n\n protected handleChange(e: Event) {\n e.stopPropagation()\n\n /**\n * Fired whenever the input's value is changed via user interaction.\n */\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n\n protected renderLabel(additionalContent?: TemplateResult) {\n const label = html`\n <label for=${this.inputId}>\n <slot name=\"label\">${this.label}</slot\n ><span ?hidden=${!this.required || this.hideRequired} aria-hidden=\"true\" class=\"n-required\">*</span>\n ${additionalContent}\n </label>\n\n <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n <slot name=\"hint\">${this.hint}</slot>\n </div>\n `\n\n return this.hideLabel\n ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n : html`<div class=\"n-label-container\">${label}</div>`\n }\n\n protected renderError() {\n return html`\n <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\">${this.error}</slot>\n </div>\n `\n }\n\n protected getDescribedBy() {\n const { hasHint, hasError } = this\n\n if (hasHint && hasError) {\n return `${this.hintId} ${this.errorId}`\n }\n if (hasHint) {\n return this.hintId\n }\n if (hasError) {\n return this.errorId\n }\n\n return undefined\n }\n\n protected getInvalid() {\n return this.hasError ? \"true\" : undefined\n }\n\n protected get hasHint() {\n return Boolean(this.hint) || this.hintSlot.hasContent\n }\n\n protected get hasError() {\n return Boolean(this.error) || this.errorSlot.hasContent\n }\n }\n\n return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormDataController","constructor","host","options","this","handleFormData","e","disabled","name","value","formData","append","addController","events","EventController","hostConnected","form","listen","FormAssociatedMixin","superClass","FormAssociatedElement","labelSlot","SlotController","errorSlot","hintSlot","formValue","inputId","errorId","hintId","label","hideLabel","required","hideRequired","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","additionalContent","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute"],"mappings":"0RAQaA,EAEXC,YAAoBC,EAA4DC,GAA5DC,KAAIF,KAAJA,EAA4DE,KAAOD,QAAPA,EAWxEC,KAAAC,eAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASJ,KAAKF,KAEhC,GAAIK,EACF,OAGF,MAAME,EAAQL,KAAKD,QAAQM,QAEvBD,GAAiB,MAATC,GACVH,EAAEI,SAASC,OAAOH,EAAMC,EACzB,EArBDP,EAAKU,cAAcR,MACnBA,KAAKS,OAAS,IAAIC,EAAgBZ,EACnC,CAEDa,gBACMX,KAAKF,KAAKc,MACZZ,KAAKS,OAAOI,OAAOb,KAAKF,KAAKc,KAAM,WAAYZ,KAAKC,eAEvD,ECsBG,SAAUa,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApClB,kCACYG,KAASiB,UAAG,IAAIC,EAAelB,KAAM,SACrCA,KAASmB,UAAG,IAAID,EAAelB,KAAM,SACrCA,KAAQoB,SAAG,IAAIF,EAAelB,KAAM,QACpCA,KAAAM,SAAW,IAAIV,EAAmBI,KAAM,CAAEK,MAAO,IAAML,KAAKqB,YAM5DrB,KAAOsB,QAAG,QACVtB,KAAOuB,QAAG,QACVvB,KAAMwB,OAAG,OAKPxB,KAAKyB,MAAW,GAU0BzB,KAAS0B,WAAG,EAiBrC1B,KAAQ2B,UAAG,EAMiB3B,KAAY4B,cAAG,CA2EzE,CAvHeP,gBACZ,OAAOrB,KAAKK,KACb,CA4CSwB,YAAY3B,GACpBA,EAAE4B,kBACF,MAAMC,EAAS7B,EAAE6B,OACjB/B,KAAKK,MAAQ0B,EAAO1B,MAKpBL,KAAKgC,cAAc,IAAIC,EAAU,SAClC,CAESC,aAAahC,GACrBA,EAAE4B,kBAKF9B,KAAKgC,cAAc,IAAIC,EAAU,UAClC,CAESE,YAAYC,GACpB,MAAMX,EAAQY,CAAI,eACHrC,KAAKsB,+BACKtB,KAAKyB,+BACRzB,KAAK2B,UAAY3B,KAAK4B,gEACtCQ,8CAG+BpC,KAAKwB,qBAAmBxB,KAAKsC,8BAC1CtC,KAAKuC,oBAI7B,OAAOvC,KAAK0B,UACRW,CAAI,yBAAyBZ,2BAC7BY,CAAI,kCAAkCZ,SAC3C,CAESe,cACR,OAAOH,CAAI,sCAC2BrC,KAAKuB,mCAAiCvB,KAAKyC,gCACxDzC,KAAK0C,oBAG/B,CAESC,iBACR,MAAML,QAAEA,EAAOG,SAAEA,GAAazC,KAE9B,OAAIsC,GAAWG,EACN,GAAGzC,KAAKwB,UAAUxB,KAAKuB,UAE5Be,EACKtC,KAAKwB,OAEViB,EACKzC,KAAKuB,aADd,CAKD,CAESqB,aACR,OAAO5C,KAAKyC,SAAW,YAASI,CACjC,CAEaP,cACZ,OAAOQ,QAAQ9C,KAAKuC,OAASvC,KAAKoB,SAAS2B,UAC5C,CAEaN,eACZ,OAAOK,QAAQ9C,KAAK0C,QAAU1C,KAAKmB,UAAU4B,UAC9C,EAGH,OA9GcC,EAAA,CAAXC,KAA6BjC,EAAAkC,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBjC,EAAAkC,UAAA,YAAA,GAK6BF,EAAA,CAArDC,EAAS,CAAEE,KAAML,QAASM,UAAW,gBAAiCpC,EAAAkC,UAAA,iBAAA,GAK3DF,EAAA,CAAXC,KAA+BjC,EAAAkC,UAAA,mBAAA,GAKpBF,EAAA,CAAXC,KAAyBjC,EAAAkC,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAML,WAA2B9B,EAAAkC,UAAA,gBAAA,GAMYF,EAAA,CAAxDC,EAAS,CAAEE,KAAML,QAASM,UAAW,mBAAuCpC,EAAAkC,UAAA,oBAAA,GA6ExElC,CACT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as n}from"./query-assigned-elements-
|
|
2
|
-
//# sourceMappingURL=FormField-
|
|
1
|
+
import{i as n}from"./query-assigned-elements-15485e3d.js";const a=n`.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{margin-block-end:var(--n-space-s);display:inline-block}.n-label,::slotted(label),label{display:block!important;color:var(--n-color-text);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading);margin:0!important}.n-hint{padding-block-start:var(--n-space-xs);color:var(--n-color-text-weaker)}.n-error{margin-block-start:var(--n-space-s);color:var(--n-color-text-error)}.n-required{color:var(--n-color-status-danger);margin-inline-start:var(--n-space-xs)}`;export{a as s};
|
|
2
|
+
//# sourceMappingURL=FormField-cbfebb3f.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormField-cbfebb3f.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/lib/Header.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as r,s as a,
|
|
1
|
+
import{i as e,_ as r,s as a,x as n,e as o}from"./query-assigned-elements-15485e3d.js";import{e as d}from"./property-03f59dce.js";import{S as s}from"./SlotController-d733c575.js";import{s as t}from"./Component-420bbc41.js";import"./EventController-d99ebeef.js";const l=e`:host{--_n-header-gutter:var(--n-space-l);--_n-header-box-shadow:var(--n-box-shadow-header);--_n-header-block-size:var(--n-space-xxl);--_n-header-padding-block:var(--n-space-m);--_n-header-padding-inset:var(--n-space-l);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-end{display:flex;flex-flow:row;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--_n-header-padding-block) var(--_n-header-padding-inset);padding-inline-start:var(--_n-header-gutter);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);min-block-size:var(--_n-header-block-size)}.n-header-end{margin-inline-start:auto;gap:var(--n-space-s)}:host([size="s"]){--_n-header-block-size:52px;--_n-header-padding-block:var(--n-space-s)}`;let i=class extends a{constructor(){super(...arguments),this.endSlot=new s(this,"end"),this.size="m"}render(){return n`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};i.styles=[t,l],r([d({reflect:!0})],i.prototype,"size",void 0),i=r([o("nord-header")],i);var c=i;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Header.js.map
|
package/lib/Icon.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{A as e,T as i,i as s,_ as t,s as r,x as o,e as n}from"./query-assigned-elements-15485e3d.js";import{e as a}from"./property-03f59dce.js";import{t as c}from"./state-70f38ceb.js";import{l}from"./if-defined-9b177db4.js";import{i as d,t as h,e as v}from"./directive-de55b00a.js";import{c as m}from"./cond-44672025.js";import{IconManager as p}from"./IconManager.js";import{s as f}from"./Component-420bbc41.js";import{o as z}from"./observe-a9c6dfb6.js";
|
|
2
2
|
/**
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2017 Google LLC
|
|
5
5
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
6
|
-
*/class u extends d{constructor(i){if(super(i),this.
|
|
6
|
+
*/class u extends d{constructor(i){if(super(i),this.et=e,i.type!==h.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(s){if(s===e||null==s)return this.ft=void 0,this.et=s;if(s===i)return s;if("string"!=typeof s)throw Error(this.constructor.directiveName+"() called with a non-string value");if(s===this.et)return this.ft;this.et=s;const t=[s];return t.raw=t,this.ft={_$litType$:this.constructor.resultType,strings:t,values:[]}}}u.directiveName="unsafeHTML",u.resultType=1;const g=v(u),y=s`:host{--_n-icon-size:var(--n-size-icon-m);display:inline-block;block-size:var(--_n-icon-size);inline-size:var(--_n-icon-size);min-inline-size:var(--_n-icon-size)}:host([size=xxs]){--_n-icon-size:var(--n-size-icon-xxs)}:host([size=xs]){--_n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--_n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--_n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var b;let x=b=class extends r{constructor(){super(...arguments),this.name="",this.svg=""}static registerResolver(e){this.manager.resolver=e}static registerIcon(e,i){return this.manager.registerIcon(e,i)}render(){return o`<div role="${m(this.label,"img")}" style="${m(this.color,`color:${this.color}`)}" aria-label="${l(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${g(this.svg)}</div></div>`}handleNameChange(){this.name?b.manager.resolve(this.name,(e=>{this.svg=e})):this.svg=""}};x.styles=[f,y],x.manager=new p,t([a({reflect:!0})],x.prototype,"name",void 0),t([a({reflect:!0})],x.prototype,"size",void 0),t([a({reflect:!0})],x.prototype,"color",void 0),t([a({reflect:!0})],x.prototype,"label",void 0),t([c()],x.prototype,"svg",void 0),t([z("name")],x.prototype,"handleNameChange",null),x=b=t([n("nord-icon")],x);var _=x;export{_ as default};
|
|
7
7
|
//# sourceMappingURL=Icon.js.map
|
package/lib/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sources":["../node_modules/lit-html/directives/unsafe-html.js","../src/icon/Icon.ts"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{Directive as r,PartType as s,directive as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends r{constructor(i){if(super(i),this.
|
|
1
|
+
{"version":3,"file":"Icon.js","sources":["../node_modules/lit-html/directives/unsafe-html.js","../src/icon/Icon.ts"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{Directive as r,PartType as s,directive as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends r{constructor(i){if(super(i),this.et=t,i.type!==s.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this.ft=void 0,this.et=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.et)return this.ft;this.et=r;const s=[r];return s.raw=s,this.ft={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=n(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n","import { html, LitElement } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { IconManager, IconResolver } from \"./IconManager.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Icon.css\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/**\n * Icons are used to provide additional meaning or in places where text label doesn’t fit.\n * Icon component allows you to display an icon from the Nordicons library.\n *\n * @status ready\n * @category image\n * @slot - The default slot used for placing a custom SVG icon.\n */\n@customElement(\"nord-icon\")\nexport default class Icon extends LitElement {\n static styles = [componentStyle, style]\n\n private static manager = new IconManager()\n\n /**\n * Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\n * Can return a string synchronously, or a promise of a string.\n * By default, will load icons from the Nord CDN.\n * @param resolver The resolver function to register.\n */\n static registerResolver(resolver: IconResolver) {\n this.manager.resolver = resolver\n }\n\n /**\n * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n * @param icon An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n * This is intended to be used in cases where you import an icon's entire ES module and register it directly.\n */\n static registerIcon(icon: { title: string; default: string }): void\n\n /**\n * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n * @param name The name of the icon to be registered.\n * @param icon The SVG string for the icon.\n */\n static registerIcon(name: string, icon: string): void\n\n /**\n * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n * @param iconOrName The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n * @param icon The SVG string for the icon.\n */\n static registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n return this.manager.registerIcon(iconOrName, icon)\n }\n\n /**\n * The name of the icon to display, as defined by [nordicons](/nordicons/).\n */\n @property({ reflect: true }) name: string = \"\"\n\n /**\n * The size of the icon.\n */\n @property({ reflect: true }) size?: \"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\"\n\n /**\n * The color of the icon.\n * Can accept any valid CSS color value, including custom properties.\n */\n @property({ reflect: true }) color?: string\n\n /**\n * An accessible label for the icon.\n * If no label is supplied, the icon is hidden from assistive technology.\n */\n @property({ reflect: true }) label?: string\n\n @state() private svg: string = \"\"\n\n render() {\n // if a label is supplied, we give the div a role of img.\n // without this we could not use aria-label, since it is only valid on elements of certain roles.\n // we always hide the inner svg, since the svg does not have any text/title/label itself.\n return html`\n <div\n role=${cond(this.label, \"img\")}\n style=${cond(this.color, `color:${this.color}`)}\n aria-label=${ifDefined(this.label)}\n >\n <slot aria-hidden=\"true\"></slot>\n <div aria-hidden=\"true\">${unsafeHTML(this.svg)}</div>\n </div>\n `\n }\n\n @observe(\"name\")\n protected handleNameChange() {\n if (!this.name) {\n this.svg = \"\"\n return\n }\n\n Icon.manager.resolve(this.name, svg => {\n this.svg = svg\n })\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-icon\": Icon\n }\n}\n"],"names":["e","r","constructor","i","super","this","et","t","type","s","CHILD","Error","directiveName","render","ft","raw","_$litType$","resultType","strings","values","o","n","Icon","Icon_1","LitElement","name","svg","static","resolver","manager","iconOrName","icon","registerIcon","html","cond","label","color","ifDefined","unsafeHTML","handleNameChange","resolve","styles","componentStyle","style","IconManager","__decorate","property","reflect","prototype","state","observe","customElement"],"mappings":";;;;;GAKG,MAAMA,UAAUC,EAAEC,YAAYC,GAAG,GAAGC,MAAMD,GAAGE,KAAKC,GAAGC,EAAEJ,EAAEK,OAAOC,EAAEC,MAAM,MAAMC,MAAMN,KAAKH,YAAYU,cAAc,wCAAwC,CAACC,OAAOZ,GAAG,GAAGA,IAAIM,GAAG,MAAMN,EAAE,OAAOI,KAAKS,QAAG,EAAOT,KAAKC,GAAGL,EAAE,GAAGA,IAAIE,EAAE,OAAOF,EAAE,GAAG,iBAAiBA,EAAE,MAAMU,MAAMN,KAAKH,YAAYU,cAAc,qCAAqC,GAAGX,IAAII,KAAKC,GAAG,OAAOD,KAAKS,GAAGT,KAAKC,GAAGL,EAAE,MAAMQ,EAAE,CAACR,GAAG,OAAOQ,EAAEM,IAAIN,EAAEJ,KAAKS,GAAG,CAACE,WAAWX,KAAKH,YAAYe,WAAWC,QAAQT,EAAEU,OAAO,GAAG,EAAEnB,EAAEY,cAAc,aAAaZ,EAAEiB,WAAW,EAAE,MAAMG,EAAEC,EAAErB,iiBCelhB,IAAqBsB,EAAIC,EAAzB,cAAkCC,EAAlCtB,kCAyC+BG,KAAIoB,KAAW,GAmB3BpB,KAAGqB,IAAW,EA6BhC,CA9ECC,wBAAwBC,GACtBvB,KAAKwB,QAAQD,SAAWA,CACzB,CAqBDD,oBAAoBG,EAAyDC,GAC3E,OAAO1B,KAAKwB,QAAQG,aAAaF,EAAYC,EAC9C,CA0BDlB,SAIE,OAAOoB,CAAI,cAEAC,EAAK7B,KAAK8B,MAAO,kBAChBD,EAAK7B,KAAK+B,MAAO,SAAS/B,KAAK+B,yBAC1BC,EAAUhC,KAAK8B,mEAGFG,EAAWjC,KAAKqB,kBAG/C,CAGSa,mBACHlC,KAAKoB,KAKVF,EAAKM,QAAQW,QAAQnC,KAAKoB,MAAMC,IAC9BrB,KAAKqB,IAAMA,CAAG,IALdrB,KAAKqB,IAAM,EAOd,GAvFMJ,EAAAmB,OAAS,CAACC,EAAgBC,GAElBrB,EAAAO,QAAU,IAAIe,EAsCAC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyBzB,EAAA0B,UAAA,YAAA,GAKjBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA4DzB,EAAA0B,UAAA,YAAA,GAMpDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBzB,EAAA0B,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBzB,EAAA0B,UAAA,aAAA,GAElCH,EAAA,CAARI,KAAgC3B,EAAA0B,UAAA,WAAA,GAmBjCH,EAAA,CADCK,EAAQ,SAUR5B,EAAA0B,UAAA,mBAAA,MAxFkB1B,EAAIC,EAAAsB,EAAA,CADxBM,EAAc,cACM7B,SAAAA"}
|
package/lib/IconManager.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=e=>fetch(`https://nordcdn.net/ds/icons/2.0.
|
|
1
|
+
const e=e=>fetch(`https://nordcdn.net/ds/icons/2.0.1/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};
|
|
2
2
|
//# sourceMappingURL=IconManager.js.map
|
package/lib/Input.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,
|
|
1
|
+
import{i as t,x as n,A as e,_ as o,e as i,s}from"./query-assigned-elements-15485e3d.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-9b177db4.js";import{o as d}from"./class-map-cb77ead2.js";import{n as l}from"./ref-5526fb07.js";import{F as c}from"./FocusableMixin-4300e44e.js";import{F as p}from"./FormAssociatedMixin-edf83ac6.js";import{I as u}from"./InputMixin-4037827f.js";import{R as h,s as m}from"./TextField-d617d0ad.js";import{A as b}from"./AutocompleteMixin-3cf61f49.js";import{S as v}from"./SizeMixin-fb379434.js";import{s as f}from"./Component-420bbc41.js";import{s as g}from"./FormField-cbfebb3f.js";import{S as w}from"./SlotController-d733c575.js";import{D as y}from"./DirectionController-8b298382.js";import{c as z}from"./cond-44672025.js";import x from"./Icon.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";import"./state-70f38ceb.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";var $=Object.freeze({__proto__:null,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>',title:"navigation-search",tags:"nordicon navigation menu find search magnifying glass"});const j=t`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),nord-icon{--_n-input-slot-margin-inline:var(--n-space-m);margin-inline-start:var(--_n-input-slot-margin-inline)!important;margin-inline-end:var(--_n-input-slot-margin-inline)!important}:host([size="s"]) :is([name=start],[name=end])::slotted(:not(nord-button,nord-dropdown)),:host([size="s"]) nord-icon{--_n-input-slot-margin-inline:var(--n-space-s)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.has-end .n-input{padding-inline-end:var(--n-space-xl)}:host([size="s"]) .has-start .n-input,:host([size="s"][type=search]) .n-input{padding-inline-start:var(--n-space-l)}:host([size="s"]) .has-end .n-input{padding-inline-end:var(--n-space-l)}:host([size="l"]) .has-start .n-input,:host([size="l"][type=search]) .n-input{padding-inline-start:calc(var(--n-space-xl) * 1.1)}:host([size="l"]) .has-end .n-input{padding-inline-end:calc(var(--n-space-xl) * 1.1)}::slotted(nord-button:not([disabled])),::slotted(nord-dropdown){pointer-events:auto;position:relative;--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-background-color:transparent}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button,nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button,nord-dropdown)){--n-button-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color, var(--n-color-status-danger))}.has-start-button .n-input{padding-inline-start:calc(var(--n-space-l) * 2)}.has-end-button .n-input{padding-inline-end:calc(var(--n-space-l) * 2)}:host([size="s"]) .has-start-button .n-input{padding-inline-start:calc(var(--n-space-m) * 2.5)}:host([size="s"]) .has-end-button .n-input{padding-inline-end:calc(var(--n-space-m) * 2.5)}:host([size="l"]) .has-start-button .n-input{padding-inline-start:calc(var(--n-space-l) * 2.5)}:host([size="l"]) .has-end-button .n-input{padding-inline-end:calc(var(--n-space-l) * 2.5)}:host([size="s"]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s) * 1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size="s"]){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align, end);font-family:var(--n-font-family-code)!important}`;x.registerIcon($);const S=t=>null!==t&&("nord-button"===t.localName||"nord-dropdown"===t.localName);let _=class extends(v(p(b(h(u(c(s))))))){constructor(){super(...arguments),this.startSlot=new w(this,"start"),this.endSlot=new w(this,"end"),this.direction=new y(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,i=e.slice(0,o),s=e.slice(o,e.length),r=i.replace(n,""),a=r+s.replace(n,""),d=r.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const o="search"===this.type||this.startSlot.hasContent,i="number"===this.type;return n`${this.renderLabel()}<div class="${d({"n-input-container":!0,"has-start":o,"has-end":this.endSlot.hasContent,"has-start-button":S(this.startSlot.content),"has-end-button":S(this.endSlot.content),"is-rtl":"rtl"===this.direction.dir})}"><slot name="${this.startSlot.slotName}" ?hidden="${!o}">${"search"===this.type?n`<nord-icon name="navigation-search"></nord-icon>`:e}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${i?"text":this.type}" inputmode="${z(i,"numeric")}" pattern="${z(i,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${a(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="${this.endSlot.slotName}" ?hidden="${this.endSlot.isEmpty}"></slot></div>${this.renderError()}`}handleKeydown(t){const{form:n}=this;if("Enter"===t.key&&n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}};_.styles=[f,g,m,j],o([r({reflect:!0})],_.prototype,"type",void 0),o([r({reflect:!0,type:Boolean})],_.prototype,"expand",void 0),o([r({reflect:!0,attribute:"disallow-pattern"})],_.prototype,"disallowPattern",void 0),_=o([i("nord-input")],_);var k=_;export{k as default};
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t}from"./query-assigned-elements-
|
|
2
|
-
//# sourceMappingURL=InputMixin-
|
|
1
|
+
import{_ as t}from"./query-assigned-elements-15485e3d.js";import{e}from"./property-03f59dce.js";function o(o){class r extends o{constructor(){super(...arguments),this.disabled=!1,this.value=""}get form(){if(this.hasAttribute("form")){return this.getRootNode().querySelector(`form#${this.getAttribute("form")}`)}return this.closest("form")}}return t([e({type:Boolean,reflect:!0})],r.prototype,"disabled",void 0),t([e()],r.prototype,"name",void 0),t([e()],r.prototype,"value",void 0),r}export{o as I};
|
|
2
|
+
//# sourceMappingURL=InputMixin-4037827f.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputMixin-
|
|
1
|
+
{"version":3,"file":"InputMixin-4037827f.js","sources":["../src/common/mixins/InputMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class InputMixinInterface {\n name?: string\n value: string\n disabled: boolean\n get form(): HTMLFormElement | null\n}\n\nexport function InputMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<InputMixinInterface> & T {\n class InputElement extends superClass {\n /**\n * Makes the component disabled. This prevents users from\n * being able to interact with the component, and conveys\n * its inactive state to assistive technologies.\n */\n @property({ type: Boolean, reflect: true }) disabled = false\n\n /**\n * The name of the form component.\n */\n @property() name?: string\n\n /**\n * The value of the form component.\n */\n @property() value: string = \"\"\n\n /**\n * Gets the form, if any, associated with the form element.\n */\n get form() {\n if (this.hasAttribute(\"form\")) {\n const root = this.getRootNode() as ShadowRoot | Document\n return root.querySelector<HTMLFormElement>(`form#${this.getAttribute(\"form\")}`)\n }\n\n return this.closest(\"form\")\n }\n }\n\n return InputElement\n}\n"],"names":["InputMixin","superClass","InputElement","constructor","this","disabled","value","form","hasAttribute","getRootNode","querySelector","getAttribute","closest","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"gGAaM,SAAUA,EAA8CC,GAC5D,MAAMC,UAAqBD,EAA3BE,kCAM8CC,KAAQC,UAAG,EAU3CD,KAAKE,MAAW,EAa7B,CARKC,WACF,GAAIH,KAAKI,aAAa,QAAS,CAE7B,OADaJ,KAAKK,cACNC,cAA+B,QAAQN,KAAKO,aAAa,UACtE,CAED,OAAOP,KAAKQ,QAAQ,OACrB,EAGH,OAzB8CC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBf,EAAAgB,UAAA,gBAAA,GAKhDL,EAAA,CAAXC,KAAwBZ,EAAAgB,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAA6BZ,EAAAgB,UAAA,aAAA,GAezBhB,CACT"}
|
package/lib/Layout.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as n,s as t,y as a,b as i,e as o}from"./query-assigned-elements-cf502539.js";import{e as s}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-21152cee.js";import{i as c}from"./style-map-2e8fcab6.js";import{D as h}from"./DirectionController-8b298382.js";import{E as v}from"./EventController-d99ebeef.js";import{L as p}from"./LightDismissController-a2645ae6.js";import{S as u}from"./SlotController-d733c575.js";import{o as g}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-2da54107.js";import{f as y}from"./fsm-50373df9.js";import{c as b}from"./number-c3ab3e95.js";import"./NavToggle.js";import{s as k}from"./Component-449e40fb.js";import{s as w}from"./Sticky-c4cf185e.js";import"./directive-de55b00a.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ref-c44e9f3c.js";import"./LocalizeController.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"./FocusableMixin-32631bff.js";import"./Button.js";import"./LightDomController-052f446a.js";import"./Spinner.js";import"./if-defined-720964c0.js";import"./InputMixin-7fa755e1.js";import"./Icon.js";import"./IconManager.js";import"./VisuallyHidden.js";const f=e`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);background:var(--_n-layout-background-color);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-nav-toggle-container{position:absolute;padding:var(--n-space-m) var(--n-space-l);min-block-size:calc(var(--n-space-xxl) - var(--n-space-xs));display:flex;align-items:center}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}:is([data-screen=wide]:not([data-nav=opened]),[data-screen=narrow]) .n-has-own-nav-toggle slot[name=header]::slotted(nord-header){--_n-header-gutter:calc(var(--n-space-l) * 3)}`,z=matchMedia("(min-width: 768px)"),x=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){try{const t=localStorage.getItem(e);return t?a(t):n}catch(e){return n}},set value(n){try{localStorage.setItem(e,t(n))}catch(e){}}}}("nord-layout.navWidth",250),T=y({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let S=class extends t{constructor(){super(...arguments),this.resizeObserver=new ResizeObserver((e=>{this.headerSize=Math.round(e[0].borderBoxSize[0].blockSize)})),this.navSlot=new u(this,"nav"),this.drawerSlot=new u(this,"drawer"),this.direction=new h(this),this.events=new v(this),this.lightDismiss=new p(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl}),this.navWidth=x.value,this.isDragging=!1,this.navState=z.matches?"opened":"closed",this.wideScreen=z.matches,this.headerSize=0,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=z.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(z,"change",this.handleMediaQueryChange),this.events.listen(this,"click",(e=>{this.isNavToggle(e.target)&&this.handleToggleClick()})),this.events.listen(this,"mouseover",(e=>{this.isNavToggle(e.target)&&this.handleMouseEnter()})),this.events.listen(this,"mouseout",(e=>{this.isNavToggle(e.target)&&this.handleMouseLeave()}))}firstUpdated(){this.resizeObserver.observe(this.stickyElement,{box:"border-box"})}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect()}render(){const{navWidth:e,navState:n,navSlot:t,isDragging:o,direction:s}=this,r="opened"===n&&this.wideScreen?e:250,d=t.hasContent&&!this.navToggle,h=`${this.headerSize}px`;return a`<div class="${l({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":o})}" style="${c({"--_n-layout-nav-width":`${r}px`,"--_n-sticky-size":this.sticky?h:null,"--_n-layout-header-size":h,"--_n-layout-drawer-size":this.drawerSlot.hasContent?"var(--_n-layout-drawer-inline-size)":null})}" data-nav="${t.hasContent?n:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${t.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${m("opened"===n,this.startDragging)}" @pointermove="${m(o,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="${l({"n-layout-main":!0,"n-has-own-nav-toggle":d})}" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}"><div class="${l({"n-has-drawer":this.drawerSlot.hasContent})}"><div class="n-layout-header n-sticky">${d?this.renderNavToggle():i}<slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return a`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}handleNavWidthChange(){x.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=T.transition(this.navState,e)}handleNavClick(e){if(!e.defaultPrevented&&!this.wideScreen){const t=e.target;(e=>"nord-nav-item"===e.localName)(n=t)&&!n.hasSubNav&&this.navTransition("close")}var n}handleMainClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}isNavToggle(e){return Boolean(this.navToggle)&&(null!=(n=e)&&n.nodeType===Node.ELEMENT_NODE)&&e.id===this.navToggle;var n}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=b(Math.round(e),220,400)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(e){const n=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};S.styles=[k,w,f],n([d(".n-sticky",!0)],S.prototype,"stickyElement",void 0),n([d(".n-layout-nav",!0)],S.prototype,"navEl",void 0),n([r()],S.prototype,"navWidth",void 0),n([r()],S.prototype,"isDragging",void 0),n([r()],S.prototype,"navState",void 0),n([r()],S.prototype,"wideScreen",void 0),n([r()],S.prototype,"headerSize",void 0),n([s({reflect:!0,type:Boolean,attribute:"nav-open"})],S.prototype,"navOpen",void 0),n([s({attribute:"nav-toggle"})],S.prototype,"navToggle",void 0),n([s({reflect:!0})],S.prototype,"padding",void 0),n([s({type:Boolean,reflect:!0})],S.prototype,"sticky",void 0),n([g("navWidth","updated")],S.prototype,"handleNavWidthChange",null),n([g("navState")],S.prototype,"handleNavStateChange",null),n([g("navOpen","updated")],S.prototype,"handleOpenChange",null),S=n([o("nord-layout")],S);var j=S;export{j as default};
|
|
1
|
+
import{i as e,_ as n,s as t,x as a,A as i,e as o}from"./query-assigned-elements-15485e3d.js";import{e as s}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-cb77ead2.js";import{o as c}from"./style-map-ed7e6cc6.js";import{D as h}from"./DirectionController-8b298382.js";import{E as v}from"./EventController-d99ebeef.js";import{L as p}from"./LightDismissController-a2645ae6.js";import{S as u}from"./SlotController-d733c575.js";import{o as g}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-44672025.js";import{f as y}from"./fsm-50373df9.js";import{c as b}from"./number-c3ab3e95.js";import"./NavToggle.js";import{s as k}from"./Component-420bbc41.js";import{s as w}from"./Sticky-69666e8c.js";import"./directive-de55b00a.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ref-5526fb07.js";import"./LocalizeController.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"./FocusableMixin-4300e44e.js";import"./Button.js";import"./LightDomController-f78fb046.js";import"./Spinner.js";import"./if-defined-9b177db4.js";import"./InputMixin-4037827f.js";import"./Icon.js";import"./IconManager.js";import"./VisuallyHidden.js";const f=e`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);background:var(--_n-layout-background-color);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-nav-toggle-container{position:absolute;padding:var(--n-space-m) var(--n-space-l);min-block-size:calc(var(--n-space-xxl) - var(--n-space-xs));display:flex;align-items:center}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}:is([data-screen=wide]:not([data-nav=opened]),[data-screen=narrow]) .n-has-own-nav-toggle slot[name=header]::slotted(nord-header){--_n-header-gutter:calc(var(--n-space-l) * 3)}`,z=matchMedia("(min-width: 768px)"),x=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){try{const t=localStorage.getItem(e);return t?a(t):n}catch(e){return n}},set value(n){try{localStorage.setItem(e,t(n))}catch(e){}}}}("nord-layout.navWidth",250),T=y({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let S=class extends t{constructor(){super(...arguments),this.resizeObserver=new ResizeObserver((e=>{this.headerSize=Math.round(e[0].borderBoxSize[0].blockSize)})),this.navSlot=new u(this,"nav"),this.drawerSlot=new u(this,"drawer"),this.direction=new h(this),this.events=new v(this),this.lightDismiss=new p(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl}),this.navWidth=x.value,this.isDragging=!1,this.navState=z.matches?"opened":"closed",this.wideScreen=z.matches,this.headerSize=0,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=z.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(z,"change",this.handleMediaQueryChange),this.events.listen(this,"click",(e=>{this.isNavToggle(e.target)&&this.handleToggleClick()})),this.events.listen(this,"mouseover",(e=>{this.isNavToggle(e.target)&&this.handleMouseEnter()})),this.events.listen(this,"mouseout",(e=>{this.isNavToggle(e.target)&&this.handleMouseLeave()}))}firstUpdated(){this.resizeObserver.observe(this.stickyElement,{box:"border-box"})}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect()}render(){const{navWidth:e,navState:n,navSlot:t,isDragging:o,direction:s}=this,r="opened"===n&&this.wideScreen?e:250,d=t.hasContent&&!this.navToggle,h=`${this.headerSize}px`;return a`<div class="${l({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":o})}" style="${c({"--_n-layout-nav-width":`${r}px`,"--_n-sticky-size":this.sticky?h:null,"--_n-layout-header-size":h,"--_n-layout-drawer-size":this.drawerSlot.hasContent?"var(--_n-layout-drawer-inline-size)":null})}" data-nav="${t.hasContent?n:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${t.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${m("opened"===n,this.startDragging)}" @pointermove="${m(o,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="${l({"n-layout-main":!0,"n-has-own-nav-toggle":d})}" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}"><div class="${l({"n-has-drawer":this.drawerSlot.hasContent})}"><div class="n-layout-header n-sticky">${d?this.renderNavToggle():i}<slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return a`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}handleNavWidthChange(){x.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=T.transition(this.navState,e)}handleNavClick(e){if(!e.defaultPrevented&&!this.wideScreen){const t=e.target;(e=>"nord-nav-item"===e.localName)(n=t)&&!n.hasSubNav&&this.navTransition("close")}var n}handleMainClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}isNavToggle(e){return Boolean(this.navToggle)&&(null!=(n=e)&&n.nodeType===Node.ELEMENT_NODE)&&e.id===this.navToggle;var n}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=b(Math.round(e),220,400)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(e){const n=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};S.styles=[k,w,f],n([d(".n-sticky",!0)],S.prototype,"stickyElement",void 0),n([d(".n-layout-nav",!0)],S.prototype,"navEl",void 0),n([r()],S.prototype,"navWidth",void 0),n([r()],S.prototype,"isDragging",void 0),n([r()],S.prototype,"navState",void 0),n([r()],S.prototype,"wideScreen",void 0),n([r()],S.prototype,"headerSize",void 0),n([s({reflect:!0,type:Boolean,attribute:"nav-open"})],S.prototype,"navOpen",void 0),n([s({attribute:"nav-toggle"})],S.prototype,"navToggle",void 0),n([s({reflect:!0})],S.prototype,"padding",void 0),n([s({type:Boolean,reflect:!0})],S.prototype,"sticky",void 0),n([g("navWidth","updated")],S.prototype,"handleNavWidthChange",null),n([g("navState")],S.prototype,"handleNavStateChange",null),n([g("navOpen","updated")],S.prototype,"handleOpenChange",null),S=n([o("nord-layout")],S);var j=S;export{j as default};
|
|
2
2
|
//# sourceMappingURL=Layout.js.map
|
package/lib/Layout.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { styleMap } from \"lit/directives/style-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\nimport type NavItem from \"../nav-item/NavItem.js\"\n\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./Layout.css\"\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\n\nconst navMachine = fsm({\n opened: {\n toggle: \"closed\",\n close: \"closed\",\n },\n closed: {\n toggle: \"opened\",\n open: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n },\n peek: {\n toggle: \"opened\",\n focusout: \"unpeek\",\n pointerleave: \"wait\",\n dropdownOpen: \"blocked\",\n click: \"unpeek\",\n open: \"opened\",\n },\n blocked: {\n dropdownClose: \"peek\",\n open: \"opened\",\n },\n wait: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n timeout: \"unpeek\",\n },\n unpeek: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n transitionend: \"closed\",\n },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isElement = (el: any): el is Element => el != null && el.nodeType === Node.ELEMENT_NODE\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n static styles = [componentStyle, stickyStyle, style]\n\n private peekTimeoutId?: ReturnType<typeof setTimeout>\n private resizeObserver = new ResizeObserver(entries => {\n this.headerSize = Math.round(entries[0].borderBoxSize[0].blockSize)\n })\n\n private navSlot = new SlotController(this, \"nav\")\n private drawerSlot = new SlotController(this, \"drawer\")\n private direction = new DirectionController(this)\n private events = new EventController(this)\n private lightDismiss = new LightDismissController(this, {\n isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n onDismiss: () => this.navTransition(\"close\"),\n isDismissible: node => node !== this.navEl,\n })\n\n @query(\".n-sticky\", true) private stickyElement!: HTMLDivElement\n @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n @state() private navWidth = store.value\n @state() private isDragging = false\n @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\n @state() private wideScreen = mediaQuery.matches\n @state() private headerSize: number = 0\n\n /**\n * Controls whether the navigation is hidden off-screen or not.\n * Defaults to `true` for wide viewports, and `false` otherwise.\n */\n @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen: boolean = this.navState === \"opened\"\n\n /**\n * ID reference of element used to toggle the navigation.\n * This is deprecated, the layout component will now render its own nav toggle to simplify usage.\n * @deprecated\n */\n @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n /**\n * Controls the padding of the default main section slot. When set to “none”,\n * the nav and header slots will still have padding.\n */\n @property({ reflect: true }) padding: \"m\" | \"none\" = \"m\"\n\n /**\n * Controls whether the layout's header has sticky positioning.\n */\n @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n /**\n * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n * A narrow viewport is considered to be less than 768px wide.\n */\n get isNarrow(): boolean {\n return !this.wideScreen\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n\n this.events.listen(this, \"click\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleToggleClick()\n }\n })\n this.events.listen(this, \"mouseover\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleMouseEnter()\n }\n })\n this.events.listen(this, \"mouseout\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleMouseLeave()\n }\n })\n }\n\n protected firstUpdated() {\n this.resizeObserver.observe(this.stickyElement, { box: \"border-box\" })\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.resizeObserver.disconnect()\n }\n\n render() {\n const { navWidth, navState, navSlot, isDragging, direction } = this\n const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n const shouldRenderOwnNavToggle = navSlot.hasContent && !this.navToggle\n const headerSizePx = `${this.headerSize}px`\n\n return html`\n <div\n class=${classMap({\n \"n-layout\": true,\n \"n-rtl\": direction.isRTL,\n \"n-dragging\": isDragging,\n })}\n style=${styleMap({\n \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n \"--_n-sticky-size\": this.sticky ? headerSizePx : null,\n // we output the header and drawer size as a CSS variable so that\n // we can use it in child components for positioning e.g. notification-group\n \"--_n-layout-header-size\": headerSizePx,\n \"--_n-layout-drawer-size\": this.drawerSlot.hasContent ? \"var(--_n-layout-drawer-inline-size)\" : null,\n })}\n data-nav=${navSlot.hasContent ? navState : \"closed\"}\n data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n >\n <div\n class=\"n-layout-nav\"\n ?hidden=${navSlot.isEmpty}\n @focusin=${this.handleNavFocus}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n @open=${this.handleDropdownOpen}\n @close=${this.handleDropdownClose}\n >\n <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n <div\n class=\"n-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n tabindex=\"0\"\n @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n @pointermove=${cond(isDragging, this.handleDrag)}\n @pointerleave=${this.stopDragging}\n @pointerup=${this.stopDragging}\n @keydown=${this.handleKeyboardResize}\n ></div>\n </div>\n\n <div\n class=${classMap({ \"n-layout-main\": true, \"n-has-own-nav-toggle\": shouldRenderOwnNavToggle })}\n @focusin=${this.handleMainFocus}\n @click=${this.handleMainClick}\n >\n <div class=${classMap({ \"n-has-drawer\": this.drawerSlot.hasContent })}>\n <div class=\"n-layout-header n-sticky\">\n ${shouldRenderOwnNavToggle ? this.renderNavToggle() : nothing}\n <slot name=\"header\"></slot>\n </div>\n <main>\n <slot></slot>\n </main>\n </div>\n <aside ?hidden=${this.drawerSlot.isEmpty}>\n <slot name=\"drawer\"></slot>\n </aside>\n </div>\n </div>\n `\n }\n\n private renderNavToggle() {\n /* eslint-disable lit-a11y/mouse-events-have-key-events */\n return html`\n <div class=\"n-nav-toggle-container\">\n <slot\n name=\"nav-toggle\"\n @click=${this.handleToggleClick}\n @mouseover=${this.handleMouseEnter}\n @mouseout=${this.handleMouseLeave}\n >\n <nord-nav-toggle></nord-nav-toggle>\n </slot>\n </div>\n `\n /* eslint-enable lit-a11y/mouse-events-have-key-events */\n }\n\n @observe(\"navWidth\", \"updated\")\n protected handleNavWidthChange() {\n store.value = this.navWidth\n }\n\n @observe(\"navState\")\n protected handleNavStateChange(prev: NavState) {\n if (prev === \"wait\" && this.peekTimeoutId) {\n clearTimeout(this.peekTimeoutId)\n }\n if (prev === \"unpeek\") {\n this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n }\n\n switch (this.navState) {\n case \"closed\":\n this.navOpen = false\n break\n case \"opened\":\n this.navOpen = true\n break\n case \"wait\":\n this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n break\n case \"unpeek\":\n this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n break\n default:\n break\n }\n }\n\n @observe(\"navOpen\", \"updated\")\n protected handleOpenChange() {\n if (!this.isDragging) {\n // when opening nav, it should restore to default width (or larger).\n // unless it is being dragged, in which case the drag width wins\n this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n }\n\n this.navTransition(this.navOpen ? \"open\" : \"close\")\n }\n\n /* ---------------------------------------------\n / NAVIGATION OPEN/CLOSE LOGIC\n / --------------------------------------------- */\n\n private navTransition(event: NavEvent) {\n this.navState = navMachine.transition(this.navState, event)\n }\n\n private handleNavClick(e: Event) {\n if (!e.defaultPrevented && !this.wideScreen) {\n const target = e.target as HTMLElement\n\n if (isNavItemLeaf(target)) {\n this.navTransition(\"close\")\n }\n }\n }\n\n private handleMainClick() {\n this.navTransition(\"click\")\n }\n\n private handleDropdownOpen(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownOpen\")\n }\n }\n\n private handleDropdownClose(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownClose\")\n }\n }\n\n private handleMediaQueryChange = () => {\n this.wideScreen = mediaQuery.matches\n this.navTransition(this.wideScreen ? \"open\" : \"close\")\n }\n\n private handleToggleClick = () => {\n this.navTransition(\"toggle\")\n }\n\n private handleNavFocus = () => {\n this.navTransition(\"focusin\")\n }\n\n private handleMainFocus = () => {\n this.navTransition(\"focusout\")\n }\n\n private handleMouseEnter = () => {\n if (this.wideScreen) {\n this.navTransition(\"pointerenter\")\n }\n }\n\n private handleMouseLeave = () => {\n this.navTransition(\"pointerleave\")\n }\n\n private handleTransitionEnd = () => {\n this.navTransition(\"transitionend\")\n }\n\n private isNavToggle(node: EventTarget | null) {\n return Boolean(this.navToggle) && isElement(node) && node.id === this.navToggle\n }\n\n /* ---------------------------------------------\n / RESIZE LOGIC\n / --------------------------------------------- */\n\n private handleKeyboardResize(e: KeyboardEvent) {\n const {\n navWidth,\n direction: { isLTR },\n } = this\n\n switch (e.key) {\n case \"ArrowLeft\":\n this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n break\n case \"ArrowRight\":\n this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n break\n case \"Enter\":\n this.navTransition(\"toggle\")\n break\n case \"Home\":\n this.setNavWidth(NAV_MIN_WIDTH)\n break\n case \"End\":\n this.setNavWidth(NAV_MAX_WIDTH)\n break\n default:\n return\n }\n\n e.preventDefault()\n }\n\n private setNavWidth(width: number) {\n this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n }\n\n private startDragging(e: PointerEvent) {\n if (e.button === 0) {\n const target = e.target as Element\n target.setPointerCapture(e.pointerId)\n this.isDragging = true\n }\n }\n\n private stopDragging() {\n this.isDragging = false\n }\n\n private handleDrag(e: PointerEvent) {\n const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n this.setNavWidth(width)\n this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-layout\": Layout\n }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n key: string,\n defaultValue: T,\n serialize: (value: T) => string = JSON.stringify,\n deserialize: (value: string) => T = JSON.parse\n) {\n return {\n get value(): T {\n try {\n const value = localStorage.getItem(key)\n return value ? deserialize(value) : defaultValue\n } catch {\n return defaultValue\n }\n },\n\n set value(value: T) {\n try {\n localStorage.setItem(key, serialize(value))\n } catch {\n // nothing we can do here\n }\n },\n }\n}\n"],"names":["mediaQuery","matchMedia","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","constructor","this","resizeObserver","ResizeObserver","entries","headerSize","Math","round","borderBoxSize","blockSize","navSlot","SlotController","drawerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","navWidth","isDragging","matches","navOpen","padding","sticky","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","e","isNavToggle","target","firstUpdated","observe","stickyElement","box","disconnectedCallback","disconnect","render","adjustedNavWidth","shouldRenderOwnNavToggle","hasContent","navToggle","headerSizePx","html","classMap","isRTL","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","max","event","transition","defaultPrevented","el","localName","isNavItem","hasSubNav","Boolean","nodeType","Node","ELEMENT_NODE","id","isLTR","preventDefault","width","clamp","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","attribute","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { styleMap } from \"lit/directives/style-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\nimport type NavItem from \"../nav-item/NavItem.js\"\n\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./Layout.css\"\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\n\nconst navMachine = fsm({\n opened: {\n toggle: \"closed\",\n close: \"closed\",\n },\n closed: {\n toggle: \"opened\",\n open: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n },\n peek: {\n toggle: \"opened\",\n focusout: \"unpeek\",\n pointerleave: \"wait\",\n dropdownOpen: \"blocked\",\n click: \"unpeek\",\n open: \"opened\",\n },\n blocked: {\n dropdownClose: \"peek\",\n open: \"opened\",\n },\n wait: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n timeout: \"unpeek\",\n },\n unpeek: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n transitionend: \"closed\",\n },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isElement = (el: any): el is Element => el != null && el.nodeType === Node.ELEMENT_NODE\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n static styles = [componentStyle, stickyStyle, style]\n\n private peekTimeoutId?: ReturnType<typeof setTimeout>\n private resizeObserver = new ResizeObserver(entries => {\n this.headerSize = Math.round(entries[0].borderBoxSize[0].blockSize)\n })\n\n private navSlot = new SlotController(this, \"nav\")\n private drawerSlot = new SlotController(this, \"drawer\")\n private direction = new DirectionController(this)\n private events = new EventController(this)\n private lightDismiss = new LightDismissController(this, {\n isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n onDismiss: () => this.navTransition(\"close\"),\n isDismissible: node => node !== this.navEl,\n })\n\n @query(\".n-sticky\", true) private stickyElement!: HTMLDivElement\n @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n @state() private navWidth = store.value\n @state() private isDragging = false\n @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\n @state() private wideScreen = mediaQuery.matches\n @state() private headerSize: number = 0\n\n /**\n * Controls whether the navigation is hidden off-screen or not.\n * Defaults to `true` for wide viewports, and `false` otherwise.\n */\n @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen: boolean = this.navState === \"opened\"\n\n /**\n * ID reference of element used to toggle the navigation.\n * This is deprecated, the layout component will now render its own nav toggle to simplify usage.\n * @deprecated\n */\n @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n /**\n * Controls the padding of the default main section slot. When set to “none”,\n * the nav and header slots will still have padding.\n */\n @property({ reflect: true }) padding: \"m\" | \"none\" = \"m\"\n\n /**\n * Controls whether the layout's header has sticky positioning.\n */\n @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n /**\n * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n * A narrow viewport is considered to be less than 768px wide.\n */\n get isNarrow(): boolean {\n return !this.wideScreen\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n\n this.events.listen(this, \"click\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleToggleClick()\n }\n })\n this.events.listen(this, \"mouseover\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleMouseEnter()\n }\n })\n this.events.listen(this, \"mouseout\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleMouseLeave()\n }\n })\n }\n\n protected firstUpdated() {\n this.resizeObserver.observe(this.stickyElement, { box: \"border-box\" })\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.resizeObserver.disconnect()\n }\n\n render() {\n const { navWidth, navState, navSlot, isDragging, direction } = this\n const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n const shouldRenderOwnNavToggle = navSlot.hasContent && !this.navToggle\n const headerSizePx = `${this.headerSize}px`\n\n return html`\n <div\n class=${classMap({\n \"n-layout\": true,\n \"n-rtl\": direction.isRTL,\n \"n-dragging\": isDragging,\n })}\n style=${styleMap({\n \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n \"--_n-sticky-size\": this.sticky ? headerSizePx : null,\n // we output the header and drawer size as a CSS variable so that\n // we can use it in child components for positioning e.g. notification-group\n \"--_n-layout-header-size\": headerSizePx,\n \"--_n-layout-drawer-size\": this.drawerSlot.hasContent ? \"var(--_n-layout-drawer-inline-size)\" : null,\n })}\n data-nav=${navSlot.hasContent ? navState : \"closed\"}\n data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n >\n <div\n class=\"n-layout-nav\"\n ?hidden=${navSlot.isEmpty}\n @focusin=${this.handleNavFocus}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n @open=${this.handleDropdownOpen}\n @close=${this.handleDropdownClose}\n >\n <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n <div\n class=\"n-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n tabindex=\"0\"\n @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n @pointermove=${cond(isDragging, this.handleDrag)}\n @pointerleave=${this.stopDragging}\n @pointerup=${this.stopDragging}\n @keydown=${this.handleKeyboardResize}\n ></div>\n </div>\n\n <div\n class=${classMap({ \"n-layout-main\": true, \"n-has-own-nav-toggle\": shouldRenderOwnNavToggle })}\n @focusin=${this.handleMainFocus}\n @click=${this.handleMainClick}\n >\n <div class=${classMap({ \"n-has-drawer\": this.drawerSlot.hasContent })}>\n <div class=\"n-layout-header n-sticky\">\n ${shouldRenderOwnNavToggle ? this.renderNavToggle() : nothing}\n <slot name=\"header\"></slot>\n </div>\n <main>\n <slot></slot>\n </main>\n </div>\n <aside ?hidden=${this.drawerSlot.isEmpty}>\n <slot name=\"drawer\"></slot>\n </aside>\n </div>\n </div>\n `\n }\n\n private renderNavToggle() {\n /* eslint-disable lit-a11y/mouse-events-have-key-events */\n return html`\n <div class=\"n-nav-toggle-container\">\n <slot\n name=\"nav-toggle\"\n @click=${this.handleToggleClick}\n @mouseover=${this.handleMouseEnter}\n @mouseout=${this.handleMouseLeave}\n >\n <nord-nav-toggle></nord-nav-toggle>\n </slot>\n </div>\n `\n /* eslint-enable lit-a11y/mouse-events-have-key-events */\n }\n\n @observe(\"navWidth\", \"updated\")\n protected handleNavWidthChange() {\n store.value = this.navWidth\n }\n\n @observe(\"navState\")\n protected handleNavStateChange(prev: NavState) {\n if (prev === \"wait\" && this.peekTimeoutId) {\n clearTimeout(this.peekTimeoutId)\n }\n if (prev === \"unpeek\") {\n this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n }\n\n switch (this.navState) {\n case \"closed\":\n this.navOpen = false\n break\n case \"opened\":\n this.navOpen = true\n break\n case \"wait\":\n this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n break\n case \"unpeek\":\n this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n break\n default:\n break\n }\n }\n\n @observe(\"navOpen\", \"updated\")\n protected handleOpenChange() {\n if (!this.isDragging) {\n // when opening nav, it should restore to default width (or larger).\n // unless it is being dragged, in which case the drag width wins\n this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n }\n\n this.navTransition(this.navOpen ? \"open\" : \"close\")\n }\n\n /* ---------------------------------------------\n / NAVIGATION OPEN/CLOSE LOGIC\n / --------------------------------------------- */\n\n private navTransition(event: NavEvent) {\n this.navState = navMachine.transition(this.navState, event)\n }\n\n private handleNavClick(e: Event) {\n if (!e.defaultPrevented && !this.wideScreen) {\n const target = e.target as HTMLElement\n\n if (isNavItemLeaf(target)) {\n this.navTransition(\"close\")\n }\n }\n }\n\n private handleMainClick() {\n this.navTransition(\"click\")\n }\n\n private handleDropdownOpen(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownOpen\")\n }\n }\n\n private handleDropdownClose(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownClose\")\n }\n }\n\n private handleMediaQueryChange = () => {\n this.wideScreen = mediaQuery.matches\n this.navTransition(this.wideScreen ? \"open\" : \"close\")\n }\n\n private handleToggleClick = () => {\n this.navTransition(\"toggle\")\n }\n\n private handleNavFocus = () => {\n this.navTransition(\"focusin\")\n }\n\n private handleMainFocus = () => {\n this.navTransition(\"focusout\")\n }\n\n private handleMouseEnter = () => {\n if (this.wideScreen) {\n this.navTransition(\"pointerenter\")\n }\n }\n\n private handleMouseLeave = () => {\n this.navTransition(\"pointerleave\")\n }\n\n private handleTransitionEnd = () => {\n this.navTransition(\"transitionend\")\n }\n\n private isNavToggle(node: EventTarget | null) {\n return Boolean(this.navToggle) && isElement(node) && node.id === this.navToggle\n }\n\n /* ---------------------------------------------\n / RESIZE LOGIC\n / --------------------------------------------- */\n\n private handleKeyboardResize(e: KeyboardEvent) {\n const {\n navWidth,\n direction: { isLTR },\n } = this\n\n switch (e.key) {\n case \"ArrowLeft\":\n this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n break\n case \"ArrowRight\":\n this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n break\n case \"Enter\":\n this.navTransition(\"toggle\")\n break\n case \"Home\":\n this.setNavWidth(NAV_MIN_WIDTH)\n break\n case \"End\":\n this.setNavWidth(NAV_MAX_WIDTH)\n break\n default:\n return\n }\n\n e.preventDefault()\n }\n\n private setNavWidth(width: number) {\n this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n }\n\n private startDragging(e: PointerEvent) {\n if (e.button === 0) {\n const target = e.target as Element\n target.setPointerCapture(e.pointerId)\n this.isDragging = true\n }\n }\n\n private stopDragging() {\n this.isDragging = false\n }\n\n private handleDrag(e: PointerEvent) {\n const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n this.setNavWidth(width)\n this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-layout\": Layout\n }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n key: string,\n defaultValue: T,\n serialize: (value: T) => string = JSON.stringify,\n deserialize: (value: string) => T = JSON.parse\n) {\n return {\n get value(): T {\n try {\n const value = localStorage.getItem(key)\n return value ? deserialize(value) : defaultValue\n } catch {\n return defaultValue\n }\n },\n\n set value(value: T) {\n try {\n localStorage.setItem(key, serialize(value))\n } catch {\n // nothing we can do here\n }\n },\n }\n}\n"],"names":["mediaQuery","matchMedia","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","constructor","this","resizeObserver","ResizeObserver","entries","headerSize","Math","round","borderBoxSize","blockSize","navSlot","SlotController","drawerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","navWidth","isDragging","matches","navOpen","padding","sticky","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","e","isNavToggle","target","firstUpdated","observe","stickyElement","box","disconnectedCallback","disconnect","render","adjustedNavWidth","shouldRenderOwnNavToggle","hasContent","navToggle","headerSizePx","html","classMap","isRTL","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","max","event","transition","defaultPrevented","el","localName","isNavItem","hasSubNav","Boolean","nodeType","Node","ELEMENT_NODE","id","isLTR","preventDefault","width","clamp","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","attribute","customElement"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
2
|
-
//# sourceMappingURL=LightDomController-
|
|
1
|
+
import{B as t,A as s}from"./query-assigned-elements-15485e3d.js";class o{constructor(t,s){this.host=t,this.options=s,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){t(s,this.container,this.options.renderOptions)}render(){t(this.options.render(),this.container,this.options.renderOptions)}}export{o as L};
|
|
2
|
+
//# sourceMappingURL=LightDomController-f78fb046.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LightDomController-
|
|
1
|
+
{"version":3,"file":"LightDomController-f78fb046.js","sources":["../src/common/controllers/LightDomController.ts"],"sourcesContent":["import { nothing, ReactiveController, ReactiveControllerHost, render, RenderOptions } from \"lit\"\n\ntype LightDomOptions = {\n render: () => unknown\n renderOptions?: RenderOptions\n container?: HTMLElement\n}\n\nexport class LightDomController implements ReactiveController {\n constructor(private host: ReactiveControllerHost & HTMLElement, private options: LightDomOptions) {\n host.addController(this)\n }\n\n private get container(): HTMLElement {\n return this.options.container || this.host\n }\n\n hostUpdated() {\n this.render()\n }\n\n hostDisconnected() {\n render(nothing, this.container, this.options.renderOptions)\n }\n\n private render() {\n render(this.options.render(), this.container, this.options.renderOptions)\n }\n}\n"],"names":["LightDomController","constructor","host","options","this","addController","container","hostUpdated","render","hostDisconnected","nothing","renderOptions"],"mappings":"uEAQaA,EACXC,YAAoBC,EAAoDC,GAApDC,KAAIF,KAAJA,EAAoDE,KAAOD,QAAPA,EACtED,EAAKG,cAAcD,KACpB,CAEWE,gBACV,OAAOF,KAAKD,QAAQG,WAAaF,KAAKF,IACvC,CAEDK,cACEH,KAAKI,QACN,CAEDC,mBACED,EAAOE,EAASN,KAAKE,UAAWF,KAAKD,QAAQQ,cAC9C,CAEOH,SACNA,EAAOJ,KAAKD,QAAQK,SAAUJ,KAAKE,UAAWF,KAAKD,QAAQQ,cAC5D"}
|
package/lib/Modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as o,s as e,_ as a,
|
|
1
|
+
import{i as o,s as e,_ as a,x as n,e as i}from"./query-assigned-elements-15485e3d.js";import{e as t}from"./property-03f59dce.js";import{i as s}from"./query-2d22378e.js";import{c as l}from"./interface-close-small-f26b0299.js";import r from"./Icon.js";import{S as d}from"./SlotController-d733c575.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as p}from"./events-d9666e88.js";import{s as m}from"./Component-420bbc41.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./state-70f38ceb.js";import"./if-defined-9b177db4.js";import"./directive-de55b00a.js";import"./cond-44672025.js";import"./IconManager.js";import"./EventController-d99ebeef.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"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";const b=o`: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{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-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:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-nav-surface);border-block-end:1px solid var(--n-color-border)}.n-modal-footer{border-block-start:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) 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, 1320px)}}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}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;r.registerIcon(l);let f=class extends e{constructor(){super(...arguments),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 h(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"),this.setAttribute("aria-modal","true")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new p("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return n`<div class="n-modal-backdrop"><div class="n-modal" 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="n-body-padded"></slot></div><div class="n-modal-footer n-padded" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new p("cancel",{cancelable:!0}))&&this.close()}};f.styles=[m,b],f.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},a([s(".n-modal",!0)],f.prototype,"modal",void 0),a([s(".n-modal-backdrop",!0)],f.prototype,"backdrop",void 0),a([t({type:Boolean,reflect:!0})],f.prototype,"open",void 0),a([t({reflect:!0})],f.prototype,"size",void 0),a([t({attribute:!1})],f.prototype,"returnValue",void 0),a([t({type:Boolean,reflect:!0})],f.prototype,"scrollable",void 0),a([c("open","updated")],f.prototype,"handleOpenUpdated",null),f=a([i("nord-modal")],f);var u=f;export{u as default};
|
|
2
2
|
//# sourceMappingURL=Modal.js.map
|
package/lib/NavGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as i,s as n,
|
|
1
|
+
import{i as e,_ as i,s as n,x as t,A as o,e as r}from"./query-assigned-elements-15485e3d.js";import{e as a}from"./property-03f59dce.js";import"./Icon.js";import"./state-70f38ceb.js";import"./if-defined-9b177db4.js";import"./directive-de55b00a.js";import"./cond-44672025.js";import"./IconManager.js";import"./Component-420bbc41.js";import"./observe-a9c6dfb6.js";const s=e`:host{color:var(--n-color-text-weak);font-weight:var(--n-font-weight);line-height:var(--n-line-height-tight);white-space:nowrap;text-overflow:ellipsis;user-select:none;all:unset;display:block;font-family:var(--n-font-family);font-size:var(--n-font-size-m)}*,::after,::before{box-sizing:border-box}[role=list]{margin-block-end:var(--n-space-m);min-inline-size:100%;list-style:none;appearance:none;border:0;box-sizing:border-box;margin:0;padding:0}.n-heading{min-inline-size:100%;color:var(--n-color-nav-heading);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);line-height:var(--n-line-height-tight);padding-inline-start:var(--n-space-s);margin-block-start:var(--n-space-m);margin-block-end:var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;let l=class extends n{render(){return t`${this.heading?t`<p id="heading" aria-hidden="true" class="n-heading">${this.heading}</p>`:o}<div role="list" aria-labelledby="${this.heading?"heading":o}"><slot></slot></div>`}};l.styles=s,i([a()],l.prototype,"heading",void 0),l=i([r("nord-nav-group")],l);var d=l;export{d as default};
|
|
2
2
|
//# sourceMappingURL=NavGroup.js.map
|
package/lib/NavItem.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as n,
|
|
1
|
+
import{i as e,_ as n,x as t,A as o,e as a,s as i}from"./query-assigned-elements-15485e3d.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./class-map-cb77ead2.js";import{n as c}from"./ref-5526fb07.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-d733c575.js";import{c as v}from"./cond-44672025.js";import{N as p}from"./events-d9666e88.js";import{F as h}from"./FocusableMixin-4300e44e.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const m=e`:host{--_n-nav-item-box-shadow:none;all:unset;display:block;font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:32px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;max-inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-warning);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let b=class extends(h(i)){constructor(){super(...arguments),this.subnavSlot=new d(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}get hasSubNav(){return this.subnavSlot.hasContent}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=t`${this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:o}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:o}</div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),t`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return t`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${v(this.active,"page")}" href="${this.href||""}">${e}</a>`}renderToggle(e){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xxs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return t`<button class="n-nav-item" ${c(this.focusableRef)}>${e}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};b.styles=m,n([r({type:Boolean,reflect:!0})],b.prototype,"active",void 0),n([r()],b.prototype,"icon",void 0),n([r()],b.prototype,"href",void 0),n([r()],b.prototype,"badge",void 0),n([r({type:Boolean})],b.prototype,"open",void 0),b=n([a("nord-nav-item")],b);var f=b;export{f as default};
|
|
2
2
|
//# sourceMappingURL=NavItem.js.map
|
package/lib/NavToggle.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as o,_ as i,
|
|
1
|
+
import{i as o,_ as i,x as t,e as n,s as r}from"./query-assigned-elements-15485e3d.js";import{n as e}from"./ref-5526fb07.js";import{o as s}from"./class-map-cb77ead2.js";import{LocalizeController as a}from"./LocalizeController.js";import{D as l}from"./DirectionController-8b298382.js";import{F as c}from"./FocusableMixin-4300e44e.js";import"./Button.js";import m from"./Icon.js";import"./VisuallyHidden.js";import{s as d}from"./Component-420bbc41.js";import"./directive-de55b00a.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"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-f78fb046.js";import"./cond-44672025.js";import"./Spinner.js";import"./if-defined-9b177db4.js";import"./InputMixin-4037827f.js";import"./SlotController-d733c575.js";import"./state-70f38ceb.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";const p="navigation-toggle";var g=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.9988 3v2h-16.00002v-2zm-16.00002 8h16.00002v-2h-16.00002zm0 6h16.00002v-2h-16.00002z" fill="currentColor"/></svg>',title:p,tags:"nordicon navigation hamburger menu toggle navigation three lines"});const v="navigation-toggle-lock";var j=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m19.7188 10.71-8 8-1.41-1.41 7.29-7.29-7.3-7.29996 1.41-1.41 8 8c.39.39.39 1.01996 0 1.40996zm-8-1.40996-7.99997-8.01-1.41 1.41 7.29 7.29-7.3 7.29996 1.41 1.41 8.00997-7.99c.39-.39.39-1.01996 0-1.40996z" fill="currentColor"/></svg>',title:v,tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron"});const f=o`:host{display:inline-flex}nord-icon{display:block}nord-icon[name=navigation-toggle-lock]{display:none}.is-rtl nord-icon[name=navigation-toggle-lock]{transform:rotate(180deg)}@media (min-width:768px){:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle-lock]{display:block}:host(:is(:hover,:focus-within)) nord-icon[name=navigation-toggle]{display:none}}`;m.registerIcon(g),m.registerIcon(j);let h=class extends(c(r)){constructor(){super(...arguments),this.direction=new l(this),this.localization=new a(this)}render(){return t`<nord-button variant="plain" size="s" ${e(this.focusableRef)} class="${s({"is-rtl":this.direction.isRTL})}"><nord-visually-hidden>${this.localization.term("label")}</nord-visually-hidden><nord-icon size="m" color="var(--n-color-icon)" name="${p}" class="nav-unlock"></nord-icon><nord-icon size="m" color="var(--n-color-text)" name="${v}" class="nav-lock"></nord-icon></nord-button>`}};h.styles=[d,f],h=i([n("nord-nav-toggle")],h);var u=h;export{u as default};
|
|
2
2
|
//# sourceMappingURL=NavToggle.js.map
|