@nordhealth/components 4.8.0 → 4.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +3927 -3922
- package/lib/Badge.js +1 -1
- package/lib/Badge.js.map +1 -1
- package/lib/Card.js +1 -1
- package/lib/Card.js.map +1 -1
- package/lib/Modal.js +1 -1
- package/lib/Modal.js.map +1 -1
- package/lib/bundle.js +3 -3
- package/lib/bundle.js.map +1 -1
- package/lib/src/card/Card.d.ts +1 -0
- package/package.json +3 -3
package/lib/Badge.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as n,html as a}from"lit";import{property as t,customElement as e}from"lit/decorators.js";import{s}from"./Component-DSU3Qp0O.js";const c=r`:host{--_n-badge-background-color:var(--n-color-text-neutral);--_n-badge-chip-color:var(--n-color-status-neutral-weak);--_n-badge-border-color:var(--n-color-border-neutral);display:inline;vertical-align:middle}.n-badge{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;border-radius:var(--n-border-radius-pill);border:1px solid var(--_n-badge-border-color);background:var(--_n-badge-chip-color);font-size:var(--n-font-size-s);font-family:var(--n-font-family);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height);letter-spacing:0;padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s);color:var(--_n-badge-background-color);gap:var(--n-space-xs);align-items:center;display:inline-flex;white-space:nowrap;position:relative}:host(:is([variant=success],[type=success])){--_n-badge-chip-color:var(--n-color-status-success-weak);--_n-badge-border-color:var(--n-color-border-success);--_n-badge-background-color:var(--n-color-text-success)}:host(:is([variant=warning],[type=warning])){--_n-badge-chip-color:var(--n-color-status-warning-weak);--_n-badge-border-color:var(--n-color-border-warning);--_n-badge-background-color:var(--n-color-text-warning)}:host(:is([variant=highlight],[type=highlight])){--_n-badge-chip-color:var(--n-color-status-highlight-weak);--_n-badge-border-color:var(--n-color-border-highlight);--_n-badge-background-color:var(--n-color-text-highlight)}:host(:is([variant=info],[type=info],[type=progress])){--_n-badge-chip-color:var(--n-color-status-info-weak);--_n-badge-border-color:var(--n-color-border-info);--_n-badge-background-color:var(--n-color-text-info)}:host(:is([variant=danger],[type=danger])){--_n-badge-chip-color:var(--n-color-status-danger-weak);--_n-badge-border-color:var(--n-color-border-danger);--_n-badge-background-color:var(--n-color-text-danger)}:host([strong]){--_n-badge-chip-color:var(--n-color-status-neutral);--_n-badge-border-color:var(--n-color-border-neutral);--_n-badge-background-color:var(--n-color-text-neutral-strong)}:host(:is([variant=success],[type=success])[strong]){--_n-badge-chip-color:var(--n-color-status-success);--_n-badge-border-color:var(--n-color-status-success);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=warning],[type=warning])[strong]){--_n-badge-chip-color:var(--n-color-status-warning);--_n-badge-border-color:var(--n-color-status-warning);--_n-badge-background-color:var(--n-color-text-warning-strong)}:host(:is([variant=highlight],[type=highlight])[strong]){--_n-badge-chip-color:var(--n-color-status-highlight);--_n-badge-border-color:var(--n-color-status-highlight);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=info],[type=info],[type=progress])[strong]){--_n-badge-chip-color:var(--n-color-status-info);--_n-badge-border-color:var(--n-color-status-info);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=danger],[type=danger])[strong]){--_n-badge-chip-color:var(--n-color-status-danger);--_n-badge-border-color:var(--n-color-status-danger);--_n-badge-background-color:var(--n-color-text-on-accent)}::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-xxs);transform:translateY(-.5px)}`;let i=class extends n{constructor(){super(...arguments),this.strong=!1}render(){return a`<span class="n-badge"><slot name="icon"></slot><slot></slot></span>`}};i.styles=[s,c],o([t({reflect:!0})],i.prototype,"type",void 0),o([t({reflect:!0})],i.prototype,"variant",void 0),o([t({reflect:!0,type:Boolean})],i.prototype,"strong",void 0),i=o([e("nord-badge")],i);var l=i;export{l as default};
|
|
1
|
+
import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as n,html as a}from"lit";import{property as t,customElement as e}from"lit/decorators.js";import{s}from"./Component-DSU3Qp0O.js";const c=r`:host{--_n-badge-background-color:var(--n-color-text-neutral);--_n-badge-chip-color:var(--n-color-status-neutral-weak);--_n-badge-border-color:var(--n-color-border-neutral);display:inline;vertical-align:middle;line-height:var(--n-line-height-tight)}.n-badge{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;border-radius:var(--n-border-radius-pill);border:1px solid var(--_n-badge-border-color);background:var(--_n-badge-chip-color);font-size:var(--n-font-size-s);font-family:var(--n-font-family);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height);letter-spacing:0;padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s);color:var(--_n-badge-background-color);gap:var(--n-space-xs);align-items:center;display:inline-flex;white-space:nowrap;position:relative}:host(:is([variant=success],[type=success])){--_n-badge-chip-color:var(--n-color-status-success-weak);--_n-badge-border-color:var(--n-color-border-success);--_n-badge-background-color:var(--n-color-text-success)}:host(:is([variant=warning],[type=warning])){--_n-badge-chip-color:var(--n-color-status-warning-weak);--_n-badge-border-color:var(--n-color-border-warning);--_n-badge-background-color:var(--n-color-text-warning)}:host(:is([variant=highlight],[type=highlight])){--_n-badge-chip-color:var(--n-color-status-highlight-weak);--_n-badge-border-color:var(--n-color-border-highlight);--_n-badge-background-color:var(--n-color-text-highlight)}:host(:is([variant=info],[type=info],[type=progress])){--_n-badge-chip-color:var(--n-color-status-info-weak);--_n-badge-border-color:var(--n-color-border-info);--_n-badge-background-color:var(--n-color-text-info)}:host(:is([variant=danger],[type=danger])){--_n-badge-chip-color:var(--n-color-status-danger-weak);--_n-badge-border-color:var(--n-color-border-danger);--_n-badge-background-color:var(--n-color-text-danger)}:host([strong]){--_n-badge-chip-color:var(--n-color-status-neutral);--_n-badge-border-color:var(--n-color-border-neutral);--_n-badge-background-color:var(--n-color-text-neutral-strong)}:host(:is([variant=success],[type=success])[strong]){--_n-badge-chip-color:var(--n-color-status-success);--_n-badge-border-color:var(--n-color-status-success);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=warning],[type=warning])[strong]){--_n-badge-chip-color:var(--n-color-status-warning);--_n-badge-border-color:var(--n-color-status-warning);--_n-badge-background-color:var(--n-color-text-warning-strong)}:host(:is([variant=highlight],[type=highlight])[strong]){--_n-badge-chip-color:var(--n-color-status-highlight);--_n-badge-border-color:var(--n-color-status-highlight);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=info],[type=info],[type=progress])[strong]){--_n-badge-chip-color:var(--n-color-status-info);--_n-badge-border-color:var(--n-color-status-info);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=danger],[type=danger])[strong]){--_n-badge-chip-color:var(--n-color-status-danger);--_n-badge-border-color:var(--n-color-status-danger);--_n-badge-background-color:var(--n-color-text-on-accent)}::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-xxs);transform:translateY(-.5px)}`;let i=class extends n{constructor(){super(...arguments),this.strong=!1}render(){return a`<span class="n-badge"><slot name="icon"></slot><slot></slot></span>`}};i.styles=[s,c],o([t({reflect:!0})],i.prototype,"type",void 0),o([t({reflect:!0})],i.prototype,"variant",void 0),o([t({reflect:!0,type:Boolean})],i.prototype,"strong",void 0),i=o([e("nord-badge")],i);var l=i;export{l as default};
|
|
2
2
|
//# sourceMappingURL=Badge.js.map
|
package/lib/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Badge.css\"\n\n/**\n * Badges are used to inform users of the status of an object\n * or of an action that’s been taken. Commonly used in tabular\n * data to indicate status.\n *\n * @status ready\n * @category text\n * @slot - The badge content.\n * @slot icon - Used to place an icon at the start of badge.\n */\n@customElement(\"nord-badge\")\nexport default class Badge extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * The type of badge.\n * Determines the background color of the badge.\n * @deprecated Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.\n * @default \"neutral\"\n */\n @property({ reflect: true }) type?: \"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\"\n\n /**\n * The style variant of the badge.\n * Determines the background color of the badge.\n * @default \"neutral\"\n */\n @property({ reflect: true }) variant?: \"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\"\n\n /**\n * Strong badges are a secondary style for badges.\n * They provide more visual prominence and emphasize them.\n */\n @property({ reflect: true, type: Boolean }) strong = false\n\n render() {\n return html`\n <span class=\"n-badge\">\n <slot name=\"icon\"></slot>\n <slot></slot>\n </span>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-badge\": Badge\n }\n}\n"],"names":["Badge","LitElement","constructor","this","strong","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Badge.css\"\n\n/**\n * Badges are used to inform users of the status of an object\n * or of an action that’s been taken. Commonly used in tabular\n * data to indicate status.\n *\n * @status ready\n * @category text\n * @slot - The badge content.\n * @slot icon - Used to place an icon at the start of badge.\n */\n@customElement(\"nord-badge\")\nexport default class Badge extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * The type of badge.\n * Determines the background color of the badge.\n * @deprecated Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.\n * @default \"neutral\"\n */\n @property({ reflect: true }) type?: \"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\"\n\n /**\n * The style variant of the badge.\n * Determines the background color of the badge.\n * @default \"neutral\"\n */\n @property({ reflect: true }) variant?: \"warning\" | \"success\" | \"danger\" | \"highlight\" | \"neutral\" | \"info\"\n\n /**\n * Strong badges are a secondary style for badges.\n * They provide more visual prominence and emphasize them.\n */\n @property({ reflect: true, type: Boolean }) strong = false\n\n render() {\n return html`\n <span class=\"n-badge\">\n <slot name=\"icon\"></slot>\n <slot></slot>\n </span>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-badge\": Badge\n }\n}\n"],"names":["Badge","LitElement","constructor","this","strong","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"+6GAiBe,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAsB+BC,KAAMC,QAAG,CAUtD,CARC,MAAAC,GACE,OAAOC,CAAI,qEAMZ,GA9BMN,EAAAO,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA+FZ,EAAAa,UAAA,YAAA,GAOvFH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqFZ,EAAAa,UAAA,eAAA,GAM9DH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyBf,EAAAa,UAAA,cAAA,GAtBvCb,EAAKU,EAAA,CADzBM,EAAc,eACMhB,SAAAA"}
|
package/lib/Card.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as a}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as
|
|
1
|
+
import{_ as a}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as d,html as o}from"lit";import{property as e,customElement as t}from"lit/decorators.js";import{S as n}from"./SlotController-Z6eG7LSZ.js";import{s}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const i=r`:host{--_n-card-padding:var(--n-card-padding, var(--n-space-m));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-m));--_n-card-box-shadow:var(--n-card-box-shadow, var(--n-box-shadow-card));--_n-card-border-radius:var(--n-card-border-radius, var(--n-border-radius));--_n-card-header-background:var(--n-card-header-background, transparent);color:var(--n-color-text);display:block;inline-size:100%}.n-card{background:var(--n-color-surface);border-radius:var(--_n-card-border-radius);box-shadow:var(--_n-card-box-shadow);block-size:100%;display:flex;flex-direction:column}.header{background-color:var(--_n-card-header-background);border-block-end:1px solid var(--n-color-border);border-start-start-radius:var(--_n-card-border-radius);border-start-end-radius:var(--_n-card-border-radius);padding:var(--n-space-m) var(--_n-card-slot-padding);display:flex;gap:var(--n-space-s);align-items:center;justify-content:space-between;flex-wrap:wrap}:host([padding="l"]){--_n-card-padding:var(--n-card-padding, var(--n-space-l));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-l))}:host([padding=none]){--_n-card-padding:var(--n-card-padding, 0)}slot{display:block}slot:not([name]){padding:var(--_n-card-padding);flex:1}slot[name=footer]{padding:var(--_n-card-slot-padding);padding-block-start:0;white-space:nowrap}::slotted([slot=header-end]){--n-stack-gap:var(--n-space-s);display:flex;gap:var(--n-stack-gap);align-items:center;flex-wrap:wrap;margin-block-start:calc(var(--n-space-xs) * -1)!important;margin-block-end:calc(var(--n-space-xs) * -1)!important}::slotted([slot=header]){font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading);margin:0}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends d{constructor(){super(...arguments),this.headerSlot=new n(this,"header"),this.headerEndSlot=new n(this,"header-end"),this.footerSlot=new n(this,"footer"),this.padding="m"}render(){return o`<div class="n-card"><div class="header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><slot></slot><slot name="${this.footerSlot.slotName}" ?hidden="${this.footerSlot.isEmpty}"></slot></div>`}};l.styles=[s,i],a([e({reflect:!0})],l.prototype,"padding",void 0),l=a([t("nord-card")],l);var c=l;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Card.js.map
|
package/lib/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../src/card/Card.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Card.css\"\n\n/**\n * Cards are shadowed surfaces that display content and actions on a\n * single topic. They should be easy to scan for relevant and\n * actionable information.\n *\n * @status ready\n * @category structure\n * @slot - The card content.\n * @slot header - Optional slot that holds a header for the card.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n * @slot footer - Optional slot that holds footer content for the card.\n *\n * @cssprop [--n-card-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-card-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-card-padding=var(--n-space-m)] - Controls the padding on all sides of the card.\n * @cssprop [--n-card-slot-padding=var(--n-space-m)] - Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.\n */\n@customElement(\"nord-card\")\nexport default class Card extends LitElement {\n static styles = [componentStyle, style]\n\n private headerSlot = new SlotController(this, \"header\")\n private headerEndSlot = new SlotController(this, \"header-end\")\n private footerSlot = new SlotController(this, \"footer\")\n\n /**\n * Controls the padding of the card component. When set to “none”,\n * the header and footer slots will still have padding.\n */\n @property({ reflect: true }) padding: \"m\" | \"l\" | \"none\" = \"m\"\n\n render() {\n return html`\n <div class=\"n-card\">\n <div class=\"header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n <slot name=${this.headerSlot.slotName}></slot>\n <slot name=${this.headerEndSlot.slotName}></slot>\n </div>\n <slot></slot>\n <slot name=${this.footerSlot.slotName} ?hidden=${this.footerSlot.isEmpty}></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-card\": Card\n }\n}\n"],"names":["Card","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","footerSlot","padding","render","html","isEmpty","slotName","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../src/card/Card.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Card.css\"\n\n/**\n * Cards are shadowed surfaces that display content and actions on a\n * single topic. They should be easy to scan for relevant and\n * actionable information.\n *\n * @status ready\n * @category structure\n * @slot - The card content.\n * @slot header - Optional slot that holds a header for the card.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n * @slot footer - Optional slot that holds footer content for the card.\n *\n * @cssprop [--n-card-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-card-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-card-padding=var(--n-space-m)] - Controls the padding on all sides of the card.\n * @cssprop [--n-card-slot-padding=var(--n-space-m)] - Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.\n * @cssprop [--n-card-header-background=transparent] - Controls the background color of the card header.\n */\n@customElement(\"nord-card\")\nexport default class Card extends LitElement {\n static styles = [componentStyle, style]\n\n private headerSlot = new SlotController(this, \"header\")\n private headerEndSlot = new SlotController(this, \"header-end\")\n private footerSlot = new SlotController(this, \"footer\")\n\n /**\n * Controls the padding of the card component. When set to “none”,\n * the header and footer slots will still have padding.\n */\n @property({ reflect: true }) padding: \"m\" | \"l\" | \"none\" = \"m\"\n\n render() {\n return html`\n <div class=\"n-card\">\n <div class=\"header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n <slot name=${this.headerSlot.slotName}></slot>\n <slot name=${this.headerEndSlot.slotName}></slot>\n </div>\n <slot></slot>\n <slot name=${this.footerSlot.slotName} ?hidden=${this.footerSlot.isEmpty}></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-card\": Card\n }\n}\n"],"names":["Card","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","footerSlot","padding","render","html","isEmpty","slotName","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"wiEAyBe,IAAMA,EAAN,cAAmBC,EAAnB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cACzCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAMjBA,KAAOK,QAAuB,GAc5D,CAZC,MAAAC,GACE,OAAOC,CAAI,oDAEuBP,KAAKC,WAAWO,SAAWR,KAAKG,cAAcK,wBAC7DR,KAAKC,WAAWQ,gCAChBT,KAAKG,cAAcM,mDAGrBT,KAAKI,WAAWK,sBAAoBT,KAAKI,WAAWI,wBAGtE,GAvBMX,EAAAa,OAAS,CAACC,EAAgBC,GAUJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyClB,EAAAmB,UAAA,eAAA,GAX3CnB,EAAIgB,EAAA,CADxBI,EAAc,cACMpB,SAAAA"}
|
package/lib/Modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as e,html as i}from"lit";import{query as
|
|
1
|
+
import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as e,html as i}from"lit";import{query as t,property as a,customElement as l}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{c as r}from"./interface-close-small-CnpAFMO3.js";import d from"./Icon.js";import{S as p}from"./SlotController-Z6eG7LSZ.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as m}from"./events-Bv6wNHwJ.js";import{s as h}from"./Component-DSU3Qp0O.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as u}from"./ModalController.js";import"./Footer.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./EventController-BBOmvfLa.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-C5CMxfb3.js";const f=n`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:transparent;--n-footer-box-shadow:none;position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-overflow-hidden{overflow:hidden}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, none)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:var(--n-space-xs);flex-direction:column;inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;d.registerIcon(r);let b=class extends e{constructor(){super(...arguments),this.defaultSlot=new p(this),this.headerSlot=new p(this,"header"),this.featureSlot=new p(this,"feature"),this.footerSlot=new p(this,"footer"),this.localize=new v(this),this.modalController=new u(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new m("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return i`<div class="n-modal-backdrop"><div class="${s({"n-modal":!0,"n-overflow-hidden":this.featureSlot.hasContent&&this.defaultSlot.isEmpty&&this.footerSlot.isEmpty})}" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="${this.defaultSlot.isEmpty?"":"n-body-padded"}"></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new m("cancel",{cancelable:!0}))&&this.close()}};b.styles=[h,f],o([t(".n-modal",!0)],b.prototype,"modal",void 0),o([t(".n-modal-backdrop",!0)],b.prototype,"backdrop",void 0),o([a({type:Boolean,reflect:!0})],b.prototype,"open",void 0),o([a({reflect:!0})],b.prototype,"size",void 0),o([a({attribute:!1})],b.prototype,"returnValue",void 0),o([a({type:Boolean,reflect:!0})],b.prototype,"scrollable",void 0),o([c("open","updated")],b.prototype,"handleOpenUpdated",null),b=o([l("nord-modal")],b);var x=b;export{x as default};
|
|
2
2
|
//# sourceMappingURL=Modal.js.map
|
package/lib/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\nimport { ModalController } from \"./ModalController.js\"\n\nimport \"../footer/Footer.js\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot feature - Slot for full bleed content like an image.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the header of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n *\n * @localization closeLabel - Accessible label for the close button.\n */\n@customElement(\"nord-modal\")\nexport default class Modal extends LitElement {\n static styles = [componentStyle, style]\n\n @query(\".n-modal\", true) private modal!: HTMLDivElement\n @query(\".n-modal-backdrop\", true) private backdrop!: HTMLDivElement\n\n private defaultSlot = new SlotController(this)\n private headerSlot = new SlotController(this, \"header\")\n private featureSlot = new SlotController(this, \"feature\")\n private footerSlot = new SlotController(this, \"footer\")\n\n private localize = new LocalizeController<\"nord-modal\">(this)\n private modalController = new ModalController(this, {\n isOpen: () => this.open,\n onDismiss: () => this.handleDismiss(),\n dialog: () => this.modal,\n backdrop: () => this.backdrop,\n close: returnValue => this.close(returnValue),\n })\n\n /**\n * Controls whether the modal is open or not.\n */\n @property({ type: Boolean, reflect: true }) open = false\n\n /**\n * Controls the max-width of the modal when open.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" = \"m\"\n\n /**\n * The reason why the modal was closed. This typically indicates\n * which button the user pressed to close the modal, though any value\n * can be supplied if the modal is programmatically closed.\n */\n @property({ attribute: false }) returnValue: string = \"\"\n\n /**\n * By default if a modal is too big for the browser window,\n * the entire modal will scroll. This setting changes that behavior\n * so that the body of the modal scrolls instead, with the modal\n * itself remaining fixed.\n */\n @property({ type: Boolean, reflect: true }) scrollable = false\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.setAttribute(\"role\", \"dialog\")\n }\n\n /**\n * Show the modal, automatically moving focus to the modal or a child\n * element with an `autofocus` attribute.\n */\n showModal() {\n this.open = true\n }\n\n /**\n * Programmatically close the modal.\n * @param returnValue An optional value to indicate why the modal was closed.\n */\n close(returnValue?: string) {\n this.open = false\n\n if (returnValue != null) {\n this.returnValue = returnValue\n }\n\n this.dispatchEvent(new NordEvent(\"close\"))\n }\n\n /**\n * Programmatically focus the modal.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions) {\n this.modal.focus({ preventScroll: true, ...options })\n }\n\n render() {\n return html`\n <div class=\"n-modal-backdrop\">\n <div
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\nimport { ModalController } from \"./ModalController.js\"\n\nimport \"../footer/Footer.js\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot feature - Slot for full bleed content like an image.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the header of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n *\n * @localization closeLabel - Accessible label for the close button.\n */\n@customElement(\"nord-modal\")\nexport default class Modal extends LitElement {\n static styles = [componentStyle, style]\n\n @query(\".n-modal\", true) private modal!: HTMLDivElement\n @query(\".n-modal-backdrop\", true) private backdrop!: HTMLDivElement\n\n private defaultSlot = new SlotController(this)\n private headerSlot = new SlotController(this, \"header\")\n private featureSlot = new SlotController(this, \"feature\")\n private footerSlot = new SlotController(this, \"footer\")\n\n private localize = new LocalizeController<\"nord-modal\">(this)\n private modalController = new ModalController(this, {\n isOpen: () => this.open,\n onDismiss: () => this.handleDismiss(),\n dialog: () => this.modal,\n backdrop: () => this.backdrop,\n close: returnValue => this.close(returnValue),\n })\n\n /**\n * Controls whether the modal is open or not.\n */\n @property({ type: Boolean, reflect: true }) open = false\n\n /**\n * Controls the max-width of the modal when open.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" = \"m\"\n\n /**\n * The reason why the modal was closed. This typically indicates\n * which button the user pressed to close the modal, though any value\n * can be supplied if the modal is programmatically closed.\n */\n @property({ attribute: false }) returnValue: string = \"\"\n\n /**\n * By default if a modal is too big for the browser window,\n * the entire modal will scroll. This setting changes that behavior\n * so that the body of the modal scrolls instead, with the modal\n * itself remaining fixed.\n */\n @property({ type: Boolean, reflect: true }) scrollable = false\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.setAttribute(\"role\", \"dialog\")\n }\n\n /**\n * Show the modal, automatically moving focus to the modal or a child\n * element with an `autofocus` attribute.\n */\n showModal() {\n this.open = true\n }\n\n /**\n * Programmatically close the modal.\n * @param returnValue An optional value to indicate why the modal was closed.\n */\n close(returnValue?: string) {\n this.open = false\n\n if (returnValue != null) {\n this.returnValue = returnValue\n }\n\n this.dispatchEvent(new NordEvent(\"close\"))\n }\n\n /**\n * Programmatically focus the modal.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions) {\n this.modal.focus({ preventScroll: true, ...options })\n }\n\n render() {\n return html`\n <div class=\"n-modal-backdrop\">\n <div\n class=${classMap({\n \"n-modal\": true,\n \"n-overflow-hidden\": this.featureSlot.hasContent && this.defaultSlot.isEmpty && this.footerSlot.isEmpty,\n })}\n tabindex=\"0\"\n >\n <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n <button class=\"n-close\" @click=${this.handleDismiss}>\n <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term(\"closeLabel\")}></nord-icon>\n </button>\n </div>\n\n <div class=\"n-modal-body\">\n <slot\n name=${this.featureSlot.slotName}\n class=${this.headerSlot.isEmpty ? \"n-rounded-top\" : \"\"}\n ?hidden=${this.featureSlot.isEmpty}\n ></slot>\n <slot class=${this.defaultSlot.isEmpty ? \"\" : \"n-body-padded\"}></slot>\n </div>\n\n <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n <slot name=${this.footerSlot.slotName}></slot>\n </nord-footer>\n </div>\n </div>\n `\n }\n\n @observe(\"open\", \"updated\")\n protected handleOpenUpdated(prev: boolean) {\n if (this.open) {\n this.modalController.block()\n } else if (prev === true) {\n this.modalController.unblock()\n }\n }\n\n private handleDismiss() {\n // allow cancelling of close\n const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n if (allowed) {\n this.close()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-modal\": Modal\n }\n}\n"],"names":["Icon","registerIcon","closeIcon","Modal","LitElement","constructor","this","defaultSlot","SlotController","headerSlot","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","super","setAttribute","showModal","dispatchEvent","NordEvent","focus","options","preventScroll","render","html","classMap","hasContent","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","cancelable","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"guKAiBAA,EAAKC,aAAaC,GAuBH,IAAMC,EAAN,cAAoBC,EAApB,WAAAC,uBAMLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAUG,WAAG,IAAID,EAAeF,KAAM,UACtCA,KAAWI,YAAG,IAAIF,EAAeF,KAAM,WACvCA,KAAUK,WAAG,IAAIH,EAAeF,KAAM,UAEtCA,KAAAM,SAAW,IAAIC,EAAiCP,MAChDA,KAAAQ,gBAAkB,IAAIC,EAAgBT,KAAM,CAClDU,OAAQ,IAAMV,KAAKW,KACnBC,UAAW,IAAMZ,KAAKa,gBACtBC,OAAQ,IAAMd,KAAKe,MACnBC,SAAU,IAAMhB,KAAKgB,SACrBC,MAAOC,GAAelB,KAAKiB,MAAMC,KAMSlB,KAAIW,MAAG,EAKtBX,KAAImB,KAA2B,IAO5BnB,KAAWkB,YAAW,GAQVlB,KAAUoB,YAAG,CAyF1D,CAvFC,iBAAAC,GACEC,MAAMD,oBAENrB,KAAKuB,aAAa,OAAQ,SAC3B,CAMD,SAAAC,GACExB,KAAKW,MAAO,CACb,CAMD,KAAAM,CAAMC,GACJlB,KAAKW,MAAO,EAEO,MAAfO,IACFlB,KAAKkB,YAAcA,GAGrBlB,KAAKyB,cAAc,IAAIC,EAAU,SAClC,CAMD,KAAAC,CAAMC,GACJ5B,KAAKe,MAAMY,MAAM,CAAEE,eAAe,KAASD,GAC5C,CAED,MAAAE,GACE,OAAOC,CAAI,6CAGGC,EAAS,CACf,WAAW,EACX,oBAAqBhC,KAAKI,YAAY6B,YAAcjC,KAAKC,YAAYiC,SAAWlC,KAAKK,WAAW6B,8EAI9ClC,KAAKG,WAAW+B,yCACpClC,KAAKG,WAAWgC,oDACbnC,KAAKa,0EACqBb,KAAKM,SAAS8B,KAAK,mFAMrEpC,KAAKI,YAAY+B,oBAChBnC,KAAKG,WAAW+B,QAAU,gBAAkB,gBAC1ClC,KAAKI,YAAY8B,gCAEflC,KAAKC,YAAYiC,QAAU,GAAK,uDAGzBlC,KAAKK,WAAW6B,wBACxBlC,KAAKK,WAAW8B,6CAKtC,CAGS,iBAAAE,CAAkBC,GACtBtC,KAAKW,KACPX,KAAKQ,gBAAgB+B,SACH,IAATD,GACTtC,KAAKQ,gBAAgBgC,SAExB,CAEO,aAAA3B,GAEUb,KAAKyB,cAAc,IAAIC,EAAU,SAAU,CAAEe,YAAY,MAGvEzC,KAAKiB,OAER,GAlIMpB,EAAA6C,OAAS,CAACC,EAAgBC,GAEAC,EAAA,CAAhCC,EAAM,YAAY,IAAoCjD,EAAAkD,UAAA,aAAA,GACbF,EAAA,CAAzCC,EAAM,qBAAqB,IAAuCjD,EAAAkD,UAAA,gBAAA,GAmBvBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoBtD,EAAAkD,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAA0CtD,EAAAkD,UAAA,YAAA,GAO/BF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAiCvD,EAAAkD,UAAA,mBAAA,GAQZF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAA0BtD,EAAAkD,UAAA,kBAAA,GAyEpDF,EAAA,CADTQ,EAAQ,OAAQ,YAOhBxD,EAAAkD,UAAA,oBAAA,MA1HkBlD,EAAKgD,EAAA,CADzBS,EAAc,eACMzD,SAAAA"}
|