@nordhealth/components 4.23.0 → 4.24.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 +12670 -12590
- package/lib/Banner.js +1 -1
- package/lib/Banner.js.map +1 -1
- package/lib/Checkbox.js +1 -1
- package/lib/Checkbox.js.map +1 -1
- package/lib/IconManager.js +1 -1
- package/lib/Layout.js +1 -1
- package/lib/Layout.js.map +1 -1
- package/lib/NavResizeEvent.js +2 -0
- package/lib/NavResizeEvent.js.map +1 -0
- package/lib/Tag.js +1 -1
- package/lib/Toast.js +1 -1
- package/lib/Toast.js.map +1 -1
- package/lib/bundle.js +5 -5
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/{interface-checked-small-BtICPEsp.js → interface-checked-small-BQmkNgCI.js} +2 -2
- package/lib/{interface-checked-small-BtICPEsp.js.map → interface-checked-small-BQmkNgCI.js.map} +1 -1
- package/lib/react.d.ts +10 -0
- package/lib/src/index.d.ts +1 -0
- package/lib/src/layout/Layout.d.ts +2 -1
- package/lib/src/layout/NavResizeEvent.d.ts +20 -0
- package/lib/vue.d.ts +10 -0
- package/package.json +3 -3
package/lib/Banner.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as o,html as e}from"lit";import{property as a,customElement as t}from"lit/decorators.js";import{s as c}from"./Component-DSU3Qp0O.js";import s from"./Icon.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const i="interface-checked-circle";var l=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z" fill="currentColor"/></svg>',tags:"nordicon interface circle round checked checkmark ready done success",title:i});const d="interface-help";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z" fill="currentColor"/></svg>',tags:"nordicon interface help speech bubble support circle round question mark",title:d});const b="interface-info";var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z" fill="currentColor"/></svg>',tags:"nordicon interface info circle round alert notice information",title:b});const g="interface-warning";var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z" fill="currentColor"/></svg>',tags:"nordicon interface warning exclamation mark triangle shape alert error",title:g});const u=n`:host{--_n-banner-box-shadow:var(--n-banner-box-shadow, none);--_n-banner-border-radius:var(--n-banner-border-radius, var(--n-border-radius));--_n-banner-color:var(--n-color-text-info);--_n-banner-background:var(--n-color-status-info-weak);--_n-banner-border-color:var(--n-color-border-info)}.n-banner{background:var(--_n-banner-background);border:1px solid var(--_n-banner-border-color);border-radius:var(--_n-banner-border-radius);box-shadow:var(--_n-banner-box-shadow);padding:calc(var(--n-space-m)/ 1.25) var(--n-space-m);margin:0;inline-size:100%}.n-banner-content{inline-size:calc(100% - calc(var(--n-space-m) * 2));color:var(--_n-banner-color)}nord-icon{transform:translateY(2px) translateX(2px);color:var(--_n-banner-color)}::slotted(a){color:var(--_n-banner-color)!important;text-decoration:underline!important}::slotted(p){color:var(--_n-banner-color)!important;margin:0!important}:host([variant=success]){--_n-banner-color:var(--n-color-text-success);--_n-banner-background:var(--n-color-status-success-weak);--_n-banner-border-color:var(--n-color-border-success)}:host([variant=danger]){--_n-banner-color:var(--n-color-text-danger);--_n-banner-background:var(--n-color-status-danger-weak);--_n-banner-border-color:var(--n-color-border-danger)}:host([variant=warning]){--_n-banner-color:var(--n-color-text-warning);--_n-banner-background:var(--n-color-status-warning-weak);--_n-banner-border-color:var(--n-color-border-warning)}`;s.registerIcon(v),s.registerIcon(p),s.registerIcon(m),s.registerIcon(l);const f={warning:d,danger:g,info:b,success:i};let _=class extends o{constructor(){super(...arguments),this.variant="info"}render(){const r=f[this.variant]||f.info;return e`<div class="n-banner" role="alert"><nord-stack align-items="start" direction="horizontal"><nord-icon name="${r}" size="m"></nord-icon><div class="n-banner-content"><slot></slot></div></nord-stack></div>`}};_.styles=[c,u],r([a({reflect:!0})],_.prototype,"variant",void 0),_=r([t("nord-banner")],_);var w=_;export{w as default};
|
|
1
|
+
import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as o,html as e}from"lit";import{property as a,customElement as t}from"lit/decorators.js";import{s as c}from"./Component-DSU3Qp0O.js";import s from"./Icon.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const i="interface-checked-circle";var l=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z" fill="currentColor"/></svg>',tags:"nordicon interface circle round checked checkmark ready done success ok",title:i});const d="interface-help";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z" fill="currentColor"/></svg>',tags:"nordicon interface help speech bubble support circle round question mark",title:d});const b="interface-info";var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z" fill="currentColor"/></svg>',tags:"nordicon interface info circle round alert notice information",title:b});const g="interface-warning";var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z" fill="currentColor"/></svg>',tags:"nordicon interface warning exclamation mark triangle shape alert error sign",title:g});const u=n`:host{--_n-banner-box-shadow:var(--n-banner-box-shadow, none);--_n-banner-border-radius:var(--n-banner-border-radius, var(--n-border-radius));--_n-banner-color:var(--n-color-text-info);--_n-banner-background:var(--n-color-status-info-weak);--_n-banner-border-color:var(--n-color-border-info)}.n-banner{background:var(--_n-banner-background);border:1px solid var(--_n-banner-border-color);border-radius:var(--_n-banner-border-radius);box-shadow:var(--_n-banner-box-shadow);padding:calc(var(--n-space-m)/ 1.25) var(--n-space-m);margin:0;inline-size:100%}.n-banner-content{inline-size:calc(100% - calc(var(--n-space-m) * 2));color:var(--_n-banner-color)}nord-icon{transform:translateY(2px) translateX(2px);color:var(--_n-banner-color)}::slotted(a){color:var(--_n-banner-color)!important;text-decoration:underline!important}::slotted(p){color:var(--_n-banner-color)!important;margin:0!important}:host([variant=success]){--_n-banner-color:var(--n-color-text-success);--_n-banner-background:var(--n-color-status-success-weak);--_n-banner-border-color:var(--n-color-border-success)}:host([variant=danger]){--_n-banner-color:var(--n-color-text-danger);--_n-banner-background:var(--n-color-status-danger-weak);--_n-banner-border-color:var(--n-color-border-danger)}:host([variant=warning]){--_n-banner-color:var(--n-color-text-warning);--_n-banner-background:var(--n-color-status-warning-weak);--_n-banner-border-color:var(--n-color-border-warning)}`;s.registerIcon(v),s.registerIcon(p),s.registerIcon(m),s.registerIcon(l);const f={warning:d,danger:g,info:b,success:i};let _=class extends o{constructor(){super(...arguments),this.variant="info"}render(){const r=f[this.variant]||f.info;return e`<div class="n-banner" role="alert"><nord-stack align-items="start" direction="horizontal"><nord-icon name="${r}" size="m"></nord-icon><div class="n-banner-content"><slot></slot></div></nord-stack></div>`}};_.styles=[c,u],r([a({reflect:!0})],_.prototype,"variant",void 0),_=r([t("nord-banner")],_);var w=_;export{w as default};
|
|
2
2
|
//# sourceMappingURL=Banner.js.map
|
package/lib/Banner.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sources":["../../icons/lib/assets/interface-checked-circle.js","../../icons/lib/assets/interface-help.js","../../icons/lib/assets/interface-info.js","../../icons/lib/assets/interface-warning.js","../src/banner/Banner.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-checked-circle\";\nexport const tags =\n \"nordicon interface circle round checked checkmark ready done success\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-help\";\nexport const tags =\n \"nordicon interface help speech bubble support circle round question mark\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-info\";\nexport const tags =\n \"nordicon interface info circle round alert notice information\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-warning\";\nexport const tags =\n \"nordicon interface warning exclamation mark triangle shape alert error\";\n","import * as successIcon from '@nordhealth/icons/lib/assets/interface-checked-circle.js'\nimport * as warningIcon from '@nordhealth/icons/lib/assets/interface-help.js'\nimport * as infoIcon from '@nordhealth/icons/lib/assets/interface-info.js'\nimport * as dangerIcon from '@nordhealth/icons/lib/assets/interface-warning.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport style from './Banner.css'\n\nIcon.registerIcon(warningIcon)\nIcon.registerIcon(dangerIcon)\nIcon.registerIcon(infoIcon)\nIcon.registerIcon(successIcon)\n\nconst iconMap: Record<Banner['variant'], string> = {\n warning: warningIcon.title,\n danger: dangerIcon.title,\n info: infoIcon.title,\n success: successIcon.title,\n}\n\n/**\n * Banner informs users about important changes or conditions in the\n * interface. Use this component if you need to communicate to users\n * in a prominent way.\n *\n * @status ready\n * @category feedback\n * @slot - default slot\n *\n * @cssprop [--n-banner-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-banner-box-shadow=var(--n-box-shadow-card)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n */\n@customElement('nord-banner')\nexport default class Banner extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * The style variant of the banner.\n */\n @property({ reflect: true }) variant: 'info' | 'danger' | 'success' | 'warning' = 'info'\n\n render() {\n const icon = iconMap[this.variant] || iconMap.info\n\n return html`\n <div class=\"n-banner\" role=\"alert\">\n <nord-stack align-items=\"start\" direction=\"horizontal\">\n <nord-icon name=${icon} size=\"m\"></nord-icon>\n <div class=\"n-banner-content\">\n <slot></slot>\n </div>\n </nord-stack>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-banner': Banner\n }\n}\n"],"names":["title","Icon","registerIcon","warningIcon","dangerIcon","infoIcon","successIcon","iconMap","warning","warningIcon.title","danger","dangerIcon.title","info","infoIcon.title","success","successIcon.title","Banner","LitElement","constructor","this","variant","render","icon","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"kYACO,MAAMA,EAAQ,uEADN,iXAGb,
|
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../../icons/lib/assets/interface-checked-circle.js","../../icons/lib/assets/interface-help.js","../../icons/lib/assets/interface-info.js","../../icons/lib/assets/interface-warning.js","../src/banner/Banner.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-checked-circle\";\nexport const tags =\n \"nordicon interface circle round checked checkmark ready done success ok\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-help\";\nexport const tags =\n \"nordicon interface help speech bubble support circle round question mark\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-info\";\nexport const tags =\n \"nordicon interface info circle round alert notice information\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-warning\";\nexport const tags =\n \"nordicon interface warning exclamation mark triangle shape alert error sign\";\n","import * as successIcon from '@nordhealth/icons/lib/assets/interface-checked-circle.js'\nimport * as warningIcon from '@nordhealth/icons/lib/assets/interface-help.js'\nimport * as infoIcon from '@nordhealth/icons/lib/assets/interface-info.js'\nimport * as dangerIcon from '@nordhealth/icons/lib/assets/interface-warning.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport style from './Banner.css'\n\nIcon.registerIcon(warningIcon)\nIcon.registerIcon(dangerIcon)\nIcon.registerIcon(infoIcon)\nIcon.registerIcon(successIcon)\n\nconst iconMap: Record<Banner['variant'], string> = {\n warning: warningIcon.title,\n danger: dangerIcon.title,\n info: infoIcon.title,\n success: successIcon.title,\n}\n\n/**\n * Banner informs users about important changes or conditions in the\n * interface. Use this component if you need to communicate to users\n * in a prominent way.\n *\n * @status ready\n * @category feedback\n * @slot - default slot\n *\n * @cssprop [--n-banner-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-banner-box-shadow=var(--n-box-shadow-card)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n */\n@customElement('nord-banner')\nexport default class Banner extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * The style variant of the banner.\n */\n @property({ reflect: true }) variant: 'info' | 'danger' | 'success' | 'warning' = 'info'\n\n render() {\n const icon = iconMap[this.variant] || iconMap.info\n\n return html`\n <div class=\"n-banner\" role=\"alert\">\n <nord-stack align-items=\"start\" direction=\"horizontal\">\n <nord-icon name=${icon} size=\"m\"></nord-icon>\n <div class=\"n-banner-content\">\n <slot></slot>\n </div>\n </nord-stack>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-banner': Banner\n }\n}\n"],"names":["title","Icon","registerIcon","warningIcon","dangerIcon","infoIcon","successIcon","iconMap","warning","warningIcon.title","danger","dangerIcon.title","info","infoIcon.title","success","successIcon.title","Banner","LitElement","constructor","this","variant","render","icon","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"kYACO,MAAMA,EAAQ,uEADN,iXAGb,oFCFK,MAAMA,EAAQ,6DADN,6eAGb,qFCFK,MAAMA,EAAQ,6DADN,iUAGb,0ECFK,MAAMA,EAAQ,gEADN,8gBAGb,mgDCQFC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAClBJ,EAAKC,aAAaI,GAElB,MAAMC,EAA6C,CACjDC,QAASC,EACTC,OAAQC,EACRC,KAAMC,EACNC,QAASC,GAgBI,IAAMC,EAAN,cAAqBC,EAArB,WAAAC,uBAMgBC,KAAOC,QAA8C,MAgBnF,CAdC,MAAAC,GACE,MAAMC,EAAOf,EAAQY,KAAKC,UAAYb,EAAQK,KAE9C,OAAOW,CAAI,8GAGaD,8FAOzB,GApBMN,EAAAQ,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmEb,EAAAc,UAAA,eAAA,GANrEd,EAAMW,EAAA,CAD1BI,EAAc,gBACMf,SAAAA"}
|
package/lib/Checkbox.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{c as n}from"./interface-checked-small-
|
|
1
|
+
import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{c as n}from"./interface-checked-small-BQmkNgCI.js";import{css as i,html as o,nothing as r,LitElement as t}from"lit";import{property as c,customElement as s}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{ref as l}from"lit/directives/ref.js";import{F as d}from"./FocusableMixin-BlQLNPdJ.js";import{F as h}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as p}from"./InputMixin-LetXsCyv.js";import{S as m}from"./SizeMixin-CU9cLbLC.js";import{s as v}from"./Component-DSU3Qp0O.js";import{s as b}from"./FormField-BFaVzUjk.js";import u from"./Icon.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";var k=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m20 8.49976v3.00004h-20v-3.00004z" fill="currentColor"/></svg>',tags:"nordicon interface remove small delete erase minimize line minus sign",title:"interface-remove-small"});const x=i`:host{--_n-checkbox-size:calc(var(--n-space-m) * 1.25);--_n-checkbox-accent-color:var(--n-color-accent);--_n-checkbox-border-color:var(--n-color-border-hover);--_n-checkbox-icon-size:var(--n-size-icon-s);display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{appearance:none;background:var(--n-color-surface);border:1px solid var(--_n-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-checkbox-size);block-size:var(--_n-checkbox-size);cursor:pointer}input:checked,input:indeterminate{--_n-checkbox-border-color:var(--n-color-accent);background:var(--_n-checkbox-accent-color)}input[aria-invalid]{--_n-checkbox-accent-color:var(--n-color-status-danger);--_n-checkbox-border-color:var(--_n-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}input:active{opacity:.8}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{background:var(--_n-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:is(:checked, :indeterminate)){--_n-checkbox-accent-color:var(--n-color-active);--_n-checkbox-border-color:var(--n-color-border-neutral)}:host([disabled]) input:is(:checked, :indeterminate){opacity:.3}nord-icon{--_n-icon-size:var(--_n-checkbox-icon-size);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:var(--n-space-xs);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.n-label-container{margin-block-end:0}label{user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-form);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:var(--n-space-xs);padding-inline-start:var(--n-space-s)}:host([hint-below]) :is(.n-hint, .n-error){padding-inline-start:0}:host([size='s']){--_n-checkbox-size:var(--n-space-m);--_n-checkbox-icon-size:var(--n-size-icon-xs)}:host([size='s']) nord-icon{inset:calc(var(--n-space-s)/ 2.6)}:host([size='s']:not([hide-label])) .n-input-container{margin:calc(var(--n-space-s)/ 2.6) 0}:host([size='l']){--_n-checkbox-size:var(--n-space-l);--_n-checkbox-icon-size:var(--n-size-icon-m)}:host([size='l']:not([hide-label])) .n-label-container{margin:2px 0 0}`;u.registerIcon(n),u.registerIcon(k);let f=class extends(m(h(p(d(t))))){constructor(){super(...arguments),this.indeterminate=!1,this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){return o`<div class="n-flex"><div class="n-input-container"><input ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" .indeterminate="${this.indeterminate}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small"></nord-icon></div><div class="n-expand">${this.renderLabel()} ${this.isHintBelow?r:this.renderError()}</div></div>${this.isHintBelow?this.renderError():r} ${this.isHintBelow?this.renderHint():r}`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};f.styles=[v,b,x],e([c({reflect:!0,type:Boolean})],f.prototype,"indeterminate",void 0),e([c({reflect:!0,type:Boolean})],f.prototype,"checked",void 0),f=e([s("nord-checkbox")],f);var g=f;export{g as default};
|
|
2
2
|
//# sourceMappingURL=Checkbox.js.map
|
package/lib/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-remove-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m20 8.49976v3.00004h-20v-3.00004z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-remove-small\";\nexport const tags =\n \"nordicon interface remove small delete erase minimize line\";\n","import * as checkedIcon from '@nordhealth/icons/lib/assets/interface-checked-small.js'\nimport * as indeterminateIcon from '@nordhealth/icons/lib/assets/interface-remove-small.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport formFieldStyle from '../common/styles/FormField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Checkbox.css'\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(indeterminateIcon)\n\n/**\n * Checkboxes allow user to choose one or more options from a limited set of options.\n * If you have more than 10 options, please use Select component instead.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n *\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-checkbox')\nexport default class Checkbox extends SizeMixin(FormAssociatedMixin(InputMixin(FocusableMixin(LitElement)))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.checked ? this.value || 'on' : undefined\n }\n\n /**\n * Controls whether the checkbox is in an indeterminate state.\n */\n @property({ reflect: true, type: Boolean }) indeterminate = false\n\n /**\n * Controls whether the checkbox is checked or not.\n */\n @property({ reflect: true, type: Boolean }) checked: boolean = false\n\n render() {\n return html`\n <div class=\"n-flex\">\n <div class=\"n-input-container\">\n <input\n ${ref(this.focusableRef)}\n class=\"n-input\"\n id=${this.inputId}\n type=\"checkbox\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${this.checked}\n .indeterminate=${this.indeterminate}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n @change=${this.handleChange}\n />\n <nord-icon class=\"icon-checked\" name=\"interface-checked-small\"></nord-icon>\n <nord-icon class=\"icon-indeterminate\" name=\"interface-remove-small\"></nord-icon>\n </div>\n <div class=\"n-expand\">${this.renderLabel()} ${this.isHintBelow ? nothing : this.renderError()}</div>\n </div>\n ${this.isHintBelow ? this.renderError() : nothing}\n ${this.isHintBelow ? this.renderHint() : nothing}\n `\n }\n\n protected handleChange(e: Event): void {\n const target = e.target as HTMLInputElement\n this.checked = target.checked\n super.handleChange(e)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-checkbox': Checkbox\n }\n}\n"],"names":["Icon","registerIcon","checkedIcon","indeterminateIcon","Checkbox","SizeMixin","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","indeterminate","checked","formValue","value","undefined","render","html","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","renderLabel","isHintBelow","nothing","renderError","renderHint","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"88BAAe,2IAGb,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-remove-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m20 8.49976v3.00004h-20v-3.00004z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-remove-small\";\nexport const tags =\n \"nordicon interface remove small delete erase minimize line minus sign\";\n","import * as checkedIcon from '@nordhealth/icons/lib/assets/interface-checked-small.js'\nimport * as indeterminateIcon from '@nordhealth/icons/lib/assets/interface-remove-small.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport formFieldStyle from '../common/styles/FormField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Checkbox.css'\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(indeterminateIcon)\n\n/**\n * Checkboxes allow user to choose one or more options from a limited set of options.\n * If you have more than 10 options, please use Select component instead.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n *\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-checkbox')\nexport default class Checkbox extends SizeMixin(FormAssociatedMixin(InputMixin(FocusableMixin(LitElement)))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.checked ? this.value || 'on' : undefined\n }\n\n /**\n * Controls whether the checkbox is in an indeterminate state.\n */\n @property({ reflect: true, type: Boolean }) indeterminate = false\n\n /**\n * Controls whether the checkbox is checked or not.\n */\n @property({ reflect: true, type: Boolean }) checked: boolean = false\n\n render() {\n return html`\n <div class=\"n-flex\">\n <div class=\"n-input-container\">\n <input\n ${ref(this.focusableRef)}\n class=\"n-input\"\n id=${this.inputId}\n type=\"checkbox\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${this.checked}\n .indeterminate=${this.indeterminate}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n @change=${this.handleChange}\n />\n <nord-icon class=\"icon-checked\" name=\"interface-checked-small\"></nord-icon>\n <nord-icon class=\"icon-indeterminate\" name=\"interface-remove-small\"></nord-icon>\n </div>\n <div class=\"n-expand\">${this.renderLabel()} ${this.isHintBelow ? nothing : this.renderError()}</div>\n </div>\n ${this.isHintBelow ? this.renderError() : nothing}\n ${this.isHintBelow ? this.renderHint() : nothing}\n `\n }\n\n protected handleChange(e: Event): void {\n const target = e.target as HTMLInputElement\n this.checked = target.checked\n super.handleChange(e)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-checkbox': Checkbox\n }\n}\n"],"names":["Icon","registerIcon","checkedIcon","indeterminateIcon","Checkbox","SizeMixin","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","indeterminate","checked","formValue","value","undefined","render","html","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","renderLabel","isHintBelow","nothing","renderError","renderHint","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"88BAAe,2IAGb,8EAFmB,q8ECgBrBA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAeH,IAAMC,EAAN,cAAuBC,EAAUC,EAAoBC,EAAWC,EAAeC,OAA/E,WAAAC,uBAU+BC,KAAaC,eAAG,EAKhBD,KAAOE,SAAY,CAoChE,CAhDC,aAAuBC,GACrB,OAAOH,KAAKE,QAAUF,KAAKI,OAAS,UAAOC,CAC5C,CAYD,MAAAC,GACE,OAAOC,CAAI,6DAIDC,EAAIR,KAAKS,qCAENT,KAAKU,kCAEHC,EAAUX,KAAKY,kBACbZ,KAAKI,oBACHJ,KAAKE,4BACCF,KAAKC,6BACVD,KAAKa,wBACLb,KAAKc,+BACEH,EAAUX,KAAKe,oCACnBJ,EAAUX,KAAKgB,2BACpBhB,KAAKiB,wMAKKjB,KAAKkB,iBAAiBlB,KAAKmB,YAAcC,EAAUpB,KAAKqB,4BAEhFrB,KAAKmB,YAAcnB,KAAKqB,cAAgBD,KACxCpB,KAAKmB,YAAcnB,KAAKsB,aAAeF,GAE5C,CAES,YAAAH,CAAaM,GACrB,MAAMC,EAASD,EAAEC,OACjBxB,KAAKE,QAAUsB,EAAOtB,QACtBuB,MAAMR,aAAaM,EACpB,GAjDM9B,EAAMiC,OAAG,CAACC,EAAgBC,EAAgBC,GASLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAgCzC,EAAA0C,UAAA,qBAAA,GAKrBL,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAmCzC,EAAA0C,UAAA,eAAA,GAfjD1C,EAAQqC,EAAA,CAD5BM,EAAc,kBACM3C,SAAAA"}
|
package/lib/IconManager.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=e=>fetch(`https://nordcdn.net/ds/icons/3.
|
|
1
|
+
const e=e=>fetch(`https://nordcdn.net/ds/icons/3.16.0/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
|
|
2
2
|
//# sourceMappingURL=IconManager.js.map
|
package/lib/Layout.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{l as e}from"./NavToggle-QzUt-7lX.js";import{css as n,LitElement as a,html as o,nothing as i}from"lit";import{query as s,state as r,property as d,customElement as l}from"lit/decorators.js";import{classMap as c}from"lit/directives/class-map.js";import{styleMap as h}from"lit/directives/style-map.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as p}from"./EventController-BBOmvfLa.js";import{L as u}from"./LightDismissController-4pH8cdko.js";import{S as g}from"./SlotController-Z6eG7LSZ.js";import{o as m}from"./observe-D0n0zOfU.js";import{c as b}from"./cond-CI1KbneT.js";import{f as y}from"./fsm-Bq5jMQrK.js";import{c as f}from"./number-Dg2vCfGd.js";import{s as k}from"./Component-DSU3Qp0O.js";import{s as w}from"./Sticky-DqnqENYN.js";import z from"./Icon.js";import{NavOpenChangeEvent as x}from"./NavOpenChangeEvent.js";import"lit/directives/ref.js";import"./FocusableMixin-BlQLNPdJ.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./Button.js";import"./LightDomController-DIwtVelV.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./VisuallyHidden.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./events-Bv6wNHwJ.js";const N=()=>!0;class W{constructor(t,e){t.addController(this),this.options={enabled:N,...e}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var t,e;null===(t=this.channel)||void 0===t||t.removeEventListener("message",this),null===(e=this.channel)||void 0===e||e.close()}handleEvent(t){this.options.enabled()&&this.options.onMessage(t.data)}post(t){var e;this.options.enabled()&&(null===(e=this.channel)||void 0===e||e.postMessage(t))}}function _(t,e,n=JSON.stringify,a=JSON.parse){return{get value(){try{const n=localStorage.getItem(t);return n?a(n):e}catch(t){return e}},set value(e){try{localStorage.setItem(t,n(e))}catch(t){}}}}const S=n`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-border-color:var(--n-layout-nav-border-color, var(--n-color-border));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));--_n-layout-footer-size:var(--n-space-xxl);background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout{block-size:calc(100vh - var(--n-sticky-top))}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}:host([sticky-footer]) .n-has-footer slot[name=footer]::slotted(*){position:fixed}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--_n-layout-nav-border-color);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgb(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgb(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgb(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--_n-layout-nav-border-color) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:'';position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:'';position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:fixed;inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-start:0;z-index:var(--n-index-top-bar)}[data-screen=narrow] .n-top-bar-container,[data-screen=wide]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:0}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar .n-layout-main{inset-block-start:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed;inset-block-start:0}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgb(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgb(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}@media (hover:hover) and (pointer:fine){.n-collapse-btn{opacity:0;visibility:hidden}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-end:0}@media (min-width:1240px){.n-has-drawer slot[name=footer]::slotted(*){inset-inline-end:var(--_n-layout-drawer-inline-size)}}[data-screen=narrow] slot[name=footer]::slotted(*),[data-screen=wide]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:0}:host([sticky-footer]) .n-has-footer .n-layout-content{padding-block-end:var(--_n-layout-footer-size)}`;z.registerIcon(e);const C=250,j="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},T=_("nord-layout.navWidth",C),E=_("nord-layout.navWidthDefault",C),M=_("nord-layout.navOpen",!0);function D(t){for(const e of t)if(e instanceof HTMLElement&&"nord-nav-toggle"===e.localName)return e;return null}function O(t){return null!==D(t.composedPath())}const $=y({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let L=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.footerSlot=new g(this,"footer"),this.direction=new v(this),this.events=new p(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:t=>t!==this.navEl}),this.broadcast=new W(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:t=>{"navOpen"in t&&(this.navOpen=t.navOpen),"navWidth"in t&&(this.navWidth=t.navWidth)}}),this.navWidth=T.value,this.isDragging=!1,this.wideScreen=j.matches,this.persistNavState=!1,this.syncNavState=!1,this.defaultNavWidth=C,this.minNavWidth=220,this.maxNavWidth=400,this.padding="m",this.sticky=!1,this.stickyFooter=!1,this.hideDefaultNavToggle=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=t=>{O(t)||this.navTransition("toggle")},this.handleHostClick=t=>{O(t)&&this.navTransition("toggle")},this.handleHostMouseOver=t=>{const e=D(t.composedPath());e&&(t.relatedTarget instanceof Node&&e.contains(t.relatedTarget)||this.handleMouseEnter())},this.handleHostMouseOut=t=>{const e=D(t.composedPath());e&&(t.relatedTarget instanceof Node&&e.contains(t.relatedTarget)||this.handleMouseLeave())},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(j,"change",this.handleMediaQueryChange),this.addEventListener("click",this.handleHostClick),this.addEventListener("mouseover",this.handleHostMouseOver),this.addEventListener("mouseout",this.handleHostMouseOut)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleHostClick),this.removeEventListener("mouseover",this.handleHostMouseOver),this.removeEventListener("mouseout",this.handleHostMouseOut)}willUpdate(){this.hasUpdated||(Number.isFinite(this.defaultNavWidth)||(this.defaultNavWidth=C),Number.isFinite(this.minNavWidth)||(this.minNavWidth=220),Number.isFinite(this.maxNavWidth)||(this.maxNavWidth=400),E.value!==this.defaultNavWidth?(this.setNavWidth(this.defaultNavWidth),T.value=this.navWidth,E.value=this.defaultNavWidth):this.setNavWidth(this.navWidth),this.isNarrow||this.persistNavState&&!1===M.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:t,navState:e,navSlot:n,headerSlot:a,footerSlot:s,topBarSlot:r,drawerSlot:d,isDragging:l,direction:v}=this,p="opened"===e&&this.wideScreen?t:this.defaultNavWidth;return o`<div class="${c({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":l,"n-has-header":a.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":d.hasContent,"n-has-nav":n.hasContent})}" style="${h({"--_n-layout-nav-width":`${p}px`})}" data-nav="${n.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${n.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${b("opened"===e,this.startDragging)}" @pointermove="${b(l,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${n.hasContent&&!this.hideDefaultNavToggle?this.renderNavToggle():i}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main><slot name="footer"></slot></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return o`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return o`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){T.value=this.navWidth}handleNavStateChange(t){switch("wait"===t&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===t&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(t){if(this.isDragging||this.setNavWidth(Math.max(this.navWidth,this.defaultNavWidth)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(M.value=this.navOpen),null!=t){const t=this.navOpen;this.broadcast.post({navOpen:t}),this.dispatchEvent(new x(t))}}navTransition(t){this.navState=$.transition(this.navState,t)}handleNavClick(t){if(!t.defaultPrevented&&!this.wideScreen){const n=t.target;(t=>"nord-nav-item"===t.localName)(e=n)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(t){"nord-dropdown"===t.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(t){"nord-dropdown"===t.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(t){const{navWidth:e,direction:{isLTR:n}}=this;switch(t.key){case"ArrowLeft":this.setNavWidth(e+(n?-30:30));break;case"ArrowRight":this.setNavWidth(e+(n?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(this.minNavWidth);break;case"End":this.setNavWidth(this.maxNavWidth);break;default:return}this.broadcast.post({navWidth:this.navWidth}),t.preventDefault()}setNavWidth(t){this.navWidth=f(Math.round(t),this.minNavWidth,this.maxNavWidth)}startDragging(t){if(0===t.button){t.target.setPointerCapture(t.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1,this.broadcast.post({navWidth:this.navWidth})}handleDrag(t){const e=this.direction.isRTL?this.clientWidth-t.clientX:t.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};L.styles=[k,w,S],t([s(".n-layout-nav",!0)],L.prototype,"navEl",void 0),t([r()],L.prototype,"navWidth",void 0),t([r()],L.prototype,"isDragging",void 0),t([r()],L.prototype,"navState",void 0),t([r()],L.prototype,"wideScreen",void 0),t([d({reflect:!0,type:Boolean,attribute:"nav-open"})],L.prototype,"navOpen",void 0),t([d({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],L.prototype,"persistNavState",void 0),t([d({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],L.prototype,"syncNavState",void 0),t([d({type:Number,reflect:!0,attribute:"default-nav-width"})],L.prototype,"defaultNavWidth",void 0),t([d({type:Number,reflect:!0,attribute:"min-nav-width"})],L.prototype,"minNavWidth",void 0),t([d({type:Number,reflect:!0,attribute:"max-nav-width"})],L.prototype,"maxNavWidth",void 0),t([d({reflect:!0})],L.prototype,"padding",void 0),t([d({type:Boolean,reflect:!0})],L.prototype,"sticky",void 0),t([d({type:Boolean,reflect:!0,attribute:"sticky-footer"})],L.prototype,"stickyFooter",void 0),t([d({type:Boolean,reflect:!0,attribute:"hide-default-nav-toggle"})],L.prototype,"hideDefaultNavToggle",void 0),t([m("navWidth","updated")],L.prototype,"handleNavWidthChange",null),t([m("navState")],L.prototype,"handleNavStateChange",null),t([m("navOpen","updated")],L.prototype,"handleOpenChange",null),L=t([l("nord-layout")],L);var H=L;export{H as default};
|
|
1
|
+
import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{l as e}from"./NavToggle-QzUt-7lX.js";import{css as n,LitElement as a,html as o,nothing as i}from"lit";import{query as s,state as r,property as d,customElement as l}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{styleMap as c}from"lit/directives/style-map.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as p}from"./EventController-BBOmvfLa.js";import{L as u}from"./LightDismissController-4pH8cdko.js";import{S as g}from"./SlotController-Z6eG7LSZ.js";import{o as m}from"./observe-D0n0zOfU.js";import{c as b}from"./cond-CI1KbneT.js";import{f as y}from"./fsm-Bq5jMQrK.js";import{c as f}from"./number-Dg2vCfGd.js";import{s as k}from"./Component-DSU3Qp0O.js";import{s as w}from"./Sticky-DqnqENYN.js";import z from"./Icon.js";import{NavOpenChangeEvent as x}from"./NavOpenChangeEvent.js";import{NavResizeEvent as N}from"./NavResizeEvent.js";import"lit/directives/ref.js";import"./FocusableMixin-BlQLNPdJ.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./Button.js";import"./LightDomController-DIwtVelV.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./VisuallyHidden.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./events-Bv6wNHwJ.js";const W=()=>!0;class _{constructor(t,e){t.addController(this),this.options={enabled:W,...e}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var t,e;null===(t=this.channel)||void 0===t||t.removeEventListener("message",this),null===(e=this.channel)||void 0===e||e.close()}handleEvent(t){this.options.enabled()&&this.options.onMessage(t.data)}post(t){var e;this.options.enabled()&&(null===(e=this.channel)||void 0===e||e.postMessage(t))}}function S(t,e,n=JSON.stringify,a=JSON.parse){return{get value(){try{const n=localStorage.getItem(t);return n?a(n):e}catch(t){return e}},set value(e){try{localStorage.setItem(t,n(e))}catch(t){}}}}const C=n`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-border-color:var(--n-layout-nav-border-color, var(--n-color-border));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));--_n-layout-footer-size:var(--n-space-xxl);background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout{block-size:calc(100vh - var(--n-sticky-top))}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}:host([sticky-footer]) .n-has-footer slot[name=footer]::slotted(*){position:fixed}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--_n-layout-nav-border-color);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgb(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgb(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgb(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--_n-layout-nav-border-color) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:'';position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:'';position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:fixed;inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-start:0;z-index:var(--n-index-top-bar)}[data-screen=narrow] .n-top-bar-container,[data-screen=wide]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:0}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar .n-layout-main{inset-block-start:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed;inset-block-start:0}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgb(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgb(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}@media (hover:hover) and (pointer:fine){.n-collapse-btn{opacity:0;visibility:hidden}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-end:0}@media (min-width:1240px){.n-has-drawer slot[name=footer]::slotted(*){inset-inline-end:var(--_n-layout-drawer-inline-size)}}[data-screen=narrow] slot[name=footer]::slotted(*),[data-screen=wide]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:0}:host([sticky-footer]) .n-has-footer .n-layout-content{padding-block-end:var(--_n-layout-footer-size)}`;z.registerIcon(e);const j=250,T="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},E=S("nord-layout.navWidth",j),M=S("nord-layout.navWidthDefault",j),D=S("nord-layout.navOpen",!0);function O(t){for(const e of t)if(e instanceof HTMLElement&&"nord-nav-toggle"===e.localName)return e;return null}function $(t){return null!==O(t.composedPath())}const L=y({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let H=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.footerSlot=new g(this,"footer"),this.direction=new v(this),this.events=new p(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:t=>t!==this.navEl}),this.broadcast=new _(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:t=>{"navOpen"in t&&(this.navOpen=t.navOpen),"navWidth"in t&&(this.navWidth=t.navWidth)}}),this.navWidth=E.value,this.isDragging=!1,this.wideScreen=T.matches,this.persistNavState=!1,this.syncNavState=!1,this.defaultNavWidth=j,this.minNavWidth=220,this.maxNavWidth=400,this.padding="m",this.sticky=!1,this.stickyFooter=!1,this.hideDefaultNavToggle=!1,this.handleMediaQueryChange=()=>{this.wideScreen=T.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=t=>{$(t)||this.navTransition("toggle")},this.handleHostClick=t=>{$(t)&&this.navTransition("toggle")},this.handleHostMouseOver=t=>{const e=O(t.composedPath());e&&(t.relatedTarget instanceof Node&&e.contains(t.relatedTarget)||this.handleMouseEnter())},this.handleHostMouseOut=t=>{const e=O(t.composedPath());e&&(t.relatedTarget instanceof Node&&e.contains(t.relatedTarget)||this.handleMouseLeave())},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(T,"change",this.handleMediaQueryChange),this.addEventListener("click",this.handleHostClick),this.addEventListener("mouseover",this.handleHostMouseOver),this.addEventListener("mouseout",this.handleHostMouseOut)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleHostClick),this.removeEventListener("mouseover",this.handleHostMouseOver),this.removeEventListener("mouseout",this.handleHostMouseOut)}willUpdate(){this.hasUpdated||(Number.isFinite(this.defaultNavWidth)||(this.defaultNavWidth=j),Number.isFinite(this.minNavWidth)||(this.minNavWidth=220),Number.isFinite(this.maxNavWidth)||(this.maxNavWidth=400),M.value!==this.defaultNavWidth?(this.setNavWidth(this.defaultNavWidth),E.value=this.navWidth,M.value=this.defaultNavWidth):this.setNavWidth(this.navWidth),this.isNarrow||this.persistNavState&&!1===D.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:t,navState:e,navSlot:n,headerSlot:a,footerSlot:s,topBarSlot:r,drawerSlot:d,isDragging:l,direction:v}=this,p="opened"===e&&this.wideScreen?t:this.defaultNavWidth;return o`<div class="${h({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":l,"n-has-header":a.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":d.hasContent,"n-has-nav":n.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${n.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${n.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${b("opened"===e,this.startDragging)}" @pointermove="${b(l,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${n.hasContent&&!this.hideDefaultNavToggle?this.renderNavToggle():i}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main><slot name="footer"></slot></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return o`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return o`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(t){if(E.value=this.navWidth,null!=t){const t=this.navWidth;this.dispatchEvent(new N(t))}}handleNavStateChange(t){switch("wait"===t&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===t&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(t){if(this.isDragging||this.setNavWidth(Math.max(this.navWidth,this.defaultNavWidth)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(D.value=this.navOpen),null!=t){const t=this.navOpen;this.broadcast.post({navOpen:t}),this.dispatchEvent(new x(t))}}navTransition(t){this.navState=L.transition(this.navState,t)}handleNavClick(t){if(!t.defaultPrevented&&!this.wideScreen){const n=t.target;(t=>"nord-nav-item"===t.localName)(e=n)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(t){"nord-dropdown"===t.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(t){"nord-dropdown"===t.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(t){const{navWidth:e,direction:{isLTR:n}}=this;switch(t.key){case"ArrowLeft":this.setNavWidth(e+(n?-30:30));break;case"ArrowRight":this.setNavWidth(e+(n?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(this.minNavWidth);break;case"End":this.setNavWidth(this.maxNavWidth);break;default:return}this.broadcast.post({navWidth:this.navWidth}),t.preventDefault()}setNavWidth(t){this.navWidth=f(Math.round(t),this.minNavWidth,this.maxNavWidth)}startDragging(t){if(0===t.button){t.target.setPointerCapture(t.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1,this.broadcast.post({navWidth:this.navWidth})}handleDrag(t){const e=this.direction.isRTL?this.clientWidth-t.clientX:t.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};H.styles=[k,w,C],t([s(".n-layout-nav",!0)],H.prototype,"navEl",void 0),t([r()],H.prototype,"navWidth",void 0),t([r()],H.prototype,"isDragging",void 0),t([r()],H.prototype,"navState",void 0),t([r()],H.prototype,"wideScreen",void 0),t([d({reflect:!0,type:Boolean,attribute:"nav-open"})],H.prototype,"navOpen",void 0),t([d({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],H.prototype,"persistNavState",void 0),t([d({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],H.prototype,"syncNavState",void 0),t([d({type:Number,reflect:!0,attribute:"default-nav-width"})],H.prototype,"defaultNavWidth",void 0),t([d({type:Number,reflect:!0,attribute:"min-nav-width"})],H.prototype,"minNavWidth",void 0),t([d({type:Number,reflect:!0,attribute:"max-nav-width"})],H.prototype,"maxNavWidth",void 0),t([d({reflect:!0})],H.prototype,"padding",void 0),t([d({type:Boolean,reflect:!0})],H.prototype,"sticky",void 0),t([d({type:Boolean,reflect:!0,attribute:"sticky-footer"})],H.prototype,"stickyFooter",void 0),t([d({type:Boolean,reflect:!0,attribute:"hide-default-nav-toggle"})],H.prototype,"hideDefaultNavToggle",void 0),t([m("navWidth","updated")],H.prototype,"handleNavWidthChange",null),t([m("navState")],H.prototype,"handleNavStateChange",null),t([m("navOpen","updated")],H.prototype,"handleOpenChange",null),H=t([l("nord-layout")],H);var B=H;export{B as default};
|
|
2
2
|
//# sourceMappingURL=Layout.js.map
|
package/lib/Layout.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/common/storage.ts","../src/layout/Layout.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\ninterface Options<T> {\n channelName: string\n onMessage: (message: T) => void\n enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n private channel?: BroadcastChannel\n private options: Required<Options<T>>\n\n constructor(host: ReactiveControllerHost, options: Options<T>) {\n host.addController(this)\n this.options = { enabled: defaultEnabled, ...options }\n }\n\n hostConnected(): void {\n if (typeof BroadcastChannel !== 'undefined') {\n this.channel = new BroadcastChannel(this.options.channelName)\n this.channel.addEventListener('message', this)\n }\n }\n\n hostDisconnected(): void {\n this.channel?.removeEventListener('message', this)\n this.channel?.close()\n }\n\n handleEvent(event: MessageEvent<T>) {\n if (this.options.enabled()) {\n this.options.onMessage(event.data)\n }\n }\n\n post(message: T) {\n if (this.options.enabled()) {\n this.channel?.postMessage(message)\n }\n }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n key: string,\n defaultValue: T,\n serialize: (value: T) => string = JSON.stringify,\n deserialize: (value: string) => T = JSON.parse,\n) {\n return {\n get value(): T {\n try {\n const value = localStorage.getItem(key)\n return value ? deserialize(value) : defaultValue\n }\n catch {\n return defaultValue\n }\n },\n\n set value(value: T) {\n try {\n localStorage.setItem(key, serialize(value))\n }\n catch {\n // nothing we can do here\n }\n },\n }\n}\n","import type { Events, States } from '../common/fsm.js'\nimport type NavItem from '../nav-item/NavItem.js'\nimport * as lockIcon from '@nordhealth/icons/lib/assets/navigation-toggle-lock.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { BroadcastChannelController } from '../common/controllers/BroadcastChannelController.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { fsm } from '../common/fsm.js'\nimport { clamp } from '../common/number.js'\nimport { storage } from '../common/storage.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport stickyStyle from '../common/styles/Sticky.css'\n\nimport Icon from '../icon/Icon.js'\nimport style from './Layout.css'\nimport { NavOpenChangeEvent } from './NavOpenChangeEvent.js'\nimport '../nav-toggle/NavToggle.js'\n\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery\n = typeof matchMedia !== 'undefined'\n ? matchMedia('(min-width: 768px)')\n : ({\n matches: false,\n addEventListener() {\n /* noop */\n },\n } as unknown as MediaQueryList)\n\nconst navWidthStore = storage('nord-layout.navWidth', NAV_DEFAULT_WIDTH)\n// Tracks the last `default-nav-width` we wrote, so we can re-seed the\n// stored width when consumers change the default between loads.\n// Initial default matches NAV_DEFAULT_WIDTH so existing consumers that\n// never set `default-nav-width` get no re-seed on upgrade — their users'\n// persisted widths are preserved.\nconst navWidthDefaultStore = storage('nord-layout.navWidthDefault', NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage('nord-layout.navOpen', true)\n\nfunction findNavToggleInPath(path: EventTarget[]): HTMLElement | null {\n for (const target of path) {\n if (target instanceof HTMLElement && target.localName === 'nord-nav-toggle') {\n return target\n }\n }\n return null\n}\n\nfunction isNavToggleClick(e: Event): boolean {\n return findNavToggleInPath(e.composedPath()) !== null\n}\n\nconst navMachine = fsm({\n opened: {\n toggle: 'closed',\n close: 'closed',\n },\n closed: {\n toggle: 'opened',\n open: 'opened',\n focusin: 'peek',\n pointerenter: 'peek',\n },\n peek: {\n toggle: 'opened',\n focusout: 'unpeek',\n pointerleave: 'wait',\n dropdownOpen: 'blocked',\n click: 'unpeek',\n open: 'opened',\n },\n blocked: {\n dropdownClose: 'peek',\n open: 'opened',\n },\n wait: {\n toggle: 'opened',\n focusin: 'peek',\n pointerenter: 'peek',\n timeout: 'unpeek',\n },\n unpeek: {\n toggle: 'opened',\n focusin: 'peek',\n pointerenter: 'peek',\n transitionend: 'closed',\n },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === 'nord-nav-item'\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.\n * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip. As an alternative, `<nord-nav-toggle>` can be placed anywhere inside `<nord-layout>` (e.g. inside a `<nord-header>`) — the layout listens for clicks and hover on any descendant `<nord-nav-toggle>` and drives toggle / peek behaviour accordingly. When using that placement, set `hide-default-nav-toggle` to suppress the layout's built-in fallback toggle.\n *\n * @fires {NavOpenChangeEvent} nav-open-change - Dispatched when the navigation open state changes, regardless of the trigger (user toggle, peek, focus, programmatic). The event's `navOpen` property contains the new state.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n * @cssprop [--n-layout-nav-border-color=var(--n-color-border)] - Controls the color of the border between the navigation and the main content area when the nav is open on wide screens.\n */\n@customElement('nord-layout')\nexport default class Layout extends LitElement {\n static styles = [componentStyle, stickyStyle, style]\n\n private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n private navSlot = new SlotController(this, 'nav')\n private drawerSlot = new SlotController(this, 'drawer')\n private topBarSlot = new SlotController(this, 'top-bar')\n private headerSlot = new SlotController(this, 'header')\n private footerSlot = new SlotController(this, 'footer')\n private direction = new DirectionController(this)\n private events = new EventController(this)\n private lightDismiss = new LightDismissController(this, {\n isOpen: () => this.navState === 'opened' && !this.wideScreen,\n onDismiss: () => this.navTransition('close'),\n isDismissible: node => node !== this.navEl,\n })\n\n private broadcast = new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n channelName: 'nord-layout-nav-state',\n enabled: () => this.syncNavState && this.wideScreen,\n onMessage: (data) => {\n if ('navOpen' in data) {\n this.navOpen = data.navOpen\n }\n if ('navWidth' in data) {\n this.navWidth = data.navWidth\n }\n },\n })\n\n @query('.n-layout-nav', true) private navEl!: HTMLDivElement\n\n @state() private navWidth = navWidthStore.value\n @state() private isDragging = false\n @state() private navState!: NavState\n @state() private wideScreen = mediaQuery.matches\n\n /**\n * Controls whether the navigation is hidden off-screen or not.\n * Defaults to `true` for wide viewports, and `false` otherwise.\n */\n @property({ reflect: true, type: Boolean, attribute: 'nav-open' }) navOpen!: boolean\n\n /**\n * Controls whether the navigation's open/closed state is persisted across page loads.\n * This is useful for multi-page apps, where clicks on links trigger a full page load.\n */\n @property({ reflect: true, type: Boolean, attribute: 'persist-nav-state' }) persistNavState = false\n\n /**\n * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n */\n @property({ type: Boolean, reflect: true, attribute: 'sync-nav-state' }) syncNavState = false\n\n /**\n * Initial width (in pixels) of the navigation sidebar when no value has been persisted.\n * Changing this value between loads also re-seeds the persisted width for existing users,\n * so design changes propagate without manual localStorage resets.\n */\n @property({ type: Number, reflect: true, attribute: 'default-nav-width' }) defaultNavWidth = NAV_DEFAULT_WIDTH\n\n /**\n * Minimum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.\n */\n @property({ type: Number, reflect: true, attribute: 'min-nav-width' }) minNavWidth = NAV_MIN_WIDTH\n\n /**\n * Maximum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.\n */\n @property({ type: Number, reflect: true, attribute: 'max-nav-width' }) maxNavWidth = NAV_MAX_WIDTH\n\n /**\n * Controls the padding of the default main section slot. When set to “none”,\n * the nav and header slots will still have padding.\n */\n @property({ reflect: true }) padding: 'm' | 'none' = 'm'\n\n /**\n * Controls whether the layout's header has sticky positioning.\n */\n @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n /**\n * Controls whether the layout's footer has sticky positioning.\n */\n @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n /**\n * Suppresses the built-in `<nord-nav-toggle>` rendered as the fallback for\n * the `nav-toggle` slot. Set this when you've placed your own\n * `<nord-nav-toggle>` elsewhere inside the layout (e.g. inside\n * `<nord-header>`) and want the layout's default one hidden.\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-default-nav-toggle' })\n hideDefaultNavToggle: boolean = false\n\n /**\n * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n * A narrow viewport is considered to be less than 768px wide.\n */\n get isNarrow(): boolean {\n return !this.wideScreen\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n this.addEventListener('click', this.handleHostClick)\n this.addEventListener('mouseover', this.handleHostMouseOver)\n this.addEventListener('mouseout', this.handleHostMouseOut)\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n this.removeEventListener('click', this.handleHostClick)\n this.removeEventListener('mouseover', this.handleHostMouseOver)\n this.removeEventListener('mouseout', this.handleHostMouseOut)\n }\n\n willUpdate() {\n // we only want this logic to run once, before first render\n if (this.hasUpdated) {\n return\n }\n\n // fall back to the built-in constants when consumer-provided attributes\n // are non-numeric (e.g. `min-nav-width=\"abc\"` produces NaN). reflect:true\n // also rewrites the attribute in the DOM to the sanitized value\n if (!Number.isFinite(this.defaultNavWidth)) {\n this.defaultNavWidth = NAV_DEFAULT_WIDTH\n }\n if (!Number.isFinite(this.minNavWidth)) {\n this.minNavWidth = NAV_MIN_WIDTH\n }\n if (!Number.isFinite(this.maxNavWidth)) {\n this.maxNavWidth = NAV_MAX_WIDTH\n }\n\n // re-seed persisted width when the consumer-provided default-nav-width\n // differs from the last default we applied. This lets apps roll out a\n // new sidebar default without manual localStorage migrations.\n if (navWidthDefaultStore.value !== this.defaultNavWidth) {\n this.setNavWidth(this.defaultNavWidth)\n navWidthStore.value = this.navWidth\n // store the raw consumer-provided default so mismatch detection is\n // independent of the min/max clamp\n navWidthDefaultStore.value = this.defaultNavWidth\n }\n else {\n // ensure a previously-persisted width still respects current min/max\n this.setNavWidth(this.navWidth)\n }\n\n // on mobile it should always start closed\n if (this.isNarrow) {\n this.navState = 'closed'\n }\n // if nav state is persisted, and it was previously closed, start closed\n else if (this.persistNavState && navOpenStore.value === false) {\n this.navState = 'closed'\n }\n // otherwise start open\n else {\n this.navState = 'opened'\n }\n }\n\n render() {\n const { navWidth, navState, navSlot, headerSlot, footerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n const adjustedNavWidth = navState === 'opened' && this.wideScreen ? navWidth : this.defaultNavWidth\n\n return html`\n <div\n class=${classMap({\n 'n-layout': true,\n 'n-rtl': direction.isRTL,\n 'n-dragging': isDragging,\n 'n-has-header': headerSlot.hasContent,\n 'n-has-footer': footerSlot.hasContent,\n 'n-has-top-bar': topBarSlot.hasContent,\n 'n-has-drawer': drawerSlot.hasContent,\n 'n-has-nav': navSlot.hasContent,\n })}\n style=${styleMap({\n '--_n-layout-nav-width': `${adjustedNavWidth}px`,\n })}\n data-nav=${navSlot.hasContent ? navState : 'closed'}\n data-screen=${this.wideScreen ? 'wide' : 'narrow'}\n >\n <div\n class=\"n-layout-nav\"\n ?hidden=${navSlot.isEmpty}\n @focusin=${this.handleNavFocus}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n @open=${this.handleDropdownOpen}\n @close=${this.handleDropdownClose}\n >\n <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n <div\n class=\"n-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n tabindex=\"0\"\n @pointerdown=${cond(navState === 'opened', this.startDragging)}\n @pointermove=${cond(isDragging, this.handleDrag)}\n @pointerleave=${this.stopDragging}\n @pointerup=${this.stopDragging}\n @keydown=${this.handleKeyboardResize}\n ?hidden=${this.isNarrow}\n ></div>\n ${this.renderNavCollapse()}\n </div>\n\n <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n ${navSlot.hasContent && !this.hideDefaultNavToggle ? this.renderNavToggle() : nothing}\n\n <div class=\"n-top-bar-container\">\n <slot name=\"top-bar\"></slot>\n </div>\n\n <div class=\"n-layout-content\">\n <div class=\"n-sticky\">\n <slot name=\"header\"></slot>\n </div>\n <main>\n <slot></slot>\n </main>\n <slot name=\"footer\"></slot>\n </div>\n\n <aside ?hidden=${this.drawerSlot.isEmpty}>\n <slot name=\"drawer\"></slot>\n </aside>\n </div>\n </div>\n `\n }\n\n private renderNavToggle() {\n return html`\n <div class=\"n-nav-toggle-container\">\n <slot\n name=\"nav-toggle\"\n @click=${this.handleToggleClick}\n @mouseover=${this.handleMouseEnter}\n @mouseout=${this.handleMouseLeave}\n >\n <nord-nav-toggle></nord-nav-toggle>\n </slot>\n </div>\n `\n }\n\n private renderNavCollapse() {\n return html`\n <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n </button>\n `\n }\n\n @observe('navWidth', 'updated')\n protected handleNavWidthChange() {\n navWidthStore.value = this.navWidth\n }\n\n @observe('navState')\n protected handleNavStateChange(prev: NavState) {\n if (prev === 'wait' && this.peekTimeoutId) {\n clearTimeout(this.peekTimeoutId)\n }\n if (prev === 'unpeek') {\n this.navEl.removeEventListener('transitionend', this.handleTransitionEnd)\n }\n\n switch (this.navState) {\n case 'closed':\n this.navOpen = false\n break\n case 'opened':\n this.navOpen = true\n break\n case 'wait':\n this.peekTimeoutId = setTimeout(() => this.navTransition('timeout'), NAV_PEEK_DELAY)\n break\n case 'unpeek':\n this.navEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true })\n break\n default:\n break\n }\n }\n\n @observe('navOpen', 'updated')\n protected handleOpenChange(prev: boolean) {\n if (!this.isDragging) {\n // when opening nav, it should restore to default width (or larger).\n // unless it is being dragged, in which case the drag width wins\n this.setNavWidth(Math.max(this.navWidth, this.defaultNavWidth))\n }\n\n this.navTransition(this.navOpen ? 'open' : 'close')\n\n if (this.persistNavState) {\n navOpenStore.value = this.navOpen\n }\n\n // skip first update, we only want subsequent changes\n if (prev != null) {\n const navOpen = this.navOpen\n this.broadcast.post({ navOpen })\n this.dispatchEvent(new NavOpenChangeEvent(navOpen))\n }\n }\n\n /* ---------------------------------------------\n / NAVIGATION OPEN/CLOSE LOGIC\n / --------------------------------------------- */\n\n private navTransition(event: NavEvent) {\n this.navState = navMachine.transition(this.navState, event)\n }\n\n private handleNavClick(e: Event) {\n if (!e.defaultPrevented && !this.wideScreen) {\n const target = e.target as HTMLElement\n\n if (isNavItemLeaf(target)) {\n this.navTransition('close')\n }\n }\n }\n\n private handleMainClick() {\n this.navTransition('click')\n }\n\n private handleDropdownOpen(e: Event) {\n const target = e.target as Element\n\n if (target.localName === 'nord-dropdown') {\n this.navTransition('dropdownOpen')\n }\n }\n\n private handleDropdownClose(e: Event) {\n const target = e.target as Element\n\n if (target.localName === 'nord-dropdown') {\n this.navTransition('dropdownClose')\n }\n }\n\n private handleMediaQueryChange = () => {\n this.wideScreen = mediaQuery.matches\n this.navTransition(this.wideScreen ? 'open' : 'close')\n }\n\n private handleToggleClick = (e: Event) => {\n // Skip when a `<nord-nav-toggle>` is in the click path — `handleHostClick`\n // will fire for it. Without this guard, an in-slot `<nord-nav-toggle>`\n // would toggle twice (once via the slot handler, once via the host one).\n if (isNavToggleClick(e)) {\n return\n }\n this.navTransition('toggle')\n }\n\n // Allow `<nord-nav-toggle>` to be placed anywhere inside the layout, not\n // just in the `nav-toggle` slot. Clicks on the host bubble up through the\n // light-DOM subtree; if the composed path contains a `<nord-nav-toggle>`,\n // we treat that as a toggle request.\n private handleHostClick = (e: Event) => {\n if (isNavToggleClick(e)) {\n this.navTransition('toggle')\n }\n }\n\n // Same delegation pattern as `handleHostClick`, but for hover-to-peek.\n // `relatedTarget` filtering avoids re-firing as the cursor moves between\n // children inside the same `<nord-nav-toggle>`.\n private handleHostMouseOver = (e: MouseEvent) => {\n const toggle = findNavToggleInPath(e.composedPath())\n if (!toggle) {\n return\n }\n if (e.relatedTarget instanceof Node && toggle.contains(e.relatedTarget)) {\n return\n }\n this.handleMouseEnter()\n }\n\n private handleHostMouseOut = (e: MouseEvent) => {\n const toggle = findNavToggleInPath(e.composedPath())\n if (!toggle) {\n return\n }\n if (e.relatedTarget instanceof Node && toggle.contains(e.relatedTarget)) {\n return\n }\n this.handleMouseLeave()\n }\n\n private handleNavFocus = () => {\n this.navTransition('focusin')\n }\n\n private handleMainFocus = () => {\n this.navTransition('focusout')\n }\n\n private handleMouseEnter = () => {\n if (this.wideScreen) {\n this.navTransition('pointerenter')\n }\n }\n\n private handleMouseLeave = () => {\n this.navTransition('pointerleave')\n }\n\n private handleTransitionEnd = () => {\n this.navTransition('transitionend')\n }\n\n /* ---------------------------------------------\n / RESIZE LOGIC\n / --------------------------------------------- */\n\n private handleKeyboardResize(e: KeyboardEvent) {\n const {\n navWidth,\n direction: { isLTR },\n } = this\n\n switch (e.key) {\n case 'ArrowLeft':\n this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n break\n case 'ArrowRight':\n this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n break\n case 'Enter':\n this.navTransition('toggle')\n break\n case 'Home':\n this.setNavWidth(this.minNavWidth)\n break\n case 'End':\n this.setNavWidth(this.maxNavWidth)\n break\n default:\n return\n }\n\n this.broadcast.post({ navWidth: this.navWidth })\n e.preventDefault()\n }\n\n private setNavWidth(width: number) {\n this.navWidth = clamp(Math.round(width), this.minNavWidth, this.maxNavWidth)\n }\n\n private startDragging(e: PointerEvent) {\n if (e.button === 0) {\n const target = e.target as Element\n target.setPointerCapture(e.pointerId)\n this.isDragging = true\n }\n }\n\n private stopDragging() {\n this.isDragging = false\n this.broadcast.post({ navWidth: this.navWidth })\n }\n\n private handleDrag(e: PointerEvent) {\n const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n this.setNavWidth(width)\n this.navTransition(width >= NAV_COLLAPSE_WIDTH ? 'open' : 'close')\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-layout': Layout\n }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","NAV_DEFAULT_WIDTH","mediaQuery","matchMedia","matches","navWidthStore","navWidthDefaultStore","navOpenStore","findNavToggleInPath","path","target","HTMLElement","localName","isNavToggleClick","e","composedPath","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","persistNavState","defaultNavWidth","minNavWidth","maxNavWidth","padding","sticky","stickyFooter","hideDefaultNavToggle","handleMediaQueryChange","handleToggleClick","handleHostClick","handleHostMouseOver","relatedTarget","Node","contains","handleMouseEnter","handleHostMouseOut","handleMouseLeave","handleNavFocus","handleMainFocus","handleTransitionEnd","isNarrow","connectedCallback","super","listen","disconnectedCallback","willUpdate","hasUpdated","Number","isFinite","setNavWidth","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","Math","max","dispatchEvent","NavOpenChangeEvent","transition","defaultPrevented","el","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/common/storage.ts","../src/layout/Layout.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\ninterface Options<T> {\n channelName: string\n onMessage: (message: T) => void\n enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n private channel?: BroadcastChannel\n private options: Required<Options<T>>\n\n constructor(host: ReactiveControllerHost, options: Options<T>) {\n host.addController(this)\n this.options = { enabled: defaultEnabled, ...options }\n }\n\n hostConnected(): void {\n if (typeof BroadcastChannel !== 'undefined') {\n this.channel = new BroadcastChannel(this.options.channelName)\n this.channel.addEventListener('message', this)\n }\n }\n\n hostDisconnected(): void {\n this.channel?.removeEventListener('message', this)\n this.channel?.close()\n }\n\n handleEvent(event: MessageEvent<T>) {\n if (this.options.enabled()) {\n this.options.onMessage(event.data)\n }\n }\n\n post(message: T) {\n if (this.options.enabled()) {\n this.channel?.postMessage(message)\n }\n }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n key: string,\n defaultValue: T,\n serialize: (value: T) => string = JSON.stringify,\n deserialize: (value: string) => T = JSON.parse,\n) {\n return {\n get value(): T {\n try {\n const value = localStorage.getItem(key)\n return value ? deserialize(value) : defaultValue\n }\n catch {\n return defaultValue\n }\n },\n\n set value(value: T) {\n try {\n localStorage.setItem(key, serialize(value))\n }\n catch {\n // nothing we can do here\n }\n },\n }\n}\n","import type { Events, States } from '../common/fsm.js'\nimport type NavItem from '../nav-item/NavItem.js'\nimport * as lockIcon from '@nordhealth/icons/lib/assets/navigation-toggle-lock.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { BroadcastChannelController } from '../common/controllers/BroadcastChannelController.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { fsm } from '../common/fsm.js'\nimport { clamp } from '../common/number.js'\nimport { storage } from '../common/storage.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport stickyStyle from '../common/styles/Sticky.css'\n\nimport Icon from '../icon/Icon.js'\nimport style from './Layout.css'\nimport { NavOpenChangeEvent } from './NavOpenChangeEvent.js'\nimport { NavResizeEvent } from './NavResizeEvent.js'\nimport '../nav-toggle/NavToggle.js'\n\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery\n = typeof matchMedia !== 'undefined'\n ? matchMedia('(min-width: 768px)')\n : ({\n matches: false,\n addEventListener() {\n /* noop */\n },\n } as unknown as MediaQueryList)\n\nconst navWidthStore = storage('nord-layout.navWidth', NAV_DEFAULT_WIDTH)\n// Tracks the last `default-nav-width` we wrote, so we can re-seed the\n// stored width when consumers change the default between loads.\n// Initial default matches NAV_DEFAULT_WIDTH so existing consumers that\n// never set `default-nav-width` get no re-seed on upgrade — their users'\n// persisted widths are preserved.\nconst navWidthDefaultStore = storage('nord-layout.navWidthDefault', NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage('nord-layout.navOpen', true)\n\nfunction findNavToggleInPath(path: EventTarget[]): HTMLElement | null {\n for (const target of path) {\n if (target instanceof HTMLElement && target.localName === 'nord-nav-toggle') {\n return target\n }\n }\n return null\n}\n\nfunction isNavToggleClick(e: Event): boolean {\n return findNavToggleInPath(e.composedPath()) !== null\n}\n\nconst navMachine = fsm({\n opened: {\n toggle: 'closed',\n close: 'closed',\n },\n closed: {\n toggle: 'opened',\n open: 'opened',\n focusin: 'peek',\n pointerenter: 'peek',\n },\n peek: {\n toggle: 'opened',\n focusout: 'unpeek',\n pointerleave: 'wait',\n dropdownOpen: 'blocked',\n click: 'unpeek',\n open: 'opened',\n },\n blocked: {\n dropdownClose: 'peek',\n open: 'opened',\n },\n wait: {\n toggle: 'opened',\n focusin: 'peek',\n pointerenter: 'peek',\n timeout: 'unpeek',\n },\n unpeek: {\n toggle: 'opened',\n focusin: 'peek',\n pointerenter: 'peek',\n transitionend: 'closed',\n },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === 'nord-nav-item'\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.\n * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip. As an alternative, `<nord-nav-toggle>` can be placed anywhere inside `<nord-layout>` (e.g. inside a `<nord-header>`) — the layout listens for clicks and hover on any descendant `<nord-nav-toggle>` and drives toggle / peek behaviour accordingly. When using that placement, set `hide-default-nav-toggle` to suppress the layout's built-in fallback toggle.\n *\n * @fires {NavOpenChangeEvent} nav-open-change - Dispatched when the navigation open state changes, regardless of the trigger (user toggle, peek, focus, programmatic). The event's `navOpen` property contains the new state.\n * @fires {NavResizeEvent} nav-resize - Dispatched when the navigation sidebar width changes. The event's `width` property contains the new width in pixels.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n * @cssprop [--n-layout-nav-border-color=var(--n-color-border)] - Controls the color of the border between the navigation and the main content area when the nav is open on wide screens.\n */\n@customElement('nord-layout')\nexport default class Layout extends LitElement {\n static styles = [componentStyle, stickyStyle, style]\n\n private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n private navSlot = new SlotController(this, 'nav')\n private drawerSlot = new SlotController(this, 'drawer')\n private topBarSlot = new SlotController(this, 'top-bar')\n private headerSlot = new SlotController(this, 'header')\n private footerSlot = new SlotController(this, 'footer')\n private direction = new DirectionController(this)\n private events = new EventController(this)\n private lightDismiss = new LightDismissController(this, {\n isOpen: () => this.navState === 'opened' && !this.wideScreen,\n onDismiss: () => this.navTransition('close'),\n isDismissible: node => node !== this.navEl,\n })\n\n private broadcast = new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n channelName: 'nord-layout-nav-state',\n enabled: () => this.syncNavState && this.wideScreen,\n onMessage: (data) => {\n if ('navOpen' in data) {\n this.navOpen = data.navOpen\n }\n if ('navWidth' in data) {\n this.navWidth = data.navWidth\n }\n },\n })\n\n @query('.n-layout-nav', true) private navEl!: HTMLDivElement\n\n @state() private navWidth = navWidthStore.value\n @state() private isDragging = false\n @state() private navState!: NavState\n @state() private wideScreen = mediaQuery.matches\n\n /**\n * Controls whether the navigation is hidden off-screen or not.\n * Defaults to `true` for wide viewports, and `false` otherwise.\n */\n @property({ reflect: true, type: Boolean, attribute: 'nav-open' }) navOpen!: boolean\n\n /**\n * Controls whether the navigation's open/closed state is persisted across page loads.\n * This is useful for multi-page apps, where clicks on links trigger a full page load.\n */\n @property({ reflect: true, type: Boolean, attribute: 'persist-nav-state' }) persistNavState = false\n\n /**\n * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n */\n @property({ type: Boolean, reflect: true, attribute: 'sync-nav-state' }) syncNavState = false\n\n /**\n * Initial width (in pixels) of the navigation sidebar when no value has been persisted.\n * Changing this value between loads also re-seeds the persisted width for existing users,\n * so design changes propagate without manual localStorage resets.\n */\n @property({ type: Number, reflect: true, attribute: 'default-nav-width' }) defaultNavWidth = NAV_DEFAULT_WIDTH\n\n /**\n * Minimum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.\n */\n @property({ type: Number, reflect: true, attribute: 'min-nav-width' }) minNavWidth = NAV_MIN_WIDTH\n\n /**\n * Maximum width (in pixels) the navigation sidebar can be resized to via drag or keyboard.\n */\n @property({ type: Number, reflect: true, attribute: 'max-nav-width' }) maxNavWidth = NAV_MAX_WIDTH\n\n /**\n * Controls the padding of the default main section slot. When set to “none”,\n * the nav and header slots will still have padding.\n */\n @property({ reflect: true }) padding: 'm' | 'none' = 'm'\n\n /**\n * Controls whether the layout's header has sticky positioning.\n */\n @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n /**\n * Controls whether the layout's footer has sticky positioning.\n */\n @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n /**\n * Suppresses the built-in `<nord-nav-toggle>` rendered as the fallback for\n * the `nav-toggle` slot. Set this when you've placed your own\n * `<nord-nav-toggle>` elsewhere inside the layout (e.g. inside\n * `<nord-header>`) and want the layout's default one hidden.\n */\n @property({ type: Boolean, reflect: true, attribute: 'hide-default-nav-toggle' })\n hideDefaultNavToggle: boolean = false\n\n /**\n * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n * A narrow viewport is considered to be less than 768px wide.\n */\n get isNarrow(): boolean {\n return !this.wideScreen\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n this.addEventListener('click', this.handleHostClick)\n this.addEventListener('mouseover', this.handleHostMouseOver)\n this.addEventListener('mouseout', this.handleHostMouseOut)\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n this.removeEventListener('click', this.handleHostClick)\n this.removeEventListener('mouseover', this.handleHostMouseOver)\n this.removeEventListener('mouseout', this.handleHostMouseOut)\n }\n\n willUpdate() {\n // we only want this logic to run once, before first render\n if (this.hasUpdated) {\n return\n }\n\n // fall back to the built-in constants when consumer-provided attributes\n // are non-numeric (e.g. `min-nav-width=\"abc\"` produces NaN). reflect:true\n // also rewrites the attribute in the DOM to the sanitized value\n if (!Number.isFinite(this.defaultNavWidth)) {\n this.defaultNavWidth = NAV_DEFAULT_WIDTH\n }\n if (!Number.isFinite(this.minNavWidth)) {\n this.minNavWidth = NAV_MIN_WIDTH\n }\n if (!Number.isFinite(this.maxNavWidth)) {\n this.maxNavWidth = NAV_MAX_WIDTH\n }\n\n // re-seed persisted width when the consumer-provided default-nav-width\n // differs from the last default we applied. This lets apps roll out a\n // new sidebar default without manual localStorage migrations.\n if (navWidthDefaultStore.value !== this.defaultNavWidth) {\n this.setNavWidth(this.defaultNavWidth)\n navWidthStore.value = this.navWidth\n // store the raw consumer-provided default so mismatch detection is\n // independent of the min/max clamp\n navWidthDefaultStore.value = this.defaultNavWidth\n }\n else {\n // ensure a previously-persisted width still respects current min/max\n this.setNavWidth(this.navWidth)\n }\n\n // on mobile it should always start closed\n if (this.isNarrow) {\n this.navState = 'closed'\n }\n // if nav state is persisted, and it was previously closed, start closed\n else if (this.persistNavState && navOpenStore.value === false) {\n this.navState = 'closed'\n }\n // otherwise start open\n else {\n this.navState = 'opened'\n }\n }\n\n render() {\n const { navWidth, navState, navSlot, headerSlot, footerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n const adjustedNavWidth = navState === 'opened' && this.wideScreen ? navWidth : this.defaultNavWidth\n\n return html`\n <div\n class=${classMap({\n 'n-layout': true,\n 'n-rtl': direction.isRTL,\n 'n-dragging': isDragging,\n 'n-has-header': headerSlot.hasContent,\n 'n-has-footer': footerSlot.hasContent,\n 'n-has-top-bar': topBarSlot.hasContent,\n 'n-has-drawer': drawerSlot.hasContent,\n 'n-has-nav': navSlot.hasContent,\n })}\n style=${styleMap({\n '--_n-layout-nav-width': `${adjustedNavWidth}px`,\n })}\n data-nav=${navSlot.hasContent ? navState : 'closed'}\n data-screen=${this.wideScreen ? 'wide' : 'narrow'}\n >\n <div\n class=\"n-layout-nav\"\n ?hidden=${navSlot.isEmpty}\n @focusin=${this.handleNavFocus}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n @open=${this.handleDropdownOpen}\n @close=${this.handleDropdownClose}\n >\n <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n <div\n class=\"n-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n tabindex=\"0\"\n @pointerdown=${cond(navState === 'opened', this.startDragging)}\n @pointermove=${cond(isDragging, this.handleDrag)}\n @pointerleave=${this.stopDragging}\n @pointerup=${this.stopDragging}\n @keydown=${this.handleKeyboardResize}\n ?hidden=${this.isNarrow}\n ></div>\n ${this.renderNavCollapse()}\n </div>\n\n <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n ${navSlot.hasContent && !this.hideDefaultNavToggle ? this.renderNavToggle() : nothing}\n\n <div class=\"n-top-bar-container\">\n <slot name=\"top-bar\"></slot>\n </div>\n\n <div class=\"n-layout-content\">\n <div class=\"n-sticky\">\n <slot name=\"header\"></slot>\n </div>\n <main>\n <slot></slot>\n </main>\n <slot name=\"footer\"></slot>\n </div>\n\n <aside ?hidden=${this.drawerSlot.isEmpty}>\n <slot name=\"drawer\"></slot>\n </aside>\n </div>\n </div>\n `\n }\n\n private renderNavToggle() {\n return html`\n <div class=\"n-nav-toggle-container\">\n <slot\n name=\"nav-toggle\"\n @click=${this.handleToggleClick}\n @mouseover=${this.handleMouseEnter}\n @mouseout=${this.handleMouseLeave}\n >\n <nord-nav-toggle></nord-nav-toggle>\n </slot>\n </div>\n `\n }\n\n private renderNavCollapse() {\n return html`\n <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n </button>\n `\n }\n\n @observe('navWidth', 'updated')\n protected handleNavWidthChange(prev: number) {\n navWidthStore.value = this.navWidth\n if (prev != null) {\n const navWidth = this.navWidth\n this.dispatchEvent(new NavResizeEvent(navWidth))\n }\n }\n\n @observe('navState')\n protected handleNavStateChange(prev: NavState) {\n if (prev === 'wait' && this.peekTimeoutId) {\n clearTimeout(this.peekTimeoutId)\n }\n if (prev === 'unpeek') {\n this.navEl.removeEventListener('transitionend', this.handleTransitionEnd)\n }\n\n switch (this.navState) {\n case 'closed':\n this.navOpen = false\n break\n case 'opened':\n this.navOpen = true\n break\n case 'wait':\n this.peekTimeoutId = setTimeout(() => this.navTransition('timeout'), NAV_PEEK_DELAY)\n break\n case 'unpeek':\n this.navEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true })\n break\n default:\n break\n }\n }\n\n @observe('navOpen', 'updated')\n protected handleOpenChange(prev: boolean) {\n if (!this.isDragging) {\n // when opening nav, it should restore to default width (or larger).\n // unless it is being dragged, in which case the drag width wins\n this.setNavWidth(Math.max(this.navWidth, this.defaultNavWidth))\n }\n\n this.navTransition(this.navOpen ? 'open' : 'close')\n\n if (this.persistNavState) {\n navOpenStore.value = this.navOpen\n }\n\n // skip first update, we only want subsequent changes\n if (prev != null) {\n const navOpen = this.navOpen\n this.broadcast.post({ navOpen })\n this.dispatchEvent(new NavOpenChangeEvent(navOpen))\n }\n }\n\n /* ---------------------------------------------\n / NAVIGATION OPEN/CLOSE LOGIC\n / --------------------------------------------- */\n\n private navTransition(event: NavEvent) {\n this.navState = navMachine.transition(this.navState, event)\n }\n\n private handleNavClick(e: Event) {\n if (!e.defaultPrevented && !this.wideScreen) {\n const target = e.target as HTMLElement\n\n if (isNavItemLeaf(target)) {\n this.navTransition('close')\n }\n }\n }\n\n private handleMainClick() {\n this.navTransition('click')\n }\n\n private handleDropdownOpen(e: Event) {\n const target = e.target as Element\n\n if (target.localName === 'nord-dropdown') {\n this.navTransition('dropdownOpen')\n }\n }\n\n private handleDropdownClose(e: Event) {\n const target = e.target as Element\n\n if (target.localName === 'nord-dropdown') {\n this.navTransition('dropdownClose')\n }\n }\n\n private handleMediaQueryChange = () => {\n this.wideScreen = mediaQuery.matches\n this.navTransition(this.wideScreen ? 'open' : 'close')\n }\n\n private handleToggleClick = (e: Event) => {\n // Skip when a `<nord-nav-toggle>` is in the click path — `handleHostClick`\n // will fire for it. Without this guard, an in-slot `<nord-nav-toggle>`\n // would toggle twice (once via the slot handler, once via the host one).\n if (isNavToggleClick(e)) {\n return\n }\n this.navTransition('toggle')\n }\n\n // Allow `<nord-nav-toggle>` to be placed anywhere inside the layout, not\n // just in the `nav-toggle` slot. Clicks on the host bubble up through the\n // light-DOM subtree; if the composed path contains a `<nord-nav-toggle>`,\n // we treat that as a toggle request.\n private handleHostClick = (e: Event) => {\n if (isNavToggleClick(e)) {\n this.navTransition('toggle')\n }\n }\n\n // Same delegation pattern as `handleHostClick`, but for hover-to-peek.\n // `relatedTarget` filtering avoids re-firing as the cursor moves between\n // children inside the same `<nord-nav-toggle>`.\n private handleHostMouseOver = (e: MouseEvent) => {\n const toggle = findNavToggleInPath(e.composedPath())\n if (!toggle) {\n return\n }\n if (e.relatedTarget instanceof Node && toggle.contains(e.relatedTarget)) {\n return\n }\n this.handleMouseEnter()\n }\n\n private handleHostMouseOut = (e: MouseEvent) => {\n const toggle = findNavToggleInPath(e.composedPath())\n if (!toggle) {\n return\n }\n if (e.relatedTarget instanceof Node && toggle.contains(e.relatedTarget)) {\n return\n }\n this.handleMouseLeave()\n }\n\n private handleNavFocus = () => {\n this.navTransition('focusin')\n }\n\n private handleMainFocus = () => {\n this.navTransition('focusout')\n }\n\n private handleMouseEnter = () => {\n if (this.wideScreen) {\n this.navTransition('pointerenter')\n }\n }\n\n private handleMouseLeave = () => {\n this.navTransition('pointerleave')\n }\n\n private handleTransitionEnd = () => {\n this.navTransition('transitionend')\n }\n\n /* ---------------------------------------------\n / RESIZE LOGIC\n / --------------------------------------------- */\n\n private handleKeyboardResize(e: KeyboardEvent) {\n const {\n navWidth,\n direction: { isLTR },\n } = this\n\n switch (e.key) {\n case 'ArrowLeft':\n this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n break\n case 'ArrowRight':\n this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n break\n case 'Enter':\n this.navTransition('toggle')\n break\n case 'Home':\n this.setNavWidth(this.minNavWidth)\n break\n case 'End':\n this.setNavWidth(this.maxNavWidth)\n break\n default:\n return\n }\n\n this.broadcast.post({ navWidth: this.navWidth })\n e.preventDefault()\n }\n\n private setNavWidth(width: number) {\n this.navWidth = clamp(Math.round(width), this.minNavWidth, this.maxNavWidth)\n }\n\n private startDragging(e: PointerEvent) {\n if (e.button === 0) {\n const target = e.target as Element\n target.setPointerCapture(e.pointerId)\n this.isDragging = true\n }\n }\n\n private stopDragging() {\n this.isDragging = false\n this.broadcast.post({ navWidth: this.navWidth })\n }\n\n private handleDrag(e: PointerEvent) {\n const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n this.setNavWidth(width)\n this.navTransition(width >= NAV_COLLAPSE_WIDTH ? 'open' : 'close')\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-layout': Layout\n }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","NAV_DEFAULT_WIDTH","mediaQuery","matchMedia","matches","navWidthStore","navWidthDefaultStore","navOpenStore","findNavToggleInPath","path","target","HTMLElement","localName","isNavToggleClick","e","composedPath","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","persistNavState","defaultNavWidth","minNavWidth","maxNavWidth","padding","sticky","stickyFooter","hideDefaultNavToggle","handleMediaQueryChange","handleToggleClick","handleHostClick","handleHostMouseOver","relatedTarget","Node","contains","handleMouseEnter","handleHostMouseOut","handleMouseLeave","handleNavFocus","handleMainFocus","handleTransitionEnd","isNarrow","connectedCallback","super","listen","disconnectedCallback","willUpdate","hasUpdated","Number","isFinite","setNavWidth","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","prev","dispatchEvent","NavResizeEvent","handleNavStateChange","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","Math","max","NavOpenChangeEvent","transition","defaultPrevented","el","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavResizeEvent.js","sources":["../src/layout/NavResizeEvent.ts"],"sourcesContent":["import { NordEvent } from '../common/events.js'\n\n/**\n * Event dispatched when the layout's navigation sidebar width changes.\n * The `width` property contains the new width in pixels.\n */\nexport class NavResizeEvent extends NordEvent {\n declare width: number\n\n constructor(width: number) {\n super('nav-resize')\n Object.defineProperty(this, 'width', {\n value: width,\n enumerable: true,\n writable: false,\n })\n }\n}\n\ndeclare global {\n interface HTMLElementEventMap {\n 'nav-resize': NavResizeEvent\n }\n interface DocumentEventMap {\n 'nav-resize': NavResizeEvent\n }\n interface WindowEventMap {\n 'nav-resize': NavResizeEvent\n }\n}\n"],"names":["NavResizeEvent","NordEvent","constructor","width","super","Object","defineProperty","this","value","enumerable","writable"],"mappings":"yCAMM,MAAOA,UAAuBC,EAGlC,WAAAC,CAAYC,GACVC,MAAM,cACNC,OAAOC,eAAeC,KAAM,QAAS,CACnCC,MAAOL,EACPM,YAAY,EACZC,UAAU,GAEb"}
|
package/lib/Tag.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-checked-small-
|
|
1
|
+
import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-checked-small-BQmkNgCI.js";import{c as r}from"./interface-close-small-CnpAFMO3.js";import{css as n,html as t,LitElement as a}from"lit";import{property as i,customElement as c}from"lit/decorators.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{ref as l}from"lit/directives/ref.js";import{F as d}from"./FormDataController-OUt5L5uC.js";import{N as v}from"./events-Bv6wNHwJ.js";import{F as b}from"./FocusableMixin-BlQLNPdJ.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{s as p}from"./Component-DSU3Qp0O.js";import u from"./Icon.js";import{LocalizeController as g}from"./LocalizeController.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const m=n`:host{--_n-tag-box-shadow:var(--n-tag-box-shadow, none);--_n-tag-border-radius:var(--n-tag-border-radius, var(--n-border-radius-s));--_n-tag-background-color:var(--n-color-nav-hover);--_n-tag-border-color:var(--n-color-border-neutral);--_n-tag-checkbox-size:var(--n-size-icon-s);--_n-tag-checkbox-accent-color:var(--n-color-accent);--_n-tag-checkbox-border-color:var(--n-color-border-hover);--_n-tag-font-size:var(--n-font-size-m);--_n-tag-inline-size:fit-content;display:inline;vertical-align:middle}.n-tag{border-radius:var(--_n-tag-border-radius);border:1px solid var(--_n-tag-border-color);background:var(--_n-tag-background-color);font-size:var(--_n-tag-font-size);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-tight);letter-spacing:0;min-block-size:1.75rem;padding:0 var(--n-space-s);color:var(--n-color-text);gap:calc(var(--n-space-xs) * 1.5);align-items:center;display:inline-flex;white-space:nowrap;position:relative;box-shadow:var(--_n-tag-box-shadow);inline-size:var(--_n-tag-inline-size)}.n-input-container{position:relative}input{appearance:none;background:var(--n-color-surface);border:1px solid var(--_n-tag-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-tag-checkbox-size);block-size:var(--_n-tag-checkbox-size);cursor:pointer}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}:host([expand]){--_n-tag-inline-size:100%;display:block}:host(:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-border-color:var(--n-color-border-strong);--_n-tag-box-shadow:var(--n-tag-box-shadow, var(--n-box-shadow))}:host([variant=selectable]) .n-tag:hover{--_n-tag-border-color:var(--n-color-border-hover)}.n-tag:has(input:checked){--_n-tag-background-color:var(--n-color-button)}input:checked{--_n-tag-checkbox-border-color:var(--n-color-accent);background:var(--_n-tag-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important}:host([variant=selectable]:focus-within) .n-tag{--_n-tag-border-color:var(--n-color-accent);--_n-tag-box-shadow:var(--n-tag-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host(:not([disabled])) label:active{opacity:.8;transform:translateY(1px);transition:none}nord-icon.icon-checked{--_n-icon-size:var(--n-size-icon-xxs);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-xs)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~nord-icon.icon-checked{display:block}label{user-select:none;cursor:pointer}.n-remove-button{appearance:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border:1px solid transparent;color:var(--n-color-text);border-radius:var(--_n-tag-border-radius);background:0 0;margin-block-start:calc(var(--n-space-xs) * -1);margin-block-end:calc(var(--n-space-xs) * -1);margin-inline-start:0;margin-inline-end:calc(var(--n-space-s) * -1);padding:var(--n-space-s)}.n-remove-button nord-icon{--_n-icon-size:var(--n-size-icon-xxs);color:var(--n-color-icon)}.n-remove-button:hover{background:var(--n-color-surface-lowered)}.n-remove-button:hover nord-icon{color:var(--n-color-icon-hover)}.n-remove-button:focus-visible{outline:0!important}.n-remove-button:focus{outline:0!important;border:1px solid var(--n-color-accent);box-shadow:0 0 0 1px var(--n-color-accent)}:host(:not([disabled])) .n-remove-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([disabled]:not([variant=default])) .n-tag{--_n-tag-background-color:var(--n-color-surface-lowered);--_n-tag-border-color:var(--_n-tag-background-color);color:var(--n-color-text-weaker);cursor:default;opacity:.5}:host([disabled]) input{background:var(--_n-tag-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:checked){--_n-tag-checkbox-accent-color:var(--n-color-background);--_n-tag-checkbox-border-color:var(--n-color-border-hover)}:host([disabled]) .n-remove-button{cursor:default}:host([disabled]) .n-remove-button:hover{background:0 0}:host([disabled]) .n-remove-button:hover nord-icon{color:var(--n-color-icon)}:host([disabled]:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-box-shadow:var(--n-tag-box-shadow, none)}:host([size='s']) .n-tag{--_n-tag-font-size:var(--n-font-size-s)}`;u.registerIcon(e),u.registerIcon(r);let f=class extends(h(b(a))){constructor(){super(...arguments),this.localize=new g(this),this.formData=new d(this,{value:()=>this.formValue}),this.inputId="input",this.variant="default",this.checked=!1,this.size="m",this.expand=!1}get formValue(){return"selectable"===this.variant&&this.checked?this.value||"on":void 0}handleChange(o){const e=o.target;this.checked=e.checked,o.stopPropagation(),this.dispatchEvent(new v("change"))}handleRemove(){this.dispatchEvent(new v("remove"))}render(){switch(this.variant){case"selectable":return this.renderSelectableTag();case"removable":return this.renderRemovableTag();default:return this.renderStaticTag()}}renderStaticTag(){return t`<div class="n-tag"><div class="n-content"><slot></slot></div></div>`}renderRemovableTag(){return t`<div class="n-tag"><div class="n-content"><slot></slot></div><button class="n-remove-button" @click="${this.handleRemove}" ?disabled="${this.disabled}"><nord-icon name="interface-close-small" label="${this.localize.term("removeLabel")}"></nord-icon></button></div>`}renderSelectableTag(){return t`<label for="${this.inputId}" class="n-tag"><div class="n-input-container"><input ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon></div><div class="n-content"><slot></slot></div></label>`}};f.styles=[p,m],o([i({reflect:!0})],f.prototype,"variant",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"checked",void 0),o([i({reflect:!0})],f.prototype,"size",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),f=o([c("nord-tag")],f);var x=f;export{x as default};
|
|
2
2
|
//# sourceMappingURL=Tag.js.map
|
package/lib/Toast.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as s}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as t,LitElement as i}from"lit";import{property as r,customElement as e}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{ref as a}from"lit/directives/ref.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as d}from"./NotificationMixin-DOUQsx7N.js";import{s as l}from"./Component-DSU3Qp0O.js";import m from"./Icon.js";import"./events-Bv6wNHwJ.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z" fill="currentColor"/></svg>',tags:"nordicon interface close cross remove delete erase symbol",title:"interface-close"});const p=o`:host{--_n-toast-color:var(--n-color-surface);--_n-toast-background-color:var(--n-color-text)}.n-toast{display:flex;gap:var(--n-space-l);align-items:flex-start;background-color:var(--_n-toast-background-color);color:var(--_n-toast-color);border-radius:var(--n-border-radius);animation:n-enter var(--n-transition-slowly) forwards 1;z-index:var(--n-index-toast);box-shadow:var(--n-box-shadow-popout)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(50%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-toast-inner{padding:var(--n-space-m);flex:1}.n-dismiss{--_n-toast-focus-ring:0 0 0 2px var(--n-color-accent);border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);position:relative;inset-inline-end:var(--n-space-s);inset-block-start:var(--n-space-s);background-color:transparent;border-radius:var(--n-border-radius);cursor:pointer}.n-dismiss::after,.n-dismiss::before{content:'';position:absolute;display:block;border-radius:var(--n-border-radius)}.n-dismiss::before{inset:0;background:var(--_n-toast-color);transition:opacity var(--n-transition-quickly);opacity:0}.n-dismiss:is(:hover,:focus)::before{opacity:.06}.n-dismiss::after{inset:calc(var(--n-space-s) * -1)}.n-dismiss:active{transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--_n-toast-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-toast-focus-ring)}}.n-dismiss nord-icon{opacity:.53;transition:opacity var(--n-transition-quickly);color:var(--_n-toast-color)}.n-dismiss:is(:hover,:focus) nord-icon{opacity:1}:host([variant=danger]){--_n-toast-background-color:var(--n-color-status-danger);--_n-toast-color:var(--n-color-text-on-accent)}`;m.registerIcon(u);let v=class extends(d(i)){constructor(){super(...arguments),this.variant="default",this.autoDismiss=1e4}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeoutId)}async dismiss(){return clearTimeout(this.timeoutId),super.dismiss()}render(){return t`<div ${a(this.notificationRef)} class="${n({"n-toast":!0,"n-dismissed":this.dismissed})}"><div class="n-toast-inner"><slot></slot></div><button class="n-dismiss" @click="${this.dismiss}" aria-hidden="true"><nord-icon name="interface-close" size="s"></nord-icon></button></div>`}handleAutoDismissChange(){clearTimeout(this.timeoutId),null!=this.autoDismiss&&this.autoDismiss>=0&&setTimeout((()=>this.dismiss()),this.autoDismiss)}};v.styles=[l,p],s([r({reflect:!0})],v.prototype,"variant",void 0),s([r({reflect:!0,type:Number,attribute:"auto-dismiss"})],v.prototype,"autoDismiss",void 0),s([c("autoDismiss")],v.prototype,"handleAutoDismissChange",null),v=s([e("nord-toast")],v);var f=v;export{f as default};
|
|
1
|
+
import{_ as s}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as t,LitElement as i}from"lit";import{property as r,customElement as e}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{ref as a}from"lit/directives/ref.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as d}from"./NotificationMixin-DOUQsx7N.js";import{s as l}from"./Component-DSU3Qp0O.js";import m from"./Icon.js";import"./events-Bv6wNHwJ.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z" fill="currentColor"/></svg>',tags:"nordicon interface close cross remove delete erase symbol times",title:"interface-close"});const p=o`:host{--_n-toast-color:var(--n-color-surface);--_n-toast-background-color:var(--n-color-text)}.n-toast{display:flex;gap:var(--n-space-l);align-items:flex-start;background-color:var(--_n-toast-background-color);color:var(--_n-toast-color);border-radius:var(--n-border-radius);animation:n-enter var(--n-transition-slowly) forwards 1;z-index:var(--n-index-toast);box-shadow:var(--n-box-shadow-popout)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(50%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-toast-inner{padding:var(--n-space-m);flex:1}.n-dismiss{--_n-toast-focus-ring:0 0 0 2px var(--n-color-accent);border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);position:relative;inset-inline-end:var(--n-space-s);inset-block-start:var(--n-space-s);background-color:transparent;border-radius:var(--n-border-radius);cursor:pointer}.n-dismiss::after,.n-dismiss::before{content:'';position:absolute;display:block;border-radius:var(--n-border-radius)}.n-dismiss::before{inset:0;background:var(--_n-toast-color);transition:opacity var(--n-transition-quickly);opacity:0}.n-dismiss:is(:hover,:focus)::before{opacity:.06}.n-dismiss::after{inset:calc(var(--n-space-s) * -1)}.n-dismiss:active{transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--_n-toast-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-toast-focus-ring)}}.n-dismiss nord-icon{opacity:.53;transition:opacity var(--n-transition-quickly);color:var(--_n-toast-color)}.n-dismiss:is(:hover,:focus) nord-icon{opacity:1}:host([variant=danger]){--_n-toast-background-color:var(--n-color-status-danger);--_n-toast-color:var(--n-color-text-on-accent)}`;m.registerIcon(u);let v=class extends(d(i)){constructor(){super(...arguments),this.variant="default",this.autoDismiss=1e4}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeoutId)}async dismiss(){return clearTimeout(this.timeoutId),super.dismiss()}render(){return t`<div ${a(this.notificationRef)} class="${n({"n-toast":!0,"n-dismissed":this.dismissed})}"><div class="n-toast-inner"><slot></slot></div><button class="n-dismiss" @click="${this.dismiss}" aria-hidden="true"><nord-icon name="interface-close" size="s"></nord-icon></button></div>`}handleAutoDismissChange(){clearTimeout(this.timeoutId),null!=this.autoDismiss&&this.autoDismiss>=0&&setTimeout((()=>this.dismiss()),this.autoDismiss)}};v.styles=[l,p],s([r({reflect:!0})],v.prototype,"variant",void 0),s([r({reflect:!0,type:Number,attribute:"auto-dismiss"})],v.prototype,"autoDismiss",void 0),s([c("autoDismiss")],v.prototype,"handleAutoDismissChange",null),v=s([e("nord-toast")],v);var f=v;export{f as default};
|
|
2
2
|
//# sourceMappingURL=Toast.js.map
|
package/lib/Toast.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sources":["../../icons/lib/assets/interface-close.js","../src/toast/Toast.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-close\";\nexport const tags
|
|
1
|
+
{"version":3,"file":"Toast.js","sources":["../../icons/lib/assets/interface-close.js","../src/toast/Toast.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-close\";\nexport const tags =\n \"nordicon interface close cross remove delete erase symbol times\";\n","import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ref } from 'lit/directives/ref.js'\n\nimport { observe } from '../common/decorators/observe.js'\nimport { NotificationMixin } from '../common/mixins/NotificationMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Toast.css'\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Toasts are non-disruptive messages that appear in the interface\n * to provide quick, at-a-glance feedback on the outcome of an action.\n *\n * @status ready\n * @category feedback\n * @slot - Default slot used for the toast text/message.\n * @fires dismiss - Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.\n */\n@customElement('nord-toast')\nexport default class Toast extends NotificationMixin(LitElement) {\n static styles = [componentStyle, style]\n\n private timeoutId?: ReturnType<typeof setTimeout>\n\n /**\n * The style variant of the toast.\n */\n @property({ reflect: true }) variant: 'default' | 'danger' = 'default'\n\n /**\n * Timeout in milliseconds before the toast is automatically dismissed.\n */\n @property({ reflect: true, type: Number, attribute: 'auto-dismiss' }) autoDismiss? = 10000\n\n disconnectedCallback() {\n super.disconnectedCallback()\n clearTimeout(this.timeoutId)\n }\n\n /**\n * Programmatically dismiss the toast.\n * The returned promise resolves when toast's exit animation is complete.\n */\n async dismiss() {\n clearTimeout(this.timeoutId)\n return super.dismiss()\n }\n\n render() {\n return html`\n <div ${ref(this.notificationRef)} class=${classMap({ 'n-toast': true, 'n-dismissed': this.dismissed })}>\n <div class=\"n-toast-inner\">\n <slot></slot>\n </div>\n\n <button class=\"n-dismiss\" @click=${this.dismiss} aria-hidden=\"true\">\n <nord-icon name=\"interface-close\" size=\"s\"></nord-icon>\n </button>\n </div>\n `\n }\n\n @observe('autoDismiss')\n protected handleAutoDismissChange() {\n clearTimeout(this.timeoutId)\n\n if (this.autoDismiss != null && this.autoDismiss >= 0) {\n setTimeout(() => this.dismiss(), this.autoDismiss)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-toast': Toast\n }\n}\n"],"names":["Icon","registerIcon","closeIcon","Toast","NotificationMixin","LitElement","constructor","this","variant","autoDismiss","disconnectedCallback","super","clearTimeout","timeoutId","dismiss","render","html","ref","notificationRef","classMap","dismissed","handleAutoDismissChange","setTimeout","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Number","attribute","observe","customElement"],"mappings":"8mBAAe,yQAGb,wEAFmB,szDCWrBA,EAAKC,aAAaC,GAYH,IAAMC,EAAN,cAAoBC,EAAkBC,IAAtC,WAAAC,uBAQgBC,KAAOC,QAAyB,UAKSD,KAAWE,YAAI,GAsCtF,CApCC,oBAAAC,GACEC,MAAMD,uBACNE,aAAaL,KAAKM,UACnB,CAMD,aAAMC,GAEJ,OADAF,aAAaL,KAAKM,WACXF,MAAMG,SACd,CAED,MAAAC,GACE,OAAOC,CAAI,QACFC,EAAIV,KAAKW,2BAA0BC,EAAS,CAAE,WAAW,EAAM,cAAeZ,KAAKa,gGAKrDb,KAAKO,oGAK7C,CAGS,uBAAAO,GACRT,aAAaL,KAAKM,WAEM,MAApBN,KAAKE,aAAuBF,KAAKE,aAAe,GAClDa,YAAW,IAAMf,KAAKO,WAAWP,KAAKE,YAEzC,GAjDMN,EAAAoB,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiDzB,EAAA0B,UAAA,eAAA,GAKAH,EAAA,CAArEC,EAAS,CAAEC,SAAS,EAAME,KAAMC,OAAQC,UAAW,kBAAsC7B,EAAA0B,UAAA,mBAAA,GA+BhFH,EAAA,CADTO,EAAQ,gBAOR9B,EAAA0B,UAAA,0BAAA,MAlDkB1B,EAAKuB,EAAA,CADzBQ,EAAc,eACM/B,SAAAA"}
|