@sbb-esta/lyne-elements-dev 5.0.0-next.2-dev.1777960809 → 5.0.0-next.2-dev.1777979422
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/core.css +1 -12
- package/custom-elements.json +482 -434
- package/development/optgroup-base-element-Cq8DMPk9.js +147 -0
- package/development/option/optgroup/optgroup-base-element.d.ts +2 -1
- package/development/option/optgroup/optgroup-base-element.d.ts.map +1 -1
- package/development/option/optgroup/optgroup-base-element.js +1 -1
- package/development/option/optgroup/optgroup.component.js +1 -1
- package/development/option/option/option-base-element.d.ts +2 -1
- package/development/option/option/option-base-element.d.ts.map +1 -1
- package/development/option/option/option-base-element.js +9 -3
- package/development/option/option/option.component.d.ts.map +1 -1
- package/development/option/option/option.component.js +1 -1
- package/development/option/option-hint/option-hint.component.d.ts +2 -0
- package/development/option/option-hint/option-hint.component.d.ts.map +1 -1
- package/development/option/option-hint/option-hint.component.js +1 -1
- package/development/option-hint.component-B4PxB3BW.js +39 -0
- package/development/option.component-CV6cZnJe.js +131 -0
- package/development/option.js +3 -3
- package/development/option.pure.js +3 -3
- package/off-brand-theme.css +1 -12
- package/optgroup-base-element-CrO_ydA8.js +108 -0
- package/option/optgroup/optgroup-base-element.js +1 -1
- package/option/optgroup/optgroup.component.js +1 -1
- package/option/option/option-base-element.js +27 -25
- package/option/option/option.component.js +1 -1
- package/option/option-hint/option-hint.component.js +1 -1
- package/option-hint.component-BEXndgG-.js +26 -0
- package/option.component-BeorlZT0.js +100 -0
- package/option.js +3 -3
- package/option.pure.js +3 -3
- package/package.json +2 -2
- package/safety-theme.css +1 -12
- package/standard-theme.css +1 -12
- package/development/optgroup-base-element-BEG1P4gK.js +0 -140
- package/development/option-hint.component-CcSUSwjN.js +0 -31
- package/development/option.component-BEbIEh5o.js +0 -132
- package/optgroup-base-element-C6KwbQ0N.js +0 -106
- package/option-hint.component-Bayihbh1.js +0 -21
- package/option.component-C-GGTcqF.js +0 -100
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
-
import { html, nothing, unsafeCSS } from "lit";
|
|
3
|
-
import { property, state } from "lit/decorators.js";
|
|
4
|
-
import { SbbDisabledMixin, SbbElement, forceType, isSafari } from "./core.js";
|
|
5
|
-
import { SbbDividerElement } from "./divider.pure.js";
|
|
6
|
-
//#region src/elements/option/optgroup/optgroup-base-element.scss?inline
|
|
7
|
-
var optgroup_base_element_default = ":host {\n display: block;\n}\n\n:host(:first-child) {\n --sbb-optgroup-divider-display: none;\n}\n\n:host(:is(:state(negative),[state--negative])) {\n --sbb-optgroup-label-color: var(--sbb-color-5);\n}\n\n.sbb-optgroup {\n margin-block: var(--sbb-spacing-fixed-4x);\n margin-inline: var(--sbb-spacing-fixed-4x);\n}\n\n.sbb-optgroup__label {\n display: flex;\n column-gap: var(--sbb-spacing-responsive-xxxs);\n font-size: var(--sbb-optgroup-label-font-size);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n color: var(--sbb-optgroup-label-color);\n -webkit-text-fill-color: var(--sbb-optgroup-label-color);\n padding-inline: var(--sbb-optgroup-label-padding-inline);\n padding-block-end: var(--sbb-optgroup-label-padding-end);\n}\n\n.sbb-optgroup__divider {\n display: var(--sbb-optgroup-divider-display, block);\n padding-block: var(--sbb-options-panel-divider-margin-block);\n}\n\n.sbb-optgroup__icon-space {\n display: var(--sbb-option-icon-container-display, none);\n min-width: var(--sbb-size-icon-ui-small);\n}\n\n::slotted(sbb-divider) {\n margin-block: var(--sbb-options-panel-divider-margin-block);\n}";
|
|
8
|
-
//#endregion
|
|
9
|
-
//#region src/elements/option/optgroup/optgroup-base-element.ts
|
|
10
|
-
/**
|
|
11
|
-
* On Safari, the groups labels are not read by VoiceOver.
|
|
12
|
-
* To solve the problem, we remove the role="group" and add a hidden span containing the group name
|
|
13
|
-
* TODO: We should periodically check if it has been solved and, if so, remove the property.
|
|
14
|
-
*/
|
|
15
|
-
var inertAriaGroups = isSafari;
|
|
16
|
-
var SbbOptgroupBaseElement = (() => {
|
|
17
|
-
let _classSuper = SbbDisabledMixin(SbbElement);
|
|
18
|
-
let _label_decorators;
|
|
19
|
-
let _label_initializers = [];
|
|
20
|
-
let _label_extraInitializers = [];
|
|
21
|
-
let __inertAriaGroups_decorators;
|
|
22
|
-
let __inertAriaGroups_initializers = [];
|
|
23
|
-
let __inertAriaGroups_extraInitializers = [];
|
|
24
|
-
return class SbbOptgroupBaseElement extends _classSuper {
|
|
25
|
-
static {
|
|
26
|
-
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
27
|
-
_label_decorators = [forceType(), property()];
|
|
28
|
-
__inertAriaGroups_decorators = [state()];
|
|
29
|
-
__esDecorate(this, null, _label_decorators, {
|
|
30
|
-
kind: "accessor",
|
|
31
|
-
name: "label",
|
|
32
|
-
static: false,
|
|
33
|
-
private: false,
|
|
34
|
-
access: {
|
|
35
|
-
has: (obj) => "label" in obj,
|
|
36
|
-
get: (obj) => obj.label,
|
|
37
|
-
set: (obj, value) => {
|
|
38
|
-
obj.label = value;
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
metadata: _metadata
|
|
42
|
-
}, _label_initializers, _label_extraInitializers);
|
|
43
|
-
__esDecorate(this, null, __inertAriaGroups_decorators, {
|
|
44
|
-
kind: "accessor",
|
|
45
|
-
name: "_inertAriaGroups",
|
|
46
|
-
static: false,
|
|
47
|
-
private: false,
|
|
48
|
-
access: {
|
|
49
|
-
has: (obj) => "_inertAriaGroups" in obj,
|
|
50
|
-
get: (obj) => obj._inertAriaGroups,
|
|
51
|
-
set: (obj, value) => {
|
|
52
|
-
obj._inertAriaGroups = value;
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
metadata: _metadata
|
|
56
|
-
}, __inertAriaGroups_initializers, __inertAriaGroups_extraInitializers);
|
|
57
|
-
if (_metadata) Object.defineProperty(this, Symbol.metadata, {
|
|
58
|
-
enumerable: true,
|
|
59
|
-
configurable: true,
|
|
60
|
-
writable: true,
|
|
61
|
-
value: _metadata
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
static {
|
|
65
|
-
this.role = !inertAriaGroups ? "group" : null;
|
|
66
|
-
}
|
|
67
|
-
static {
|
|
68
|
-
this.elementDependencies = [SbbDividerElement];
|
|
69
|
-
}
|
|
70
|
-
static {
|
|
71
|
-
this.styles = [unsafeCSS(optgroup_base_element_default)];
|
|
72
|
-
}
|
|
73
|
-
#label_accessor_storage = __runInitializers(this, _label_initializers, "");
|
|
74
|
-
/** Option group label. */
|
|
75
|
-
get label() {
|
|
76
|
-
return this.#label_accessor_storage;
|
|
77
|
-
}
|
|
78
|
-
set label(value) {
|
|
79
|
-
this.#label_accessor_storage = value;
|
|
80
|
-
}
|
|
81
|
-
#_inertAriaGroups_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, __inertAriaGroups_initializers, false));
|
|
82
|
-
get _inertAriaGroups() {
|
|
83
|
-
return this.#_inertAriaGroups_accessor_storage;
|
|
84
|
-
}
|
|
85
|
-
set _inertAriaGroups(value) {
|
|
86
|
-
this.#_inertAriaGroups_accessor_storage = value;
|
|
87
|
-
}
|
|
88
|
-
constructor() {
|
|
89
|
-
super();
|
|
90
|
-
__runInitializers(this, __inertAriaGroups_extraInitializers);
|
|
91
|
-
if (inertAriaGroups) if (this.hydrationRequired) this.hydrationComplete.then(() => this._inertAriaGroups = inertAriaGroups);
|
|
92
|
-
else this._inertAriaGroups = inertAriaGroups;
|
|
93
|
-
}
|
|
94
|
-
connectedCallback() {
|
|
95
|
-
super.connectedCallback();
|
|
96
|
-
this._updateAriaLabel();
|
|
97
|
-
}
|
|
98
|
-
willUpdate(changedProperties) {
|
|
99
|
-
super.willUpdate(changedProperties);
|
|
100
|
-
if (changedProperties.has("disabled")) {
|
|
101
|
-
if (!this._inertAriaGroups) this.internals.ariaDisabled = this.disabled ? "true" : null;
|
|
102
|
-
}
|
|
103
|
-
if (changedProperties.has("label")) this._updateAriaLabel();
|
|
104
|
-
}
|
|
105
|
-
_handleSlotchange() {
|
|
106
|
-
this._updateAriaLabel();
|
|
107
|
-
this._highlightOptions();
|
|
108
|
-
/** @internal */
|
|
109
|
-
this.dispatchEvent(new Event("ɵoptgroupslotchange"));
|
|
110
|
-
}
|
|
111
|
-
_updateAriaLabel() {
|
|
112
|
-
this.internals.ariaLabel = !this._inertAriaGroups ? this.label : null;
|
|
113
|
-
}
|
|
114
|
-
_highlightOptions() {
|
|
115
|
-
const autocomplete = this.getAutocompleteParent();
|
|
116
|
-
if (!autocomplete) return;
|
|
117
|
-
const value = autocomplete.triggerElement?.value;
|
|
118
|
-
if (!value) return;
|
|
119
|
-
this.options.forEach((opt) => opt.highlight(value));
|
|
120
|
-
}
|
|
121
|
-
render() {
|
|
122
|
-
return html`
|
|
123
|
-
<div class="sbb-optgroup__divider">
|
|
124
|
-
<sbb-divider ?negative=${this.matches?.(":is(:state(negative),[state--negative])")}></sbb-divider>
|
|
125
|
-
</div>
|
|
126
|
-
${this.label ? html`
|
|
127
|
-
<div class="sbb-optgroup__label" aria-hidden="true">
|
|
128
|
-
<div class="sbb-optgroup__icon-space"></div>
|
|
129
|
-
<span>${this.label}</span>
|
|
130
|
-
</div>
|
|
131
|
-
` : nothing}
|
|
132
|
-
<slot @slotchange=${this._handleSlotchange}></slot>
|
|
133
|
-
`;
|
|
134
|
-
}
|
|
135
|
-
};
|
|
136
|
-
})();
|
|
137
|
-
//#endregion
|
|
138
|
-
export { SbbOptgroupBaseElement as t };
|
|
139
|
-
|
|
140
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0Z3JvdXAtYmFzZS1lbGVtZW50LUJFRzFQNGdLLmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy9vcHRpb24vb3B0Z3JvdXAvb3B0Z3JvdXAtYmFzZS1lbGVtZW50LnNjc3M/aW5saW5lIiwiLi4vLi4vLi4vc3JjL2VsZW1lbnRzL29wdGlvbi9vcHRncm91cC9vcHRncm91cC1iYXNlLWVsZW1lbnQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiQHVzZSAnLi4vLi4vY29yZS9zdHlsZXMnIGFzIHNiYjtcblxuOmhvc3Qge1xuICBkaXNwbGF5OiBibG9jaztcbn1cblxuOmhvc3QoOmZpcnN0LWNoaWxkKSB7XG4gIC0tc2JiLW9wdGdyb3VwLWRpdmlkZXItZGlzcGxheTogbm9uZTtcbn1cblxuOmhvc3QoOnN0YXRlKG5lZ2F0aXZlKSkge1xuICAtLXNiYi1vcHRncm91cC1sYWJlbC1jb2xvcjogdmFyKC0tc2JiLWNvbG9yLTUpO1xufVxuXG4uc2JiLW9wdGdyb3VwIHtcbiAgbWFyZ2luLWJsb2NrOiB2YXIoLS1zYmItc3BhY2luZy1maXhlZC00eCk7XG4gIG1hcmdpbi1pbmxpbmU6IHZhcigtLXNiYi1zcGFjaW5nLWZpeGVkLTR4KTtcbn1cblxuLnNiYi1vcHRncm91cF9fbGFiZWwge1xuICBkaXNwbGF5OiBmbGV4O1xuICBjb2x1bW4tZ2FwOiB2YXIoLS1zYmItc3BhY2luZy1yZXNwb25zaXZlLXh4eHMpO1xuICBmb250LXNpemU6IHZhcigtLXNiYi1vcHRncm91cC1sYWJlbC1mb250LXNpemUpO1xuICBsZXR0ZXItc3BhY2luZzogdmFyKC0tc2JiLXR5cG8tbGV0dGVyLXNwYWNpbmctdGV4dCk7XG4gIGNvbG9yOiB2YXIoLS1zYmItb3B0Z3JvdXAtbGFiZWwtY29sb3IpO1xuICAtd2Via2l0LXRleHQtZmlsbC1jb2xvcjogdmFyKC0tc2JiLW9wdGdyb3VwLWxhYmVsLWNvbG9yKTtcbiAgcGFkZGluZy1pbmxpbmU6IHZhcigtLXNiYi1vcHRncm91cC1sYWJlbC1wYWRkaW5nLWlubGluZSk7XG4gIHBhZGRpbmctYmxvY2stZW5kOiB2YXIoLS1zYmItb3B0Z3JvdXAtbGFiZWwtcGFkZGluZy1lbmQpO1xufVxuXG4uc2JiLW9wdGdyb3VwX19kaXZpZGVyIHtcbiAgZGlzcGxheTogdmFyKC0tc2JiLW9wdGdyb3VwLWRpdmlkZXItZGlzcGxheSwgYmxvY2spO1xuICBwYWRkaW5nLWJsb2NrOiB2YXIoLS1zYmItb3B0aW9ucy1wYW5lbC1kaXZpZGVyLW1hcmdpbi1ibG9jayk7XG59XG5cbi8vIEFsaWduIHRoZSBncm91cCBsYWJlbCB0byB0aGUgb3B0aW9uIGxhYmVsXG4uc2JiLW9wdGdyb3VwX19pY29uLXNwYWNlIHtcbiAgLy8gQ2FuIGJlIG92ZXJyaWRkZW4gYnkgdGhlICdwcmVzZXJ2ZS1pY29uLXNwYWNlJyBvbiB0aGUgYXV0b2NvbXBsZXRlXG4gIGRpc3BsYXk6IHZhcigtLXNiYi1vcHRpb24taWNvbi1jb250YWluZXItZGlzcGxheSwgbm9uZSk7XG4gIG1pbi13aWR0aDogdmFyKC0tc2JiLXNpemUtaWNvbi11aS1zbWFsbCk7XG59XG5cbjo6c2xvdHRlZChzYmItZGl2aWRlcikge1xuICBtYXJnaW4tYmxvY2s6IHZhcigtLXNiYi1vcHRpb25zLXBhbmVsLWRpdmlkZXItbWFyZ2luLWJsb2NrKTtcbn1cbiIsImltcG9ydCB7XG4gIHR5cGUgQ1NTUmVzdWx0R3JvdXAsXG4gIGh0bWwsXG4gIG5vdGhpbmcsXG4gIHR5cGUgUHJvcGVydHlWYWx1ZXMsXG4gIHR5cGUgVGVtcGxhdGVSZXN1bHQsXG4gIHVuc2FmZUNTUyxcbn0gZnJvbSAnbGl0JztcbmltcG9ydCB7IHByb3BlcnR5LCBzdGF0ZSB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuaW1wb3J0IHR5cGUgeyBTYmJBdXRvY29tcGxldGVCYXNlRWxlbWVudCB9IGZyb20gJy4uLy4uL2F1dG9jb21wbGV0ZS5wdXJlLnRzJztcbmltcG9ydCB7XG4gIGZvcmNlVHlwZSxcbiAgaXNTYWZhcmksXG4gIFNiYkRpc2FibGVkTWl4aW4sXG4gIFNiYkVsZW1lbnQsXG4gIHR5cGUgU2JiRWxlbWVudFR5cGUsXG59IGZyb20gJy4uLy4uL2NvcmUudHMnO1xuaW1wb3J0IHsgU2JiRGl2aWRlckVsZW1lbnQgfSBmcm9tICcuLi8uLi9kaXZpZGVyLnB1cmUudHMnO1xuaW1wb3J0IHR5cGUgeyBTYmJPcHRpb25CYXNlRWxlbWVudCB9IGZyb20gJy4uL29wdGlvbi9vcHRpb24tYmFzZS1lbGVtZW50LnRzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vb3B0Z3JvdXAtYmFzZS1lbGVtZW50LnNjc3M/aW5saW5lJztcblxuLyoqXG4gKiBPbiBTYWZhcmksIHRoZSBncm91cHMgbGFiZWxzIGFyZSBub3QgcmVhZCBieSBWb2ljZU92ZXIuXG4gKiBUbyBzb2x2ZSB0aGUgcHJvYmxlbSwgd2UgcmVtb3ZlIHRoZSByb2xlPVwiZ3JvdXBcIiBhbmQgYWRkIGEgaGlkZGVuIHNwYW4gY29udGFpbmluZyB0aGUgZ3JvdXAgbmFtZVxuICogVE9ETzogV2Ugc2hvdWxkIHBlcmlvZGljYWxseSBjaGVjayBpZiBpdCBoYXMgYmVlbiBzb2x2ZWQgYW5kLCBpZiBzbywgcmVtb3ZlIHRoZSBwcm9wZXJ0eS5cbiAqL1xuY29uc3QgaW5lcnRBcmlhR3JvdXBzID0gaXNTYWZhcmk7XG5cbmV4cG9ydCBhYnN0cmFjdCBjbGFzcyBTYmJPcHRncm91cEJhc2VFbGVtZW50IGV4dGVuZHMgU2JiRGlzYWJsZWRNaXhpbihTYmJFbGVtZW50KSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgcmVhZG9ubHkgcm9sZSA9ICFpbmVydEFyaWFHcm91cHMgPyAnZ3JvdXAnIDogbnVsbDtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBlbGVtZW50RGVwZW5kZW5jaWVzOiBTYmJFbGVtZW50VHlwZVtdID0gW1NiYkRpdmlkZXJFbGVtZW50XTtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW3Vuc2FmZUNTUyhzdHlsZSldO1xuXG4gIC8qKiBPcHRpb24gZ3JvdXAgbGFiZWwuICovXG4gIEBmb3JjZVR5cGUoKVxuICBAcHJvcGVydHkoKVxuICBwdWJsaWMgYWNjZXNzb3IgbGFiZWw6IHN0cmluZyA9ICcnO1xuXG4gIEBzdGF0ZSgpIHByaXZhdGUgYWNjZXNzb3IgX2luZXJ0QXJpYUdyb3VwcyA9IGZhbHNlO1xuXG4gIHByb3RlY3RlZCBhYnN0cmFjdCBnZXQgb3B0aW9ucygpOiBTYmJPcHRpb25CYXNlRWxlbWVudFtdO1xuXG4gIHB1YmxpYyBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuXG4gICAgaWYgKGluZXJ0QXJpYUdyb3Vwcykge1xuICAgICAgaWYgKHRoaXMuaHlkcmF0aW9uUmVxdWlyZWQpIHtcbiAgICAgICAgdGhpcy5oeWRyYXRpb25Db21wbGV0ZS50aGVuKCgpID0+ICh0aGlzLl9pbmVydEFyaWFHcm91cHMgPSBpbmVydEFyaWFHcm91cHMpKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHRoaXMuX2luZXJ0QXJpYUdyb3VwcyA9IGluZXJ0QXJpYUdyb3VwcztcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBwdWJsaWMgb3ZlcnJpZGUgY29ubmVjdGVkQ2FsbGJhY2soKTogdm9pZCB7XG4gICAgc3VwZXIuY29ubmVjdGVkQ2FsbGJhY2soKTtcbiAgICB0aGlzLl91cGRhdGVBcmlhTGFiZWwoKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSB3aWxsVXBkYXRlKGNoYW5nZWRQcm9wZXJ0aWVzOiBQcm9wZXJ0eVZhbHVlczx0aGlzPik6IHZvaWQge1xuICAgIHN1cGVyLndpbGxVcGRhdGUoY2hhbmdlZFByb3BlcnRpZXMpO1xuXG4gICAgaWYgKGNoYW5nZWRQcm9wZXJ0aWVzLmhhcygnZGlzYWJsZWQnKSkge1xuICAgICAgaWYgKCF0aGlzLl9pbmVydEFyaWFHcm91cHMpIHtcbiAgICAgICAgdGhpcy5pbnRlcm5hbHMuYXJpYURpc2FibGVkID0gdGhpcy5kaXNhYmxlZCA/ICd0cnVlJyA6IG51bGw7XG4gICAgICB9XG4gICAgfVxuICAgIGlmIChjaGFuZ2VkUHJvcGVydGllcy5oYXMoJ2xhYmVsJykpIHtcbiAgICAgIHRoaXMuX3VwZGF0ZUFyaWFMYWJlbCgpO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBhYnN0cmFjdCBnZXRBdXRvY29tcGxldGVQYXJlbnQoKTogU2JiQXV0b2NvbXBsZXRlQmFzZUVsZW1lbnQgfCBudWxsO1xuXG4gIHByaXZhdGUgX2hhbmRsZVNsb3RjaGFuZ2UoKTogdm9pZCB7XG4gICAgdGhpcy5fdXBkYXRlQXJpYUxhYmVsKCk7XG4gICAgdGhpcy5faGlnaGxpZ2h0T3B0aW9ucygpO1xuICAgIC8vIFVzZWQgdG8gbm90aWZ5IGFzc29jaWF0ZWQgY29tcG9uZW50cyBsaWtlIHRoZSBzYmItc2VsZWN0IHRvIHVwZGF0ZSBzdGF0ZVxuICAgIC8qKiBAaW50ZXJuYWwgKi9cbiAgICB0aGlzLmRpc3BhdGNoRXZlbnQobmV3IEV2ZW50KCfJtW9wdGdyb3Vwc2xvdGNoYW5nZScpKTtcbiAgfVxuXG4gIHByaXZhdGUgX3VwZGF0ZUFyaWFMYWJlbCgpOiB2b2lkIHtcbiAgICB0aGlzLmludGVybmFscy5hcmlhTGFiZWwgPSAhdGhpcy5faW5lcnRBcmlhR3JvdXBzID8gdGhpcy5sYWJlbCA6IG51bGw7XG4gIH1cblxuICBwcml2YXRlIF9oaWdobGlnaHRPcHRpb25zKCk6IHZvaWQge1xuICAgIGNvbnN0IGF1dG9jb21wbGV0ZSA9IHRoaXMuZ2V0QXV0b2NvbXBsZXRlUGFyZW50KCk7XG4gICAgaWYgKCFhdXRvY29tcGxldGUpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgY29uc3QgdmFsdWUgPSBhdXRvY29tcGxldGUudHJpZ2dlckVsZW1lbnQ/LnZhbHVlO1xuICAgIGlmICghdmFsdWUpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5vcHRpb25zLmZvckVhY2goKG9wdCkgPT4gb3B0LmhpZ2hsaWdodCh2YWx1ZSkpO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgLy8gVE9ETzogcmVwbGFjZSBkaXZpZGVyIHdpdGggQ1NTXG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8ZGl2IGNsYXNzPVwic2JiLW9wdGdyb3VwX19kaXZpZGVyXCI+XG4gICAgICAgIDxzYmItZGl2aWRlciA/bmVnYXRpdmU9JHt0aGlzLm1hdGNoZXM/LignOnN0YXRlKG5lZ2F0aXZlKScpfT48L3NiYi1kaXZpZGVyPlxuICAgICAgPC9kaXY+XG4gICAgICAke3RoaXMubGFiZWxcbiAgICAgICAgPyBodG1sYFxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNiYi1vcHRncm91cF9fbGFiZWxcIiBhcmlhLWhpZGRlbj1cInRydWVcIj5cbiAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNiYi1vcHRncm91cF9faWNvbi1zcGFjZVwiPjwvZGl2PlxuICAgICAgICAgICAgICA8c3Bhbj4ke3RoaXMubGFiZWx9PC9zcGFuPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgYFxuICAgICAgICA6IG5vdGhpbmd9XG4gICAgICA8c2xvdCBAc2xvdGNoYW5nZT0ke3RoaXMuX2hhbmRsZVNsb3RjaGFuZ2V9Pjwvc2xvdD5cbiAgICBgO1xuICB9XG59XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7O0FDNEJBLElBQU0sa0JBQWtCO0lBRUYsZ0NBQXNCO21CQUFTLGlCQUFpQixXQUFXOzs7Ozs7O2NBQTNELCtCQUErQixZQUE0Qjs7O3dCQU05RSxXQUFXLEVBQ1gsVUFBVSxDQUFBO21DQUdWLE9BQU8sQ0FBQTtBQUZSLGdCQUFBLE1BQUEsTUFBQSxtQkFBQTtJQUFBLE1BQUE7SUFBQSxNQUFBO0lBQUEsUUFBQTtJQUFBLFNBQUE7SUFBQSxRQUFBO0tBQUEsTUFBQSxRQUFBLFdBQUE7S0FBQSxNQUFBLFFBQUEsSUFBZ0I7S0FBSyxNQUFBLEtBQUEsVUFBQTtBQUFBLFVBQUwsUUFBSzs7S0FBQTtJQUFBLFVBQUE7SUFBQSxFQUFBLHFCQUFBLHlCQUFBO0FBRVosZ0JBQUEsTUFBQSxNQUFBLDhCQUFBO0lBQUEsTUFBQTtJQUFBLE1BQUE7SUFBQSxRQUFBO0lBQUEsU0FBQTtJQUFBLFFBQUE7S0FBQSxNQUFBLFFBQUEsc0JBQUE7S0FBQSxNQUFBLFFBQUEsSUFBaUI7S0FBZ0IsTUFBQSxLQUFBLFVBQUE7QUFBQSxVQUFoQixtQkFBZ0I7O0tBQUE7SUFBQSxVQUFBO0lBQUEsRUFBQSxnQ0FBQSxvQ0FBQTs7Ozs7Ozs7O0FBVFYsUUFBQSxPQUFPLENBQUMsa0JBQWtCLFVBQVU7OztBQUM3QyxRQUFBLHNCQUF3QyxDQUFDLGtCQUFrQjs7O0FBQzNELFFBQUEsU0FBeUIsQ0FBQyxVQUFVLDhCQUFNLENBQUM7O0VBS2xFLDBCQUFBLGtCQUFBLE1BQUEscUJBQWdDLEdBQUU7O0VBQWxDLElBQWdCLFFBQUs7QUFBQSxVQUFBLE1BQUE7O0VBQXJCLElBQWdCLE1BQUssT0FBQTtBQUFBLFNBQUEseUJBQUE7O0VBRVosc0NBQUEsa0JBQUEsTUFBQSx5QkFBQSxFQUFBLGtCQUFBLE1BQUEsZ0NBQW9DLE1BQUs7RUFBekMsSUFBaUIsbUJBQWdCO0FBQUEsVUFBQSxNQUFBOztFQUFqQyxJQUFpQixpQkFBZ0IsT0FBQTtBQUFBLFNBQUEsb0NBQUE7O0VBSTFDLGNBQUE7QUFDRSxVQUFPOztBQUVQLE9BQUksZ0JBQ0YsS0FBSSxLQUFLLGtCQUNQLE1BQUssa0JBQWtCLFdBQVksS0FBSyxtQkFBbUIsZ0JBQWlCO09BRTVFLE1BQUssbUJBQW1COztFQUtkLG9CQUFpQjtBQUMvQixTQUFNLG1CQUFtQjtBQUN6QixRQUFLLGtCQUFrQjs7RUFHTixXQUFXLG1CQUF1QztBQUNuRSxTQUFNLFdBQVcsa0JBQWtCO0FBRW5DLE9BQUksa0JBQWtCLElBQUksV0FBVztRQUMvQixDQUFDLEtBQUssaUJBQ1IsTUFBSyxVQUFVLGVBQWUsS0FBSyxXQUFXLFNBQVM7O0FBRzNELE9BQUksa0JBQWtCLElBQUksUUFBUSxDQUNoQyxNQUFLLGtCQUFrQjs7RUFNbkIsb0JBQWlCO0FBQ3ZCLFFBQUssa0JBQWtCO0FBQ3ZCLFFBQUssbUJBQW1COztBQUd4QixRQUFLLGNBQWMsSUFBSSxNQUFNLHNCQUFzQixDQUFDOztFQUc5QyxtQkFBZ0I7QUFDdEIsUUFBSyxVQUFVLFlBQVksQ0FBQyxLQUFLLG1CQUFtQixLQUFLLFFBQVE7O0VBRzNELG9CQUFpQjtHQUN2QixNQUFNLGVBQWUsS0FBSyx1QkFBdUI7QUFDakQsT0FBSSxDQUFDLGFBQ0g7R0FFRixNQUFNLFFBQVEsYUFBYSxnQkFBZ0I7QUFDM0MsT0FBSSxDQUFDLE1BQ0g7QUFFRixRQUFLLFFBQVEsU0FBUyxRQUFRLElBQUksVUFBVSxNQUFNLENBQUM7O0VBR2xDLFNBQU07QUFFdkIsVUFBTyxJQUFJOztpQ0FFa0IsS0FBSyxVQUFVLDBDQUFtQixDQUFBOztRQUUzRCxLQUFLLFFBQ0gsSUFBSTs7O3NCQUdRLEtBQUssTUFBSzs7Y0FHdEIsUUFBQTswQkFDZ0IsS0FBSyxrQkFBaUIifQ==
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { html, unsafeCSS } from "lit";
|
|
2
|
-
import { SbbElement, SbbNegativeMixin } from "./core.js";
|
|
3
|
-
//#region src/elements/option/option-hint/option-hint.scss?inline
|
|
4
|
-
var option_hint_default = ":host {\n display: flex;\n column-gap: var(--sbb-option-hint-column-gap);\n padding-inline: var(--sbb-option-hint-padding-inline);\n padding-block-end: var(--sbb-option-hint-padding-block-end);\n font-size: var(--sbb-option-hint-font-size);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n}\n\n:host([negative]) {\n --sbb-option-hint-color: var(--sbb-color-5);\n}\n\n.sbb-optgroup__icon-space {\n display: var(--sbb-option-icon-container-display, none);\n min-width: var(--sbb-size-icon-ui-small);\n}\n\n.sbb-option-hint {\n color: var(--sbb-option-hint-color);\n -webkit-text-fill-color: var(--sbb-option-hint-color);\n flex-grow: 1;\n}";
|
|
5
|
-
//#endregion
|
|
6
|
-
//#region src/elements/option/option-hint/option-hint.component.ts
|
|
7
|
-
/**
|
|
8
|
-
* Display a textual hint inside a `sbb-autocomplete` or a `sbb-select`.
|
|
9
|
-
*
|
|
10
|
-
* @slot - Use the unnamed slot to display the hint message.
|
|
11
|
-
*/
|
|
12
|
-
var SbbOptionHintElement = class extends SbbNegativeMixin(SbbElement) {
|
|
13
|
-
static {
|
|
14
|
-
this.elementName = "sbb-option-hint";
|
|
15
|
-
}
|
|
16
|
-
static {
|
|
17
|
-
this.styles = [unsafeCSS(option_hint_default)];
|
|
18
|
-
}
|
|
19
|
-
render() {
|
|
20
|
-
return html`
|
|
21
|
-
<div class="sbb-optgroup__icon-space"></div>
|
|
22
|
-
<span class="sbb-option-hint">
|
|
23
|
-
<slot></slot>
|
|
24
|
-
</span>
|
|
25
|
-
`;
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
//#endregion
|
|
29
|
-
export { SbbOptionHintElement as t };
|
|
30
|
-
|
|
31
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLWhpbnQuY29tcG9uZW50LUNjU1VTd2pOLmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy9vcHRpb24vb3B0aW9uLWhpbnQvb3B0aW9uLWhpbnQuc2Nzcz9pbmxpbmUiLCIuLi8uLi8uLi9zcmMvZWxlbWVudHMvb3B0aW9uL29wdGlvbi1oaW50L29wdGlvbi1oaW50LmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJAdXNlICcuLi8uLi9jb3JlL3N0eWxlcycgYXMgc2JiO1xuXG46aG9zdCB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGNvbHVtbi1nYXA6IHZhcigtLXNiYi1vcHRpb24taGludC1jb2x1bW4tZ2FwKTtcbiAgcGFkZGluZy1pbmxpbmU6IHZhcigtLXNiYi1vcHRpb24taGludC1wYWRkaW5nLWlubGluZSk7XG4gIHBhZGRpbmctYmxvY2stZW5kOiB2YXIoLS1zYmItb3B0aW9uLWhpbnQtcGFkZGluZy1ibG9jay1lbmQpO1xuICBmb250LXNpemU6IHZhcigtLXNiYi1vcHRpb24taGludC1mb250LXNpemUpO1xuICBsZXR0ZXItc3BhY2luZzogdmFyKC0tc2JiLXR5cG8tbGV0dGVyLXNwYWNpbmctdGV4dCk7XG59XG5cbjpob3N0KFtuZWdhdGl2ZV0pIHtcbiAgLS1zYmItb3B0aW9uLWhpbnQtY29sb3I6IHZhcigtLXNiYi1jb2xvci01KTtcbn1cblxuLnNiYi1vcHRncm91cF9faWNvbi1zcGFjZSB7XG4gIC8vIENhbiBiZSBvdmVycmlkZGVuIGJ5IHRoZSAncHJlc2VydmUtaWNvbi1zcGFjZScgb24gdGhlIGF1dG9jb21wbGV0ZVxuICBkaXNwbGF5OiB2YXIoLS1zYmItb3B0aW9uLWljb24tY29udGFpbmVyLWRpc3BsYXksIG5vbmUpO1xuICBtaW4td2lkdGg6IHZhcigtLXNiYi1zaXplLWljb24tdWktc21hbGwpO1xufVxuXG4uc2JiLW9wdGlvbi1oaW50IHtcbiAgY29sb3I6IHZhcigtLXNiYi1vcHRpb24taGludC1jb2xvcik7XG4gIC13ZWJraXQtdGV4dC1maWxsLWNvbG9yOiB2YXIoLS1zYmItb3B0aW9uLWhpbnQtY29sb3IpO1xuICBmbGV4LWdyb3c6IDE7XG59XG4iLCJpbXBvcnQgeyB0eXBlIENTU1Jlc3VsdEdyb3VwLCBodG1sLCB0eXBlIFRlbXBsYXRlUmVzdWx0LCB1bnNhZmVDU1MgfSBmcm9tICdsaXQnO1xuXG5pbXBvcnQgeyBTYmJFbGVtZW50LCBTYmJOZWdhdGl2ZU1peGluIH0gZnJvbSAnLi4vLi4vY29yZS50cyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL29wdGlvbi1oaW50LnNjc3M/aW5saW5lJztcblxuLyoqXG4gKiBEaXNwbGF5IGEgdGV4dHVhbCBoaW50IGluc2lkZSBhIGBzYmItYXV0b2NvbXBsZXRlYCBvciBhIGBzYmItc2VsZWN0YC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGRpc3BsYXkgdGhlIGhpbnQgbWVzc2FnZS5cbiAqL1xuZXhwb3J0IGNsYXNzIFNiYk9wdGlvbkhpbnRFbGVtZW50IGV4dGVuZHMgU2JiTmVnYXRpdmVNaXhpbihTYmJFbGVtZW50KSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgcmVhZG9ubHkgZWxlbWVudE5hbWU6IHN0cmluZyA9ICdzYmItb3B0aW9uLWhpbnQnO1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbdW5zYWZlQ1NTKHN0eWxlKV07XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8ZGl2IGNsYXNzPVwic2JiLW9wdGdyb3VwX19pY29uLXNwYWNlXCI+PC9kaXY+XG4gICAgICA8c3BhbiBjbGFzcz1cInNiYi1vcHRpb24taGludFwiPlxuICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICA8L3NwYW4+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLW9wdGlvbi1oaW50JzogU2JiT3B0aW9uSGludEVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUNXQSxJQUFhLHVCQUFiLGNBQTBDLGlCQUFpQixXQUFXLENBQUE7O0FBQ3BDLE9BQUEsY0FBc0I7OztBQUMvQixPQUFBLFNBQXlCLENBQUMsVUFBVSxvQkFBTSxDQUFDOztDQUUvQyxTQUFNO0FBQ3ZCLFNBQU8sSUFBSSJ9
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import { SbbOptionBaseElement } from "./option/option/option-base-element.js";
|
|
2
|
-
import { html, nothing, unsafeCSS } from "lit";
|
|
3
|
-
import { SbbPropertyWatcherController } from "./core.js";
|
|
4
|
-
import { SbbVisualCheckboxElement } from "./visual-checkbox.pure.js";
|
|
5
|
-
//#region src/elements/option/option/option.scss?inline
|
|
6
|
-
var option_default = ":host {\n display: block;\n background-color: var(--sbb-option-background-color);\n font-size: var(--sbb-option-font-size);\n letter-spacing: var(--sbb-typo-letter-spacing-text);\n}\n\n:host(:is(:state(negative),[state--negative])) {\n --sbb-option-color: var(--sbb-color-3-negative);\n --sbb-option-icon-color: var(--sbb-color-5);\n --sbb-option-background-color-hover: var(--sbb-color-midnight);\n --sbb-option-background-color-active: var(--sbb-background-color-4-negative);\n --sbb-option-disabled-border-color: var(--sbb-border-color-5);\n --sbb-option-disabled-background-color: var(--sbb-background-color-3-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n@media (any-hover: hover) {\n :host(:hover:not(:is(:state(disabled),[state--disabled]))) {\n --sbb-option-background-color: var(--sbb-option-background-color-hover);\n }\n}\n\n:host(:active:not(:is(:state(disabled),[state--disabled]))) {\n --sbb-option-background-color: var(--sbb-option-background-color-active);\n}\n\n:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot {\n display: none;\n}\n\n:host(:is(:state(disabled),[state--disabled])) {\n --sbb-option-cursor: var(--sbb-cursor-default);\n}\n@media (forced-colors: active) {\n :host(:is(:state(disabled),[state--disabled])) {\n --sbb-option-color: GrayText;\n }\n}\n\n:host(:is(:state(variant-select),[state--variant-select])) {\n --sbb-option-column-gap: var(--sbb-spacing-fixed-2x);\n --sbb-option-justify-content: space-between;\n}\n\n:host(:is(:state(variant-select),[state--variant-select]):is(:state(multiple),[state--multiple])) {\n --sbb-option-justify-content: start;\n}\n\n:host(:is(:state(active),[state--active])) {\n --sbb-option-focus-outline-color: var(--sbb-focus-outline-color);\n}\n\n:host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight {\n font-weight: bold;\n}\n@media (forced-colors: active) {\n :host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight {\n color: Highlight;\n }\n}\n\n.sbb-option {\n position: relative;\n display: flex;\n min-height: var(--sbb-option-min-height);\n align-items: center;\n column-gap: var(--sbb-option-column-gap);\n padding-inline: var(--sbb-option-padding-inline);\n justify-content: var(--sbb-option-justify-content);\n color: var(--sbb-option-color);\n cursor: var(--sbb-option-cursor);\n -webkit-tap-highlight-color: transparent;\n -webkit-text-fill-color: var(--sbb-option-color);\n}\n.sbb-option::after {\n content: \"\";\n display: block;\n position: absolute;\n inset: var(--sbb-option-focus-outline-inset);\n pointer-events: none;\n border: var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);\n border-radius: var(--sbb-option-border-radius);\n}\n:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option {\n position: relative;\n z-index: 0;\n}\n:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0.375rem;\n border: var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);\n border-radius: var(--sbb-border-radius-2x);\n background-color: var(--sbb-option-disabled-background-color);\n z-index: -1;\n}\n@media (forced-colors: active) {\n :host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option::before {\n border-color: GrayText;\n }\n}\n\n.sbb-option__icon {\n display: flex;\n min-width: var(--sbb-size-icon-ui-small);\n min-height: var(--sbb-size-icon-ui-small);\n color: var(--sbb-option-icon-color);\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon {\n display: var(--sbb-option-icon-container-display, none);\n}\n\n.sbb-option__label {\n text-overflow: var(--sbb-option-text-overflow);\n overflow: var(--sbb-option-overflow);\n white-space: var(--sbb-option-white-space, initial);\n}";
|
|
7
|
-
//#endregion
|
|
8
|
-
//#region src/elements/option/option/option.component.ts
|
|
9
|
-
/**
|
|
10
|
-
* It displays on option item which can be used in `sbb-select` or `sbb-autocomplete`.
|
|
11
|
-
*
|
|
12
|
-
* @slot - Use the unnamed slot to add content to the option label.
|
|
13
|
-
* @slot icon - Use this slot to provide an icon. If `icon-name` is set, a sbb-icon will be used.
|
|
14
|
-
* @cssprop [--sbb-option-icon-container-display=none] - Can be used to reserve space even
|
|
15
|
-
* when preserve-icon-space on autocomplete is not set or iconName is not set.
|
|
16
|
-
* @overrideType value - (T = string) | null
|
|
17
|
-
*/
|
|
18
|
-
var SbbOptionElement = class extends SbbOptionBaseElement {
|
|
19
|
-
static {
|
|
20
|
-
this.elementName = "sbb-option";
|
|
21
|
-
}
|
|
22
|
-
static {
|
|
23
|
-
this.elementDependencies = [SbbVisualCheckboxElement];
|
|
24
|
-
}
|
|
25
|
-
static {
|
|
26
|
-
this.role = "option";
|
|
27
|
-
}
|
|
28
|
-
static {
|
|
29
|
-
this.styles = [unsafeCSS(option_default)];
|
|
30
|
-
}
|
|
31
|
-
static {
|
|
32
|
-
this.events = {
|
|
33
|
-
optionselectionchange: "optionselectionchange",
|
|
34
|
-
optionselected: "optionselected"
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
set _variant(variant) {
|
|
38
|
-
if (this._variantInternal) this.internals.states.delete(`variant-${this._variantInternal}`);
|
|
39
|
-
this._variantInternal = variant;
|
|
40
|
-
if (this._variantInternal) this.internals.states.add(`variant-${this._variantInternal}`);
|
|
41
|
-
}
|
|
42
|
-
get _variant() {
|
|
43
|
-
return this._variantInternal ?? null;
|
|
44
|
-
}
|
|
45
|
-
constructor() {
|
|
46
|
-
super();
|
|
47
|
-
this.optionId = `sbb-option`;
|
|
48
|
-
this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-optgroup"), {
|
|
49
|
-
disabled: (p) => this.disabledFromGroup = p.disabled,
|
|
50
|
-
label: (p) => this.groupLabel = p.label
|
|
51
|
-
}));
|
|
52
|
-
this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-autocomplete"), { negative: (e) => this._handleNegativeChange(e) }));
|
|
53
|
-
this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-select"), {
|
|
54
|
-
multiple: (ancestor) => {
|
|
55
|
-
this.toggleState("multiple", ancestor.multiple);
|
|
56
|
-
this.requestUpdate();
|
|
57
|
-
},
|
|
58
|
-
negative: (e) => this._handleNegativeChange(e)
|
|
59
|
-
}));
|
|
60
|
-
}
|
|
61
|
-
_isMultiple() {
|
|
62
|
-
return !this.hydrationRequired && this.matches?.(":is(:state(multiple),[state--multiple])");
|
|
63
|
-
}
|
|
64
|
-
_handleNegativeChange(ancestor) {
|
|
65
|
-
this.toggleState("negative", ancestor.negative);
|
|
66
|
-
this.requestUpdate();
|
|
67
|
-
}
|
|
68
|
-
connectedCallback() {
|
|
69
|
-
super.connectedCallback();
|
|
70
|
-
if (this.hydrationRequired) this.hydrationComplete.then(() => this._init());
|
|
71
|
-
else this._init();
|
|
72
|
-
}
|
|
73
|
-
_init() {
|
|
74
|
-
this._setVariantByContext();
|
|
75
|
-
this.handleHighlightState();
|
|
76
|
-
}
|
|
77
|
-
selectByClick(event) {
|
|
78
|
-
if (this.disabled || this.disabledFromGroup) {
|
|
79
|
-
event.stopPropagation();
|
|
80
|
-
return;
|
|
81
|
-
}
|
|
82
|
-
if (this._isMultiple()) {
|
|
83
|
-
event.stopPropagation();
|
|
84
|
-
this.selectViaUserInteraction(!this.selected);
|
|
85
|
-
} else this.selectViaUserInteraction(true);
|
|
86
|
-
}
|
|
87
|
-
selectViaUserInteraction(selected) {
|
|
88
|
-
super.selectViaUserInteraction(selected);
|
|
89
|
-
/** The optionselectionchange event is dispatched when the option selection status changes. */
|
|
90
|
-
this.dispatchEvent(new Event("optionselectionchange", {
|
|
91
|
-
bubbles: true,
|
|
92
|
-
composed: true
|
|
93
|
-
}));
|
|
94
|
-
}
|
|
95
|
-
_setVariantByContext() {
|
|
96
|
-
if (this.closest?.("sbb-autocomplete")) this._variant = "autocomplete";
|
|
97
|
-
else if (this.closest?.("sbb-select")) this._variant = "select";
|
|
98
|
-
}
|
|
99
|
-
handleHighlightState() {
|
|
100
|
-
if (this._variant !== "autocomplete") {
|
|
101
|
-
this.updateDisableHighlight(true);
|
|
102
|
-
return;
|
|
103
|
-
}
|
|
104
|
-
super.handleHighlightState();
|
|
105
|
-
}
|
|
106
|
-
renderIcon() {
|
|
107
|
-
return html`
|
|
108
|
-
<!-- Icon -->
|
|
109
|
-
${!this._isMultiple() ? html` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>` : nothing}
|
|
110
|
-
|
|
111
|
-
<!-- Checkbox -->
|
|
112
|
-
${this._isMultiple() ? html`
|
|
113
|
-
<sbb-visual-checkbox
|
|
114
|
-
?checked=${this.selected}
|
|
115
|
-
?disabled=${this.disabled || this.disabledFromGroup}
|
|
116
|
-
?negative=${this.matches?.(":is(:state(negative),[state--negative])")}
|
|
117
|
-
></sbb-visual-checkbox>
|
|
118
|
-
` : nothing}
|
|
119
|
-
`;
|
|
120
|
-
}
|
|
121
|
-
renderLabel() {
|
|
122
|
-
if (this._variant !== "autocomplete") return nothing;
|
|
123
|
-
return super.renderLabel();
|
|
124
|
-
}
|
|
125
|
-
renderTick() {
|
|
126
|
-
return this._variant === "select" && !this._isMultiple() && this.selected ? html`<sbb-icon name="tick-small"></sbb-icon>` : nothing;
|
|
127
|
-
}
|
|
128
|
-
};
|
|
129
|
-
//#endregion
|
|
130
|
-
export { SbbOptionElement as t };
|
|
131
|
-
|
|
132
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLmNvbXBvbmVudC1CRWJJRWg1by5qcyIsIm5hbWVzIjpbXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvb3B0aW9uL29wdGlvbi9vcHRpb24uc2Nzcz9pbmxpbmUiLCIuLi8uLi8uLi9zcmMvZWxlbWVudHMvb3B0aW9uL29wdGlvbi9vcHRpb24uY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbIkB1c2UgJy4uLy4uL2NvcmUvc3R5bGVzJyBhcyBzYmI7XG5cbjpob3N0IHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXNiYi1vcHRpb24tYmFja2dyb3VuZC1jb2xvcik7XG4gIGZvbnQtc2l6ZTogdmFyKC0tc2JiLW9wdGlvbi1mb250LXNpemUpO1xuICBsZXR0ZXItc3BhY2luZzogdmFyKC0tc2JiLXR5cG8tbGV0dGVyLXNwYWNpbmctdGV4dCk7XG59XG5cbjpob3N0KDpzdGF0ZShuZWdhdGl2ZSkpIHtcbiAgLS1zYmItb3B0aW9uLWNvbG9yOiB2YXIoLS1zYmItY29sb3ItMy1uZWdhdGl2ZSk7XG4gIC0tc2JiLW9wdGlvbi1pY29uLWNvbG9yOiB2YXIoLS1zYmItY29sb3ItNSk7XG4gIC0tc2JiLW9wdGlvbi1iYWNrZ3JvdW5kLWNvbG9yLWhvdmVyOiB2YXIoLS1zYmItY29sb3ItbWlkbmlnaHQpO1xuICAtLXNiYi1vcHRpb24tYmFja2dyb3VuZC1jb2xvci1hY3RpdmU6IHZhcigtLXNiYi1iYWNrZ3JvdW5kLWNvbG9yLTQtbmVnYXRpdmUpO1xuICAtLXNiYi1vcHRpb24tZGlzYWJsZWQtYm9yZGVyLWNvbG9yOiB2YXIoLS1zYmItYm9yZGVyLWNvbG9yLTUpO1xuICAtLXNiYi1vcHRpb24tZGlzYWJsZWQtYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2JiLWJhY2tncm91bmQtY29sb3ItMy1uZWdhdGl2ZSk7XG4gIC0tc2JiLWZvY3VzLW91dGxpbmUtY29sb3I6IHZhcigtLXNiYi1mb2N1cy1vdXRsaW5lLWNvbG9yLWRhcmspO1xufVxuXG46aG9zdCg6aG92ZXI6bm90KDpzdGF0ZShkaXNhYmxlZCkpKSB7XG4gIEBpbmNsdWRlIHNiYi5ob3Zlci1tcSgkaG92ZXI6IHRydWUpIHtcbiAgICAtLXNiYi1vcHRpb24tYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2JiLW9wdGlvbi1iYWNrZ3JvdW5kLWNvbG9yLWhvdmVyKTtcbiAgfVxufVxuXG46aG9zdCg6YWN0aXZlOm5vdCg6c3RhdGUoZGlzYWJsZWQpKSkge1xuICAtLXNiYi1vcHRpb24tYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2JiLW9wdGlvbi1iYWNrZ3JvdW5kLWNvbG9yLWFjdGl2ZSk7XG59XG5cbi8vIElmIGhpZ2hsaWdodGluZyBpcyBlbmFibGVkLCBoaWRlIHRoZSBvcmlnaW5hbCBzbG90IGNvbnRlbnRcbjpob3N0KDpub3QoOnN0YXRlKGRpc2FibGUtaGlnaGxpZ2h0KSkpIHtcbiAgLnNiYi1vcHRpb25fX2xhYmVsIHNsb3Qge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbn1cblxuOmhvc3QoOnN0YXRlKGRpc2FibGVkKSkge1xuICAtLXNiYi1vcHRpb24tY3Vyc29yOiB2YXIoLS1zYmItY3Vyc29yLWRlZmF1bHQpO1xuXG4gIEBpbmNsdWRlIHNiYi5pZi1mb3JjZWQtY29sb3JzIHtcbiAgICAtLXNiYi1vcHRpb24tY29sb3I6IEdyYXlUZXh0O1xuICB9XG59XG5cbjpob3N0KDpzdGF0ZSh2YXJpYW50LXNlbGVjdCkpIHtcbiAgLS1zYmItb3B0aW9uLWNvbHVtbi1nYXA6IHZhcigtLXNiYi1zcGFjaW5nLWZpeGVkLTJ4KTtcbiAgLS1zYmItb3B0aW9uLWp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2Vlbjtcbn1cblxuOmhvc3QoOnN0YXRlKHZhcmlhbnQtc2VsZWN0KTpzdGF0ZShtdWx0aXBsZSkpIHtcbiAgLS1zYmItb3B0aW9uLWp1c3RpZnktY29udGVudDogc3RhcnQ7XG59XG5cbjpob3N0KDpzdGF0ZShhY3RpdmUpKSB7XG4gIC0tc2JiLW9wdGlvbi1mb2N1cy1vdXRsaW5lLWNvbG9yOiB2YXIoLS1zYmItZm9jdXMtb3V0bGluZS1jb2xvcik7XG59XG5cbi5zYmItb3B0aW9uX19sYWJlbC0taGlnaGxpZ2h0IHtcbiAgOmhvc3QoOm5vdCg6aXMoOnN0YXRlKGRpc2FibGVkKSkpKSAmIHtcbiAgICBAaW5jbHVkZSBzYmIudGV4dC0tYm9sZDtcbiAgICBAaW5jbHVkZSBzYmIuaWYtZm9yY2VkLWNvbG9ycyB7XG4gICAgICBjb2xvcjogSGlnaGxpZ2h0O1xuICAgIH1cbiAgfVxufVxuXG4uc2JiLW9wdGlvbiB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgZGlzcGxheTogZmxleDtcbiAgbWluLWhlaWdodDogdmFyKC0tc2JiLW9wdGlvbi1taW4taGVpZ2h0KTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgY29sdW1uLWdhcDogdmFyKC0tc2JiLW9wdGlvbi1jb2x1bW4tZ2FwKTtcbiAgcGFkZGluZy1pbmxpbmU6IHZhcigtLXNiYi1vcHRpb24tcGFkZGluZy1pbmxpbmUpO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHZhcigtLXNiYi1vcHRpb24tanVzdGlmeS1jb250ZW50KTtcbiAgY29sb3I6IHZhcigtLXNiYi1vcHRpb24tY29sb3IpO1xuICBjdXJzb3I6IHZhcigtLXNiYi1vcHRpb24tY3Vyc29yKTtcbiAgLXdlYmtpdC10YXAtaGlnaGxpZ2h0LWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgLXdlYmtpdC10ZXh0LWZpbGwtY29sb3I6IHZhcigtLXNiYi1vcHRpb24tY29sb3IpO1xuXG4gIC8vIFdlIHVzZSB0aGUgcHNldWRvIGVsZW1lbnQgdG8gZGlzcGxheSB0aGUgZm9jdXMgb3V0bGluZSAoaW5saW5lIGluIHRoaXMgY2FzZSlcbiAgJjo6YWZ0ZXIge1xuICAgIGNvbnRlbnQ6ICcnO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBpbnNldDogdmFyKC0tc2JiLW9wdGlvbi1mb2N1cy1vdXRsaW5lLWluc2V0KTtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICBib3JkZXI6IHZhcigtLXNiYi1mb2N1cy1vdXRsaW5lLXdpZHRoKSBzb2xpZCB2YXIoLS1zYmItb3B0aW9uLWZvY3VzLW91dGxpbmUtY29sb3IpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLXNiYi1vcHRpb24tYm9yZGVyLXJhZGl1cyk7XG4gIH1cblxuICAvLyBBZGQgaW5uZXIgYm9yZGVyIGFuZCBiYWNrZ3JvdW5kIGZvciBkaXNhYmxlZCBvcHRpb24gd2hlbiBpdCdzIG5vdCBtdWx0aXBsZVxuICA6aG9zdCg6c3RhdGUoZGlzYWJsZWQpOm5vdCg6c3RhdGUobXVsdGlwbGUpKSkgJiB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHotaW5kZXg6IDA7XG5cbiAgICAmOjpiZWZvcmUge1xuICAgICAgY29udGVudDogJyc7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGluc2V0OiAje3NiYi5weC10by1yZW0tYnVpbGQoNil9O1xuICAgICAgYm9yZGVyOiB2YXIoLS1zYmItYm9yZGVyLXdpZHRoLTF4KSBkYXNoZWQgdmFyKC0tc2JiLW9wdGlvbi1kaXNhYmxlZC1ib3JkZXItY29sb3IpO1xuICAgICAgYm9yZGVyLXJhZGl1czogdmFyKC0tc2JiLWJvcmRlci1yYWRpdXMtMngpO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2JiLW9wdGlvbi1kaXNhYmxlZC1iYWNrZ3JvdW5kLWNvbG9yKTtcbiAgICAgIHotaW5kZXg6IC0xO1xuXG4gICAgICBAaW5jbHVkZSBzYmIuaWYtZm9yY2VkLWNvbG9ycyB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogR3JheVRleHQ7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG5cbi5zYmItb3B0aW9uX19pY29uIHtcbiAgZGlzcGxheTogZmxleDtcbiAgbWluLXdpZHRoOiB2YXIoLS1zYmItc2l6ZS1pY29uLXVpLXNtYWxsKTtcbiAgbWluLWhlaWdodDogdmFyKC0tc2JiLXNpemUtaWNvbi11aS1zbWFsbCk7XG4gIGNvbG9yOiB2YXIoLS1zYmItb3B0aW9uLWljb24tY29sb3IpO1xuXG4gIDpob3N0KDpub3QoOnN0YXRlKHNsb3R0ZWQtaWNvbiksIDpzdGF0ZShoYXMtaWNvbi1uYW1lKSkpICYge1xuICAgIC8vIENhbiBiZSBvdmVycmlkZGVuIGJ5IHRoZSAncHJlc2VydmUtaWNvbi1zcGFjZScgb24gdGhlIGF1dG9jb21wbGV0ZVxuICAgIGRpc3BsYXk6IHZhcigtLXNiYi1vcHRpb24taWNvbi1jb250YWluZXItZGlzcGxheSwgbm9uZSk7XG4gIH1cbn1cblxuLnNiYi1vcHRpb25fX2xhYmVsIHtcbiAgdGV4dC1vdmVyZmxvdzogdmFyKC0tc2JiLW9wdGlvbi10ZXh0LW92ZXJmbG93KTtcbiAgb3ZlcmZsb3c6IHZhcigtLXNiYi1vcHRpb24tb3ZlcmZsb3cpO1xuICB3aGl0ZS1zcGFjZTogdmFyKC0tc2JiLW9wdGlvbi13aGl0ZS1zcGFjZSwgaW5pdGlhbCk7XG59XG4iLCJpbXBvcnQgeyB0eXBlIENTU1Jlc3VsdEdyb3VwLCBodG1sLCBub3RoaW5nLCB0eXBlIFRlbXBsYXRlUmVzdWx0LCB1bnNhZmVDU1MgfSBmcm9tICdsaXQnO1xuXG5pbXBvcnQgdHlwZSB7IFNiYkF1dG9jb21wbGV0ZUVsZW1lbnQgfSBmcm9tICcuLi8uLi9hdXRvY29tcGxldGUucHVyZS50cyc7XG5pbXBvcnQgdHlwZSB7IFNiYkVsZW1lbnRUeXBlIH0gZnJvbSAnLi4vLi4vY29yZS50cyc7XG5pbXBvcnQgeyBTYmJQcm9wZXJ0eVdhdGNoZXJDb250cm9sbGVyIH0gZnJvbSAnLi4vLi4vY29yZS50cyc7XG5pbXBvcnQgdHlwZSB7IFNiYlNlbGVjdEVsZW1lbnQgfSBmcm9tICcuLi8uLi9zZWxlY3QucHVyZS50cyc7XG5pbXBvcnQgeyBTYmJWaXN1YWxDaGVja2JveEVsZW1lbnQgfSBmcm9tICcuLi8uLi92aXN1YWwtY2hlY2tib3gucHVyZS50cyc7XG5cbmltcG9ydCB7IFNiYk9wdGlvbkJhc2VFbGVtZW50IH0gZnJvbSAnLi9vcHRpb24tYmFzZS1lbGVtZW50LnRzJztcbmltcG9ydCBzdHlsZSBmcm9tICcuL29wdGlvbi5zY3NzP2lubGluZSc7XG5cbmV4cG9ydCB0eXBlIFNiYk9wdGlvblZhcmlhbnQgPSAnYXV0b2NvbXBsZXRlJyB8ICdzZWxlY3QnIHwgbnVsbDtcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyBvbiBvcHRpb24gaXRlbSB3aGljaCBjYW4gYmUgdXNlZCBpbiBgc2JiLXNlbGVjdGAgb3IgYHNiYi1hdXRvY29tcGxldGVgLlxuICpcbiAqIEBzbG90IC0gVXNlIHRoZSB1bm5hbWVkIHNsb3QgdG8gYWRkIGNvbnRlbnQgdG8gdGhlIG9wdGlvbiBsYWJlbC5cbiAqIEBzbG90IGljb24gLSBVc2UgdGhpcyBzbG90IHRvIHByb3ZpZGUgYW4gaWNvbi4gSWYgYGljb24tbmFtZWAgaXMgc2V0LCBhIHNiYi1pY29uIHdpbGwgYmUgdXNlZC5cbiAqIEBjc3Nwcm9wIFstLXNiYi1vcHRpb24taWNvbi1jb250YWluZXItZGlzcGxheT1ub25lXSAtIENhbiBiZSB1c2VkIHRvIHJlc2VydmUgc3BhY2UgZXZlblxuICogd2hlbiBwcmVzZXJ2ZS1pY29uLXNwYWNlIG9uIGF1dG9jb21wbGV0ZSBpcyBub3Qgc2V0IG9yIGljb25OYW1lIGlzIG5vdCBzZXQuXG4gKiBAb3ZlcnJpZGVUeXBlIHZhbHVlIC0gKFQgPSBzdHJpbmcpIHwgbnVsbFxuICovXG5leHBvcnQgY2xhc3MgU2JiT3B0aW9uRWxlbWVudDxUID0gc3RyaW5nPiBleHRlbmRzIFNiYk9wdGlvbkJhc2VFbGVtZW50PFQ+IHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSBlbGVtZW50TmFtZTogc3RyaW5nID0gJ3NiYi1vcHRpb24nO1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIGVsZW1lbnREZXBlbmRlbmNpZXM6IFNiYkVsZW1lbnRUeXBlW10gPSBbU2JiVmlzdWFsQ2hlY2tib3hFbGVtZW50XTtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSByb2xlID0gJ29wdGlvbic7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFt1bnNhZmVDU1Moc3R5bGUpXTtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSBldmVudHMgPSB7XG4gICAgb3B0aW9uc2VsZWN0aW9uY2hhbmdlOiAnb3B0aW9uc2VsZWN0aW9uY2hhbmdlJyxcbiAgICBvcHRpb25zZWxlY3RlZDogJ29wdGlvbnNlbGVjdGVkJyxcbiAgfSBhcyBjb25zdDtcblxuICBwcm90ZWN0ZWQgb3B0aW9uSWQgPSBgc2JiLW9wdGlvbmA7XG5cbiAgcHJpdmF0ZSBzZXQgX3ZhcmlhbnQodmFyaWFudDogU2JiT3B0aW9uVmFyaWFudCkge1xuICAgIGlmICh0aGlzLl92YXJpYW50SW50ZXJuYWwpIHtcbiAgICAgIHRoaXMuaW50ZXJuYWxzLnN0YXRlcy5kZWxldGUoYHZhcmlhbnQtJHt0aGlzLl92YXJpYW50SW50ZXJuYWx9YCk7XG4gICAgfVxuICAgIHRoaXMuX3ZhcmlhbnRJbnRlcm5hbCA9IHZhcmlhbnQ7XG4gICAgaWYgKHRoaXMuX3ZhcmlhbnRJbnRlcm5hbCkge1xuICAgICAgdGhpcy5pbnRlcm5hbHMuc3RhdGVzLmFkZChgdmFyaWFudC0ke3RoaXMuX3ZhcmlhbnRJbnRlcm5hbH1gKTtcbiAgICB9XG4gIH1cbiAgcHJpdmF0ZSBnZXQgX3ZhcmlhbnQoKTogU2JiT3B0aW9uVmFyaWFudCB7XG4gICAgcmV0dXJuIHRoaXMuX3ZhcmlhbnRJbnRlcm5hbCA/PyBudWxsO1xuICB9XG4gIHByaXZhdGUgX3ZhcmlhbnRJbnRlcm5hbD86IFNiYk9wdGlvblZhcmlhbnQ7XG5cbiAgcHVibGljIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5hZGRDb250cm9sbGVyKFxuICAgICAgbmV3IFNiYlByb3BlcnR5V2F0Y2hlckNvbnRyb2xsZXIodGhpcywgKCkgPT4gdGhpcy5jbG9zZXN0KCdzYmItb3B0Z3JvdXAnKSwge1xuICAgICAgICBkaXNhYmxlZDogKHApID0+ICh0aGlzLmRpc2FibGVkRnJvbUdyb3VwID0gcC5kaXNhYmxlZCksXG4gICAgICAgIGxhYmVsOiAocCkgPT4gKHRoaXMuZ3JvdXBMYWJlbCA9IHAubGFiZWwpLFxuICAgICAgfSksXG4gICAgKTtcblxuICAgIHRoaXMuYWRkQ29udHJvbGxlcihcbiAgICAgIG5ldyBTYmJQcm9wZXJ0eVdhdGNoZXJDb250cm9sbGVyKHRoaXMsICgpID0+IHRoaXMuY2xvc2VzdCgnc2JiLWF1dG9jb21wbGV0ZScpLCB7XG4gICAgICAgIG5lZ2F0aXZlOiAoZSkgPT4gdGhpcy5faGFuZGxlTmVnYXRpdmVDaGFuZ2UoZSksXG4gICAgICB9KSxcbiAgICApO1xuXG4gICAgdGhpcy5hZGRDb250cm9sbGVyKFxuICAgICAgbmV3IFNiYlByb3BlcnR5V2F0Y2hlckNvbnRyb2xsZXIodGhpcywgKCkgPT4gdGhpcy5jbG9zZXN0KCdzYmItc2VsZWN0JyksIHtcbiAgICAgICAgbXVsdGlwbGU6IChhbmNlc3RvcikgPT4ge1xuICAgICAgICAgIHRoaXMudG9nZ2xlU3RhdGUoJ211bHRpcGxlJywgYW5jZXN0b3IubXVsdGlwbGUpO1xuXG4gICAgICAgICAgLy8gTXVsdGlwbGUgaGFzIHRvIGJlIHByb3BhZ2F0ZWQgdG8gc2JiLXZpc3VhbC1jaGVja2JveCBpbnNpZGUgdGhlIG9wdGlvbi5cbiAgICAgICAgICB0aGlzLnJlcXVlc3RVcGRhdGUoKTtcbiAgICAgICAgfSxcbiAgICAgICAgbmVnYXRpdmU6IChlKSA9PiB0aGlzLl9oYW5kbGVOZWdhdGl2ZUNoYW5nZShlKSxcbiAgICAgIH0pLFxuICAgICk7XG4gIH1cblxuICBwcml2YXRlIF9pc011bHRpcGxlKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiAhdGhpcy5oeWRyYXRpb25SZXF1aXJlZCAmJiB0aGlzLm1hdGNoZXM/LignOnN0YXRlKG11bHRpcGxlKScpO1xuICB9XG5cbiAgcHJpdmF0ZSBfaGFuZGxlTmVnYXRpdmVDaGFuZ2UoYW5jZXN0b3I6IFNiYkF1dG9jb21wbGV0ZUVsZW1lbnQgfCBTYmJTZWxlY3RFbGVtZW50KTogdm9pZCB7XG4gICAgdGhpcy50b2dnbGVTdGF0ZSgnbmVnYXRpdmUnLCBhbmNlc3Rvci5uZWdhdGl2ZSk7XG5cbiAgICAvLyBOZWdhdGl2ZSBoYXMgdG8gYmUgcHJvcGFnYXRlZCB0byBzYmItdmlzdWFsLWNoZWNrYm94IGluc2lkZSB0aGUgb3B0aW9uLlxuICAgIHRoaXMucmVxdWVzdFVwZGF0ZSgpO1xuICB9XG5cbiAgcHVibGljIG92ZXJyaWRlIGNvbm5lY3RlZENhbGxiYWNrKCk6IHZvaWQge1xuICAgIHN1cGVyLmNvbm5lY3RlZENhbGxiYWNrKCk7XG5cbiAgICAvLyBXZSBuZWVkIHRvIGNoZWNrIGhpZ2hsaWdodCBzdGF0ZSBib3RoIG9uIHNsb3QgY2hhbmdlLCBidXQgYWxzbyB3aGVuIGNvbm5lY3RpbmdcbiAgICAvLyB0aGUgZWxlbWVudCB0byB0aGUgRE9NLiBUaGUgc2xvdCBjaGFuZ2UgZXZlbnRzIG1pZ2h0IGJlIHN3YWxsb3dlZCB3aGVuIHVzaW5nIGRlY2xhcmF0aXZlXG4gICAgLy8gc2hhZG93IERPTSB3aXRoIFNTUiBvciBpZiB0aGUgRE9NIGlzIGNoYW5nZWQgd2hlbiBkaXNjb25uZWN0ZWQuXG4gICAgaWYgKHRoaXMuaHlkcmF0aW9uUmVxdWlyZWQpIHtcbiAgICAgIHRoaXMuaHlkcmF0aW9uQ29tcGxldGUudGhlbigoKSA9PiB0aGlzLl9pbml0KCkpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLl9pbml0KCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBfaW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLl9zZXRWYXJpYW50QnlDb250ZXh0KCk7XG4gICAgdGhpcy5oYW5kbGVIaWdobGlnaHRTdGF0ZSgpO1xuICB9XG5cbiAgcHJvdGVjdGVkIHNlbGVjdEJ5Q2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5kaXNhYmxlZCB8fCB0aGlzLmRpc2FibGVkRnJvbUdyb3VwKSB7XG4gICAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBpZiAodGhpcy5faXNNdWx0aXBsZSgpKSB7XG4gICAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgIHRoaXMuc2VsZWN0VmlhVXNlckludGVyYWN0aW9uKCF0aGlzLnNlbGVjdGVkKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5zZWxlY3RWaWFVc2VySW50ZXJhY3Rpb24odHJ1ZSk7XG4gICAgfVxuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHNlbGVjdFZpYVVzZXJJbnRlcmFjdGlvbihzZWxlY3RlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIHN1cGVyLnNlbGVjdFZpYVVzZXJJbnRlcmFjdGlvbihzZWxlY3RlZCk7XG4gICAgLyoqIFRoZSBvcHRpb25zZWxlY3Rpb25jaGFuZ2UgZXZlbnQgaXMgZGlzcGF0Y2hlZCB3aGVuIHRoZSBvcHRpb24gc2VsZWN0aW9uIHN0YXR1cyBjaGFuZ2VzLiAqL1xuICAgIHRoaXMuZGlzcGF0Y2hFdmVudChuZXcgRXZlbnQoJ29wdGlvbnNlbGVjdGlvbmNoYW5nZScsIHsgYnViYmxlczogdHJ1ZSwgY29tcG9zZWQ6IHRydWUgfSkpO1xuICB9XG5cbiAgcHJpdmF0ZSBfc2V0VmFyaWFudEJ5Q29udGV4dCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5jbG9zZXN0Py4oJ3NiYi1hdXRvY29tcGxldGUnKSkge1xuICAgICAgdGhpcy5fdmFyaWFudCA9ICdhdXRvY29tcGxldGUnO1xuICAgIH0gZWxzZSBpZiAodGhpcy5jbG9zZXN0Py4oJ3NiYi1zZWxlY3QnKSkge1xuICAgICAgdGhpcy5fdmFyaWFudCA9ICdzZWxlY3QnO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSBoYW5kbGVIaWdobGlnaHRTdGF0ZSgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5fdmFyaWFudCAhPT0gJ2F1dG9jb21wbGV0ZScpIHtcbiAgICAgIHRoaXMudXBkYXRlRGlzYWJsZUhpZ2hsaWdodCh0cnVlKTtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBzdXBlci5oYW5kbGVIaWdobGlnaHRTdGF0ZSgpO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlckljb24oKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPCEtLSBJY29uIC0tPlxuICAgICAgJHshdGhpcy5faXNNdWx0aXBsZSgpXG4gICAgICAgID8gaHRtbGAgPHNwYW4gY2xhc3M9XCJzYmItb3B0aW9uX19pY29uXCI+ICR7dGhpcy5yZW5kZXJJY29uU2xvdCgpfSA8L3NwYW4+YFxuICAgICAgICA6IG5vdGhpbmd9XG5cbiAgICAgIDwhLS0gQ2hlY2tib3ggLS0+XG4gICAgICAke3RoaXMuX2lzTXVsdGlwbGUoKVxuICAgICAgICA/IGh0bWxgXG4gICAgICAgICAgICA8c2JiLXZpc3VhbC1jaGVja2JveFxuICAgICAgICAgICAgICA/Y2hlY2tlZD0ke3RoaXMuc2VsZWN0ZWR9XG4gICAgICAgICAgICAgID9kaXNhYmxlZD0ke3RoaXMuZGlzYWJsZWQgfHwgdGhpcy5kaXNhYmxlZEZyb21Hcm91cH1cbiAgICAgICAgICAgICAgP25lZ2F0aXZlPSR7dGhpcy5tYXRjaGVzPy4oJzpzdGF0ZShuZWdhdGl2ZSknKX1cbiAgICAgICAgICAgID48L3NiYi12aXN1YWwtY2hlY2tib3g+XG4gICAgICAgICAgYFxuICAgICAgICA6IG5vdGhpbmd9XG4gICAgYDtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXJMYWJlbCgpOiBUZW1wbGF0ZVJlc3VsdCB8IHR5cGVvZiBub3RoaW5nIHtcbiAgICBpZiAodGhpcy5fdmFyaWFudCAhPT0gJ2F1dG9jb21wbGV0ZScpIHtcbiAgICAgIHJldHVybiBub3RoaW5nO1xuICAgIH1cbiAgICByZXR1cm4gc3VwZXIucmVuZGVyTGFiZWwoKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXJUaWNrKCk6IFRlbXBsYXRlUmVzdWx0IHwgdHlwZW9mIG5vdGhpbmcge1xuICAgIHJldHVybiB0aGlzLl92YXJpYW50ID09PSAnc2VsZWN0JyAmJiAhdGhpcy5faXNNdWx0aXBsZSgpICYmIHRoaXMuc2VsZWN0ZWRcbiAgICAgID8gaHRtbGA8c2JiLWljb24gbmFtZT1cInRpY2stc21hbGxcIj48L3NiYi1pY29uPmBcbiAgICAgIDogbm90aGluZztcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLW9wdGlvbic6IFNiYk9wdGlvbkVsZW1lbnQ7XG4gIH1cblxuICBpbnRlcmZhY2UgR2xvYmFsRXZlbnRIYW5kbGVyc0V2ZW50TWFwIHtcbiAgICBvcHRpb25zZWxlY3Rpb25jaGFuZ2U6IEV2ZW50O1xuICB9XG59XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7O0FDc0JBLElBQWEsbUJBQWIsY0FBa0QscUJBQXVCOztBQUN2QyxPQUFBLGNBQXNCOzs7QUFDL0IsT0FBQSxzQkFBd0MsQ0FBQyx5QkFBeUI7OztBQUN6RCxPQUFBLE9BQU87OztBQUNoQixPQUFBLFNBQXlCLENBQUMsVUFBVSxlQUFNLENBQUM7OztBQUNsQyxPQUFBLFNBQVM7R0FDdkMsdUJBQXVCO0dBQ3ZCLGdCQUFnQjtHQUNSOztDQUlWLElBQVksU0FBUyxTQUF5QjtBQUM1QyxNQUFJLEtBQUssaUJBQ1AsTUFBSyxVQUFVLE9BQU8sT0FBTyxXQUFXLEtBQUssbUJBQW1CO0FBRWxFLE9BQUssbUJBQW1CO0FBQ3hCLE1BQUksS0FBSyxpQkFDUCxNQUFLLFVBQVUsT0FBTyxJQUFJLFdBQVcsS0FBSyxtQkFBbUI7O0NBR2pFLElBQVksV0FBUTtBQUNsQixTQUFPLEtBQUssb0JBQW9COztDQUlsQyxjQUFBO0FBQ0UsU0FBTztBQWpCQyxPQUFBLFdBQVc7QUFrQm5CLE9BQUssY0FDSCxJQUFJLDZCQUE2QixZQUFZLEtBQUssUUFBUSxlQUFlLEVBQUU7R0FDekUsV0FBVyxNQUFPLEtBQUssb0JBQW9CLEVBQUU7R0FDN0MsUUFBUSxNQUFPLEtBQUssYUFBYSxFQUFFO0dBQ3BDLENBQUMsQ0FDSDtBQUVELE9BQUssY0FDSCxJQUFJLDZCQUE2QixZQUFZLEtBQUssUUFBUSxtQkFBbUIsRUFBRSxFQUM3RSxXQUFXLE1BQU0sS0FBSyxzQkFBc0IsRUFBRSxFQUMvQyxDQUFDLENBQ0g7QUFFRCxPQUFLLGNBQ0gsSUFBSSw2QkFBNkIsWUFBWSxLQUFLLFFBQVEsYUFBYSxFQUFFO0dBQ3ZFLFdBQVcsYUFBWTtBQUNyQixTQUFLLFlBQVksWUFBWSxTQUFTLFNBQVM7QUFHL0MsU0FBSyxlQUFlOztHQUV0QixXQUFXLE1BQU0sS0FBSyxzQkFBc0IsRUFBQTtHQUM3QyxDQUFDLENBQ0g7O0NBR0ssY0FBVztBQUNqQixTQUFPLENBQUMsS0FBSyxxQkFBcUIsS0FBSyxVQUFVLDBDQUFtQjs7Q0FHOUQsc0JBQXNCLFVBQW1EO0FBQy9FLE9BQUssWUFBWSxZQUFZLFNBQVMsU0FBUztBQUcvQyxPQUFLLGVBQWU7O0NBR04sb0JBQWlCO0FBQy9CLFFBQU0sbUJBQW1CO0FBS3pCLE1BQUksS0FBSyxrQkFDUCxNQUFLLGtCQUFrQixXQUFXLEtBQUssT0FBTyxDQUFDO01BRS9DLE1BQUssT0FBTzs7Q0FJUixRQUFLO0FBQ1gsT0FBSyxzQkFBc0I7QUFDM0IsT0FBSyxzQkFBc0I7O0NBR25CLGNBQWMsT0FBaUI7QUFDdkMsTUFBSSxLQUFLLFlBQVksS0FBSyxtQkFBbUI7QUFDM0MsU0FBTSxpQkFBaUI7QUFDdkI7O0FBR0YsTUFBSSxLQUFLLGFBQWEsRUFBRTtBQUN0QixTQUFNLGlCQUFpQjtBQUN2QixRQUFLLHlCQUF5QixDQUFDLEtBQUssU0FBUztRQUU3QyxNQUFLLHlCQUF5QixLQUFLOztDQUlwQix5QkFBeUIsVUFBaUI7QUFDM0QsUUFBTSx5QkFBeUIsU0FBUzs7QUFFeEMsT0FBSyxjQUFjLElBQUksTUFBTSx5QkFBeUI7R0FBRSxTQUFTO0dBQU0sVUFBVTtHQUFNLENBQUMsQ0FBQzs7Q0FHbkYsdUJBQW9CO0FBQzFCLE1BQUksS0FBSyxVQUFVLG1CQUFtQixDQUNwQyxNQUFLLFdBQVc7V0FDUCxLQUFLLFVBQVUsYUFBYSxDQUNyQyxNQUFLLFdBQVc7O0NBSUQsdUJBQW9CO0FBQ3JDLE1BQUksS0FBSyxhQUFhLGdCQUFnQjtBQUNwQyxRQUFLLHVCQUF1QixLQUFLO0FBQ2pDOztBQUdGLFFBQU0sc0JBQXNCOztDQUdYLGFBQVU7QUFDM0IsU0FBTyxJQUFJOztRQUVQLENBQUMsS0FBSyxhQUFhLEdBQ2pCLElBQUksb0NBQW9DLEtBQUssZ0JBQWdCLENBQUEsWUFDN0QsUUFBQTs7O1FBR0YsS0FBSyxhQUFhLEdBQ2hCLElBQUk7O3lCQUVXLEtBQUssU0FBQTswQkFDSixLQUFLLFlBQVksS0FBSyxrQkFBQTswQkFDdEIsS0FBSyxVQUFVLDBDQUFtQixDQUFBOztjQUdsRCxRQUFBOzs7Q0FJVyxjQUFXO0FBQzVCLE1BQUksS0FBSyxhQUFhLGVBQ3BCLFFBQU87QUFFVCxTQUFPLE1BQU0sYUFBYTs7Q0FHVCxhQUFVO0FBQzNCLFNBQU8sS0FBSyxhQUFhLFlBQVksQ0FBQyxLQUFLLGFBQWEsSUFBSSxLQUFLLFdBQzdELElBQUksNENBQ0oifQ==
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import { __esDecorate as e, __runInitializers as t } from "tslib";
|
|
2
|
-
import { html as n, nothing as r, unsafeCSS as i } from "lit";
|
|
3
|
-
import { property as a, state as o } from "lit/decorators.js";
|
|
4
|
-
import { SbbDisabledMixin as s, SbbElement as c, forceType as l, isSafari as u } from "./core.js";
|
|
5
|
-
import { SbbDividerElement as d } from "./divider.pure.js";
|
|
6
|
-
//#region src/elements/option/optgroup/optgroup-base-element.scss?inline
|
|
7
|
-
var f = ":host{display:block}:host(:first-child){--sbb-optgroup-divider-display: none}:host(:is(:state(negative),[state--negative])){--sbb-optgroup-label-color: var(--sbb-color-5)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{display:flex;column-gap:var(--sbb-spacing-responsive-xxxs);font-size:var(--sbb-optgroup-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block-end:var(--sbb-optgroup-label-padding-end)}.sbb-optgroup__divider{display:var(--sbb-optgroup-divider-display, block);padding-block:var(--sbb-options-panel-divider-margin-block)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}", p = u, m = (() => {
|
|
8
|
-
let u = s(c), m, h = [], g = [], _, v = [], y = [];
|
|
9
|
-
return class extends u {
|
|
10
|
-
static {
|
|
11
|
-
let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
|
|
12
|
-
m = [l(), a()], _ = [o()], e(this, null, m, {
|
|
13
|
-
kind: "accessor",
|
|
14
|
-
name: "label",
|
|
15
|
-
static: !1,
|
|
16
|
-
private: !1,
|
|
17
|
-
access: {
|
|
18
|
-
has: (e) => "label" in e,
|
|
19
|
-
get: (e) => e.label,
|
|
20
|
-
set: (e, t) => {
|
|
21
|
-
e.label = t;
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
metadata: t
|
|
25
|
-
}, h, g), e(this, null, _, {
|
|
26
|
-
kind: "accessor",
|
|
27
|
-
name: "_inertAriaGroups",
|
|
28
|
-
static: !1,
|
|
29
|
-
private: !1,
|
|
30
|
-
access: {
|
|
31
|
-
has: (e) => "_inertAriaGroups" in e,
|
|
32
|
-
get: (e) => e._inertAriaGroups,
|
|
33
|
-
set: (e, t) => {
|
|
34
|
-
e._inertAriaGroups = t;
|
|
35
|
-
}
|
|
36
|
-
},
|
|
37
|
-
metadata: t
|
|
38
|
-
}, v, y), t && Object.defineProperty(this, Symbol.metadata, {
|
|
39
|
-
enumerable: !0,
|
|
40
|
-
configurable: !0,
|
|
41
|
-
writable: !0,
|
|
42
|
-
value: t
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
static {
|
|
46
|
-
this.role = p ? null : "group";
|
|
47
|
-
}
|
|
48
|
-
static {
|
|
49
|
-
this.elementDependencies = [d];
|
|
50
|
-
}
|
|
51
|
-
static {
|
|
52
|
-
this.styles = [i(f)];
|
|
53
|
-
}
|
|
54
|
-
#e = t(this, h, "");
|
|
55
|
-
get label() {
|
|
56
|
-
return this.#e;
|
|
57
|
-
}
|
|
58
|
-
set label(e) {
|
|
59
|
-
this.#e = e;
|
|
60
|
-
}
|
|
61
|
-
#t = (t(this, g), t(this, v, !1));
|
|
62
|
-
get _inertAriaGroups() {
|
|
63
|
-
return this.#t;
|
|
64
|
-
}
|
|
65
|
-
set _inertAriaGroups(e) {
|
|
66
|
-
this.#t = e;
|
|
67
|
-
}
|
|
68
|
-
constructor() {
|
|
69
|
-
super(), t(this, y), p && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = p) : this._inertAriaGroups = p);
|
|
70
|
-
}
|
|
71
|
-
connectedCallback() {
|
|
72
|
-
super.connectedCallback(), this._updateAriaLabel();
|
|
73
|
-
}
|
|
74
|
-
willUpdate(e) {
|
|
75
|
-
super.willUpdate(e), e.has("disabled") && (this._inertAriaGroups || (this.internals.ariaDisabled = this.disabled ? "true" : null)), e.has("label") && this._updateAriaLabel();
|
|
76
|
-
}
|
|
77
|
-
_handleSlotchange() {
|
|
78
|
-
this._updateAriaLabel(), this._highlightOptions(), this.dispatchEvent(new Event("ɵoptgroupslotchange"));
|
|
79
|
-
}
|
|
80
|
-
_updateAriaLabel() {
|
|
81
|
-
this.internals.ariaLabel = this._inertAriaGroups ? null : this.label;
|
|
82
|
-
}
|
|
83
|
-
_highlightOptions() {
|
|
84
|
-
let e = this.getAutocompleteParent();
|
|
85
|
-
if (!e) return;
|
|
86
|
-
let t = e.triggerElement?.value;
|
|
87
|
-
t && this.options.forEach((e) => e.highlight(t));
|
|
88
|
-
}
|
|
89
|
-
render() {
|
|
90
|
-
return n`
|
|
91
|
-
<div class="sbb-optgroup__divider">
|
|
92
|
-
<sbb-divider ?negative=${this.matches?.(":is(:state(negative),[state--negative])")}></sbb-divider>
|
|
93
|
-
</div>
|
|
94
|
-
${this.label ? n`
|
|
95
|
-
<div class="sbb-optgroup__label" aria-hidden="true">
|
|
96
|
-
<div class="sbb-optgroup__icon-space"></div>
|
|
97
|
-
<span>${this.label}</span>
|
|
98
|
-
</div>
|
|
99
|
-
` : r}
|
|
100
|
-
<slot @slotchange=${this._handleSlotchange}></slot>
|
|
101
|
-
`;
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
})();
|
|
105
|
-
//#endregion
|
|
106
|
-
export { m as t };
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { html as e, unsafeCSS as t } from "lit";
|
|
2
|
-
import { SbbElement as n, SbbNegativeMixin as r } from "./core.js";
|
|
3
|
-
//#region src/elements/option/option-hint/option-hint.scss?inline
|
|
4
|
-
var i = ":host{display:flex;column-gap:var(--sbb-option-hint-column-gap);padding-inline:var(--sbb-option-hint-padding-inline);padding-block-end:var(--sbb-option-hint-padding-block-end);font-size:var(--sbb-option-hint-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}:host([negative]){--sbb-option-hint-color: var(--sbb-color-5)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}.sbb-option-hint{color:var(--sbb-option-hint-color);-webkit-text-fill-color:var(--sbb-option-hint-color);flex-grow:1}", a = class extends r(n) {
|
|
5
|
-
static {
|
|
6
|
-
this.elementName = "sbb-option-hint";
|
|
7
|
-
}
|
|
8
|
-
static {
|
|
9
|
-
this.styles = [t(i)];
|
|
10
|
-
}
|
|
11
|
-
render() {
|
|
12
|
-
return e`
|
|
13
|
-
<div class="sbb-optgroup__icon-space"></div>
|
|
14
|
-
<span class="sbb-option-hint">
|
|
15
|
-
<slot></slot>
|
|
16
|
-
</span>
|
|
17
|
-
`;
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
//#endregion
|
|
21
|
-
export { a as t };
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
import { SbbOptionBaseElement as e } from "./option/option/option-base-element.js";
|
|
2
|
-
import { html as t, nothing as n, unsafeCSS as r } from "lit";
|
|
3
|
-
import { SbbPropertyWatcherController as i } from "./core.js";
|
|
4
|
-
import { SbbVisualCheckboxElement as a } from "./visual-checkbox.pure.js";
|
|
5
|
-
//#region src/elements/option/option/option.scss?inline
|
|
6
|
-
var o = ":host{display:block;background-color:var(--sbb-option-background-color);font-size:var(--sbb-option-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}:host(:is(:state(negative),[state--negative])){--sbb-option-color: var(--sbb-color-3-negative);--sbb-option-icon-color: var(--sbb-color-5);--sbb-option-background-color-hover: var(--sbb-color-midnight);--sbb-option-background-color-active: var(--sbb-background-color-4-negative);--sbb-option-disabled-border-color: var(--sbb-border-color-5);--sbb-option-disabled-background-color: var(--sbb-background-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media(any-hover:hover){:host(:hover:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color: var(--sbb-option-background-color-hover)}}:host(:active:not(:is(:state(disabled),[state--disabled]))){--sbb-option-background-color: var(--sbb-option-background-color-active)}:host(:not(:is(:state(disable-highlight),[state--disable-highlight]))) .sbb-option__label slot{display:none}:host(:is(:state(disabled),[state--disabled])){--sbb-option-cursor: var(--sbb-cursor-default)}@media(forced-colors:active){:host(:is(:state(disabled),[state--disabled])){--sbb-option-color: GrayText}}:host(:is(:state(variant-select),[state--variant-select])){--sbb-option-column-gap: var(--sbb-spacing-fixed-2x);--sbb-option-justify-content: space-between}:host(:is(:state(variant-select),[state--variant-select]):is(:state(multiple),[state--multiple])){--sbb-option-justify-content: start}:host(:is(:state(active),[state--active])){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}:host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight{font-weight:700}@media(forced-colors:active){:host(:not(:is(:is(:state(disabled),[state--disabled])))) .sbb-option__label--highlight{color:Highlight}}.sbb-option{position:relative;display:flex;min-height:var(--sbb-option-min-height);align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color)}.sbb-option:after{content:\"\";display:block;position:absolute;inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius)}:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option{position:relative;z-index:0}:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option:before{content:\"\";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1}@media(forced-colors:active){:host(:is(:state(disabled),[state--disabled]):not(:is(:state(multiple),[state--multiple]))) .sbb-option:before{border-color:GrayText}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{text-overflow:var(--sbb-option-text-overflow);overflow:var(--sbb-option-overflow);white-space:var(--sbb-option-white-space, initial)}", s = class extends e {
|
|
7
|
-
static {
|
|
8
|
-
this.elementName = "sbb-option";
|
|
9
|
-
}
|
|
10
|
-
static {
|
|
11
|
-
this.elementDependencies = [a];
|
|
12
|
-
}
|
|
13
|
-
static {
|
|
14
|
-
this.role = "option";
|
|
15
|
-
}
|
|
16
|
-
static {
|
|
17
|
-
this.styles = [r(o)];
|
|
18
|
-
}
|
|
19
|
-
static {
|
|
20
|
-
this.events = {
|
|
21
|
-
optionselectionchange: "optionselectionchange",
|
|
22
|
-
optionselected: "optionselected"
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
set _variant(e) {
|
|
26
|
-
this._variantInternal && this.internals.states.delete(`variant-${this._variantInternal}`), this._variantInternal = e, this._variantInternal && this.internals.states.add(`variant-${this._variantInternal}`);
|
|
27
|
-
}
|
|
28
|
-
get _variant() {
|
|
29
|
-
return this._variantInternal ?? null;
|
|
30
|
-
}
|
|
31
|
-
constructor() {
|
|
32
|
-
super(), this.optionId = "sbb-option", this.addController(new i(this, () => this.closest("sbb-optgroup"), {
|
|
33
|
-
disabled: (e) => this.disabledFromGroup = e.disabled,
|
|
34
|
-
label: (e) => this.groupLabel = e.label
|
|
35
|
-
})), this.addController(new i(this, () => this.closest("sbb-autocomplete"), { negative: (e) => this._handleNegativeChange(e) })), this.addController(new i(this, () => this.closest("sbb-select"), {
|
|
36
|
-
multiple: (e) => {
|
|
37
|
-
this.toggleState("multiple", e.multiple), this.requestUpdate();
|
|
38
|
-
},
|
|
39
|
-
negative: (e) => this._handleNegativeChange(e)
|
|
40
|
-
}));
|
|
41
|
-
}
|
|
42
|
-
_isMultiple() {
|
|
43
|
-
return !this.hydrationRequired && this.matches?.(":is(:state(multiple),[state--multiple])");
|
|
44
|
-
}
|
|
45
|
-
_handleNegativeChange(e) {
|
|
46
|
-
this.toggleState("negative", e.negative), this.requestUpdate();
|
|
47
|
-
}
|
|
48
|
-
connectedCallback() {
|
|
49
|
-
super.connectedCallback(), this.hydrationRequired ? this.hydrationComplete.then(() => this._init()) : this._init();
|
|
50
|
-
}
|
|
51
|
-
_init() {
|
|
52
|
-
this._setVariantByContext(), this.handleHighlightState();
|
|
53
|
-
}
|
|
54
|
-
selectByClick(e) {
|
|
55
|
-
if (this.disabled || this.disabledFromGroup) {
|
|
56
|
-
e.stopPropagation();
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
this._isMultiple() ? (e.stopPropagation(), this.selectViaUserInteraction(!this.selected)) : this.selectViaUserInteraction(!0);
|
|
60
|
-
}
|
|
61
|
-
selectViaUserInteraction(e) {
|
|
62
|
-
super.selectViaUserInteraction(e), this.dispatchEvent(new Event("optionselectionchange", {
|
|
63
|
-
bubbles: !0,
|
|
64
|
-
composed: !0
|
|
65
|
-
}));
|
|
66
|
-
}
|
|
67
|
-
_setVariantByContext() {
|
|
68
|
-
this.closest?.("sbb-autocomplete") ? this._variant = "autocomplete" : this.closest?.("sbb-select") && (this._variant = "select");
|
|
69
|
-
}
|
|
70
|
-
handleHighlightState() {
|
|
71
|
-
if (this._variant !== "autocomplete") {
|
|
72
|
-
this.updateDisableHighlight(!0);
|
|
73
|
-
return;
|
|
74
|
-
}
|
|
75
|
-
super.handleHighlightState();
|
|
76
|
-
}
|
|
77
|
-
renderIcon() {
|
|
78
|
-
return t`
|
|
79
|
-
<!-- Icon -->
|
|
80
|
-
${this._isMultiple() ? n : t` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
|
|
81
|
-
|
|
82
|
-
<!-- Checkbox -->
|
|
83
|
-
${this._isMultiple() ? t`
|
|
84
|
-
<sbb-visual-checkbox
|
|
85
|
-
?checked=${this.selected}
|
|
86
|
-
?disabled=${this.disabled || this.disabledFromGroup}
|
|
87
|
-
?negative=${this.matches?.(":is(:state(negative),[state--negative])")}
|
|
88
|
-
></sbb-visual-checkbox>
|
|
89
|
-
` : n}
|
|
90
|
-
`;
|
|
91
|
-
}
|
|
92
|
-
renderLabel() {
|
|
93
|
-
return this._variant === "autocomplete" ? super.renderLabel() : n;
|
|
94
|
-
}
|
|
95
|
-
renderTick() {
|
|
96
|
-
return this._variant === "select" && !this._isMultiple() && this.selected ? t`<sbb-icon name="tick-small"></sbb-icon>` : n;
|
|
97
|
-
}
|
|
98
|
-
};
|
|
99
|
-
//#endregion
|
|
100
|
-
export { s as t };
|