@umbraco-ui/uui 2.0.0-rc.0 → 2.0.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/modal/modal-container.js +2 -6
- package/dist/components/modal/modal-container.js.map +1 -1
- package/dist/components/modal/modal-dialog.element.js +5 -5
- package/dist/components/modal/modal-dialog.element.js.map +1 -1
- package/dist/components/modal/modal-sidebar.element.js +10 -14
- package/dist/components/modal/modal-sidebar.element.js.map +1 -1
- package/dist/components/modal/modal.element.d.ts +1 -3
- package/dist/components/modal/modal.element.js +12 -31
- package/dist/components/modal/modal.element.js.map +1 -1
- package/dist/package.json.js +1 -1
- package/package.json +2 -2
- package/dist/components/modal/modal-with-toasts-example.element.d.ts +0 -22
|
@@ -113,8 +113,8 @@ updateSidebars_fn = function() {
|
|
|
113
113
|
);
|
|
114
114
|
});
|
|
115
115
|
if (nextSidebar?.hasAttribute("hide")) break;
|
|
116
|
-
const currentWidth = sidebar.shadowRoot?.querySelector("
|
|
117
|
-
const nextWidth = nextSidebar?.shadowRoot?.querySelector("
|
|
116
|
+
const currentWidth = sidebar.shadowRoot?.querySelector("dialog")?.getBoundingClientRect().width ?? 0;
|
|
117
|
+
const nextWidth = nextSidebar?.shadowRoot?.querySelector("dialog")?.getBoundingClientRect().width ?? 0;
|
|
118
118
|
const distance = currentWidth + sidebarOffset + this.sidebarGap - nextWidth;
|
|
119
119
|
sidebarOffset = Math.max(distance, 0);
|
|
120
120
|
}
|
|
@@ -137,10 +137,6 @@ _UUIModalContainerElement.styles = css`
|
|
|
137
137
|
:host([backdrop])::after {
|
|
138
138
|
opacity: 1;
|
|
139
139
|
}
|
|
140
|
-
:host([backdrop])::after {
|
|
141
|
-
opacity: 1;
|
|
142
|
-
pointer-events: auto;
|
|
143
|
-
}
|
|
144
140
|
`;
|
|
145
141
|
let UUIModalContainerElement = _UUIModalContainerElement;
|
|
146
142
|
__decorateClass([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-container.js","sources":["../../../src/components/modal/modal-container.ts"],"sourcesContent":["import type { PropertyValueMap } from 'lit';\nimport { LitElement, css, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { UUIModalSidebarElement } from './modal-sidebar.element.js';\nimport { UUIModalCloseEvent, UUIModalElement } from './modal.element.js';\nexport class UUIModalContainerElement extends LitElement {\n @query('slot')\n modalSlot?: HTMLSlotElement;\n\n @state()\n private _modals?: Array<UUIModalElement>;\n\n @state()\n private _sidebars?: Array<UUIModalSidebarElement>;\n\n @property({ type: Number })\n sidebarGap = 64;\n\n @property({ type: Number })\n transitionDurationMS = 250;\n\n constructor() {\n super();\n this.addEventListener(UUIModalCloseEvent, this.#onCloseModalClose);\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n ): void {\n super.firstUpdated(_changedProperties);\n\n this.style.setProperty(\n '--uui-modal-transition-duration',\n this.transitionDurationMS + 'ms',\n );\n }\n\n readonly #onSlotChange = () => {\n const existingModals = this._modals ?? [];\n\n this._modals =\n (this.modalSlot\n ?.assignedElements({ flatten: true })\n .filter(\n el => el instanceof UUIModalElement,\n ) as Array<UUIModalElement>) ?? [];\n\n const oldModals = existingModals.filter(\n modal => !this._modals!.includes(modal),\n );\n oldModals.forEach(modal =>\n modal.removeEventListener(UUIModalCloseEvent, this.#onCloseModalClose),\n );\n\n const newModals = this._modals.filter(\n modal => !existingModals.includes(modal),\n );\n newModals.forEach(modal =>\n modal.addEventListener(UUIModalCloseEvent, this.#onCloseModalClose),\n );\n\n this._sidebars = this._modals.filter(\n el => el instanceof UUIModalSidebarElement,\n );\n\n if (this._modals.length === 0) {\n this.removeAttribute('backdrop');\n return;\n }\n\n this.#updateModals();\n this.#updateSidebars();\n };\n\n readonly #onCloseModalClose = (event: Event) => {\n event.stopImmediatePropagation();\n\n event.target?.removeEventListener(\n UUIModalCloseEvent,\n this.#onCloseModalClose,\n );\n if (!this._modals || this._modals.length <= 1) {\n this.removeAttribute('backdrop');\n return;\n }\n\n this.#updateModals();\n this.#updateSidebars();\n };\n\n #updateModals() {\n this.setAttribute('backdrop', '');\n\n const reverse =\n this._modals?.filter(modal => !modal.isClosing).reverse() ?? [];\n\n //set index to all modals, the one in front is 0\n reverse?.forEach((modal, index) => {\n modal.index = index;\n modal.transitionDuration = this.transitionDurationMS;\n });\n\n //set unique-index on all modals based on which modal of the same type it is, the one in front is 0.\n reverse?.forEach(modal => {\n const sameType = reverse?.filter(\n m => m.constructor.name === modal.constructor.name,\n );\n\n modal.uniqueIndex = sameType?.indexOf(modal) ?? 0;\n });\n }\n\n #updateSidebars() {\n requestAnimationFrame(() => {\n let sidebarOffset = 0;\n const reversed =\n this._sidebars?.filter(modal => !modal.isClosing).reverse() ?? [];\n\n for (let i = 0; i < reversed.length; i++) {\n const sidebar = reversed[i];\n const nextSidebar = reversed[i + 1];\n const tempSidebarOffset = sidebarOffset; // Cache to prevent it from being overwritten before the updateComplete.\n // The sidebar checks it's own width at sets it's --uui-modal-offset to negative that width.\n // This enables it to slide in from the right. So we need to set the new --uui-modal-offset after the updateComplete.\n sidebar.updateComplete.then(() => {\n sidebar.style.setProperty(\n '--uui-modal-offset',\n tempSidebarOffset + 'px',\n );\n });\n\n // Stop the calculations if the next sidebar is hidden\n if (nextSidebar?.hasAttribute('hide')) break;\n\n //TODO: is there a better way to get the width of the sidebar?\n const currentWidth =\n sidebar.shadowRoot
|
|
1
|
+
{"version":3,"file":"modal-container.js","sources":["../../../src/components/modal/modal-container.ts"],"sourcesContent":["import type { PropertyValueMap } from 'lit';\nimport { LitElement, css, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { UUIModalSidebarElement } from './modal-sidebar.element.js';\nimport { UUIModalCloseEvent, UUIModalElement } from './modal.element.js';\nexport class UUIModalContainerElement extends LitElement {\n @query('slot')\n modalSlot?: HTMLSlotElement;\n\n @state()\n private _modals?: Array<UUIModalElement>;\n\n @state()\n private _sidebars?: Array<UUIModalSidebarElement>;\n\n @property({ type: Number })\n sidebarGap = 64;\n\n @property({ type: Number })\n transitionDurationMS = 250;\n\n constructor() {\n super();\n this.addEventListener(UUIModalCloseEvent, this.#onCloseModalClose);\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n ): void {\n super.firstUpdated(_changedProperties);\n\n this.style.setProperty(\n '--uui-modal-transition-duration',\n this.transitionDurationMS + 'ms',\n );\n }\n\n readonly #onSlotChange = () => {\n const existingModals = this._modals ?? [];\n\n this._modals =\n (this.modalSlot\n ?.assignedElements({ flatten: true })\n .filter(\n el => el instanceof UUIModalElement,\n ) as Array<UUIModalElement>) ?? [];\n\n const oldModals = existingModals.filter(\n modal => !this._modals!.includes(modal),\n );\n oldModals.forEach(modal =>\n modal.removeEventListener(UUIModalCloseEvent, this.#onCloseModalClose),\n );\n\n const newModals = this._modals.filter(\n modal => !existingModals.includes(modal),\n );\n newModals.forEach(modal =>\n modal.addEventListener(UUIModalCloseEvent, this.#onCloseModalClose),\n );\n\n this._sidebars = this._modals.filter(\n el => el instanceof UUIModalSidebarElement,\n );\n\n if (this._modals.length === 0) {\n this.removeAttribute('backdrop');\n return;\n }\n\n this.#updateModals();\n this.#updateSidebars();\n };\n\n readonly #onCloseModalClose = (event: Event) => {\n event.stopImmediatePropagation();\n\n event.target?.removeEventListener(\n UUIModalCloseEvent,\n this.#onCloseModalClose,\n );\n if (!this._modals || this._modals.length <= 1) {\n this.removeAttribute('backdrop');\n return;\n }\n\n this.#updateModals();\n this.#updateSidebars();\n };\n\n #updateModals() {\n this.setAttribute('backdrop', '');\n\n const reverse =\n this._modals?.filter(modal => !modal.isClosing).reverse() ?? [];\n\n //set index to all modals, the one in front is 0\n reverse?.forEach((modal, index) => {\n modal.index = index;\n modal.transitionDuration = this.transitionDurationMS;\n });\n\n //set unique-index on all modals based on which modal of the same type it is, the one in front is 0.\n reverse?.forEach(modal => {\n const sameType = reverse?.filter(\n m => m.constructor.name === modal.constructor.name,\n );\n\n modal.uniqueIndex = sameType?.indexOf(modal) ?? 0;\n });\n }\n\n #updateSidebars() {\n requestAnimationFrame(() => {\n let sidebarOffset = 0;\n const reversed =\n this._sidebars?.filter(modal => !modal.isClosing).reverse() ?? [];\n\n for (let i = 0; i < reversed.length; i++) {\n const sidebar = reversed[i];\n const nextSidebar = reversed[i + 1];\n const tempSidebarOffset = sidebarOffset; // Cache to prevent it from being overwritten before the updateComplete.\n // The sidebar checks it's own width at sets it's --uui-modal-offset to negative that width.\n // This enables it to slide in from the right. So we need to set the new --uui-modal-offset after the updateComplete.\n sidebar.updateComplete.then(() => {\n sidebar.style.setProperty(\n '--uui-modal-offset',\n tempSidebarOffset + 'px',\n );\n });\n\n // Stop the calculations if the next sidebar is hidden\n if (nextSidebar?.hasAttribute('hide')) break;\n\n //TODO: is there a better way to get the width of the sidebar?\n const currentWidth =\n sidebar.shadowRoot?.querySelector('dialog')?.getBoundingClientRect()\n .width ?? 0;\n\n //TODO: is there a better way to get the width of the sidebar?\n const nextWidth =\n nextSidebar?.shadowRoot\n ?.querySelector('dialog')\n ?.getBoundingClientRect().width ?? 0;\n const distance =\n currentWidth + sidebarOffset + this.sidebarGap - nextWidth;\n sidebarOffset = Math.max(distance, 0);\n }\n });\n }\n\n render() {\n return html`<slot @slotchange=${this.#onSlotChange}></slot>`;\n }\n static readonly styles = css`\n :host {\n position: fixed;\n --uui-modal-color-backdrop: rgba(0, 0, 0, 0.5);\n }\n :host::after {\n content: '';\n position: fixed;\n inset: 0;\n background-color: var(--uui-modal-color-backdrop, rgba(0, 0, 0, 0.5));\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--uui-modal-transition-duration, 250ms);\n }\n :host([backdrop])::after {\n opacity: 1;\n }\n `;\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -3,9 +3,9 @@ import { UUIModalElement } from "./modal.element.js";
|
|
|
3
3
|
const _UUIModalDialogElement = class _UUIModalDialogElement extends UUIModalElement {
|
|
4
4
|
render() {
|
|
5
5
|
return html`
|
|
6
|
-
<
|
|
6
|
+
<dialog>
|
|
7
7
|
<slot></slot>
|
|
8
|
-
</
|
|
8
|
+
</dialog>
|
|
9
9
|
`;
|
|
10
10
|
}
|
|
11
11
|
};
|
|
@@ -16,7 +16,7 @@ _UUIModalDialogElement.styles = [
|
|
|
16
16
|
outline: none;
|
|
17
17
|
--uui-modal-dialog-background: var(--uui-color-surface);
|
|
18
18
|
}
|
|
19
|
-
|
|
19
|
+
dialog {
|
|
20
20
|
margin: auto;
|
|
21
21
|
max-width: 100%;
|
|
22
22
|
max-height: 100%;
|
|
@@ -29,10 +29,10 @@ _UUIModalDialogElement.styles = [
|
|
|
29
29
|
var(--uui-color-surface)
|
|
30
30
|
);
|
|
31
31
|
}
|
|
32
|
-
:host([index='0'])
|
|
32
|
+
:host([index='0']) dialog {
|
|
33
33
|
box-shadow: var(--uui-shadow-depth-5);
|
|
34
34
|
}
|
|
35
|
-
:host(:not([index='0']))
|
|
35
|
+
:host(:not([index='0'])) dialog {
|
|
36
36
|
outline: 1px solid rgba(0, 0, 0, 0.1);
|
|
37
37
|
}
|
|
38
38
|
`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-dialog.element.js","sources":["../../../src/components/modal/modal-dialog.element.ts"],"sourcesContent":["import { css, html } from 'lit';\nimport { UUIModalElement } from './modal.element.js';\nexport class UUIModalDialogElement extends UUIModalElement {\n render() {\n return html`\n <
|
|
1
|
+
{"version":3,"file":"modal-dialog.element.js","sources":["../../../src/components/modal/modal-dialog.element.ts"],"sourcesContent":["import { css, html } from 'lit';\nimport { UUIModalElement } from './modal.element.js';\nexport class UUIModalDialogElement extends UUIModalElement {\n render() {\n return html`\n <dialog>\n <slot></slot>\n </dialog>\n `;\n }\n\n static override readonly styles = [\n ...UUIModalElement.styles,\n css`\n :host {\n outline: none;\n --uui-modal-dialog-background: var(--uui-color-surface);\n }\n dialog {\n margin: auto;\n max-width: 100%;\n max-height: 100%;\n border-radius: var(\n --uui-modal-dialog-border-radius,\n var(--uui-border-radius-3)\n );\n background: var(\n --uui-modal-dialog-background,\n var(--uui-color-surface)\n );\n }\n :host([index='0']) dialog {\n box-shadow: var(--uui-shadow-depth-5);\n }\n :host(:not([index='0'])) dialog {\n outline: 1px solid rgba(0, 0, 0, 0.1);\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;AAEO,MAAM,yBAAN,MAAM,+BAA8B,gBAAgB;AAAA,EACzD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AA8BF;AA5BE,uBAAyB,SAAS;AAAA,EAChC,GAAG,gBAAgB;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAXG,IAAM,wBAAN;"}
|
|
@@ -44,18 +44,14 @@ const _UUIModalSidebarElement = class _UUIModalSidebarElement extends UUIModalEl
|
|
|
44
44
|
}, this.transitionDuration);
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
|
-
return html`<
|
|
48
|
-
popover="manual"
|
|
49
|
-
role="dialog"
|
|
50
|
-
aria-modal="true"
|
|
51
|
-
aria-label="Dialog">
|
|
47
|
+
return html`<dialog>
|
|
52
48
|
<slot></slot>
|
|
53
|
-
</
|
|
49
|
+
</dialog>`;
|
|
54
50
|
}
|
|
55
51
|
};
|
|
56
52
|
_UUIModalSidebarElement_instances = new WeakSet();
|
|
57
53
|
getWidth_get = function() {
|
|
58
|
-
return this.
|
|
54
|
+
return this._dialogElement?.getBoundingClientRect().width ?? 0;
|
|
59
55
|
};
|
|
60
56
|
_UUIModalSidebarElement.styles = [
|
|
61
57
|
...UUIModalElement.styles,
|
|
@@ -70,7 +66,7 @@ _UUIModalSidebarElement.styles = [
|
|
|
70
66
|
--uui-modal-sidebar-left-gap: 64px;
|
|
71
67
|
}
|
|
72
68
|
}
|
|
73
|
-
|
|
69
|
+
dialog {
|
|
74
70
|
height: 100%;
|
|
75
71
|
width: 100%;
|
|
76
72
|
box-sizing: border-box;
|
|
@@ -83,22 +79,22 @@ _UUIModalSidebarElement.styles = [
|
|
|
83
79
|
var(--uui-color-surface)
|
|
84
80
|
);
|
|
85
81
|
}
|
|
86
|
-
:host([index='0'])
|
|
82
|
+
:host([index='0']) dialog {
|
|
87
83
|
box-shadow: var(--uui-shadow-depth-5);
|
|
88
84
|
}
|
|
89
|
-
:host(:not([index='0']))
|
|
85
|
+
:host(:not([index='0'])) dialog {
|
|
90
86
|
outline: 1px solid rgba(0, 0, 0, 0.1);
|
|
91
87
|
}
|
|
92
|
-
:host([hide])
|
|
88
|
+
:host([hide]) dialog {
|
|
93
89
|
display: none;
|
|
94
90
|
}
|
|
95
|
-
:host([size='large'])
|
|
91
|
+
:host([size='large']) dialog {
|
|
96
92
|
max-width: min(1200px, calc(100% - var(--uui-modal-sidebar-left-gap)));
|
|
97
93
|
}
|
|
98
|
-
:host([size='medium'])
|
|
94
|
+
:host([size='medium']) dialog {
|
|
99
95
|
max-width: min(800px, calc(100% - var(--uui-modal-sidebar-left-gap)));
|
|
100
96
|
}
|
|
101
|
-
:host([size='small'])
|
|
97
|
+
:host([size='small']) dialog {
|
|
102
98
|
max-width: min(500px, calc(100% - var(--uui-modal-sidebar-left-gap)));
|
|
103
99
|
}
|
|
104
100
|
`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-sidebar.element.js","sources":["../../../src/components/modal/modal-sidebar.element.ts"],"sourcesContent":["import type { PropertyValueMap } from 'lit';\nimport { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { UUIModalElement } from './modal.element.js';\nexport type UUIModalSidebarSize = 'small' | 'medium' | 'large' | 'full';\n\nexport class UUIModalSidebarElement extends UUIModalElement {\n /**\n * @attr\n */\n @property({ reflect: true })\n size: UUIModalSidebarSize = 'full';\n\n protected firstUpdated(\n _changedProperties: Map<string | number | symbol, unknown>,\n ): void {\n super.firstUpdated(_changedProperties);\n\n this.style.setProperty('--uui-modal-offset', -this.#getWidth + 'px');\n }\n\n protected updated(\n _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n ): void {\n super.updated(_changedProperties);\n\n // if we've reached over X layers of sidebars, hide for better performance.\n if (this.uniqueIndex > 10) {\n this.setAttribute('hide', '');\n } else {\n this.removeAttribute('hide');\n }\n }\n\n get #getWidth() {\n return this.
|
|
1
|
+
{"version":3,"file":"modal-sidebar.element.js","sources":["../../../src/components/modal/modal-sidebar.element.ts"],"sourcesContent":["import type { PropertyValueMap } from 'lit';\nimport { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { UUIModalElement } from './modal.element.js';\nexport type UUIModalSidebarSize = 'small' | 'medium' | 'large' | 'full';\n\nexport class UUIModalSidebarElement extends UUIModalElement {\n /**\n * @attr\n */\n @property({ reflect: true })\n size: UUIModalSidebarSize = 'full';\n\n protected firstUpdated(\n _changedProperties: Map<string | number | symbol, unknown>,\n ): void {\n super.firstUpdated(_changedProperties);\n\n this.style.setProperty('--uui-modal-offset', -this.#getWidth + 'px');\n }\n\n protected updated(\n _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n ): void {\n super.updated(_changedProperties);\n\n // if we've reached over X layers of sidebars, hide for better performance.\n if (this.uniqueIndex > 10) {\n this.setAttribute('hide', '');\n } else {\n this.removeAttribute('hide');\n }\n }\n\n get #getWidth() {\n return this._dialogElement?.getBoundingClientRect().width ?? 0;\n }\n\n forceClose() {\n if (this.isClosing) return;\n\n this.isClosing = true;\n this.style.setProperty('--uui-modal-offset', -this.#getWidth + 'px');\n\n setTimeout(() => {\n super.forceClose();\n }, this.transitionDuration);\n }\n\n render() {\n return html`<dialog>\n <slot></slot>\n </dialog>`;\n }\n\n static override readonly styles = [\n ...UUIModalElement.styles,\n css`\n :host {\n outline: none;\n --uui-modal-sidebar-left-gap: 24px;\n --uui-modal-sidebar-background: var(--uui-color-surface);\n }\n @media (min-width: 600px) {\n :host {\n --uui-modal-sidebar-left-gap: 64px;\n }\n }\n dialog {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n max-width: calc(100% - var(--uui-modal-sidebar-left-gap));\n margin-left: auto;\n right: var(--uui-modal-offset);\n transition: right var(--uui-modal-transition-duration, 250ms);\n background: var(\n --uui-modal-sidebar-background,\n var(--uui-color-surface)\n );\n }\n :host([index='0']) dialog {\n box-shadow: var(--uui-shadow-depth-5);\n }\n :host(:not([index='0'])) dialog {\n outline: 1px solid rgba(0, 0, 0, 0.1);\n }\n :host([hide]) dialog {\n display: none;\n }\n :host([size='large']) dialog {\n max-width: min(1200px, calc(100% - var(--uui-modal-sidebar-left-gap)));\n }\n :host([size='medium']) dialog {\n max-width: min(800px, calc(100% - var(--uui-modal-sidebar-left-gap)));\n }\n :host([size='small']) dialog {\n max-width: min(500px, calc(100% - var(--uui-modal-sidebar-left-gap)));\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAMO,MAAM,0BAAN,MAAM,gCAA+B,gBAAgB;AAAA,EAArD,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AAKL,SAAA,OAA4B;AAAA,EAAA;AAAA,EAElB,aACR,oBACM;AACN,UAAM,aAAa,kBAAkB;AAErC,SAAK,MAAM,YAAY,sBAAsB,CAAC,mBAAK,mDAAY,IAAI;AAAA,EACrE;AAAA,EAEU,QACR,oBACM;AACN,UAAM,QAAQ,kBAAkB;AAGhC,QAAI,KAAK,cAAc,IAAI;AACzB,WAAK,aAAa,QAAQ,EAAE;AAAA,IAC9B,OAAO;AACL,WAAK,gBAAgB,MAAM;AAAA,IAC7B;AAAA,EACF;AAAA,EAMA,aAAa;AACX,QAAI,KAAK,UAAW;AAEpB,SAAK,YAAY;AACjB,SAAK,MAAM,YAAY,sBAAsB,CAAC,mBAAK,mDAAY,IAAI;AAEnE,eAAW,MAAM;AACf,YAAM,WAAA;AAAA,IACR,GAAG,KAAK,kBAAkB;AAAA,EAC5B;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,EAGT;AAgDF;AA/FO;AA4BD,eAAA,WAAY;AACd,SAAO,KAAK,gBAAgB,sBAAA,EAAwB,SAAS;AAC/D;AAmBA,wBAAyB,SAAS;AAAA,EAChC,GAAG,gBAAgB;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAnDG,IAAM,yBAAN;AAKL,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAJhB,uBAKX,WAAA,MAAA;"}
|
|
@@ -3,7 +3,7 @@ export declare const UUIModalOpenEvent = "uui:modal-open";
|
|
|
3
3
|
export declare const UUIModalCloseEvent = "uui:modal-close";
|
|
4
4
|
export declare const UUIModalCloseEndEvent = "uui:modal-close-end";
|
|
5
5
|
export declare class UUIModalElement extends LitElement {
|
|
6
|
-
protected readonly
|
|
6
|
+
protected readonly _dialogElement?: HTMLDialogElement;
|
|
7
7
|
isOpen: boolean;
|
|
8
8
|
isClosing: boolean;
|
|
9
9
|
index: number;
|
|
@@ -16,7 +16,5 @@ export declare class UUIModalElement extends LitElement {
|
|
|
16
16
|
close: (event?: Event) => void;
|
|
17
17
|
protected _openModal(): void;
|
|
18
18
|
forceClose(): void;
|
|
19
|
-
private readonly _onKeydown;
|
|
20
|
-
private readonly _onFocusTrap;
|
|
21
19
|
static readonly styles: import("lit").CSSResult[];
|
|
22
20
|
}
|
|
@@ -45,17 +45,6 @@ const _UUIModalElement = class _UUIModalElement extends LitElement {
|
|
|
45
45
|
if (closeEvent.defaultPrevented) return;
|
|
46
46
|
this.forceClose();
|
|
47
47
|
};
|
|
48
|
-
this._onKeydown = (e) => {
|
|
49
|
-
if (e.key === "Escape" && this.index === 0) {
|
|
50
|
-
this.close();
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
this._onFocusTrap = (e) => {
|
|
54
|
-
if (this.index !== 0) return;
|
|
55
|
-
if (!this._popoverElement?.contains(e.target)) {
|
|
56
|
-
this._popoverElement?.focus();
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
48
|
}
|
|
60
49
|
get transitionDuration() {
|
|
61
50
|
return this._transitionDuration;
|
|
@@ -75,19 +64,13 @@ const _UUIModalElement = class _UUIModalElement extends LitElement {
|
|
|
75
64
|
}
|
|
76
65
|
_openModal() {
|
|
77
66
|
this.isOpen = true;
|
|
78
|
-
this.
|
|
79
|
-
|
|
80
|
-
this._popoverElement?.setAttribute("tabindex", "-1");
|
|
81
|
-
}
|
|
82
|
-
document.addEventListener("keydown", this._onKeydown);
|
|
83
|
-
document.addEventListener("focus", this._onFocusTrap, true);
|
|
67
|
+
this._dialogElement?.showModal();
|
|
68
|
+
this._dialogElement?.addEventListener("cancel", this.close);
|
|
84
69
|
}
|
|
85
70
|
forceClose() {
|
|
86
71
|
this.isClosing = true;
|
|
87
72
|
this.isOpen = false;
|
|
88
|
-
this.
|
|
89
|
-
document.removeEventListener("keydown", this._onKeydown);
|
|
90
|
-
document.removeEventListener("focus", this._onFocusTrap, true);
|
|
73
|
+
this._dialogElement?.close();
|
|
91
74
|
this.dispatchEvent(new CustomEvent("close-end"));
|
|
92
75
|
this.dispatchEvent(new CustomEvent(UUIModalCloseEndEvent));
|
|
93
76
|
this.remove();
|
|
@@ -95,9 +78,7 @@ const _UUIModalElement = class _UUIModalElement extends LitElement {
|
|
|
95
78
|
};
|
|
96
79
|
_UUIModalElement.styles = [
|
|
97
80
|
css`
|
|
98
|
-
|
|
99
|
-
position: fixed;
|
|
100
|
-
inset: 0;
|
|
81
|
+
dialog {
|
|
101
82
|
display: block;
|
|
102
83
|
margin: 0;
|
|
103
84
|
padding: 0;
|
|
@@ -107,7 +88,11 @@ _UUIModalElement.styles = [
|
|
|
107
88
|
background: none;
|
|
108
89
|
color: var(--uui-color-text);
|
|
109
90
|
}
|
|
110
|
-
|
|
91
|
+
dialog::backdrop {
|
|
92
|
+
background: none;
|
|
93
|
+
opacity: 0;
|
|
94
|
+
}
|
|
95
|
+
dialog::after {
|
|
111
96
|
content: '';
|
|
112
97
|
position: absolute;
|
|
113
98
|
inset: 0;
|
|
@@ -117,19 +102,15 @@ _UUIModalElement.styles = [
|
|
|
117
102
|
transition: opacity var(--uui-modal-transition-duration, 250ms);
|
|
118
103
|
z-index: 1;
|
|
119
104
|
}
|
|
120
|
-
:host([index='0'])
|
|
105
|
+
:host([index='0']) dialog::after {
|
|
121
106
|
opacity: 0;
|
|
122
|
-
pointer-events: none;
|
|
123
|
-
}
|
|
124
|
-
:host(:not([index='0'])) [popover]::after {
|
|
125
|
-
pointer-events: auto;
|
|
126
107
|
}
|
|
127
108
|
`
|
|
128
109
|
];
|
|
129
110
|
let UUIModalElement = _UUIModalElement;
|
|
130
111
|
__decorateClass([
|
|
131
|
-
query("
|
|
132
|
-
], UUIModalElement.prototype, "
|
|
112
|
+
query("dialog")
|
|
113
|
+
], UUIModalElement.prototype, "_dialogElement", 2);
|
|
133
114
|
__decorateClass([
|
|
134
115
|
property({ type: Boolean, reflect: true, attribute: "is-open" })
|
|
135
116
|
], UUIModalElement.prototype, "isOpen", 2);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.element.js","sources":["../../../src/components/modal/modal.element.ts"],"sourcesContent":["import { LitElement, css } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nexport const UUIModalOpenEvent = 'uui:modal-open';\nexport const UUIModalCloseEvent = 'uui:modal-close';\nexport const UUIModalCloseEndEvent = 'uui:modal-close-end';\n\nexport class UUIModalElement extends LitElement {\n @query('
|
|
1
|
+
{"version":3,"file":"modal.element.js","sources":["../../../src/components/modal/modal.element.ts"],"sourcesContent":["import { LitElement, css } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nexport const UUIModalOpenEvent = 'uui:modal-open';\nexport const UUIModalCloseEvent = 'uui:modal-close';\nexport const UUIModalCloseEndEvent = 'uui:modal-close-end';\n\nexport class UUIModalElement extends LitElement {\n @query('dialog')\n protected readonly _dialogElement?: HTMLDialogElement;\n\n @property({ type: Boolean, reflect: true, attribute: 'is-open' })\n isOpen = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'is-closing' })\n isClosing = false;\n\n @property({ type: Number, reflect: true })\n index = 0;\n\n @property({ type: Number, reflect: true, attribute: 'unique-index' })\n uniqueIndex = 0;\n\n private _transitionDuration = 250;\n\n @property({ type: Number, attribute: 'transition-duration' })\n public get transitionDuration() {\n return this._transitionDuration;\n }\n public set transitionDuration(value: number) {\n this._transitionDuration = value;\n this.style.setProperty(\n '--uui-modal-transition-duration',\n this._transitionDuration + 'ms',\n );\n }\n\n protected firstUpdated(\n _changedProperties: Map<string | number | symbol, unknown>,\n ): void {\n super.firstUpdated(_changedProperties);\n\n if (!this.isClosing) {\n this.open();\n }\n }\n\n public open = (event?: Event) => {\n event?.preventDefault();\n event?.stopImmediatePropagation();\n\n const openEvent = new CustomEvent(UUIModalOpenEvent, {\n cancelable: true,\n });\n const legacyOpenEvent = new CustomEvent('open', {\n cancelable: true,\n });\n\n this.dispatchEvent(openEvent);\n this.dispatchEvent(legacyOpenEvent);\n if (openEvent.defaultPrevented || legacyOpenEvent.defaultPrevented) return;\n\n this._openModal();\n };\n\n public close = (event?: Event) => {\n event?.preventDefault();\n event?.stopImmediatePropagation();\n\n const closeEvent = new CustomEvent(UUIModalCloseEvent, {\n cancelable: true,\n });\n this.dispatchEvent(closeEvent);\n\n if (closeEvent.defaultPrevented) return;\n\n this.forceClose();\n };\n\n protected _openModal() {\n this.isOpen = true;\n this._dialogElement?.showModal();\n this._dialogElement?.addEventListener('cancel', this.close);\n }\n\n public forceClose() {\n this.isClosing = true;\n this.isOpen = false;\n this._dialogElement?.close();\n\n this.dispatchEvent(new CustomEvent('close-end'));\n this.dispatchEvent(new CustomEvent(UUIModalCloseEndEvent));\n\n this.remove();\n }\n\n static override readonly styles = [\n css`\n dialog {\n display: block;\n margin: 0;\n padding: 0;\n max-width: unset;\n max-height: unset;\n border: none;\n background: none;\n color: var(--uui-color-text);\n }\n dialog::backdrop {\n background: none;\n opacity: 0;\n }\n dialog::after {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--uui-modal-color-backdrop, rgba(0, 0, 0, 0.5));\n pointer-events: none;\n opacity: 1;\n transition: opacity var(--uui-modal-transition-duration, 250ms);\n z-index: 1;\n }\n :host([index='0']) dialog::after {\n opacity: 0;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAGO,MAAM,oBAAoB;AAC1B,MAAM,qBAAqB;AAC3B,MAAM,wBAAwB;AAE9B,MAAM,mBAAN,MAAM,yBAAwB,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAKL,SAAA,SAAS;AAGT,SAAA,YAAY;AAGZ,SAAA,QAAQ;AAGR,SAAA,cAAc;AAEd,SAAQ,sBAAsB;AAwB9B,SAAO,OAAO,CAAC,UAAkB;AAC/B,aAAO,eAAA;AACP,aAAO,yBAAA;AAEP,YAAM,YAAY,IAAI,YAAY,mBAAmB;AAAA,QACnD,YAAY;AAAA,MAAA,CACb;AACD,YAAM,kBAAkB,IAAI,YAAY,QAAQ;AAAA,QAC9C,YAAY;AAAA,MAAA,CACb;AAED,WAAK,cAAc,SAAS;AAC5B,WAAK,cAAc,eAAe;AAClC,UAAI,UAAU,oBAAoB,gBAAgB,iBAAkB;AAEpE,WAAK,WAAA;AAAA,IACP;AAEA,SAAO,QAAQ,CAAC,UAAkB;AAChC,aAAO,eAAA;AACP,aAAO,yBAAA;AAEP,YAAM,aAAa,IAAI,YAAY,oBAAoB;AAAA,QACrD,YAAY;AAAA,MAAA,CACb;AACD,WAAK,cAAc,UAAU;AAE7B,UAAI,WAAW,iBAAkB;AAEjC,WAAK,WAAA;AAAA,IACP;AAAA,EAAA;AAAA,EAnDA,IAAW,qBAAqB;AAC9B,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAW,mBAAmB,OAAe;AAC3C,SAAK,sBAAsB;AAC3B,SAAK,MAAM;AAAA,MACT;AAAA,MACA,KAAK,sBAAsB;AAAA,IAAA;AAAA,EAE/B;AAAA,EAEU,aACR,oBACM;AACN,UAAM,aAAa,kBAAkB;AAErC,QAAI,CAAC,KAAK,WAAW;AACnB,WAAK,KAAA;AAAA,IACP;AAAA,EACF;AAAA,EAkCU,aAAa;AACrB,SAAK,SAAS;AACd,SAAK,gBAAgB,UAAA;AACrB,SAAK,gBAAgB,iBAAiB,UAAU,KAAK,KAAK;AAAA,EAC5D;AAAA,EAEO,aAAa;AAClB,SAAK,YAAY;AACjB,SAAK,SAAS;AACd,SAAK,gBAAgB,MAAA;AAErB,SAAK,cAAc,IAAI,YAAY,WAAW,CAAC;AAC/C,SAAK,cAAc,IAAI,YAAY,qBAAqB,CAAC;AAEzD,SAAK,OAAA;AAAA,EACP;AAiCF;AA/BE,iBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA1FG,IAAM,kBAAN;AAEc,gBAAA;AAAA,EADlB,MAAM,QAAQ;AAAA,GADJ,gBAEQ,WAAA,kBAAA,CAAA;AAGnB,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,WAAW;AAAA,GAJrD,gBAKX,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,cAAc;AAAA,GAPxD,gBAQX,WAAA,aAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAV9B,gBAWX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB;AAAA,GAbzD,gBAcX,WAAA,eAAA,CAAA;AAKW,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,QAAQ,WAAW,uBAAuB;AAAA,GAlBjD,gBAmBA,WAAA,sBAAA,CAAA;"}
|
package/dist/package.json.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umbraco-ui/uui",
|
|
3
|
-
"version": "2.0.0-rc.
|
|
3
|
+
"version": "2.0.0-rc.1",
|
|
4
4
|
"description": "The Umbraco UI Library - web components for the Umbraco backoffice.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -147,5 +147,5 @@
|
|
|
147
147
|
"url": "https://uui.umbraco.com"
|
|
148
148
|
},
|
|
149
149
|
"packageManager": "npm@11.1.0",
|
|
150
|
-
"gitHead": "
|
|
150
|
+
"gitHead": "c43beb9fece206019f530824803797532ab78376"
|
|
151
151
|
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import type { TemplateResult } from 'lit';
|
|
2
|
-
import { LitElement } from 'lit';
|
|
3
|
-
import './modal-container.js';
|
|
4
|
-
import './modal.js';
|
|
5
|
-
import '../dialog-layout/dialog-layout.js';
|
|
6
|
-
import '../button/button.js';
|
|
7
|
-
import '../box/box.js';
|
|
8
|
-
import '../toast-notification/toast-notification.js';
|
|
9
|
-
import '../toast-notification-container/toast-notification-container.js';
|
|
10
|
-
import '../toast-notification-layout/toast-notification-layout.js';
|
|
11
|
-
export declare class UUIModalWithToastsExampleElement extends LitElement {
|
|
12
|
-
#private;
|
|
13
|
-
private readonly _modals;
|
|
14
|
-
private _toastCounter;
|
|
15
|
-
private _dialogCounter;
|
|
16
|
-
private _messageCounter;
|
|
17
|
-
private readonly _onModalOpen;
|
|
18
|
-
connectedCallback(): void;
|
|
19
|
-
disconnectedCallback(): void;
|
|
20
|
-
render(): TemplateResult<1>;
|
|
21
|
-
static readonly styles: import("lit").CSSResult;
|
|
22
|
-
}
|