@nordhealth/components 4.14.0 → 4.15.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 +12105 -12063
- package/lib/IconManager.js.map +1 -1
- package/lib/Modal.js +1 -1
- package/lib/Modal.js.map +1 -1
- package/lib/ModalController.js +1 -1
- package/lib/ModalController.js.map +1 -1
- package/lib/bundle.js +1 -1
- package/lib/bundle.js.map +1 -1
- package/lib/react.d.ts +2 -2
- package/lib/src/modal/Modal.d.ts +8 -2
- package/lib/src/modal/ModalController.d.ts +1 -0
- package/lib/vue.d.ts +2 -2
- package/package.json +2 -2
package/lib/IconManager.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconManager.js","sources":["../src/icon/IconManager.ts"],"sourcesContent":["export type IconResolver = (iconName: string) => Promise<string>\n\n// in dev we should just load from node_modules\nconst loadIcon: IconResolver = (name: string) =>\n import(`@nordhealth/icons/lib/assets/${name}.js`).then(({ default: svg }) => svg)\n\n// in prod we should load from the CDN, as a sensible default\nconst loadIconCdn: IconResolver = (name: string) =>\n fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then((response) => {\n if (!response.ok) {\n throw new TypeError(`NORD: unknown icon: '${name}'`)\n }\n\n return response.text()\n })\n\nexport class IconManager {\n private cache = new Map<string, string | Promise<string>>()\n resolver: IconResolver = process.env.NODE_ENV === 'development' ? loadIcon : loadIconCdn\n\n resolve(name: string, onResolved: (svg: string) => void) {\n let cached = this.cache.get(name)\n\n // if it's a string, we can resolve immediately\n if (typeof cached === 'string') {\n onResolved(cached)\n return\n }\n\n // if it's null, then we should initiate a fetch\n if (!cached) {\n cached = this.resolver(name)\n .catch(() => '')\n .then((svg) => {\n // replace the promise with the resolved value, for faster resolution next time\n this.cache.set(name, svg)\n return svg\n })\n\n // store the promise so that duplicate icons do not make separate requests\n this.cache.set(name, cached)\n }\n\n cached.then(onResolved)\n }\n\n registerIcon(iconOrName: string | { title: string, default: string }, icon?: string) {\n let name: string | undefined\n let svg: string | undefined\n\n if (typeof iconOrName === 'string') {\n name = iconOrName\n svg = icon\n }\n else {\n name = iconOrName.title\n svg = iconOrName.default\n }\n\n // handle errors\n if (!name) {\n throw new Error('name is required when registering an icon')\n }\n if (!svg) {\n throw new Error('icon must not be empty')\n }\n\n this.cache.set(name, svg)\n }\n\n clear() {\n this.cache.clear()\n }\n}\n"],"names":["loadIconCdn","name","fetch","then","response","ok","TypeError","text","IconManager","constructor","this","cache","Map","resolver","resolve","onResolved","cached","get","catch","svg","set","registerIcon","iconOrName","icon","title","default","Error","clear"],"mappings":"AAOA,MAAMA,EAA6BC,GACjCC,MAAM,8CAAmED,SAAYE,MAAMC,IACzF,IAAKA,EAASC,GACZ,MAAM,IAAIC,UAAU,wBAAwBL,MAG9C,OAAOG,EAASG,MAAM,UAGbC,EAAb,WAAAC,GACUC,KAAAC,MAAQ,IAAIC,IACpBF,KAAAG,SAA6Eb,CAuD9E,CArDC,OAAAc,CAAQb,EAAcc,GACpB,IAAIC,EAASN,KAAKC,MAAMM,IAAIhB,GAGN,iBAAXe,GAMNA,IACHA,EAASN,KAAKG,SAASZ,GACpBiB,OAAM,IAAM,KACZf,MAAMgB,IAELT,KAAKC,MAAMS,IAAInB,EAAMkB,GACdA,KAIXT,KAAKC,MAAMS,IAAInB,EAAMe,IAGvBA,EAAOb,KAAKY,IAlBVA,EAAWC,EAmBd,CAED,YAAAK,CAAaC,EAAyDC,GACpE,IAAItB,EACAkB,EAYJ,GAV0B,iBAAfG,GACTrB,EAAOqB,EACPH,EAAMI,IAGNtB,EAAOqB,EAAWE,MAClBL,EAAMG,EAAWG,UAIdxB,EACH,MAAM,IAAIyB,MAAM,6CAElB,IAAKP,EACH,MAAM,IAAIO,MAAM,0BAGlBhB,KAAKC,MAAMS,IAAInB,EAAMkB,EACtB,CAED,KAAAQ,GACEjB,KAAKC,MAAMgB,OACZ"}
|
|
1
|
+
{"version":3,"file":"IconManager.js","sources":["../src/icon/IconManager.ts"],"sourcesContent":["export type IconResolver = (iconName: string) => Promise<string>\n\n// in dev we should just load from node_modules\nconst loadIcon: IconResolver = (name: string) =>\n import(/* @vite-ignore */ `@nordhealth/icons/lib/assets/${name}.js`).then(({ default: svg }) => svg)\n\n// in prod we should load from the CDN, as a sensible default\nconst loadIconCdn: IconResolver = (name: string) =>\n fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then((response) => {\n if (!response.ok) {\n throw new TypeError(`NORD: unknown icon: '${name}'`)\n }\n\n return response.text()\n })\n\nexport class IconManager {\n private cache = new Map<string, string | Promise<string>>()\n resolver: IconResolver = process.env.NODE_ENV === 'development' ? loadIcon : loadIconCdn\n\n resolve(name: string, onResolved: (svg: string) => void) {\n let cached = this.cache.get(name)\n\n // if it's a string, we can resolve immediately\n if (typeof cached === 'string') {\n onResolved(cached)\n return\n }\n\n // if it's null, then we should initiate a fetch\n if (!cached) {\n cached = this.resolver(name)\n .catch(() => '')\n .then((svg) => {\n // replace the promise with the resolved value, for faster resolution next time\n this.cache.set(name, svg)\n return svg\n })\n\n // store the promise so that duplicate icons do not make separate requests\n this.cache.set(name, cached)\n }\n\n cached.then(onResolved)\n }\n\n registerIcon(iconOrName: string | { title: string, default: string }, icon?: string) {\n let name: string | undefined\n let svg: string | undefined\n\n if (typeof iconOrName === 'string') {\n name = iconOrName\n svg = icon\n }\n else {\n name = iconOrName.title\n svg = iconOrName.default\n }\n\n // handle errors\n if (!name) {\n throw new Error('name is required when registering an icon')\n }\n if (!svg) {\n throw new Error('icon must not be empty')\n }\n\n this.cache.set(name, svg)\n }\n\n clear() {\n this.cache.clear()\n }\n}\n"],"names":["loadIconCdn","name","fetch","then","response","ok","TypeError","text","IconManager","constructor","this","cache","Map","resolver","resolve","onResolved","cached","get","catch","svg","set","registerIcon","iconOrName","icon","title","default","Error","clear"],"mappings":"AAOA,MAAMA,EAA6BC,GACjCC,MAAM,8CAAmED,SAAYE,MAAMC,IACzF,IAAKA,EAASC,GACZ,MAAM,IAAIC,UAAU,wBAAwBL,MAG9C,OAAOG,EAASG,MAAM,UAGbC,EAAb,WAAAC,GACUC,KAAAC,MAAQ,IAAIC,IACpBF,KAAAG,SAA6Eb,CAuD9E,CArDC,OAAAc,CAAQb,EAAcc,GACpB,IAAIC,EAASN,KAAKC,MAAMM,IAAIhB,GAGN,iBAAXe,GAMNA,IACHA,EAASN,KAAKG,SAASZ,GACpBiB,OAAM,IAAM,KACZf,MAAMgB,IAELT,KAAKC,MAAMS,IAAInB,EAAMkB,GACdA,KAIXT,KAAKC,MAAMS,IAAInB,EAAMe,IAGvBA,EAAOb,KAAKY,IAlBVA,EAAWC,EAmBd,CAED,YAAAK,CAAaC,EAAyDC,GACpE,IAAItB,EACAkB,EAYJ,GAV0B,iBAAfG,GACTrB,EAAOqB,EACPH,EAAMI,IAGNtB,EAAOqB,EAAWE,MAClBL,EAAMG,EAAWG,UAIdxB,EACH,MAAM,IAAIyB,MAAM,6CAElB,IAAKP,EACH,MAAM,IAAIO,MAAM,0BAGlBhB,KAAKC,MAAMS,IAAInB,EAAMkB,EACtB,CAED,KAAAQ,GACEjB,KAAKC,MAAMgB,OACZ"}
|
package/lib/Modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as
|
|
1
|
+
import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-close-small-CnpAFMO3.js";import{css as n,LitElement as i,html as t}from"lit";import{query as a,property as s,customElement as l}from"lit/decorators.js";import{classMap as r}from"lit/directives/class-map.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as p}from"./events-Bv6wNHwJ.js";import{s as m}from"./Component-DSU3Qp0O.js";import h from"./Icon.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as u}from"./ModalController.js";import"./Footer.js";import"./EventController-BBOmvfLa.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.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";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";const f=n`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:transparent;--n-footer-box-shadow:none;position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-overflow-hidden{overflow:hidden}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding-block:var(--n-space-l) var(--n-space-xl);padding-inline:var(--_n-modal-padding-inline)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border)}.n-padded{padding-block:var(--_n-modal-padding-block);padding-inline:var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:'';position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size='s']){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size='l']){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, none)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:var(--n-space-xs);flex-direction:column;inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;h.registerIcon(e);class b extends p{constructor(o){super("cancel",{cancelable:!0}),Object.defineProperty(this,"trigger",{value:o,enumerable:!0,writable:!1})}}class g extends p{constructor(o){super("close"),Object.defineProperty(this,"trigger",{value:o,enumerable:!0,writable:!1})}}let x=class extends i{constructor(){super(...arguments),this.defaultSlot=new d(this),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new u(this,{isOpen:()=>this.open,onDismiss:o=>this.handleDismiss(o),isLightDismissEnabled:()=>!this.persistent,dialog:()=>this.modal,backdrop:()=>this.backdrop,close:(o,e)=>this.close(o,e)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1,this.persistent=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog")}disconnectedCallback(){super.disconnectedCallback(),this.lastTrigger=void 0}showModal(){this.open=!0}close(o,e){this.open=!1,null!=o&&(this.returnValue=o);const n=null!=e?e:this.lastTrigger;this.dispatchEvent(new g(n)),this.lastTrigger=void 0}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return t`<div class="n-modal-backdrop"><div class="${r({"n-modal":!0,"n-overflow-hidden":this.featureSlot.hasContent&&this.defaultSlot.isEmpty&&this.footerSlot.isEmpty})}" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${o=>this.handleDismiss(o)}" ?hidden="${this.persistent}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="${this.defaultSlot.isEmpty?"":"n-body-padded"}"></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(o){this.dispatchEvent(new b(o))&&(this.lastTrigger=o,this.close())}};x.styles=[m,f],o([a(".n-modal",!0)],x.prototype,"modal",void 0),o([a(".n-modal-backdrop",!0)],x.prototype,"backdrop",void 0),o([s({type:Boolean,reflect:!0})],x.prototype,"open",void 0),o([s({reflect:!0})],x.prototype,"size",void 0),o([s({attribute:!1})],x.prototype,"returnValue",void 0),o([s({type:Boolean,reflect:!0})],x.prototype,"scrollable",void 0),o([s({type:Boolean,reflect:!0})],x.prototype,"persistent",void 0),o([c("open","updated")],x.prototype,"handleOpenUpdated",null),x=o([l("nord-modal")],x);var y=x;export{b as ModalCancelEvent,g as ModalCloseEvent,y as default};
|
|
2
2
|
//# sourceMappingURL=Modal.js.map
|
package/lib/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { NordEvent } from '../common/events.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Modal.css'\nimport { ModalController } from './ModalController.js'\n\nimport '../footer/Footer.js'\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Event dispatched when a modal is about to be dismissed.\n * The `trigger` property contains the original event that caused the dismiss.\n */\nexport class ModalCancelEvent extends NordEvent {\n declare trigger: Event\n\n constructor(trigger: Event) {\n super('cancel', { cancelable: true })\n Object.defineProperty(this, 'trigger', {\n value: trigger,\n enumerable: true,\n writable: false,\n })\n }\n}\n\n/**\n * Event dispatched when a modal is closed.\n * The `trigger` property contains the original event that caused the close, if available.\n */\nexport class ModalCloseEvent extends NordEvent {\n declare trigger: Event | undefined\n\n constructor(trigger?: Event) {\n super('close')\n Object.defineProperty(this, 'trigger', {\n value: trigger,\n enumerable: true,\n writable: false,\n })\n }\n}\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot feature - Slot for full bleed content like an image.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel {ModalCancelEvent} - Dispatched before the modal has closed when a user attempts to dismiss a modal. The event includes a `trigger` property containing the original event that caused the dismiss. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close {ModalCloseEvent} - Dispatched when a modal is closed for any reason. The event includes an optional `trigger` property containing the original event that caused the close, if the modal was closed by a user action.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the header of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n *\n * @localization closeLabel - Accessible label for the close button.\n */\n@customElement('nord-modal')\nexport default class Modal extends LitElement {\n static styles = [componentStyle, style]\n\n @query('.n-modal', true) private modal!: HTMLDivElement\n @query('.n-modal-backdrop', true) private backdrop!: HTMLDivElement\n\n private lastTrigger?: Event\n\n private defaultSlot = new SlotController(this)\n private headerSlot = new SlotController(this, 'header')\n private featureSlot = new SlotController(this, 'feature')\n private footerSlot = new SlotController(this, 'footer')\n\n private localize = new LocalizeController<'nord-modal'>(this)\n private modalController = new ModalController(this, {\n isOpen: () => this.open,\n onDismiss: (e: Event) => this.handleDismiss(e),\n dialog: () => this.modal,\n backdrop: () => this.backdrop,\n close: (returnValue, trigger) => this.close(returnValue, trigger),\n })\n\n /**\n * Controls whether the modal is open or not.\n */\n @property({ type: Boolean, reflect: true }) open = false\n\n /**\n * Controls the max-width of the modal when open.\n */\n @property({ reflect: true }) size: 's' | 'm' | 'l' | 'xl' = 'm'\n\n /**\n * The reason why the modal was closed. This typically indicates\n * which button the user pressed to close the modal, though any value\n * can be supplied if the modal is programmatically closed.\n */\n @property({ attribute: false }) returnValue: string = ''\n\n /**\n * By default if a modal is too big for the browser window,\n * the entire modal will scroll. This setting changes that behavior\n * so that the body of the modal scrolls instead, with the modal\n * itself remaining fixed.\n */\n @property({ type: Boolean, reflect: true }) scrollable = false\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.setAttribute('role', 'dialog')\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n // Clear trigger reference when modal is removed from DOM to prevent memory leaks\n this.lastTrigger = undefined\n }\n\n /**\n * Show the modal, automatically moving focus to the modal or a child\n * element with an `autofocus` attribute.\n */\n showModal() {\n this.open = true\n }\n\n /**\n * Programmatically close the modal.\n * @param returnValue An optional value to indicate why the modal was closed.\n * @param trigger An optional event that triggered the close.\n */\n close(returnValue?: string, trigger?: Event) {\n this.open = false\n\n if (returnValue != null) {\n this.returnValue = returnValue\n }\n\n const closeTrigger = trigger ?? this.lastTrigger\n this.dispatchEvent(new ModalCloseEvent(closeTrigger))\n this.lastTrigger = undefined\n }\n\n /**\n * Programmatically focus the modal.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions) {\n this.modal.focus({ preventScroll: true, ...options })\n }\n\n render() {\n return html`\n <div class=\"n-modal-backdrop\">\n <div\n class=${classMap({\n 'n-modal': true,\n 'n-overflow-hidden': this.featureSlot.hasContent && this.defaultSlot.isEmpty && this.footerSlot.isEmpty,\n })}\n tabindex=\"0\"\n >\n <!-- eslint-disable-next-line @nordhealth/no-unknown-legacy-classes -->\n <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n <button class=\"n-close\" @click=${(e: Event) => this.handleDismiss(e)}>\n <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term('closeLabel')}></nord-icon>\n </button>\n </div>\n\n <div class=\"n-modal-body\">\n <slot\n name=${this.featureSlot.slotName}\n class=${this.headerSlot.isEmpty ? 'n-rounded-top' : ''}\n ?hidden=${this.featureSlot.isEmpty}\n ></slot>\n <slot class=${this.defaultSlot.isEmpty ? '' : 'n-body-padded'}></slot>\n </div>\n\n <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n <slot name=${this.footerSlot.slotName}></slot>\n </nord-footer>\n </div>\n </div>\n `\n }\n\n @observe('open', 'updated')\n protected handleOpenUpdated(prev: boolean) {\n if (this.open) {\n this.modalController.block()\n }\n else if (prev === true) {\n this.modalController.unblock()\n }\n }\n\n private handleDismiss(trigger: Event) {\n // allow cancelling of close\n const allowed = this.dispatchEvent(new ModalCancelEvent(trigger))\n\n if (allowed) {\n this.lastTrigger = trigger\n this.close()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-modal': Modal\n }\n}\n"],"names":["Icon","registerIcon","closeIcon","ModalCancelEvent","NordEvent","constructor","trigger","super","cancelable","Object","defineProperty","this","value","enumerable","writable","ModalCloseEvent","Modal","LitElement","defaultSlot","SlotController","headerSlot","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","e","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","setAttribute","disconnectedCallback","lastTrigger","undefined","showModal","closeTrigger","dispatchEvent","focus","options","preventScroll","render","html","classMap","hasContent","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { NordEvent } from '../common/events.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Modal.css'\nimport { ModalController } from './ModalController.js'\n\nimport '../footer/Footer.js'\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Event dispatched when a modal is about to be dismissed.\n * The `trigger` property contains the original event that caused the dismiss.\n */\nexport class ModalCancelEvent extends NordEvent {\n declare trigger: Event\n\n constructor(trigger: Event) {\n super('cancel', { cancelable: true })\n Object.defineProperty(this, 'trigger', {\n value: trigger,\n enumerable: true,\n writable: false,\n })\n }\n}\n\n/**\n * Event dispatched when a modal is closed.\n * The `trigger` property contains the original event that caused the close, if available.\n */\nexport class ModalCloseEvent extends NordEvent {\n declare trigger: Event | undefined\n\n constructor(trigger?: Event) {\n super('close')\n Object.defineProperty(this, 'trigger', {\n value: trigger,\n enumerable: true,\n writable: false,\n })\n }\n}\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot feature - Slot for full bleed content like an image.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires {ModalCancelEvent} cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. The event includes a trigger property containing the original event that caused the dismiss. Call preventDefault() on the event to prevent the modal closing.\n * @fires {ModalCloseEvent} close - Dispatched when a modal is closed for any reason. The event includes an optional trigger property containing the original event that caused the close, if the modal was closed by a user action.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the header of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n *\n * @localization closeLabel - Accessible label for the close button.\n */\n@customElement('nord-modal')\nexport default class Modal extends LitElement {\n static styles = [componentStyle, style]\n\n @query('.n-modal', true) private modal!: HTMLDivElement\n @query('.n-modal-backdrop', true) private backdrop!: HTMLDivElement\n\n private lastTrigger?: Event\n\n private defaultSlot = new SlotController(this)\n private headerSlot = new SlotController(this, 'header')\n private featureSlot = new SlotController(this, 'feature')\n private footerSlot = new SlotController(this, 'footer')\n\n private localize = new LocalizeController<'nord-modal'>(this)\n private modalController = new ModalController(this, {\n isOpen: () => this.open,\n onDismiss: (e: Event) => this.handleDismiss(e),\n isLightDismissEnabled: () => !this.persistent,\n dialog: () => this.modal,\n backdrop: () => this.backdrop,\n close: (returnValue, trigger) => this.close(returnValue, trigger),\n })\n\n /**\n * Controls whether the modal is open or not.\n */\n @property({ type: Boolean, reflect: true }) open = false\n\n /**\n * Controls the max-width of the modal when open.\n */\n @property({ reflect: true }) size: 's' | 'm' | 'l' | 'xl' = 'm'\n\n /**\n * The reason why the modal was closed. This typically indicates\n * which button the user pressed to close the modal, though any value\n * can be supplied if the modal is programmatically closed.\n */\n @property({ attribute: false }) returnValue: string = ''\n\n /**\n * By default if a modal is too big for the browser window,\n * the entire modal will scroll. This setting changes that behavior\n * so that the body of the modal scrolls instead, with the modal\n * itself remaining fixed.\n */\n @property({ type: Boolean, reflect: true }) scrollable = false\n\n /**\n * When true, the modal will not close when clicking the backdrop or pressing Escape,\n * and the close button will be hidden. Only programmatic close or custom action buttons\n * can dismiss the modal.\n */\n @property({ type: Boolean, reflect: true }) persistent = false\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.setAttribute('role', 'dialog')\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n // Clear trigger reference when modal is removed from DOM to prevent memory leaks\n this.lastTrigger = undefined\n }\n\n /**\n * Show the modal, automatically moving focus to the modal or a child\n * element with an `autofocus` attribute.\n */\n showModal() {\n this.open = true\n }\n\n /**\n * Programmatically close the modal.\n * @param returnValue An optional value to indicate why the modal was closed.\n * @param trigger An optional event that triggered the close.\n */\n close(returnValue?: string, trigger?: Event) {\n this.open = false\n\n if (returnValue != null) {\n this.returnValue = returnValue\n }\n\n const closeTrigger = trigger ?? this.lastTrigger\n this.dispatchEvent(new ModalCloseEvent(closeTrigger))\n this.lastTrigger = undefined\n }\n\n /**\n * Programmatically focus the modal.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions) {\n this.modal.focus({ preventScroll: true, ...options })\n }\n\n render() {\n return html`\n <div class=\"n-modal-backdrop\">\n <div\n class=${classMap({\n 'n-modal': true,\n 'n-overflow-hidden': this.featureSlot.hasContent && this.defaultSlot.isEmpty && this.footerSlot.isEmpty,\n })}\n tabindex=\"0\"\n >\n <!-- eslint-disable-next-line @nordhealth/no-unknown-legacy-classes -->\n <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n <button class=\"n-close\" @click=${(e: Event) => this.handleDismiss(e)} ?hidden=${this.persistent}>\n <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term('closeLabel')}></nord-icon>\n </button>\n </div>\n\n <div class=\"n-modal-body\">\n <slot\n name=${this.featureSlot.slotName}\n class=${this.headerSlot.isEmpty ? 'n-rounded-top' : ''}\n ?hidden=${this.featureSlot.isEmpty}\n ></slot>\n <slot class=${this.defaultSlot.isEmpty ? '' : 'n-body-padded'}></slot>\n </div>\n\n <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n <slot name=${this.footerSlot.slotName}></slot>\n </nord-footer>\n </div>\n </div>\n `\n }\n\n @observe('open', 'updated')\n protected handleOpenUpdated(prev: boolean) {\n if (this.open) {\n this.modalController.block()\n }\n else if (prev === true) {\n this.modalController.unblock()\n }\n }\n\n private handleDismiss(trigger: Event) {\n // allow cancelling of close\n const allowed = this.dispatchEvent(new ModalCancelEvent(trigger))\n\n if (allowed) {\n this.lastTrigger = trigger\n this.close()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-modal': Modal\n }\n}\n"],"names":["Icon","registerIcon","closeIcon","ModalCancelEvent","NordEvent","constructor","trigger","super","cancelable","Object","defineProperty","this","value","enumerable","writable","ModalCloseEvent","Modal","LitElement","defaultSlot","SlotController","headerSlot","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","e","handleDismiss","isLightDismissEnabled","persistent","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","setAttribute","disconnectedCallback","lastTrigger","undefined","showModal","closeTrigger","dispatchEvent","focus","options","preventScroll","render","html","classMap","hasContent","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"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"}
|
package/lib/ModalController.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{E as t}from"./EventController-BBOmvfLa.js";import{L as s}from"./LightDismissController-4pH8cdko.js";import{S as i}from"./ScrollbarController-BFC67Y2x.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";function e(t,s){t.forEach((t=>function(t,s){if(s){const s=t.getAttribute("inert");null!==s&&t.setAttribute("data-n-inert",s),t.setAttribute("inert","")}else{const s=t.getAttribute("data-n-inert");null!==s?(t.setAttribute("inert",s),t.removeAttribute("data-n-inert")):t.removeAttribute("inert")}}(t,s)))}function o(t){const s=[];let i=t.nextElementSibling;for(;i;)s.push(i),i=i.nextElementSibling;for(i=t.previousElementSibling;i;)s.push(i),i=i.previousElementSibling;return t.parentElement&&t.parentElement!==document.body&&s.push(...o(t.parentElement)),s}class n{constructor(t){this.host=t,this.inertElements=[],t.addController(this)}hostDisconnected(){this.release()}trap(){const t=o(this.host);e(t,!0),this.inertElements=t}release(){e(this.inertElements,!1),this.inertElements=[]}}class r{constructor(e,o){this.host=e,this.trackLastButton=t=>{const s=t.target;"button"===s.localName&&(this.lastButton=s)},this.polyfillSubmitter=t=>{t.submitter=this.lastButton},this.handleTransitionEnd=t=>{this.options.isOpen()||t.target!==this.host||this.scrollBar.unlockScroll()},this.handleLightDismiss=t=>{this.host.contains(t.target)&&this.options.onDismiss(t)},this.handleSubmit=t=>{this.lastButton=void 0;const s=t.target,i=t.submitter,e="dialog"===s.method,o="dialog"===s.getAttribute("method");o&&!e&&t.preventDefault(),(o||e)&&this.options.close(null==i?void 0:i.value,t)},e.addController(this),this.options=o,this.scrollBar=new i(e),this.focusTrap=new n(e),this.events=new t(e),this.lightDismiss=new s(e,{isOpen:o.isOpen,isDismissible:t=>t!==o.dialog(),onDismiss:this.handleLightDismiss})}hostConnected(){window.SubmitEvent||(this.events.listen(this.host,"click",this.trackLastButton,!0),this.events.listen(this.host,"submit",this.polyfillSubmitter,!0)),this.events.listen(this.host,"transitionend",this.handleTransitionEnd),this.events.listen(this.host,"submit",this.handleSubmit)}hostDisconnected(){r.openModals.remove(this)}block(){var t;null===(t=r.openModals.top)||void 0===t||t.focusTrap.release(),r.openModals.push(this),this.scrollBar.lockScroll(),this.trigger=document.activeElement;(this.host.querySelector("[autofocus]")||this.host).focus(),this.focusTrap.trap()}unblock(){var t,s;r.openModals.top===this&&(r.openModals.pop(),this.options.backdrop().scrollTop=0,this.focusTrap.release(),null===(t=this.trigger)||void 0===t||t.focus(),this.trigger=void 0,null===(s=r.openModals.top)||void 0===s||s.focusTrap.trap())}}r.openModals=new class{constructor(){this.items=[]}get length(){return this.items.length}get top(){return this.items[this.length-1]}push(t){this.items.push(t)}pop(){return this.items.pop()}remove(t){const s=this.items.indexOf(t);-1!==s&&this.items.splice(s,1)}};export{r as ModalController};
|
|
1
|
+
import{E as t}from"./EventController-BBOmvfLa.js";import{L as s}from"./LightDismissController-4pH8cdko.js";import{S as i}from"./ScrollbarController-BFC67Y2x.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";function e(t,s){t.forEach((t=>function(t,s){if(s){const s=t.getAttribute("inert");null!==s&&t.setAttribute("data-n-inert",s),t.setAttribute("inert","")}else{const s=t.getAttribute("data-n-inert");null!==s?(t.setAttribute("inert",s),t.removeAttribute("data-n-inert")):t.removeAttribute("inert")}}(t,s)))}function o(t){const s=[];let i=t.nextElementSibling;for(;i;)s.push(i),i=i.nextElementSibling;for(i=t.previousElementSibling;i;)s.push(i),i=i.previousElementSibling;return t.parentElement&&t.parentElement!==document.body&&s.push(...o(t.parentElement)),s}class n{constructor(t){this.host=t,this.inertElements=[],t.addController(this)}hostDisconnected(){this.release()}trap(){const t=o(this.host);e(t,!0),this.inertElements=t}release(){e(this.inertElements,!1),this.inertElements=[]}}class r{constructor(e,o){this.host=e,this.trackLastButton=t=>{const s=t.target;"button"===s.localName&&(this.lastButton=s)},this.polyfillSubmitter=t=>{t.submitter=this.lastButton},this.handleTransitionEnd=t=>{this.options.isOpen()||t.target!==this.host||this.scrollBar.unlockScroll()},this.handleLightDismiss=t=>{this.host.contains(t.target)&&this.options.isLightDismissEnabled()&&this.options.onDismiss(t)},this.handleSubmit=t=>{this.lastButton=void 0;const s=t.target,i=t.submitter,e="dialog"===s.method,o="dialog"===s.getAttribute("method");o&&!e&&t.preventDefault(),(o||e)&&this.options.close(null==i?void 0:i.value,t)},e.addController(this),this.options=o,this.scrollBar=new i(e),this.focusTrap=new n(e),this.events=new t(e),this.lightDismiss=new s(e,{isOpen:o.isOpen,isDismissible:t=>t!==o.dialog(),onDismiss:this.handleLightDismiss})}hostConnected(){window.SubmitEvent||(this.events.listen(this.host,"click",this.trackLastButton,!0),this.events.listen(this.host,"submit",this.polyfillSubmitter,!0)),this.events.listen(this.host,"transitionend",this.handleTransitionEnd),this.events.listen(this.host,"submit",this.handleSubmit)}hostDisconnected(){r.openModals.remove(this)}block(){var t;null===(t=r.openModals.top)||void 0===t||t.focusTrap.release(),r.openModals.push(this),this.scrollBar.lockScroll(),this.trigger=document.activeElement;(this.host.querySelector("[autofocus]")||this.host).focus(),this.focusTrap.trap()}unblock(){var t,s;r.openModals.top===this&&(r.openModals.pop(),this.options.backdrop().scrollTop=0,this.focusTrap.release(),null===(t=this.trigger)||void 0===t||t.focus(),this.trigger=void 0,null===(s=r.openModals.top)||void 0===s||s.focusTrap.trap())}}r.openModals=new class{constructor(){this.items=[]}get length(){return this.items.length}get top(){return this.items[this.length-1]}push(t){this.items.push(t)}pop(){return this.items.pop()}remove(t){const s=this.items.indexOf(t);-1!==s&&this.items.splice(s,1)}};export{r as ModalController};
|
|
2
2
|
//# sourceMappingURL=ModalController.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalController.js","sources":["../src/common/inert.ts","../src/common/controllers/FocusTrapController.ts","../src/modal/ModalController.ts"],"sourcesContent":["/**\n * Set or remove the `inert` attribute on an element.\n *\n * @param element The element to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n */\nfunction setInertAttribute(element: Element, enabled: boolean) {\n if (enabled) {\n const current = element.getAttribute('inert')\n\n // store previous value\n if (current !== null) {\n element.setAttribute('data-n-inert', current)\n }\n\n element.setAttribute('inert', '')\n }\n else {\n const current = element.getAttribute('data-n-inert')\n\n // restore previous value if necessary\n if (current !== null) {\n element.setAttribute('inert', current)\n element.removeAttribute('data-n-inert')\n }\n else {\n element.removeAttribute('inert')\n }\n }\n}\n\n/**\n * Set or remove the `inert` attribute on all given elements.\n *\n * @param elements The elements to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n */\nexport function setInertAttributes(elements: Element[], enabled: boolean) {\n elements.forEach(element => setInertAttribute(element, enabled))\n}\n\n/**\n * Get all siblings of an element, including the siblings of its parents.\n * Use this to find all elements that should be inert when a modal is open.\n * And then use `setInertAttributes` to set or remove the `inert` attribute\n * on all of them.\n */\nexport function getElementsAround(element: Element): Element[] {\n const elements = []\n let next = element.nextElementSibling\n\n while (next) {\n elements.push(next)\n next = next.nextElementSibling\n }\n\n next = element.previousElementSibling\n\n while (next) {\n elements.push(next)\n next = next.previousElementSibling\n }\n\n if (element.parentElement && element.parentElement !== document.body) {\n elements.push(...getElementsAround(element.parentElement))\n }\n\n return elements\n}\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { getElementsAround, setInertAttributes } from '../../common/inert.js'\n\nexport class FocusTrapController implements ReactiveController {\n private inertElements: Element[] = []\n\n constructor(private host: ReactiveControllerHost & HTMLElement) {\n host.addController(this)\n }\n\n hostDisconnected() {\n this.release()\n }\n\n trap() {\n const elements = getElementsAround(this.host)\n\n setInertAttributes(elements, true)\n this.inertElements = elements\n }\n\n release() {\n setInertAttributes(this.inertElements, false)\n this.inertElements = []\n }\n}\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type { LightDismissOptions } from '../common/controllers/LightDismissController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { FocusTrapController } from '../common/controllers/FocusTrapController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { ScrollbarController } from '../common/controllers/ScrollbarController.js'\n\nclass Stack<T> {\n private items: T[] = []\n\n get length() {\n return this.items.length\n }\n\n get top(): T | undefined {\n return this.items[this.length - 1]\n }\n\n push(item: T) {\n this.items.push(item)\n }\n\n pop() {\n return this.items.pop()\n }\n\n remove(item: T) {\n const index = this.items.indexOf(item)\n\n if (index !== -1) {\n this.items.splice(index, 1)\n }\n }\n}\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === 'button'\n\ninterface ModalControllerOptions {\n isOpen: LightDismissOptions['isOpen']\n onDismiss: (trigger: Event) => void\n close: (returnValue?: string, trigger?: Event) => void\n backdrop: () => HTMLElement\n dialog: () => HTMLElement\n}\n\nexport class ModalController implements ReactiveController {\n private static openModals = new Stack<ModalController>()\n\n private scrollBar: ScrollbarController\n private focusTrap: FocusTrapController\n private lightDismiss: LightDismissController\n private events: EventController\n private options: ModalControllerOptions\n\n private trigger?: HTMLElement\n private lastButton?: HTMLButtonElement\n\n constructor(\n private host: ReactiveControllerHost & HTMLElement,\n options: ModalControllerOptions,\n ) {\n host.addController(this)\n this.options = options\n\n this.scrollBar = new ScrollbarController(host)\n this.focusTrap = new FocusTrapController(host)\n this.events = new EventController(host)\n this.lightDismiss = new LightDismissController(host, {\n isOpen: options.isOpen,\n isDismissible: node => node !== options.dialog(),\n onDismiss: this.handleLightDismiss,\n })\n }\n\n hostConnected() {\n // if submit event is not supported, let's do a basic polyfill\n if (!window.SubmitEvent) {\n this.events.listen(this.host, 'click', this.trackLastButton, true)\n this.events.listen(this.host, 'submit', this.polyfillSubmitter, true)\n }\n\n this.events.listen(this.host, 'transitionend', this.handleTransitionEnd)\n this.events.listen(this.host, 'submit', this.handleSubmit)\n }\n\n hostDisconnected(): void {\n ModalController.openModals.remove(this)\n }\n\n block() {\n // if there is already a modal open, release its focus trap\n ModalController.openModals.top?.focusTrap.release()\n\n // add this modal to the stack of open modals\n ModalController.openModals.push(this)\n\n // hide scrollbar and prevent scroll on body\n this.scrollBar.lockScroll()\n\n // store the element that was focused prior to modal opening\n this.trigger = document.activeElement as HTMLElement\n\n // handle initial (auto)focus\n const focusTarget = this.host.querySelector<HTMLElement>('[autofocus]') || this.host\n focusTarget.focus()\n\n // finally, we should enable the focus trap\n this.focusTrap.trap()\n }\n\n unblock() {\n // it does not make sense to unblock a modal if it is not the top-most modal\n if (ModalController.openModals.top !== this) {\n return\n }\n\n ModalController.openModals.pop()\n\n // ensure modal is scrolled to top ready for re-open\n this.options.backdrop().scrollTop = 0\n\n // we need to release the focus trap...\n this.focusTrap.release()\n\n // ...before we can return focus to the trigger\n this.trigger?.focus()\n this.trigger = undefined\n\n // if there are still modals open, enable the next modal's focus trap\n ModalController.openModals.top?.focusTrap.trap()\n }\n\n /**\n * capture the last button clicked, so that we can polyfill `submitter` property in submit event\n */\n private trackLastButton = (e: Event) => {\n const target = e.target as HTMLElement\n\n if (isButton(target)) {\n this.lastButton = target\n }\n }\n\n private polyfillSubmitter = (e: Event) => {\n // @ts-expect-error submitter is readonly, but this is only called if SubmitEvent is not supported\n e.submitter = this.lastButton\n }\n\n private handleTransitionEnd = (e: TransitionEvent) => {\n // scrollbar should only be restored when the modal has transitioned,\n // that way we avoid awkward double scrollbars.\n if (!this.options.isOpen() && e.target === this.host) {\n this.scrollBar.unlockScroll()\n }\n }\n\n private handleLightDismiss = (trigger: Event) => {\n if (this.host.contains(trigger.target as Node)) {\n this.options.onDismiss(trigger)\n }\n }\n\n private handleSubmit = (e: SubmitEvent) => {\n this.lastButton = undefined\n\n const target = e.target as HTMLFormElement\n const submitter = e.submitter as HTMLButtonElement\n\n const isDialogProperty = target.method === 'dialog'\n const isDialogAttr = target.getAttribute('method') === 'dialog'\n\n // if they mismatch, it means \"dialog\" method is not supported,\n // so we should polyfill the fact it does not do a full submit\n if (isDialogAttr && !isDialogProperty) {\n e.preventDefault()\n }\n\n if (isDialogAttr || isDialogProperty) {\n this.options.close(submitter?.value, e)\n }\n }\n}\n"],"names":["setInertAttributes","elements","enabled","forEach","element","current","getAttribute","setAttribute","removeAttribute","setInertAttribute","getElementsAround","next","nextElementSibling","push","previousElementSibling","parentElement","document","body","FocusTrapController","constructor","host","this","inertElements","addController","hostDisconnected","release","trap","ModalController","options","trackLastButton","e","target","localName","lastButton","polyfillSubmitter","submitter","handleTransitionEnd","isOpen","scrollBar","unlockScroll","handleLightDismiss","trigger","contains","onDismiss","handleSubmit","undefined","isDialogProperty","method","isDialogAttr","preventDefault","close","value","ScrollbarController","focusTrap","events","EventController","lightDismiss","LightDismissController","isDismissible","node","dialog","hostConnected","window","SubmitEvent","listen","openModals","remove","block","_a","top","lockScroll","activeElement","querySelector","focus","unblock","pop","backdrop","scrollTop","_b","items","length","item","index","indexOf","splice"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ModalController.js","sources":["../src/common/inert.ts","../src/common/controllers/FocusTrapController.ts","../src/modal/ModalController.ts"],"sourcesContent":["/**\n * Set or remove the `inert` attribute on an element.\n *\n * @param element The element to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n */\nfunction setInertAttribute(element: Element, enabled: boolean) {\n if (enabled) {\n const current = element.getAttribute('inert')\n\n // store previous value\n if (current !== null) {\n element.setAttribute('data-n-inert', current)\n }\n\n element.setAttribute('inert', '')\n }\n else {\n const current = element.getAttribute('data-n-inert')\n\n // restore previous value if necessary\n if (current !== null) {\n element.setAttribute('inert', current)\n element.removeAttribute('data-n-inert')\n }\n else {\n element.removeAttribute('inert')\n }\n }\n}\n\n/**\n * Set or remove the `inert` attribute on all given elements.\n *\n * @param elements The elements to set or remove the `inert` attribute on.\n * @param enabled Whether to set or remove the `inert` attribute.\n */\nexport function setInertAttributes(elements: Element[], enabled: boolean) {\n elements.forEach(element => setInertAttribute(element, enabled))\n}\n\n/**\n * Get all siblings of an element, including the siblings of its parents.\n * Use this to find all elements that should be inert when a modal is open.\n * And then use `setInertAttributes` to set or remove the `inert` attribute\n * on all of them.\n */\nexport function getElementsAround(element: Element): Element[] {\n const elements = []\n let next = element.nextElementSibling\n\n while (next) {\n elements.push(next)\n next = next.nextElementSibling\n }\n\n next = element.previousElementSibling\n\n while (next) {\n elements.push(next)\n next = next.previousElementSibling\n }\n\n if (element.parentElement && element.parentElement !== document.body) {\n elements.push(...getElementsAround(element.parentElement))\n }\n\n return elements\n}\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { getElementsAround, setInertAttributes } from '../../common/inert.js'\n\nexport class FocusTrapController implements ReactiveController {\n private inertElements: Element[] = []\n\n constructor(private host: ReactiveControllerHost & HTMLElement) {\n host.addController(this)\n }\n\n hostDisconnected() {\n this.release()\n }\n\n trap() {\n const elements = getElementsAround(this.host)\n\n setInertAttributes(elements, true)\n this.inertElements = elements\n }\n\n release() {\n setInertAttributes(this.inertElements, false)\n this.inertElements = []\n }\n}\n","import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type { LightDismissOptions } from '../common/controllers/LightDismissController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { FocusTrapController } from '../common/controllers/FocusTrapController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { ScrollbarController } from '../common/controllers/ScrollbarController.js'\n\nclass Stack<T> {\n private items: T[] = []\n\n get length() {\n return this.items.length\n }\n\n get top(): T | undefined {\n return this.items[this.length - 1]\n }\n\n push(item: T) {\n this.items.push(item)\n }\n\n pop() {\n return this.items.pop()\n }\n\n remove(item: T) {\n const index = this.items.indexOf(item)\n\n if (index !== -1) {\n this.items.splice(index, 1)\n }\n }\n}\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === 'button'\n\ninterface ModalControllerOptions {\n isOpen: LightDismissOptions['isOpen']\n onDismiss: (trigger: Event) => void\n close: (returnValue?: string, trigger?: Event) => void\n isLightDismissEnabled: () => boolean\n backdrop: () => HTMLElement\n dialog: () => HTMLElement\n}\n\nexport class ModalController implements ReactiveController {\n private static openModals = new Stack<ModalController>()\n\n private scrollBar: ScrollbarController\n private focusTrap: FocusTrapController\n private lightDismiss: LightDismissController\n private events: EventController\n private options: ModalControllerOptions\n\n private trigger?: HTMLElement\n private lastButton?: HTMLButtonElement\n\n constructor(\n private host: ReactiveControllerHost & HTMLElement,\n options: ModalControllerOptions,\n ) {\n host.addController(this)\n this.options = options\n\n this.scrollBar = new ScrollbarController(host)\n this.focusTrap = new FocusTrapController(host)\n this.events = new EventController(host)\n this.lightDismiss = new LightDismissController(host, {\n isOpen: options.isOpen,\n isDismissible: node => node !== options.dialog(),\n onDismiss: this.handleLightDismiss,\n })\n }\n\n hostConnected() {\n // if submit event is not supported, let's do a basic polyfill\n if (!window.SubmitEvent) {\n this.events.listen(this.host, 'click', this.trackLastButton, true)\n this.events.listen(this.host, 'submit', this.polyfillSubmitter, true)\n }\n\n this.events.listen(this.host, 'transitionend', this.handleTransitionEnd)\n this.events.listen(this.host, 'submit', this.handleSubmit)\n }\n\n hostDisconnected(): void {\n ModalController.openModals.remove(this)\n }\n\n block() {\n // if there is already a modal open, release its focus trap\n ModalController.openModals.top?.focusTrap.release()\n\n // add this modal to the stack of open modals\n ModalController.openModals.push(this)\n\n // hide scrollbar and prevent scroll on body\n this.scrollBar.lockScroll()\n\n // store the element that was focused prior to modal opening\n this.trigger = document.activeElement as HTMLElement\n\n // handle initial (auto)focus\n const focusTarget = this.host.querySelector<HTMLElement>('[autofocus]') || this.host\n focusTarget.focus()\n\n // finally, we should enable the focus trap\n this.focusTrap.trap()\n }\n\n unblock() {\n // it does not make sense to unblock a modal if it is not the top-most modal\n if (ModalController.openModals.top !== this) {\n return\n }\n\n ModalController.openModals.pop()\n\n // ensure modal is scrolled to top ready for re-open\n this.options.backdrop().scrollTop = 0\n\n // we need to release the focus trap...\n this.focusTrap.release()\n\n // ...before we can return focus to the trigger\n this.trigger?.focus()\n this.trigger = undefined\n\n // if there are still modals open, enable the next modal's focus trap\n ModalController.openModals.top?.focusTrap.trap()\n }\n\n /**\n * capture the last button clicked, so that we can polyfill `submitter` property in submit event\n */\n private trackLastButton = (e: Event) => {\n const target = e.target as HTMLElement\n\n if (isButton(target)) {\n this.lastButton = target\n }\n }\n\n private polyfillSubmitter = (e: Event) => {\n // @ts-expect-error submitter is readonly, but this is only called if SubmitEvent is not supported\n e.submitter = this.lastButton\n }\n\n private handleTransitionEnd = (e: TransitionEvent) => {\n // scrollbar should only be restored when the modal has transitioned,\n // that way we avoid awkward double scrollbars.\n if (!this.options.isOpen() && e.target === this.host) {\n this.scrollBar.unlockScroll()\n }\n }\n\n private handleLightDismiss = (trigger: Event) => {\n if (this.host.contains(trigger.target as Node) && this.options.isLightDismissEnabled()) {\n this.options.onDismiss(trigger)\n }\n }\n\n private handleSubmit = (e: SubmitEvent) => {\n this.lastButton = undefined\n\n const target = e.target as HTMLFormElement\n const submitter = e.submitter as HTMLButtonElement\n\n const isDialogProperty = target.method === 'dialog'\n const isDialogAttr = target.getAttribute('method') === 'dialog'\n\n // if they mismatch, it means \"dialog\" method is not supported,\n // so we should polyfill the fact it does not do a full submit\n if (isDialogAttr && !isDialogProperty) {\n e.preventDefault()\n }\n\n if (isDialogAttr || isDialogProperty) {\n this.options.close(submitter?.value, e)\n }\n }\n}\n"],"names":["setInertAttributes","elements","enabled","forEach","element","current","getAttribute","setAttribute","removeAttribute","setInertAttribute","getElementsAround","next","nextElementSibling","push","previousElementSibling","parentElement","document","body","FocusTrapController","constructor","host","this","inertElements","addController","hostDisconnected","release","trap","ModalController","options","trackLastButton","e","target","localName","lastButton","polyfillSubmitter","submitter","handleTransitionEnd","isOpen","scrollBar","unlockScroll","handleLightDismiss","trigger","contains","isLightDismissEnabled","onDismiss","handleSubmit","undefined","isDialogProperty","method","isDialogAttr","preventDefault","close","value","ScrollbarController","focusTrap","events","EventController","lightDismiss","LightDismissController","isDismissible","node","dialog","hostConnected","window","SubmitEvent","listen","openModals","remove","block","_a","top","lockScroll","activeElement","querySelector","focus","unblock","pop","backdrop","scrollTop","_b","items","length","item","index","indexOf","splice"],"mappings":"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"}
|