@nordhealth/components 1.0.0-alpha.19 → 1.0.0-alpha.23

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.
@@ -87,7 +87,7 @@
87
87
  "text": "\"button\" | \"submit\" | \"reset\""
88
88
  },
89
89
  "default": "\"submit\"",
90
- "description": "The type of button.",
90
+ "description": "The type of the button.",
91
91
  "attribute": "type",
92
92
  "reflects": true
93
93
  },
@@ -255,7 +255,7 @@
255
255
  "text": "\"button\" | \"submit\" | \"reset\""
256
256
  },
257
257
  "default": "\"submit\"",
258
- "description": "The type of button.",
258
+ "description": "The type of the button.",
259
259
  "fieldName": "type"
260
260
  },
261
261
  {
@@ -426,7 +426,7 @@
426
426
  "declarations": [
427
427
  {
428
428
  "kind": "class",
429
- "description": "Select is an input component that provides a menu of options to choose from.",
429
+ "description": "Select lets user choose one option from an options menu. Consider using select when you have 6 or more options.",
430
430
  "name": "Select",
431
431
  "slots": [
432
432
  {
@@ -446,6 +446,7 @@
446
446
  "text": "boolean"
447
447
  },
448
448
  "default": "false",
449
+ "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
449
450
  "attribute": "hide-label"
450
451
  },
451
452
  {
@@ -671,6 +672,7 @@
671
672
  "text": "boolean"
672
673
  },
673
674
  "default": "false",
675
+ "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
674
676
  "fieldName": "hideLabel"
675
677
  },
676
678
  {
@@ -0,0 +1,28 @@
1
+ import{x as t,_ as o,r as n,y as e,a as r,n as s}from"./custom-element-a6d824b8.js";import{e as i}from"./property-03f59dce.js";
2
+ /**
3
+ * @license
4
+ * Copyright 2018 Google LLC
5
+ * SPDX-License-Identifier: BSD-3-Clause
6
+ */const a=o=>null!=o?o:t
7
+ /**
8
+ * @license
9
+ * Copyright 2020 Google LLC
10
+ * SPDX-License-Identifier: BSD-3-Clause
11
+ */,l=2;
12
+ /**
13
+ * @license
14
+ * Copyright 2017 Google LLC
15
+ * SPDX-License-Identifier: BSD-3-Clause
16
+ */
17
+ const c=(t,o)=>{var n,e;const r=t._$AN;if(void 0===r)return!1;for(const t of r)null===(e=(n=t)._$AO)||void 0===e||e.call(n,o,!1),c(t,o);return!0},d=t=>{let o,n;do{if(void 0===(o=t._$AM))break;n=o._$AN,n.delete(t),t=o}while(0===(null==n?void 0:n.size))},h=t=>{for(let o;o=t._$AM;t=o){let n=o._$AN;if(void 0===n)o._$AN=n=new Set;else if(n.has(t))break;n.add(t),b(o)}};function u(t){void 0!==this._$AN?(d(this),this._$AM=t,h(this)):this._$AM=t}function v(t,o=!1,n=0){const e=this._$AH,r=this._$AN;if(void 0!==r&&0!==r.size)if(o)if(Array.isArray(e))for(let t=n;t<e.length;t++)c(e[t],!1),d(e[t]);else null!=e&&(c(e,!1),d(e));else c(this,t)}const b=t=>{var o,n,e,r;t.type==l&&(null!==(o=(e=t)._$AP)&&void 0!==o||(e._$AP=v),null!==(n=(r=t)._$AQ)&&void 0!==n||(r._$AQ=u))};class p{}const f=new WeakMap,y=(t=>(...o)=>({_$litDirective$:t,values:o}))(class extends class extends class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,o,n){this._$Ct=t,this._$AM=o,this._$Ci=n}_$AS(t,o){return this.update(t,o)}update(t,o){return this.render(...o)}}{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,o,n){super._$AT(t,o,n),h(this),this.isConnected=t._$AU}_$AO(t,o=!0){var n,e;t!==this.isConnected&&(this.isConnected=t,t?null===(n=this.reconnected)||void 0===n||n.call(this):null===(e=this.disconnected)||void 0===e||e.call(this)),o&&(c(this,t),d(this))}setValue(t){if((t=>void 0===t.strings)
18
+ /**
19
+ * @license
20
+ * Copyright 2017 Google LLC
21
+ * SPDX-License-Identifier: BSD-3-Clause
22
+ */(this._$Ct))this._$Ct._$AI(t,this);else{const o=[...this._$Ct._$AH];o[this._$Ci]=t,this._$Ct._$AI(o,this,0)}}disconnected(){}reconnected(){}}
23
+ /**
24
+ * @license
25
+ * Copyright 2020 Google LLC
26
+ * SPDX-License-Identifier: BSD-3-Clause
27
+ */{render(o){return t}update(o,[n]){var e;const r=n!==this.U;return r&&void 0!==this.U&&this.nt(void 0),(r||this.rt!==this.lt)&&(this.U=n,this.ht=null===(e=o.options)||void 0===e?void 0:e.host,this.nt(this.lt=o.element)),t}nt(t){"function"==typeof this.U?(void 0!==f.get(this.U)&&this.U.call(this.ht,void 0),f.set(this.U,t),void 0!==t&&this.U.call(this.ht,t)):this.U.value=t}get rt(){var t;return"function"==typeof this.U?f.get(this.U):null===(t=this.U)||void 0===t?void 0:t.value}disconnected(){this.rt===this.lt&&this.nt(void 0)}reconnected(){this.nt(this.lt)}});function x(t){return class extends t{constructor(){super(...arguments),this.focusableRef=new p}focus(t){var o;null===(o=this.focusableRef.value)||void 0===o||o.focus(t)}blur(){var t;null===(t=this.focusableRef.value)||void 0===t||t.blur()}click(){var t;null===(t=this.focusableRef.value)||void 0===t||t.click()}}}function $(t){class n extends t{constructor(){super(...arguments),this.disabled=!1}get form(){return this.closest("form")}}return o([i({type:Boolean})],n.prototype,"disabled",void 0),o([i()],n.prototype,"name",void 0),o([i()],n.prototype,"value",void 0),n}const g=n`:host{display:block}*,::after,::before{box-sizing:border-box}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-button-background-color,var(--n-color-button));border-radius:var(--n-button-border-radius,var(--n-border-radius-s));border:1px var(--n-button-border-style,solid) var(--n-button-border-color,var(--n-color-border-strong));box-shadow:var(--n-button-box-shadow,var(--n-box-shadow));color:var(--n-button-color,var(--n-color-text));cursor:pointer;display:flex;gap:var(--n-space-s);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-button-font-size,var(--n-font-size-m));font-weight:var(--n-button-font-weight,var(--n-font-weight));line-height:var(--n-line-height-tight);margin:0;min-block-size:var(--n-button-min-height,var(--n-space-xl));padding:var(--n-button-padding-y,var(--n-space-s)) var(--n-button-padding-x,calc(var(--n-space-m)/ 1.2));text-align:var(--n-button-text-align,center);text-decoration:none;transition:all .1s ease;-webkit-user-select:none;user-select:none;inline-size:fit-content}:host([expand]) .n-button{inline-size:100%}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover){--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}:host([disabled]){--n-button-background-color:var(--n-color-border);--n-button-box-shadow:none;--n-button-border-color:var(--n-button-background-color);--n-button-color:var(--n-color-text-weaker);opacity:.5;pointer-events:none}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--n-button-background-color:var(--n-color-primary);--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-color:var(--n-color-text-inverse);--n-button-font-weight:var(--n-font-weight-active)}:host([variant=primary]:hover){--n-button-background-color:var(--n-color-primary-strong)}:host([variant=dashed]){--n-button-color:var(--n-color-text-weaker);--n-button-border-color:var(--n-color-border-hover);--n-button-border-style:dashed;--n-button-box-shadow:none}:host([variant=dashed]:hover){--n-button-color:var(--n-color-text)}:host([variant=plain]){--n-button-border-color:transparent;--n-button-box-shadow:none}:host([size="s"]){--n-button-font-size:var(--n-font-size-s);--n-button-min-height:var(--n-space-l);--n-button-padding-y:calc(var(--n-space-s) / 1.5);--n-button-padding-x:var(--n-space-s)}:host([size="s"]) .n-button{gap:calc(var(--n-space-s)/ 2)}::slotted(button[slot=proxy]){display:none}::slotted(svg.stroke){stroke:var(--n-color-icon)}:host(:hover) ::slotted(svg.stroke){stroke:var(--n-color-icon-hover)}::slotted(svg.fill){fill:var(--n-color-icon)}:host(:hover) ::slotted(svg.fill){fill:var(--n-color-icon-hover)}`;let m=class extends($(x(s))){constructor(){super(...arguments),this._proxyButton=document.createElement("button"),this.variant="default",this.type="submit",this.size="m",this.expand=!1}connectedCallback(){super.connectedCallback(),this.syncProxyButton()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupProxyButton()}updated(){this.syncProxyButton()}render(){const t=e`<slot name="before"></slot><div class="n-content"><slot></slot></div><slot name="after"></slot>`;return this.href?e`<a ${y(this.focusableRef)} class="n-button" href="${this.href}">${t}</a>`:e`<slot name="proxy"></slot><button ${y(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${a(this.name)}" value="${a(this.value)}" @click="${this.handleClick}">${t}</button>`}handleClick(){this._proxyButton.click()}get isFormAssociated(){return!this.href&&this.form}syncProxyButton(){const t=this._proxyButton;t.slot="proxy",t.className="n-button-proxy",t.disabled=this.disabled,t.type=this.type,this.name?t.name=this.name:t.removeAttribute("name"),this.value?t.value=this.value:t.removeAttribute("value"),this.isFormAssociated?this.appendChild(t):this.cleanupProxyButton()}cleanupProxyButton(){this._proxyButton.remove()}};m.styles=g,o([i({reflect:!0})],m.prototype,"variant",void 0),o([i({reflect:!0})],m.prototype,"type",void 0),o([i({reflect:!0})],m.prototype,"size",void 0),o([i({reflect:!0})],m.prototype,"href",void 0),o([i({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),m=o([r("nord-button")],m);var _=m;export{_ as B,x as F,$ as I,a as l,y as n};
28
+ //# sourceMappingURL=Button-382ffa7f.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button-f48a2f6d.js","sources":["../node_modules/lit/node_modules/lit-html/directives/if-defined.js","../node_modules/lit/node_modules/lit-html/directive.js","../node_modules/lit/node_modules/lit-html/async-directive.js","../node_modules/lit/node_modules/lit-html/directives/ref.js","../node_modules/lit/node_modules/lit-html/directive-helpers.js","../src/common/mixins/FocusableMixin.ts","../src/common/mixins/InputMixin.ts","../src/button/Button.ts"],"sourcesContent":["import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const l=l=>null!=l?l:t;export{l as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}export{i as Directive,t as PartType,e as directive};\n//# sourceMappingURL=directive.js.map\n","import{isSingleExpression as i}from\"./directive-helpers.js\";import{Directive as t,PartType as s}from\"./directive.js\";export{directive}from\"./directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=(i,t)=>{var s,o;const n=i._$AN;if(void 0===n)return!1;for(const i of n)null===(o=(s=i)._$AO)||void 0===o||o.call(s,t,!1),e(i,t);return!0},o=i=>{let t,s;do{if(void 0===(t=i._$AM))break;s=t._$AN,s.delete(i),i=t}while(0===(null==s?void 0:s.size))},n=i=>{for(let t;t=i._$AM;i=t){let s=t._$AN;if(void 0===s)t._$AN=s=new Set;else if(s.has(i))break;s.add(i),l(t)}};function r(i){void 0!==this._$AN?(o(this),this._$AM=i,n(this)):this._$AM=i}function h(i,t=!1,s=0){const n=this._$AH,r=this._$AN;if(void 0!==r&&0!==r.size)if(t)if(Array.isArray(n))for(let i=s;i<n.length;i++)e(n[i],!1),o(n[i]);else null!=n&&(e(n,!1),o(n));else e(this,i)}const l=i=>{var t,e,o,n;i.type==s.CHILD&&(null!==(t=(o=i)._$AP)&&void 0!==t||(o._$AP=h),null!==(e=(n=i)._$AQ)&&void 0!==e||(n._$AQ=r))};class d extends t{constructor(){super(...arguments),this._$AN=void 0}_$AT(i,t,s){super._$AT(i,t,s),n(this),this.isConnected=i._$AU}_$AO(i,t=!0){var s,n;i!==this.isConnected&&(this.isConnected=i,i?null===(s=this.reconnected)||void 0===s||s.call(this):null===(n=this.disconnected)||void 0===n||n.call(this)),t&&(e(this,i),o(this))}setValue(t){if(i(this._$Ct))this._$Ct._$AI(t,this);else{const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0)}}disconnected(){}reconnected(){}}export{d as AsyncDirective};\n//# sourceMappingURL=async-directive.js.map\n","import{nothing as t}from\"../lit-html.js\";import{AsyncDirective as i}from\"../async-directive.js\";import{directive as s}from\"../directive.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=()=>new o;class o{}const h=new WeakMap,n=s(class extends i{render(i){return t}update(i,[s]){var e;const o=s!==this.U;return o&&void 0!==this.U&&this.nt(void 0),(o||this.rt!==this.lt)&&(this.U=s,this.ht=null===(e=i.options)||void 0===e?void 0:e.host,this.nt(this.lt=i.element)),t}nt(t){\"function\"==typeof this.U?(void 0!==h.get(this.U)&&this.U.call(this.ht,void 0),h.set(this.U,t),void 0!==t&&this.U.call(this.ht,t)):this.U.value=t}get rt(){var t;return\"function\"==typeof this.U?h.get(this.U):null===(t=this.U)||void 0===t?void 0:t.value}disconnected(){this.rt===this.lt&&this.nt(void 0)}reconnected(){this.nt(this.lt)}});export{e as createRef,n as ref};\n//# sourceMappingURL=ref.js.map\n","import{_$LH as o}from\"./lit-html.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const{H:i}=o,t=o=>null===o||\"object\"!=typeof o&&\"function\"!=typeof o,n={HTML:1,SVG:2},v=(o,i)=>{var t,n;return void 0===i?void 0!==(null===(t=o)||void 0===t?void 0:t._$litType$):(null===(n=o)||void 0===n?void 0:n._$litType$)===i},l=o=>{var i;return void 0!==(null===(i=o)||void 0===i?void 0:i._$litDirective$)},d=o=>{var i;return null===(i=o)||void 0===i?void 0:i._$litDirective$},r=o=>void 0===o.strings,e=()=>document.createComment(\"\"),u=(o,t,n)=>{var v;const l=o._$AA.parentNode,d=void 0===t?o._$AB:t._$AA;if(void 0===n){const t=l.insertBefore(e(),d),v=l.insertBefore(e(),d);n=new i(t,v,o,o.options)}else{const i=n._$AB.nextSibling,t=n._$AM,r=t!==o;if(r){let i;null===(v=n._$AQ)||void 0===v||v.call(n,o),n._$AM=o,void 0!==n._$AP&&(i=o._$AU)!==t._$AU&&n._$AP(i)}if(i!==d||r){let o=n._$AA;for(;o!==i;){const i=o.nextSibling;l.insertBefore(o,d),o=i}}}return n},c=(o,i,t=o)=>(o._$AI(i,t),o),f={},s=(o,i=f)=>o._$AH=i,a=o=>o._$AH,m=o=>{var i;null===(i=o._$AP)||void 0===i||i.call(o,!1,!0);let t=o._$AA;const n=o._$AB.nextSibling;for(;t!==n;){const o=t.nextSibling;t.remove(),t=o}},p=o=>{o._$AR()};export{n as TemplateResultType,p as clearPart,a as getCommittedValue,d as getDirectiveClass,u as insertPart,l as isDirectiveResult,t as isPrimitive,r as isSingleExpression,v as isTemplateResult,m as removePart,c as setChildPartValue,s as setCommittedValue};\n//# sourceMappingURL=directive-helpers.js.map\n","/* eslint-disable max-classes-per-file */\n\nimport { LitElement } from \"lit\"\nimport { createRef, Ref } from \"lit/directives/ref.js\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FocusableMixinInterface {\n protected focusableRef: Ref<HTMLElement>\n focus(options?: FocusOptions): void\n blur(): void\n click(): void\n}\n\nexport function FocusableMixin<T extends Constructable<LitElement>>(superClass: T) {\n class FocusableElement extends superClass {\n protected focusableRef = createRef<HTMLButtonElement>()\n\n /**\n * Programmatically move focus to the component\n * @param {FocusOptions} options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions) {\n this.focusableRef.value?.focus(options)\n }\n\n /**\n * Programmatically remove focus from the component.\n */\n blur() {\n this.focusableRef.value?.blur()\n }\n\n /**\n * Programmatically simulates a click on the component.\n */\n click() {\n this.focusableRef.value?.click()\n }\n }\n\n return FocusableElement as unknown as Constructable<FocusableMixinInterface> & T\n}\n","/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class InputMixinInterface {\n name: string\n value: string\n disabled: boolean\n form?: HTMLFormElement\n}\n\nexport function InputMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<InputMixinInterface> & T {\n class InputElement extends superClass {\n /**\n * Makes the input component disabled.\n * This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.\n */\n @property({ type: Boolean }) disabled = false\n\n /**\n * The name of the input component.\n */\n @property() name?: string\n\n /**\n * The value of the input component.\n */\n @property() value?: string\n\n /**\n * Gets the form, if any, associated with the input element.\n */\n get form() {\n return this.closest(\"form\")\n }\n }\n\n return InputElement as unknown as Constructor<InputMixinInterface> & T\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport style from \"./Button.css\"\n\n/**\n * Buttons are used for interface actions. Primary style should be used only once per view for main call-to-action.\n *\n * @status draft\n * @slot - The button content\n * @slot before - Used to place content before button text. Typically used for icons.\n * @slot after - Used to place content after button text. Typically used for icons.\n */\n@customElement(\"nord-button\")\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n static styles = style\n\n private _proxyButton = document.createElement(\"button\")\n\n /**\n * The style variant of the button.\n */\n @property({ reflect: true }) variant: \"default\" | \"primary\" | \"dashed\" | \"plain\" = \"default\"\n\n /**\n * The type of button.\n */\n @property({ reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"submit\"\n\n /**\n * The size of the button.\n * This affects font-size and padding.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" = \"m\"\n\n /**\n * When provided, renders the button as a link,\n * with it's href attribute set to the given value.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * Controls whether the button expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n connectedCallback() {\n super.connectedCallback()\n this.syncProxyButton()\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.cleanupProxyButton()\n }\n\n updated() {\n this.syncProxyButton()\n }\n\n render() {\n const innards = html`\n <slot name=\"before\"></slot>\n <div class=\"n-content\">\n <slot></slot>\n </div>\n <slot name=\"after\"></slot>\n `\n\n return this.href\n ? html`<a ${ref(this.focusableRef)} class=\"n-button\" href=${this.href}>${innards}</a>`\n : html`\n <slot name=\"proxy\"></slot>\n <button\n ${ref(this.focusableRef)}\n class=\"n-button\"\n ?disabled=${this.disabled}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n @click=${this.handleClick}\n >\n ${innards}\n </button>\n `\n }\n\n private handleClick() {\n this._proxyButton.click()\n }\n\n private get isFormAssociated() {\n return !this.href && this.form\n }\n\n private syncProxyButton() {\n const proxy = this._proxyButton\n\n proxy.slot = \"proxy\"\n proxy.className = \"n-button-proxy\"\n proxy.disabled = this.disabled\n proxy.type = this.type\n\n if (this.name) {\n proxy.name = this.name\n } else {\n proxy.removeAttribute(\"name\")\n }\n if (this.value) {\n proxy.value = this.value\n } else {\n proxy.removeAttribute(\"value\")\n }\n\n if (this.isFormAssociated) {\n this.appendChild(proxy)\n } else {\n this.cleanupProxyButton()\n }\n }\n\n private cleanupProxyButton() {\n this._proxyButton.remove()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button\": Button\n }\n}\n"],"names":["l","t","e","i","s","o","n","_$AN","_$AO","call","_$AM","delete","size","Set","has","add","r","this","h","_$AH","Array","isArray","length","type","_$AP","_$AQ","WeakMap","_$litDirective$","values","constructor","_$AU","_$AT","_$Ct","_$Ci","_$AS","update","render","super","arguments","isConnected","reconnected","disconnected","setValue","strings","_$AI","U","nt","rt","lt","ht","options","host","element","get","set","value","FocusableMixin","superClass","focus","focusableRef","blur","click","InputMixin","InputElement","form","closest","__decorate","property","Boolean","Button","LitElement","document","createElement","connectedCallback","syncProxyButton","disconnectedCallback","cleanupProxyButton","updated","innards","html","href","ref","disabled","ifDefined","name","handleClick","_proxyButton","isFormAssociated","proxy","slot","className","removeAttribute","appendChild","remove","style","reflect","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"Button-382ffa7f.js","sources":["../node_modules/lit/node_modules/lit-html/directives/if-defined.js","../node_modules/lit/node_modules/lit-html/directive.js","../node_modules/lit/node_modules/lit-html/async-directive.js","../node_modules/lit/node_modules/lit-html/directives/ref.js","../node_modules/lit/node_modules/lit-html/directive-helpers.js","../src/common/mixins/FocusableMixin.ts","../src/common/mixins/InputMixin.ts","../src/button/Button.ts"],"sourcesContent":["import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const l=l=>null!=l?l:t;export{l as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}export{i as Directive,t as PartType,e as directive};\n//# sourceMappingURL=directive.js.map\n","import{isSingleExpression as i}from\"./directive-helpers.js\";import{Directive as t,PartType as s}from\"./directive.js\";export{directive}from\"./directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=(i,t)=>{var s,o;const n=i._$AN;if(void 0===n)return!1;for(const i of n)null===(o=(s=i)._$AO)||void 0===o||o.call(s,t,!1),e(i,t);return!0},o=i=>{let t,s;do{if(void 0===(t=i._$AM))break;s=t._$AN,s.delete(i),i=t}while(0===(null==s?void 0:s.size))},n=i=>{for(let t;t=i._$AM;i=t){let s=t._$AN;if(void 0===s)t._$AN=s=new Set;else if(s.has(i))break;s.add(i),l(t)}};function r(i){void 0!==this._$AN?(o(this),this._$AM=i,n(this)):this._$AM=i}function h(i,t=!1,s=0){const n=this._$AH,r=this._$AN;if(void 0!==r&&0!==r.size)if(t)if(Array.isArray(n))for(let i=s;i<n.length;i++)e(n[i],!1),o(n[i]);else null!=n&&(e(n,!1),o(n));else e(this,i)}const l=i=>{var t,e,o,n;i.type==s.CHILD&&(null!==(t=(o=i)._$AP)&&void 0!==t||(o._$AP=h),null!==(e=(n=i)._$AQ)&&void 0!==e||(n._$AQ=r))};class d extends t{constructor(){super(...arguments),this._$AN=void 0}_$AT(i,t,s){super._$AT(i,t,s),n(this),this.isConnected=i._$AU}_$AO(i,t=!0){var s,n;i!==this.isConnected&&(this.isConnected=i,i?null===(s=this.reconnected)||void 0===s||s.call(this):null===(n=this.disconnected)||void 0===n||n.call(this)),t&&(e(this,i),o(this))}setValue(t){if(i(this._$Ct))this._$Ct._$AI(t,this);else{const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0)}}disconnected(){}reconnected(){}}export{d as AsyncDirective};\n//# sourceMappingURL=async-directive.js.map\n","import{nothing as t}from\"../lit-html.js\";import{AsyncDirective as i}from\"../async-directive.js\";import{directive as s}from\"../directive.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=()=>new o;class o{}const h=new WeakMap,n=s(class extends i{render(i){return t}update(i,[s]){var e;const o=s!==this.U;return o&&void 0!==this.U&&this.nt(void 0),(o||this.rt!==this.lt)&&(this.U=s,this.ht=null===(e=i.options)||void 0===e?void 0:e.host,this.nt(this.lt=i.element)),t}nt(t){\"function\"==typeof this.U?(void 0!==h.get(this.U)&&this.U.call(this.ht,void 0),h.set(this.U,t),void 0!==t&&this.U.call(this.ht,t)):this.U.value=t}get rt(){var t;return\"function\"==typeof this.U?h.get(this.U):null===(t=this.U)||void 0===t?void 0:t.value}disconnected(){this.rt===this.lt&&this.nt(void 0)}reconnected(){this.nt(this.lt)}});export{e as createRef,n as ref};\n//# sourceMappingURL=ref.js.map\n","import{_$LH as o}from\"./lit-html.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const{H:i}=o,t=o=>null===o||\"object\"!=typeof o&&\"function\"!=typeof o,n={HTML:1,SVG:2},v=(o,i)=>{var t,n;return void 0===i?void 0!==(null===(t=o)||void 0===t?void 0:t._$litType$):(null===(n=o)||void 0===n?void 0:n._$litType$)===i},l=o=>{var i;return void 0!==(null===(i=o)||void 0===i?void 0:i._$litDirective$)},d=o=>{var i;return null===(i=o)||void 0===i?void 0:i._$litDirective$},r=o=>void 0===o.strings,e=()=>document.createComment(\"\"),u=(o,t,n)=>{var v;const l=o._$AA.parentNode,d=void 0===t?o._$AB:t._$AA;if(void 0===n){const t=l.insertBefore(e(),d),v=l.insertBefore(e(),d);n=new i(t,v,o,o.options)}else{const i=n._$AB.nextSibling,t=n._$AM,r=t!==o;if(r){let i;null===(v=n._$AQ)||void 0===v||v.call(n,o),n._$AM=o,void 0!==n._$AP&&(i=o._$AU)!==t._$AU&&n._$AP(i)}if(i!==d||r){let o=n._$AA;for(;o!==i;){const i=o.nextSibling;l.insertBefore(o,d),o=i}}}return n},c=(o,i,t=o)=>(o._$AI(i,t),o),f={},s=(o,i=f)=>o._$AH=i,a=o=>o._$AH,m=o=>{var i;null===(i=o._$AP)||void 0===i||i.call(o,!1,!0);let t=o._$AA;const n=o._$AB.nextSibling;for(;t!==n;){const o=t.nextSibling;t.remove(),t=o}},p=o=>{o._$AR()};export{n as TemplateResultType,p as clearPart,a as getCommittedValue,d as getDirectiveClass,u as insertPart,l as isDirectiveResult,t as isPrimitive,r as isSingleExpression,v as isTemplateResult,m as removePart,c as setChildPartValue,s as setCommittedValue};\n//# sourceMappingURL=directive-helpers.js.map\n","/* eslint-disable max-classes-per-file */\n\nimport { LitElement } from \"lit\"\nimport { createRef, Ref } from \"lit/directives/ref.js\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FocusableMixinInterface {\n protected focusableRef: Ref<HTMLElement>\n focus(options?: FocusOptions): void\n blur(): void\n click(): void\n}\n\nexport function FocusableMixin<T extends Constructable<LitElement>>(superClass: T) {\n class FocusableElement extends superClass {\n protected focusableRef = createRef<HTMLButtonElement>()\n\n /**\n * Programmatically move focus to the component\n * @param {FocusOptions} options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions) {\n this.focusableRef.value?.focus(options)\n }\n\n /**\n * Programmatically remove focus from the component.\n */\n blur() {\n this.focusableRef.value?.blur()\n }\n\n /**\n * Programmatically simulates a click on the component.\n */\n click() {\n this.focusableRef.value?.click()\n }\n }\n\n return FocusableElement as unknown as Constructable<FocusableMixinInterface> & T\n}\n","/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class InputMixinInterface {\n name: string\n value: string\n disabled: boolean\n form?: HTMLFormElement\n}\n\nexport function InputMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<InputMixinInterface> & T {\n class InputElement extends superClass {\n /**\n * Makes the input component disabled.\n * This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.\n */\n @property({ type: Boolean }) disabled = false\n\n /**\n * The name of the input component.\n */\n @property() name?: string\n\n /**\n * The value of the input component.\n */\n @property() value?: string\n\n /**\n * Gets the form, if any, associated with the input element.\n */\n get form() {\n return this.closest(\"form\")\n }\n }\n\n return InputElement as unknown as Constructor<InputMixinInterface> & T\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport style from \"./Button.css\"\n\n/**\n * Buttons are used for interface actions. Primary style should be used only once per view for main call-to-action.\n *\n * @status draft\n * @slot - The button content\n * @slot before - Used to place content before button text. Typically used for icons.\n * @slot after - Used to place content after button text. Typically used for icons.\n */\n@customElement(\"nord-button\")\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n static styles = style\n\n private _proxyButton = document.createElement(\"button\")\n\n /**\n * The style variant of the button.\n */\n @property({ reflect: true }) variant: \"default\" | \"primary\" | \"dashed\" | \"plain\" = \"default\"\n\n /**\n * The type of the button.\n */\n @property({ reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"submit\"\n\n /**\n * The size of the button.\n * This affects font-size and padding.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" = \"m\"\n\n /**\n * When provided, renders the button as a link,\n * with it's href attribute set to the given value.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * Controls whether the button expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n connectedCallback() {\n super.connectedCallback()\n this.syncProxyButton()\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.cleanupProxyButton()\n }\n\n updated() {\n this.syncProxyButton()\n }\n\n render() {\n const innards = html`\n <slot name=\"before\"></slot>\n <div class=\"n-content\">\n <slot></slot>\n </div>\n <slot name=\"after\"></slot>\n `\n\n return this.href\n ? html`<a ${ref(this.focusableRef)} class=\"n-button\" href=${this.href}>${innards}</a>`\n : html`\n <slot name=\"proxy\"></slot>\n <button\n ${ref(this.focusableRef)}\n class=\"n-button\"\n ?disabled=${this.disabled}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n @click=${this.handleClick}\n >\n ${innards}\n </button>\n `\n }\n\n private handleClick() {\n this._proxyButton.click()\n }\n\n private get isFormAssociated() {\n return !this.href && this.form\n }\n\n private syncProxyButton() {\n const proxy = this._proxyButton\n\n proxy.slot = \"proxy\"\n proxy.className = \"n-button-proxy\"\n proxy.disabled = this.disabled\n proxy.type = this.type\n\n if (this.name) {\n proxy.name = this.name\n } else {\n proxy.removeAttribute(\"name\")\n }\n if (this.value) {\n proxy.value = this.value\n } else {\n proxy.removeAttribute(\"value\")\n }\n\n if (this.isFormAssociated) {\n this.appendChild(proxy)\n } else {\n this.cleanupProxyButton()\n }\n }\n\n private cleanupProxyButton() {\n this._proxyButton.remove()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button\": Button\n }\n}\n"],"names":["l","t","e","i","s","o","n","_$AN","_$AO","call","_$AM","delete","size","Set","has","add","r","this","h","_$AH","Array","isArray","length","type","_$AP","_$AQ","WeakMap","_$litDirective$","values","constructor","_$AU","_$AT","_$Ct","_$Ci","_$AS","update","render","super","arguments","isConnected","reconnected","disconnected","setValue","strings","_$AI","U","nt","rt","lt","ht","options","host","element","get","set","value","FocusableMixin","superClass","focus","focusableRef","blur","click","InputMixin","InputElement","form","closest","__decorate","property","Boolean","Button","LitElement","document","createElement","connectedCallback","syncProxyButton","disconnectedCallback","cleanupProxyButton","updated","innards","html","href","ref","disabled","ifDefined","name","handleClick","_proxyButton","isFormAssociated","proxy","slot","className","removeAttribute","appendChild","remove","style","reflect","customElement"],"mappings":"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"}
package/lib/Button.js CHANGED
@@ -1,2 +1,2 @@
1
- import"./custom-element-a6d824b8.js";import"./property-03f59dce.js";export{B as default}from"./Button-f48a2f6d.js";
1
+ import"./custom-element-a6d824b8.js";import"./property-03f59dce.js";export{B as default}from"./Button-382ffa7f.js";
2
2
  //# sourceMappingURL=Button.js.map
package/lib/Select.js CHANGED
@@ -1,2 +1,2 @@
1
- import{r as e,_ as t,y as n,a as o,n as a}from"./custom-element-a6d824b8.js";import{e as l}from"./property-03f59dce.js";import{I as s,n as i,l as r,F as d}from"./Button-f48a2f6d.js";import"./VisuallyHidden.js";import{NordEvent as c}from"./events.js";const p=e`:host{display:block}*,::after,::before{box-sizing:border-box}.n-select-container{position:relative;inline-size:fit-content}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-secondary);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}select:not(:disabled):hover+nord-button{--n-button-background-color:var(--n-color-background);--n-button-border-color:var(--n-color-icon)}select:focus+nord-button{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host([disabled]) select{cursor:auto}label{display:block;padding-block-end:var(--n-space-s)}::slotted(:not([slot])){display:none}svg[slot=after]{fill:var(--n-color-icon);margin-inline-start:var(--n-space-m);margin-inline-end:calc(var(--n-space-s)/ -2);inline-size:calc(var(--n-space-l)/ 2)}::slotted([slot=before]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}`;let h=class extends(function(e){class n extends e{constructor(){super(...arguments),this.label="",this.required=!1,this.handleFormData=e=>{var t;this.name&&e.formData.append(this.name,null!==(t=this.value)&&void 0!==t?t:"")}}connectedCallback(){var e;super.connectedCallback(),null===(e=this.form)||void 0===e||e.addEventListener("formdata",this.handleFormData)}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this.form)||void 0===e||e.removeEventListener("formdata",this.handleFormData)}handleChange(e){const t=e.target;this.value=t.value,this.dispatchEvent(new c("change"))}}return t([l()],n.prototype,"label",void 0),t([l({type:Boolean})],n.prototype,"required",void 0),n}(s(d(a)))){constructor(){super(...arguments),this.hideLabel=!1,this.expand=!1}render(){const e=this.options,t=this.getButtonText(e);return n`<slot @slotchange="${this.handleSlotChange}"></slot>${this.renderLabel()}<div class="n-select-container"><select ${i(this.focusableRef)} id="select" ?disabled="${this.disabled}" ?required="${this.required}" name="${r(this.name)}" @change="${this.handleChange}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="before" name="before"></slot>${t} <svg slot="after" class="n-icon-dropdown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path d="M60.5 120a10.77 10.77 0 01-7.65-3.17L18.8 81.02a6.53 6.53 0 119.47-8.99l30.67 32.3a2.18 2.18 0 003.14 0l30.67-32.3a6.53 6.53 0 019.47 8.99l-33.88 35.73A11.05 11.05 0 0160.5 120zM60.5 0a10.77 10.77 0 017.65 3.17l34.06 35.81a6.52 6.52 0 11-9.47 8.99l-30.67-32.3a2.17 2.17 0 00-3.14 0l-30.67 32.3a6.53 6.53 0 01-9.47-8.99L52.67 3.25A11.04 11.04 0 0160.5 0z"></path></svg></nord-button></div>`}handleSlotChange(){this.requestUpdate()}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderLabel(){const e=n`<label for="select"><slot name="label">${this.label}</slot></label>`;return this.hideLabel?n`<nord-visually-hidden>${e}</nord-visually-hidden>`:e}renderOption(e){return n`<option value="${r(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value}">${e.text}</option>`}};h.styles=[p],t([l({type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([l()],h.prototype,"placeholder",void 0),t([l({reflect:!0,type:Boolean})],h.prototype,"expand",void 0),h=t([o("nord-select")],h);var u=h;export{u as default};
1
+ import{r as e,_ as t,y as o,a as n,n as a}from"./custom-element-a6d824b8.js";import{e as l}from"./property-03f59dce.js";import{I as s,n as i,l as r,F as d}from"./Button-382ffa7f.js";import"./VisuallyHidden.js";import{NordEvent as c}from"./events.js";const h=e`:host{display:block}*,::after,::before{box-sizing:border-box}.n-select-container{position:relative;inline-size:fit-content}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}select:not(:disabled):hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}select:not(:disabled):hover+nord-button svg{fill:var(--n-color-icon-hover)}select:focus+nord-button{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}:host([disabled]) select{cursor:auto}label{display:block;padding-block-end:var(--n-space-s)}::slotted(:not([slot])){display:none}svg[slot=after]{fill:var(--n-color-icon);margin-inline-start:var(--n-space-m);margin-inline-end:calc(var(--n-space-s)/ -2);inline-size:calc(var(--n-space-l)/ 2)}::slotted([slot=before]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}`;let p=class extends(function(e){class o extends e{constructor(){super(...arguments),this.label="",this.required=!1,this.handleFormData=e=>{var t;this.name&&e.formData.append(this.name,null!==(t=this.value)&&void 0!==t?t:"")}}connectedCallback(){var e;super.connectedCallback(),null===(e=this.form)||void 0===e||e.addEventListener("formdata",this.handleFormData)}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this.form)||void 0===e||e.removeEventListener("formdata",this.handleFormData)}handleChange(e){const t=e.target;this.value=t.value,this.dispatchEvent(new c("change"))}}return t([l()],o.prototype,"label",void 0),t([l({type:Boolean})],o.prototype,"required",void 0),o}(s(d(a)))){constructor(){super(...arguments),this.hideLabel=!1,this.expand=!1}render(){const e=this.options,t=this.getButtonText(e);return o`<slot @slotchange="${this.handleSlotChange}"></slot>${this.renderLabel()}<div class="n-select-container"><select ${i(this.focusableRef)} id="select" ?disabled="${this.disabled}" ?required="${this.required}" name="${r(this.name)}" @change="${this.handleChange}">${this.placeholder&&o`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="before" name="before"></slot>${t} <svg slot="after" height="12" width="10" viewBox="0 0 10 12" xmlns="http://www.w3.org/2000/svg"><path d="m4.43391.234315c.31242-.3124199.81895-.3124199 1.13137 0l3.53554 3.535535c.31242.31242.31242.81895 0 1.13137s-.81896.31242-1.13137 0l-2.96985-2.96985-2.96985 2.96985c-.31242.31242-.81895.31242-1.131373 0-.312419-.31242-.312419-.81895 0-1.13137z"/><path d="m.898377 7.09857c.312423-.31242.818953-.31242 1.131373 0l2.96985 2.96983 2.96985-2.96983c.31241-.31242.81895-.31242 1.13137 0s.31242.81895 0 1.13137l-3.53554 3.53556c-.31242.3124-.81895.3124-1.13137 0l-3.535533-3.53556c-.312419-.31242-.312419-.81895 0-1.13137z"/></svg></nord-button></div>`}handleSlotChange(){this.requestUpdate()}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderLabel(){const e=o`<label for="select"><slot name="label">${this.label}</slot></label>`;return this.hideLabel?o`<nord-visually-hidden>${e}</nord-visually-hidden>`:e}renderOption(e){return o`<option value="${r(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value}">${e.text}</option>`}};p.styles=[h],t([l({type:Boolean,attribute:"hide-label"})],p.prototype,"hideLabel",void 0),t([l()],p.prototype,"placeholder",void 0),t([l({reflect:!0,type:Boolean})],p.prototype,"expand",void 0),p=t([n("nord-select")],p);var u=p;export{u as default};
2
2
  //# sourceMappingURL=Select.js.map
package/lib/Select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./Select.css\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\n\n/**\n * Select is an input component that provides a menu of options to choose from.\n *\n * @status draft\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n */\n@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [style]\n\n @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n /**\n * Hint text to display as the first option of the select element.\n */\n @property() placeholder?: string\n\n /**\n * Controls whether the select expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n\n return html`\n <slot @slotchange=${this.handleSlotChange}></slot>\n ${this.renderLabel()}\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=\"select\"\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"before\" name=\"before\"></slot>\n ${buttonText}\n <svg slot=\"after\" class=\"n-icon-dropdown\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 120 120\">\n <path\n d=\"M60.5 120a10.77 10.77 0 01-7.65-3.17L18.8 81.02a6.53 6.53 0 119.47-8.99l30.67 32.3a2.18 2.18 0 003.14 0l30.67-32.3a6.53 6.53 0 019.47 8.99l-33.88 35.73A11.05 11.05 0 0160.5 120zM60.5 0a10.77 10.77 0 017.65 3.17l34.06 35.81a6.52 6.52 0 11-9.47 8.99l-30.67-32.3a2.17 2.17 0 00-3.14 0l-30.67 32.3a6.53 6.53 0 01-9.47-8.99L52.67 3.25A11.04 11.04 0 0160.5 0z\"\n ></path>\n </svg>\n </nord-button>\n </div>\n `\n }\n\n private handleSlotChange() {\n this.requestUpdate()\n }\n\n private get options() {\n return Array.from(this.querySelectorAll(\"option\"))\n }\n\n private getButtonText(options: HTMLOptionElement[]): string {\n const selected = options.find(option => option.value === this.value)\n\n if (selected) {\n return selected.text\n }\n\n if (this.placeholder) {\n return this.placeholder\n }\n\n if (options[0]) {\n return options[0].text\n }\n\n return \"\"\n }\n\n private renderLabel() {\n const label = html`\n <label for=\"select\">\n <slot name=\"label\">${this.label}</slot>\n </label>\n `\n\n return this.hideLabel ? html`<nord-visually-hidden>${label}</nord-visually-hidden>` : label\n }\n\n private renderOption(option: HTMLOptionElement) {\n return html`\n <option value=${ifDefined(option.value)} ?disabled=${option.disabled} ?selected=${option.value === this.value}>\n ${option.text}\n </option>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-select\": Select\n }\n}\n","/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n label: string\n required: boolean\n protected handleChange(e: Event): void\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n class FormAssociatedElement extends superClass {\n /**\n * Label for the input.\n */\n @property() label: string = \"\"\n\n /**\n * Determines whether the input is required or not.\n * An input marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n */\n @property({ type: Boolean }) required = false\n\n connectedCallback() {\n super.connectedCallback()\n this.form?.addEventListener(\"formdata\", this.handleFormData)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.form?.removeEventListener(\"formdata\", this.handleFormData)\n }\n\n private handleFormData = (e: FormDataEvent) => {\n if (this.name) {\n e.formData.append(this.name, this.value ?? \"\")\n }\n }\n\n protected handleChange(e: Event) {\n const target = e.target as NativeInputElement\n this.value = target.value\n\n /**\n * Fired whenever the input's value is changed via user interaction.\n */\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n }\n\n return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["Select","superClass","FormAssociatedElement","constructor","this","e","name","formData","append","value","connectedCallback","super","form","addEventListener","handleFormData","disconnectedCallback","removeEventListener","handleChange","target","dispatchEvent","NordEvent","__decorate","property","type","Boolean","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","render","slottedOptions","options","buttonText","getButtonText","html","handleSlotChange","renderLabel","ref","focusableRef","disabled","required","ifDefined","placeholder","map","option","renderOption","expand","requestUpdate","Array","from","querySelectorAll","selected","find","text","label","hideLabel","style","attribute","reflect","customElement"],"mappings":"w4CAsBA,IAAqBA,EAArB,uBCP6FC,GAC3F,MAAMC,UAA8BD,EAApCE,kCAIcC,WAAgB,GAOCA,eAAW,EAYhCA,oBAAkBC,UACpBD,KAAKE,MACPD,EAAEE,SAASC,OAAOJ,KAAKE,eAAMF,KAAKK,qBAAS,KAZ/CC,0BACEC,MAAMD,8BACNN,KAAKQ,qBAAMC,iBAAiB,WAAYT,KAAKU,gBAG/CC,6BACEJ,MAAMI,iCACNX,KAAKQ,qBAAMI,oBAAoB,WAAYZ,KAAKU,gBASxCG,aAAaZ,GACrB,MAAMa,EAASb,EAAEa,OACjBd,KAAKK,MAAQS,EAAOT,MAKpBL,KAAKe,cAAc,IAAIC,EAAU,YAIrC,OApCcC,GAAXC,iCAO4BD,GAA5BC,EAAS,CAAEC,KAAMC,0CA6BbtB,EDlC2BuB,CAAoBC,EAAWC,EAAeC,MAAlFzB,kCAGwDC,gBAAY,EAUtBA,aAAS,EAErDyB,SACE,MAAMC,EAAiB1B,KAAK2B,QACtBC,EAAa5B,KAAK6B,cAAcH,GAEtC,OAAOI,CAAI,sBACW9B,KAAK+B,4BACvB/B,KAAKgC,wDAGDC,EAAIjC,KAAKkC,wCAEClC,KAAKmC,wBACLnC,KAAKoC,mBACVC,EAAUrC,KAAKE,mBACZF,KAAKa,iBAEbb,KAAKsC,aAAeR,CAAI,oDAAwC9B,KAAKK,UAASL,KAAKsC,0BACnFZ,EAAea,KAAIC,GAAUxC,KAAKyC,aAAaD,sDAGZxC,KAAKmC,sBAAoBnC,KAAK0C,qFAEjEd,qfAWFG,mBACN/B,KAAK2C,gBAGPhB,cACE,OAAOiB,MAAMC,KAAK7C,KAAK8C,iBAAiB,WAGlCjB,cAAcF,GACpB,MAAMoB,EAAWpB,EAAQqB,MAAKR,GAAUA,EAAOnC,QAAUL,KAAKK,QAE9D,OAAI0C,EACKA,EAASE,KAGdjD,KAAKsC,YACAtC,KAAKsC,YAGVX,EAAQ,GACHA,EAAQ,GAAGsB,KAGb,GAGDjB,cACN,MAAMkB,EAAQpB,CAAI,0CAEO9B,KAAKkD,uBAI9B,OAAOlD,KAAKmD,UAAYrB,CAAI,yBAAyBoB,2BAAiCA,EAGhFT,aAAaD,GACnB,OAAOV,CAAI,kBACOO,EAAUG,EAAOnC,sBAAoBmC,EAAOL,wBAAsBK,EAAOnC,QAAUL,KAAKK,UACpGmC,EAAOS,kBAtFRrD,SAAS,CAACwD,GAEqCnC,GAArDC,EAAS,CAAEC,KAAMC,QAASiC,UAAW,gDAK1BpC,GAAXC,uCAK2CD,GAA3CC,EAAS,CAAEoC,SAAS,EAAMnC,KAAMC,wCAbdxB,KADpB2D,EAAc,gBACM3D,SAAAA"}
1
+ {"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./Select.css\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\n\n/**\n * Select lets user choose one option from an options menu. Consider using select when you have 6 or more options.\n *\n * @status draft\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n */\n@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [style]\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n /**\n * Hint text to display as the first option of the select element.\n */\n @property() placeholder?: string\n\n /**\n * Controls whether the select expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n\n return html`\n <slot @slotchange=${this.handleSlotChange}></slot>\n ${this.renderLabel()}\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=\"select\"\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"before\" name=\"before\"></slot>\n ${buttonText}\n <svg slot=\"after\" height=\"12\" width=\"10\" viewBox=\"0 0 10 12\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"m4.43391.234315c.31242-.3124199.81895-.3124199 1.13137 0l3.53554 3.535535c.31242.31242.31242.81895 0 1.13137s-.81896.31242-1.13137 0l-2.96985-2.96985-2.96985 2.96985c-.31242.31242-.81895.31242-1.131373 0-.312419-.31242-.312419-.81895 0-1.13137z\"\n />\n <path\n d=\"m.898377 7.09857c.312423-.31242.818953-.31242 1.131373 0l2.96985 2.96983 2.96985-2.96983c.31241-.31242.81895-.31242 1.13137 0s.31242.81895 0 1.13137l-3.53554 3.53556c-.31242.3124-.81895.3124-1.13137 0l-3.535533-3.53556c-.312419-.31242-.312419-.81895 0-1.13137z\"\n />\n </svg>\n </nord-button>\n </div>\n `\n }\n\n private handleSlotChange() {\n this.requestUpdate()\n }\n\n private get options() {\n return Array.from(this.querySelectorAll(\"option\"))\n }\n\n private getButtonText(options: HTMLOptionElement[]): string {\n const selected = options.find(option => option.value === this.value)\n\n if (selected) {\n return selected.text\n }\n\n if (this.placeholder) {\n return this.placeholder\n }\n\n if (options[0]) {\n return options[0].text\n }\n\n return \"\"\n }\n\n private renderLabel() {\n const label = html`\n <label for=\"select\">\n <slot name=\"label\">${this.label}</slot>\n </label>\n `\n\n return this.hideLabel ? html`<nord-visually-hidden>${label}</nord-visually-hidden>` : label\n }\n\n private renderOption(option: HTMLOptionElement) {\n return html`\n <option value=${ifDefined(option.value)} ?disabled=${option.disabled} ?selected=${option.value === this.value}>\n ${option.text}\n </option>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-select\": Select\n }\n}\n","/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n label: string\n required: boolean\n protected handleChange(e: Event): void\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n class FormAssociatedElement extends superClass {\n /**\n * Label for the input.\n */\n @property() label: string = \"\"\n\n /**\n * Determines whether the input is required or not.\n * An input marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n */\n @property({ type: Boolean }) required = false\n\n connectedCallback() {\n super.connectedCallback()\n this.form?.addEventListener(\"formdata\", this.handleFormData)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.form?.removeEventListener(\"formdata\", this.handleFormData)\n }\n\n private handleFormData = (e: FormDataEvent) => {\n if (this.name) {\n e.formData.append(this.name, this.value ?? \"\")\n }\n }\n\n protected handleChange(e: Event) {\n const target = e.target as NativeInputElement\n this.value = target.value\n\n /**\n * Fired whenever the input's value is changed via user interaction.\n */\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n }\n\n return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["Select","superClass","FormAssociatedElement","constructor","this","e","name","formData","append","value","connectedCallback","super","form","addEventListener","handleFormData","disconnectedCallback","removeEventListener","handleChange","target","dispatchEvent","NordEvent","__decorate","property","type","Boolean","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","render","slottedOptions","options","buttonText","getButtonText","html","handleSlotChange","renderLabel","ref","focusableRef","disabled","required","ifDefined","placeholder","map","option","renderOption","expand","requestUpdate","Array","from","querySelectorAll","selected","find","text","label","hideLabel","style","attribute","reflect","customElement"],"mappings":"w9CAsBA,IAAqBA,EAArB,uBCP6FC,GAC3F,MAAMC,UAA8BD,EAApCE,kCAIcC,WAAgB,GAOCA,eAAW,EAYhCA,oBAAkBC,UACpBD,KAAKE,MACPD,EAAEE,SAASC,OAAOJ,KAAKE,eAAMF,KAAKK,qBAAS,KAZ/CC,0BACEC,MAAMD,8BACNN,KAAKQ,qBAAMC,iBAAiB,WAAYT,KAAKU,gBAG/CC,6BACEJ,MAAMI,iCACNX,KAAKQ,qBAAMI,oBAAoB,WAAYZ,KAAKU,gBASxCG,aAAaZ,GACrB,MAAMa,EAASb,EAAEa,OACjBd,KAAKK,MAAQS,EAAOT,MAKpBL,KAAKe,cAAc,IAAIC,EAAU,YAIrC,OApCcC,GAAXC,iCAO4BD,GAA5BC,EAAS,CAAEC,KAAMC,0CA6BbtB,EDlC2BuB,CAAoBC,EAAWC,EAAeC,MAAlFzB,kCAMwDC,gBAAY,EAUtBA,aAAS,EAErDyB,SACE,MAAMC,EAAiB1B,KAAK2B,QACtBC,EAAa5B,KAAK6B,cAAcH,GAEtC,OAAOI,CAAI,sBACW9B,KAAK+B,4BACvB/B,KAAKgC,wDAGDC,EAAIjC,KAAKkC,wCAEClC,KAAKmC,wBACLnC,KAAKoC,mBACVC,EAAUrC,KAAKE,mBACZF,KAAKa,iBAEbb,KAAKsC,aAAeR,CAAI,oDAAwC9B,KAAKK,UAASL,KAAKsC,0BACnFZ,EAAea,KAAIC,GAAUxC,KAAKyC,aAAaD,sDAGZxC,KAAKmC,sBAAoBnC,KAAK0C,qFAEjEd,+oBAcFG,mBACN/B,KAAK2C,gBAGPhB,cACE,OAAOiB,MAAMC,KAAK7C,KAAK8C,iBAAiB,WAGlCjB,cAAcF,GACpB,MAAMoB,EAAWpB,EAAQqB,MAAKR,GAAUA,EAAOnC,QAAUL,KAAKK,QAE9D,OAAI0C,EACKA,EAASE,KAGdjD,KAAKsC,YACAtC,KAAKsC,YAGVX,EAAQ,GACHA,EAAQ,GAAGsB,KAGb,GAGDjB,cACN,MAAMkB,EAAQpB,CAAI,0CAEO9B,KAAKkD,uBAI9B,OAAOlD,KAAKmD,UAAYrB,CAAI,yBAAyBoB,2BAAiCA,EAGhFT,aAAaD,GACnB,OAAOV,CAAI,kBACOO,EAAUG,EAAOnC,sBAAoBmC,EAAOL,wBAAsBK,EAAOnC,QAAUL,KAAKK,UACpGmC,EAAOS,kBA5FRrD,SAAS,CAACwD,GAKqCnC,GAArDC,EAAS,CAAEC,KAAMC,QAASiC,UAAW,gDAK1BpC,GAAXC,uCAK2CD,GAA3CC,EAAS,CAAEoC,SAAS,EAAMnC,KAAMC,wCAhBdxB,KADpB2D,EAAc,gBACM3D,SAAAA"}
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export{default as VisuallyHidden}from"./VisuallyHidden.js";export{B as Button}from"./Button-f48a2f6d.js";export{default as Stack}from"./Stack.js";export{default as Select}from"./Select.js";import"./custom-element-a6d824b8.js";import"./property-03f59dce.js";import"./events.js";
1
+ export{default as VisuallyHidden}from"./VisuallyHidden.js";export{B as Button}from"./Button-382ffa7f.js";export{default as Stack}from"./Stack.js";export{default as Select}from"./Select.js";import"./custom-element-a6d824b8.js";import"./property-03f59dce.js";import"./events.js";
2
2
  //# sourceMappingURL=index.js.map
@@ -16,7 +16,7 @@ export default class Button extends Button_base {
16
16
  */
17
17
  variant: "default" | "primary" | "dashed" | "plain";
18
18
  /**
19
- * The type of button.
19
+ * The type of the button.
20
20
  */
21
21
  type: "button" | "submit" | "reset";
22
22
  /**
@@ -3,7 +3,7 @@ import "../button/Button.js";
3
3
  import "../visually-hidden/VisuallyHidden.js";
4
4
  declare const Select_base: (new (...args: any[]) => import("../common/mixins/FormAssociatedMixin.js").FormAssociatedMixinInterface) & (new (...args: any[]) => import("../common/mixins/InputMixin.js").InputMixinInterface) & (new (...args: any[]) => import("../common/mixins/FocusableMixin.js").FocusableMixinInterface) & typeof LitElement;
5
5
  /**
6
- * Select is an input component that provides a menu of options to choose from.
6
+ * Select lets user choose one option from an options menu. Consider using select when you have 6 or more options.
7
7
  *
8
8
  * @status draft
9
9
  * @slot - Default slot for holding <option> elements.
@@ -11,6 +11,9 @@ declare const Select_base: (new (...args: any[]) => import("../common/mixins/For
11
11
  */
12
12
  export default class Select extends Select_base {
13
13
  static styles: import("lit").CSSResult[];
14
+ /**
15
+ * Visually hide the label, but still show it to assistive technologies like screen readers.
16
+ */
14
17
  hideLabel: boolean;
15
18
  /**
16
19
  * Hint text to display as the first option of the select element.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nordhealth/components",
3
- "version": "1.0.0-alpha.19",
3
+ "version": "1.0.0-alpha.23",
4
4
  "description": "This package includes Nord Design System web components",
5
5
  "author": "Nordhealth <info@nordhealth.com>",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -31,9 +31,9 @@
31
31
  },
32
32
  "devDependencies": {
33
33
  "@custom-elements-manifest/analyzer": "^0.5.5",
34
- "@nordhealth/fonts": "^1.1.4",
35
- "@nordhealth/themes": "^1.4.2",
36
- "@nordhealth/tokens": "^1.0.0-alpha.14",
34
+ "@nordhealth/fonts": "^2.0.0",
35
+ "@nordhealth/themes": "^2.0.0",
36
+ "@nordhealth/tokens": "^1.0.0",
37
37
  "@open-wc/eslint-config": "^4.3.0",
38
38
  "@open-wc/testing": "^2.5.33",
39
39
  "@rollup/plugin-node-resolve": "^13.0.5",
@@ -111,5 +111,5 @@
111
111
  ]
112
112
  }
113
113
  },
114
- "gitHead": "136f9d8f010327d3d6e27201429d5b9047898bb8"
114
+ "gitHead": "a100dd07fa7d3d4e8702226af4f593c0d52e7c35"
115
115
  }
@@ -1,28 +0,0 @@
1
- import{x as t,_ as o,r as n,y as e,a as s,n as r}from"./custom-element-a6d824b8.js";import{e as i}from"./property-03f59dce.js";
2
- /**
3
- * @license
4
- * Copyright 2018 Google LLC
5
- * SPDX-License-Identifier: BSD-3-Clause
6
- */const a=o=>null!=o?o:t
7
- /**
8
- * @license
9
- * Copyright 2020 Google LLC
10
- * SPDX-License-Identifier: BSD-3-Clause
11
- */,l=2;
12
- /**
13
- * @license
14
- * Copyright 2017 Google LLC
15
- * SPDX-License-Identifier: BSD-3-Clause
16
- */
17
- const c=(t,o)=>{var n,e;const s=t._$AN;if(void 0===s)return!1;for(const t of s)null===(e=(n=t)._$AO)||void 0===e||e.call(n,o,!1),c(t,o);return!0},d=t=>{let o,n;do{if(void 0===(o=t._$AM))break;n=o._$AN,n.delete(t),t=o}while(0===(null==n?void 0:n.size))},u=t=>{for(let o;o=t._$AM;t=o){let n=o._$AN;if(void 0===n)o._$AN=n=new Set;else if(n.has(t))break;n.add(t),b(o)}};function h(t){void 0!==this._$AN?(d(this),this._$AM=t,u(this)):this._$AM=t}function v(t,o=!1,n=0){const e=this._$AH,s=this._$AN;if(void 0!==s&&0!==s.size)if(o)if(Array.isArray(e))for(let t=n;t<e.length;t++)c(e[t],!1),d(e[t]);else null!=e&&(c(e,!1),d(e));else c(this,t)}const b=t=>{var o,n,e,s;t.type==l&&(null!==(o=(e=t)._$AP)&&void 0!==o||(e._$AP=v),null!==(n=(s=t)._$AQ)&&void 0!==n||(s._$AQ=h))};class p{}const f=new WeakMap,y=(t=>(...o)=>({_$litDirective$:t,values:o}))(class extends class extends class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,o,n){this._$Ct=t,this._$AM=o,this._$Ci=n}_$AS(t,o){return this.update(t,o)}update(t,o){return this.render(...o)}}{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,o,n){super._$AT(t,o,n),u(this),this.isConnected=t._$AU}_$AO(t,o=!0){var n,e;t!==this.isConnected&&(this.isConnected=t,t?null===(n=this.reconnected)||void 0===n||n.call(this):null===(e=this.disconnected)||void 0===e||e.call(this)),o&&(c(this,t),d(this))}setValue(t){if((t=>void 0===t.strings)
18
- /**
19
- * @license
20
- * Copyright 2017 Google LLC
21
- * SPDX-License-Identifier: BSD-3-Clause
22
- */(this._$Ct))this._$Ct._$AI(t,this);else{const o=[...this._$Ct._$AH];o[this._$Ci]=t,this._$Ct._$AI(o,this,0)}}disconnected(){}reconnected(){}}
23
- /**
24
- * @license
25
- * Copyright 2020 Google LLC
26
- * SPDX-License-Identifier: BSD-3-Clause
27
- */{render(o){return t}update(o,[n]){var e;const s=n!==this.U;return s&&void 0!==this.U&&this.nt(void 0),(s||this.rt!==this.lt)&&(this.U=n,this.ht=null===(e=o.options)||void 0===e?void 0:e.host,this.nt(this.lt=o.element)),t}nt(t){"function"==typeof this.U?(void 0!==f.get(this.U)&&this.U.call(this.ht,void 0),f.set(this.U,t),void 0!==t&&this.U.call(this.ht,t)):this.U.value=t}get rt(){var t;return"function"==typeof this.U?f.get(this.U):null===(t=this.U)||void 0===t?void 0:t.value}disconnected(){this.rt===this.lt&&this.nt(void 0)}reconnected(){this.nt(this.lt)}});function $(t){return class extends t{constructor(){super(...arguments),this.focusableRef=new p}focus(t){var o;null===(o=this.focusableRef.value)||void 0===o||o.focus(t)}blur(){var t;null===(t=this.focusableRef.value)||void 0===t||t.blur()}click(){var t;null===(t=this.focusableRef.value)||void 0===t||t.click()}}}function m(t){class n extends t{constructor(){super(...arguments),this.disabled=!1}get form(){return this.closest("form")}}return o([i({type:Boolean})],n.prototype,"disabled",void 0),o([i()],n.prototype,"name",void 0),o([i()],n.prototype,"value",void 0),n}const _=n`:host{display:block}*,::after,::before{box-sizing:border-box}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-button-background-color,var(--n-color-surface));border-radius:var(--n-button-border-radius,var(--n-border-radius-s));border:1px var(--n-button-border-style,solid) var(--n-button-border-color,var(--n-color-border-dark));box-shadow:var(--n-button-box-shadow,var(--n-box-shadow));color:var(--n-button-color,var(--n-color-secondary));cursor:pointer;display:flex;gap:calc(var(--n-space-s)/ 2);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-button-font-size,var(--n-font-size-m));font-weight:var(--n-button-font-weight,var(--n-font-weight));line-height:var(--n-line-height-tight);min-block-size:var(--n-button-min-height,var(--n-space-xl));padding:var(--n-button-padding-y,var(--n-space-s)) var(--n-button-padding-x,calc(var(--n-space-m)/ 1.2));text-align:var(--n-button-text-align,center);text-decoration:none;transition:all .1s ease;user-select:none;inline-size:fit-content}:host([expand]) .n-button{inline-size:100%}.n-content{flex:1}:host(:hover){--n-button-background-color:var(--n-color-background);--n-button-border-color:var(--n-color-icon)}:host([disabled]){--n-button-background-color:var(--n-color-border);--n-button-box-shadow:none;--n-button-border-color:var(--n-button-background-color);--n-button-color:var(--n-color-caption);opacity:.5;pointer-events:none}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--n-button-background-color:var(--n-color-primary);--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-color:var(--n-color-negative);--n-button-font-weight:var(--n-font-weight-active)}:host([variant=primary]:hover){--n-button-background-color:var(--n-color-primary-dark)}:host([variant=dashed]){--n-button-color:var(--n-color-caption);--n-button-border-color:var(--n-color-icon);--n-button-border-style:dashed;--n-button-box-shadow:none}:host([variant=dashed]:hover){--n-button-color:var(--n-color-secondary)}:host([variant=plain]){--n-button-border-color:transparent;--n-button-box-shadow:none}:host([size="s"]){--n-button-font-size:var(--n-font-size-s);--n-button-min-height:var(--n-space-l);--n-button-padding-y:calc(var(--n-space-s) / 1.5);--n-button-padding-x:var(--n-space-s)}::slotted(button[slot=proxy]){display:none}::slotted(svg.stroke){stroke:var(--n-color-icon)}:host(:hover) ::slotted(svg.stroke){stroke:var(--n-color-secondary)}::slotted(svg.fill){fill:var(--n-color-icon)}:host(:hover) ::slotted(svg.fill){fill:var(--n-color-secondary)}`;let g=class extends(m($(r))){constructor(){super(...arguments),this._proxyButton=document.createElement("button"),this.variant="default",this.type="submit",this.size="m",this.expand=!1}connectedCallback(){super.connectedCallback(),this.syncProxyButton()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupProxyButton()}updated(){this.syncProxyButton()}render(){const t=e`<slot name="before"></slot><div class="n-content"><slot></slot></div><slot name="after"></slot>`;return this.href?e`<a ${y(this.focusableRef)} class="n-button" href="${this.href}">${t}</a>`:e`<slot name="proxy"></slot><button ${y(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${a(this.name)}" value="${a(this.value)}" @click="${this.handleClick}">${t}</button>`}handleClick(){this._proxyButton.click()}get isFormAssociated(){return!this.href&&this.form}syncProxyButton(){const t=this._proxyButton;t.slot="proxy",t.className="n-button-proxy",t.disabled=this.disabled,t.type=this.type,this.name?t.name=this.name:t.removeAttribute("name"),this.value?t.value=this.value:t.removeAttribute("value"),this.isFormAssociated?this.appendChild(t):this.cleanupProxyButton()}cleanupProxyButton(){this._proxyButton.remove()}};g.styles=_,o([i({reflect:!0})],g.prototype,"variant",void 0),o([i({reflect:!0})],g.prototype,"type",void 0),o([i({reflect:!0})],g.prototype,"size",void 0),o([i({reflect:!0})],g.prototype,"href",void 0),o([i({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),g=o([s("nord-button")],g);var x=g;export{x as B,$ as F,m as I,a as l,y as n};
28
- //# sourceMappingURL=Button-f48a2f6d.js.map