npm - @quartzds/core - Versions diffs - 1.0.0-beta.12 → 1.0.0-beta.13 - Mend

@quartzds/core 1.0.0-beta.12 → 1.0.0-beta.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/components/qds-dialog.js +1 -1
package/components/qds-dialog.js.map +1 -1
package/components/qds-dropdown.js +2 -2
package/components/qds-dropdown.js.map +1 -1
package/dist/cjs/qds-dialog.cjs.entry.js +1 -1
package/dist/cjs/qds-dialog.cjs.entry.js.map +1 -1
package/dist/cjs/qds-dropdown.cjs.entry.js +2 -2
package/dist/cjs/qds-dropdown.cjs.entry.js.map +1 -1
package/dist/custom-elements.json +2 -2
package/dist/docs.json +2 -2
package/dist/esm/qds-dialog.entry.js +1 -1
package/dist/esm/qds-dialog.entry.js.map +1 -1
package/dist/esm/qds-dropdown.entry.js +2 -2
package/dist/esm/qds-dropdown.entry.js.map +1 -1
package/dist/types/components/dialog/dialog.d.ts +1 -1
package/dist/types/components/dropdown/dropdown.d.ts +1 -1
package/dist/types/components.d.ts +2 -2
package/dist/vscode.html-custom-data.json +1 -1
package/hydrate/index.js +3 -3
package/package.json +1 -1

package/components/qds-dialog.js CHANGED Viewed

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as ignorePromise, a as invariant, i as inheritAriaAttributes } from './helpers.js';
-const dialogCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:contents}.dialog{border-radius:var(--qds-popup-border-radius);border:none;box-shadow:var(--qds-theme-popup-elevation);padding:0}.dialog::backdrop{background:transparent none repeat 0 0 / auto auto padding-box border-box scroll;background:initial}.dialog[open]~.backdrop{-webkit-backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));background-color:var(--qds-theme-popup-overlay-background);inset:0;opacity:var(--qds-theme-popup-overlay-opacity);position:fixed}.content{align-items:flex-start;background-color:var(--qds-theme-popup-background);display:flex;flex-direction:column;gap:var(--qds-popup-gap-children-related);padding:var(--qds-popup-padding)}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}";
+const dialogCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:none;position:fixed;inset:0}:host([open]){display:block}.dialog{border-radius:var(--qds-popup-border-radius);border:none;box-shadow:var(--qds-theme-popup-elevation);padding:0}.dialog::backdrop{background:transparent none repeat 0 0 / auto auto padding-box border-box scroll;background:initial}.dialog[open]~.backdrop{-webkit-backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));background-color:var(--qds-theme-popup-overlay-background);inset:0;opacity:var(--qds-theme-popup-overlay-opacity);position:fixed}.content{align-items:flex-start;background-color:var(--qds-theme-popup-background);display:flex;flex-direction:column;gap:var(--qds-popup-gap-children-related);padding:var(--qds-popup-padding)}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}";
 const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement {
   constructor() {

package/components/qds-dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-dialog.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG~~,+rCAA+rC~~;;~~MC8BpsC~~,MAAM;;;;;;;IA8BT,wBAAmB,GAAe,EAAE,CAAA;IA6E3B,gBAAW,GAAG,CAAC,KAAY;MAC1C,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;KACxC,CAAA;IAEgB,aAAQ,GAAG,CAAC,KAAY;MACvC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,gBAAgB;QAAE,KAAK,CAAC,cAAc,EAAE,CAAA;KACvE,CAAA;IAEgB,YAAO,GAAG;MACzB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;MAEtB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;MACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;KAC7B,CAAA;IAEgB,QAAG,GAAG,CAAC,MAA0B;MAChD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;KACrB,CAAA;gBAtHqD,KAAK;;;;;;;;;EAoCpD,MAAM,IAAI;IACf,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAA;IACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;GAC7B;;;;EAMM,MAAM,KAAK;IAChB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;GACpB;EAGS,MAAM,WAAW;IACzB,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;GAC/C;EAEM,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM,gBAAgB;IAC3B,IAAI,IAAI,CAAC,IAAI;MAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;GACjC;EAEM,MAAM;IACX,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,WAAW,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAEjB,IAAI,CAAC,mBAAmB,IAE5B,WAAK,KAAK,EAAC,SAAS,IAClB,eAAQ,CACJ,CACC,EACT,WAAK,KAAK,EAAC,UAAU,GAAG,CACnB,EACR;GACF;EAEO,MAAM,YAAY,CAAC,KAAY;IACrC,IACE,CAAC,KAAK,YAAY,WAAW;OAC1B,KAAK,CAAC,SAAS,YAAY,iBAAiB;SAC1C,KAAK,CAAC,SAAS,YAAY,gBAAgB;UAC1C,KAAK,CAAC,SAAS,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;OAC9C,KAAK,CAAC,MAAM,YAAY,eAAe;QACtC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,QAAQ,CAAC,EACnC;MACA,KAAK,CAAC,cAAc,EAAE,CAAA;MACtB,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACnB;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dialog/dialog.css?tag=qds-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2023 Schneider Electric\n \n SPDX-License-Identifier: LGPL-2.1-only\n /\n\n@import url('../shared.css');\n\n:host {\n display: ~~contents~~;\n}\n\n.dialog {\n border-radius: var(--qds-popup-border-radius);\n border: none;\n box-shadow: var(--qds-theme-popup-elevation);\n padding: 0;\n\n &::backdrop {\n background: initial;\n }\n\n &[open] ~ .backdrop {\n backdrop-filter: blur(var(--qds-theme-popup-overlay-blur));\n background-color: var(--qds-theme-popup-overlay-background);\n inset: 0;\n opacity: var(--qds-theme-popup-overlay-opacity);\n position: fixed;\n }\n}\n\n.content {\n align-items: flex-start;\n background-color: var(--qds-theme-popup-background);\n display: flex;\n flex-direction: column;\n gap: var(--qds-popup-gap-children-related);\n padding: var(--qds-popup-padding);\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { ignorePromise, inheritAriaAttributes, invariant } from '../../helpers'\n\n/\n The `<qds-dialog>` element represent a dialog box or other interactive\n * component, such as a dismissible alert, inspector, or subwindow.\n \n @see https://quartz.se.com/build/components/dialog\n /\n@Component({\n tag: 'qds-dialog',\n shadow: true,\n styleUrl: 'dialog.css',\n})\nexport class Dialog implements ComponentInterface {\n /\n Indicates whether or not the dialog is open. You can toggle this attribute\n * to show and hide the dialog, or you can use the `show()` and `~~hide~~()`\n * methods and this attribute will reflect the dialog’s open state.\n /\n @Prop({ mutable: true, reflect: true }) public open = false\n\n @Element() private readonly element!: HTMLQdsDialogElement\n\n /\n Emitted when the user instructs the browser that they wish to dismiss the\n * currently open dialog. The browser fires this event when the user presses\n * the `Esc` key.\n \n When a dialog is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are fired.\n /\n @Event({ eventName: 'qdsCancel', bubbles: false, composed: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /* Emitted when the dialog has been closed. /\n @Event({\n eventName: 'qdsClose',\n bubbles: false,\n cancelable: false,\n composed: false,\n })\n private readonly closeEmitter!: EventEmitter<void>\n\n private inheritedAttributes: Attributes = {}\n\n private dialog?: HTMLDialogElement\n\n /\n Displays the dialog over the top of any other dialogs that might be\n * present. Everything outside of the dialog is [inert][] with interactions\n * outside of the dialog being blocked.\n \n [inert]: https://developer.mozilla.org/docs/Web/API/HTMLElement/inert\n /\n @Method()\n public async show(): Promise<void> {\n invariant(this.dialog)\n\n this.dialog.showModal()\n this.open = this.dialog.open\n }\n\n /\n Closes the dialog.\n */\n @Method()\n public async close(): Promise<void> {\n invariant(this.dialog)\n\n this.dialog.close()\n }\n\n @Watch('open')\n protected async openChanged(): Promise<void> {\n await (this.open ? this.show() : this.close())\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public async componentDidLoad(): Promise<void> {\n if (this.open) await this.show()\n }\n\n public render() {\n return (\n <Host>\n <dialog\n class=\"dialog\"\n ref={this.ref}\n onSubmit={this.boundSubmit}\n onCancel={this.onCancel}\n onClose={this.onClose}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <div class=\"content\">\n <slot />\n </div>\n </dialog>\n <div class=\"backdrop\" />\n </Host>\n )\n }\n\n private async handleSubmit(event: Event): Promise<void> {\n if (\n (event instanceof SubmitEvent &&\n (event.submitter instanceof HTMLButtonElement \|\|\n (event.submitter instanceof HTMLInputElement &&\n event.submitter.formMethod === 'dialog'))) \|\|\n (event.target instanceof HTMLFormElement &&\n event.target.method === 'dialog')\n ) {\n event.preventDefault()\n await this.close()\n }\n }\n\n private readonly boundSubmit = (event: Event): void => {\n ignorePromise(this.handleSubmit(event))\n }\n\n private readonly onCancel = (event: Event): void => {\n if (this.cancelEmitter.emit().defaultPrevented) event.preventDefault()\n }\n\n private readonly onClose = (): void => {\n invariant(this.dialog)\n\n this.closeEmitter.emit()\n this.open = this.dialog.open\n }\n\n private readonly ref = (dialog?: HTMLDialogElement): void => {\n this.dialog = dialog\n }\n}\n"],"version":3}
1	+ {"file":"qds-dialog.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,8uCAA8uC;;MC8BnvC,MAAM;;;;;;;IA8BT,wBAAmB,GAAe,EAAE,CAAA;IA6E3B,gBAAW,GAAG,CAAC,KAAY;MAC1C,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;KACxC,CAAA;IAEgB,aAAQ,GAAG,CAAC,KAAY;MACvC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,gBAAgB;QAAE,KAAK,CAAC,cAAc,EAAE,CAAA;KACvE,CAAA;IAEgB,YAAO,GAAG;MACzB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;MAEtB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;MACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;KAC7B,CAAA;IAEgB,QAAG,GAAG,CAAC,MAA0B;MAChD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;KACrB,CAAA;gBAtHqD,KAAK;;;;;;;;;EAoCpD,MAAM,IAAI;IACf,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAA;IACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;GAC7B;;;;EAMM,MAAM,KAAK;IAChB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;GACpB;EAGS,MAAM,WAAW;IACzB,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;GAC/C;EAEM,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM,gBAAgB;IAC3B,IAAI,IAAI,CAAC,IAAI;MAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;GACjC;EAEM,MAAM;IACX,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,WAAW,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAEjB,IAAI,CAAC,mBAAmB,IAE5B,WAAK,KAAK,EAAC,SAAS,IAClB,eAAQ,CACJ,CACC,EACT,WAAK,KAAK,EAAC,UAAU,GAAG,CACnB,EACR;GACF;EAEO,MAAM,YAAY,CAAC,KAAY;IACrC,IACE,CAAC,KAAK,YAAY,WAAW;OAC1B,KAAK,CAAC,SAAS,YAAY,iBAAiB;SAC1C,KAAK,CAAC,SAAS,YAAY,gBAAgB;UAC1C,KAAK,CAAC,SAAS,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;OAC9C,KAAK,CAAC,MAAM,YAAY,eAAe;QACtC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,QAAQ,CAAC,EACnC;MACA,KAAK,CAAC,cAAc,EAAE,CAAA;MACtB,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACnB;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dialog/dialog.css?tag=qds-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2023 Schneider Electric\n \n SPDX-License-Identifier: LGPL-2.1-only\n /\n\n@import url('../shared.css');\n\n:host {\n display: none;\n position: fixed;\n inset: 0;\n}\n\n:host([open]) {\n display: block;\n}\n\n.dialog {\n border-radius: var(--qds-popup-border-radius);\n border: none;\n box-shadow: var(--qds-theme-popup-elevation);\n padding: 0;\n\n &::backdrop {\n background: initial;\n }\n\n &[open] ~ .backdrop {\n backdrop-filter: blur(var(--qds-theme-popup-overlay-blur));\n background-color: var(--qds-theme-popup-overlay-background);\n inset: 0;\n opacity: var(--qds-theme-popup-overlay-opacity);\n position: fixed;\n }\n}\n\n.content {\n align-items: flex-start;\n background-color: var(--qds-theme-popup-background);\n display: flex;\n flex-direction: column;\n gap: var(--qds-popup-gap-children-related);\n padding: var(--qds-popup-padding);\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { ignorePromise, inheritAriaAttributes, invariant } from '../../helpers'\n\n/\n The `<qds-dialog>` element represent a dialog box or other interactive\n * component, such as a dismissible alert, inspector, or subwindow.\n \n @see https://quartz.se.com/build/components/dialog\n /\n@Component({\n tag: 'qds-dialog',\n shadow: true,\n styleUrl: 'dialog.css',\n})\nexport class Dialog implements ComponentInterface {\n /\n Indicates whether or not the dialog is open. You can toggle this attribute\n * to show and hide the dialog, or you can use the `show()` and `close()`\n * methods and this attribute will reflect the dialog’s open state.\n /\n @Prop({ mutable: true, reflect: true }) public open = false\n\n @Element() private readonly element!: HTMLQdsDialogElement\n\n /\n Emitted when the user instructs the browser that they wish to dismiss the\n * currently open dialog. The browser fires this event when the user presses\n * the `Esc` key.\n \n When a dialog is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are fired.\n /\n @Event({ eventName: 'qdsCancel', bubbles: false, composed: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /* Emitted when the dialog has been closed. /\n @Event({\n eventName: 'qdsClose',\n bubbles: false,\n cancelable: false,\n composed: false,\n })\n private readonly closeEmitter!: EventEmitter<void>\n\n private inheritedAttributes: Attributes = {}\n\n private dialog?: HTMLDialogElement\n\n /\n Displays the dialog over the top of any other dialogs that might be\n * present. Everything outside of the dialog is [inert][] with interactions\n * outside of the dialog being blocked.\n \n [inert]: https://developer.mozilla.org/docs/Web/API/HTMLElement/inert\n /\n @Method()\n public async show(): Promise<void> {\n invariant(this.dialog)\n\n this.dialog.showModal()\n this.open = this.dialog.open\n }\n\n /\n Closes the dialog.\n */\n @Method()\n public async close(): Promise<void> {\n invariant(this.dialog)\n\n this.dialog.close()\n }\n\n @Watch('open')\n protected async openChanged(): Promise<void> {\n await (this.open ? this.show() : this.close())\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public async componentDidLoad(): Promise<void> {\n if (this.open) await this.show()\n }\n\n public render() {\n return (\n <Host>\n <dialog\n class=\"dialog\"\n ref={this.ref}\n onSubmit={this.boundSubmit}\n onCancel={this.onCancel}\n onClose={this.onClose}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <div class=\"content\">\n <slot />\n </div>\n </dialog>\n <div class=\"backdrop\" />\n </Host>\n )\n }\n\n private async handleSubmit(event: Event): Promise<void> {\n if (\n (event instanceof SubmitEvent &&\n (event.submitter instanceof HTMLButtonElement \|\|\n (event.submitter instanceof HTMLInputElement &&\n event.submitter.formMethod === 'dialog'))) \|\|\n (event.target instanceof HTMLFormElement &&\n event.target.method === 'dialog')\n ) {\n event.preventDefault()\n await this.close()\n }\n }\n\n private readonly boundSubmit = (event: Event): void => {\n ignorePromise(this.handleSubmit(event))\n }\n\n private readonly onCancel = (event: Event): void => {\n if (this.cancelEmitter.emit().defaultPrevented) event.preventDefault()\n }\n\n private readonly onClose = (): void => {\n invariant(this.dialog)\n\n this.closeEmitter.emit()\n this.open = this.dialog.open\n }\n\n private readonly ref = (dialog?: HTMLDialogElement): void => {\n this.dialog = dialog\n }\n}\n"],"version":3}

package/components/qds-dropdown.js CHANGED Viewed

@@ -19,7 +19,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     this.closeEmitter = createEvent(this, "qdsClose", 2);
     this.open = false;
     this.boundFocusout = (event) => {
-      ignorePromise(this.handleFocusOut(event));
+      ignorePromise(this.handleFocusout(event));
     };
     this.boundEscape = (event) => {
       ignorePromise(this.handleEscape(event));
@@ -167,7 +167,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         transform: this.hostTransform,
       } }, h("slot", null)));
   }
-  async handleFocusOut(event) {
+  async handleFocusout(event) {
     if (!(event instanceof FocusEvent))
       return;
     const { relatedTarget } = event;

package/components/qds-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-dropdown.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.css?tag=qds-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2023 Schneider Electric\n \n SPDX-License-Identifier: LGPL-2.1-only\n /\n\n@import url('../shared.css');\n\n:host {\n background: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n display: inline-block;\n left: 0;\n top: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/\n @experimental\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/dropdown\n /\n@Component({\n tag: 'qds-dropdown',\n shadow: true,\n styleUrl: 'dropdown.css',\n})\nexport class Dropdown implements ComponentInterface {\n /\n Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n \n @see https://floating-ui.com/docs/autoupdate#options\n /\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /\n Prevents the dropdown from being shown by user interaction. The dropdown\n * can still be displayed by calling the `show()` method.\n /\n @Prop({ mutable: true }) public disabled = false\n\n /\n Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n \n The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n \n @see https://floating-ui.com/docs/flip#options\n /\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /\n Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n /\n @Prop() public readonly noFlip: boolean = false\n\n /\n Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n /\n @Prop() public readonly noShift: boolean = false\n\n /\n Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n \n The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n \n @see https://floating-ui.com/docs/offset#options\n /\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /\n Where to place the dropdown relative to the `target`.\n \n @see https://floating-ui.com/docs/tutorial#placements\n /\n @Prop() public readonly placement: Placement = 'bottom-start'\n\n /\n Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n \n @see https://floating-ui.com/docs/shift#options\n /\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /\n The CSS position strategy to use.\n \n @see https://floating-ui.com/docs/computeposition#strategy\n /\n @Prop() public readonly strategy?: Strategy\n\n /\n The trigger element that will trigger the dropdown. The target specified\n * can be any of the follow:\n \n - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n /\n @Prop() public readonly target!:\n \| ReferenceElement\n \| string\n \| (() => ReferenceElement \| string)\n\n /\n Emitted when the user instructs the browser that they wish to dismiss the\n * current open dropdown by pressing the `Esc` key.\n \n When a dropdown is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are emitted.\n /\n @Event({ eventName: 'qdsCancel', bubbles: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /\n Emitted when the dropdown is closed.\n /\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsDropdownElement\n\n @State() private hostAriaLabelledBy?: string\n\n @State() private hostDisplay?: string\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n private cleanup?: () => void\n\n private middleware?: Middleware[]\n\n private referenceElement?: ReferenceElement\n\n private open = false\n\n /\n Show the dropdown.\n /\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element) {\n this.referenceElement.setAttribute('aria-expanded', 'true')\n this.referenceElement.setAttribute('aria-controls', this.element.id)\n }\n\n this.open = true\n this.hostDisplay = undefined\n this.startAutoUpdate()\n }\n\n /\n Close the dropdown.\n /\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n if (this.referenceElement instanceof globalThis.Element) {\n this.referenceElement.setAttribute('aria-expanded', 'false')\n this.referenceElement.removeAttribute('aria-controls')\n }\n\n this.open = false\n this.hostDisplay = 'none'\n if (this.cleanup) this.cleanup()\n\n this.closeEmitter.emit()\n }\n\n /\n Update the dropdown's middleware and position.\n */\n @Method()\n public async update(): Promise<void> {\n await this.updateMiddleware()\n }\n\n @Listen('click', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n if (!this.open) return\n\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) \|\|\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n this.referenceElement.setAttribute('aria-expanded', 'false')\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n this.referenceElement.addEventListener('keydown', this.boundEscape)\n if (this.element.role === 'menu') {\n this.referenceElement.id \|\|= `qds-dropdown-trigger-${autoIncrementingId}`\n this.hostAriaLabelledBy = this.referenceElement.id\n }\n }\n\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n private async updateMiddleware(): Promise<void> {\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis:\n propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n await this.updatePosition()\n }\n\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.referenceElement)\n\n const { x, y, strategy } = await computePosition(\n this.referenceElement,\n this.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.referenceElement)\n\n if (this.cleanup) this.cleanup()\n this.cleanup = autoUpdate(\n this.referenceElement,\n this.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.hostDisplay = 'none'\n this.element.role ??= 'menu'\n this.element.id \|\|= `qds-dropdown-${autoIncrementingId}`\n await this.updateReferenceElement()\n autoIncrementingId += 1\n await this.updateMiddleware()\n }\n\n public disconnectedCallback(): void {\n this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n aria-labelledby={this.hostAriaLabelledBy}\n onKeyDown={this.boundEscape}\n onFocusout={this.boundFocusout}\n style={{\n display: this.hostDisplay,\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n </Host>\n )\n }\n\n private async handleFocusOut(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleEscape(event: Event): Promise<void> {\n if (\n !(event instanceof KeyboardEvent) \|\|\n event.key !== 'Escape' \|\|\n (event.target !== this.referenceElement &&\n event.target instanceof globalThis.Element &&\n event.target.closest('qds-dropdown') !== this.element)\n )\n return\n\n const cancelEvent = this.cancelEmitter.emit()\n if (cancelEvent.defaultPrevented) return\n\n await this.close()\n if (\n this.referenceElement instanceof globalThis.HTMLElement \|\|\n this.referenceElement instanceof globalThis.SVGElement\n )\n this.referenceElement.focus()\n }\n\n private readonly boundEscape = (event: Event): void => {\n ignorePromise(this.handleEscape(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n this.hostAriaLabelledBy = undefined\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n this.referenceElement.removeEventListener('click', this.boundReferenceClick)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener('keydown', this.boundEscape)\n this.referenceElement.removeAttribute('aria-expanded')\n this.referenceElement.removeAttribute('aria-controls')\n }\n}\n"],"version":3}
1	+ {"file":"qds-dropdown.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.css?tag=qds-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2023 Schneider Electric\n \n SPDX-License-Identifier: LGPL-2.1-only\n /\n\n@import url('../shared.css');\n\n:host {\n background: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n display: inline-block;\n left: 0;\n top: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/\n @experimental\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/dropdown\n /\n@Component({\n tag: 'qds-dropdown',\n shadow: true,\n styleUrl: 'dropdown.css',\n})\nexport class Dropdown implements ComponentInterface {\n /\n Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n \n @see https://floating-ui.com/docs/autoupdate#options\n /\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /\n Prevents the dropdown from being shown by user interaction. The dropdown\n * can still be displayed by calling the `show()` method.\n /\n @Prop({ mutable: true }) public disabled = false\n\n /\n Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n \n The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n \n @see https://floating-ui.com/docs/flip#options\n /\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /\n Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n /\n @Prop() public readonly noFlip: boolean = false\n\n /\n Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n /\n @Prop() public readonly noShift: boolean = false\n\n /\n Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n \n The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n \n @see https://floating-ui.com/docs/offset#options\n /\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /\n Where to place the dropdown relative to the `target`.\n \n @see https://floating-ui.com/docs/tutorial#placements\n /\n @Prop() public readonly placement: Placement = 'bottom-start'\n\n /\n Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n \n @see https://floating-ui.com/docs/shift#options\n /\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /\n The CSS position strategy to use.\n \n @see https://floating-ui.com/docs/computeposition#strategy\n /\n @Prop() public readonly strategy?: Strategy\n\n /\n The trigger element that will trigger the dropdown. The target specified\n * can be any of the follow:\n \n - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n /\n @Prop() public readonly target!:\n \| ReferenceElement\n \| string\n \| (() => ReferenceElement \| string)\n\n /\n Emitted when the user instructs the browser that they wish to dismiss the\n * current open dropdown by pressing the `Esc` key.\n \n When a dropdown is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are emitted.\n /\n @Event({ eventName: 'qdsCancel', bubbles: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /\n Emitted when the dropdown is closed.\n /\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsDropdownElement\n\n @State() private hostAriaLabelledBy?: string\n\n @State() private hostDisplay?: string\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n private cleanup?: () => void\n\n private middleware?: Middleware[]\n\n private referenceElement?: ReferenceElement\n\n private open = false\n\n /\n Show the dropdown.\n /\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element) {\n this.referenceElement.setAttribute('aria-expanded', 'true')\n this.referenceElement.setAttribute('aria-controls', this.element.id)\n }\n\n this.open = true\n this.hostDisplay = undefined\n this.startAutoUpdate()\n }\n\n /\n Close the dropdown.\n /\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n if (this.referenceElement instanceof globalThis.Element) {\n this.referenceElement.setAttribute('aria-expanded', 'false')\n this.referenceElement.removeAttribute('aria-controls')\n }\n\n this.open = false\n this.hostDisplay = 'none'\n if (this.cleanup) this.cleanup()\n\n this.closeEmitter.emit()\n }\n\n /\n Update the dropdown's middleware and position.\n */\n @Method()\n public async update(): Promise<void> {\n await this.updateMiddleware()\n }\n\n @Listen('click', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n if (!this.open) return\n\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) \|\|\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n this.referenceElement.setAttribute('aria-expanded', 'false')\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n this.referenceElement.addEventListener('keydown', this.boundEscape)\n if (this.element.role === 'menu') {\n this.referenceElement.id \|\|= `qds-dropdown-trigger-${autoIncrementingId}`\n this.hostAriaLabelledBy = this.referenceElement.id\n }\n }\n\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n private async updateMiddleware(): Promise<void> {\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis:\n propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n await this.updatePosition()\n }\n\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.referenceElement)\n\n const { x, y, strategy } = await computePosition(\n this.referenceElement,\n this.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.referenceElement)\n\n if (this.cleanup) this.cleanup()\n this.cleanup = autoUpdate(\n this.referenceElement,\n this.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.hostDisplay = 'none'\n this.element.role ??= 'menu'\n this.element.id \|\|= `qds-dropdown-${autoIncrementingId}`\n await this.updateReferenceElement()\n autoIncrementingId += 1\n await this.updateMiddleware()\n }\n\n public disconnectedCallback(): void {\n this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n aria-labelledby={this.hostAriaLabelledBy}\n onKeyDown={this.boundEscape}\n onFocusout={this.boundFocusout}\n style={{\n display: this.hostDisplay,\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n </Host>\n )\n }\n\n private async handleFocusout(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusout(event))\n }\n\n private async handleEscape(event: Event): Promise<void> {\n if (\n !(event instanceof KeyboardEvent) \|\|\n event.key !== 'Escape' \|\|\n (event.target !== this.referenceElement &&\n event.target instanceof globalThis.Element &&\n event.target.closest('qds-dropdown') !== this.element)\n )\n return\n\n const cancelEvent = this.cancelEmitter.emit()\n if (cancelEvent.defaultPrevented) return\n\n await this.close()\n if (\n this.referenceElement instanceof globalThis.HTMLElement \|\|\n this.referenceElement instanceof globalThis.SVGElement\n )\n this.referenceElement.focus()\n }\n\n private readonly boundEscape = (event: Event): void => {\n ignorePromise(this.handleEscape(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n this.hostAriaLabelledBy = undefined\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n this.referenceElement.removeEventListener('click', this.boundReferenceClick)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener('keydown', this.boundEscape)\n this.referenceElement.removeAttribute('aria-expanded')\n this.referenceElement.removeAttribute('aria-controls')\n }\n}\n"],"version":3}

package/dist/cjs/qds-dialog.cjs.entry.js CHANGED Viewed

@@ -10,7 +10,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d181f952.js');
 const helpers = require('./helpers-452256e8.js');
-const dialogCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:contents}.dialog{border-radius:var(--qds-popup-border-radius);border:none;box-shadow:var(--qds-theme-popup-elevation);padding:0}.dialog::backdrop{background:transparent none repeat 0 0 / auto auto padding-box border-box scroll;background:initial}.dialog[open]~.backdrop{-webkit-backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));background-color:var(--qds-theme-popup-overlay-background);inset:0;opacity:var(--qds-theme-popup-overlay-opacity);position:fixed}.content{align-items:flex-start;background-color:var(--qds-theme-popup-background);display:flex;flex-direction:column;gap:var(--qds-popup-gap-children-related);padding:var(--qds-popup-padding)}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}";
+const dialogCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:none;position:fixed;inset:0}:host([open]){display:block}.dialog{border-radius:var(--qds-popup-border-radius);border:none;box-shadow:var(--qds-theme-popup-elevation);padding:0}.dialog::backdrop{background:transparent none repeat 0 0 / auto auto padding-box border-box scroll;background:initial}.dialog[open]~.backdrop{-webkit-backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));background-color:var(--qds-theme-popup-overlay-background);inset:0;opacity:var(--qds-theme-popup-overlay-opacity);position:fixed}.content{align-items:flex-start;background-color:var(--qds-theme-popup-background);display:flex;flex-direction:column;gap:var(--qds-popup-gap-children-related);padding:var(--qds-popup-padding)}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}";
 const Dialog = class {
   constructor(hostRef) {

package/dist/cjs/qds-dialog.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-dialog.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG~~,+rCAA+rC~~;;~~MC8BpsC~~,MAAM;;;;;IA8BT,wBAAmB,GAAe,EAAE,CAAA;IA6E3B,gBAAW,GAAG,CAAC,KAAY;MAC1CA,qBAAa,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;KACxC,CAAA;IAEgB,aAAQ,GAAG,CAAC,KAAY;MACvC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,gBAAgB;QAAE,KAAK,CAAC,cAAc,EAAE,CAAA;KACvE,CAAA;IAEgB,YAAO,GAAG;MACzBC,iBAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;MAEtB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;MACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;KAC7B,CAAA;IAEgB,QAAG,GAAG,CAAC,MAA0B;MAChD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;KACrB,CAAA;gBAtHqD,KAAK;;;;;;;;;EAoCpD,MAAM,IAAI;IACfA,iBAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAA;IACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;GAC7B;;;;EAMM,MAAM,KAAK;IAChBA,iBAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;GACpB;EAGS,MAAM,WAAW;IACzB,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;GAC/C;EAEM,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAGC,6BAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM,gBAAgB;IAC3B,IAAI,IAAI,CAAC,IAAI;MAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;GACjC;EAEM,MAAM;IACX,QACEC,QAACC,UAAI,QACHD,oBACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,WAAW,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAEjB,IAAI,CAAC,mBAAmB,IAE5BA,iBAAK,KAAK,EAAC,SAAS,IAClBA,qBAAQ,CACJ,CACC,EACTA,iBAAK,KAAK,EAAC,UAAU,GAAG,CACnB,EACR;GACF;EAEO,MAAM,YAAY,CAAC,KAAY;IACrC,IACE,CAAC,KAAK,YAAY,WAAW;OAC1B,KAAK,CAAC,SAAS,YAAY,iBAAiB;SAC1C,KAAK,CAAC,SAAS,YAAY,gBAAgB;UAC1C,KAAK,CAAC,SAAS,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;OAC9C,KAAK,CAAC,MAAM,YAAY,eAAe;QACtC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,QAAQ,CAAC,EACnC;MACA,KAAK,CAAC,cAAc,EAAE,CAAA;MACtB,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACnB;GACF;;;;;;;;;;","names":["ignorePromise","invariant","inheritAriaAttributes","h","Host"],"sources":["src/components/dialog/dialog.css?tag=qds-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2023 Schneider Electric\n \n SPDX-License-Identifier: LGPL-2.1-only\n /\n\n@import url('../shared.css');\n\n:host {\n display: ~~contents~~;\n}\n\n.dialog {\n border-radius: var(--qds-popup-border-radius);\n border: none;\n box-shadow: var(--qds-theme-popup-elevation);\n padding: 0;\n\n &::backdrop {\n background: initial;\n }\n\n &[open] ~ .backdrop {\n backdrop-filter: blur(var(--qds-theme-popup-overlay-blur));\n background-color: var(--qds-theme-popup-overlay-background);\n inset: 0;\n opacity: var(--qds-theme-popup-overlay-opacity);\n position: fixed;\n }\n}\n\n.content {\n align-items: flex-start;\n background-color: var(--qds-theme-popup-background);\n display: flex;\n flex-direction: column;\n gap: var(--qds-popup-gap-children-related);\n padding: var(--qds-popup-padding);\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { ignorePromise, inheritAriaAttributes, invariant } from '../../helpers'\n\n/\n The `<qds-dialog>` element represent a dialog box or other interactive\n * component, such as a dismissible alert, inspector, or subwindow.\n \n @see https://quartz.se.com/build/components/dialog\n /\n@Component({\n tag: 'qds-dialog',\n shadow: true,\n styleUrl: 'dialog.css',\n})\nexport class Dialog implements ComponentInterface {\n /\n Indicates whether or not the dialog is open. You can toggle this attribute\n * to show and hide the dialog, or you can use the `show()` and `~~hide~~()`\n * methods and this attribute will reflect the dialog’s open state.\n /\n @Prop({ mutable: true, reflect: true }) public open = false\n\n @Element() private readonly element!: HTMLQdsDialogElement\n\n /\n Emitted when the user instructs the browser that they wish to dismiss the\n * currently open dialog. The browser fires this event when the user presses\n * the `Esc` key.\n \n When a dialog is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are fired.\n /\n @Event({ eventName: 'qdsCancel', bubbles: false, composed: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /* Emitted when the dialog has been closed. /\n @Event({\n eventName: 'qdsClose',\n bubbles: false,\n cancelable: false,\n composed: false,\n })\n private readonly closeEmitter!: EventEmitter<void>\n\n private inheritedAttributes: Attributes = {}\n\n private dialog?: HTMLDialogElement\n\n /\n Displays the dialog over the top of any other dialogs that might be\n * present. Everything outside of the dialog is [inert][] with interactions\n * outside of the dialog being blocked.\n \n [inert]: https://developer.mozilla.org/docs/Web/API/HTMLElement/inert\n /\n @Method()\n public async show(): Promise<void> {\n invariant(this.dialog)\n\n this.dialog.showModal()\n this.open = this.dialog.open\n }\n\n /\n Closes the dialog.\n */\n @Method()\n public async close(): Promise<void> {\n invariant(this.dialog)\n\n this.dialog.close()\n }\n\n @Watch('open')\n protected async openChanged(): Promise<void> {\n await (this.open ? this.show() : this.close())\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public async componentDidLoad(): Promise<void> {\n if (this.open) await this.show()\n }\n\n public render() {\n return (\n <Host>\n <dialog\n class=\"dialog\"\n ref={this.ref}\n onSubmit={this.boundSubmit}\n onCancel={this.onCancel}\n onClose={this.onClose}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <div class=\"content\">\n <slot />\n </div>\n </dialog>\n <div class=\"backdrop\" />\n </Host>\n )\n }\n\n private async handleSubmit(event: Event): Promise<void> {\n if (\n (event instanceof SubmitEvent &&\n (event.submitter instanceof HTMLButtonElement \|\|\n (event.submitter instanceof HTMLInputElement &&\n event.submitter.formMethod === 'dialog'))) \|\|\n (event.target instanceof HTMLFormElement &&\n event.target.method === 'dialog')\n ) {\n event.preventDefault()\n await this.close()\n }\n }\n\n private readonly boundSubmit = (event: Event): void => {\n ignorePromise(this.handleSubmit(event))\n }\n\n private readonly onCancel = (event: Event): void => {\n if (this.cancelEmitter.emit().defaultPrevented) event.preventDefault()\n }\n\n private readonly onClose = (): void => {\n invariant(this.dialog)\n\n this.closeEmitter.emit()\n this.open = this.dialog.open\n }\n\n private readonly ref = (dialog?: HTMLDialogElement): void => {\n this.dialog = dialog\n }\n}\n"],"version":3}
1	+ {"file":"qds-dialog.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,8uCAA8uC;;MC8BnvC,MAAM;;;;;IA8BT,wBAAmB,GAAe,EAAE,CAAA;IA6E3B,gBAAW,GAAG,CAAC,KAAY;MAC1CA,qBAAa,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;KACxC,CAAA;IAEgB,aAAQ,GAAG,CAAC,KAAY;MACvC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,gBAAgB;QAAE,KAAK,CAAC,cAAc,EAAE,CAAA;KACvE,CAAA;IAEgB,YAAO,GAAG;MACzBC,iBAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;MAEtB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;MACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;KAC7B,CAAA;IAEgB,QAAG,GAAG,CAAC,MAA0B;MAChD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;KACrB,CAAA;gBAtHqD,KAAK;;;;;;;;;EAoCpD,MAAM,IAAI;IACfA,iBAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAA;IACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;GAC7B;;;;EAMM,MAAM,KAAK;IAChBA,iBAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;GACpB;EAGS,MAAM,WAAW;IACzB,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;GAC/C;EAEM,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAGC,6BAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM,gBAAgB;IAC3B,IAAI,IAAI,CAAC,IAAI;MAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;GACjC;EAEM,MAAM;IACX,QACEC,QAACC,UAAI,QACHD,oBACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,WAAW,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAEjB,IAAI,CAAC,mBAAmB,IAE5BA,iBAAK,KAAK,EAAC,SAAS,IAClBA,qBAAQ,CACJ,CACC,EACTA,iBAAK,KAAK,EAAC,UAAU,GAAG,CACnB,EACR;GACF;EAEO,MAAM,YAAY,CAAC,KAAY;IACrC,IACE,CAAC,KAAK,YAAY,WAAW;OAC1B,KAAK,CAAC,SAAS,YAAY,iBAAiB;SAC1C,KAAK,CAAC,SAAS,YAAY,gBAAgB;UAC1C,KAAK,CAAC,SAAS,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;OAC9C,KAAK,CAAC,MAAM,YAAY,eAAe;QACtC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,QAAQ,CAAC,EACnC;MACA,KAAK,CAAC,cAAc,EAAE,CAAA;MACtB,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACnB;GACF;;;;;;;;;;","names":["ignorePromise","invariant","inheritAriaAttributes","h","Host"],"sources":["src/components/dialog/dialog.css?tag=qds-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2023 Schneider Electric\n \n SPDX-License-Identifier: LGPL-2.1-only\n /\n\n@import url('../shared.css');\n\n:host {\n display: none;\n position: fixed;\n inset: 0;\n}\n\n:host([open]) {\n display: block;\n}\n\n.dialog {\n border-radius: var(--qds-popup-border-radius);\n border: none;\n box-shadow: var(--qds-theme-popup-elevation);\n padding: 0;\n\n &::backdrop {\n background: initial;\n }\n\n &[open] ~ .backdrop {\n backdrop-filter: blur(var(--qds-theme-popup-overlay-blur));\n background-color: var(--qds-theme-popup-overlay-background);\n inset: 0;\n opacity: var(--qds-theme-popup-overlay-opacity);\n position: fixed;\n }\n}\n\n.content {\n align-items: flex-start;\n background-color: var(--qds-theme-popup-background);\n display: flex;\n flex-direction: column;\n gap: var(--qds-popup-gap-children-related);\n padding: var(--qds-popup-padding);\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { ignorePromise, inheritAriaAttributes, invariant } from '../../helpers'\n\n/\n The `<qds-dialog>` element represent a dialog box or other interactive\n * component, such as a dismissible alert, inspector, or subwindow.\n \n @see https://quartz.se.com/build/components/dialog\n /\n@Component({\n tag: 'qds-dialog',\n shadow: true,\n styleUrl: 'dialog.css',\n})\nexport class Dialog implements ComponentInterface {\n /\n Indicates whether or not the dialog is open. You can toggle this attribute\n * to show and hide the dialog, or you can use the `show()` and `close()`\n * methods and this attribute will reflect the dialog’s open state.\n /\n @Prop({ mutable: true, reflect: true }) public open = false\n\n @Element() private readonly element!: HTMLQdsDialogElement\n\n /\n Emitted when the user instructs the browser that they wish to dismiss the\n * currently open dialog. The browser fires this event when the user presses\n * the `Esc` key.\n \n When a dialog is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are fired.\n /\n @Event({ eventName: 'qdsCancel', bubbles: false, composed: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /* Emitted when the dialog has been closed. /\n @Event({\n eventName: 'qdsClose',\n bubbles: false,\n cancelable: false,\n composed: false,\n })\n private readonly closeEmitter!: EventEmitter<void>\n\n private inheritedAttributes: Attributes = {}\n\n private dialog?: HTMLDialogElement\n\n /\n Displays the dialog over the top of any other dialogs that might be\n * present. Everything outside of the dialog is [inert][] with interactions\n * outside of the dialog being blocked.\n \n [inert]: https://developer.mozilla.org/docs/Web/API/HTMLElement/inert\n /\n @Method()\n public async show(): Promise<void> {\n invariant(this.dialog)\n\n this.dialog.showModal()\n this.open = this.dialog.open\n }\n\n /\n Closes the dialog.\n */\n @Method()\n public async close(): Promise<void> {\n invariant(this.dialog)\n\n this.dialog.close()\n }\n\n @Watch('open')\n protected async openChanged(): Promise<void> {\n await (this.open ? this.show() : this.close())\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public async componentDidLoad(): Promise<void> {\n if (this.open) await this.show()\n }\n\n public render() {\n return (\n <Host>\n <dialog\n class=\"dialog\"\n ref={this.ref}\n onSubmit={this.boundSubmit}\n onCancel={this.onCancel}\n onClose={this.onClose}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <div class=\"content\">\n <slot />\n </div>\n </dialog>\n <div class=\"backdrop\" />\n </Host>\n )\n }\n\n private async handleSubmit(event: Event): Promise<void> {\n if (\n (event instanceof SubmitEvent &&\n (event.submitter instanceof HTMLButtonElement \|\|\n (event.submitter instanceof HTMLInputElement &&\n event.submitter.formMethod === 'dialog'))) \|\|\n (event.target instanceof HTMLFormElement &&\n event.target.method === 'dialog')\n ) {\n event.preventDefault()\n await this.close()\n }\n }\n\n private readonly boundSubmit = (event: Event): void => {\n ignorePromise(this.handleSubmit(event))\n }\n\n private readonly onCancel = (event: Event): void => {\n if (this.cancelEmitter.emit().defaultPrevented) event.preventDefault()\n }\n\n private readonly onClose = (): void => {\n invariant(this.dialog)\n\n this.closeEmitter.emit()\n this.open = this.dialog.open\n }\n\n private readonly ref = (dialog?: HTMLDialogElement): void => {\n this.dialog = dialog\n }\n}\n"],"version":3}

package/dist/cjs/qds-dropdown.cjs.entry.js CHANGED Viewed

@@ -21,7 +21,7 @@ const Dropdown = class {
     this.closeEmitter = index.createEvent(this, "qdsClose", 2);
     this.open = false;
     this.boundFocusout = (event) => {
-      helpers.ignorePromise(this.handleFocusOut(event));
+      helpers.ignorePromise(this.handleFocusout(event));
     };
     this.boundEscape = (event) => {
       helpers.ignorePromise(this.handleEscape(event));
@@ -169,7 +169,7 @@ const Dropdown = class {
         transform: this.hostTransform,
       } }, index.h("slot", null)));
   }
-  async handleFocusOut(event) {
+  async handleFocusout(event) {
     if (!(event instanceof FocusEvent))
       return;
     const { relatedTarget } = event;

package/dist/cjs/qds-dropdown.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-dropdown.entry.cjs.js","mappings":"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","names":["ignorePromise","offset","propertyToPx","flip","shift","limitShift","invariant","computePosition","roundByDPR","autoUpdate","h","Host"],"sources":["src/components/dropdown/dropdown.css?tag=qds-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2023 Schneider Electric\n \n SPDX-License-Identifier: LGPL-2.1-only\n /\n\n@import url('../shared.css');\n\n:host {\n background: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n display: inline-block;\n left: 0;\n top: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/\n @experimental\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/dropdown\n /\n@Component({\n tag: 'qds-dropdown',\n shadow: true,\n styleUrl: 'dropdown.css',\n})\nexport class Dropdown implements ComponentInterface {\n /\n Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n \n @see https://floating-ui.com/docs/autoupdate#options\n /\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /\n Prevents the dropdown from being shown by user interaction. The dropdown\n * can still be displayed by calling the `show()` method.\n /\n @Prop({ mutable: true }) public disabled = false\n\n /\n Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n \n The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n \n @see https://floating-ui.com/docs/flip#options\n /\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /\n Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n /\n @Prop() public readonly noFlip: boolean = false\n\n /\n Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n /\n @Prop() public readonly noShift: boolean = false\n\n /\n Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n \n The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n \n @see https://floating-ui.com/docs/offset#options\n /\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /\n Where to place the dropdown relative to the `target`.\n \n @see https://floating-ui.com/docs/tutorial#placements\n /\n @Prop() public readonly placement: Placement = 'bottom-start'\n\n /\n Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n \n @see https://floating-ui.com/docs/shift#options\n /\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /\n The CSS position strategy to use.\n \n @see https://floating-ui.com/docs/computeposition#strategy\n /\n @Prop() public readonly strategy?: Strategy\n\n /\n The trigger element that will trigger the dropdown. The target specified\n * can be any of the follow:\n \n - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n /\n @Prop() public readonly target!:\n \| ReferenceElement\n \| string\n \| (() => ReferenceElement \| string)\n\n /\n Emitted when the user instructs the browser that they wish to dismiss the\n * current open dropdown by pressing the `Esc` key.\n \n When a dropdown is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are emitted.\n /\n @Event({ eventName: 'qdsCancel', bubbles: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /\n Emitted when the dropdown is closed.\n /\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsDropdownElement\n\n @State() private hostAriaLabelledBy?: string\n\n @State() private hostDisplay?: string\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n private cleanup?: () => void\n\n private middleware?: Middleware[]\n\n private referenceElement?: ReferenceElement\n\n private open = false\n\n /\n Show the dropdown.\n /\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element) {\n this.referenceElement.setAttribute('aria-expanded', 'true')\n this.referenceElement.setAttribute('aria-controls', this.element.id)\n }\n\n this.open = true\n this.hostDisplay = undefined\n this.startAutoUpdate()\n }\n\n /\n Close the dropdown.\n /\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n if (this.referenceElement instanceof globalThis.Element) {\n this.referenceElement.setAttribute('aria-expanded', 'false')\n this.referenceElement.removeAttribute('aria-controls')\n }\n\n this.open = false\n this.hostDisplay = 'none'\n if (this.cleanup) this.cleanup()\n\n this.closeEmitter.emit()\n }\n\n /\n Update the dropdown's middleware and position.\n */\n @Method()\n public async update(): Promise<void> {\n await this.updateMiddleware()\n }\n\n @Listen('click', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n if (!this.open) return\n\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) \|\|\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n this.referenceElement.setAttribute('aria-expanded', 'false')\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n this.referenceElement.addEventListener('keydown', this.boundEscape)\n if (this.element.role === 'menu') {\n this.referenceElement.id \|\|= `qds-dropdown-trigger-${autoIncrementingId}`\n this.hostAriaLabelledBy = this.referenceElement.id\n }\n }\n\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n private async updateMiddleware(): Promise<void> {\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis:\n propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n await this.updatePosition()\n }\n\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.referenceElement)\n\n const { x, y, strategy } = await computePosition(\n this.referenceElement,\n this.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.referenceElement)\n\n if (this.cleanup) this.cleanup()\n this.cleanup = autoUpdate(\n this.referenceElement,\n this.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.hostDisplay = 'none'\n this.element.role ??= 'menu'\n this.element.id \|\|= `qds-dropdown-${autoIncrementingId}`\n await this.updateReferenceElement()\n autoIncrementingId += 1\n await this.updateMiddleware()\n }\n\n public disconnectedCallback(): void {\n this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n aria-labelledby={this.hostAriaLabelledBy}\n onKeyDown={this.boundEscape}\n onFocusout={this.boundFocusout}\n style={{\n display: this.hostDisplay,\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n </Host>\n )\n }\n\n private async handleFocusOut(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleEscape(event: Event): Promise<void> {\n if (\n !(event instanceof KeyboardEvent) \|\|\n event.key !== 'Escape' \|\|\n (event.target !== this.referenceElement &&\n event.target instanceof globalThis.Element &&\n event.target.closest('qds-dropdown') !== this.element)\n )\n return\n\n const cancelEvent = this.cancelEmitter.emit()\n if (cancelEvent.defaultPrevented) return\n\n await this.close()\n if (\n this.referenceElement instanceof globalThis.HTMLElement \|\|\n this.referenceElement instanceof globalThis.SVGElement\n )\n this.referenceElement.focus()\n }\n\n private readonly boundEscape = (event: Event): void => {\n ignorePromise(this.handleEscape(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n this.hostAriaLabelledBy = undefined\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n this.referenceElement.removeEventListener('click', this.boundReferenceClick)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener('keydown', this.boundEscape)\n this.referenceElement.removeAttribute('aria-expanded')\n this.referenceElement.removeAttribute('aria-controls')\n }\n}\n"],"version":3}
1	+ {"file":"qds-dropdown.entry.cjs.js","mappings":"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","names":["ignorePromise","offset","propertyToPx","flip","shift","limitShift","invariant","computePosition","roundByDPR","autoUpdate","h","Host"],"sources":["src/components/dropdown/dropdown.css?tag=qds-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2023 Schneider Electric\n \n SPDX-License-Identifier: LGPL-2.1-only\n /\n\n@import url('../shared.css');\n\n:host {\n background: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n display: inline-block;\n left: 0;\n top: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/\n @experimental\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/dropdown\n /\n@Component({\n tag: 'qds-dropdown',\n shadow: true,\n styleUrl: 'dropdown.css',\n})\nexport class Dropdown implements ComponentInterface {\n /\n Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n \n @see https://floating-ui.com/docs/autoupdate#options\n /\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /\n Prevents the dropdown from being shown by user interaction. The dropdown\n * can still be displayed by calling the `show()` method.\n /\n @Prop({ mutable: true }) public disabled = false\n\n /\n Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n \n The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n \n @see https://floating-ui.com/docs/flip#options\n /\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /\n Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n /\n @Prop() public readonly noFlip: boolean = false\n\n /\n Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n /\n @Prop() public readonly noShift: boolean = false\n\n /\n Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n \n The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n \n @see https://floating-ui.com/docs/offset#options\n /\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /\n Where to place the dropdown relative to the `target`.\n \n @see https://floating-ui.com/docs/tutorial#placements\n /\n @Prop() public readonly placement: Placement = 'bottom-start'\n\n /\n Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n \n @see https://floating-ui.com/docs/shift#options\n /\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /\n The CSS position strategy to use.\n \n @see https://floating-ui.com/docs/computeposition#strategy\n /\n @Prop() public readonly strategy?: Strategy\n\n /\n The trigger element that will trigger the dropdown. The target specified\n * can be any of the follow:\n \n - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n /\n @Prop() public readonly target!:\n \| ReferenceElement\n \| string\n \| (() => ReferenceElement \| string)\n\n /\n Emitted when the user instructs the browser that they wish to dismiss the\n * current open dropdown by pressing the `Esc` key.\n \n When a dropdown is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are emitted.\n /\n @Event({ eventName: 'qdsCancel', bubbles: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /\n Emitted when the dropdown is closed.\n /\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsDropdownElement\n\n @State() private hostAriaLabelledBy?: string\n\n @State() private hostDisplay?: string\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n private cleanup?: () => void\n\n private middleware?: Middleware[]\n\n private referenceElement?: ReferenceElement\n\n private open = false\n\n /\n Show the dropdown.\n /\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element) {\n this.referenceElement.setAttribute('aria-expanded', 'true')\n this.referenceElement.setAttribute('aria-controls', this.element.id)\n }\n\n this.open = true\n this.hostDisplay = undefined\n this.startAutoUpdate()\n }\n\n /\n Close the dropdown.\n /\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n if (this.referenceElement instanceof globalThis.Element) {\n this.referenceElement.setAttribute('aria-expanded', 'false')\n this.referenceElement.removeAttribute('aria-controls')\n }\n\n this.open = false\n this.hostDisplay = 'none'\n if (this.cleanup) this.cleanup()\n\n this.closeEmitter.emit()\n }\n\n /\n Update the dropdown's middleware and position.\n */\n @Method()\n public async update(): Promise<void> {\n await this.updateMiddleware()\n }\n\n @Listen('click', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n if (!this.open) return\n\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) \|\|\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n this.referenceElement.setAttribute('aria-expanded', 'false')\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n this.referenceElement.addEventListener('keydown', this.boundEscape)\n if (this.element.role === 'menu') {\n this.referenceElement.id \|\|= `qds-dropdown-trigger-${autoIncrementingId}`\n this.hostAriaLabelledBy = this.referenceElement.id\n }\n }\n\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n private async updateMiddleware(): Promise<void> {\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis:\n propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n await this.updatePosition()\n }\n\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.referenceElement)\n\n const { x, y, strategy } = await computePosition(\n this.referenceElement,\n this.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.referenceElement)\n\n if (this.cleanup) this.cleanup()\n this.cleanup = autoUpdate(\n this.referenceElement,\n this.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.hostDisplay = 'none'\n this.element.role ??= 'menu'\n this.element.id \|\|= `qds-dropdown-${autoIncrementingId}`\n await this.updateReferenceElement()\n autoIncrementingId += 1\n await this.updateMiddleware()\n }\n\n public disconnectedCallback(): void {\n this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n aria-labelledby={this.hostAriaLabelledBy}\n onKeyDown={this.boundEscape}\n onFocusout={this.boundFocusout}\n style={{\n display: this.hostDisplay,\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n </Host>\n )\n }\n\n private async handleFocusout(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusout(event))\n }\n\n private async handleEscape(event: Event): Promise<void> {\n if (\n !(event instanceof KeyboardEvent) \|\|\n event.key !== 'Escape' \|\|\n (event.target !== this.referenceElement &&\n event.target instanceof globalThis.Element &&\n event.target.closest('qds-dropdown') !== this.element)\n )\n return\n\n const cancelEvent = this.cancelEmitter.emit()\n if (cancelEvent.defaultPrevented) return\n\n await this.close()\n if (\n this.referenceElement instanceof globalThis.HTMLElement \|\|\n this.referenceElement instanceof globalThis.SVGElement\n )\n this.referenceElement.focus()\n }\n\n private readonly boundEscape = (event: Event): void => {\n ignorePromise(this.handleEscape(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n this.hostAriaLabelledBy = undefined\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n this.referenceElement.removeEventListener('click', this.boundReferenceClick)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener('keydown', this.boundEscape)\n this.referenceElement.removeAttribute('aria-expanded')\n this.referenceElement.removeAttribute('aria-controls')\n }\n}\n"],"version":3}

package/dist/custom-elements.json CHANGED Viewed

@@ -828,7 +828,7 @@
               },
               "privacy": "public",
               "default": "false",
-              "description": "Indicates whether or not the dialog is open. You can toggle this attribute\nto show and hide the dialog, or you can use the `show()` and `hide()`\nmethods and this attribute will reflect the dialog’s open state."
+              "description": "Indicates whether or not the dialog is open. You can toggle this attribute\nto show and hide the dialog, or you can use the `show()` and `close()`\nmethods and this attribute will reflect the dialog’s open state."
             },
             {
               "kind": "field",
@@ -1350,7 +1350,7 @@
             },
             {
               "kind": "method",
-              "name": "handleFocusOut",
+              "name": "handleFocusout",
               "privacy": "private",
               "return": {
                 "type": {

package/dist/docs.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-07-31T23:21:43",
+  "timestamp": "2023-08-04T18:28:14",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.0.1",
@@ -1148,7 +1148,7 @@
           "mutable": true,
           "attr": "open",
           "reflectToAttr": true,
-          "docs": "Indicates whether or not the dialog is open. You can toggle this attribute\nto show and hide the dialog, or you can use the `show()` and `hide()`\nmethods and this attribute will reflect the dialog’s open state.",
+          "docs": "Indicates whether or not the dialog is open. You can toggle this attribute\nto show and hide the dialog, or you can use the `show()` and `close()`\nmethods and this attribute will reflect the dialog’s open state.",
           "docsTags": [],
           "default": "false",
           "values": [

package/dist/esm/qds-dialog.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-d7183092.js';
 import { c as ignorePromise, a as invariant, i as inheritAriaAttributes } from './helpers-76b84f45.js';
-const dialogCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:contents}.dialog{border-radius:var(--qds-popup-border-radius);border:none;box-shadow:var(--qds-theme-popup-elevation);padding:0}.dialog::backdrop{background:transparent none repeat 0 0 / auto auto padding-box border-box scroll;background:initial}.dialog[open]~.backdrop{-webkit-backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));background-color:var(--qds-theme-popup-overlay-background);inset:0;opacity:var(--qds-theme-popup-overlay-opacity);position:fixed}.content{align-items:flex-start;background-color:var(--qds-theme-popup-background);display:flex;flex-direction:column;gap:var(--qds-popup-gap-children-related);padding:var(--qds-popup-padding)}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}";
+const dialogCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:none;position:fixed;inset:0}:host([open]){display:block}.dialog{border-radius:var(--qds-popup-border-radius);border:none;box-shadow:var(--qds-theme-popup-elevation);padding:0}.dialog::backdrop{background:transparent none repeat 0 0 / auto auto padding-box border-box scroll;background:initial}.dialog[open]~.backdrop{-webkit-backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));background-color:var(--qds-theme-popup-overlay-background);inset:0;opacity:var(--qds-theme-popup-overlay-opacity);position:fixed}.content{align-items:flex-start;background-color:var(--qds-theme-popup-background);display:flex;flex-direction:column;gap:var(--qds-popup-gap-children-related);padding:var(--qds-popup-padding)}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}";
 const Dialog = class {
   constructor(hostRef) {

package/dist/esm/qds-dialog.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-dialog.entry.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG~~,+rCAA+rC~~;;~~MC8BpsC~~,MAAM;;;;;IA8BT,wBAAmB,GAAe,EAAE,CAAA;IA6E3B,gBAAW,GAAG,CAAC,KAAY;MAC1C,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;KACxC,CAAA;IAEgB,aAAQ,GAAG,CAAC,KAAY;MACvC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,gBAAgB;QAAE,KAAK,CAAC,cAAc,EAAE,CAAA;KACvE,CAAA;IAEgB,YAAO,GAAG;MACzB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;MAEtB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;MACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;KAC7B,CAAA;IAEgB,QAAG,GAAG,CAAC,MAA0B;MAChD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;KACrB,CAAA;gBAtHqD,KAAK;;;;;;;;;EAoCpD,MAAM,IAAI;IACf,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAA;IACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;GAC7B;;;;EAMM,MAAM,KAAK;IAChB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;GACpB;EAGS,MAAM,WAAW;IACzB,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;GAC/C;EAEM,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM,gBAAgB;IAC3B,IAAI,IAAI,CAAC,IAAI;MAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;GACjC;EAEM,MAAM;IACX,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,WAAW,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAEjB,IAAI,CAAC,mBAAmB,IAE5B,WAAK,KAAK,EAAC,SAAS,IAClB,eAAQ,CACJ,CACC,EACT,WAAK,KAAK,EAAC,UAAU,GAAG,CACnB,EACR;GACF;EAEO,MAAM,YAAY,CAAC,KAAY;IACrC,IACE,CAAC,KAAK,YAAY,WAAW;OAC1B,KAAK,CAAC,SAAS,YAAY,iBAAiB;SAC1C,KAAK,CAAC,SAAS,YAAY,gBAAgB;UAC1C,KAAK,CAAC,SAAS,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;OAC9C,KAAK,CAAC,MAAM,YAAY,eAAe;QACtC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,QAAQ,CAAC,EACnC;MACA,KAAK,CAAC,cAAc,EAAE,CAAA;MACtB,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACnB;GACF;;;;;;;;;;","names":[],"sources":["src/components/dialog/dialog.css?tag=qds-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2023 Schneider Electric\n \n SPDX-License-Identifier: LGPL-2.1-only\n /\n\n@import url('../shared.css');\n\n:host {\n display: ~~contents~~;\n}\n\n.dialog {\n border-radius: var(--qds-popup-border-radius);\n border: none;\n box-shadow: var(--qds-theme-popup-elevation);\n padding: 0;\n\n &::backdrop {\n background: initial;\n }\n\n &[open] ~ .backdrop {\n backdrop-filter: blur(var(--qds-theme-popup-overlay-blur));\n background-color: var(--qds-theme-popup-overlay-background);\n inset: 0;\n opacity: var(--qds-theme-popup-overlay-opacity);\n position: fixed;\n }\n}\n\n.content {\n align-items: flex-start;\n background-color: var(--qds-theme-popup-background);\n display: flex;\n flex-direction: column;\n gap: var(--qds-popup-gap-children-related);\n padding: var(--qds-popup-padding);\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { ignorePromise, inheritAriaAttributes, invariant } from '../../helpers'\n\n/\n The `<qds-dialog>` element represent a dialog box or other interactive\n * component, such as a dismissible alert, inspector, or subwindow.\n \n @see https://quartz.se.com/build/components/dialog\n /\n@Component({\n tag: 'qds-dialog',\n shadow: true,\n styleUrl: 'dialog.css',\n})\nexport class Dialog implements ComponentInterface {\n /\n Indicates whether or not the dialog is open. You can toggle this attribute\n * to show and hide the dialog, or you can use the `show()` and `~~hide~~()`\n * methods and this attribute will reflect the dialog’s open state.\n /\n @Prop({ mutable: true, reflect: true }) public open = false\n\n @Element() private readonly element!: HTMLQdsDialogElement\n\n /\n Emitted when the user instructs the browser that they wish to dismiss the\n * currently open dialog. The browser fires this event when the user presses\n * the `Esc` key.\n \n When a dialog is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are fired.\n /\n @Event({ eventName: 'qdsCancel', bubbles: false, composed: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /* Emitted when the dialog has been closed. /\n @Event({\n eventName: 'qdsClose',\n bubbles: false,\n cancelable: false,\n composed: false,\n })\n private readonly closeEmitter!: EventEmitter<void>\n\n private inheritedAttributes: Attributes = {}\n\n private dialog?: HTMLDialogElement\n\n /\n Displays the dialog over the top of any other dialogs that might be\n * present. Everything outside of the dialog is [inert][] with interactions\n * outside of the dialog being blocked.\n \n [inert]: https://developer.mozilla.org/docs/Web/API/HTMLElement/inert\n /\n @Method()\n public async show(): Promise<void> {\n invariant(this.dialog)\n\n this.dialog.showModal()\n this.open = this.dialog.open\n }\n\n /\n Closes the dialog.\n */\n @Method()\n public async close(): Promise<void> {\n invariant(this.dialog)\n\n this.dialog.close()\n }\n\n @Watch('open')\n protected async openChanged(): Promise<void> {\n await (this.open ? this.show() : this.close())\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public async componentDidLoad(): Promise<void> {\n if (this.open) await this.show()\n }\n\n public render() {\n return (\n <Host>\n <dialog\n class=\"dialog\"\n ref={this.ref}\n onSubmit={this.boundSubmit}\n onCancel={this.onCancel}\n onClose={this.onClose}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <div class=\"content\">\n <slot />\n </div>\n </dialog>\n <div class=\"backdrop\" />\n </Host>\n )\n }\n\n private async handleSubmit(event: Event): Promise<void> {\n if (\n (event instanceof SubmitEvent &&\n (event.submitter instanceof HTMLButtonElement \|\|\n (event.submitter instanceof HTMLInputElement &&\n event.submitter.formMethod === 'dialog'))) \|\|\n (event.target instanceof HTMLFormElement &&\n event.target.method === 'dialog')\n ) {\n event.preventDefault()\n await this.close()\n }\n }\n\n private readonly boundSubmit = (event: Event): void => {\n ignorePromise(this.handleSubmit(event))\n }\n\n private readonly onCancel = (event: Event): void => {\n if (this.cancelEmitter.emit().defaultPrevented) event.preventDefault()\n }\n\n private readonly onClose = (): void => {\n invariant(this.dialog)\n\n this.closeEmitter.emit()\n this.open = this.dialog.open\n }\n\n private readonly ref = (dialog?: HTMLDialogElement): void => {\n this.dialog = dialog\n }\n}\n"],"version":3}
1	+ {"file":"qds-dialog.entry.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,8uCAA8uC;;MC8BnvC,MAAM;;;;;IA8BT,wBAAmB,GAAe,EAAE,CAAA;IA6E3B,gBAAW,GAAG,CAAC,KAAY;MAC1C,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;KACxC,CAAA;IAEgB,aAAQ,GAAG,CAAC,KAAY;MACvC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,gBAAgB;QAAE,KAAK,CAAC,cAAc,EAAE,CAAA;KACvE,CAAA;IAEgB,YAAO,GAAG;MACzB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;MAEtB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;MACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;KAC7B,CAAA;IAEgB,QAAG,GAAG,CAAC,MAA0B;MAChD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;KACrB,CAAA;gBAtHqD,KAAK;;;;;;;;;EAoCpD,MAAM,IAAI;IACf,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAA;IACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA;GAC7B;;;;EAMM,MAAM,KAAK;IAChB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAEtB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;GACpB;EAGS,MAAM,WAAW;IACzB,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;GAC/C;EAEM,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM,gBAAgB;IAC3B,IAAI,IAAI,CAAC,IAAI;MAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;GACjC;EAEM,MAAM;IACX,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,WAAW,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAEjB,IAAI,CAAC,mBAAmB,IAE5B,WAAK,KAAK,EAAC,SAAS,IAClB,eAAQ,CACJ,CACC,EACT,WAAK,KAAK,EAAC,UAAU,GAAG,CACnB,EACR;GACF;EAEO,MAAM,YAAY,CAAC,KAAY;IACrC,IACE,CAAC,KAAK,YAAY,WAAW;OAC1B,KAAK,CAAC,SAAS,YAAY,iBAAiB;SAC1C,KAAK,CAAC,SAAS,YAAY,gBAAgB;UAC1C,KAAK,CAAC,SAAS,CAAC,UAAU,KAAK,QAAQ,CAAC,CAAC;OAC9C,KAAK,CAAC,MAAM,YAAY,eAAe;QACtC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,QAAQ,CAAC,EACnC;MACA,KAAK,CAAC,cAAc,EAAE,CAAA;MACtB,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACnB;GACF;;;;;;;;;;","names":[],"sources":["src/components/dialog/dialog.css?tag=qds-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2023 Schneider Electric\n \n SPDX-License-Identifier: LGPL-2.1-only\n /\n\n@import url('../shared.css');\n\n:host {\n display: none;\n position: fixed;\n inset: 0;\n}\n\n:host([open]) {\n display: block;\n}\n\n.dialog {\n border-radius: var(--qds-popup-border-radius);\n border: none;\n box-shadow: var(--qds-theme-popup-elevation);\n padding: 0;\n\n &::backdrop {\n background: initial;\n }\n\n &[open] ~ .backdrop {\n backdrop-filter: blur(var(--qds-theme-popup-overlay-blur));\n background-color: var(--qds-theme-popup-overlay-background);\n inset: 0;\n opacity: var(--qds-theme-popup-overlay-opacity);\n position: fixed;\n }\n}\n\n.content {\n align-items: flex-start;\n background-color: var(--qds-theme-popup-background);\n display: flex;\n flex-direction: column;\n gap: var(--qds-popup-gap-children-related);\n padding: var(--qds-popup-padding);\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { ignorePromise, inheritAriaAttributes, invariant } from '../../helpers'\n\n/\n The `<qds-dialog>` element represent a dialog box or other interactive\n * component, such as a dismissible alert, inspector, or subwindow.\n \n @see https://quartz.se.com/build/components/dialog\n /\n@Component({\n tag: 'qds-dialog',\n shadow: true,\n styleUrl: 'dialog.css',\n})\nexport class Dialog implements ComponentInterface {\n /\n Indicates whether or not the dialog is open. You can toggle this attribute\n * to show and hide the dialog, or you can use the `show()` and `close()`\n * methods and this attribute will reflect the dialog’s open state.\n /\n @Prop({ mutable: true, reflect: true }) public open = false\n\n @Element() private readonly element!: HTMLQdsDialogElement\n\n /\n Emitted when the user instructs the browser that they wish to dismiss the\n * currently open dialog. The browser fires this event when the user presses\n * the `Esc` key.\n \n When a dialog is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are fired.\n /\n @Event({ eventName: 'qdsCancel', bubbles: false, composed: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /* Emitted when the dialog has been closed. /\n @Event({\n eventName: 'qdsClose',\n bubbles: false,\n cancelable: false,\n composed: false,\n })\n private readonly closeEmitter!: EventEmitter<void>\n\n private inheritedAttributes: Attributes = {}\n\n private dialog?: HTMLDialogElement\n\n /\n Displays the dialog over the top of any other dialogs that might be\n * present. Everything outside of the dialog is [inert][] with interactions\n * outside of the dialog being blocked.\n \n [inert]: https://developer.mozilla.org/docs/Web/API/HTMLElement/inert\n /\n @Method()\n public async show(): Promise<void> {\n invariant(this.dialog)\n\n this.dialog.showModal()\n this.open = this.dialog.open\n }\n\n /\n Closes the dialog.\n */\n @Method()\n public async close(): Promise<void> {\n invariant(this.dialog)\n\n this.dialog.close()\n }\n\n @Watch('open')\n protected async openChanged(): Promise<void> {\n await (this.open ? this.show() : this.close())\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public async componentDidLoad(): Promise<void> {\n if (this.open) await this.show()\n }\n\n public render() {\n return (\n <Host>\n <dialog\n class=\"dialog\"\n ref={this.ref}\n onSubmit={this.boundSubmit}\n onCancel={this.onCancel}\n onClose={this.onClose}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <div class=\"content\">\n <slot />\n </div>\n </dialog>\n <div class=\"backdrop\" />\n </Host>\n )\n }\n\n private async handleSubmit(event: Event): Promise<void> {\n if (\n (event instanceof SubmitEvent &&\n (event.submitter instanceof HTMLButtonElement \|\|\n (event.submitter instanceof HTMLInputElement &&\n event.submitter.formMethod === 'dialog'))) \|\|\n (event.target instanceof HTMLFormElement &&\n event.target.method === 'dialog')\n ) {\n event.preventDefault()\n await this.close()\n }\n }\n\n private readonly boundSubmit = (event: Event): void => {\n ignorePromise(this.handleSubmit(event))\n }\n\n private readonly onCancel = (event: Event): void => {\n if (this.cancelEmitter.emit().defaultPrevented) event.preventDefault()\n }\n\n private readonly onClose = (): void => {\n invariant(this.dialog)\n\n this.closeEmitter.emit()\n this.open = this.dialog.open\n }\n\n private readonly ref = (dialog?: HTMLDialogElement): void => {\n this.dialog = dialog\n }\n}\n"],"version":3}

package/dist/esm/qds-dropdown.entry.js CHANGED Viewed

@@ -17,7 +17,7 @@ const Dropdown = class {
     this.closeEmitter = createEvent(this, "qdsClose", 2);
     this.open = false;
     this.boundFocusout = (event) => {
-      ignorePromise(this.handleFocusOut(event));
+      ignorePromise(this.handleFocusout(event));
     };
     this.boundEscape = (event) => {
       ignorePromise(this.handleEscape(event));
@@ -165,7 +165,7 @@ const Dropdown = class {
         transform: this.hostTransform,
       } }, h("slot", null)));
   }
-  async handleFocusOut(event) {
+  async handleFocusout(event) {
     if (!(event instanceof FocusEvent))
       return;
     const { relatedTarget } = event;

package/dist/esm/qds-dropdown.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.css?tag=qds-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2023 Schneider Electric\n \n SPDX-License-Identifier: LGPL-2.1-only\n /\n\n@import url('../shared.css');\n\n:host {\n background: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n display: inline-block;\n left: 0;\n top: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/\n @experimental\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/dropdown\n /\n@Component({\n tag: 'qds-dropdown',\n shadow: true,\n styleUrl: 'dropdown.css',\n})\nexport class Dropdown implements ComponentInterface {\n /\n Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n \n @see https://floating-ui.com/docs/autoupdate#options\n /\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /\n Prevents the dropdown from being shown by user interaction. The dropdown\n * can still be displayed by calling the `show()` method.\n /\n @Prop({ mutable: true }) public disabled = false\n\n /\n Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n \n The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n \n @see https://floating-ui.com/docs/flip#options\n /\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /\n Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n /\n @Prop() public readonly noFlip: boolean = false\n\n /\n Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n /\n @Prop() public readonly noShift: boolean = false\n\n /\n Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n \n The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n \n @see https://floating-ui.com/docs/offset#options\n /\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /\n Where to place the dropdown relative to the `target`.\n \n @see https://floating-ui.com/docs/tutorial#placements\n /\n @Prop() public readonly placement: Placement = 'bottom-start'\n\n /\n Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n \n @see https://floating-ui.com/docs/shift#options\n /\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /\n The CSS position strategy to use.\n \n @see https://floating-ui.com/docs/computeposition#strategy\n /\n @Prop() public readonly strategy?: Strategy\n\n /\n The trigger element that will trigger the dropdown. The target specified\n * can be any of the follow:\n \n - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n /\n @Prop() public readonly target!:\n \| ReferenceElement\n \| string\n \| (() => ReferenceElement \| string)\n\n /\n Emitted when the user instructs the browser that they wish to dismiss the\n * current open dropdown by pressing the `Esc` key.\n \n When a dropdown is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are emitted.\n /\n @Event({ eventName: 'qdsCancel', bubbles: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /\n Emitted when the dropdown is closed.\n /\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsDropdownElement\n\n @State() private hostAriaLabelledBy?: string\n\n @State() private hostDisplay?: string\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n private cleanup?: () => void\n\n private middleware?: Middleware[]\n\n private referenceElement?: ReferenceElement\n\n private open = false\n\n /\n Show the dropdown.\n /\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element) {\n this.referenceElement.setAttribute('aria-expanded', 'true')\n this.referenceElement.setAttribute('aria-controls', this.element.id)\n }\n\n this.open = true\n this.hostDisplay = undefined\n this.startAutoUpdate()\n }\n\n /\n Close the dropdown.\n /\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n if (this.referenceElement instanceof globalThis.Element) {\n this.referenceElement.setAttribute('aria-expanded', 'false')\n this.referenceElement.removeAttribute('aria-controls')\n }\n\n this.open = false\n this.hostDisplay = 'none'\n if (this.cleanup) this.cleanup()\n\n this.closeEmitter.emit()\n }\n\n /\n Update the dropdown's middleware and position.\n */\n @Method()\n public async update(): Promise<void> {\n await this.updateMiddleware()\n }\n\n @Listen('click', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n if (!this.open) return\n\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) \|\|\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n this.referenceElement.setAttribute('aria-expanded', 'false')\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n this.referenceElement.addEventListener('keydown', this.boundEscape)\n if (this.element.role === 'menu') {\n this.referenceElement.id \|\|= `qds-dropdown-trigger-${autoIncrementingId}`\n this.hostAriaLabelledBy = this.referenceElement.id\n }\n }\n\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n private async updateMiddleware(): Promise<void> {\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis:\n propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n await this.updatePosition()\n }\n\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.referenceElement)\n\n const { x, y, strategy } = await computePosition(\n this.referenceElement,\n this.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.referenceElement)\n\n if (this.cleanup) this.cleanup()\n this.cleanup = autoUpdate(\n this.referenceElement,\n this.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.hostDisplay = 'none'\n this.element.role ??= 'menu'\n this.element.id \|\|= `qds-dropdown-${autoIncrementingId}`\n await this.updateReferenceElement()\n autoIncrementingId += 1\n await this.updateMiddleware()\n }\n\n public disconnectedCallback(): void {\n this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n aria-labelledby={this.hostAriaLabelledBy}\n onKeyDown={this.boundEscape}\n onFocusout={this.boundFocusout}\n style={{\n display: this.hostDisplay,\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n </Host>\n )\n }\n\n private async handleFocusOut(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleEscape(event: Event): Promise<void> {\n if (\n !(event instanceof KeyboardEvent) \|\|\n event.key !== 'Escape' \|\|\n (event.target !== this.referenceElement &&\n event.target instanceof globalThis.Element &&\n event.target.closest('qds-dropdown') !== this.element)\n )\n return\n\n const cancelEvent = this.cancelEmitter.emit()\n if (cancelEvent.defaultPrevented) return\n\n await this.close()\n if (\n this.referenceElement instanceof globalThis.HTMLElement \|\|\n this.referenceElement instanceof globalThis.SVGElement\n )\n this.referenceElement.focus()\n }\n\n private readonly boundEscape = (event: Event): void => {\n ignorePromise(this.handleEscape(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n this.hostAriaLabelledBy = undefined\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n this.referenceElement.removeEventListener('click', this.boundReferenceClick)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener('keydown', this.boundEscape)\n this.referenceElement.removeAttribute('aria-expanded')\n this.referenceElement.removeAttribute('aria-controls')\n }\n}\n"],"version":3}
1	+ {"file":"qds-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.css?tag=qds-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2023 Schneider Electric\n \n SPDX-License-Identifier: LGPL-2.1-only\n /\n\n@import url('../shared.css');\n\n:host {\n background: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n display: inline-block;\n left: 0;\n top: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/\n @experimental\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/dropdown\n /\n@Component({\n tag: 'qds-dropdown',\n shadow: true,\n styleUrl: 'dropdown.css',\n})\nexport class Dropdown implements ComponentInterface {\n /\n Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n \n @see https://floating-ui.com/docs/autoupdate#options\n /\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /\n Prevents the dropdown from being shown by user interaction. The dropdown\n * can still be displayed by calling the `show()` method.\n /\n @Prop({ mutable: true }) public disabled = false\n\n /\n Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n \n The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n \n @see https://floating-ui.com/docs/flip#options\n /\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /\n Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n /\n @Prop() public readonly noFlip: boolean = false\n\n /\n Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n /\n @Prop() public readonly noShift: boolean = false\n\n /\n Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n \n The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n \n @see https://floating-ui.com/docs/offset#options\n /\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /\n Where to place the dropdown relative to the `target`.\n \n @see https://floating-ui.com/docs/tutorial#placements\n /\n @Prop() public readonly placement: Placement = 'bottom-start'\n\n /\n Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n \n @see https://floating-ui.com/docs/shift#options\n /\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /\n The CSS position strategy to use.\n \n @see https://floating-ui.com/docs/computeposition#strategy\n /\n @Prop() public readonly strategy?: Strategy\n\n /\n The trigger element that will trigger the dropdown. The target specified\n * can be any of the follow:\n \n - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n /\n @Prop() public readonly target!:\n \| ReferenceElement\n \| string\n \| (() => ReferenceElement \| string)\n\n /\n Emitted when the user instructs the browser that they wish to dismiss the\n * current open dropdown by pressing the `Esc` key.\n \n When a dropdown is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are emitted.\n /\n @Event({ eventName: 'qdsCancel', bubbles: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /\n Emitted when the dropdown is closed.\n /\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsDropdownElement\n\n @State() private hostAriaLabelledBy?: string\n\n @State() private hostDisplay?: string\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n private cleanup?: () => void\n\n private middleware?: Middleware[]\n\n private referenceElement?: ReferenceElement\n\n private open = false\n\n /\n Show the dropdown.\n /\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element) {\n this.referenceElement.setAttribute('aria-expanded', 'true')\n this.referenceElement.setAttribute('aria-controls', this.element.id)\n }\n\n this.open = true\n this.hostDisplay = undefined\n this.startAutoUpdate()\n }\n\n /\n Close the dropdown.\n /\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n if (this.referenceElement instanceof globalThis.Element) {\n this.referenceElement.setAttribute('aria-expanded', 'false')\n this.referenceElement.removeAttribute('aria-controls')\n }\n\n this.open = false\n this.hostDisplay = 'none'\n if (this.cleanup) this.cleanup()\n\n this.closeEmitter.emit()\n }\n\n /\n Update the dropdown's middleware and position.\n */\n @Method()\n public async update(): Promise<void> {\n await this.updateMiddleware()\n }\n\n @Listen('click', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n if (!this.open) return\n\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) \|\|\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n this.referenceElement.setAttribute('aria-expanded', 'false')\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n this.referenceElement.addEventListener('keydown', this.boundEscape)\n if (this.element.role === 'menu') {\n this.referenceElement.id \|\|= `qds-dropdown-trigger-${autoIncrementingId}`\n this.hostAriaLabelledBy = this.referenceElement.id\n }\n }\n\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n private async updateMiddleware(): Promise<void> {\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis:\n propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n await this.updatePosition()\n }\n\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.referenceElement)\n\n const { x, y, strategy } = await computePosition(\n this.referenceElement,\n this.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.referenceElement)\n\n if (this.cleanup) this.cleanup()\n this.cleanup = autoUpdate(\n this.referenceElement,\n this.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.hostDisplay = 'none'\n this.element.role ??= 'menu'\n this.element.id \|\|= `qds-dropdown-${autoIncrementingId}`\n await this.updateReferenceElement()\n autoIncrementingId += 1\n await this.updateMiddleware()\n }\n\n public disconnectedCallback(): void {\n this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n aria-labelledby={this.hostAriaLabelledBy}\n onKeyDown={this.boundEscape}\n onFocusout={this.boundFocusout}\n style={{\n display: this.hostDisplay,\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n </Host>\n )\n }\n\n private async handleFocusout(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusout(event))\n }\n\n private async handleEscape(event: Event): Promise<void> {\n if (\n !(event instanceof KeyboardEvent) \|\|\n event.key !== 'Escape' \|\|\n (event.target !== this.referenceElement &&\n event.target instanceof globalThis.Element &&\n event.target.closest('qds-dropdown') !== this.element)\n )\n return\n\n const cancelEvent = this.cancelEmitter.emit()\n if (cancelEvent.defaultPrevented) return\n\n await this.close()\n if (\n this.referenceElement instanceof globalThis.HTMLElement \|\|\n this.referenceElement instanceof globalThis.SVGElement\n )\n this.referenceElement.focus()\n }\n\n private readonly boundEscape = (event: Event): void => {\n ignorePromise(this.handleEscape(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n this.hostAriaLabelledBy = undefined\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n this.referenceElement.removeEventListener('click', this.boundReferenceClick)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener('keydown', this.boundEscape)\n this.referenceElement.removeAttribute('aria-expanded')\n this.referenceElement.removeAttribute('aria-controls')\n }\n}\n"],"version":3}

package/dist/types/components/dialog/dialog.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import type { ComponentInterface } from '../../stencil-public-runtime';
 export declare class Dialog implements ComponentInterface {
   /**
    * Indicates whether or not the dialog is open. You can toggle this attribute
-   * to show and hide the dialog, or you can use the `show()` and `hide()`
+   * to show and hide the dialog, or you can use the `show()` and `close()`
    * methods and this attribute will reflect the dialog’s open state.
    */
   open: boolean;

package/dist/types/components/dropdown/dropdown.d.ts CHANGED Viewed

@@ -124,7 +124,7 @@ export declare class Dropdown implements ComponentInterface {
   componentWillLoad(): Promise<void>;
   disconnectedCallback(): void;
   render(): any;
-  private handleFocusOut;
+  private handleFocusout;
   private readonly boundFocusout;
   private handleEscape;
   private readonly boundEscape;

package/dist/types/components.d.ts CHANGED Viewed

@@ -209,7 +209,7 @@ export namespace Components {
          */
         "close": () => Promise<void>;
         /**
-          * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can use the `show()` and `hide()` methods and this attribute will reflect the dialog’s open state.
+          * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can use the `show()` and `close()` methods and this attribute will reflect the dialog’s open state.
          */
         "open": boolean;
         /**
@@ -1333,7 +1333,7 @@ declare namespace LocalJSX {
          */
         "onQdsClose"?: (event: QdsDialogCustomEvent<void>) => void;
         /**
-          * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can use the `show()` and `hide()` methods and this attribute will reflect the dialog’s open state.
+          * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can use the `show()` and `close()` methods and this attribute will reflect the dialog’s open state.
          */
         "open"?: boolean;
     }

package/dist/vscode.html-custom-data.json CHANGED Viewed

@@ -226,7 +226,7 @@
       "attributes": [
         {
           "name": "open",
-          "description": "Indicates whether or not the dialog is open. You can toggle this attribute\nto show and hide the dialog, or you can use the `show()` and `hide()`\nmethods and this attribute will reflect the dialog’s open state."
+          "description": "Indicates whether or not the dialog is open. You can toggle this attribute\nto show and hide the dialog, or you can use the `show()` and `close()`\nmethods and this attribute will reflect the dialog’s open state."
         }
       ]
     },

package/hydrate/index.js CHANGED Viewed

@@ -6202,7 +6202,7 @@ class Checkbox {
   }; }
 }
-const dialogCss = "/*!@:host*/.sc-qds-dialog-h{box-sizing:border-box}/*!@:host([hidden])*/[hidden].sc-qds-dialog-h{display:none !important}/*!@:host([hidden])*//*!@:host *,\n:host *::before,\n:host *::after*/.sc-qds-dialog-h *.sc-qds-dialog,.sc-qds-dialog-h *.sc-qds-dialog::before,.sc-qds-dialog-h *.sc-qds-dialog::after{box-sizing:inherit}/*!@:host*/.sc-qds-dialog-h{display:contents}/*!@.dialog*/.dialog.sc-qds-dialog{border-radius:var(--qds-popup-border-radius);border:none;box-shadow:var(--qds-theme-popup-elevation);padding:0}/*!@.dialog::backdrop*/.dialog.sc-qds-dialog::backdrop{background:transparent none repeat 0 0 / auto auto padding-box border-box scroll;background:initial}/*!@.dialog[open] ~ .backdrop*/.dialog[open].sc-qds-dialog~.backdrop.sc-qds-dialog{-webkit-backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));background-color:var(--qds-theme-popup-overlay-background);inset:0;opacity:var(--qds-theme-popup-overlay-opacity);position:fixed}/*!@.content*/.content.sc-qds-dialog{align-items:flex-start;background-color:var(--qds-theme-popup-background);display:flex;flex-direction:column;gap:var(--qds-popup-gap-children-related);padding:var(--qds-popup-padding)}/*!@::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul)*/.sc-qds-dialog-s>blockquote,.sc-qds-dialog-s>button,.sc-qds-dialog-s>dd,.sc-qds-dialog-s>dl,.sc-qds-dialog-s>fieldset,.sc-qds-dialog-s>figure,.sc-qds-dialog-s>h1,.sc-qds-dialog-s>h2,.sc-qds-dialog-s>h3,.sc-qds-dialog-s>h4,.sc-qds-dialog-s>h5,.sc-qds-dialog-s>h6,.sc-qds-dialog-s>hr,.sc-qds-dialog-s>input,.sc-qds-dialog-s>menu,.sc-qds-dialog-s>ol,.sc-qds-dialog-s>p,.sc-qds-dialog-s>pre,.sc-qds-dialog-s>select,.sc-qds-dialog-s>textarea,.sc-qds-dialog-s>ul{margin:0}";
+const dialogCss = "/*!@:host*/.sc-qds-dialog-h{box-sizing:border-box}/*!@:host([hidden])*/[hidden].sc-qds-dialog-h{display:none !important}/*!@:host([hidden])*//*!@:host *,\n:host *::before,\n:host *::after*/.sc-qds-dialog-h *.sc-qds-dialog,.sc-qds-dialog-h *.sc-qds-dialog::before,.sc-qds-dialog-h *.sc-qds-dialog::after{box-sizing:inherit}/*!@:host*/.sc-qds-dialog-h{display:none;position:fixed;inset:0}/*!@:host([open])*/[open].sc-qds-dialog-h{display:block}/*!@.dialog*/.dialog.sc-qds-dialog{border-radius:var(--qds-popup-border-radius);border:none;box-shadow:var(--qds-theme-popup-elevation);padding:0}/*!@.dialog::backdrop*/.dialog.sc-qds-dialog::backdrop{background:transparent none repeat 0 0 / auto auto padding-box border-box scroll;background:initial}/*!@.dialog[open] ~ .backdrop*/.dialog[open].sc-qds-dialog~.backdrop.sc-qds-dialog{-webkit-backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));background-color:var(--qds-theme-popup-overlay-background);inset:0;opacity:var(--qds-theme-popup-overlay-opacity);position:fixed}/*!@.content*/.content.sc-qds-dialog{align-items:flex-start;background-color:var(--qds-theme-popup-background);display:flex;flex-direction:column;gap:var(--qds-popup-gap-children-related);padding:var(--qds-popup-padding)}/*!@::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul)*/.sc-qds-dialog-s>blockquote,.sc-qds-dialog-s>button,.sc-qds-dialog-s>dd,.sc-qds-dialog-s>dl,.sc-qds-dialog-s>fieldset,.sc-qds-dialog-s>figure,.sc-qds-dialog-s>h1,.sc-qds-dialog-s>h2,.sc-qds-dialog-s>h3,.sc-qds-dialog-s>h4,.sc-qds-dialog-s>h5,.sc-qds-dialog-s>h6,.sc-qds-dialog-s>hr,.sc-qds-dialog-s>input,.sc-qds-dialog-s>menu,.sc-qds-dialog-s>ol,.sc-qds-dialog-s>p,.sc-qds-dialog-s>pre,.sc-qds-dialog-s>select,.sc-qds-dialog-s>textarea,.sc-qds-dialog-s>ul{margin:0}";
 /**
  * The `<qds-dialog>` element represent a dialog box or other interactive
@@ -7820,7 +7820,7 @@ class Dropdown {
     this.closeEmitter = createEvent(this, "qdsClose", 2);
     this.open = false;
     this.boundFocusout = (event) => {
-      ignorePromise(this.handleFocusOut(event));
+      ignorePromise(this.handleFocusout(event));
     };
     this.boundEscape = (event) => {
       ignorePromise(this.handleEscape(event));
@@ -7968,7 +7968,7 @@ class Dropdown {
         transform: this.hostTransform,
       } }, hAsync("slot", null)));
   }
-  async handleFocusOut(event) {
+  async handleFocusout(event) {
     if (!(event instanceof FocusEvent))
       return;
     const { relatedTarget } = event;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@quartzds/core",
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.13",
   "description": "Quartz design system web components",
   "homepage": "https://github.com/quartzds/core-foundations/tree/main/packages/core",
   "bugs": {