@sbb-esta/lyne-elements-dev 5.0.2-dev.1782197952 → 5.0.2-dev.1782216237
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +3 -2
- package/development/core/controllers/id-reference-controller.d.ts +1 -0
- package/development/core.js +1 -0
- package/development/dialog/dialog/dialog.component.d.ts +1 -1
- package/development/dialog.pure.js +6 -238
- package/dialog.pure.js +8 -8
- package/package.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -9056,6 +9056,7 @@
|
|
|
9056
9056
|
"description": "Find the element by id in the current document fragment"
|
|
9057
9057
|
}
|
|
9058
9058
|
],
|
|
9059
|
+
"deprecated": "Use idReference decorator instead. This controller will be removed in a future release.",
|
|
9059
9060
|
"classGenerics": "T extends LitElement"
|
|
9060
9061
|
}
|
|
9061
9062
|
],
|
|
@@ -106813,7 +106814,7 @@
|
|
|
106813
106814
|
"name": "assignDialogResult",
|
|
106814
106815
|
"declaration": {
|
|
106815
106816
|
"name": "assignOverlayResult",
|
|
106816
|
-
"module": "../../overlay
|
|
106817
|
+
"module": "../../overlay.pure.js"
|
|
106817
106818
|
}
|
|
106818
106819
|
},
|
|
106819
106820
|
{
|
|
@@ -106821,7 +106822,7 @@
|
|
|
106821
106822
|
"name": "SbbDialogCloseEvent",
|
|
106822
106823
|
"declaration": {
|
|
106823
106824
|
"name": "SbbOverlayCloseEvent",
|
|
106824
|
-
"module": "../../overlay
|
|
106825
|
+
"module": "../../overlay.pure.js"
|
|
106825
106826
|
}
|
|
106826
106827
|
},
|
|
106827
106828
|
{
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type LitElement, type ReactiveController } from 'lit';
|
|
2
2
|
/**
|
|
3
3
|
* Tracks id changes in the DOM and calls component when matching with requestUpdate().
|
|
4
|
+
* @deprecated Use idReference decorator instead. This controller will be removed in a future release.
|
|
4
5
|
*/
|
|
5
6
|
export declare class SbbIdReferenceController<T extends LitElement> implements ReactiveController {
|
|
6
7
|
private _host;
|
package/development/core.js
CHANGED
|
@@ -3213,6 +3213,7 @@ var SbbEscapableOverlayController = class {
|
|
|
3213
3213
|
const observers$1 = /* @__PURE__ */ new WeakMap();
|
|
3214
3214
|
/**
|
|
3215
3215
|
* Tracks id changes in the DOM and calls component when matching with requestUpdate().
|
|
3216
|
+
* @deprecated Use idReference decorator instead. This controller will be removed in a future release.
|
|
3216
3217
|
*/
|
|
3217
3218
|
var SbbIdReferenceController = class {
|
|
3218
3219
|
constructor(_host, _idRef, _observers = observers$1) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
|
|
2
2
|
import { SbbOverlayBaseElement } from '../../overlay.pure.ts';
|
|
3
|
-
export { assignOverlayResult as assignDialogResult, SbbOverlayCloseEvent as SbbDialogCloseEvent, } from '../../overlay
|
|
3
|
+
export { assignOverlayResult as assignDialogResult, SbbOverlayCloseEvent as SbbDialogCloseEvent, } from '../../overlay.pure.ts';
|
|
4
4
|
/**
|
|
5
5
|
* It displays an interactive overlay element.
|
|
6
6
|
*
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { html,
|
|
1
|
+
import { html, unsafeCSS } from "lit";
|
|
2
2
|
import { SbbActionGroupElement } from "./action-group.pure.js";
|
|
3
3
|
import { SbbSecondaryButtonElement } from "./button.pure.js";
|
|
4
|
-
import { SbbElement,
|
|
4
|
+
import { SbbElement, SbbLanguageController, SbbNegativeMixin, SbbPropertyWatcherController, hostScrollbarStyles, i18nCloseDialog, isZeroAnimationDuration, screenReaderOnlyStyles } from "./core.js";
|
|
5
5
|
import { SbbTitleBase } from "./title.pure.js";
|
|
6
6
|
import { __esDecorate, __runInitializers } from "tslib";
|
|
7
7
|
import { ResizeController } from "@lit-labs/observers/resize-controller.js";
|
|
8
8
|
import { property } from "lit/decorators.js";
|
|
9
9
|
import { ref } from "lit/directives/ref.js";
|
|
10
10
|
import { html as html$1 } from "lit/static-html.js";
|
|
11
|
-
import { SbbOverlayBaseElement, SbbOverlayCloseEvent as
|
|
11
|
+
import { SbbOverlayBaseElement, SbbOverlayCloseEvent, SbbOverlayCloseEvent as SbbDialogCloseEvent, assignOverlayResult as assignDialogResult, overlayRefs } from "./overlay.pure.js";
|
|
12
12
|
|
|
13
13
|
//#region src/elements/dialog/dialog-actions/dialog-actions.scss?inline
|
|
14
14
|
var dialog_actions_default = ":host {\n grid-area: actions;\n padding-inline: var(--sbb-dialog-padding-inline);\n padding-block: var(--sbb-dialog-padding-block);\n margin-block-start: auto;\n background-color: var(--sbb-dialog-background-color);\n transition: box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n box-shadow: var(--sbb-dialog-block-end-box-shadow, none);\n position: relative;\n}\n:host::before {\n content: \"\";\n display: block;\n position: absolute;\n align-self: start;\n border-block-start: var(--sbb-border-width-1x) solid var(--sbb-dialog-actions-border-color);\n transition: border-color var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n inset: 0 auto auto 0;\n width: 100%;\n}\n@media (forced-colors: active) {\n :host::before {\n border-color: CanvasText;\n }\n}\n";
|
|
@@ -132,238 +132,6 @@ var SbbDialogTitleElement = class extends SbbNegativeMixin(SbbTitleBase) {
|
|
|
132
132
|
//#region src/elements/dialog/dialog/dialog.scss?inline
|
|
133
133
|
var dialog_default = ":host {\n --sbb-dialog-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-6x)\n );\n --sbb-dialog-padding-block: var(--sbb-spacing-responsive-xs);\n --sbb-dialog-shadow-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n display: none;\n position: fixed;\n inset: var(--sbb-dialog-inset);\n z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index));\n}\n\n:host(:is(:state(top-shadow),[state--top-shadow])) {\n --sbb-dialog-block-start-box-shadow: var(--_sbb-dialog-block-shadow);\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n display: block;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n --sbb-dialog-pointer-events: all;\n --sbb-dialog-backdrop-color: var(--sbb-background-color-3);\n --sbb-dialog-backdrop-visibility: visible;\n --sbb-dialog-backdrop-pointer-events: all;\n}\n\n:host([backdrop=translucent]:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n --sbb-dialog-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 50%, transparent);\n}\n\n:host([backdrop=opaque]:not([negative]):is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n --sbb-dialog-backdrop-color: var(--sbb-background-color-3);\n}\n\n:host(:not([negative])) {\n --_sbb-dialog-color: var(--sbb-dialog-color);\n --_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow);\n --sbb-dialog-actions-border-color: var(--sbb-background-color-4);\n --sbb-dialog-background-color: var(--sbb-background-color-1);\n}\n\n:host([negative]) {\n --_sbb-dialog-color: var(--sbb-dialog-color-negative);\n --_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow-negative);\n --sbb-dialog-background-color: var(--sbb-background-color-1-negative);\n --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);\n --sbb-dialog-backdrop-color: var(--sbb-background-color-3-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:is(:state(bottom-shadow),[state--bottom-shadow])) {\n --sbb-dialog-block-end-box-shadow: var(--_sbb-dialog-block-shadow);\n --sbb-dialog-actions-border-color: transparent;\n}\n\n:host(:not(:is(:state(state-closed),[state--state-closed]))) {\n --sbb-dialog-inset-block: 0;\n --sbb-dialog-inset-inline: 0;\n}\n\n.sbb-dialog__container {\n pointer-events: var(--sbb-dialog-pointer-events);\n display: flex;\n justify-content: center;\n align-items: center;\n position: fixed;\n inset-block: var(--sbb-dialog-inset-block);\n inset-inline: var(--sbb-dialog-inset-inline);\n}\n.sbb-dialog__container::before {\n content: \"\";\n visibility: var(--sbb-dialog-backdrop-visibility);\n pointer-events: var(--sbb-dialog-backdrop-pointer-events);\n position: fixed;\n inset-block: var(--sbb-dialog-inset-block);\n inset-inline: var(--sbb-dialog-inset-inline);\n background-color: var(--sbb-dialog-backdrop-color);\n transition-duration: var(--sbb-dialog-animation-duration);\n transition-timing-function: var(--sbb-dialog-animation-easing);\n transition-property: background-color, visibility;\n}\n\n.sbb-dialog {\n display: none;\n position: absolute;\n inset-inline: 0;\n inset-block: auto 0;\n border: none;\n border-radius: var(--sbb-dialog-border-radius) var(--sbb-dialog-border-radius) 0 0;\n max-width: var(--sbb-dialog-max-width);\n max-height: var(--sbb-dialog-max-height);\n color: var(--_sbb-dialog-color);\n background-color: var(--sbb-dialog-background-color);\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-dialog {\n display: block;\n animation-name: open;\n animation-duration: var(--sbb-dialog-animation-duration);\n animation-timing-function: ease;\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-dialog {\n pointer-events: none;\n animation-name: close;\n}\n@media (forced-colors: active) {\n .sbb-dialog {\n outline: var(--sbb-border-width-1x) solid CanvasText;\n }\n}\n@media (min-width: calc(37.5rem)) {\n .sbb-dialog {\n height: var(--sbb-dialog-height);\n width: var(--sbb-dialog-width);\n inset: unset;\n border-radius: var(--sbb-dialog-border-radius);\n overflow: hidden;\n }\n}\n\n:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n.sbb-dialog__wrapper {\n max-height: var(--sbb-dialog-max-height);\n}\n@media (min-width: calc(37.5rem)) {\n :host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n .sbb-dialog__wrapper {\n width: var(--sbb-dialog-width);\n height: var(--sbb-dialog-height);\n }\n}\n\n:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n:host(:not(:is(:state(has-intermediate-element),[state--has-intermediate-element]))) .sbb-dialog__wrapper {\n display: grid;\n grid-template: \"title close-button\" auto \"content content\" 1fr \"actions actions\" auto/1fr auto;\n gap: 0;\n}\n\n@keyframes open {\n from {\n opacity: 0;\n translate: 0 var(--sbb-dialog-translate-y, 100%);\n }\n to {\n opacity: 1;\n translate: 0 0;\n }\n}\n@keyframes close {\n from {\n opacity: 1;\n translate: 0 0;\n }\n to {\n opacity: 0;\n translate: 0 var(--sbb-dialog-translate-y, 100%);\n }\n}\n";
|
|
134
134
|
|
|
135
|
-
//#endregion
|
|
136
|
-
//#region src/elements/overlay/overlay-base-element.ts
|
|
137
|
-
const overlayResultMap = /* @__PURE__ */ new WeakMap();
|
|
138
|
-
var SbbOverlayCloseEvent = class extends Event {
|
|
139
|
-
constructor(name, { cancelable, closeAttribute, closeTarget, result }) {
|
|
140
|
-
super(name, { cancelable });
|
|
141
|
-
this.result = result ?? (!closeTarget ? null : overlayResultMap.get(closeTarget) ?? (closeTarget.getAttribute(closeAttribute)?.trim() || null));
|
|
142
|
-
this.closeTarget = closeTarget ?? null;
|
|
143
|
-
}
|
|
144
|
-
};
|
|
145
|
-
function assignOverlayResult(element, result) {
|
|
146
|
-
overlayResultMap.set(element, result);
|
|
147
|
-
}
|
|
148
|
-
const overlayRefs$1 = [];
|
|
149
|
-
let SbbOverlayBaseElement$1 = (() => {
|
|
150
|
-
let _classSuper = SbbNegativeMixin(SbbOpenCloseBaseElement);
|
|
151
|
-
let _trigger_decorators;
|
|
152
|
-
let _trigger_initializers = [];
|
|
153
|
-
let _trigger_extraInitializers = [];
|
|
154
|
-
let _accessibilityLabel_decorators;
|
|
155
|
-
let _accessibilityLabel_initializers = [];
|
|
156
|
-
let _accessibilityLabel_extraInitializers = [];
|
|
157
|
-
let _skipFocusRestoration_decorators;
|
|
158
|
-
let _skipFocusRestoration_initializers = [];
|
|
159
|
-
let _skipFocusRestoration_extraInitializers = [];
|
|
160
|
-
return class SbbOverlayBaseElement extends _classSuper {
|
|
161
|
-
constructor() {
|
|
162
|
-
super(...arguments);
|
|
163
|
-
this.#trigger_accessor_storage = __runInitializers(this, _trigger_initializers, null);
|
|
164
|
-
this.#accessibilityLabel_accessor_storage = (__runInitializers(this, _trigger_extraInitializers), __runInitializers(this, _accessibilityLabel_initializers, ""));
|
|
165
|
-
this.#skipFocusRestoration_accessor_storage = (__runInitializers(this, _accessibilityLabel_extraInitializers), __runInitializers(this, _skipFocusRestoration_initializers, false));
|
|
166
|
-
this.lastFocusedElement = __runInitializers(this, _skipFocusRestoration_extraInitializers);
|
|
167
|
-
this.focusTrapController = new SbbFocusTrapController(this);
|
|
168
|
-
this.scrollHandler = new SbbScrollHandler();
|
|
169
|
-
this.language = new SbbLanguageController(this);
|
|
170
|
-
this.inertController = new SbbInertController(this);
|
|
171
|
-
this.escapableOverlayController = new SbbEscapableOverlayController(this);
|
|
172
|
-
this._ariaLiveRefToggle = false;
|
|
173
|
-
this._triggerElement = null;
|
|
174
|
-
}
|
|
175
|
-
static {
|
|
176
|
-
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
177
|
-
_trigger_decorators = [idReference(), property()];
|
|
178
|
-
_accessibilityLabel_decorators = [forceType(), property({ attribute: "accessibility-label" })];
|
|
179
|
-
_skipFocusRestoration_decorators = [forceType(), property({ type: Boolean })];
|
|
180
|
-
__esDecorate(this, null, _trigger_decorators, {
|
|
181
|
-
kind: "accessor",
|
|
182
|
-
name: "trigger",
|
|
183
|
-
static: false,
|
|
184
|
-
private: false,
|
|
185
|
-
access: {
|
|
186
|
-
has: (obj) => "trigger" in obj,
|
|
187
|
-
get: (obj) => obj.trigger,
|
|
188
|
-
set: (obj, value) => {
|
|
189
|
-
obj.trigger = value;
|
|
190
|
-
}
|
|
191
|
-
},
|
|
192
|
-
metadata: _metadata
|
|
193
|
-
}, _trigger_initializers, _trigger_extraInitializers);
|
|
194
|
-
__esDecorate(this, null, _accessibilityLabel_decorators, {
|
|
195
|
-
kind: "accessor",
|
|
196
|
-
name: "accessibilityLabel",
|
|
197
|
-
static: false,
|
|
198
|
-
private: false,
|
|
199
|
-
access: {
|
|
200
|
-
has: (obj) => "accessibilityLabel" in obj,
|
|
201
|
-
get: (obj) => obj.accessibilityLabel,
|
|
202
|
-
set: (obj, value) => {
|
|
203
|
-
obj.accessibilityLabel = value;
|
|
204
|
-
}
|
|
205
|
-
},
|
|
206
|
-
metadata: _metadata
|
|
207
|
-
}, _accessibilityLabel_initializers, _accessibilityLabel_extraInitializers);
|
|
208
|
-
__esDecorate(this, null, _skipFocusRestoration_decorators, {
|
|
209
|
-
kind: "accessor",
|
|
210
|
-
name: "skipFocusRestoration",
|
|
211
|
-
static: false,
|
|
212
|
-
private: false,
|
|
213
|
-
access: {
|
|
214
|
-
has: (obj) => "skipFocusRestoration" in obj,
|
|
215
|
-
get: (obj) => obj.skipFocusRestoration,
|
|
216
|
-
set: (obj, value) => {
|
|
217
|
-
obj.skipFocusRestoration = value;
|
|
218
|
-
}
|
|
219
|
-
},
|
|
220
|
-
metadata: _metadata
|
|
221
|
-
}, _skipFocusRestoration_initializers, _skipFocusRestoration_extraInitializers);
|
|
222
|
-
if (_metadata) Object.defineProperty(this, Symbol.metadata, {
|
|
223
|
-
enumerable: true,
|
|
224
|
-
configurable: true,
|
|
225
|
-
writable: true,
|
|
226
|
-
value: _metadata
|
|
227
|
-
});
|
|
228
|
-
}
|
|
229
|
-
static {
|
|
230
|
-
this.styles = [popoverResetStyles, screenReaderOnlyStyles];
|
|
231
|
-
}
|
|
232
|
-
#trigger_accessor_storage;
|
|
233
|
-
/**
|
|
234
|
-
* The element that will trigger the menu overlay.
|
|
235
|
-
*
|
|
236
|
-
* For attribute usage, provide an id reference.
|
|
237
|
-
*/
|
|
238
|
-
get trigger() {
|
|
239
|
-
return this.#trigger_accessor_storage;
|
|
240
|
-
}
|
|
241
|
-
set trigger(value) {
|
|
242
|
-
this.#trigger_accessor_storage = value;
|
|
243
|
-
}
|
|
244
|
-
#accessibilityLabel_accessor_storage;
|
|
245
|
-
/** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
|
|
246
|
-
get accessibilityLabel() {
|
|
247
|
-
return this.#accessibilityLabel_accessor_storage;
|
|
248
|
-
}
|
|
249
|
-
set accessibilityLabel(value) {
|
|
250
|
-
this.#accessibilityLabel_accessor_storage = value;
|
|
251
|
-
}
|
|
252
|
-
#skipFocusRestoration_accessor_storage;
|
|
253
|
-
/**
|
|
254
|
-
* Whether to skip restoring focus to the previously-focused element when the overlay is closed.
|
|
255
|
-
* Note that automatic focus restoration is an accessibility feature, and it is recommended that
|
|
256
|
-
* you provide your own equivalent, if you decide to turn it off.
|
|
257
|
-
*/
|
|
258
|
-
get skipFocusRestoration() {
|
|
259
|
-
return this.#skipFocusRestoration_accessor_storage;
|
|
260
|
-
}
|
|
261
|
-
set skipFocusRestoration(value) {
|
|
262
|
-
this.#skipFocusRestoration_accessor_storage = value;
|
|
263
|
-
}
|
|
264
|
-
/** Opens the component. */
|
|
265
|
-
open() {
|
|
266
|
-
if (this.state === "opening" || this.state === "opened" || this._hasClosedParent() || !this.dispatchBeforeOpenEvent()) return;
|
|
267
|
-
this.lastFocusedElement = document.activeElement;
|
|
268
|
-
this.showPopover?.();
|
|
269
|
-
this.state = "opening";
|
|
270
|
-
if (this._triggerElement) this._triggerElement.ariaExpanded = "true";
|
|
271
|
-
overlayRefs$1.push(this);
|
|
272
|
-
this.scrollHandler.disableScroll();
|
|
273
|
-
this.escapableOverlayController.connect();
|
|
274
|
-
this.attachOpenOverlayEvents();
|
|
275
|
-
if (this.isZeroAnimationDuration()) this.handleOpening();
|
|
276
|
-
}
|
|
277
|
-
/** Closes the component. */
|
|
278
|
-
close(result) {
|
|
279
|
-
this._close(result, void 0);
|
|
280
|
-
}
|
|
281
|
-
_close(result, target) {
|
|
282
|
-
if (this.state === "closing" || this.state === "closed") return;
|
|
283
|
-
this.lastResult = result ?? null;
|
|
284
|
-
this.lastClosedTarget = target;
|
|
285
|
-
if (!this.dispatchBeforeCloseEvent()) return;
|
|
286
|
-
this.state = "closing";
|
|
287
|
-
if (this._triggerElement) this._triggerElement.ariaExpanded = "false";
|
|
288
|
-
this.removeAriaLiveRefContent();
|
|
289
|
-
if (this.isZeroAnimationDuration()) this.handleClosing();
|
|
290
|
-
}
|
|
291
|
-
/**
|
|
292
|
-
* Check if there is a parent dialog or overlay in the DOM that is closed.
|
|
293
|
-
* In this case, the overlay should not be opened because it would break the state.
|
|
294
|
-
* Not nested but stacked overlays are supported so this logic does not apply in this case.
|
|
295
|
-
*/
|
|
296
|
-
_hasClosedParent() {
|
|
297
|
-
const parentDialog = this.parentElement?.closest("sbb-dialog, sbb-overlay");
|
|
298
|
-
return parentDialog?.state === "closed" || parentDialog?.state === "closing";
|
|
299
|
-
}
|
|
300
|
-
connectedCallback() {
|
|
301
|
-
this.popover = "manual";
|
|
302
|
-
super.connectedCallback();
|
|
303
|
-
if (this.hasUpdated) this._configureTrigger();
|
|
304
|
-
}
|
|
305
|
-
_configureTrigger() {
|
|
306
|
-
if (this.trigger === this._triggerElement) return;
|
|
307
|
-
this._triggerAbortController?.abort();
|
|
308
|
-
removeAriaOverlayTriggerProperties(this._triggerElement);
|
|
309
|
-
this._triggerElement = this.trigger;
|
|
310
|
-
if (!this._triggerElement) return;
|
|
311
|
-
setAriaOverlayTriggerProperties(this, this._triggerElement, "dialog", this.state);
|
|
312
|
-
this._triggerAbortController = new AbortController();
|
|
313
|
-
this._triggerElement.addEventListener("click", () => this.open(), { signal: this._triggerAbortController.signal });
|
|
314
|
-
}
|
|
315
|
-
firstUpdated(changedProperties) {
|
|
316
|
-
super.firstUpdated(changedProperties);
|
|
317
|
-
this._ariaLiveRef = this.shadowRoot.querySelector(".sbb-screen-reader-only");
|
|
318
|
-
this._configureTrigger();
|
|
319
|
-
if (this.isOpen) setTimeout(() => {
|
|
320
|
-
this.focusTrapController.focusInitialElement();
|
|
321
|
-
}, 0);
|
|
322
|
-
}
|
|
323
|
-
disconnectedCallback() {
|
|
324
|
-
super.disconnectedCallback();
|
|
325
|
-
this.openOverlayController?.abort();
|
|
326
|
-
this.removeInstanceFromGlobalCollection();
|
|
327
|
-
this.scrollHandler.enableScroll();
|
|
328
|
-
this._triggerElement = null;
|
|
329
|
-
this._triggerAbortController?.abort();
|
|
330
|
-
}
|
|
331
|
-
requestUpdate(name, oldValue, options) {
|
|
332
|
-
super.requestUpdate(name, oldValue, options);
|
|
333
|
-
if (!isServer && (!name || name === "trigger") && this.hasUpdated) this._configureTrigger();
|
|
334
|
-
}
|
|
335
|
-
attachOpenOverlayEvents() {
|
|
336
|
-
this.openOverlayController = new AbortController();
|
|
337
|
-
window.addEventListener("keydown", () => {
|
|
338
|
-
this.removeAriaLiveRefContent();
|
|
339
|
-
}, { signal: this.openOverlayController.signal });
|
|
340
|
-
window.addEventListener("click", () => this.removeAriaLiveRefContent(), { signal: this.openOverlayController.signal });
|
|
341
|
-
}
|
|
342
|
-
removeInstanceFromGlobalCollection() {
|
|
343
|
-
const indexInOverlayRefs = overlayRefs$1.indexOf(this);
|
|
344
|
-
if (indexInOverlayRefs > -1) overlayRefs$1.splice(indexInOverlayRefs, 1);
|
|
345
|
-
}
|
|
346
|
-
closeOnSbbOverlayCloseClick(event) {
|
|
347
|
-
const overlayCloseElement = event.composedPath().find((el, i, a) => el instanceof HTMLElement && i < a.indexOf(this) && (el.hasAttribute(this.closeAttribute) || el.localName === this.closeTag) && !el.hasAttribute("disabled") && (el.closest(this.localName) === this || (this.shadowRoot?.contains(el) ?? false)));
|
|
348
|
-
if (!overlayCloseElement) return;
|
|
349
|
-
if (overlayRefs$1.length) overlayRefs$1[overlayRefs$1.length - 1]._close(null, overlayCloseElement);
|
|
350
|
-
}
|
|
351
|
-
removeAriaLiveRefContent() {
|
|
352
|
-
if (!this._ariaLiveRef) return;
|
|
353
|
-
this._ariaLiveRef.textContent = "";
|
|
354
|
-
}
|
|
355
|
-
setAriaLiveRefContent(label) {
|
|
356
|
-
if (!this._ariaLiveRef) return;
|
|
357
|
-
this._ariaLiveRefToggle = !this._ariaLiveRefToggle;
|
|
358
|
-
this._ariaLiveRef.textContent = `${i18nDialog[this.language.current]}${label ? `, ${label}` : ""}${this._ariaLiveRefToggle ? "\xA0" : ""}`;
|
|
359
|
-
}
|
|
360
|
-
onOverlayAnimationEnd(event) {
|
|
361
|
-
if (event.animationName === "open" && this.state === "opening") this.handleOpening();
|
|
362
|
-
else if (event.animationName === "close" && this.state === "closing") this.handleClosing();
|
|
363
|
-
}
|
|
364
|
-
};
|
|
365
|
-
})();
|
|
366
|
-
|
|
367
135
|
//#endregion
|
|
368
136
|
//#region src/elements/dialog/dialog/dialog.component.ts
|
|
369
137
|
/**
|
|
@@ -540,7 +308,7 @@ let SbbDialogElement = (() => {
|
|
|
540
308
|
}
|
|
541
309
|
dispatchBeforeCloseEvent() {
|
|
542
310
|
/** @type {SbbDialogCloseEvent} Emits whenever the component begins the closing transition. Can be canceled. */
|
|
543
|
-
return this.dispatchEvent(new SbbOverlayCloseEvent
|
|
311
|
+
return this.dispatchEvent(new SbbOverlayCloseEvent("beforeclose", {
|
|
544
312
|
cancelable: true,
|
|
545
313
|
closeAttribute: this.closeAttribute,
|
|
546
314
|
closeTarget: this.lastClosedTarget,
|
|
@@ -549,7 +317,7 @@ let SbbDialogElement = (() => {
|
|
|
549
317
|
}
|
|
550
318
|
dispatchCloseEvent() {
|
|
551
319
|
/** @type {SbbDialogCloseEvent} Emits whenever the component is closed. */
|
|
552
|
-
return this.dispatchEvent(new SbbOverlayCloseEvent
|
|
320
|
+
return this.dispatchEvent(new SbbOverlayCloseEvent("close", {
|
|
553
321
|
closeAttribute: this.closeAttribute,
|
|
554
322
|
closeTarget: this.lastClosedTarget,
|
|
555
323
|
result: this.lastResult
|
|
@@ -578,4 +346,4 @@ let SbbDialogElement = (() => {
|
|
|
578
346
|
})();
|
|
579
347
|
|
|
580
348
|
//#endregion
|
|
581
|
-
export { SbbDialogActionsElement, SbbDialogCloseButtonElement,
|
|
349
|
+
export { SbbDialogActionsElement, SbbDialogCloseButtonElement, SbbDialogCloseEvent, SbbDialogContentElement, SbbDialogElement, SbbDialogTitleElement, assignDialogResult };
|
package/dialog.pure.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import{html as e,
|
|
2
|
-
`,
|
|
3
|
-
`,
|
|
4
|
-
`,
|
|
5
|
-
`,
|
|
6
|
-
`;
|
|
1
|
+
import{html as e,unsafeCSS as t}from"lit";import{SbbActionGroupElement as n}from"./action-group.pure.js";import{SbbSecondaryButtonElement as r}from"./button.pure.js";import{SbbElement as i,SbbLanguageController as a,SbbNegativeMixin as o,SbbPropertyWatcherController as s,hostScrollbarStyles as c,i18nCloseDialog as l,isZeroAnimationDuration as u,screenReaderOnlyStyles as d}from"./core.js";import{SbbTitleBase as f}from"./title.pure.js";import{__esDecorate as p,__runInitializers as m}from"tslib";import{ResizeController as h}from"@lit-labs/observers/resize-controller.js";import{property as g}from"lit/decorators.js";import{ref as _}from"lit/directives/ref.js";import{html as v}from"lit/static-html.js";import{SbbOverlayBaseElement as y,SbbOverlayCloseEvent as b,SbbOverlayCloseEvent as x,assignOverlayResult as S,overlayRefs as C}from"./overlay.pure.js";var w=`:host{padding-inline:var(--sbb-dialog-padding-inline);padding-block:var(--sbb-dialog-padding-block);background-color:var(--sbb-dialog-background-color);transition:box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);box-shadow:var(--sbb-dialog-block-end-box-shadow,none);grid-area:actions;margin-block-start:auto;position:relative}:host:before{content:"";border-block-start:var(--sbb-border-width-1x) solid var(--sbb-dialog-actions-border-color);transition:border-color var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);align-self:start;width:100%;display:block;position:absolute;inset:0 auto auto 0}@media (forced-colors:active){:host:before{border-color:canvastext}}
|
|
2
|
+
`,T=class extends n{static{this.elementName=`sbb-dialog-actions`}static{this.styles=[t(w)]}},E=`:host{height:fit-content;margin-inline:var(--sbb-dialog-close-button-margin-inline);grid-area:close-button;margin-block-start:calc(var(--sbb-dialog-padding-block) + .5 * (var(--sbb-typo-line-height-heading) * var(--_sbb-dialog-title-size,var(--sbb-heading-font-size-4)) - var(--sbb-size-element-xs)));display:block;inset-inline-end:var(--sbb-dialog-close-button-inset-inline-end)}
|
|
3
|
+
`,D=class extends r{static{this.elementName=`sbb-dialog-close-button`}static{this.styles=[t(E)]}constructor(){super(),this._languageController=new a(this),this.size=`s`}willUpdate(e){super.willUpdate(e),this.internals.ariaLabel=l[this._languageController.current]}renderTemplate(){return super.renderIconSlot()}renderIconName(){return super.renderIconName()||`cross-small`}},O=`:host{padding-block:var(--sbb-dialog-padding-block);padding-inline:var(--sbb-dialog-padding-inline);grid-area:content;display:block;overflow:auto}:host(:is(:state(negative),[state--negative])){--sbb-scrollbar-color:color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover:color-mix(in srgb, var(--sbb-color-white) 60%, transparent)}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset:calc(var(--sbb-focus-outline-width) * -1)}
|
|
4
|
+
`,k=class extends i{static{this.elementName=`sbb-dialog-content`}static{this.styles=[c,t(O)]}constructor(){super(),this.addController(new s(this,()=>this.closest(`sbb-dialog`),{negative:e=>{this.toggleState(`negative`,e.negative),this._setScrollbar(e.negative)}}))}_setScrollbar(e=this.closest?.(`sbb-dialog`)?.negative??!1){this.classList.remove(`sbb-scrollbar`,`sbb-scrollbar-negative`),this.classList.add(`sbb-scrollbar${e?`-negative`:``}`)}connectedCallback(){super.connectedCallback(),this._setScrollbar()}render(){return e`<slot></slot>`}},A=`:host{padding-block:var(--sbb-dialog-padding-block);padding-inline:var(--sbb-dialog-padding-inline);hyphens:auto;grid-area:title;position:relative}:host([negative]){--sbb-title-color:var(--sbb-color-3-negative)}:host:after{content:"";pointer-events:none;transition:box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);box-shadow:var(--sbb-dialog-block-start-box-shadow,none);display:block;position:absolute;inset:0 -10rem 0 0}
|
|
5
|
+
`,j=class extends o(f){static{this.elementName=`sbb-dialog-title`}static{this.styles=[t(A)]}constructor(){super(),this.level=`2`,this.visualLevel=`4`}},M=`:host{--sbb-dialog-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-dialog-padding-block:var(--sbb-spacing-responsive-xs);--sbb-dialog-shadow-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));inset:var(--sbb-dialog-inset);z-index:var(--sbb-dialog-z-index,var(--sbb-overlay-default-z-index));display:none;position:fixed}:host(:is(:state(top-shadow),[state--top-shadow])){--sbb-dialog-block-start-box-shadow:var(--_sbb-dialog-block-shadow)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-dialog-pointer-events:all;--sbb-dialog-backdrop-color:var(--sbb-background-color-3);--sbb-dialog-backdrop-visibility:visible;--sbb-dialog-backdrop-pointer-events:all}:host([backdrop=translucent]:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-dialog-backdrop-color:color-mix(in srgb, var(--sbb-color-black) 50%, transparent)}:host([backdrop=opaque]:not([negative]):is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-dialog-backdrop-color:var(--sbb-background-color-3)}:host(:not([negative])){--_sbb-dialog-color:var(--sbb-dialog-color);--_sbb-dialog-block-shadow:var(--sbb-dialog-block-shadow);--sbb-dialog-actions-border-color:var(--sbb-background-color-4);--sbb-dialog-background-color:var(--sbb-background-color-1)}:host([negative]){--_sbb-dialog-color:var(--sbb-dialog-color-negative);--_sbb-dialog-block-shadow:var(--sbb-dialog-block-shadow-negative);--sbb-dialog-background-color:var(--sbb-background-color-1-negative);--sbb-dialog-actions-border-color:var(--sbb-background-color-4-negative);--sbb-dialog-backdrop-color:var(--sbb-background-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}:host(:is(:state(bottom-shadow),[state--bottom-shadow])){--sbb-dialog-block-end-box-shadow:var(--_sbb-dialog-block-shadow);--sbb-dialog-actions-border-color:transparent}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-dialog-inset-block:0;--sbb-dialog-inset-inline:0}.sbb-dialog__container{pointer-events:var(--sbb-dialog-pointer-events);inset-block:var(--sbb-dialog-inset-block);inset-inline:var(--sbb-dialog-inset-inline);justify-content:center;align-items:center;display:flex;position:fixed}.sbb-dialog__container:before{content:"";visibility:var(--sbb-dialog-backdrop-visibility);pointer-events:var(--sbb-dialog-backdrop-pointer-events);inset-block:var(--sbb-dialog-inset-block);inset-inline:var(--sbb-dialog-inset-inline);background-color:var(--sbb-dialog-backdrop-color);transition-duration:var(--sbb-dialog-animation-duration);transition-timing-function:var(--sbb-dialog-animation-easing);transition-property:background-color,visibility;position:fixed}.sbb-dialog{border-radius:var(--sbb-dialog-border-radius) var(--sbb-dialog-border-radius) 0 0;max-width:var(--sbb-dialog-max-width);max-height:var(--sbb-dialog-max-height);color:var(--_sbb-dialog-color);background-color:var(--sbb-dialog-background-color);border:none;display:none;position:absolute;inset-block:auto 0;inset-inline:0}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-dialog{animation-name:open;animation-duration:var(--sbb-dialog-animation-duration);animation-timing-function:ease;display:block}:host(:is(:state(state-closing),[state--state-closing])) .sbb-dialog{pointer-events:none;animation-name:close}@media (forced-colors:active){.sbb-dialog{outline:var(--sbb-border-width-1x) solid CanvasText}}@media (width>=37.5rem){.sbb-dialog{height:var(--sbb-dialog-height);width:var(--sbb-dialog-width);inset:unset;border-radius:var(--sbb-dialog-border-radius);overflow:hidden}}:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),.sbb-dialog__wrapper{max-height:var(--sbb-dialog-max-height)}@media (width>=37.5rem){:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),.sbb-dialog__wrapper{width:var(--sbb-dialog-width);height:var(--sbb-dialog-height)}}:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),:host(:not(:is(:state(has-intermediate-element),[state--has-intermediate-element]))) .sbb-dialog__wrapper{grid-template:"title close-button""content content"1fr"actions actions"/1fr auto;gap:0;display:grid}@keyframes open{0%{opacity:0;translate:0 var(--sbb-dialog-translate-y,100%)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:0 var(--sbb-dialog-translate-y,100%)}}
|
|
6
|
+
`;let N=(()=>{let e=y,n,r=[],i=[],a,o=[],s=[];return class extends e{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;n=[g({attribute:`backdrop-action`})],a=[g({attribute:`backdrop`,reflect:!0})],p(this,null,n,{kind:`accessor`,name:`backdropAction`,static:!1,private:!1,access:{has:e=>`backdropAction`in e,get:e=>e.backdropAction,set:(e,t)=>{e.backdropAction=t}},metadata:t},r,i),p(this,null,a,{kind:`accessor`,name:`backdrop`,static:!1,private:!1,access:{has:e=>`backdrop`in e,get:e=>e.backdrop,set:(e,t)=>{e.backdrop=t}},metadata:t},o,s),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-dialog`}static{this.styles=[d,t(M)]}#e;get backdropAction(){return this.#e}set backdropAction(e){this.#e=e}#t;get backdrop(){return this.#t}set backdrop(e){this.#t=e}constructor(){super(),this.#e=m(this,r,`close`),this.#t=(m(this,i),m(this,o,`opaque`)),this._dialogContentResizeObserver=(m(this,s),new h(this,{target:null,skipInitial:!0,callback:()=>setTimeout(()=>this._updateOverflowState())})),this._isPointerDownEventOnDialog=!1,this.closeAttribute=`sbb-dialog-close`,this.closeTag=`sbb-dialog-close-button`,this._pointerDownListener=e=>{this.backdropAction===`close`&&(this._isPointerDownEventOnDialog=!!this._dialogElement&&e.composedPath().includes(this._dialogElement))},this._closeOnBackdropClick=e=>{this.backdropAction===`close`&&!this._isPointerDownEventOnDialog&&this._dialogElement&&!e.composedPath().includes(this._dialogElement)&&this.close()},this.addEventListener?.(`pointerdown`,this._pointerDownListener),this.addEventListener?.(`pointerup`,this._closeOnBackdropClick),this.addEventListener(`scroll`,()=>this._updateOverflowState(),{passive:!0,capture:!0})}announceTitle(){this.setAriaLiveRefContent(this.accessibilityLabel||this.querySelector(`sbb-dialog-title`)?.textContent.trim())}isZeroAnimationDuration(){return u(this,`--sbb-dialog-animation-duration`)}handleClosing(){let e=this._contentElement();e?.scrollTo(0,0),this.state=`closed`,this.hidePopover?.(),this.inertController.deactivate(),this.skipFocusRestoration||this.lastFocusedElement?.focus(),this.openOverlayController?.abort(),this.focusTrapController.enabled=!1,e&&this._dialogContentResizeObserver.hostDisconnected(),this.removeInstanceFromGlobalCollection(),C.length||this.scrollHandler.enableScroll(),this.escapableOverlayController.disconnect(),this.dispatchCloseEvent()}handleOpening(){this.state=`opened`,this.inertController.activate(),this.focusTrapController.focusInitialElement(),this.focusTrapController.enabled=!0,setTimeout(()=>this.announceTitle());let e=this._contentElement();e&&this._dialogContentResizeObserver.observe(e),this.dispatchOpenEvent()}firstUpdated(e){super.firstUpdated(e),this.isOpen&&this.announceTitle(),this._syncTitleNegative()}willUpdate(e){super.willUpdate(e),e.has(`negative`)&&this._syncTitleNegative()}_handleSlotChange(){this._syncTitleNegative(),this._detectIntermediateElement()}_syncTitleNegative(){let e=this.querySelector?.(`sbb-dialog-title`),t=this.querySelector?.(`sbb-dialog-close-button`);e&&(e.negative=this.negative),t&&(t.negative=this.negative)}_detectIntermediateElement(){let e=this.querySelector(`:scope > :is(sbb-dialog-title, sbb-dialog-close-button, sbb-dialog-content, sbb-dialog-actions)`)===null;this.toggleState(`has-intermediate-element`,e)}_updateOverflowState(){let e=this._contentElement();this.toggleState(`top-shadow`,(e?.scrollTop??0)>0),this.toggleState(`bottom-shadow`,(e?.scrollTop??0)+(e?.offsetHeight??0)<(e?.scrollHeight??0))}_contentElement(){return this.querySelector(`sbb-dialog-content`)}dispatchBeforeCloseEvent(){return this.dispatchEvent(new b(`beforeclose`,{cancelable:!0,closeAttribute:this.closeAttribute,closeTarget:this.lastClosedTarget,result:this.lastResult}))}dispatchCloseEvent(){return this.dispatchEvent(new b(`close`,{closeAttribute:this.closeAttribute,closeTarget:this.lastClosedTarget,result:this.lastResult}))}render(){return v`
|
|
7
7
|
<div class="sbb-dialog__container">
|
|
8
8
|
<div
|
|
9
9
|
@animationend=${this.onOverlayAnimationEnd}
|
|
10
10
|
class="sbb-dialog"
|
|
11
|
-
${
|
|
11
|
+
${_(e=>this._dialogElement=e)}
|
|
12
12
|
>
|
|
13
13
|
<div
|
|
14
14
|
@click=${e=>this.closeOnSbbOverlayCloseClick(e)}
|
|
@@ -19,4 +19,4 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbActionGroupEle
|
|
|
19
19
|
</div>
|
|
20
20
|
</div>
|
|
21
21
|
<span class="sbb-screen-reader-only" aria-live="polite"></span>
|
|
22
|
-
`}}})();export{
|
|
22
|
+
`}}})();export{T as SbbDialogActionsElement,D as SbbDialogCloseButtonElement,x as SbbDialogCloseEvent,k as SbbDialogContentElement,N as SbbDialogElement,j as SbbDialogTitleElement,S as assignDialogResult};
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.0.2-dev.
|
|
3
|
+
"version": "5.0.2-dev.1782216237",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/ec394d0243cab017833a7d54af48a72d015154b2"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|