@nordhealth/components 3.4.0-alpha.0 → 3.4.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +1557 -1557
- package/lib/{AutocompleteMixin-60503685.js → AutocompleteMixin-a98ada34.js} +2 -2
- package/lib/{AutocompleteMixin-60503685.js.map → AutocompleteMixin-a98ada34.js.map} +1 -1
- package/lib/Avatar.js +1 -1
- package/lib/Avatar.js.map +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-f7e95d9a.js → Calendar-3fd55b5d.js} +2 -2
- package/lib/{Calendar-f7e95d9a.js.map → Calendar-3fd55b5d.js.map} +1 -1
- package/lib/Calendar.js +1 -1
- package/lib/Card.js +1 -1
- package/lib/Checkbox.js +1 -1
- package/lib/CommandMenu.js +1 -1
- package/lib/CommandMenu.js.map +1 -1
- package/lib/CommandMenuAction.js +1 -1
- package/lib/CommandMenuAction.js.map +1 -1
- package/lib/{Component-253ecb24.js → Component-1f694235.js} +2 -2
- package/lib/Component-1f694235.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-75a2468a.js → DropdownItem-4a02675f.js} +2 -2
- package/lib/DropdownItem-4a02675f.js.map +1 -0
- package/lib/DropdownItem.js +1 -1
- package/lib/EmptyState.js +1 -1
- package/lib/Fieldset.js +1 -1
- package/lib/FocusableMixin-186c69a2.js +2 -0
- package/lib/{FocusableMixin-003e1094.js.map → FocusableMixin-186c69a2.js.map} +1 -1
- package/lib/{FormAssociatedMixin-0638b151.js → FormAssociatedMixin-5fedde68.js} +2 -2
- package/lib/{FormAssociatedMixin-0638b151.js.map → FormAssociatedMixin-5fedde68.js.map} +1 -1
- package/lib/{FormField-0783cb5a.js → FormField-3226fb17.js} +2 -2
- package/lib/FormField-3226fb17.js.map +1 -0
- package/lib/Header.js +1 -1
- package/lib/Icon.js +2 -2
- package/lib/Input.js +1 -1
- package/lib/{InputMixin-87012c5a.js → InputMixin-d50cb41a.js} +2 -2
- package/lib/{InputMixin-87012c5a.js.map → InputMixin-d50cb41a.js.map} +1 -1
- package/lib/Layout.js +1 -1
- package/lib/Layout.js.map +1 -1
- package/lib/{LightDomController-5c53b3f4.js → LightDomController-8a770234.js} +2 -2
- package/lib/{LightDomController-5c53b3f4.js.map → LightDomController-8a770234.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-7e1ba314.js → NavToggle-fbd227e5.js} +2 -2
- package/lib/{NavToggle-7e1ba314.js.map → NavToggle-fbd227e5.js.map} +1 -1
- package/lib/NavToggle.js +1 -1
- package/lib/Navigation.js +1 -1
- package/lib/Navigation.js.map +1 -1
- package/lib/Notification.js +1 -1
- package/lib/NotificationGroup.js +1 -1
- package/lib/{NotificationMixin-cea138a7.js → NotificationMixin-5e028561.js} +2 -2
- package/lib/{NotificationMixin-cea138a7.js.map → NotificationMixin-5e028561.js.map} +1 -1
- package/lib/{Popout-1183c22b.js → Popout-6a85e4b6.js} +2 -2
- package/lib/{Popout-1183c22b.js.map → Popout-6a85e4b6.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-bc2098f4.js → SizeMixin-f04ac402.js} +2 -2
- package/lib/{SizeMixin-bc2098f4.js.map → SizeMixin-f04ac402.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-220280e0.js → Sticky-b4e6c315.js} +2 -2
- package/lib/Sticky-b4e6c315.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-b455a6dd.js → TextField-3f901ec8.js} +2 -2
- package/lib/{TextField-b455a6dd.js.map → TextField-3f901ec8.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/TopBar.js.map +1 -1
- package/lib/VisuallyHidden.js +1 -1
- package/lib/bundle.js +5 -5
- package/lib/bundle.js.map +1 -1
- package/lib/{class-map-4a0dec4a.js → class-map-c0d8e1e5.js} +2 -2
- package/lib/{class-map-4a0dec4a.js.map → class-map-c0d8e1e5.js.map} +1 -1
- package/lib/{collection-bba319d3.js → collection-498f2b1f.js} +3 -3
- package/lib/{collection-bba319d3.js.map → collection-498f2b1f.js.map} +1 -1
- package/lib/cond-09498763.js +2 -0
- package/lib/{cond-77258def.js.map → cond-09498763.js.map} +1 -1
- package/lib/{if-defined-10508457.js → if-defined-8a007930.js} +2 -2
- package/lib/{if-defined-10508457.js.map → if-defined-8a007930.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-2f8275b7.js → query-assigned-elements-822fe360.js} +2 -2
- package/lib/query-assigned-elements-822fe360.js.map +1 -0
- package/lib/{ref-f75a30b7.js → ref-6b46e5ea.js} +3 -3
- package/lib/{ref-f75a30b7.js.map → ref-6b46e5ea.js.map} +1 -1
- package/lib/style-map-5b757428.js +7 -0
- package/lib/style-map-5b757428.js.map +1 -0
- package/package.json +2 -2
- package/lib/Component-253ecb24.js.map +0 -1
- package/lib/DropdownItem-75a2468a.js.map +0 -1
- package/lib/FocusableMixin-003e1094.js +0 -2
- package/lib/FormField-0783cb5a.js.map +0 -1
- package/lib/Sticky-220280e0.js.map +0 -1
- package/lib/cond-77258def.js +0 -2
- package/lib/query-assigned-elements-2f8275b7.js.map +0 -1
- package/lib/style-map-75ce20b3.js +0 -7
- package/lib/style-map-75ce20b3.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e}from"./query-assigned-elements-
|
|
2
|
-
//# sourceMappingURL=AutocompleteMixin-
|
|
1
|
+
import{_ as e}from"./query-assigned-elements-822fe360.js";import{e as o}from"./property-03f59dce.js";function t(t){class r extends t{constructor(){super(...arguments),this.autocomplete="off"}}return e([o()],r.prototype,"autocomplete",void 0),r}export{t as A};
|
|
2
|
+
//# sourceMappingURL=AutocompleteMixin-a98ada34.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteMixin-
|
|
1
|
+
{"version":3,"file":"AutocompleteMixin-a98ada34.js","sources":["../src/common/mixins/AutocompleteMixin.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\ntype AutocompleteAttribute =\n | \"off\"\n | \"on\"\n | \"name\"\n | \"honorific-prefix\"\n | \"given-name\"\n | \"additional-name\"\n | \"family-name\"\n | \"honorific-suffix\"\n | \"nickname\"\n | \"email\"\n | \"username\"\n | \"new-password\"\n | \"current-password\"\n | \"one-time-code\"\n | \"organization-title\"\n | \"organization\"\n | \"street-address\"\n | \"address-line1\"\n | \"address-line2\"\n | \"address-line3\"\n | \"address-level4\"\n | \"address-level3\"\n | \"address-level2\"\n | \"address-level1\"\n | \"country\"\n | \"country-name\"\n | \"postal-code\"\n | \"cc-name\"\n | \"cc-given-name\"\n | \"cc-additional-name\"\n | \"cc-family-name\"\n | \"cc-number\"\n | \"cc-exp\"\n | \"cc-exp-month\"\n | \"cc-exp-year\"\n | \"cc-csc\"\n | \"cc-type\"\n | \"transaction-currency\"\n | \"transaction-amount\"\n | \"language\"\n | \"bday\"\n | \"bday-day\"\n | \"bday-month\"\n | \"bday-year\"\n | \"sex\"\n | \"tel\"\n | \"tel-country-code\"\n | \"tel-national\"\n | \"tel-area-code\"\n | \"tel-local\"\n | \"tel-extension\"\n | \"impp\"\n | \"url\"\n | \"photo\"\n\nexport declare class AutocompleteMixinInterface {\n autocomplete: AutocompleteAttribute\n}\n\nexport function AutocompleteMixin<T extends Constructor<LitElement>>(\n superClass: T\n): Constructor<AutocompleteMixinInterface> & T {\n class AutocompleteElement extends superClass {\n /**\n * Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.\n */\n @property() autocomplete: AutocompleteAttribute = \"off\"\n }\n\n return AutocompleteElement\n}\n"],"names":["AutocompleteMixin","superClass","AutocompleteElement","constructor","this","autocomplete","__decorate","property","prototype"],"mappings":"qGAiEM,SAAUA,EACdC,GAEA,MAAMC,UAA4BD,EAAlCE,kCAIcC,KAAYC,aAA0B,KACnD,EAED,OAHcC,EAAA,CAAXC,KAAsDL,EAAAM,UAAA,oBAAA,GAGlDN,CACT"}
|
package/lib/Avatar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as a,_ as r,s as t,x as e,A as o,e as i}from"./query-assigned-elements-
|
|
1
|
+
import{i as a,_ as r,s as t,x as e,A as o,e as i}from"./query-assigned-elements-822fe360.js";import{e as n}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{s as v}from"./Component-1f694235.js";import{f as l}from"./fsm-50373df9.js";import{o as c}from"./observe-a9c6dfb6.js";import"./VisuallyHidden.js";import"./Icon.js";import"./if-defined-8a007930.js";import"./directive-de55b00a.js";import"./cond-09498763.js";import"./IconManager.js";const d=a`:host{--_n-avatar-color:var(--n-avatar-color, var(--n-color-text-weaker));--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-l));--_n-avatar-box-shadow:var(--n-avatar-box-shadow, none);--_n-avatar-border-radius:var(--n-border-radius-circle);--_n-avatar-font-size:var(--n-font-size-xs);--_n-avatar-text-color:var(--n-color-text-on-accent);display:inline-flex;block-size:var(--_n-avatar-size);inline-size:var(--_n-avatar-size)}:host(:empty) .n-avatar-inner,:host(:not(:empty)) svg{display:none}:host(:empty){--_n-avatar-color:var(--n-avatar-color, var(--n-color-border))}.n-avatar{background:var(--_n-avatar-color);border-radius:var(--_n-avatar-border-radius);box-shadow:var(--_n-avatar-box-shadow);overflow:hidden;inline-size:100%;block-size:100%;display:grid;place-items:center;color:var(--_n-avatar-text-color);font-size:var(--_n-avatar-font-size);font-weight:var(--n-font-weight-active)}img,svg{inline-size:100%;block-size:auto;object-fit:cover}nord-icon{--_n-icon-size:calc(var(--_n-avatar-size) / 1.6)}.n-loading{display:none}:host([size="s"]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xs) * 2));--_n-avatar-font-size:calc(var(--n-font-size-xs) / 1.1)}:host([size="l"]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xl));--_n-avatar-font-size:var(--n-font-size-m)}:host([size=xl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xl) + var(--n-size-icon-s)));--_n-avatar-font-size:var(--n-font-size-xl)}:host([size=xxl]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xxl));--_n-avatar-font-size:var(--n-font-size-xxl)}:host([size=xxxl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xxl) + var(--n-size-icon-xl)));--_n-avatar-font-size:var(--n-font-size-xxxl)}:host([variant=square]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-accent));--_n-avatar-box-shadow:var(--n-avatar-box-shadow, var(--n-box-shadow), 0 0 0 1px rgba(255, 255, 255, 0.6));--_n-avatar-border-radius:var(--n-border-radius)}:host([icon]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-surface-lowered));--_n-avatar-text-color:var(--n-color-text)}`,{transition:h}=l({initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}});let z=class extends t{constructor(){super(...arguments),this.state="initial",this.size="m",this.name="",this.icon="",this.variant="default"}render(){return e`<div class="n-avatar">${"initial"!==this.state?this.renderImage():o} ${"loaded"!==this.state?this.renderFallback():o}</div>`}handleSrcChange(){const a=this.src?"src-set":"src-clear";this.state=h(this.state,a)}renderImage(){return this.src?e`<slot hidden></slot><img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:o}renderFallback(){return e`<nord-visually-hidden>${this.name}</nord-visually-hidden><div class="n-avatar-inner" aria-hidden="true"><slot></slot></div>${this.icon?e`<nord-icon name="${this.icon}"></nord-icon>`:e`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--_n-avatar-color)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="#fff" opacity=".7"><circle cx="13.5" cy="30" r="13"></circle><circle cx="13.5" cy="11" r="5"></circle></g></svg>`}`}handleLoad(){this.state=h(this.state,"load")}handleError(){this.state=h(this.state,"error")}};z.styles=[v,d],r([s()],z.prototype,"state",void 0),r([n({reflect:!0})],z.prototype,"size",void 0),r([n({reflect:!0})],z.prototype,"src",void 0),r([n()],z.prototype,"name",void 0),r([n()],z.prototype,"icon",void 0),r([n({reflect:!0})],z.prototype,"variant",void 0),r([c("src")],z.prototype,"handleSrcChange",null),z=r([i("nord-avatar")],z);var f=z;export{f as default};
|
|
2
2
|
//# sourceMappingURL=Avatar.js.map
|
package/lib/Avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm, States } from \"../common/fsm.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../icon/Icon.js\"\n\nconst { transition } = fsm({\n initial: {\n \"src-set\": \"loading\",\n },\n loading: {\n load: \"loaded\",\n error: \"initial\",\n \"src-clear\": \"initial\",\n },\n loaded: {\n \"src-set\": \"loading\",\n \"src-clear\": \"initial\",\n },\n})\n\n/**\n * Avatar is used for showing a thumbnail representation of a single user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status ready\n * @category image\n *\n * @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).\n * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).\n * @cssprop [--n-avatar-box-shadow=none] - Controls the box shadow for the avatar.\n */\n\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n static styles = [componentStyle, style]\n\n @state() private state: States<typeof transition> = \"initial\"\n\n /**\n * The size of the avatar.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | \"xxxl\" = \"m\"\n\n /**\n * The URL of the avatar image uploaded by the user.\n */\n @property({ reflect: true }) src?: string\n\n /**\n * The name of the person or entity.\n */\n @property() name: string = \"\"\n\n /**\n * The fallback icon.\n */\n @property() icon: string = \"\"\n\n /**\n * The style variant of the avatar.\n */\n @property({ reflect: true }) variant: \"default\" | \"square\" = \"default\"\n\n render() {\n return html`\n <div class=\"n-avatar\">\n ${this.state !== \"initial\" ? this.renderImage() : nothing}\n ${this.state !== \"loaded\" ? this.renderFallback() : nothing}\n </div>\n `\n }\n\n @observe(\"src\")\n protected handleSrcChange() {\n const event = this.src ? \"src-set\" : \"src-clear\"\n this.state = transition(this.state, event)\n }\n\n protected renderImage() {\n return this.src\n ? html`\n <slot hidden></slot>\n <img\n class=\"n-${this.state}\"\n src=${this.src}\n @load=${this.handleLoad}\n @error=${this.handleError}\n alt=${this.name || \"\"}\n />\n `\n : nothing\n }\n\n protected renderFallback() {\n return html`\n <nord-visually-hidden>${this.name}</nord-visually-hidden>\n <div class=\"n-avatar-inner\" aria-hidden=\"true\">\n <slot></slot>\n </div>\n ${this.icon\n ? html`<nord-icon name=\"${this.icon}\"></nord-icon>`\n : html`\n <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 27 27\">\n <rect fill=\"var(--_n-avatar-color)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n <g fill=\"#fff\" opacity=\".7\">\n <circle cx=\"13.5\" cy=\"30\" r=\"13\"></circle>\n <circle cx=\"13.5\" cy=\"11\" r=\"5\"></circle>\n </g>\n </svg>\n `}\n `\n }\n\n private handleLoad() {\n this.state = transition(this.state, \"load\")\n }\n\n private handleError() {\n this.state = transition(this.state, \"error\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-avatar\": Avatar\n }\n}\n"],"names":["transition","fsm","initial","loading","load","error","loaded","Avatar","LitElement","constructor","this","state","size","name","icon","variant","render","html","renderImage","nothing","renderFallback","handleSrcChange","event","src","handleLoad","handleError","styles","componentStyle","style","__decorate","prototype","property","reflect","observe","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm, States } from \"../common/fsm.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../icon/Icon.js\"\n\nconst { transition } = fsm({\n initial: {\n \"src-set\": \"loading\",\n },\n loading: {\n load: \"loaded\",\n error: \"initial\",\n \"src-clear\": \"initial\",\n },\n loaded: {\n \"src-set\": \"loading\",\n \"src-clear\": \"initial\",\n },\n})\n\n/**\n * Avatar is used for showing a thumbnail representation of a single user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status ready\n * @category image\n *\n * @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).\n * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).\n * @cssprop [--n-avatar-box-shadow=none] - Controls the box shadow for the avatar.\n */\n\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n static styles = [componentStyle, style]\n\n @state() private state: States<typeof transition> = \"initial\"\n\n /**\n * The size of the avatar.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | \"xxxl\" = \"m\"\n\n /**\n * The URL of the avatar image uploaded by the user.\n */\n @property({ reflect: true }) src?: string\n\n /**\n * The name of the person or entity.\n */\n @property() name: string = \"\"\n\n /**\n * The fallback icon.\n */\n @property() icon: string = \"\"\n\n /**\n * The style variant of the avatar.\n */\n @property({ reflect: true }) variant: \"default\" | \"square\" = \"default\"\n\n render() {\n return html`\n <div class=\"n-avatar\">\n ${this.state !== \"initial\" ? this.renderImage() : nothing}\n ${this.state !== \"loaded\" ? this.renderFallback() : nothing}\n </div>\n `\n }\n\n @observe(\"src\")\n protected handleSrcChange() {\n const event = this.src ? \"src-set\" : \"src-clear\"\n this.state = transition(this.state, event)\n }\n\n protected renderImage() {\n return this.src\n ? html`\n <slot hidden></slot>\n <img\n class=\"n-${this.state}\"\n src=${this.src}\n @load=${this.handleLoad}\n @error=${this.handleError}\n alt=${this.name || \"\"}\n />\n `\n : nothing\n }\n\n protected renderFallback() {\n return html`\n <nord-visually-hidden>${this.name}</nord-visually-hidden>\n <div class=\"n-avatar-inner\" aria-hidden=\"true\">\n <slot></slot>\n </div>\n ${this.icon\n ? html`<nord-icon name=\"${this.icon}\"></nord-icon>`\n : html`\n <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 27 27\">\n <rect fill=\"var(--_n-avatar-color)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n <g fill=\"#fff\" opacity=\".7\">\n <circle cx=\"13.5\" cy=\"30\" r=\"13\"></circle>\n <circle cx=\"13.5\" cy=\"11\" r=\"5\"></circle>\n </g>\n </svg>\n `}\n `\n }\n\n private handleLoad() {\n this.state = transition(this.state, \"load\")\n }\n\n private handleError() {\n this.state = transition(this.state, \"error\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-avatar\": Avatar\n }\n}\n"],"names":["transition","fsm","initial","loading","load","error","loaded","Avatar","LitElement","constructor","this","state","size","name","icon","variant","render","html","renderImage","nothing","renderFallback","handleSrcChange","event","src","handleLoad","handleError","styles","componentStyle","style","__decorate","prototype","property","reflect","observe","customElement"],"mappings":"uhFAUMA,WAAEA,GAAeC,EAAI,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAM,SACNC,MAAO,UACP,YAAa,WAEfC,OAAQ,CACN,UAAW,UACX,YAAa,aAiBF,IAAMC,EAAN,cAAqBC,EAArBC,kCAGIC,KAAKC,MAA8B,UAKvBD,KAAIE,KAA4C,IAUjEF,KAAIG,KAAW,GAKfH,KAAII,KAAW,GAKEJ,KAAOK,QAAyB,SA2D9D,CAzDCC,SACE,OAAOC,CAAI,yBAEU,YAAfP,KAAKC,MAAsBD,KAAKQ,cAAgBC,KACjC,WAAfT,KAAKC,MAAqBD,KAAKU,iBAAmBD,SAGzD,CAGSE,kBACR,MAAMC,EAAQZ,KAAKa,IAAM,UAAY,YACrCb,KAAKC,MAAQX,EAAWU,KAAKC,MAAOW,EACrC,CAESJ,cACR,OAAOR,KAAKa,IACRN,CAAI,qCAGWP,KAAKC,eACVD,KAAKa,eACHb,KAAKc,uBACJd,KAAKe,qBACRf,KAAKG,MAAQ,OAGvBM,CACL,CAESC,iBACR,OAAOH,CAAI,yBACeP,KAAKG,gGAI3BH,KAAKI,KACHG,CAAI,oBAAoBP,KAAKI,qBAC7BG,CAAI,kSAUX,CAEOO,aACNd,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,OACrC,CAEOc,cACNf,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,QACrC,GArFMJ,EAAAmB,OAAS,CAACC,EAAgBC,GAEhBC,EAAA,CAAhBlB,KAA4DJ,EAAAuB,UAAA,aAAA,GAKhCD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAA2DzB,EAAAuB,UAAA,YAAA,GAKnDD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAoBzB,EAAAuB,UAAA,WAAA,GAK7BD,EAAA,CAAXE,KAA4BxB,EAAAuB,UAAA,YAAA,GAKjBD,EAAA,CAAXE,KAA4BxB,EAAAuB,UAAA,YAAA,GAKAD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAiDzB,EAAAuB,UAAA,eAAA,GAY5DD,EAAA,CADTI,EAAQ,QAIR1B,EAAAuB,UAAA,kBAAA,MA3CkBvB,EAAMsB,EAAA,CAD1BK,EAAc,gBACM3B,SAAAA"}
|
package/lib/Badge.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as o,_ as r,s as n,x as a,e}from"./query-assigned-elements-
|
|
1
|
+
import{i as o,_ as r,s as n,x as a,e}from"./query-assigned-elements-822fe360.js";import{e as t}from"./property-03f59dce.js";import{s}from"./Component-1f694235.js";const c=o`:host{--_n-badge-background-color:var(--n-color-text-neutral);--_n-badge-chip-color:var(--n-color-status-neutral-weak);--_n-badge-border-color:var(--n-color-border-neutral);display:inline;vertical-align:middle}.n-badge{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;border-radius:var(--n-border-radius-pill);border:1px solid var(--_n-badge-border-color);background:var(--_n-badge-chip-color);font-size:var(--n-font-size-s);font-family:var(--n-font-family);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height);letter-spacing:0;padding-block-start:calc(var(--n-space-xs)/ 6);padding-block-end:calc(var(--n-space-xs)/ 6);padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s);color:var(--_n-badge-background-color);gap:var(--n-space-xs);align-items:center;display:inline-flex;white-space:nowrap;position:relative}:host(:is([variant=success],[type=success])){--_n-badge-chip-color:var(--n-color-status-success-weak);--_n-badge-border-color:var(--n-color-border-success);--_n-badge-background-color:var(--n-color-text-success)}:host(:is([variant=warning],[type=warning])){--_n-badge-chip-color:var(--n-color-status-warning-weak);--_n-badge-border-color:var(--n-color-border-warning);--_n-badge-background-color:var(--n-color-text-warning)}:host(:is([variant=highlight],[type=highlight])){--_n-badge-chip-color:var(--n-color-status-highlight-weak);--_n-badge-border-color:var(--n-color-border-highlight);--_n-badge-background-color:var(--n-color-text-highlight)}:host(:is([variant=info],[type=info],[type=progress])){--_n-badge-chip-color:var(--n-color-status-info-weak);--_n-badge-border-color:var(--n-color-border-info);--_n-badge-background-color:var(--n-color-text-info)}:host(:is([variant=danger],[type=danger])){--_n-badge-chip-color:var(--n-color-status-danger-weak);--_n-badge-border-color:var(--n-color-border-danger);--_n-badge-background-color:var(--n-color-text-danger)}:host([strong]){--_n-badge-chip-color:var(--n-color-status-neutral);--_n-badge-border-color:var(--n-color-border-neutral);--_n-badge-background-color:var(--n-color-text-neutral-strong)}:host(:is([variant=success],[type=success])[strong]){--_n-badge-chip-color:var(--n-color-status-success);--_n-badge-border-color:var(--n-color-status-success);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=warning],[type=warning])[strong]){--_n-badge-chip-color:var(--n-color-status-warning);--_n-badge-border-color:var(--n-color-status-warning);--_n-badge-background-color:var(--n-color-text-warning-strong)}:host(:is([variant=highlight],[type=highlight])[strong]){--_n-badge-chip-color:var(--n-color-status-highlight);--_n-badge-border-color:var(--n-color-status-highlight);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=info],[type=info],[type=progress])[strong]){--_n-badge-chip-color:var(--n-color-status-info);--_n-badge-border-color:var(--n-color-status-info);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=danger],[type=danger])[strong]){--_n-badge-chip-color:var(--n-color-status-danger);--_n-badge-border-color:var(--n-color-status-danger);--_n-badge-background-color:var(--n-color-text-on-accent)}::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-xxs);transform:translateY(-.5px)}`;let l=class extends n{constructor(){super(...arguments),this.strong=!1}render(){return a`<span class="n-badge"><slot name="icon"></slot><slot></slot></span>`}};l.styles=[s,c],r([t({reflect:!0})],l.prototype,"type",void 0),r([t({reflect:!0})],l.prototype,"variant",void 0),r([t({reflect:!0,type:Boolean})],l.prototype,"strong",void 0),l=r([e("nord-badge")],l);var i=l;export{i as default};
|
|
2
2
|
//# sourceMappingURL=Badge.js.map
|
package/lib/Banner.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as r,_ as n,s as
|
|
1
|
+
import{i as r,_ as n,s as o,x as e,e as a}from"./query-assigned-elements-822fe360.js";import{e as t}from"./property-03f59dce.js";import c from"./Icon.js";import{s}from"./Component-1f694235.js";import"./state-70f38ceb.js";import"./if-defined-8a007930.js";import"./directive-de55b00a.js";import"./cond-09498763.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";const i="interface-help";var l=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z" fill="currentColor"/></svg>',title:i,tags:"nordicon interface help speech bubble support circle round question mark"});const d="interface-warning";var b=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z" fill="currentColor"/></svg>',title:d,tags:"nordicon interface warning exclamation mark triangle shape alert error"});const v="interface-info";var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z" fill="currentColor"/></svg>',title:v,tags:"nordicon interface info circle round alert notice information"});const g="interface-checked-circle";var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z" fill="currentColor"/></svg>',title:g,tags:"nordicon interface circle round checked checkmark ready done success"});const u=r`:host{--_n-banner-box-shadow:var(--n-banner-box-shadow, none);--_n-banner-border-radius:var(--n-banner-border-radius, var(--n-border-radius));--_n-banner-color:var(--n-color-text-info);--_n-banner-background:var(--n-color-status-info-weak);--_n-banner-border-color:var(--n-color-border-info)}.n-banner{background:var(--_n-banner-background);border:1px solid var(--_n-banner-border-color);border-radius:var(--_n-banner-border-radius);box-shadow:var(--_n-banner-box-shadow);padding:calc(var(--n-space-m)/ 1.25) var(--n-space-m);margin:0;inline-size:100%}.n-banner-content{inline-size:calc(100% - calc(var(--n-space-m) * 2));color:var(--_n-banner-color)}nord-icon{transform:translateY(2px) translateX(2px);color:var(--_n-banner-color)}::slotted(a){color:var(--_n-banner-color)!important;text-decoration:underline!important}::slotted(p){color:var(--_n-banner-color)!important;margin:0!important}:host([variant=success]){--_n-banner-color:var(--n-color-text-success);--_n-banner-background:var(--n-color-status-success-weak);--_n-banner-border-color:var(--n-color-border-success)}:host([variant=danger]){--_n-banner-color:var(--n-color-text-danger);--_n-banner-background:var(--n-color-status-danger-weak);--_n-banner-border-color:var(--n-color-border-danger)}:host([variant=warning]){--_n-banner-color:var(--n-color-text-warning);--_n-banner-background:var(--n-color-status-warning-weak);--_n-banner-border-color:var(--n-color-border-warning)}`;c.registerIcon(l),c.registerIcon(b),c.registerIcon(m),c.registerIcon(p);const f={warning:i,danger:d,info:v,success:g};let _=class extends o{constructor(){super(...arguments),this.variant="info"}render(){const r=f[this.variant]||f.info;return e`<div class="n-banner" role="alert"><nord-stack align-items="start" direction="horizontal"><nord-icon name="${r}" size="m"></nord-icon><div class="n-banner-content"><slot></slot></div></nord-stack></div>`}};_.styles=[s,u],n([t({reflect:!0})],_.prototype,"variant",void 0),_=n([a("nord-banner")],_);var w=_;export{w as default};
|
|
2
2
|
//# sourceMappingURL=Banner.js.map
|
package/lib/Banner.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sources":["../../icons/lib/assets/interface-help.js","../../icons/lib/assets/interface-warning.js","../../icons/lib/assets/interface-info.js","../../icons/lib/assets/interface-checked-circle.js","../src/banner/Banner.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-help\"\nexport const tags = \"nordicon interface help speech bubble support circle round question mark\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-warning\"\nexport const tags = \"nordicon interface warning exclamation mark triangle shape alert error\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-info\"\nexport const tags = \"nordicon interface info circle round alert notice information\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-checked-circle\"\nexport const tags = \"nordicon interface circle round checked checkmark ready done success\"\n","import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport * as warningIcon from \"@nordhealth/icons/lib/assets/interface-help.js\"\nimport * as dangerIcon from \"@nordhealth/icons/lib/assets/interface-warning.js\"\nimport * as infoIcon from \"@nordhealth/icons/lib/assets/interface-info.js\"\nimport * as successIcon from \"@nordhealth/icons/lib/assets/interface-checked-circle.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Banner.css\"\n\nIcon.registerIcon(warningIcon)\nIcon.registerIcon(dangerIcon)\nIcon.registerIcon(infoIcon)\nIcon.registerIcon(successIcon)\n\nconst iconMap: Record<Banner[\"variant\"], string> = {\n warning: warningIcon.title,\n danger: dangerIcon.title,\n info: infoIcon.title,\n success: successIcon.title,\n}\n\n/**\n * Banner informs users about important changes or conditions in the\n * interface. Use this component if you need to communicate to users\n * in a prominent way.\n *\n * @status ready\n * @category feedback\n * @slot - default slot\n *\n * @cssprop [--n-banner-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-banner-box-shadow=var(--n-box-shadow-card)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n */\n@customElement(\"nord-banner\")\nexport default class Banner extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * The style variant of the banner.\n */\n @property({ reflect: true }) variant: \"info\" | \"danger\" | \"success\" | \"warning\" = \"info\"\n\n render() {\n const icon = iconMap[this.variant] || iconMap.info\n\n return html`\n <div class=\"n-banner\" role=\"alert\">\n <nord-stack align-items=\"start\" direction=\"horizontal\">\n <nord-icon name=${icon} size=\"m\"></nord-icon>\n <div class=\"n-banner-content\">\n <slot></slot>\n </div>\n </nord-stack>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-banner\": Banner\n }\n}\n"],"names":["title","Icon","registerIcon","warningIcon","dangerIcon","infoIcon","successIcon","iconMap","warning","danger","info","success","successIcon.title","Banner","LitElement","constructor","this","variant","render","icon","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../../icons/lib/assets/interface-help.js","../../icons/lib/assets/interface-warning.js","../../icons/lib/assets/interface-info.js","../../icons/lib/assets/interface-checked-circle.js","../src/banner/Banner.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-help\"\nexport const tags = \"nordicon interface help speech bubble support circle round question mark\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-warning\"\nexport const tags = \"nordicon interface warning exclamation mark triangle shape alert error\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-info\"\nexport const tags = \"nordicon interface info circle round alert notice information\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-checked-circle\"\nexport const tags = \"nordicon interface circle round checked checkmark ready done success\"\n","import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport * as warningIcon from \"@nordhealth/icons/lib/assets/interface-help.js\"\nimport * as dangerIcon from \"@nordhealth/icons/lib/assets/interface-warning.js\"\nimport * as infoIcon from \"@nordhealth/icons/lib/assets/interface-info.js\"\nimport * as successIcon from \"@nordhealth/icons/lib/assets/interface-checked-circle.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Banner.css\"\n\nIcon.registerIcon(warningIcon)\nIcon.registerIcon(dangerIcon)\nIcon.registerIcon(infoIcon)\nIcon.registerIcon(successIcon)\n\nconst iconMap: Record<Banner[\"variant\"], string> = {\n warning: warningIcon.title,\n danger: dangerIcon.title,\n info: infoIcon.title,\n success: successIcon.title,\n}\n\n/**\n * Banner informs users about important changes or conditions in the\n * interface. Use this component if you need to communicate to users\n * in a prominent way.\n *\n * @status ready\n * @category feedback\n * @slot - default slot\n *\n * @cssprop [--n-banner-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-banner-box-shadow=var(--n-box-shadow-card)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n */\n@customElement(\"nord-banner\")\nexport default class Banner extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * The style variant of the banner.\n */\n @property({ reflect: true }) variant: \"info\" | \"danger\" | \"success\" | \"warning\" = \"info\"\n\n render() {\n const icon = iconMap[this.variant] || iconMap.info\n\n return html`\n <div class=\"n-banner\" role=\"alert\">\n <nord-stack align-items=\"start\" direction=\"horizontal\">\n <nord-icon name=${icon} size=\"m\"></nord-icon>\n <div class=\"n-banner-content\">\n <slot></slot>\n </div>\n </nord-stack>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-banner\": Banner\n }\n}\n"],"names":["title","Icon","registerIcon","warningIcon","dangerIcon","infoIcon","successIcon","iconMap","warning","warningIcon.title","danger","dangerIcon.title","info","infoIcon.title","success","successIcon.title","Banner","LitElement","constructor","this","variant","render","icon","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"gXACO,MAAMA,EAAQ,6DADN,qfAEK,6ECDb,MAAMA,EAAQ,gEADN,shBAEK,2ECDb,MAAMA,EAAQ,6DADN,yUAEK,kECDb,MAAMA,EAAQ,uEADN,yXAEK,o/CCSpBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAClBJ,EAAKC,aAAaI,GAElB,MAAMC,EAA6C,CACjDC,QAASC,EACTC,OAAQC,EACRC,KAAMC,EACNC,QAASC,GAgBI,IAAMC,EAAN,cAAqBC,EAArBC,kCAMgBC,KAAOC,QAA8C,MAgBnF,CAdCC,SACE,MAAMC,EAAOf,EAAQY,KAAKC,UAAYb,EAAQK,KAE9C,OAAOW,CAAI,8GAGaD,8FAOzB,GApBMN,EAAAQ,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmEb,EAAAc,UAAA,eAAA,GANrEd,EAAMW,EAAA,CAD1BI,EAAc,gBACMf,SAAAA"}
|
package/lib/Button.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as o,x as t,A as n,_ as r,e as a,s as e}from"./query-assigned-elements-2f8275b7.js";import{e as i}from"./property-03f59dce.js";import{e as s,n as l}from"./ref-f75a30b7.js";import{E as b}from"./EventController-d99ebeef.js";import{L as d}from"./LightDomController-5c53b3f4.js";import{c}from"./cond-77258def.js";import"./Spinner.js";import{F as u}from"./FocusableMixin-003e1094.js";import{I as v}from"./InputMixin-87012c5a.js";import{s as h}from"./Component-253ecb24.js";import{S as p}from"./SlotController-d733c575.js";import"./directive-de55b00a.js";import"./if-defined-10508457.js";const g=o`:host{--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-s));--_n-button-gap:var(--n-button-gap, var(--n-space-s));--_n-button-gradient:var(--n-button-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button));--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-strong));--_n-button-text-align:var(--n-button-text-align, center);--_n-button-box-shadow:var(--n-button-box-shadow, var(--n-box-shadow));--_n-button-color:var(--n-button-color, var(--n-color-text));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-m) / 1.2));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-m));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight));--_n-button-min-block-size:var(--n-button-min-block-size, var(--n-space-xl));--_n-button-toggle-icon-color:var(--n-button-toggle-icon-color, var(--n-color-icon));--_n-button-overflow:var(--n-button-overflow, hidden);--_n-button-opacity:1;--_n-button-border-style:solid;--_n-button-inline-size:fit-content;--_n-button-padding-block:calc(var(--n-space-s) / 1.6);--_n-button-icon-size:var(--n-size-icon-s);display:inline-block}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--_n-button-background-color);opacity:var(--_n-button-opacity);border-radius:var(--_n-button-border-radius);border:1px var(--_n-button-border-style) var(--_n-button-border-color);box-shadow:var(--_n-button-box-shadow);color:var(--_n-button-color);cursor:pointer;display:flex;gap:var(--_n-button-gap);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-button-font-size);font-weight:var(--_n-button-font-weight);line-height:var(--n-line-height-form);margin:0;min-block-size:var(--_n-button-min-block-size);padding:var(--_n-button-padding-block) var(--_n-button-padding-inline);text-align:var(--_n-button-text-align);text-decoration:none;transition:var(--n-transition-quickly);transition-property:background-color,opacity,color,box-shadow,border-color;-webkit-user-select:none;user-select:none;position:relative;inline-size:var(--_n-button-inline-size)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--_n-button-gradient);border-radius:var(--_n-button-border-radius);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--_n-button-inline-size:100%;display:block}.n-content{flex:1;overflow:var(--_n-button-overflow);text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-button:focus{outline:0}.n-button:focus-visible{--_n-button-border-color:var(--n-button-border-color, var(--n-color-accent));--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow));--_n-button-border-style:solid}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active))}:host([variant=primary]),:host([variant=primary]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-accent))}:host([variant=primary]) .n-button:hover{filter:brightness(93%)}:host([variant=primary]) .n-button:focus{--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-surface), 0 0 0 3px var(--_n-button-border-color))}:host([variant=dashed]){--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weaker));--_n-button-border-style:dashed}:host([variant=dashed]) .n-button:hover{--_n-button-color:var(--n-button-color, var(--n-color-text))}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--_n-button-box-shadow:var(--n-button-box-shadow, none)}:host([variant=plain]),:host([variant=plain]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active))}:host([variant=danger]),:host([variant=danger]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-status-danger))}:host([variant=danger]) .n-button:hover{filter:brightness(93%)}:host([variant=danger]) .n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-status-danger));--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-surface), 0 0 0 3px var(--n-color-status-danger))}:host([disabled]){--_n-button-border-color:var(--n-button-border-color, var(--_n-button-background-color));--_n-button-background-color:var(--n-button-background-color, var(--n-color-border));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weaker));--_n-button-opacity:0.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}.n-button-spinner{position:absolute;transform:translateX(-50%) translateY(-50%);inset-block-start:50%;inset-inline-start:50%}:host([loading]:not([href])){pointer-events:none}:host([loading]:not([href])) .n-content,:host([loading]:not([href])) ::slotted([slot=end]),:host([loading]:not([href])) ::slotted([slot=start]){opacity:0}:host([size="s"]){--_n-button-gap:var(--n-button-gap, var(--n-space-xs));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-s) + 1px));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-s));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-l) + var(--n-space-xs)));--_n-button-padding-block:calc(var(--n-space-xs) - 1px);--_n-button-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-l) / 1.3));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-l));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-xxl) - var(--n-space-l)));--_n-button-icon-size:var(--n-size-icon-m)}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}:host(:not([variant=primary],[variant=danger])) ::slotted(nord-icon){color:var(--n-color-icon)}:host(:not([variant=primary],[variant=danger])) .n-toggle-icon{color:var(--_n-button-toggle-icon-color)}slot:not([name])::slotted(nord-icon){transform:translateY(1px)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-button-icon-size)}`;let f=class extends(v(u(e))){constructor(){super(...arguments),this.defaultSlot=new p(this),this.buttonRef=s(),this.events=new b(this),this.lightDom=new d(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.loading=!1,this.handleOuterClick=o=>{o.composedPath().some((o=>o===this.focusableRef.value||o===this.buttonRef.value))||o.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"click",this.handleOuterClick,!0)}render(){var o;const r="toggle"===(null===(o=this.assignedSlot)||void 0===o?void 0:o.name),a=this.defaultSlot.assigned.some((o=>"nord-icon"===o.localName)),e=r&&!a&&!this.href,i=t`<slot name="start"></slot><div class="n-content"><slot></slot></div><nord-spinner class="n-button-spinner" color="currentColor" ?hidden="${!this.loading||Boolean(this.href)}"></nord-spinner><slot name="end">${e?t`<nord-icon name="interface-dropdown-small" class="n-toggle-icon"></nord-icon>`:n}</slot>`;return this.href?this.renderLink(i):this.renderButton(i)}renderLink(o){return t`<a ${l(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${c(this.disabled,n,this.href)}" tabindex="${c(this.disabled,"-1")}" aria-disabled="${c(this.disabled,"true")}" role="${c(this.disabled,"link")}">${o}</a>`}renderButton(o){return t`<slot name="proxy" @slotchange="${this.handleProxyChange}"></slot><button ${l(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${c(this.name)}" value="${c(this.value)}" @click="${this.handleClick}" aria-disabled="${c(this.loading,"true")}" aria-expanded="${c(this.accessibleExpanded)}" aria-haspopup="${c(this.accessibleHasPopup)}">${o}</button>`}renderLightDom(){return this.href||!this.form?n:t`<button ${l(this.buttonRef)} slot="proxy" name="${c(this.name)}" value="${c(this.value)}" ?disabled="${this.disabled}" form="${c(this._formId)}" type="${this.type}"></button>`}handleClick(o){this.buttonRef.value&&(o.stopPropagation(),this.buttonRef.value.click())}handleProxyChange(o){const t=o.target,n=this.buttonRef.value;n&&n.assignedSlot!==t&&this.appendChild(n)}};f.styles=[h,g],r([i({reflect:!0})],f.prototype,"variant",void 0),r([i({reflect:!0})],f.prototype,"type",void 0),r([i({reflect:!0})],f.prototype,"size",void 0),r([i({attribute:"aria-expanded"})],f.prototype,"accessibleExpanded",void 0),r([i({attribute:"aria-haspopup"})],f.prototype,"accessibleHasPopup",void 0),r([i({reflect:!0})],f.prototype,"href",void 0),r([i({type:Boolean})],f.prototype,"download",void 0),r([i()],f.prototype,"target",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"loading",void 0),f=r([a("nord-button")],f);var _=f;export{_ as default};
|
|
1
|
+
import{i as o,x as t,A as n,_ as r,e as a,s as e}from"./query-assigned-elements-822fe360.js";import{e as i}from"./property-03f59dce.js";import{e as s,n as l}from"./ref-6b46e5ea.js";import{E as b}from"./EventController-d99ebeef.js";import{L as d}from"./LightDomController-8a770234.js";import{c}from"./cond-09498763.js";import"./Spinner.js";import{F as u}from"./FocusableMixin-186c69a2.js";import{I as v}from"./InputMixin-d50cb41a.js";import{s as h}from"./Component-1f694235.js";import{S as p}from"./SlotController-d733c575.js";import"./directive-de55b00a.js";import"./if-defined-8a007930.js";const g=o`:host{--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-s));--_n-button-gap:var(--n-button-gap, var(--n-space-s));--_n-button-gradient:var(--n-button-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button));--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-strong));--_n-button-text-align:var(--n-button-text-align, center);--_n-button-box-shadow:var(--n-button-box-shadow, var(--n-box-shadow));--_n-button-color:var(--n-button-color, var(--n-color-text));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-m) / 1.2));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-m));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight));--_n-button-min-block-size:var(--n-button-min-block-size, var(--n-space-xl));--_n-button-toggle-icon-color:var(--n-button-toggle-icon-color, var(--n-color-icon));--_n-button-overflow:var(--n-button-overflow, hidden);--_n-button-opacity:1;--_n-button-border-style:solid;--_n-button-inline-size:fit-content;--_n-button-padding-block:calc(var(--n-space-s) / 1.6);--_n-button-icon-size:var(--n-size-icon-s);display:inline-block}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--_n-button-background-color);opacity:var(--_n-button-opacity);border-radius:var(--_n-button-border-radius);border:1px var(--_n-button-border-style) var(--_n-button-border-color);box-shadow:var(--_n-button-box-shadow);color:var(--_n-button-color);cursor:pointer;display:flex;gap:var(--_n-button-gap);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-button-font-size);font-weight:var(--_n-button-font-weight);line-height:var(--n-line-height-form);margin:0;min-block-size:var(--_n-button-min-block-size);padding:var(--_n-button-padding-block) var(--_n-button-padding-inline);text-align:var(--_n-button-text-align);text-decoration:none;transition:var(--n-transition-quickly);transition-property:background-color,opacity,color,box-shadow,border-color;-webkit-user-select:none;user-select:none;position:relative;inline-size:var(--_n-button-inline-size)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--_n-button-gradient);border-radius:var(--_n-button-border-radius);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--_n-button-inline-size:100%;display:block}.n-content{flex:1;overflow:var(--_n-button-overflow);text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-button:focus{outline:0}.n-button:focus-visible{--_n-button-border-color:var(--n-button-border-color, var(--n-color-accent));--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow));--_n-button-border-style:solid}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active))}:host([variant=primary]),:host([variant=primary]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-accent))}:host([variant=primary]) .n-button:hover{filter:brightness(93%)}:host([variant=primary]) .n-button:focus{--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-surface), 0 0 0 3px var(--_n-button-border-color))}:host([variant=dashed]){--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weaker));--_n-button-border-style:dashed}:host([variant=dashed]) .n-button:hover{--_n-button-color:var(--n-button-color, var(--n-color-text))}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--_n-button-box-shadow:var(--n-button-box-shadow, none)}:host([variant=plain]),:host([variant=plain]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active))}:host([variant=danger]),:host([variant=danger]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-status-danger))}:host([variant=danger]) .n-button:hover{filter:brightness(93%)}:host([variant=danger]) .n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-status-danger));--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-surface), 0 0 0 3px var(--n-color-status-danger))}:host([disabled]){--_n-button-border-color:var(--n-button-border-color, var(--_n-button-background-color));--_n-button-background-color:var(--n-button-background-color, var(--n-color-border));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weaker));--_n-button-opacity:0.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}.n-button-spinner{position:absolute;transform:translateX(-50%) translateY(-50%);inset-block-start:50%;inset-inline-start:50%}:host([loading]:not([href])){pointer-events:none}:host([loading]:not([href])) .n-content,:host([loading]:not([href])) ::slotted([slot=end]),:host([loading]:not([href])) ::slotted([slot=start]){opacity:0}:host([size="s"]){--_n-button-gap:var(--n-button-gap, var(--n-space-xs));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-s) + 1px));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-s));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-l) + var(--n-space-xs)));--_n-button-padding-block:calc(var(--n-space-xs) - 1px);--_n-button-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-l) / 1.3));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-l));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-xxl) - var(--n-space-l)));--_n-button-icon-size:var(--n-size-icon-m)}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}:host(:not([variant=primary],[variant=danger])) ::slotted(nord-icon){color:var(--n-color-icon)}:host(:not([variant=primary],[variant=danger])) .n-toggle-icon{color:var(--_n-button-toggle-icon-color)}slot:not([name])::slotted(nord-icon){transform:translateY(1px)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-button-icon-size)}`;let f=class extends(v(u(e))){constructor(){super(...arguments),this.defaultSlot=new p(this),this.buttonRef=s(),this.events=new b(this),this.lightDom=new d(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.loading=!1,this.handleOuterClick=o=>{o.composedPath().some((o=>o===this.focusableRef.value||o===this.buttonRef.value))||o.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"click",this.handleOuterClick,!0)}render(){var o;const r="toggle"===(null===(o=this.assignedSlot)||void 0===o?void 0:o.name),a=this.defaultSlot.assigned.some((o=>"nord-icon"===o.localName)),e=r&&!a&&!this.href,i=t`<slot name="start"></slot><div class="n-content"><slot></slot></div><nord-spinner class="n-button-spinner" color="currentColor" ?hidden="${!this.loading||Boolean(this.href)}"></nord-spinner><slot name="end">${e?t`<nord-icon name="interface-dropdown-small" class="n-toggle-icon"></nord-icon>`:n}</slot>`;return this.href?this.renderLink(i):this.renderButton(i)}renderLink(o){return t`<a ${l(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${c(this.disabled,n,this.href)}" tabindex="${c(this.disabled,"-1")}" aria-disabled="${c(this.disabled,"true")}" role="${c(this.disabled,"link")}">${o}</a>`}renderButton(o){return t`<slot name="proxy" @slotchange="${this.handleProxyChange}"></slot><button ${l(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${c(this.name)}" value="${c(this.value)}" @click="${this.handleClick}" aria-disabled="${c(this.loading,"true")}" aria-expanded="${c(this.accessibleExpanded)}" aria-haspopup="${c(this.accessibleHasPopup)}">${o}</button>`}renderLightDom(){return this.href||!this.form?n:t`<button ${l(this.buttonRef)} slot="proxy" name="${c(this.name)}" value="${c(this.value)}" ?disabled="${this.disabled}" form="${c(this._formId)}" type="${this.type}"></button>`}handleClick(o){this.buttonRef.value&&(o.stopPropagation(),this.buttonRef.value.click())}handleProxyChange(o){const t=o.target,n=this.buttonRef.value;n&&n.assignedSlot!==t&&this.appendChild(n)}};f.styles=[h,g],r([i({reflect:!0})],f.prototype,"variant",void 0),r([i({reflect:!0})],f.prototype,"type",void 0),r([i({reflect:!0})],f.prototype,"size",void 0),r([i({attribute:"aria-expanded"})],f.prototype,"accessibleExpanded",void 0),r([i({attribute:"aria-haspopup"})],f.prototype,"accessibleHasPopup",void 0),r([i({reflect:!0})],f.prototype,"href",void 0),r([i({type:Boolean})],f.prototype,"download",void 0),r([i()],f.prototype,"target",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"loading",void 0),f=r([a("nord-button")],f);var _=f;export{_ as default};
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
package/lib/ButtonGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as r,_ as o,s as t,x as n,e}from"./query-assigned-elements-
|
|
1
|
+
import{i as r,_ as o,s as t,x as n,e}from"./query-assigned-elements-822fe360.js";import{e as i}from"./property-03f59dce.js";import{s as a}from"./Component-1f694235.js";const d=r`:host{--_n-button-group-border-radius:var(--n-button-group-border-radius, var(--n-border-radius-s));--_n-button-group-box-shadow:var(--n-button-group-box-shadow, var(--n-box-shadow));--n-button-border-radius:0;--n-button-box-shadow:none}.n-button-group{display:flex;max-inline-size:max-content;border-radius:var(--_n-button-group-border-radius);box-shadow:var(--_n-button-group-box-shadow)}:host([direction=horizontal]) ::slotted(*){margin-inline-end:-1px}::slotted(:is(:hover,:focus,:focus-within,[aria-pressed=true])){z-index:var(--n-index-masked)}::slotted([aria-pressed=true]){--n-button-background-color:var(--n-color-status-info-weak);--n-button-border-color:var(--n-color-accent)}::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) 0 0 var(--_n-button-group-border-radius);border-radius:var(--_n-button-group-border-radius) 0 0 var(--_n-button-group-border-radius)}::slotted(:last-child){--n-button-border-radius:0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0;border-radius:0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0}:host([direction=vertical]) .n-button-group{flex-direction:column}:host([direction=vertical]) ::slotted(*){margin-block-end:-1px}:host([direction=vertical]) ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0 0}:host([direction=vertical]) ::slotted(:last-child){--n-button-border-radius:0 0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius)}::slotted(nord-button[variant=primary]){position:relative}::slotted(nord-button[variant=primary]:not(:is(:focus,:first-child)))::before,::slotted(nord-button[variant=primary]:not(:is(:focus,:last-child)))::after{content:"";position:absolute;z-index:var(--n-index-mask);background:var(--n-color-text);opacity:.25}:host([direction=horizontal]) ::slotted(nord-button[variant=primary])::after,:host([direction=horizontal]) ::slotted(nord-button[variant=primary])::before{inline-size:1px;inset-block:0}:host([direction=horizontal]) ::slotted(nord-button[variant=primary])::after{inset-inline-end:0}:host([direction=vertical]) ::slotted(nord-button[variant=primary])::after,:host([direction=vertical]) ::slotted(nord-button[variant=primary])::before{block-size:1px;inset-inline:0}:host([direction=vertical]) ::slotted(nord-button[variant=primary])::after{inset-block-end:0}`;let s=class extends t{constructor(){super(...arguments),this.direction="horizontal",this.role="group"}render(){return n`<div class="n-button-group"><slot></slot></div>`}};s.styles=[a,d],o([i({reflect:!0})],s.prototype,"direction",void 0),o([i({reflect:!0})],s.prototype,"role",void 0),s=o([e("nord-button-group")],s);var u=s;export{u as default};
|
|
2
2
|
//# sourceMappingURL=ButtonGroup.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as a,s as t,x as n,e as s}from"./query-assigned-elements-2f8275b7.js";import{e as i}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{o as l}from"./class-map-4a0dec4a.js";import{c as d,m as c,a as h}from"./collection-bba319d3.js";import{o as u}from"./tinykeys.module-84e6cc41.js";import"./Button.js";import"./VisuallyHidden.js";import p from"./Icon.js";import{E as v}from"./EventController-d99ebeef.js";import{D as g}from"./DirectionController-f35f5476.js";import{LocalizeController as f}from"./LocalizeController.js";import{c as m}from"./cond-77258def.js";import{r as b}from"./number-c3ab3e95.js";import{i as y,p as w,a as x,s as D,e as k,b as z,g as $,c as F,d as _,f as Y,h as j,j as S,k as M,l as T,m as C,n as N}from"./dates-5b651fbe.js";import{o as L}from"./observe-a9c6dfb6.js";import{DateSelectEvent as O}from"./DateSelectEvent.js";import{s as X}from"./Component-253ecb24.js";var E=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m6.92903.100342-2.12132 2.121318 7.77819 7.77818-7.77828 7.77826 2.12132 2.1213 8.48536-8.4853c.7811-.7811.7811-2.04743 0-2.82848z" fill="currentColor"/></svg>',title:"arrow-right-small",tags:"nordicon arrow right small caret pointing triangle chevron"});var W=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z" fill="currentColor"/></svg>',title:"arrow-left-small",tags:"nordicon arrow left small caret pointing triangle chevron"});var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m.100342 6.92903 2.121318-2.12132 7.77818 7.77819 7.77826-7.77828 2.1213 2.12132-8.4853 8.48536c-.7811.7811-2.04743.7811-2.82848 0z" fill="currentColor"/></svg>',title:"arrow-down-small",tags:"nordicon arrow down small caret pointing triangle chevron"});const U=e=>e.preventDefault();class I{constructor(e,a){this.hadFirstUpdate=!1,this.initialTouchX=0,this.initialTouchY=0,this.handleTouchStart=e=>{const[{pageX:a,pageY:t}]=e.changedTouches;this.initialTouchX=a,this.initialTouchY=t},this.handleTouchEnd=e=>{const[{pageX:a,pageY:t}]=e.changedTouches,{matchesGesture:n,onSwipeEnd:s}=this.options,i=a-this.initialTouchX,o=t-this.initialTouchY,r={initialX:this.initialTouchX,initialY:this.initialTouchY,pageX:a,pageY:t,distX:i,distY:o};n(r)&&(e.preventDefault(),s(r))},e.addController(this),this.events=new v(e),this.options={target:()=>e,...a}}hostUpdated(){if(!this.hadFirstUpdate){this.hadFirstUpdate=!0;const e=this.options.target();this.events.listen(e,"touchstart",this.handleTouchStart),this.events.listen(e,"touchmove",U),this.events.listen(e,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}const P=({distX:e,distY:a})=>Math.abs(e)>=70&&Math.abs(a)<=70,B=({distX:e,distY:a})=>Math.abs(a)>=70&&Math.abs(e)<=70&&a>0,H=e`:host{--_n-calendar-box-shadow:var(--n-calendar-box-shadow, var(--n-box-shadow-popout));--_n-calendar-border-radius:var(--n-calendar-border-radius, var(--n-border-radius-s));--_n-calendar-highlight-color:var(--n-calendar-highlight-color, var(--n-color-accent));--_n-calendar-padding:var(--n-space-m) var(--n-space-m) calc(var(--n-space-m) * 1.25);--_n-calendar-inline-size:max-content;font-feature-settings:var(--n-font-features-reduced)}.n-calendar{-webkit-user-select:none;user-select:none;background:var(--n-color-surface);box-shadow:var(--_n-calendar-box-shadow);border-radius:var(--_n-calendar-border-radius);inline-size:var(--_n-calendar-inline-size);min-inline-size:min-content;padding:var(--_n-calendar-padding)}:host([expand]){--_n-calendar-inline-size:100%}.n-calendar-table{border-collapse:collapse;border-spacing:0;color:var(--n-color-text);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);text-align:center;inline-size:100%}.n-calendar-table-header{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);letter-spacing:1px;padding-block-end:var(--n-space-s);text-decoration:none;text-transform:uppercase}.n-calendar-cell{text-align:center;padding:1px}.n-calendar-day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:0 0;border:0;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:inline-block;font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);font-variant-numeric:tabular-nums;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);padding:0 0 1px;position:relative;text-align:center;vertical-align:middle}.n-calendar-day[aria-current=date]{box-shadow:0 0 0 1px var(--n-color-text-link);color:var(--n-color-text-link);position:relative}.n-calendar-day:hover{background:var(--n-color-active)}.n-calendar-day:focus,.n-calendar-day[aria-pressed=true]{background:var(--n-color-accent);box-shadow:none;color:var(--n-color-text-on-accent);outline:0}.n-calendar-day:active{background:var(--n-color-accent);box-shadow:none!important;color:var(--n-color-text-on-accent)}.n-calendar-day:focus{box-shadow:0 0 5px var(--n-color-accent)}.n-calendar-day:not(.is-month){box-shadow:none}.n-calendar-day:not(.is-month),.n-calendar-day[aria-disabled=true]{background:0 0;color:var(--n-color-text-weakest);cursor:default}.n-calendar-day[aria-disabled=true]{color:var(--n-color-text-weaker);text-decoration:line-through}.n-calendar-day:not(.is-month)[aria-disabled=true]{color:var(--n-color-text-weakest);text-decoration:none}.n-calendar-day[aria-disabled=true][aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link)}.n-calendar-day[aria-disabled=true][aria-current=date]:focus{box-shadow:0 0 5px var(--n-color-accent);background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-calendar-day[aria-disabled=true]:not([aria-current=date])::before{display:none}.n-calendar-day.is-outside{background:0 0;box-shadow:none;color:var(--n-color-text-weakest);cursor:default;pointer-events:none}.n-calendar-day.is-outside::before{display:none}.n-calendar-day.is-highlighted::after{--_n-calendar-highlight-size:5px;content:"";position:absolute;inset-inline-start:calc(50% - (var(--_n-calendar-highlight-size)/ 2));inset-block-end:var(--n-space-xs);block-size:var(--_n-calendar-highlight-size);inline-size:var(--_n-calendar-highlight-size);border-radius:var(--n-border-radius-circle);background-color:var(--_n-calendar-highlight-color)}.n-calendar-day.is-highlighted.is-month:is([aria-pressed=true],:focus):not([aria-disabled=true])::after{background-color:var(--n-color-text-on-accent)}.n-calendar-day.is-highlighted:is(:not(.is-month),.is-outside,[aria-disabled=true])::after{background-color:var(--n-color-text-weakest)}.n-calendar-header{align-items:start;display:flex;justify-content:space-between;margin-block-end:var(--n-space-m);inline-size:100%}.n-calendar-nav{white-space:nowrap}.n-calendar-nav nord-button{--_n-button-padding-inline:11px;margin-inline-start:var(--n-space-xs)}.n-calendar-select{display:inline-flex;margin-block-start:var(--n-space-xs);position:relative;line-height:var(--n-line-height)}.n-calendar-select span{margin-inline-end:var(--n-space-s)}.n-calendar-select select{cursor:pointer;font-size:var(--n-font-size-l);block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%}.n-calendar-select select:focus+.n-calendar-select-label{box-shadow:0 0 0 2px var(--n-color-accent)}.n-calendar-select-label{display:flex;align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);font-size:var(--n-font-size-xl);font-weight:var(--n-font-weight-active);padding-block:0;padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-xs);pointer-events:none;position:relative;inline-size:100%}`;p.registerIcon(E),p.registerIcon(W),p.registerIcon(A);const R=e=>a=>{a.preventDefault(),e(a)},V=()=>!1,q=()=>!1;let G=class extends t{constructor(){super(...arguments),this.direction=new g(this),this.swipe=new I(this,{matchesGesture:P,onSwipeEnd:({distX:e})=>this.addMonths(e<0?1:-1)}),this.shortcuts=u({ArrowRight:R((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:R((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:R((()=>this.addDays(7))),ArrowUp:R((()=>this.addDays(-7))),Home:R((()=>this.startOfWeek())),End:R((()=>this.endOfWeek())),PageUp:R((()=>this.addMonths(-1))),PageDown:R((()=>this.addMonths(1))),"Shift+PageUp":R((()=>this.addYears(-1))),"Shift+PageDown":R((()=>this.addYears(1)))}),this.localize=new f(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=1,this.min="",this.max="",this.expand=!1,this.isDateDisabled=V,this.isDateHighlighted=q,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=e=>{const a=y(e,w(this.min),w(this.max)),t=!this.isDateDisabled(e);a&&t&&(this.value=x(e),this.dispatchEvent(new O("change",e)))},this.handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))},this.handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))},this.handleNextMonthClick=e=>{e.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=e=>{e.preventDefault(),this.addMonths(-1)},this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=e=>{const a=e.currentTarget,t=e.relatedTarget;t&&!a.contains(t)&&(this.activeFocus=!1)}}focus(e){var a;const t=null!==(a=null==e?void 0:e.target)&&void 0!==a?a:"day";"day"===t?this.focusedDayNode.focus():"month"===t&&this.monthSelectNode.focus()}render(){const e=new Date,a=w(this.value),t=this.focusedDay.getMonth(),s=this.focusedDay.getFullYear(),i=w(this.min),o=w(this.max),r=i?D(i):void 0,u=o?k(o):void 0,p=(a||this.focusedDay).getFullYear(),v=i?i.getFullYear():p-10,g=o?o.getFullYear():p+10;return n`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${"dialog-header"}" aria-live="polite" aria-atomic="true">${this.monthNames[t]}, ${this.focusedDay.getFullYear()}</h2></nord-visually-hidden><div class="n-calendar-select"><select aria-label="${this.localize.term("monthSelectLabel")}" class="n-calendar-select-month" @input="${this.handleMonthSelect}">${this.monthNames.map(((e,a)=>n`<option value="${a}" ?selected="${a===t}" ?disabled="${!y(new Date(s,a,1),r,u)}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.monthNamesShort[t]}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div><div class="n-calendar-select"><select aria-label="${this.localize.term("yearSelectLabel")}" class="n-calendar-select-year" @input="${this.handleYearSelect}">${d(b(v,g),(e=>e),(e=>n`<option ?selected="${e===s}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.focusedDay.getFullYear()}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div></div><div class="n-calendar-nav"><nord-button class="n-calendar-prev" @click="${this.handlePreviousMonthClick}" ?disabled="${z(i,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("prevMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-left-small":"arrow-right-small"}" size="s"></nord-icon></nord-button><nord-button class="n-calendar-next" @click="${this.handleNextMonthClick}" ?disabled="${z(o,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("nextMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-right-small":"arrow-left-small"}" size="s"></nord-icon></nord-button></div></div><table class="n-calendar-table" aria-labelledby="${"dialog-header"}" @focusin="${this.enableActiveFocus}" @focusout="${this.disableActiveFocus}"><thead><tr>${c(this.dayNames,this.firstDayOfWeek,((e,a)=>n`<th class="n-calendar-table-header" scope="col"><span aria-hidden="true">${this.dayNamesShort[a]}</span><nord-visually-hidden>${e}</nord-visually-hidden></th>`))}</tr></thead><tbody>${h($(this.focusedDay,this.firstDayOfWeek),7).map((t=>n`<tr class="n-calendar-row">${t.map((t=>{const s=!y(t,i,o),r=F(t,e),d=this.isDateDisabled(t),c=F(t,a),h=z(t,this.focusedDay),u=this.isDateHighlighted(t),p=this.dateFormatShort.format(t),v=u&&"string"==typeof u?`${p}, ${u}`:p;return n`<td class="n-calendar-cell"><button type="button" tabindex="${F(t,this.focusedDay)?0:-1}" class="${l({"n-calendar-day":!0,"is-outside":s,"is-month":h,"is-highlighted":u})}" @click="${()=>this.handleDaySelect(t)}" @keydown="${this.shortcuts}" ?disabled="${s}" aria-disabled="${m(d,"true")}" aria-pressed="${c?"true":"false"}" aria-current="${m(r,"date")}" aria-label="${v}"><span aria-hidden="true">${t.getDate()}</span></button></td>`}))}</tr>`))}</tbody></table></div>`}handleValueChange(){this.setFocusedDay(w(this.value)||new Date)}handleFocusedDayChange(){this.activeFocus&&this.focusedDayNode.focus()}handleLangChange(){const e=this.localize.resolvedLang;this.dateFormatShort=new Intl.DateTimeFormat(e,{day:"numeric",month:"long"}),this.monthNames=_(e,"long"),this.monthNamesShort=_(e,"short"),this.dayNames=Y(e,"long"),this.dayNamesShort=Y(e,"narrow")}addDays(e){this.setFocusedDay(j(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(S(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(M(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const a=T(D(this.focusedDay),e),t=k(a),n=T(this.focusedDay,e);this.setFocusedDay(C(n,a,t))}setYear(e){const a=N(D(this.focusedDay),e),t=k(a),n=N(this.focusedDay,e);this.setFocusedDay(C(n,a,t))}setFocusedDay(e){this.focusedDay=C(e,w(this.min),w(this.max)),this.dispatchEvent(new O("nord-focus-date",this.focusedDay))}};G.styles=[X,H],a([r(".n-calendar-select-month",!0)],G.prototype,"monthSelectNode",void 0),a([r('button[tabindex="0"]')],G.prototype,"focusedDayNode",void 0),a([i()],G.prototype,"value",void 0),a([i({type:Number})],G.prototype,"firstDayOfWeek",void 0),a([i()],G.prototype,"min",void 0),a([i()],G.prototype,"max",void 0),a([i({reflect:!0,type:Boolean})],G.prototype,"expand",void 0),a([i({attribute:!1})],G.prototype,"isDateDisabled",void 0),a([i({attribute:!1})],G.prototype,"isDateHighlighted",void 0),a([o()],G.prototype,"activeFocus",void 0),a([o()],G.prototype,"focusedDay",void 0),a([L("value")],G.prototype,"handleValueChange",null),a([L("focusedDay","updated")],G.prototype,"handleFocusedDayChange",null),G=a([s("nord-calendar")],G);var J=G;export{J as C,I as S,B as i};
|
|
2
|
-
//# sourceMappingURL=Calendar-
|
|
1
|
+
import{i as e,_ as a,s as t,x as n,e as s}from"./query-assigned-elements-822fe360.js";import{e as i}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{o as l}from"./class-map-c0d8e1e5.js";import{c as d,m as c,a as h}from"./collection-498f2b1f.js";import{o as u}from"./tinykeys.module-84e6cc41.js";import"./Button.js";import"./VisuallyHidden.js";import p from"./Icon.js";import{E as v}from"./EventController-d99ebeef.js";import{D as f}from"./DirectionController-f35f5476.js";import{LocalizeController as g}from"./LocalizeController.js";import{c as m}from"./cond-09498763.js";import{r as b}from"./number-c3ab3e95.js";import{i as y,p as w,a as x,s as D,e as k,b as z,g as $,c as F,d as _,f as Y,h as j,j as S,k as M,l as T,m as C,n as N}from"./dates-5b651fbe.js";import{o as L}from"./observe-a9c6dfb6.js";import{DateSelectEvent as O}from"./DateSelectEvent.js";import{s as X}from"./Component-1f694235.js";var E=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m6.92903.100342-2.12132 2.121318 7.77819 7.77818-7.77828 7.77826 2.12132 2.1213 8.48536-8.4853c.7811-.7811.7811-2.04743 0-2.82848z" fill="currentColor"/></svg>',title:"arrow-right-small",tags:"nordicon arrow right small caret pointing triangle chevron"});var W=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z" fill="currentColor"/></svg>',title:"arrow-left-small",tags:"nordicon arrow left small caret pointing triangle chevron"});var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m.100342 6.92903 2.121318-2.12132 7.77818 7.77819 7.77826-7.77828 2.1213 2.12132-8.4853 8.48536c-.7811.7811-2.04743.7811-2.82848 0z" fill="currentColor"/></svg>',title:"arrow-down-small",tags:"nordicon arrow down small caret pointing triangle chevron"});const U=e=>e.preventDefault();class I{constructor(e,a){this.hadFirstUpdate=!1,this.initialTouchX=0,this.initialTouchY=0,this.handleTouchStart=e=>{const[{pageX:a,pageY:t}]=e.changedTouches;this.initialTouchX=a,this.initialTouchY=t},this.handleTouchEnd=e=>{const[{pageX:a,pageY:t}]=e.changedTouches,{matchesGesture:n,onSwipeEnd:s}=this.options,i=a-this.initialTouchX,o=t-this.initialTouchY,r={initialX:this.initialTouchX,initialY:this.initialTouchY,pageX:a,pageY:t,distX:i,distY:o};n(r)&&(e.preventDefault(),s(r))},e.addController(this),this.events=new v(e),this.options={target:()=>e,...a}}hostUpdated(){if(!this.hadFirstUpdate){this.hadFirstUpdate=!0;const e=this.options.target();this.events.listen(e,"touchstart",this.handleTouchStart),this.events.listen(e,"touchmove",U),this.events.listen(e,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}const P=({distX:e,distY:a})=>Math.abs(e)>=70&&Math.abs(a)<=70,B=({distX:e,distY:a})=>Math.abs(a)>=70&&Math.abs(e)<=70&&a>0,H=e`:host{--_n-calendar-box-shadow:var(--n-calendar-box-shadow, var(--n-box-shadow-popout));--_n-calendar-border-radius:var(--n-calendar-border-radius, var(--n-border-radius-s));--_n-calendar-highlight-color:var(--n-calendar-highlight-color, var(--n-color-accent));--_n-calendar-padding:var(--n-space-m) var(--n-space-m) calc(var(--n-space-m) * 1.25);--_n-calendar-inline-size:max-content;font-feature-settings:var(--n-font-features-reduced)}.n-calendar{-webkit-user-select:none;user-select:none;background:var(--n-color-surface);box-shadow:var(--_n-calendar-box-shadow);border-radius:var(--_n-calendar-border-radius);inline-size:var(--_n-calendar-inline-size);min-inline-size:min-content;padding:var(--_n-calendar-padding)}:host([expand]){--_n-calendar-inline-size:100%}.n-calendar-table{border-collapse:collapse;border-spacing:0;color:var(--n-color-text);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);text-align:center;inline-size:100%}.n-calendar-table-header{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);letter-spacing:1px;padding-block-end:var(--n-space-s);text-decoration:none;text-transform:uppercase}.n-calendar-cell{text-align:center;padding:1px}.n-calendar-day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:0 0;border:0;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:inline-block;font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);font-variant-numeric:tabular-nums;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);padding:0 0 1px;position:relative;text-align:center;vertical-align:middle}.n-calendar-day[aria-current=date]{box-shadow:0 0 0 1px var(--n-color-text-link);color:var(--n-color-text-link);position:relative}.n-calendar-day:hover{background:var(--n-color-active)}.n-calendar-day:focus,.n-calendar-day[aria-pressed=true]{background:var(--n-color-accent);box-shadow:none;color:var(--n-color-text-on-accent);outline:0}.n-calendar-day:active{background:var(--n-color-accent);box-shadow:none!important;color:var(--n-color-text-on-accent)}.n-calendar-day:focus{box-shadow:0 0 5px var(--n-color-accent)}.n-calendar-day:not(.is-month){box-shadow:none}.n-calendar-day:not(.is-month),.n-calendar-day[aria-disabled=true]{background:0 0;color:var(--n-color-text-weakest);cursor:default}.n-calendar-day[aria-disabled=true]{color:var(--n-color-text-weaker);text-decoration:line-through}.n-calendar-day:not(.is-month)[aria-disabled=true]{color:var(--n-color-text-weakest);text-decoration:none}.n-calendar-day[aria-disabled=true][aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link)}.n-calendar-day[aria-disabled=true][aria-current=date]:focus{box-shadow:0 0 5px var(--n-color-accent);background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-calendar-day[aria-disabled=true]:not([aria-current=date])::before{display:none}.n-calendar-day.is-outside{background:0 0;box-shadow:none;color:var(--n-color-text-weakest);cursor:default;pointer-events:none}.n-calendar-day.is-outside::before{display:none}.n-calendar-day.is-highlighted::after{--_n-calendar-highlight-size:5px;content:"";position:absolute;inset-inline-start:calc(50% - (var(--_n-calendar-highlight-size)/ 2));inset-block-end:var(--n-space-xs);block-size:var(--_n-calendar-highlight-size);inline-size:var(--_n-calendar-highlight-size);border-radius:var(--n-border-radius-circle);background-color:var(--_n-calendar-highlight-color)}.n-calendar-day.is-highlighted.is-month:is([aria-pressed=true],:focus):not([aria-disabled=true])::after{background-color:var(--n-color-text-on-accent)}.n-calendar-day.is-highlighted:is(:not(.is-month),.is-outside,[aria-disabled=true])::after{background-color:var(--n-color-text-weakest)}.n-calendar-header{align-items:start;display:flex;justify-content:space-between;margin-block-end:var(--n-space-m);inline-size:100%}.n-calendar-nav{white-space:nowrap}.n-calendar-nav nord-button{--_n-button-padding-inline:11px;margin-inline-start:var(--n-space-xs)}.n-calendar-select{display:inline-flex;margin-block-start:var(--n-space-xs);position:relative;line-height:var(--n-line-height)}.n-calendar-select span{margin-inline-end:var(--n-space-s)}.n-calendar-select select{cursor:pointer;font-size:var(--n-font-size-l);block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%}.n-calendar-select select:focus+.n-calendar-select-label{box-shadow:0 0 0 2px var(--n-color-accent)}.n-calendar-select-label{display:flex;align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);font-size:var(--n-font-size-xl);font-weight:var(--n-font-weight-active);padding-block:0;padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-xs);pointer-events:none;position:relative;inline-size:100%}`;p.registerIcon(E),p.registerIcon(W),p.registerIcon(A);const R=e=>a=>{a.preventDefault(),e(a)},V=()=>!1,q=()=>!1,G="dialog-header";let J=class extends t{constructor(){super(...arguments),this.direction=new f(this),this.swipe=new I(this,{matchesGesture:P,onSwipeEnd:({distX:e})=>this.addMonths(e<0?1:-1)}),this.shortcuts=u({ArrowRight:R((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:R((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:R((()=>this.addDays(7))),ArrowUp:R((()=>this.addDays(-7))),Home:R((()=>this.startOfWeek())),End:R((()=>this.endOfWeek())),PageUp:R((()=>this.addMonths(-1))),PageDown:R((()=>this.addMonths(1))),"Shift+PageUp":R((()=>this.addYears(-1))),"Shift+PageDown":R((()=>this.addYears(1)))}),this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=1,this.min="",this.max="",this.expand=!1,this.isDateDisabled=V,this.isDateHighlighted=q,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=e=>{const a=y(e,w(this.min),w(this.max)),t=!this.isDateDisabled(e);a&&t&&(this.value=x(e),this.dispatchEvent(new O("change",e)))},this.handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))},this.handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))},this.handleNextMonthClick=e=>{e.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=e=>{e.preventDefault(),this.addMonths(-1)},this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=e=>{const a=e.currentTarget,t=e.relatedTarget;t&&!a.contains(t)&&(this.activeFocus=!1)}}focus(e){var a;const t=null!==(a=null==e?void 0:e.target)&&void 0!==a?a:"day";"day"===t?this.focusedDayNode.focus():"month"===t&&this.monthSelectNode.focus()}render(){const e=new Date,a=w(this.value),t=this.focusedDay.getMonth(),s=this.focusedDay.getFullYear(),i=w(this.min),o=w(this.max),r=i?D(i):void 0,u=o?k(o):void 0,p=(a||this.focusedDay).getFullYear(),v=i?i.getFullYear():p-10,f=o?o.getFullYear():p+10;return n`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${G}" aria-live="polite" aria-atomic="true">${this.monthNames[t]}, ${this.focusedDay.getFullYear()}</h2></nord-visually-hidden><div class="n-calendar-select"><select aria-label="${this.localize.term("monthSelectLabel")}" class="n-calendar-select-month" @input="${this.handleMonthSelect}">${this.monthNames.map(((e,a)=>n`<option value="${a}" ?selected="${a===t}" ?disabled="${!y(new Date(s,a,1),r,u)}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.monthNamesShort[t]}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div><div class="n-calendar-select"><select aria-label="${this.localize.term("yearSelectLabel")}" class="n-calendar-select-year" @input="${this.handleYearSelect}">${d(b(v,f),(e=>e),(e=>n`<option ?selected="${e===s}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.focusedDay.getFullYear()}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div></div><div class="n-calendar-nav"><nord-button class="n-calendar-prev" @click="${this.handlePreviousMonthClick}" ?disabled="${z(i,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("prevMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-left-small":"arrow-right-small"}" size="s"></nord-icon></nord-button><nord-button class="n-calendar-next" @click="${this.handleNextMonthClick}" ?disabled="${z(o,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("nextMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-right-small":"arrow-left-small"}" size="s"></nord-icon></nord-button></div></div><table class="n-calendar-table" aria-labelledby="${G}" @focusin="${this.enableActiveFocus}" @focusout="${this.disableActiveFocus}"><thead><tr>${c(this.dayNames,this.firstDayOfWeek,((e,a)=>n`<th class="n-calendar-table-header" scope="col"><span aria-hidden="true">${this.dayNamesShort[a]}</span><nord-visually-hidden>${e}</nord-visually-hidden></th>`))}</tr></thead><tbody>${h($(this.focusedDay,this.firstDayOfWeek),7).map((t=>n`<tr class="n-calendar-row">${t.map((t=>{const s=!y(t,i,o),r=F(t,e),d=this.isDateDisabled(t),c=F(t,a),h=z(t,this.focusedDay),u=this.isDateHighlighted(t),p=this.dateFormatShort.format(t),v=u&&"string"==typeof u?`${p}, ${u}`:p;return n`<td class="n-calendar-cell"><button type="button" tabindex="${F(t,this.focusedDay)?0:-1}" class="${l({"n-calendar-day":!0,"is-outside":s,"is-month":h,"is-highlighted":u})}" @click="${()=>this.handleDaySelect(t)}" @keydown="${this.shortcuts}" ?disabled="${s}" aria-disabled="${m(d,"true")}" aria-pressed="${c?"true":"false"}" aria-current="${m(r,"date")}" aria-label="${v}"><span aria-hidden="true">${t.getDate()}</span></button></td>`}))}</tr>`))}</tbody></table></div>`}handleValueChange(){this.setFocusedDay(w(this.value)||new Date)}handleFocusedDayChange(){this.activeFocus&&this.focusedDayNode.focus()}handleLangChange(){const e=this.localize.resolvedLang;this.dateFormatShort=new Intl.DateTimeFormat(e,{day:"numeric",month:"long"}),this.monthNames=_(e,"long"),this.monthNamesShort=_(e,"short"),this.dayNames=Y(e,"long"),this.dayNamesShort=Y(e,"narrow")}addDays(e){this.setFocusedDay(j(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(S(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(M(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const a=T(D(this.focusedDay),e),t=k(a),n=T(this.focusedDay,e);this.setFocusedDay(C(n,a,t))}setYear(e){const a=N(D(this.focusedDay),e),t=k(a),n=N(this.focusedDay,e);this.setFocusedDay(C(n,a,t))}setFocusedDay(e){this.focusedDay=C(e,w(this.min),w(this.max)),this.dispatchEvent(new O("nord-focus-date",this.focusedDay))}};J.styles=[X,H],a([r(".n-calendar-select-month",!0)],J.prototype,"monthSelectNode",void 0),a([r('button[tabindex="0"]')],J.prototype,"focusedDayNode",void 0),a([i()],J.prototype,"value",void 0),a([i({type:Number})],J.prototype,"firstDayOfWeek",void 0),a([i()],J.prototype,"min",void 0),a([i()],J.prototype,"max",void 0),a([i({reflect:!0,type:Boolean})],J.prototype,"expand",void 0),a([i({attribute:!1})],J.prototype,"isDateDisabled",void 0),a([i({attribute:!1})],J.prototype,"isDateHighlighted",void 0),a([o()],J.prototype,"activeFocus",void 0),a([o()],J.prototype,"focusedDay",void 0),a([L("value")],J.prototype,"handleValueChange",null),a([L("focusedDay","updated")],J.prototype,"handleFocusedDayChange",null),J=a([s("nord-calendar")],J);var K=J;export{K as C,I as S,B as i};
|
|
2
|
+
//# sourceMappingURL=Calendar-3fd55b5d.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar-f7e95d9a.js","sources":["../../icons/lib/assets/arrow-right-small.js","../../icons/lib/assets/arrow-left-small.js","../../icons/lib/assets/arrow-down-small.js","../src/common/controllers/SwipeController.ts","../src/calendar/Calendar.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.92903.100342-2.12132 2.121318 7.77819 7.77818-7.77828 7.77826 2.12132 2.1213 8.48536-8.4853c.7811-.7811.7811-2.04743 0-2.82848z\" fill=\"currentColor\"/></svg>'\nexport const title = \"arrow-right-small\"\nexport const tags = \"nordicon arrow right small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z\" fill=\"currentColor\"/></svg>'\nexport const title = \"arrow-left-small\"\nexport const tags = \"nordicon arrow left small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m.100342 6.92903 2.121318-2.12132 7.77818 7.77819 7.77826-7.77828 2.1213 2.12132-8.4853 8.48536c-.7811.7811-2.04743.7811-2.82848 0z\" fill=\"currentColor\"/></svg>'\nexport const title = \"arrow-down-small\"\nexport const tags = \"nordicon arrow down small caret pointing triangle chevron\"\n","import { ReactiveController, ReactiveElement } from \"lit\"\nimport { EventController } from \"./EventController.js\"\n\nexport type SwipeDetails = {\n initialX: number\n initialY: number\n pageX: number\n pageY: number\n distX: number\n distY: number\n}\n\nconst preventDefault = (e: Event) => e.preventDefault()\n\ntype SetRequired<T, K extends keyof T> = T & { [Property in K]-?: T[K] }\ntype SwipeControllerOptions = {\n target?: () => HTMLElement\n matchesGesture: (details: SwipeDetails) => boolean\n onSwipeEnd: (details: SwipeDetails) => void\n}\n\nexport class SwipeController implements ReactiveController {\n private events: EventController\n private hadFirstUpdate = false\n\n private initialTouchX: number = 0\n private initialTouchY: number = 0\n private options: SetRequired<SwipeControllerOptions, \"target\">\n\n constructor(host: ReactiveElement, options: SwipeControllerOptions) {\n host.addController(this)\n this.events = new EventController(host)\n\n this.options = {\n target: () => host,\n ...options,\n }\n }\n\n hostUpdated() {\n if (!this.hadFirstUpdate) {\n this.hadFirstUpdate = true\n\n const target = this.options.target()\n this.events.listen(target, \"touchstart\", this.handleTouchStart)\n this.events.listen(target, \"touchmove\", preventDefault)\n this.events.listen(target, \"touchend\", this.handleTouchEnd)\n }\n }\n\n hostDisconnected() {\n this.hadFirstUpdate = false\n }\n\n private handleTouchStart = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n this.initialTouchX = pageX\n this.initialTouchY = pageY\n }\n\n private handleTouchEnd = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n const { matchesGesture, onSwipeEnd } = this.options\n\n const distX = pageX - this.initialTouchX\n const distY = pageY - this.initialTouchY\n const details = { initialX: this.initialTouchX, initialY: this.initialTouchY, pageX, pageY, distX, distY }\n\n if (matchesGesture(details)) {\n event.preventDefault()\n onSwipeEnd(details)\n }\n }\n}\n\nconst THRESHOLD = 70\n\nexport const isHorizontalSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distX) >= THRESHOLD && Math.abs(distY) <= THRESHOLD\n\nexport const isDownwardsSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distY) >= THRESHOLD && Math.abs(distX) <= THRESHOLD && distY > 0\n","import { html, LitElement } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { repeat } from \"lit/directives/repeat.js\"\nimport { createKeybindingsHandler } from \"tinykeys\"\nimport * as arrowRightIcon from \"@nordhealth/icons/lib/assets/arrow-right-small.js\"\nimport * as arrowLeftIcon from \"@nordhealth/icons/lib/assets/arrow-left-small.js\"\nimport * as arrowDownIcon from \"@nordhealth/icons/lib/assets/arrow-down-small.js\"\n\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { isHorizontalSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { chunk, mapWithOffset } from \"../common/collection.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { range } from \"../common/number.js\"\nimport {\n addDays,\n clamp,\n DaysOfWeek,\n endOfMonth,\n endOfWeek,\n getDayNames,\n getMonthNames,\n getViewOfMonth,\n inRange,\n isEqual,\n isEqualMonth,\n parseISODate,\n printISODate,\n setMonth,\n setYear,\n startOfMonth,\n startOfWeek,\n} from \"../common/dates.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport { DateSelectEvent } from \"./DateSelectEvent.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Calendar.css\"\n\nexport type DatePredicate = (date: Date) => boolean\n\nIcon.registerIcon(arrowRightIcon)\nIcon.registerIcon(arrowLeftIcon)\nIcon.registerIcon(arrowDownIcon)\n\nconst preventDefault = (fn: EventListener) => (e: Event) => {\n e.preventDefault()\n fn(e)\n}\n\nconst isDateDisabled: DatePredicate = () => false\nconst isDateHighlighted = () => false\n\nconst dialogLabelId = \"dialog-header\"\n\n/**\n * Calendar allows user to pick a date. It comes with built-in\n * functionality that allows you to set a minimum and a maximum allowed date.\n * Please note that the date must be passed in ISO-8601 format.\n *\n * @status ready\n * @category list\n * @fires {DateSelectEvent} change - Dispatched when a date is selected and the value changes.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @cssprop [--n-calendar-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-calendar-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n *\n * @localization prevMonthLabel - Accessible label for the previous month button.\n * @localization nextMonthLabel - Accessible label for the next month button.\n * @localization monthSelectLabel - Accessible label for the month select.\n * @localization yearSelectLabel - Accessible label for the year select.\n */\n@customElement(\"nord-calendar\")\nexport default class Calendar extends LitElement {\n static styles = [componentStyle, style]\n\n @query(\".n-calendar-select-month\", true) private monthSelectNode!: HTMLElement\n @query(`button[tabindex=\"0\"]`) private focusedDayNode!: HTMLButtonElement\n\n private direction = new DirectionController(this)\n private swipe = new SwipeController(this, {\n matchesGesture: isHorizontalSwipe,\n onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n })\n\n private shortcuts = createKeybindingsHandler({\n ArrowRight: preventDefault(() => this.addDays(this.direction.isLTR ? 1 : -1)),\n ArrowLeft: preventDefault(() => this.addDays(this.direction.isLTR ? -1 : 1)),\n ArrowDown: preventDefault(() => this.addDays(7)),\n ArrowUp: preventDefault(() => this.addDays(-7)),\n Home: preventDefault(() => this.startOfWeek()),\n End: preventDefault(() => this.endOfWeek()),\n PageUp: preventDefault(() => this.addMonths(-1)),\n PageDown: preventDefault(() => this.addMonths(1)),\n \"Shift+PageUp\": preventDefault(() => this.addYears(-1)),\n \"Shift+PageDown\": preventDefault(() => this.addYears(1)),\n })\n\n private localize = new LocalizeController<\"nord-calendar\">(this, {\n onLangChange: () => this.handleLangChange(),\n })\n\n /**\n * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n * these are used to format dates exclusively for the benefit of screen readers.\n *\n * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n */\n private dateFormatShort!: Intl.DateTimeFormat\n private monthNames!: string[]\n private monthNamesShort!: string[]\n private dayNames!: string[]\n private dayNamesShort!: string[]\n\n /**\n * The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.\n */\n @property() value: string = \"\"\n\n /**\n * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n */\n @property({ type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /**\n * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n */\n @property() min: string = \"\"\n\n /**\n * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n */\n @property() max: string = \"\"\n\n /**\n * Controls whether the calendar expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n */\n @property({ attribute: false }) isDateDisabled: DatePredicate = isDateDisabled\n\n /**\n * Controls which days are highlighted with a small indicator.\n * Returning a \"falsy\" value will not show an indicator.\n * Returning \"truthy\" value will show the indicator, but without an accessible label.\n * Returning a string will show the indicator, and use the string as accessible label.\n * It is recommended to return a string rather than a truthy value whenever possible.\n */\n @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n @state() private activeFocus = false\n @state() private focusedDay = new Date()\n\n /**\n * Programmatically move focus to the calendar.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions & { target: \"day\" | \"month\" }) {\n const target = options?.target ?? \"day\"\n\n if (target === \"day\") {\n this.focusedDayNode.focus()\n } else if (target === \"month\") {\n this.monthSelectNode.focus()\n }\n }\n\n render() {\n const today = new Date()\n const valueAsDate = parseISODate(this.value)\n const focusedMonth = this.focusedDay.getMonth()\n const focusedYear = this.focusedDay.getFullYear()\n\n const minDate = parseISODate(this.min)\n const maxDate = parseISODate(this.max)\n const minDateStartOfMonth = minDate ? startOfMonth(minDate) : undefined\n const maxDateEndOfMonth = maxDate ? endOfMonth(maxDate) : undefined\n\n const selectedYear = (valueAsDate || this.focusedDay).getFullYear()\n const minYear = minDate ? minDate.getFullYear() : selectedYear - 10\n const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10\n\n return html`\n <div class=\"n-calendar\">\n <div class=\"n-calendar-header\">\n <div>\n <nord-visually-hidden>\n <h2 id=${dialogLabelId} aria-live=\"polite\" aria-atomic=\"true\">\n ${this.monthNames[focusedMonth]}, ${this.focusedDay.getFullYear()}\n </h2>\n </nord-visually-hidden>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localize.term(\"monthSelectLabel\")}\n class=\"n-calendar-select-month\"\n @input=${this.handleMonthSelect}\n >\n ${this.monthNames.map(\n (month, i) =>\n html`\n <option\n value=${i}\n ?selected=${i === focusedMonth}\n ?disabled=${!inRange(new Date(focusedYear, i, 1), minDateStartOfMonth, maxDateEndOfMonth)}\n >\n ${month}\n </option>\n `\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.monthNamesShort[focusedMonth]}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localize.term(\"yearSelectLabel\")}\n class=\"n-calendar-select-year\"\n @input=${this.handleYearSelect}\n >\n ${repeat(\n range(minYear, maxYear),\n year => year,\n year => html`<option ?selected=${year === focusedYear}>${year}</option>`\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.focusedDay.getFullYear()}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n </div>\n\n <div class=\"n-calendar-nav\">\n <nord-button\n class=\"n-calendar-prev\"\n @click=${this.handlePreviousMonthClick}\n ?disabled=${isEqualMonth(minDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"prevMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-left-small\" : \"arrow-right-small\"} size=\"s\"></nord-icon>\n </nord-button>\n\n <nord-button\n class=\"n-calendar-next\"\n @click=${this.handleNextMonthClick}\n ?disabled=${isEqualMonth(maxDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"nextMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-right-small\" : \"arrow-left-small\"} size=\"s\"></nord-icon>\n </nord-button>\n </div>\n </div>\n\n <table\n class=\"n-calendar-table\"\n aria-labelledby=${dialogLabelId}\n @focusin=${this.enableActiveFocus}\n @focusout=${this.disableActiveFocus}\n >\n <thead>\n <tr>\n ${mapWithOffset(\n this.dayNames,\n this.firstDayOfWeek,\n (dayName, i) =>\n html`\n <th class=\"n-calendar-table-header\" scope=\"col\">\n <span aria-hidden=\"true\">${this.dayNamesShort[i]}</span>\n <nord-visually-hidden>${dayName}</nord-visually-hidden>\n </th>\n `\n )}\n </tr>\n </thead>\n <tbody>\n ${chunk(getViewOfMonth(this.focusedDay, this.firstDayOfWeek), 7).map(\n week =>\n html`\n <tr class=\"n-calendar-row\">\n ${week.map(day => {\n const outsideRange = !inRange(day, minDate, maxDate)\n const isToday = isEqual(day, today)\n const isDisabled = this.isDateDisabled(day)\n const isSelected = isEqual(day, valueAsDate)\n const isInMonth = isEqualMonth(day, this.focusedDay)\n const isHighlighted = this.isDateHighlighted(day)\n const formattedDate = this.dateFormatShort.format(day)\n\n const accessibleLabel =\n isHighlighted && typeof isHighlighted === \"string\"\n ? `${formattedDate}, ${isHighlighted}`\n : formattedDate\n\n return html`\n <td class=\"n-calendar-cell\">\n <button\n type=\"button\"\n tabindex=${isEqual(day, this.focusedDay) ? 0 : -1}\n class=${classMap({\n \"n-calendar-day\": true,\n \"is-outside\": outsideRange,\n \"is-month\": isInMonth,\n \"is-highlighted\": isHighlighted,\n })}\n @click=${() => this.handleDaySelect(day)}\n @keydown=${this.shortcuts}\n ?disabled=${outsideRange}\n aria-disabled=${cond(isDisabled, \"true\")}\n aria-pressed=${isSelected ? \"true\" : \"false\"}\n aria-current=${cond(isToday, \"date\")}\n aria-label=${accessibleLabel}\n >\n <span aria-hidden=\"true\">${day.getDate()}</span>\n </button>\n </td>\n `\n })}\n </tr>\n `\n )}\n </tbody>\n </table>\n </div>\n `\n }\n\n @observe(\"value\")\n protected handleValueChange() {\n this.setFocusedDay(parseISODate(this.value) || new Date())\n }\n\n @observe(\"focusedDay\", \"updated\")\n protected handleFocusedDayChange() {\n if (this.activeFocus) {\n this.focusedDayNode.focus()\n }\n }\n\n private handleLangChange() {\n const lang = this.localize.resolvedLang\n this.dateFormatShort = new Intl.DateTimeFormat(lang, { day: \"numeric\", month: \"long\" })\n this.monthNames = getMonthNames(lang, \"long\")\n this.monthNamesShort = getMonthNames(lang, \"short\")\n this.dayNames = getDayNames(lang, \"long\")\n this.dayNamesShort = getDayNames(lang, \"narrow\")\n }\n\n private handleDaySelect = (day: Date) => {\n const isInRange = inRange(day, parseISODate(this.min), parseISODate(this.max))\n const isAllowed = !this.isDateDisabled(day)\n\n if (isInRange && isAllowed) {\n this.value = printISODate(day)\n this.dispatchEvent(new DateSelectEvent(\"change\", day))\n }\n }\n\n private addDays(days: number) {\n this.setFocusedDay(addDays(this.focusedDay, days))\n }\n\n private addMonths(months: number) {\n this.setMonth(this.focusedDay.getMonth() + months)\n }\n\n private addYears(years: number) {\n this.setYear(this.focusedDay.getFullYear() + years)\n }\n\n private startOfWeek() {\n this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private endOfWeek() {\n this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private setMonth(month: number) {\n const min = setMonth(startOfMonth(this.focusedDay), month)\n const max = endOfMonth(min)\n const date = setMonth(this.focusedDay, month)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setYear(year: number) {\n const min = setYear(startOfMonth(this.focusedDay), year)\n const max = endOfMonth(min)\n const date = setYear(this.focusedDay, year)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setFocusedDay(day: Date) {\n this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max))\n this.dispatchEvent(new DateSelectEvent(\"nord-focus-date\", this.focusedDay))\n }\n\n private handleMonthSelect = (e: Event) => {\n this.setMonth(parseInt((e.target as HTMLSelectElement).value, 10))\n }\n\n private handleYearSelect = (e: Event) => {\n this.setYear(parseInt((e.target as HTMLSelectElement).value, 10))\n }\n\n private handleNextMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(1)\n }\n\n private handlePreviousMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(-1)\n }\n\n private enableActiveFocus = () => {\n this.activeFocus = true\n }\n\n private disableActiveFocus = (e: FocusEvent) => {\n const table = e.currentTarget as Node\n const relatedTarget = e.relatedTarget as Node\n\n if (relatedTarget && !table.contains(relatedTarget)) {\n this.activeFocus = false\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-calendar\": Calendar\n }\n}\n"],"names":["preventDefault","e","SwipeController","constructor","host","options","this","hadFirstUpdate","initialTouchX","initialTouchY","handleTouchStart","event","pageX","pageY","changedTouches","handleTouchEnd","matchesGesture","onSwipeEnd","distX","distY","details","initialX","initialY","addController","events","EventController","target","hostUpdated","listen","hostDisconnected","isHorizontalSwipe","Math","abs","isDownwardsSwipe","Icon","registerIcon","arrowRightIcon","arrowLeftIcon","arrowDownIcon","fn","isDateDisabled","isDateHighlighted","Calendar","LitElement","direction","DirectionController","swipe","addMonths","shortcuts","createKeybindingsHandler","ArrowRight","addDays","isLTR","ArrowLeft","ArrowDown","ArrowUp","Home","startOfWeek","End","endOfWeek","PageUp","PageDown","addYears","localize","LocalizeController","onLangChange","handleLangChange","value","firstDayOfWeek","min","max","expand","activeFocus","focusedDay","Date","handleDaySelect","day","isInRange","inRange","parseISODate","isAllowed","printISODate","dispatchEvent","DateSelectEvent","handleMonthSelect","setMonth","parseInt","handleYearSelect","setYear","handleNextMonthClick","handlePreviousMonthClick","enableActiveFocus","disableActiveFocus","table","currentTarget","relatedTarget","contains","focus","_a","focusedDayNode","monthSelectNode","render","today","valueAsDate","focusedMonth","getMonth","focusedYear","getFullYear","minDate","maxDate","minDateStartOfMonth","startOfMonth","undefined","maxDateEndOfMonth","endOfMonth","selectedYear","minYear","maxYear","html","monthNames","term","map","month","i","monthNamesShort","repeat","range","year","isEqualMonth","mapWithOffset","dayNames","dayName","dayNamesShort","chunk","getViewOfMonth","week","outsideRange","isToday","isEqual","isDisabled","isSelected","isInMonth","isHighlighted","formattedDate","dateFormatShort","format","accessibleLabel","classMap","cond","getDate","handleValueChange","setFocusedDay","handleFocusedDayChange","lang","resolvedLang","Intl","DateTimeFormat","getMonthNames","getDayNames","days","months","years","date","clamp","styles","componentStyle","style","__decorate","query","prototype","property","type","Number","reflect","Boolean","attribute","state","observe","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Calendar-3fd55b5d.js","sources":["../../icons/lib/assets/arrow-right-small.js","../../icons/lib/assets/arrow-left-small.js","../../icons/lib/assets/arrow-down-small.js","../src/common/controllers/SwipeController.ts","../src/calendar/Calendar.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.92903.100342-2.12132 2.121318 7.77819 7.77818-7.77828 7.77826 2.12132 2.1213 8.48536-8.4853c.7811-.7811.7811-2.04743 0-2.82848z\" fill=\"currentColor\"/></svg>'\nexport const title = \"arrow-right-small\"\nexport const tags = \"nordicon arrow right small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z\" fill=\"currentColor\"/></svg>'\nexport const title = \"arrow-left-small\"\nexport const tags = \"nordicon arrow left small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m.100342 6.92903 2.121318-2.12132 7.77818 7.77819 7.77826-7.77828 2.1213 2.12132-8.4853 8.48536c-.7811.7811-2.04743.7811-2.82848 0z\" fill=\"currentColor\"/></svg>'\nexport const title = \"arrow-down-small\"\nexport const tags = \"nordicon arrow down small caret pointing triangle chevron\"\n","import { ReactiveController, ReactiveElement } from \"lit\"\nimport { EventController } from \"./EventController.js\"\n\nexport type SwipeDetails = {\n initialX: number\n initialY: number\n pageX: number\n pageY: number\n distX: number\n distY: number\n}\n\nconst preventDefault = (e: Event) => e.preventDefault()\n\ntype SetRequired<T, K extends keyof T> = T & { [Property in K]-?: T[K] }\ntype SwipeControllerOptions = {\n target?: () => HTMLElement\n matchesGesture: (details: SwipeDetails) => boolean\n onSwipeEnd: (details: SwipeDetails) => void\n}\n\nexport class SwipeController implements ReactiveController {\n private events: EventController\n private hadFirstUpdate = false\n\n private initialTouchX: number = 0\n private initialTouchY: number = 0\n private options: SetRequired<SwipeControllerOptions, \"target\">\n\n constructor(host: ReactiveElement, options: SwipeControllerOptions) {\n host.addController(this)\n this.events = new EventController(host)\n\n this.options = {\n target: () => host,\n ...options,\n }\n }\n\n hostUpdated() {\n if (!this.hadFirstUpdate) {\n this.hadFirstUpdate = true\n\n const target = this.options.target()\n this.events.listen(target, \"touchstart\", this.handleTouchStart)\n this.events.listen(target, \"touchmove\", preventDefault)\n this.events.listen(target, \"touchend\", this.handleTouchEnd)\n }\n }\n\n hostDisconnected() {\n this.hadFirstUpdate = false\n }\n\n private handleTouchStart = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n this.initialTouchX = pageX\n this.initialTouchY = pageY\n }\n\n private handleTouchEnd = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n const { matchesGesture, onSwipeEnd } = this.options\n\n const distX = pageX - this.initialTouchX\n const distY = pageY - this.initialTouchY\n const details = { initialX: this.initialTouchX, initialY: this.initialTouchY, pageX, pageY, distX, distY }\n\n if (matchesGesture(details)) {\n event.preventDefault()\n onSwipeEnd(details)\n }\n }\n}\n\nconst THRESHOLD = 70\n\nexport const isHorizontalSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distX) >= THRESHOLD && Math.abs(distY) <= THRESHOLD\n\nexport const isDownwardsSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distY) >= THRESHOLD && Math.abs(distX) <= THRESHOLD && distY > 0\n","import { html, LitElement } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { repeat } from \"lit/directives/repeat.js\"\nimport { createKeybindingsHandler } from \"tinykeys\"\nimport * as arrowRightIcon from \"@nordhealth/icons/lib/assets/arrow-right-small.js\"\nimport * as arrowLeftIcon from \"@nordhealth/icons/lib/assets/arrow-left-small.js\"\nimport * as arrowDownIcon from \"@nordhealth/icons/lib/assets/arrow-down-small.js\"\n\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { isHorizontalSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport { chunk, mapWithOffset } from \"../common/collection.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { range } from \"../common/number.js\"\nimport {\n addDays,\n clamp,\n DaysOfWeek,\n endOfMonth,\n endOfWeek,\n getDayNames,\n getMonthNames,\n getViewOfMonth,\n inRange,\n isEqual,\n isEqualMonth,\n parseISODate,\n printISODate,\n setMonth,\n setYear,\n startOfMonth,\n startOfWeek,\n} from \"../common/dates.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport { DateSelectEvent } from \"./DateSelectEvent.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Calendar.css\"\n\nexport type DatePredicate = (date: Date) => boolean\n\nIcon.registerIcon(arrowRightIcon)\nIcon.registerIcon(arrowLeftIcon)\nIcon.registerIcon(arrowDownIcon)\n\nconst preventDefault = (fn: EventListener) => (e: Event) => {\n e.preventDefault()\n fn(e)\n}\n\nconst isDateDisabled: DatePredicate = () => false\nconst isDateHighlighted = () => false\n\nconst dialogLabelId = \"dialog-header\"\n\n/**\n * Calendar allows user to pick a date. It comes with built-in\n * functionality that allows you to set a minimum and a maximum allowed date.\n * Please note that the date must be passed in ISO-8601 format.\n *\n * @status ready\n * @category list\n * @fires {DateSelectEvent} change - Dispatched when a date is selected and the value changes.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @cssprop [--n-calendar-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-calendar-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n *\n * @localization prevMonthLabel - Accessible label for the previous month button.\n * @localization nextMonthLabel - Accessible label for the next month button.\n * @localization monthSelectLabel - Accessible label for the month select.\n * @localization yearSelectLabel - Accessible label for the year select.\n */\n@customElement(\"nord-calendar\")\nexport default class Calendar extends LitElement {\n static styles = [componentStyle, style]\n\n @query(\".n-calendar-select-month\", true) private monthSelectNode!: HTMLElement\n @query(`button[tabindex=\"0\"]`) private focusedDayNode!: HTMLButtonElement\n\n private direction = new DirectionController(this)\n private swipe = new SwipeController(this, {\n matchesGesture: isHorizontalSwipe,\n onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n })\n\n private shortcuts = createKeybindingsHandler({\n ArrowRight: preventDefault(() => this.addDays(this.direction.isLTR ? 1 : -1)),\n ArrowLeft: preventDefault(() => this.addDays(this.direction.isLTR ? -1 : 1)),\n ArrowDown: preventDefault(() => this.addDays(7)),\n ArrowUp: preventDefault(() => this.addDays(-7)),\n Home: preventDefault(() => this.startOfWeek()),\n End: preventDefault(() => this.endOfWeek()),\n PageUp: preventDefault(() => this.addMonths(-1)),\n PageDown: preventDefault(() => this.addMonths(1)),\n \"Shift+PageUp\": preventDefault(() => this.addYears(-1)),\n \"Shift+PageDown\": preventDefault(() => this.addYears(1)),\n })\n\n private localize = new LocalizeController<\"nord-calendar\">(this, {\n onLangChange: () => this.handleLangChange(),\n })\n\n /**\n * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n * these are used to format dates exclusively for the benefit of screen readers.\n *\n * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n */\n private dateFormatShort!: Intl.DateTimeFormat\n private monthNames!: string[]\n private monthNamesShort!: string[]\n private dayNames!: string[]\n private dayNamesShort!: string[]\n\n /**\n * The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.\n */\n @property() value: string = \"\"\n\n /**\n * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n */\n @property({ type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /**\n * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n */\n @property() min: string = \"\"\n\n /**\n * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n */\n @property() max: string = \"\"\n\n /**\n * Controls whether the calendar expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n */\n @property({ attribute: false }) isDateDisabled: DatePredicate = isDateDisabled\n\n /**\n * Controls which days are highlighted with a small indicator.\n * Returning a \"falsy\" value will not show an indicator.\n * Returning \"truthy\" value will show the indicator, but without an accessible label.\n * Returning a string will show the indicator, and use the string as accessible label.\n * It is recommended to return a string rather than a truthy value whenever possible.\n */\n @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n @state() private activeFocus = false\n @state() private focusedDay = new Date()\n\n /**\n * Programmatically move focus to the calendar.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions & { target: \"day\" | \"month\" }) {\n const target = options?.target ?? \"day\"\n\n if (target === \"day\") {\n this.focusedDayNode.focus()\n } else if (target === \"month\") {\n this.monthSelectNode.focus()\n }\n }\n\n render() {\n const today = new Date()\n const valueAsDate = parseISODate(this.value)\n const focusedMonth = this.focusedDay.getMonth()\n const focusedYear = this.focusedDay.getFullYear()\n\n const minDate = parseISODate(this.min)\n const maxDate = parseISODate(this.max)\n const minDateStartOfMonth = minDate ? startOfMonth(minDate) : undefined\n const maxDateEndOfMonth = maxDate ? endOfMonth(maxDate) : undefined\n\n const selectedYear = (valueAsDate || this.focusedDay).getFullYear()\n const minYear = minDate ? minDate.getFullYear() : selectedYear - 10\n const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10\n\n return html`\n <div class=\"n-calendar\">\n <div class=\"n-calendar-header\">\n <div>\n <nord-visually-hidden>\n <h2 id=${dialogLabelId} aria-live=\"polite\" aria-atomic=\"true\">\n ${this.monthNames[focusedMonth]}, ${this.focusedDay.getFullYear()}\n </h2>\n </nord-visually-hidden>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localize.term(\"monthSelectLabel\")}\n class=\"n-calendar-select-month\"\n @input=${this.handleMonthSelect}\n >\n ${this.monthNames.map(\n (month, i) =>\n html`\n <option\n value=${i}\n ?selected=${i === focusedMonth}\n ?disabled=${!inRange(new Date(focusedYear, i, 1), minDateStartOfMonth, maxDateEndOfMonth)}\n >\n ${month}\n </option>\n `\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.monthNamesShort[focusedMonth]}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localize.term(\"yearSelectLabel\")}\n class=\"n-calendar-select-year\"\n @input=${this.handleYearSelect}\n >\n ${repeat(\n range(minYear, maxYear),\n year => year,\n year => html`<option ?selected=${year === focusedYear}>${year}</option>`\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.focusedDay.getFullYear()}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n </div>\n\n <div class=\"n-calendar-nav\">\n <nord-button\n class=\"n-calendar-prev\"\n @click=${this.handlePreviousMonthClick}\n ?disabled=${isEqualMonth(minDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"prevMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-left-small\" : \"arrow-right-small\"} size=\"s\"></nord-icon>\n </nord-button>\n\n <nord-button\n class=\"n-calendar-next\"\n @click=${this.handleNextMonthClick}\n ?disabled=${isEqualMonth(maxDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"nextMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-right-small\" : \"arrow-left-small\"} size=\"s\"></nord-icon>\n </nord-button>\n </div>\n </div>\n\n <table\n class=\"n-calendar-table\"\n aria-labelledby=${dialogLabelId}\n @focusin=${this.enableActiveFocus}\n @focusout=${this.disableActiveFocus}\n >\n <thead>\n <tr>\n ${mapWithOffset(\n this.dayNames,\n this.firstDayOfWeek,\n (dayName, i) =>\n html`\n <th class=\"n-calendar-table-header\" scope=\"col\">\n <span aria-hidden=\"true\">${this.dayNamesShort[i]}</span>\n <nord-visually-hidden>${dayName}</nord-visually-hidden>\n </th>\n `\n )}\n </tr>\n </thead>\n <tbody>\n ${chunk(getViewOfMonth(this.focusedDay, this.firstDayOfWeek), 7).map(\n week =>\n html`\n <tr class=\"n-calendar-row\">\n ${week.map(day => {\n const outsideRange = !inRange(day, minDate, maxDate)\n const isToday = isEqual(day, today)\n const isDisabled = this.isDateDisabled(day)\n const isSelected = isEqual(day, valueAsDate)\n const isInMonth = isEqualMonth(day, this.focusedDay)\n const isHighlighted = this.isDateHighlighted(day)\n const formattedDate = this.dateFormatShort.format(day)\n\n const accessibleLabel =\n isHighlighted && typeof isHighlighted === \"string\"\n ? `${formattedDate}, ${isHighlighted}`\n : formattedDate\n\n return html`\n <td class=\"n-calendar-cell\">\n <button\n type=\"button\"\n tabindex=${isEqual(day, this.focusedDay) ? 0 : -1}\n class=${classMap({\n \"n-calendar-day\": true,\n \"is-outside\": outsideRange,\n \"is-month\": isInMonth,\n \"is-highlighted\": isHighlighted,\n })}\n @click=${() => this.handleDaySelect(day)}\n @keydown=${this.shortcuts}\n ?disabled=${outsideRange}\n aria-disabled=${cond(isDisabled, \"true\")}\n aria-pressed=${isSelected ? \"true\" : \"false\"}\n aria-current=${cond(isToday, \"date\")}\n aria-label=${accessibleLabel}\n >\n <span aria-hidden=\"true\">${day.getDate()}</span>\n </button>\n </td>\n `\n })}\n </tr>\n `\n )}\n </tbody>\n </table>\n </div>\n `\n }\n\n @observe(\"value\")\n protected handleValueChange() {\n this.setFocusedDay(parseISODate(this.value) || new Date())\n }\n\n @observe(\"focusedDay\", \"updated\")\n protected handleFocusedDayChange() {\n if (this.activeFocus) {\n this.focusedDayNode.focus()\n }\n }\n\n private handleLangChange() {\n const lang = this.localize.resolvedLang\n this.dateFormatShort = new Intl.DateTimeFormat(lang, { day: \"numeric\", month: \"long\" })\n this.monthNames = getMonthNames(lang, \"long\")\n this.monthNamesShort = getMonthNames(lang, \"short\")\n this.dayNames = getDayNames(lang, \"long\")\n this.dayNamesShort = getDayNames(lang, \"narrow\")\n }\n\n private handleDaySelect = (day: Date) => {\n const isInRange = inRange(day, parseISODate(this.min), parseISODate(this.max))\n const isAllowed = !this.isDateDisabled(day)\n\n if (isInRange && isAllowed) {\n this.value = printISODate(day)\n this.dispatchEvent(new DateSelectEvent(\"change\", day))\n }\n }\n\n private addDays(days: number) {\n this.setFocusedDay(addDays(this.focusedDay, days))\n }\n\n private addMonths(months: number) {\n this.setMonth(this.focusedDay.getMonth() + months)\n }\n\n private addYears(years: number) {\n this.setYear(this.focusedDay.getFullYear() + years)\n }\n\n private startOfWeek() {\n this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private endOfWeek() {\n this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private setMonth(month: number) {\n const min = setMonth(startOfMonth(this.focusedDay), month)\n const max = endOfMonth(min)\n const date = setMonth(this.focusedDay, month)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setYear(year: number) {\n const min = setYear(startOfMonth(this.focusedDay), year)\n const max = endOfMonth(min)\n const date = setYear(this.focusedDay, year)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setFocusedDay(day: Date) {\n this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max))\n this.dispatchEvent(new DateSelectEvent(\"nord-focus-date\", this.focusedDay))\n }\n\n private handleMonthSelect = (e: Event) => {\n this.setMonth(parseInt((e.target as HTMLSelectElement).value, 10))\n }\n\n private handleYearSelect = (e: Event) => {\n this.setYear(parseInt((e.target as HTMLSelectElement).value, 10))\n }\n\n private handleNextMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(1)\n }\n\n private handlePreviousMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(-1)\n }\n\n private enableActiveFocus = () => {\n this.activeFocus = true\n }\n\n private disableActiveFocus = (e: FocusEvent) => {\n const table = e.currentTarget as Node\n const relatedTarget = e.relatedTarget as Node\n\n if (relatedTarget && !table.contains(relatedTarget)) {\n this.activeFocus = false\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-calendar\": Calendar\n }\n}\n"],"names":["preventDefault","e","SwipeController","constructor","host","options","this","hadFirstUpdate","initialTouchX","initialTouchY","handleTouchStart","event","pageX","pageY","changedTouches","handleTouchEnd","matchesGesture","onSwipeEnd","distX","distY","details","initialX","initialY","addController","events","EventController","target","hostUpdated","listen","hostDisconnected","isHorizontalSwipe","Math","abs","isDownwardsSwipe","Icon","registerIcon","arrowRightIcon","arrowLeftIcon","arrowDownIcon","fn","isDateDisabled","isDateHighlighted","dialogLabelId","Calendar","LitElement","direction","DirectionController","swipe","addMonths","shortcuts","createKeybindingsHandler","ArrowRight","addDays","isLTR","ArrowLeft","ArrowDown","ArrowUp","Home","startOfWeek","End","endOfWeek","PageUp","PageDown","addYears","localize","LocalizeController","onLangChange","handleLangChange","value","firstDayOfWeek","min","max","expand","activeFocus","focusedDay","Date","handleDaySelect","day","isInRange","inRange","parseISODate","isAllowed","printISODate","dispatchEvent","DateSelectEvent","handleMonthSelect","setMonth","parseInt","handleYearSelect","setYear","handleNextMonthClick","handlePreviousMonthClick","enableActiveFocus","disableActiveFocus","table","currentTarget","relatedTarget","contains","focus","_a","focusedDayNode","monthSelectNode","render","today","valueAsDate","focusedMonth","getMonth","focusedYear","getFullYear","minDate","maxDate","minDateStartOfMonth","startOfMonth","undefined","maxDateEndOfMonth","endOfMonth","selectedYear","minYear","maxYear","html","monthNames","term","map","month","i","monthNamesShort","repeat","range","year","isEqualMonth","mapWithOffset","dayNames","dayName","dayNamesShort","chunk","getViewOfMonth","week","outsideRange","isToday","isEqual","isDisabled","isSelected","isInMonth","isHighlighted","formattedDate","dateFormatShort","format","accessibleLabel","classMap","cond","getDate","handleValueChange","setFocusedDay","handleFocusedDayChange","lang","resolvedLang","Intl","DateTimeFormat","getMonthNames","getDayNames","days","months","years","date","clamp","styles","componentStyle","style","__decorate","query","prototype","property","type","Number","reflect","Boolean","attribute","state","observe","customElement"],"mappings":"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"}
|
package/lib/Calendar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"./query-assigned-elements-
|
|
1
|
+
import"./query-assigned-elements-822fe360.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";import"./query-2d22378e.js";import"./class-map-c0d8e1e5.js";import"./collection-498f2b1f.js";import"./tinykeys.module-84e6cc41.js";export{C as default}from"./Calendar-3fd55b5d.js";import"./Button.js";import"./VisuallyHidden.js";import"./Icon.js";import"./DirectionController-f35f5476.js";import"./LocalizeController.js";import"./cond-09498763.js";import"./number-c3ab3e95.js";import"./dates-5b651fbe.js";import"./observe-a9c6dfb6.js";import"./DateSelectEvent.js";import"./Component-1f694235.js";import"./directive-de55b00a.js";import"./ref-6b46e5ea.js";import"./EventController-d99ebeef.js";import"./LightDomController-8a770234.js";import"./Spinner.js";import"./if-defined-8a007930.js";import"./FocusableMixin-186c69a2.js";import"./InputMixin-d50cb41a.js";import"./SlotController-d733c575.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./events-d9666e88.js";
|
|
2
2
|
//# sourceMappingURL=Calendar.js.map
|
package/lib/Card.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as a,_ as r,s as e,x as d,e as o}from"./query-assigned-elements-
|
|
1
|
+
import{i as a,_ as r,s as e,x as d,e as o}from"./query-assigned-elements-822fe360.js";import{e as n}from"./property-03f59dce.js";import{S as t}from"./SlotController-d733c575.js";import{s}from"./Component-1f694235.js";import"./EventController-d99ebeef.js";const i=a`:host{--_n-card-padding:var(--n-card-padding, var(--n-space-m));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-m));--_n-card-box-shadow:var(--n-card-box-shadow, var(--n-box-shadow-card));--_n-card-border-radius:var(--n-card-border-radius, var(--n-border-radius));color:var(--n-color-text);display:block;inline-size:100%}.n-card{background:var(--n-color-surface);border-radius:var(--_n-card-border-radius);box-shadow:var(--_n-card-box-shadow);block-size:100%;display:flex;flex-direction:column}.header{border-block-end:1px solid var(--n-color-border);padding:var(--n-space-m) var(--_n-card-slot-padding);display:flex;gap:var(--n-space-s);align-items:center;justify-content:space-between;flex-wrap:wrap}:host([padding="l"]){--_n-card-padding:var(--n-card-padding, var(--n-space-l));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-l))}:host([padding=none]){--_n-card-padding:var(--n-card-padding, 0)}slot{display:block}slot:not([name]){padding:var(--_n-card-padding);flex:1}slot[name=footer]{padding:var(--_n-card-slot-padding);padding-block-start:0;white-space:nowrap}::slotted([slot=header-end]){--n-stack-gap:var(--n-space-s);display:flex;gap:var(--n-stack-gap);align-items:center;flex-wrap:wrap;margin-block-start:calc(var(--n-space-xs) * -1)!important;margin-block-end:calc(var(--n-space-xs) * -1)!important}::slotted([slot=header]){font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading);margin:0}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends e{constructor(){super(...arguments),this.headerSlot=new t(this,"header"),this.headerEndSlot=new t(this,"header-end"),this.footerSlot=new t(this,"footer"),this.padding="m"}render(){return d`<div class="n-card"><div class="header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><slot></slot><slot name="${this.footerSlot.slotName}" ?hidden="${this.footerSlot.isEmpty}"></slot></div>`}};l.styles=[s,i],r([n({reflect:!0})],l.prototype,"padding",void 0),l=r([o("nord-card")],l);var c=l;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Card.js.map
|
package/lib/Checkbox.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,x as n,_ as o,e as r,s as i}from"./query-assigned-elements-
|
|
1
|
+
import{i as e,x as n,_ as o,e as r,s as i}from"./query-assigned-elements-822fe360.js";import{e as c}from"./property-03f59dce.js";import{l as a}from"./if-defined-8a007930.js";import{n as t}from"./ref-6b46e5ea.js";import s from"./Icon.js";import{F as l}from"./FocusableMixin-186c69a2.js";import{F as d}from"./FormAssociatedMixin-5fedde68.js";import{I as p}from"./InputMixin-d50cb41a.js";import{S as h}from"./SizeMixin-f04ac402.js";import{s as m}from"./Component-1f694235.js";import{s as v}from"./FormField-3226fb17.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./cond-09498763.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";var b=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18.9985 5.35769-9.8419 10.83221c-.27855.3095-.68088.4952-1.11417.5107h-.03095c-.41782 0-.80469-.1548-1.0987-.4488l-5.91132-5.9113 2.18193-2.1819 4.76619 4.7662 8.75862-9.62524 2.2903 2.08908z" fill="currentColor"/></svg>',title:"interface-checked-small",tags:"nordicon interface checked small symbol checkmark done ready"});var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m20 8.49976v3.00004h-20v-3.00004z" fill="currentColor"/></svg>',title:"interface-remove-small",tags:"nordicon interface remove small delete erase minimize line"});const f=e`:host{--_n-checkbox-size:calc(var(--n-space-m) * 1.25);--_n-checkbox-accent-color:var(--n-color-accent);--_n-checkbox-border-color:var(--n-color-border-hover);--_n-checkbox-icon-size:var(--n-size-icon-s);display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{-moz-appearance:none;-webkit-appearance:none;appearance:none;border:1px solid var(--_n-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-checkbox-size);block-size:var(--_n-checkbox-size);cursor:pointer}input:checked,input:indeterminate{--_n-checkbox-border-color:var(--n-color-accent);background:var(--_n-checkbox-accent-color)}input[aria-invalid]{--_n-checkbox-accent-color:var(--n-color-status-danger);--_n-checkbox-border-color:var(--_n-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}input:active{opacity:.8}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{--_n-checkbox-accent-color:var(--n-color-border-strong);--_n-checkbox-border-color:var(--_n-checkbox-accent-color);background:var(--_n-checkbox-accent-color);cursor:default;opacity:1}nord-icon{--_n-icon-size:var(--_n-checkbox-icon-size);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:var(--n-space-xs);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.n-label-container{margin-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-form);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([size="s"]){--_n-checkbox-size:var(--n-space-m);--_n-checkbox-icon-size:var(--n-size-icon-xs)}:host([size="s"]) nord-icon{inset:calc(var(--n-space-s)/ 2.6)}:host([size="s"]:not([hide-label])) .n-input-container{margin:calc(var(--n-space-s)/ 2.6) 0}:host([size="l"]){--_n-checkbox-size:var(--n-space-l);--_n-checkbox-icon-size:var(--n-size-icon-m)}`;s.registerIcon(b),s.registerIcon(u);let k=class extends(h(d(p(l(i))))){constructor(){super(...arguments),this.indeterminate=!1,this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){return n`<div class="n-flex"><div class="n-input-container"><input ${t(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" .indeterminate="${this.indeterminate}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small"></nord-icon></div><div class="n-expand">${this.renderLabel()} ${this.renderError()}</div></div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};k.styles=[m,v,f],o([c({type:Boolean})],k.prototype,"indeterminate",void 0),o([c({type:Boolean})],k.prototype,"checked",void 0),k=o([r("nord-checkbox")],k);var x=k;export{x as default};
|
|
2
2
|
//# sourceMappingURL=Checkbox.js.map
|