@nordhealth/components 3.1.3 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +585 -547
- package/lib/{AutocompleteMixin-3cf61f49.js → AutocompleteMixin-60503685.js} +2 -2
- package/lib/{AutocompleteMixin-3cf61f49.js.map → AutocompleteMixin-60503685.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/ButtonGroup.js +1 -1
- package/lib/{Calendar-b170e2fc.js → Calendar-f7e95d9a.js} +2 -2
- package/lib/{Calendar-b170e2fc.js.map → Calendar-f7e95d9a.js.map} +1 -1
- package/lib/Calendar.js +1 -1
- package/lib/Card.js +1 -1
- package/lib/Card.js.map +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-420bbc41.js → Component-253ecb24.js} +2 -2
- package/lib/Component-253ecb24.js.map +1 -0
- package/lib/DatePicker.js +1 -1
- package/lib/Divider.js +1 -1
- package/lib/Drawer.js +1 -1
- package/lib/Dropdown.js +1 -1
- package/lib/DropdownGroup.js +1 -1
- package/lib/{DropdownItem-a9bf32f4.js → DropdownItem-75a2468a.js} +2 -2
- package/lib/DropdownItem-75a2468a.js.map +1 -0
- package/lib/DropdownItem.js +1 -1
- package/lib/DropdownItem.js.map +1 -1
- package/lib/EmptyState.js +1 -1
- package/lib/EmptyState.js.map +1 -1
- package/lib/Fieldset.js +1 -1
- package/lib/Fieldset.js.map +1 -1
- package/lib/{FocusableMixin-4300e44e.js → FocusableMixin-003e1094.js} +2 -2
- package/lib/{FocusableMixin-4300e44e.js.map → FocusableMixin-003e1094.js.map} +1 -1
- package/lib/{FormAssociatedMixin-88e4bf5e.js → FormAssociatedMixin-0638b151.js} +2 -2
- package/lib/{FormAssociatedMixin-88e4bf5e.js.map → FormAssociatedMixin-0638b151.js.map} +1 -1
- package/lib/{FormField-cbfebb3f.js → FormField-0783cb5a.js} +2 -2
- package/lib/FormField-0783cb5a.js.map +1 -0
- package/lib/Header.js +1 -1
- package/lib/Icon.js +1 -1
- package/lib/Input.js +1 -1
- package/lib/{InputMixin-f9fb4034.js → InputMixin-87012c5a.js} +2 -2
- package/lib/{InputMixin-f9fb4034.js.map → InputMixin-87012c5a.js.map} +1 -1
- package/lib/Layout.js +1 -1
- package/lib/Layout.js.map +1 -1
- package/lib/{LightDomController-f78fb046.js → LightDomController-5c53b3f4.js} +2 -2
- package/lib/{LightDomController-f78fb046.js.map → LightDomController-5c53b3f4.js.map} +1 -1
- package/lib/Message.js +1 -1
- package/lib/Modal.js +1 -1
- package/lib/NavGroup.js +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/{NavToggle-11625962.js → NavToggle-7e1ba314.js} +2 -2
- package/lib/{NavToggle-11625962.js.map → NavToggle-7e1ba314.js.map} +1 -1
- package/lib/NavToggle.js +1 -1
- package/lib/Navigation.js +1 -1
- package/lib/Notification.js +1 -1
- package/lib/NotificationGroup.js +1 -1
- package/lib/{NotificationMixin-c06bb631.js → NotificationMixin-cea138a7.js} +2 -2
- package/lib/{NotificationMixin-c06bb631.js.map → NotificationMixin-cea138a7.js.map} +1 -1
- package/lib/{Popout-39425b6c.js → Popout-1183c22b.js} +2 -2
- package/lib/{Popout-39425b6c.js.map → Popout-1183c22b.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-fb379434.js → SizeMixin-bc2098f4.js} +2 -2
- package/lib/{SizeMixin-fb379434.js.map → SizeMixin-bc2098f4.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-acc92284.js → Sticky-220280e0.js} +2 -2
- package/lib/Sticky-220280e0.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-8b226327.js → TextField-b455a6dd.js} +2 -2
- package/lib/{TextField-8b226327.js.map → TextField-b455a6dd.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/TopBar.js +1 -1
- package/lib/VisuallyHidden.js +1 -1
- package/lib/bundle.js +7 -7
- package/lib/bundle.js.map +1 -1
- package/lib/{class-map-cb77ead2.js → class-map-4a0dec4a.js} +2 -2
- package/lib/{class-map-cb77ead2.js.map → class-map-4a0dec4a.js.map} +1 -1
- package/lib/{collection-2f8e38bd.js → collection-bba319d3.js} +3 -3
- package/lib/{collection-2f8e38bd.js.map → collection-bba319d3.js.map} +1 -1
- package/lib/cond-77258def.js +2 -0
- package/lib/{cond-44672025.js.map → cond-77258def.js.map} +1 -1
- package/lib/{if-defined-9b177db4.js → if-defined-10508457.js} +2 -2
- package/lib/{if-defined-9b177db4.js.map → if-defined-10508457.js.map} +1 -1
- package/lib/index.js +1 -1
- package/lib/positioning-a572d126.js +1 -1
- package/lib/positioning-a572d126.js.map +1 -1
- package/lib/{query-assigned-elements-15485e3d.js → query-assigned-elements-2f8275b7.js} +3 -3
- package/lib/{query-assigned-elements-15485e3d.js.map → query-assigned-elements-2f8275b7.js.map} +1 -1
- package/lib/{ref-5526fb07.js → ref-f75a30b7.js} +4 -4
- package/lib/{ref-5526fb07.js.map → ref-f75a30b7.js.map} +1 -1
- package/lib/src/dropdown-item/DropdownItem.d.ts +10 -0
- package/lib/src/fieldset/Fieldset.d.ts +5 -1
- package/lib/style-map-75ce20b3.js +7 -0
- package/lib/style-map-75ce20b3.js.map +1 -0
- package/package.json +2 -2
- package/lib/Component-420bbc41.js.map +0 -1
- package/lib/DropdownItem-a9bf32f4.js.map +0 -1
- package/lib/FormField-cbfebb3f.js.map +0 -1
- package/lib/Sticky-acc92284.js.map +0 -1
- package/lib/cond-44672025.js +0 -2
- package/lib/style-map-ed7e6cc6.js +0 -7
- package/lib/style-map-ed7e6cc6.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormAssociatedMixin-88e4bf5e.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\n\ntype FormDataOptions = {\n value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n private _form: HTMLFormElement | null = null\n\n constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n host.addController(this)\n }\n\n hostConnected() {\n this.listen(this.host.form)\n }\n\n hostUpdated() {\n this.listen(this.host.form)\n }\n\n hostDisconnected() {\n this.cleanup()\n }\n\n private listen(form: HTMLFormElement | null) {\n if (this._form !== form) {\n this.cleanup()\n this._form = form\n this._form?.addEventListener(\"formdata\", this.handleFormData)\n }\n }\n\n private cleanup() {\n this._form?.removeEventListener(\"formdata\", this.handleFormData)\n this._form = null\n }\n\n private handleFormData = (e: FormDataEvent) => {\n const { disabled, name } = this.host\n\n if (disabled) {\n return\n }\n if (!name) {\n return\n }\n\n const value = this.options.value()\n if (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","_form","handleFormData","e","disabled","name","value","formData","append","addController","hostConnected","listen","form","hostUpdated","hostDisconnected","cleanup","_a","addEventListener","removeEventListener","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":"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"}
|
|
1
|
+
{"version":3,"file":"FormAssociatedMixin-0638b151.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\n\ntype FormDataOptions = {\n value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n private _form: HTMLFormElement | null = null\n\n constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n host.addController(this)\n }\n\n hostConnected() {\n this.listen(this.host.form)\n }\n\n hostUpdated() {\n this.listen(this.host.form)\n }\n\n hostDisconnected() {\n this.cleanup()\n }\n\n private listen(form: HTMLFormElement | null) {\n if (this._form !== form) {\n this.cleanup()\n this._form = form\n this._form?.addEventListener(\"formdata\", this.handleFormData)\n }\n }\n\n private cleanup() {\n this._form?.removeEventListener(\"formdata\", this.handleFormData)\n this._form = null\n }\n\n private handleFormData = (e: FormDataEvent) => {\n const { disabled, name } = this.host\n\n if (disabled) {\n return\n }\n if (!name) {\n return\n }\n\n const value = this.options.value()\n if (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","_form","handleFormData","e","disabled","name","value","formData","append","addController","hostConnected","listen","form","hostUpdated","hostDisconnected","cleanup","_a","addEventListener","removeEventListener","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":"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"}
|
|
@@ -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-2f8275b7.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-0783cb5a.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormField-0783cb5a.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/lib/Header.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as r,s as a,x as n,e as o}from"./query-assigned-elements-
|
|
1
|
+
import{i as e,_ as r,s as a,x as n,e as o}from"./query-assigned-elements-2f8275b7.js";import{e as d}from"./property-03f59dce.js";import{S as s}from"./SlotController-d733c575.js";import{s as t}from"./Component-253ecb24.js";import"./EventController-d99ebeef.js";const l=e`:host{--_n-header-box-shadow:var(--n-box-shadow-header);--_n-header-block-size:var(--n-header-block-size, var(--n-space-xxl));--_n-header-padding-block:var(--n-space-m);--_n-header-padding-inline: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-inline);padding-inline-start:calc(var(--_n-header-padding-inline) + var(--_n-header-gutter,0px));background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);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,4 +1,4 @@
|
|
|
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-
|
|
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-2f8275b7.js";import{e as a}from"./property-03f59dce.js";import{t as c}from"./state-70f38ceb.js";import{l}from"./if-defined-10508457.js";import{i as d,t as h,e as v}from"./directive-de55b00a.js";import{c as m}from"./cond-77258def.js";import{IconManager as p}from"./IconManager.js";import{s as f}from"./Component-253ecb24.js";import{o as z}from"./observe-a9c6dfb6.js";
|
|
2
2
|
/**
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2017 Google LLC
|
package/lib/Input.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,x as n,A as e,_ as o,e as i,s as r}from"./query-assigned-elements-
|
|
1
|
+
import{i as t,x as n,A as e,_ as o,e as i,s as r}from"./query-assigned-elements-2f8275b7.js";import{e as s}from"./property-03f59dce.js";import{i as a}from"./query-2d22378e.js";import{l as d}from"./if-defined-10508457.js";import{o as l}from"./class-map-4a0dec4a.js";import{n as c}from"./ref-f75a30b7.js";import{o as p}from"./style-map-75ce20b3.js";import{F as u}from"./FocusableMixin-003e1094.js";import{F as m}from"./FormAssociatedMixin-0638b151.js";import{I as h}from"./InputMixin-87012c5a.js";import{R as b,s as v}from"./TextField-b455a6dd.js";import{A as f}from"./AutocompleteMixin-60503685.js";import{S as g}from"./SizeMixin-bc2098f4.js";import{s as w}from"./Component-253ecb24.js";import{s as y}from"./FormField-0783cb5a.js";import{D as z}from"./DirectionController-f35f5476.js";import{c as x}from"./cond-77258def.js";import j from"./Icon.js";import"./directive-de55b00a.js";import"./SlotController-d733c575.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 $=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;padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline));padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline))}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(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-start:var(--_n-input-padding-inline)!important;margin-inline-end:calc(var(--_n-input-padding-inline)/ 2)!important}[name=end]::slotted(*){margin-inline-start:calc(var(--_n-input-padding-inline)/ 2)!important;margin-inline-end:var(--_n-input-padding-inline)!important}[name=start]::slotted(:is(nord-button, nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button, nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color, var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]), nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--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-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),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))}: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}`;class S{constructor(t,n){this.target=n,this.hadFirstUpdate=!1,t.addController(this),this.observer=new ResizeObserver((([n])=>{const[e]=n.borderBoxSize;this.borderBoxSize=e,t.requestUpdate()}))}get inlineSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.inlineSize}get blockSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.blockSize}hostUpdated(){this.hadFirstUpdate||(this.observer.observe(this.target()),this.hadFirstUpdate=!0)}hostConnected(){this.hadFirstUpdate&&this.observer.observe(this.target())}hostDisconnected(){this.observer.disconnect()}}j.registerIcon(_);const k=t=>t?`${t}px`:void 0;let F=class extends(g(m(f(b(h(u(r))))))){constructor(){super(...arguments),this.startObserver=new S(this,(()=>this.startSlot)),this.endObserver=new S(this,(()=>this.endSlot)),this.direction=new z(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),r=e.slice(o,e.length),s=i.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const o="number"===this.type;return n`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${p({"--_n-input-start-inline-size":k(this.startObserver.inlineSize),"--_n-input-end-inline-size":k(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?n`<nord-icon name="navigation-search"></nord-icon>`:e}</slot><input ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${o||"unit"===this.type?"text":this.type}" inputmode="${x(o,"numeric")}" pattern="${x(o,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${d(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${d(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${d(this.getDescribedBy())}" aria-invalid="${d(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:n}=this;if(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)}}};F.styles=[w,y,v,$],o([a("slot[name='start']")],F.prototype,"startSlot",void 0),o([a("slot[name='end']")],F.prototype,"endSlot",void 0),o([s({reflect:!0})],F.prototype,"type",void 0),o([s({reflect:!0,type:Boolean})],F.prototype,"expand",void 0),o([s({reflect:!0,attribute:"disallow-pattern"})],F.prototype,"disallowPattern",void 0),F=o([i("nord-input")],F);var C=F;export{C as default};
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e}from"./query-assigned-elements-
|
|
2
|
-
//# sourceMappingURL=InputMixin-
|
|
1
|
+
import{_ as e}from"./query-assigned-elements-2f8275b7.js";import{e as t}from"./property-03f59dce.js";function o(o){class r extends o{constructor(){super(...arguments),this.disabled=!1,this.value="",this.formAncestor=null}set form(e){const t=this._formId;this._formId=e,this.requestUpdate("form",t)}get form(){if(this._formId){return this.getRootNode().querySelector(`form#${this._formId}`)}return this.formAncestor}connectedCallback(){super.connectedCallback(),this.formAncestor=this.closest("form")}disconnectedCallback(){super.disconnectedCallback(),this.formAncestor=null}}return e([t({type:Boolean,reflect:!0})],r.prototype,"disabled",void 0),e([t()],r.prototype,"name",void 0),e([t()],r.prototype,"value",void 0),e([t()],r.prototype,"form",null),r}export{o as I};
|
|
2
|
+
//# sourceMappingURL=InputMixin-87012c5a.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputMixin-
|
|
1
|
+
{"version":3,"file":"InputMixin-87012c5a.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 protected _formId?: string\n set form(id: string)\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 private formAncestor: HTMLFormElement | null = null\n protected _formId?: string\n set form(id: string) {\n const oldVal = this._formId\n this._formId = id\n this.requestUpdate(\"form\", oldVal)\n }\n\n /**\n * Gets the form, if any, associated with the form element.\n * The setter accepts a string, which is the id of the form.\n */\n @property()\n get form(): HTMLFormElement | null {\n if (this._formId) {\n const root = this.getRootNode() as ShadowRoot | Document\n return root.querySelector<HTMLFormElement>(`form#${this._formId}`)\n }\n return this.formAncestor\n }\n\n connectedCallback() {\n super.connectedCallback()\n // we can cache this, since it will only change if the element is (re)connected\n this.formAncestor = this.closest(\"form\")\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.formAncestor = null\n }\n }\n\n return InputElement as unknown as Constructor<InputMixinInterface> & T\n}\n"],"names":["InputMixin","superClass","InputElement","constructor","this","disabled","value","formAncestor","form","id","oldVal","_formId","requestUpdate","getRootNode","querySelector","connectedCallback","super","closest","disconnectedCallback","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"qGAeM,SAAUA,EAA8CC,GAC5D,MAAMC,UAAqBD,EAA3BE,kCAM8CC,KAAQC,UAAG,EAU3CD,KAAKE,MAAW,GAEpBF,KAAYG,aAA2B,IA+BhD,CA7BKC,SAAKC,GACP,MAAMC,EAASN,KAAKO,QACpBP,KAAKO,QAAUF,EACfL,KAAKQ,cAAc,OAAQF,EAC5B,CAOGF,WACF,GAAIJ,KAAKO,QAAS,CAEhB,OADaP,KAAKS,cACNC,cAA+B,QAAQV,KAAKO,UACzD,CACD,OAAOP,KAAKG,YACb,CAEDQ,oBACEC,MAAMD,oBAENX,KAAKG,aAAeH,KAAKa,QAAQ,OAClC,CAEDC,uBACEF,MAAME,uBACNd,KAAKG,aAAe,IACrB,EAGH,OA7C8CY,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBrB,EAAAsB,UAAA,gBAAA,GAKhDL,EAAA,CAAXC,KAAwBlB,EAAAsB,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAA6BlB,EAAAsB,UAAA,aAAA,GAe9BL,EAAA,CADCC,KAOAlB,EAAAsB,UAAA,OAAA,MAcItB,CACT"}
|
package/lib/Layout.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as n,_ as e,s as a,x as t,A as o,e as i}from"./query-assigned-elements-15485e3d.js";import{e as r}from"./property-03f59dce.js";import{t as s}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{l as v}from"./NavToggle-11625962.js";import{D as p}from"./DirectionController-f35f5476.js";import{E as h}from"./EventController-d99ebeef.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{S as g}from"./SlotController-d733c575.js";import{o as b}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-44672025.js";import{f as y}from"./fsm-50373df9.js";import{c as k}from"./number-c3ab3e95.js";import f from"./Icon.js";import{s as w}from"./Component-420bbc41.js";import{s as z}from"./Sticky-acc92284.js";import"./directive-de55b00a.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"./localization8.js";import"./FocusableMixin-4300e44e.js";import"./Button.js";import"./LightDomController-f78fb046.js";import"./Spinner.js";import"./if-defined-9b177db4.js";import"./InputMixin-f9fb4034.js";import"./VisuallyHidden.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./IconManager.js";const x=n`: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);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.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)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}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 .n-layout-content{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}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}: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(:not([data-nav=opened],[data-nav=closed])) .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][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgba(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgba(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);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-top-bar-container{position:sticky;inset-block-start:0;z-index:var(--n-index-top-bar)}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgba(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgba(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);opacity:0;visibility:hidden;cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}`;f.registerIcon(v);const j=matchMedia("(min-width: 768px)"),_=function(n,e,a=JSON.stringify,t=JSON.parse){return{get value(){try{const a=localStorage.getItem(n);return a?t(a):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,a(e))}catch(n){}}}}("nord-layout.navWidth",250),S=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 C=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.direction=new p(this),this.events=new h(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.navWidth=_.value,this.isDragging=!1,this.navState=j.matches?"opened":"closed",this.wideScreen=j.matches,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.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(j,"change",this.handleMediaQueryChange)}render(){const{navWidth:n,navState:e,navSlot:a,headerSlot:i,topBarSlot:r,drawerSlot:s,isDragging:d,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return t`<div class="${l({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":i.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":s.hasContent,"n-has-nav":a.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${a.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${a.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"===e,this.startDragging)}" @pointermove="${m(d,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${a.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return t`<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>`}renderNavCollapse(){return t`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){_.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&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(n){this.navState=S.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const a=n.target;(n=>"nord-nav-item"===n.localName)(e=a)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:a}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(a?-30:30));break;case"ArrowRight":this.setNavWidth(e+(a?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}n.preventDefault()}setNavWidth(n){this.navWidth=k(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};C.styles=[w,z,x],e([d(".n-layout-nav",!0)],C.prototype,"navEl",void 0),e([s()],C.prototype,"navWidth",void 0),e([s()],C.prototype,"isDragging",void 0),e([s()],C.prototype,"navState",void 0),e([s()],C.prototype,"wideScreen",void 0),e([r({reflect:!0,type:Boolean,attribute:"nav-open"})],C.prototype,"navOpen",void 0),e([r({reflect:!0})],C.prototype,"padding",void 0),e([r({type:Boolean,reflect:!0})],C.prototype,"sticky",void 0),e([b("navWidth","updated")],C.prototype,"handleNavWidthChange",null),e([b("navState")],C.prototype,"handleNavStateChange",null),e([b("navOpen","updated")],C.prototype,"handleOpenChange",null),C=e([i("nord-layout")],C);var T=C;export{T as default};
|
|
1
|
+
import{i as n,_ as e,s as a,x as t,A as o,e as i}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-4a0dec4a.js";import{o as c}from"./style-map-75ce20b3.js";import{l as v}from"./NavToggle-7e1ba314.js";import{D as p}from"./DirectionController-f35f5476.js";import{E as h}from"./EventController-d99ebeef.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{S as g}from"./SlotController-d733c575.js";import{o as b}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-77258def.js";import{f as y}from"./fsm-50373df9.js";import{c as k}from"./number-c3ab3e95.js";import w from"./Icon.js";import{s as f}from"./Component-253ecb24.js";import{s as z}from"./Sticky-220280e0.js";import"./directive-de55b00a.js";import"./ref-f75a30b7.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"./localization8.js";import"./FocusableMixin-003e1094.js";import"./Button.js";import"./LightDomController-5c53b3f4.js";import"./Spinner.js";import"./if-defined-10508457.js";import"./InputMixin-87012c5a.js";import"./VisuallyHidden.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./IconManager.js";const x=n`: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);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.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)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}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 .n-layout-content{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}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}: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(:not([data-nav=opened],[data-nav=closed])) .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][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgba(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgba(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);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-top-bar-container{position:sticky;inset-block-start:0;z-index:var(--n-index-top-bar)}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgba(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgba(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);opacity:0;visibility:hidden;cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}`;w.registerIcon(v);const j=matchMedia("(min-width: 768px)"),_=function(n,e,a=JSON.stringify,t=JSON.parse){return{get value(){try{const a=localStorage.getItem(n);return a?t(a):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,a(e))}catch(n){}}}}("nord-layout.navWidth",250),S=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 C=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.direction=new p(this),this.events=new h(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.navWidth=_.value,this.isDragging=!1,this.navState=j.matches?"opened":"closed",this.wideScreen=j.matches,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.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(j,"change",this.handleMediaQueryChange)}render(){const{navWidth:n,navState:e,navSlot:a,headerSlot:i,topBarSlot:r,drawerSlot:s,isDragging:d,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return t`<div class="${l({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":i.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":s.hasContent,"n-has-nav":a.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${a.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${a.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"===e,this.startDragging)}" @pointermove="${m(d,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${a.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return t`<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>`}renderNavCollapse(){return t`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){_.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&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(n){this.navState=S.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const a=n.target;(n=>"nord-nav-item"===n.localName)(e=a)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:a}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(a?-30:30));break;case"ArrowRight":this.setNavWidth(e+(a?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}n.preventDefault()}setNavWidth(n){this.navWidth=k(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};C.styles=[f,z,x],e([d(".n-layout-nav",!0)],C.prototype,"navEl",void 0),e([s()],C.prototype,"navWidth",void 0),e([s()],C.prototype,"isDragging",void 0),e([s()],C.prototype,"navState",void 0),e([s()],C.prototype,"wideScreen",void 0),e([r({reflect:!0,type:Boolean,attribute:"nav-open"})],C.prototype,"navOpen",void 0),e([r({reflect:!0})],C.prototype,"padding",void 0),e([r({type:Boolean,reflect:!0})],C.prototype,"sticky",void 0),e([b("navWidth","updated")],C.prototype,"handleNavWidthChange",null),e([b("navState")],C.prototype,"handleNavStateChange",null),e([b("navOpen","updated")],C.prototype,"handleOpenChange",null),C=e([i("nord-layout")],C);var T=C;export{T 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 * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.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 Icon from \"../icon/Icon.js\"\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\nIcon.registerIcon(lockIcon)\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 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 top-bar - Used to place the [Top Bar](../top-bar/) component.\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\n private navSlot = new SlotController(this, \"nav\")\n private drawerSlot = new SlotController(this, \"drawer\")\n private topBarSlot = new SlotController(this, \"top-bar\")\n private headerSlot = new SlotController(this, \"header\")\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-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\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 * 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 this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n }\n\n render() {\n const { navWidth, navState, navSlot, headerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n\n return html`\n <div\n class=${classMap({\n \"n-layout\": true,\n \"n-rtl\": direction.isRTL,\n \"n-dragging\": isDragging,\n \"n-has-header\": headerSlot.hasContent,\n \"n-has-top-bar\": topBarSlot.hasContent,\n \"n-has-drawer\": drawerSlot.hasContent,\n \"n-has-nav\": navSlot.hasContent,\n })}\n style=${styleMap({\n \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\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 ?hidden=${this.isNarrow}\n ></div>\n ${this.renderNavCollapse()}\n </div>\n\n <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n <div class=\"n-top-bar-container\">\n <slot name=\"top-bar\"></slot>\n </div>\n\n <div class=\"n-layout-content\">\n <div class=\"n-sticky\">\n <slot name=\"header\"></slot>\n </div>\n <main>\n <slot></slot>\n </main>\n </div>\n\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 private renderNavCollapse() {\n return html`\n <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n </button>\n `\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 /* ---------------------------------------------\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":["Icon","registerIcon","lockIcon","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","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","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","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","Math","max","event","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","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 * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.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 Icon from \"../icon/Icon.js\"\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\nIcon.registerIcon(lockIcon)\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 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 top-bar - Used to place the [Top Bar](../top-bar/) component.\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\n private navSlot = new SlotController(this, \"nav\")\n private drawerSlot = new SlotController(this, \"drawer\")\n private topBarSlot = new SlotController(this, \"top-bar\")\n private headerSlot = new SlotController(this, \"header\")\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-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\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 * 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 this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n }\n\n render() {\n const { navWidth, navState, navSlot, headerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n\n return html`\n <div\n class=${classMap({\n \"n-layout\": true,\n \"n-rtl\": direction.isRTL,\n \"n-dragging\": isDragging,\n \"n-has-header\": headerSlot.hasContent,\n \"n-has-top-bar\": topBarSlot.hasContent,\n \"n-has-drawer\": drawerSlot.hasContent,\n \"n-has-nav\": navSlot.hasContent,\n })}\n style=${styleMap({\n \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\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 ?hidden=${this.isNarrow}\n ></div>\n ${this.renderNavCollapse()}\n </div>\n\n <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n <div class=\"n-top-bar-container\">\n <slot name=\"top-bar\"></slot>\n </div>\n\n <div class=\"n-layout-content\">\n <div class=\"n-sticky\">\n <slot name=\"header\"></slot>\n </div>\n <main>\n <slot></slot>\n </main>\n </div>\n\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 private renderNavCollapse() {\n return html`\n <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n </button>\n `\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 /* ---------------------------------------------\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":["Icon","registerIcon","lockIcon","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","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","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","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","Math","max","event","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as t,A as s}from"./query-assigned-elements-
|
|
2
|
-
//# sourceMappingURL=LightDomController-
|
|
1
|
+
import{B as t,A as s}from"./query-assigned-elements-2f8275b7.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-5c53b3f4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LightDomController-
|
|
1
|
+
{"version":3,"file":"LightDomController-5c53b3f4.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/Message.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as o,x as r,e as t,s as i}from"./query-assigned-elements-
|
|
1
|
+
import{i as e,_ as o,x as r,e as t,s as i}from"./query-assigned-elements-2f8275b7.js";import{e as n}from"./property-03f59dce.js";import{l as s}from"./if-defined-10508457.js";import{n as a}from"./ref-f75a30b7.js";import{F as l}from"./FocusableMixin-003e1094.js";import{s as c}from"./Component-253ecb24.js";import{s as d}from"./DropdownItem-75a2468a.js";import{LocalizeController as m}from"./LocalizeController.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"./localization8.js";const p=e`:host{--_n-message-border-color:var(--n-message-border-color, var(--n-color-border));padding:var(--n-space-s);border-block-end:1px solid var(--_n-message-border-color)}.n-message{flex-direction:column;gap:var(--n-space-xs);align-items:flex-start;padding-inline-start:var(--n-space-xl);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-line-height-heading);margin:0;color:var(--n-color-text);position:relative}slot[name=footer]{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);line-height:var(--n-line-height-heading)}:host([highlight]) .n-message::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.15;background:var(--n-color-accent);filter:brightness(150%)}.n-unread{position:absolute;min-inline-size:var(--n-size-icon-xxs);min-block-size:var(--n-size-icon-xxs);inset-block-start:calc(var(--n-space-s) + var(--n-space-xs));inset-inline-start:var(--n-space-m);background:var(--n-color-accent);border-radius:var(--n-border-radius-circle)}.n-message:hover .n-unread{background:var(--n-color-text-on-accent)}`;let f=class extends(l(i)){constructor(){super(...arguments),this.localize=new m(this)}render(){return(this.href?e=>r`<a href="${s(this.href)}" ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</a>`:e=>r`<button ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</button>`)(r`<div role="img" class="n-unread" aria-label="${this.localize.term("unreadLabel")}" ?hidden="${!this.unread}"></div><slot></slot><slot name="footer"></slot>`)}};f.styles=[c,d,p],o([n({reflect:!0})],f.prototype,"href",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([t("nord-message")],f);var h=f;export{h as default};
|
|
2
2
|
//# sourceMappingURL=Message.js.map
|
package/lib/Modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as o,s as e,_ as a,x as n,e as i}from"./query-assigned-elements-
|
|
1
|
+
import{i as o,s as e,_ as a,x as n,e as i}from"./query-assigned-elements-2f8275b7.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-253ecb24.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./state-70f38ceb.js";import"./if-defined-10508457.js";import"./directive-de55b00a.js";import"./cond-77258def.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"./localization8.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-header);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,x as t,A as r,e as o}from"./query-assigned-elements-
|
|
1
|
+
import{i as e,_ as i,s as n,x as t,A as r,e as o}from"./query-assigned-elements-2f8275b7.js";import{e as a}from"./property-03f59dce.js";import"./Icon.js";import{s}from"./Component-253ecb24.js";import"./state-70f38ceb.js";import"./if-defined-10508457.js";import"./directive-de55b00a.js";import"./cond-77258def.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";const d=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}[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>`:r}<div role="list" aria-labelledby="${this.heading?"heading":r}"><slot></slot></div>`}};l.styles=[s,d],i([a()],l.prototype,"heading",void 0),l=i([o("nord-nav-group")],l);var p=l;export{p as default};
|
|
2
2
|
//# sourceMappingURL=NavGroup.js.map
|
package/lib/NavItem.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as n,x as t,A as o,e as a,s as i}from"./query-assigned-elements-
|
|
1
|
+
import{i as e,_ as n,x as t,A as o,e as a,s as i}from"./query-assigned-elements-2f8275b7.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./class-map-4a0dec4a.js";import{n as c}from"./ref-f75a30b7.js";import{D as l}from"./DirectionController-f35f5476.js";import{S as v}from"./SlotController-d733c575.js";import{c as d}from"./cond-77258def.js";import{N as p}from"./events-d9666e88.js";import{F as h}from"./FocusableMixin-003e1094.js";import{s as m}from"./Component-253ecb24.js";import{o as f}from"./observe-a9c6dfb6.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const b=e`:host{--_n-nav-item-box-shadow:none}.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;z-index:var(--n-index-default)}.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)}:host([active]) .n-nav-item[aria-expanded]{--_n-nav-item-box-shadow:none;color:var(--n-color-text-weak);font-weight:var(--n-font-weight);background:0 0}:host([active]) .n-nav-item[aria-expanded]:focus-visible{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) .n-nav-item[aria-expanded]::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.15;background:var(--n-color-accent);filter:brightness(150%)}.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-notification);color:#fff;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 u=class extends(h(i)){constructor(){super(...arguments),this.subnavSlot=new v(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}get hasSubNav(){return this.subnavSlot.hasContent}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="${d(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"))}handleActiveChange(){this.active&&!this.hasSubNav&&this.dispatchEvent(new p("activate"))}};u.styles=[m,b],n([r({type:Boolean,reflect:!0})],u.prototype,"active",void 0),n([r()],u.prototype,"icon",void 0),n([r()],u.prototype,"href",void 0),n([r()],u.prototype,"badge",void 0),n([r({type:Boolean})],u.prototype,"open",void 0),n([f("active","updated")],u.prototype,"handleActiveChange",null),u=n([a("nord-nav-item")],u);var g=u;export{g as default};
|
|
2
2
|
//# sourceMappingURL=NavItem.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as o,_ as n,x as t,e as r,s as i}from"./query-assigned-elements-
|
|
2
|
-
//# sourceMappingURL=NavToggle-
|
|
1
|
+
import{i as o,_ as n,x as t,e as r,s as i}from"./query-assigned-elements-2f8275b7.js";import{n as e}from"./ref-f75a30b7.js";import{o as a}from"./class-map-4a0dec4a.js";import{LocalizeController as s}from"./LocalizeController.js";import{D as l}from"./DirectionController-f35f5476.js";import{F as c}from"./FocusableMixin-003e1094.js";import"./Button.js";import g from"./Icon.js";import"./VisuallyHidden.js";import{s as m}from"./Component-253ecb24.js";const d="navigation-toggle-lock";var v=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:d,tags:"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron"});const h="navigation-toggle";var u=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:h,tags:"nordicon navigation hamburger menu toggle navigation three lines"});const p=o`:host{color:var(--n-color-icon);display:inline-flex}nord-button{--n-button-color:currentColor}nord-icon{display:block;transform:translateX(-1px);color:currentColor}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}}`;g.registerIcon(u),g.registerIcon(v);let f=class extends(c(i)){constructor(){super(...arguments),this.direction=new l(this),this.localization=new s(this)}render(){return t`<nord-button variant="plain" ${e(this.focusableRef)} class="${a({"is-rtl":this.direction.isRTL})}"><nord-visually-hidden>${this.localization.term("label")}</nord-visually-hidden><nord-icon size="m" name="${h}"></nord-icon><nord-icon size="m" name="${d}"></nord-icon></nord-button>`}};f.styles=[m,p],f=n([r("nord-nav-toggle")],f);var b=f;export{b as N,v as l};
|
|
2
|
+
//# sourceMappingURL=NavToggle-7e1ba314.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavToggle-
|
|
1
|
+
{"version":3,"file":"NavToggle-7e1ba314.js","sources":["../../icons/lib/assets/navigation-toggle-lock.js","../../icons/lib/assets/navigation-toggle.js","../src/nav-toggle/NavToggle.ts"],"sourcesContent":["export 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>'\nexport const title = \"navigation-toggle-lock\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation arrow right double lock triangle chevron\"\n","export 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>'\nexport const title = \"navigation-toggle\"\nexport const tags = \"nordicon navigation hamburger menu toggle navigation three lines\"\n","import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as unlockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle.js\"\nimport * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\n\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./NavToggle.css\"\n\nIcon.registerIcon(unlockIcon)\nIcon.registerIcon(lockIcon)\n\n/**\n * Nav toggle is meant for hiding and showing the primary navigation.\n * This component is used internally in the Layout component, but can also be\n * used separate to further customize the behavior.\n *\n * @status new\n * @category action\n *\n * @localization label - Accessible label for the nav toggle button.\n */\n@customElement(\"nord-nav-toggle\")\nexport default class NavToggle extends FocusableMixin(LitElement) {\n static styles = [componentStyle, style]\n\n private direction = new DirectionController(this)\n private localization = new LocalizeController<\"nord-nav-toggle\">(this)\n\n render() {\n return html`\n <nord-button variant=\"plain\" ${ref(this.focusableRef)} class=${classMap({ \"is-rtl\": this.direction.isRTL })}>\n <nord-visually-hidden>${this.localization.term(\"label\")}</nord-visually-hidden>\n <nord-icon size=\"m\" name=${unlockIcon.title}></nord-icon>\n <nord-icon size=\"m\" name=${lockIcon.title}></nord-icon>\n </nord-button>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-nav-toggle\": NavToggle\n }\n}\n"],"names":["title","Icon","registerIcon","unlockIcon","lockIcon","NavToggle","FocusableMixin","LitElement","constructor","this","direction","DirectionController","localization","LocalizeController","render","html","ref","focusableRef","classMap","isRTL","term","unlockIcon.title","lockIcon.title","styles","componentStyle","style","__decorate","customElement"],"mappings":"icACO,MAAMA,EAAQ,qEADN,4TAEK,kGCDb,MAAMA,EAAQ,gEADN,0MAEK,ijBCgBpBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cAAwBC,EAAeC,IAAvCC,kCAGLC,KAAAC,UAAY,IAAIC,EAAoBF,MACpCA,KAAAG,aAAe,IAAIC,EAAsCJ,KAWlE,CATCK,SACE,OAAOC,CAAI,gCACsBC,EAAIP,KAAKQ,wBAAuBC,EAAS,CAAE,SAAUT,KAAKC,UAAUS,kCACzEV,KAAKG,aAAaQ,KAAK,4DACpBC,4CACAC,+BAGhC,GAbMjB,EAAAkB,OAAS,CAACC,EAAgBC,GADdpB,EAASqB,EAAA,CAD7BC,EAAc,oBACMtB,SAAAA"}
|
package/lib/NavToggle.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"./query-assigned-elements-
|
|
1
|
+
import"./query-assigned-elements-2f8275b7.js";import"./ref-f75a30b7.js";import"./class-map-4a0dec4a.js";export{N as default}from"./NavToggle-7e1ba314.js";import"./LocalizeController.js";import"./DirectionController-f35f5476.js";import"./FocusableMixin-003e1094.js";import"./Button.js";import"./Icon.js";import"./VisuallyHidden.js";import"./Component-253ecb24.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"./localization8.js";import"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-5c53b3f4.js";import"./cond-77258def.js";import"./Spinner.js";import"./if-defined-10508457.js";import"./InputMixin-87012c5a.js";import"./SlotController-d733c575.js";import"./state-70f38ceb.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";
|
|
2
2
|
//# sourceMappingURL=NavToggle.js.map
|
package/lib/Navigation.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as n,_ as o,s as a,x as e,e as t}from"./query-assigned-elements-
|
|
1
|
+
import{i as n,_ as o,s as a,x as e,e as t}from"./query-assigned-elements-2f8275b7.js";import{S as r}from"./SlotController-d733c575.js";import{s as i}from"./Component-253ecb24.js";import{E as d}from"./EventController-d99ebeef.js";const l=n`:host{--_n-navigation-background-color:var(--n-navigation-background-color, var(--n-color-nav-surface));--_n-navigation-header-block-size:var(--n-navigation-header-block-size, var(--n-space-xxl));--_n-navigation-header-padding-inline:var(--n-navigation-header-padding-inline);--_n-navigation-header-background:var(--n-navigation-header-background, var(--_n-navigation-background-color));--_n-navigation-header-divider:var(--n-navigation-header-divider, 1px solid var(--n-color-border));--_n-navigation-header-color:var(--n-navigation-header-color);--_n-navigation-header-toggle-icon-color:var(--n-navigation-header-toggle-icon-color);--_n-navigation-header-focus-style:var(--n-navigation-header-focus-style, var(--_n-navigation-dropdown-box-shadow));--_n-navigation-dropdown-box-shadow:0 0 0 1px var(--n-color-accent) inset;display:flex;flex-direction:column;block-size:100%;background:var(--_n-navigation-background-color)}.n-navigation-main{display:flex;flex-direction:column;flex:1;overflow-y:auto;overscroll-behavior-y:none}nav{flex:1;padding:var(--n-space-m);padding-block-start:var(--n-space-s)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center;--n-button-text-align:start;--n-button-background-color:transparent;--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-gradient:none}slot[name=header]{--n-button-border-radius:0;--n-button-color:var(--_n-navigation-header-color);--n-button-min-block-size:var(--_n-navigation-header-block-size);--n-select-block-size:var(--n-button-min-block-size);--n-button-font-weight:var(--n-font-weight-active);--n-button-toggle-icon-color:var(--_n-navigation-header-toggle-icon-color);--n-button-padding-inline:var(--_n-navigation-header-padding-inline);block-size:var(--_n-navigation-header-block-size);background-color:var(--_n-navigation-header-background);border-block-end:var(--_n-navigation-header-divider)}slot[name=footer]{--n-button-color:var(--n-color-text-weak);--n-button-padding-inline:var(--n-space-xs);margin:var(--n-space-m)}:is([name=header],[name=footer])::slotted(:not([open]):focus-within){--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:var(--_n-navigation-dropdown-box-shadow)}slot[name=header]::slotted(:not([open], :active):focus-within){--n-button-box-shadow:var(--_n-navigation-header-focus-style)}[name=footer]::slotted(:is(:hover, [open])){--n-button-border-color:var(--n-color-border-hover)}`;let s=class extends a{constructor(){super(...arguments),this.headerSlot=new r(this,"header"),this.events=new d(this),this.handleActivate=n=>{var o,a;const e=n.target,t=new Set;let r=null===(o=e.parentElement)||void 0===o?void 0:o.closest("nord-nav-item");for(;r;)t.add(r),r=null===(a=r.parentElement)||void 0===a?void 0:a.closest("nord-nav-item");for(const n of this.querySelectorAll("nord-nav-item"))if(n!==e){const o=t.has(n);n.open=o,n.active=o}}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"activate",this.handleActivate)}render(){return e`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav><slot name="footer"></slot></div>`}};s.styles=[i,l],s=o([t("nord-navigation")],s);var c=s;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Navigation.js.map
|