@nordhealth/components 1.0.0-beta.12 → 1.0.0-beta.13

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/lib/Button.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as t,n as o}from"./query-assigned-elements-37b095c4.js";import{r as n,$ as e,w as r,s as a}from"./lit-element-9646ab7e.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-2a4c6dbc.js";import{e as l,n as b}from"./ref-eb5cfa10.js";import{L as d}from"./LightDomController-f56fa1a4.js";import{F as c}from"./FocusableMixin-98e13999.js";import{I as u}from"./InputMixin-94d15730.js";import{s as h}from"./Component-6762b5eb.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";const v=n`:host{display:inline-block}.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-button-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-form);margin:0;min-block-size:var(--n-button-min-height,var(--n-space-xl));padding:var(--n-button-padding-y,calc(var(--n-space-s)/ 1.6)) 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;position:relative;inline-size:var(--n-button-width,fit-content)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--n-button-gradient,linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%));background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--n-button-width:100%;display:block}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-button:focus{--n-button-border-color:var(--n-color-primary);--n-button-border-style:solid;--n-button-box-shadow:0 0 0 1px var(--n-button-border-color);outline:0}.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]) .n-button:focus{--n-button-box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-button-border-color)}:host([variant=primary]) .n-button:hover{--n-button-background-color:var(--n-color-primary-strong);--n-button-border-color:transparent}: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]) .n-button:hover{--n-button-color:var(--n-color-text)}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--n-button-border-color:transparent;--n-button-box-shadow:none}:host([variant=plain]) .n-button:hover{--n-button-border-color:transparent}:host([variant=plain]) .n-button:focus{--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--n-button-border-color:var(--n-color-status-danger);--n-button-color:var(--n-color-text-error);--n-button-font-weight:var(--n-font-weight-active)}:host([variant=danger]) .n-button:hover{--n-button-border-color:var(--n-color-status-danger)}: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}:host([disabled]) .n-button::after{display: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);--n-button-gap:calc(var(--n-space-s) / 2)}:host([size="s"]) .n-button{line-height:var(--n-line-height-tight)}:host([size="l"]){--n-button-border-radius:var(--n-border-radius);--n-button-font-size:var(--n-font-size-l);--n-button-min-height:calc(var(--n-space-xxl) - var(--n-space-l));--n-button-padding-x:calc(var(--n-space-l) / 1.3);--n-button-font-weight:var(--n-font-weight-active)}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}`;let p=class extends(u(c(a))){constructor(){super(...arguments),this.buttonRef=l(),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.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleOuterClick,!0)}disconnectedCallback(){this.removeEventListener("click",this.handleOuterClick,!0)}render(){const t=e`<slot name="before"></slot><div class="n-content"><slot></slot></div><slot name="after"></slot>`;return this.href?this.renderLink(t):this.renderButton(t)}renderLink(t){return e`<a ${b(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${s(this.disabled?void 0:this.href)}" tabindex="${s(this.disabled?"-1":void 0)}" aria-disabled="${s(this.disabled?"true":void 0)}" role="${s(this.disabled?"link":void 0)}">${t}</a>`}renderButton(t){return e`<slot name="proxy"></slot><button ${b(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${s(this.name||void 0)}" value="${s(this.value||void 0)}" @click="${this.handleClick}">${t}</button>`}renderLightDom(){return this.href||!this.form?r:e`<button ${b(this.buttonRef)} slot="proxy" name="${s(this.name||void 0)}" value="${s(this.value||void 0)}" ?disabled="${this.disabled}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}};p.styles=[h,v],t([i({reflect:!0})],p.prototype,"variant",void 0),t([i({reflect:!0})],p.prototype,"type",void 0),t([i({reflect:!0})],p.prototype,"size",void 0),t([i({reflect:!0})],p.prototype,"href",void 0),t([i({type:Boolean})],p.prototype,"download",void 0),t([i({reflect:!0})],p.prototype,"target",void 0),t([i({reflect:!0,type:Boolean})],p.prototype,"expand",void 0),p=t([o("nord-button")],p);var f=p;export{f as default};
1
+ import{_ as t,n as o}from"./query-assigned-elements-37b095c4.js";import{r as n,$ as e,w as r,s as a}from"./lit-element-9646ab7e.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-2a4c6dbc.js";import{e as l,n as b}from"./ref-eb5cfa10.js";import{L as d}from"./LightDomController-f56fa1a4.js";import{F as c}from"./FocusableMixin-98e13999.js";import{I as u}from"./InputMixin-94d15730.js";import{s as h}from"./Component-6762b5eb.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";const v=n`:host{display:inline-block}.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-button-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-form);margin:0;min-block-size:var(--n-button-min-height,var(--n-space-xl));padding:var(--n-button-padding-y,calc(var(--n-space-s)/ 1.6)) 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;position:relative;inline-size:var(--n-button-width,fit-content)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--n-button-gradient,linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%));background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--n-button-width:100%;display:block}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-button:focus{--n-button-border-color:var(--n-color-primary);--n-button-border-style:solid;--n-button-box-shadow:0 0 0 1px var(--n-button-border-color);outline:0}.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]) .n-button:focus{--n-button-box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-button-border-color)}:host([variant=primary]) .n-button:hover{--n-button-border-color:transparent;--n-button-background-color:var(--n-color-primary);filter:brightness(93%)}: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]) .n-button:hover{--n-button-color:var(--n-color-text)}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--n-button-border-color:transparent;--n-button-box-shadow:none}:host([variant=plain]) .n-button:hover{--n-button-border-color:transparent}:host([variant=plain]) .n-button:focus{--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--n-button-border-color:var(--n-color-status-danger);--n-button-color:var(--n-color-text-error);--n-button-font-weight:var(--n-font-weight-active)}:host([variant=danger]) .n-button:hover{--n-button-border-color:var(--n-color-status-danger)}: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}:host([disabled]) .n-button::after{display: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);--n-button-gap:calc(var(--n-space-s) / 2)}:host([size="s"]) .n-button{line-height:var(--n-line-height-tight)}:host([size="l"]){--n-button-border-radius:var(--n-border-radius);--n-button-font-size:var(--n-font-size-l);--n-button-min-height:calc(var(--n-space-xxl) - var(--n-space-l));--n-button-padding-x:calc(var(--n-space-l) / 1.3);--n-button-font-weight:var(--n-font-weight-active)}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}`;let p=class extends(u(c(a))){constructor(){super(...arguments),this.buttonRef=l(),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.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleOuterClick,!0)}disconnectedCallback(){this.removeEventListener("click",this.handleOuterClick,!0)}render(){const t=e`<slot name="before"></slot><div class="n-content"><slot></slot></div><slot name="after"></slot>`;return this.href?this.renderLink(t):this.renderButton(t)}renderLink(t){return e`<a ${b(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${s(this.disabled?void 0:this.href)}" tabindex="${s(this.disabled?"-1":void 0)}" aria-disabled="${s(this.disabled?"true":void 0)}" role="${s(this.disabled?"link":void 0)}">${t}</a>`}renderButton(t){return e`<slot name="proxy"></slot><button ${b(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${s(this.name||void 0)}" value="${s(this.value||void 0)}" @click="${this.handleClick}">${t}</button>`}renderLightDom(){return this.href||!this.form?r:e`<button ${b(this.buttonRef)} slot="proxy" name="${s(this.name||void 0)}" value="${s(this.value||void 0)}" ?disabled="${this.disabled}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}};p.styles=[h,v],t([i({reflect:!0})],p.prototype,"variant",void 0),t([i({reflect:!0})],p.prototype,"type",void 0),t([i({reflect:!0})],p.prototype,"size",void 0),t([i({reflect:!0})],p.prototype,"href",void 0),t([i({type:Boolean})],p.prototype,"download",void 0),t([i({reflect:!0})],p.prototype,"target",void 0),t([i({reflect:!0,type:Boolean})],p.prototype,"expand",void 0),p=t([o("nord-button")],p);var f=p;export{f as default};
2
2
  //# sourceMappingURL=Button.js.map
package/lib/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Button.css\"\n\n/**\n * Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n *\n * @status ready\n * @category action\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 = [componentStyle, style]\n\n private buttonRef = createRef<HTMLButtonElement>()\n private lightDom = new LightDomController(this, {\n render: () => this.renderLightDom(),\n })\n\n /**\n * The style variant of the button.\n */\n @property({ reflect: true }) variant: \"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" = \"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\" | \"l\" = \"m\"\n\n /**\n * When provided, renders the button as a link,\n * with its href attribute set to the given value.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * When provided together with a href property, the button will\n * trigger a file download instead of a page visit.\n */\n @property({ type: Boolean }) download = false\n\n /**\n * When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n */\n @property({ reflect: true }) target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\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.addEventListener(\"click\", this.handleOuterClick, true)\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this.handleOuterClick, true)\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 ? this.renderLink(innards) : this.renderButton(innards)\n }\n\n /**\n * We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n *\n * @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n private renderLink(innards: TemplateResult) {\n return html`\n <a\n ${ref(this.focusableRef)}\n class=\"n-button\"\n target=${this.target}\n ?download=${this.download}\n href=${ifDefined(this.disabled ? undefined : this.href)}\n tabindex=${ifDefined(this.disabled ? \"-1\" : undefined)}\n aria-disabled=${ifDefined(this.disabled ? \"true\" : undefined)}\n role=${ifDefined(this.disabled ? \"link\" : undefined)}\n >${innards}\n </a>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return 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 || undefined)}\n value=${ifDefined(this.value || undefined)}\n @click=${this.handleClick}\n >\n ${innards}\n </button>\n `\n }\n\n private renderLightDom() {\n if (this.href || !this.form) {\n return nothing\n }\n\n return html`\n <button\n ${ref(this.buttonRef)}\n slot=\"proxy\"\n name=${ifDefined(this.name || undefined)}\n value=${ifDefined(this.value || undefined)}\n ?disabled=${this.disabled}\n type=${this.type}\n ></button>\n `\n }\n\n private handleOuterClick = (e: MouseEvent) => {\n // we want to avoid emitting click events when a click\n // happens in blank space in the host, but not on the button\n // so we stop propagation of any events if click didn't happen on the internal or proxy button\n const isInternalButton = e\n .composedPath()\n .some(node => node === this.focusableRef.value || node === this.buttonRef.value)\n\n if (!isInternalButton) {\n e.stopPropagation()\n }\n }\n\n private handleClick(e: Event) {\n if (this.buttonRef.value) {\n // prevents two events: one from internal button, one from proxy button\n e.stopPropagation()\n this.buttonRef.value.click()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button\": Button\n }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","createRef","LightDomController","render","renderLightDom","e","composedPath","some","node","focusableRef","value","buttonRef","stopPropagation","connectedCallback","super","addEventListener","handleOuterClick","disconnectedCallback","removeEventListener","innards","html","href","renderLink","renderButton","ref","target","download","ifDefined","disabled","undefined","name","handleClick","form","nothing","type","click","componentStyle","style","__decorate","property","reflect","Boolean","customElement"],"mappings":"msJAuBA,IAAqBA,EAArB,cAAoCC,EAAWC,EAAeC,KAA9DC,kCAGUC,eAAYC,IACZD,cAAW,IAAIE,EAAmBF,KAAM,CAC9CG,OAAQ,IAAMH,KAAKI,mBAMQJ,aAAiE,UAKjEA,UAAsC,SAMtCA,UAAwB,IAYxBA,eAAW,EAWXA,YAAkD,QAKnCA,aAAS,EA+E7CA,sBAAoBK,IAIDA,EACtBC,eACAC,MAAKC,GAAQA,IAASR,KAAKS,aAAaC,OAASF,IAASR,KAAKW,UAAUD,SAG1EL,EAAEO,mBAtFNC,oBACEC,MAAMD,oBACNb,KAAKe,iBAAiB,QAASf,KAAKgB,kBAAkB,GAGxDC,uBACEjB,KAAKkB,oBAAoB,QAASlB,KAAKgB,kBAAkB,GAG3Db,SACE,MAAMgB,EAAUC,CAAI,kGAQpB,OAAOpB,KAAKqB,KAAOrB,KAAKsB,WAAWH,GAAWnB,KAAKuB,aAAaJ,GAU1DG,WAAWH,GACjB,OAAOC,CAAI,MAELI,EAAIxB,KAAKS,0CAEFT,KAAKyB,sBACFzB,KAAK0B,mBACVC,EAAU3B,KAAK4B,cAAWC,EAAY7B,KAAKqB,oBACvCM,EAAU3B,KAAK4B,SAAW,UAAOC,sBAC5BF,EAAU3B,KAAK4B,SAAW,YAASC,aAC5CF,EAAU3B,KAAK4B,SAAW,YAASC,OACvCV,QAKDI,aAAaJ,GACnB,OAAOC,CAAI,qCAGLI,EAAIxB,KAAKS,6CAECT,KAAK4B,mBACVD,EAAU3B,KAAK8B,WAAQD,cACtBF,EAAU3B,KAAKU,YAASmB,eACvB7B,KAAK+B,gBAEZZ,aAKAf,iBACN,OAAIJ,KAAKqB,OAASrB,KAAKgC,KACdC,EAGFb,CAAI,WAELI,EAAIxB,KAAKW,iCAEJgB,EAAU3B,KAAK8B,WAAQD,cACtBF,EAAU3B,KAAKU,YAASmB,kBACpB7B,KAAK4B,mBACV5B,KAAKkC,kBAkBVH,YAAY1B,GACdL,KAAKW,UAAUD,QAEjBL,EAAEO,kBACFZ,KAAKW,UAAUD,MAAMyB,WAjJlBxC,SAAS,CAACyC,EAAgBC,GAUJC,GAA5BC,EAAS,CAAEC,SAAS,mCAKQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEL,KAAMO,0CAWWH,GAA5BC,EAAS,CAAEC,SAAS,kCAKuBF,GAA3CC,EAAS,CAAEC,SAAS,EAAMN,KAAMO,wCAlDd9C,KADpB+C,EAAc,gBACM/C,SAAAA"}
1
+ {"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Button.css\"\n\n/**\n * Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n *\n * @status ready\n * @category action\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 = [componentStyle, style]\n\n private buttonRef = createRef<HTMLButtonElement>()\n private lightDom = new LightDomController(this, {\n render: () => this.renderLightDom(),\n })\n\n /**\n * The style variant of the button.\n */\n @property({ reflect: true }) variant: \"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" = \"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\" | \"l\" = \"m\"\n\n /**\n * When provided, renders the button as a link,\n * with its href attribute set to the given value.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * When provided together with a href property, the button will\n * trigger a file download instead of a page visit.\n */\n @property({ type: Boolean }) download = false\n\n /**\n * When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n */\n @property({ reflect: true }) target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\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.addEventListener(\"click\", this.handleOuterClick, true)\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this.handleOuterClick, true)\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 ? this.renderLink(innards) : this.renderButton(innards)\n }\n\n /**\n * We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n *\n * @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n private renderLink(innards: TemplateResult) {\n return html`\n <a\n ${ref(this.focusableRef)}\n class=\"n-button\"\n target=${this.target}\n ?download=${this.download}\n href=${ifDefined(this.disabled ? undefined : this.href)}\n tabindex=${ifDefined(this.disabled ? \"-1\" : undefined)}\n aria-disabled=${ifDefined(this.disabled ? \"true\" : undefined)}\n role=${ifDefined(this.disabled ? \"link\" : undefined)}\n >${innards}\n </a>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return 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 || undefined)}\n value=${ifDefined(this.value || undefined)}\n @click=${this.handleClick}\n >\n ${innards}\n </button>\n `\n }\n\n private renderLightDom() {\n if (this.href || !this.form) {\n return nothing\n }\n\n return html`\n <button\n ${ref(this.buttonRef)}\n slot=\"proxy\"\n name=${ifDefined(this.name || undefined)}\n value=${ifDefined(this.value || undefined)}\n ?disabled=${this.disabled}\n type=${this.type}\n ></button>\n `\n }\n\n private handleOuterClick = (e: MouseEvent) => {\n // we want to avoid emitting click events when a click\n // happens in blank space in the host, but not on the button\n // so we stop propagation of any events if click didn't happen on the internal or proxy button\n const isInternalButton = e\n .composedPath()\n .some(node => node === this.focusableRef.value || node === this.buttonRef.value)\n\n if (!isInternalButton) {\n e.stopPropagation()\n }\n }\n\n private handleClick(e: Event) {\n if (this.buttonRef.value) {\n // prevents two events: one from internal button, one from proxy button\n e.stopPropagation()\n this.buttonRef.value.click()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button\": Button\n }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","createRef","LightDomController","render","renderLightDom","e","composedPath","some","node","focusableRef","value","buttonRef","stopPropagation","connectedCallback","super","addEventListener","handleOuterClick","disconnectedCallback","removeEventListener","innards","html","href","renderLink","renderButton","ref","target","download","ifDefined","disabled","undefined","name","handleClick","form","nothing","type","click","componentStyle","style","__decorate","property","reflect","Boolean","customElement"],"mappings":"mtJAuBA,IAAqBA,EAArB,cAAoCC,EAAWC,EAAeC,KAA9DC,kCAGUC,eAAYC,IACZD,cAAW,IAAIE,EAAmBF,KAAM,CAC9CG,OAAQ,IAAMH,KAAKI,mBAMQJ,aAAiE,UAKjEA,UAAsC,SAMtCA,UAAwB,IAYxBA,eAAW,EAWXA,YAAkD,QAKnCA,aAAS,EA+E7CA,sBAAoBK,IAIDA,EACtBC,eACAC,MAAKC,GAAQA,IAASR,KAAKS,aAAaC,OAASF,IAASR,KAAKW,UAAUD,SAG1EL,EAAEO,mBAtFNC,oBACEC,MAAMD,oBACNb,KAAKe,iBAAiB,QAASf,KAAKgB,kBAAkB,GAGxDC,uBACEjB,KAAKkB,oBAAoB,QAASlB,KAAKgB,kBAAkB,GAG3Db,SACE,MAAMgB,EAAUC,CAAI,kGAQpB,OAAOpB,KAAKqB,KAAOrB,KAAKsB,WAAWH,GAAWnB,KAAKuB,aAAaJ,GAU1DG,WAAWH,GACjB,OAAOC,CAAI,MAELI,EAAIxB,KAAKS,0CAEFT,KAAKyB,sBACFzB,KAAK0B,mBACVC,EAAU3B,KAAK4B,cAAWC,EAAY7B,KAAKqB,oBACvCM,EAAU3B,KAAK4B,SAAW,UAAOC,sBAC5BF,EAAU3B,KAAK4B,SAAW,YAASC,aAC5CF,EAAU3B,KAAK4B,SAAW,YAASC,OACvCV,QAKDI,aAAaJ,GACnB,OAAOC,CAAI,qCAGLI,EAAIxB,KAAKS,6CAECT,KAAK4B,mBACVD,EAAU3B,KAAK8B,WAAQD,cACtBF,EAAU3B,KAAKU,YAASmB,eACvB7B,KAAK+B,gBAEZZ,aAKAf,iBACN,OAAIJ,KAAKqB,OAASrB,KAAKgC,KACdC,EAGFb,CAAI,WAELI,EAAIxB,KAAKW,iCAEJgB,EAAU3B,KAAK8B,WAAQD,cACtBF,EAAU3B,KAAKU,YAASmB,kBACpB7B,KAAK4B,mBACV5B,KAAKkC,kBAkBVH,YAAY1B,GACdL,KAAKW,UAAUD,QAEjBL,EAAEO,kBACFZ,KAAKW,UAAUD,MAAMyB,WAjJlBxC,SAAS,CAACyC,EAAgBC,GAUJC,GAA5BC,EAAS,CAAEC,SAAS,mCAKQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEL,KAAMO,0CAWWH,GAA5BC,EAAS,CAAEC,SAAS,kCAKuBF,GAA3CC,EAAS,CAAEC,SAAS,EAAMN,KAAMO,wCAlDd9C,KADpB+C,EAAc,gBACM/C,SAAAA"}
package/lib/bundle.js CHANGED
@@ -86,7 +86,7 @@ function st(t,e){return(({finisher:t,descriptor:e})=>(n,o)=>{var i;if(void 0===o
86
86
  * @license
87
87
  * Copyright 2020 Google LLC
88
88
  * SPDX-License-Identifier: BSD-3-Clause
89
- */const Dt=()=>new Lt;class Lt{}const Mt=new WeakMap,Tt=wt(class extends St{render(t){return O}update(t,[e]){var n;const o=e!==this.U;return o&&void 0!==this.U&&this.ot(void 0),(o||this.rt!==this.lt)&&(this.U=e,this.ht=null===(n=t.options)||void 0===n?void 0:n.host,this.ot(this.lt=t.element)),O}ot(t){"function"==typeof this.U?(void 0!==Mt.get(this.U)&&this.U.call(this.ht,void 0),Mt.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?Mt.get(this.U):null===(t=this.U)||void 0===t?void 0:t.value}disconnected(){this.rt===this.lt&&this.ot(void 0)}reconnected(){this.ot(this.lt)}});class Nt{constructor(t,e){this.host=t,this.options=e,this.host=t,this.options=e,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){R(O,this.container,this.options.renderOptions)}render(){R(this.options.render(),this.container,this.options.renderOptions)}}function Ot(t){return class extends t{constructor(){super(...arguments),this.focusableRef=Dt()}focus(t){var e;null===(e=this.focusableRef.value)||void 0===e||e.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 It(e){class n extends e{constructor(){super(...arguments),this.disabled=!1,this.value=""}get form(){return this.closest("form")||void 0}}return t([it({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),t([it()],n.prototype,"name",void 0),t([it()],n.prototype,"value",void 0),n}const Rt=r`:host{display:inline-block}.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-button-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-form);margin:0;min-block-size:var(--n-button-min-height,var(--n-space-xl));padding:var(--n-button-padding-y,calc(var(--n-space-s)/ 1.6)) 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;position:relative;inline-size:var(--n-button-width,fit-content)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--n-button-gradient,linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%));background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--n-button-width:100%;display:block}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-button:focus{--n-button-border-color:var(--n-color-primary);--n-button-border-style:solid;--n-button-box-shadow:0 0 0 1px var(--n-button-border-color);outline:0}.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]) .n-button:focus{--n-button-box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-button-border-color)}:host([variant=primary]) .n-button:hover{--n-button-background-color:var(--n-color-primary-strong);--n-button-border-color:transparent}: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]) .n-button:hover{--n-button-color:var(--n-color-text)}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--n-button-border-color:transparent;--n-button-box-shadow:none}:host([variant=plain]) .n-button:hover{--n-button-border-color:transparent}:host([variant=plain]) .n-button:focus{--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--n-button-border-color:var(--n-color-status-danger);--n-button-color:var(--n-color-text-error);--n-button-font-weight:var(--n-font-weight-active)}:host([variant=danger]) .n-button:hover{--n-button-border-color:var(--n-color-status-danger)}: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}:host([disabled]) .n-button::after{display: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);--n-button-gap:calc(var(--n-space-s) / 2)}:host([size="s"]) .n-button{line-height:var(--n-line-height-tight)}:host([size="l"]){--n-button-border-radius:var(--n-border-radius);--n-button-font-size:var(--n-font-size-l);--n-button-min-height:calc(var(--n-space-xxl) - var(--n-space-l));--n-button-padding-x:calc(var(--n-space-l) / 1.3);--n-button-font-weight:var(--n-font-weight-active)}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}`;let Bt=class extends(It(Ot(tt))){constructor(){super(...arguments),this.buttonRef=Dt(),this.lightDom=new Nt(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleOuterClick,!0)}disconnectedCallback(){this.removeEventListener("click",this.handleOuterClick,!0)}render(){const t=T`<slot name="before"></slot><div class="n-content"><slot></slot></div><slot name="after"></slot>`;return this.href?this.renderLink(t):this.renderButton(t)}renderLink(t){return T`<a ${Tt(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${ut(this.disabled?void 0:this.href)}" tabindex="${ut(this.disabled?"-1":void 0)}" aria-disabled="${ut(this.disabled?"true":void 0)}" role="${ut(this.disabled?"link":void 0)}">${t}</a>`}renderButton(t){return T`<slot name="proxy"></slot><button ${Tt(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${ut(this.name||void 0)}" value="${ut(this.value||void 0)}" @click="${this.handleClick}">${t}</button>`}renderLightDom(){return this.href||!this.form?O:T`<button ${Tt(this.buttonRef)} slot="proxy" name="${ut(this.name||void 0)}" value="${ut(this.value||void 0)}" ?disabled="${this.disabled}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}};Bt.styles=[lt,Rt],t([it({reflect:!0})],Bt.prototype,"variant",void 0),t([it({reflect:!0})],Bt.prototype,"type",void 0),t([it({reflect:!0})],Bt.prototype,"size",void 0),t([it({reflect:!0})],Bt.prototype,"href",void 0),t([it({type:Boolean})],Bt.prototype,"download",void 0),t([it({reflect:!0})],Bt.prototype,"target",void 0),t([it({reflect:!0,type:Boolean})],Bt.prototype,"expand",void 0),Bt=t([nt("nord-button")],Bt);var Pt=Bt;class Ut{constructor(t,e=""){this.host=t,this.slotName=e,this.handleSlotChange=t=>{t.target.name===this.slotName&&this.onChange(t)},this.host=t,t.addController(this),this.slotName=e}hostConnected(){var t;null===(t=this.host.shadowRoot)||void 0===t||t.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){var t;null===(t=this.host.shadowRoot)||void 0===t||t.removeEventListener("slotchange",this.handleSlotChange)}get hasContent(){return null!=this.content}get isEmpty(){return!this.hasContent}get content(){const t=this.slotName?`[slot="${this.slotName}"]`:":not([slot])";return this.host.querySelector(t)}onChange(t){this.host.requestUpdate()}}const Ht=r`:host{--n-card-padding:var(--n-space-m);--n-card-slot-padding:var(--n-space-m);--n-banner-box-shadow:none;font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-card{background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-card)}@media (max-width:1000px){slot:not([name]){overflow-x:auto}}:host([padding="l"]){--n-card-padding:var(--n-space-l);--n-card-slot-padding:var(--n-space-l)}:host([padding=none]){--n-card-padding:0;--n-card-slot-padding:var(--n-space-m)}slot{display:block}slot[hidden]{display:none}slot:not([name]){padding:var(--n-card-padding)}slot[name=header]{border-block-end:1px solid var(--n-color-border);padding:var(--n-space-m) var(--n-card-slot-padding)}slot[name=footer]{padding:var(--n-card-slot-padding);padding-block-start:0;white-space:nowrap}::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 Ft=class extends tt{constructor(){super(...arguments),this.headerSlot=new Ut(this,"header"),this.footerSlot=new Ut(this,"footer"),this.padding="m"}render(){return T`<div class="n-card"><slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><slot></slot><slot name="footer" ?hidden="${this.footerSlot.isEmpty}"></slot></div>`}};Ft.styles=[lt,Ht],t([it({reflect:!0})],Ft.prototype,"padding",void 0),Ft=t([nt("nord-card")],Ft);var jt=Ft;
89
+ */const Dt=()=>new Lt;class Lt{}const Mt=new WeakMap,Tt=wt(class extends St{render(t){return O}update(t,[e]){var n;const o=e!==this.U;return o&&void 0!==this.U&&this.ot(void 0),(o||this.rt!==this.lt)&&(this.U=e,this.ht=null===(n=t.options)||void 0===n?void 0:n.host,this.ot(this.lt=t.element)),O}ot(t){"function"==typeof this.U?(void 0!==Mt.get(this.U)&&this.U.call(this.ht,void 0),Mt.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?Mt.get(this.U):null===(t=this.U)||void 0===t?void 0:t.value}disconnected(){this.rt===this.lt&&this.ot(void 0)}reconnected(){this.ot(this.lt)}});class Nt{constructor(t,e){this.host=t,this.options=e,this.host=t,this.options=e,t.addController(this)}get container(){return this.options.container||this.host}hostUpdated(){this.render()}hostDisconnected(){R(O,this.container,this.options.renderOptions)}render(){R(this.options.render(),this.container,this.options.renderOptions)}}function Ot(t){return class extends t{constructor(){super(...arguments),this.focusableRef=Dt()}focus(t){var e;null===(e=this.focusableRef.value)||void 0===e||e.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 It(e){class n extends e{constructor(){super(...arguments),this.disabled=!1,this.value=""}get form(){return this.closest("form")||void 0}}return t([it({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),t([it()],n.prototype,"name",void 0),t([it()],n.prototype,"value",void 0),n}const Rt=r`:host{display:inline-block}.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-button-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-form);margin:0;min-block-size:var(--n-button-min-height,var(--n-space-xl));padding:var(--n-button-padding-y,calc(var(--n-space-s)/ 1.6)) 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;position:relative;inline-size:var(--n-button-width,fit-content)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--n-button-gradient,linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%));background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--n-button-width:100%;display:block}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-button:focus{--n-button-border-color:var(--n-color-primary);--n-button-border-style:solid;--n-button-box-shadow:0 0 0 1px var(--n-button-border-color);outline:0}.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]) .n-button:focus{--n-button-box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-button-border-color)}:host([variant=primary]) .n-button:hover{--n-button-border-color:transparent;--n-button-background-color:var(--n-color-primary);filter:brightness(93%)}: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]) .n-button:hover{--n-button-color:var(--n-color-text)}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--n-button-border-color:transparent;--n-button-box-shadow:none}:host([variant=plain]) .n-button:hover{--n-button-border-color:transparent}:host([variant=plain]) .n-button:focus{--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--n-button-border-color:var(--n-color-status-danger);--n-button-color:var(--n-color-text-error);--n-button-font-weight:var(--n-font-weight-active)}:host([variant=danger]) .n-button:hover{--n-button-border-color:var(--n-color-status-danger)}: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}:host([disabled]) .n-button::after{display: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);--n-button-gap:calc(var(--n-space-s) / 2)}:host([size="s"]) .n-button{line-height:var(--n-line-height-tight)}:host([size="l"]){--n-button-border-radius:var(--n-border-radius);--n-button-font-size:var(--n-font-size-l);--n-button-min-height:calc(var(--n-space-xxl) - var(--n-space-l));--n-button-padding-x:calc(var(--n-space-l) / 1.3);--n-button-font-weight:var(--n-font-weight-active)}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}`;let Bt=class extends(It(Ot(tt))){constructor(){super(...arguments),this.buttonRef=Dt(),this.lightDom=new Nt(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleOuterClick,!0)}disconnectedCallback(){this.removeEventListener("click",this.handleOuterClick,!0)}render(){const t=T`<slot name="before"></slot><div class="n-content"><slot></slot></div><slot name="after"></slot>`;return this.href?this.renderLink(t):this.renderButton(t)}renderLink(t){return T`<a ${Tt(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${ut(this.disabled?void 0:this.href)}" tabindex="${ut(this.disabled?"-1":void 0)}" aria-disabled="${ut(this.disabled?"true":void 0)}" role="${ut(this.disabled?"link":void 0)}">${t}</a>`}renderButton(t){return T`<slot name="proxy"></slot><button ${Tt(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${ut(this.name||void 0)}" value="${ut(this.value||void 0)}" @click="${this.handleClick}">${t}</button>`}renderLightDom(){return this.href||!this.form?O:T`<button ${Tt(this.buttonRef)} slot="proxy" name="${ut(this.name||void 0)}" value="${ut(this.value||void 0)}" ?disabled="${this.disabled}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}};Bt.styles=[lt,Rt],t([it({reflect:!0})],Bt.prototype,"variant",void 0),t([it({reflect:!0})],Bt.prototype,"type",void 0),t([it({reflect:!0})],Bt.prototype,"size",void 0),t([it({reflect:!0})],Bt.prototype,"href",void 0),t([it({type:Boolean})],Bt.prototype,"download",void 0),t([it({reflect:!0})],Bt.prototype,"target",void 0),t([it({reflect:!0,type:Boolean})],Bt.prototype,"expand",void 0),Bt=t([nt("nord-button")],Bt);var Pt=Bt;class Ut{constructor(t,e=""){this.host=t,this.slotName=e,this.handleSlotChange=t=>{t.target.name===this.slotName&&this.onChange(t)},this.host=t,t.addController(this),this.slotName=e}hostConnected(){var t;null===(t=this.host.shadowRoot)||void 0===t||t.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){var t;null===(t=this.host.shadowRoot)||void 0===t||t.removeEventListener("slotchange",this.handleSlotChange)}get hasContent(){return null!=this.content}get isEmpty(){return!this.hasContent}get content(){const t=this.slotName?`[slot="${this.slotName}"]`:":not([slot])";return this.host.querySelector(t)}onChange(t){this.host.requestUpdate()}}const Ht=r`:host{--n-card-padding:var(--n-space-m);--n-card-slot-padding:var(--n-space-m);--n-banner-box-shadow:none;font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-card{background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-card)}@media (max-width:1000px){slot:not([name]){overflow-x:auto}}:host([padding="l"]){--n-card-padding:var(--n-space-l);--n-card-slot-padding:var(--n-space-l)}:host([padding=none]){--n-card-padding:0;--n-card-slot-padding:var(--n-space-m)}slot{display:block}slot[hidden]{display:none}slot:not([name]){padding:var(--n-card-padding)}slot[name=header]{border-block-end:1px solid var(--n-color-border);padding:var(--n-space-m) var(--n-card-slot-padding)}slot[name=footer]{padding:var(--n-card-slot-padding);padding-block-start:0;white-space:nowrap}::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 Ft=class extends tt{constructor(){super(...arguments),this.headerSlot=new Ut(this,"header"),this.footerSlot=new Ut(this,"footer"),this.padding="m"}render(){return T`<div class="n-card"><slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><slot></slot><slot name="footer" ?hidden="${this.footerSlot.isEmpty}"></slot></div>`}};Ft.styles=[lt,Ht],t([it({reflect:!0})],Ft.prototype,"padding",void 0),Ft=t([nt("nord-card")],Ft);var jt=Ft;
90
90
  /**
91
91
  * @license
92
92
  * Copyright 2017 Google LLC