@sbb-esta/lyne-elements-dev 4.6.0-dev.1772527171 → 4.7.0-dev.1772543736
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/styles/core.scss +4 -7
- package/core.css +5 -8
- package/custom-elements.json +869 -869
- package/development/status/status.component.d.ts.map +1 -1
- package/development/status/status.component.js +20 -26
- package/off-brand-theme.css +5 -8
- package/package.json +2 -2
- package/safety-theme.css +5 -8
- package/standard-theme.css +5 -8
- package/status/status.component.js +27 -29
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"status.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/status/status.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAUvC,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,YAAY,GACZ,aAAa,GACb,aAAa,CAAC;;AAElB;;;;;;;;;;GAUG;AACH,qBAEM,gBAAiB,SAAQ,qBAAsD;IACnF,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAS1B;IAEH,8BAA8B;IAC9B,SAA6C,IAAI,EAAE,aAAa,CAAU;IAE1E,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,eAAe;cAUJ,cAAc,IAAI,MAAM;cAIxB,MAAM,IAAI,cAAc;
|
|
1
|
+
{"version":3,"file":"status.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/status/status.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAUvC,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,YAAY,GACZ,aAAa,GACb,aAAa,CAAC;;AAElB;;;;;;;;;;GAUG;AACH,qBAEM,gBAAiB,SAAQ,qBAAsD;IACnF,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAS1B;IAEH,8BAA8B;IAC9B,SAA6C,IAAI,EAAE,aAAa,CAAU;IAE1E,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,eAAe;cAUJ,cAAc,IAAI,MAAM;cAIxB,MAAM,IAAI,cAAc;CAW5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
|
|
@@ -12,11 +12,12 @@ import { SbbElementInternalsMixin } from "../core/mixins.js";
|
|
|
12
12
|
import { boxSizingStyles } from "../core/styles.js";
|
|
13
13
|
import { SbbIconNameMixin } from "../icon.js";
|
|
14
14
|
const style = css`:host {
|
|
15
|
-
--sbb-status-color: var(--sbb-color-4);
|
|
16
|
-
--sbb-status-gap: var(--sbb-spacing-fixed-1x);
|
|
17
15
|
--sbb-status-text-color: var(--sbb-status-color);
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
display: flex;
|
|
17
|
+
gap: var(--sbb-status-gap);
|
|
18
|
+
color: var(--sbb-status-text-color);
|
|
19
|
+
font-size: var(--sbb-status-font-size);
|
|
20
|
+
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
:host([type=error]) {
|
|
@@ -48,23 +49,18 @@ const style = css`:host {
|
|
|
48
49
|
--sbb-status-color: var(--sbb-color-pink);
|
|
49
50
|
}
|
|
50
51
|
|
|
51
|
-
|
|
52
|
-
--sbb-
|
|
53
|
-
font-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
57
|
-
font-size: var(--sbb-text-font-size);
|
|
58
|
-
display: flex;
|
|
59
|
-
gap: var(--sbb-status-gap);
|
|
60
|
-
color: var(--_sbb-status-text-color-override, var(--sbb-status-text-color));
|
|
52
|
+
:host(:is(:state(slotted-title),[state--slotted-title])) {
|
|
53
|
+
--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
|
|
54
|
+
--_sbb-status-title-font-size: var(--sbb-heading-font-size-5);
|
|
55
|
+
--_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);
|
|
56
|
+
color: var(--sbb-status-title-color);
|
|
61
57
|
}
|
|
62
58
|
|
|
63
59
|
.sbb-status__icon {
|
|
64
60
|
display: flex;
|
|
65
61
|
flex-shrink: 0;
|
|
66
|
-
color: var(--
|
|
67
|
-
margin-block-start: calc((var(--_sbb-status-title-font-size, var(--sbb-
|
|
62
|
+
color: var(--sbb-status-color);
|
|
63
|
+
margin-block-start: calc((var(--_sbb-status-title-font-size, var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);
|
|
68
64
|
}
|
|
69
65
|
|
|
70
66
|
.sbb-status__content-slot {
|
|
@@ -128,15 +124,13 @@ let SbbStatusElement = (() => {
|
|
|
128
124
|
}
|
|
129
125
|
render() {
|
|
130
126
|
return html`
|
|
131
|
-
<
|
|
132
|
-
|
|
133
|
-
<
|
|
134
|
-
|
|
135
|
-
<
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
</span>
|
|
139
|
-
</div>
|
|
127
|
+
<span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
|
|
128
|
+
<span class="sbb-status__content">
|
|
129
|
+
<slot name="title" @slotchange=${this._configureTitle}></slot>
|
|
130
|
+
<p class="sbb-status__content-slot" @slotchange=${this._handleSlotchange}>
|
|
131
|
+
<slot></slot>
|
|
132
|
+
</p>
|
|
133
|
+
</span>
|
|
140
134
|
`;
|
|
141
135
|
}
|
|
142
136
|
}, _type_accessor_storage = new WeakMap(), _classThis = _a, (() => {
|
|
@@ -154,4 +148,4 @@ let SbbStatusElement = (() => {
|
|
|
154
148
|
export {
|
|
155
149
|
SbbStatusElement
|
|
156
150
|
};
|
|
157
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
151
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhdHVzLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL3N0YXR1cy9zdGF0dXMuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwsIExpdEVsZW1lbnQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IFNiYkVsZW1lbnRJbnRlcm5hbHNNaXhpbiB9IGZyb20gJy4uL2NvcmUvbWl4aW5zLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uL2NvcmUvc3R5bGVzLnRzJztcbmltcG9ydCB7IFNiYkljb25OYW1lTWl4aW4gfSBmcm9tICcuLi9pY29uLnRzJztcbmltcG9ydCB0eXBlIHsgU2JiVGl0bGVFbGVtZW50IH0gZnJvbSAnLi4vdGl0bGUudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9zdGF0dXMuc2Nzcz9saXQmaW5saW5lJztcblxuZXhwb3J0IHR5cGUgU2JiU3RhdHVzVHlwZSA9XG4gIHwgJ2luZm8nXG4gIHwgJ3N1Y2Nlc3MnXG4gIHwgJ3dhcm5pbmcnXG4gIHwgJ2Vycm9yJ1xuICB8ICdwZW5kaW5nJ1xuICB8ICdpbmNvbXBsZXRlJ1xuICB8ICdub3Qtc3RhcnRlZCdcbiAgfCAnaW4tcHJvZ3Jlc3MnO1xuXG4vKipcbiAqIERpc3BsYXlzIGEgbWVzc2FnZSB0byB0aGUgdXNlcidzIGF0dGVudGlvbi5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCBhbiBvcHRpb25hbCBgc2JiLXRpdGxlYCBhbmQgY29udGVudCB0byB0aGUgc3RhdHVzIG1lc3NhZ2UuXG4gKiBAc2xvdCBpY29uIC0gVXNlIHRoaXMgc2xvdCB0byBvdmVycmlkZSB0aGUgZGVmYXVsdCBzdGF0dXMgaWNvbi5cbiAqIEBzbG90IHRpdGxlIC0gU2xvdCBmb3IgdGhlIHRpdGxlLiBGb3IgdGhlIHN0YW5kYXJkIGBzYmItdGl0bGVgIGVsZW1lbnQsIHRoZSBzbG90IGlzIGF1dG9tYXRpY2FsbHkgYXNzaWduZWQgd2hlbiBzbG90dGVkIGluIHRoZSB1bm5hbWVkIHNsb3QuXG4gKiBAY3NzcHJvcCBbLS1zYmItc3RhdHVzLWNvbG9yPXZhcigtLXNiYi1jb2xvci1pcm9uKV0gLSBTcGVjaWZ5IGEgY3VzdG9tIGNvbG9yLFxuICogd2hpY2ggd2lsbCBvdmVycmlkZSB0aGUgcHJlZGVmaW5lZCBjb2xvciBmb3IgYW55IHR5cGUuXG4gKiBAY3NzcHJvcCBbLS1zYmItc3RhdHVzLXRleHQtY29sb3I9dmFyKC0tc2JiLXN0YXR1cy1jb2xvcildIC0gU3BlY2lmeSBhIGN1c3RvbSB0ZXh0IGNvbG9yLFxuICogd2hpY2ggd2lsbCBvdmVycmlkZSB0aGUgcHJlZGVmaW5lZCBjb2xvciBmb3IgYW55IHR5cGUuIE9ubHkgdmFsaWQgZm9yIGEgc3RhdHVzIHdpdGhvdXQgYSB0aXRsZS5cbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLXN0YXR1cycpXG5jbGFzcyBTYmJTdGF0dXNFbGVtZW50IGV4dGVuZHMgU2JiSWNvbk5hbWVNaXhpbihTYmJFbGVtZW50SW50ZXJuYWxzTWl4aW4oTGl0RWxlbWVudCkpIHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuXG4gIHByaXZhdGUgcmVhZG9ubHkgX3N0YXR1c1R5cGVzOiBNYXA8U2JiU3RhdHVzVHlwZSwgc3RyaW5nPiA9IG5ldyBNYXAoW1xuICAgIFsnaW5mbycsICdjaXJjbGUtaW5mb3JtYXRpb24tc21hbGwnXSxcbiAgICBbJ3N1Y2Nlc3MnLCAnY2lyY2xlLXRpY2stc21hbGwnXSxcbiAgICBbJ3dhcm5pbmcnLCAnY2lyY2xlLWV4Y2xhbWF0aW9uLXBvaW50LXNtYWxsJ10sXG4gICAgWydlcnJvcicsICdjaXJjbGUtY3Jvc3Mtc21hbGwnXSxcbiAgICBbJ3BlbmRpbmcnLCAnY2lyY2xlLXRocmVlLWRvdHMtc21hbGwnXSxcbiAgICBbJ2luY29tcGxldGUnLCAnY2lyY2xlLWRvdHRlZC1wYXJ0LXgtc21hbGwnXSxcbiAgICBbJ25vdC1zdGFydGVkJywgJ2NpcmNsZS1kb3R0ZWQtc21hbGwnXSxcbiAgICBbJ2luLXByb2dyZXNzJywgJ2NpcmNsZS1kb3R0ZWQtcGFydC1zbWFsbCddLFxuICBdKTtcblxuICAvKiogVGhlIHR5cGUgb2YgdGhlIHN0YXR1cy4gKi9cbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSB9KSBwdWJsaWMgYWNjZXNzb3IgdHlwZTogU2JiU3RhdHVzVHlwZSA9ICdpbmZvJztcblxuICBwcml2YXRlIF9oYW5kbGVTbG90Y2hhbmdlKCk6IHZvaWQge1xuICAgIGNvbnN0IHRpdGxlID0gQXJyYXkuZnJvbSh0aGlzLmNoaWxkcmVuKS5maW5kKChlbCkgPT4gZWwubG9jYWxOYW1lID09PSAnc2JiLXRpdGxlJyk7XG4gICAgaWYgKHRpdGxlKSB7XG4gICAgICB0aXRsZS5zbG90ID0gJ3RpdGxlJztcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF9jb25maWd1cmVUaXRsZShldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCB0aXRsZSA9IChldmVudC50YXJnZXQgYXMgSFRNTFNsb3RFbGVtZW50KVxuICAgICAgLmFzc2lnbmVkRWxlbWVudHMoKVxuICAgICAgLmZpbmQoKGUpOiBlIGlzIFNiYlRpdGxlRWxlbWVudCA9PiBlLmxvY2FsTmFtZSA9PT0gJ3NiYi10aXRsZScpO1xuICAgIGlmICh0aXRsZSkge1xuICAgICAgY3VzdG9tRWxlbWVudHMudXBncmFkZSh0aXRsZSk7XG4gICAgICB0aXRsZS52aXN1YWxMZXZlbCA9ICc1JztcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVySWNvbk5hbWUoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gc3VwZXIucmVuZGVySWNvbk5hbWUoKSB8fCB0aGlzLl9zdGF0dXNUeXBlcy5nZXQodGhpcy50eXBlKSE7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXN0YXR1c19faWNvblwiPiAke3RoaXMucmVuZGVySWNvblNsb3QoKX0gPC9zcGFuPlxuICAgICAgPHNwYW4gY2xhc3M9XCJzYmItc3RhdHVzX19jb250ZW50XCI+XG4gICAgICAgIDxzbG90IG5hbWU9XCJ0aXRsZVwiIEBzbG90Y2hhbmdlPSR7dGhpcy5fY29uZmlndXJlVGl0bGV9Pjwvc2xvdD5cbiAgICAgICAgPHAgY2xhc3M9XCJzYmItc3RhdHVzX19jb250ZW50LXNsb3RcIiBAc2xvdGNoYW5nZT0ke3RoaXMuX2hhbmRsZVNsb3RjaGFuZ2V9PlxuICAgICAgICAgIDxzbG90Pjwvc2xvdD5cbiAgICAgICAgPC9wPlxuICAgICAgPC9zcGFuPlxuICAgIGA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi1zdGF0dXMnOiBTYmJTdGF0dXNFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUFrQ00sb0JBQWdCLE1BQUE7OzBCQURyQixjQUFjLFlBQVksQ0FBQzs7OztBQUNHLE1BQUEsY0FBQSxpQkFBaUIseUJBQXlCLFVBQVUsQ0FBQzs7OztBQUE3RCxFQUFBLG1CQUFRLFlBQXNEO0FBQUE7O0FBZXREO0FBWlosV0FBQSxtQ0FBK0MsSUFBSTtBQUFBLFFBQ2xFLENBQUMsUUFBUSwwQkFBMEI7QUFBQSxRQUNuQyxDQUFDLFdBQVcsbUJBQW1CO0FBQUEsUUFDL0IsQ0FBQyxXQUFXLGdDQUFnQztBQUFBLFFBQzVDLENBQUMsU0FBUyxvQkFBb0I7QUFBQSxRQUM5QixDQUFDLFdBQVcseUJBQXlCO0FBQUEsUUFDckMsQ0FBQyxjQUFjLDRCQUE0QjtBQUFBLFFBQzNDLENBQUMsZUFBZSxxQkFBcUI7QUFBQSxRQUNyQyxDQUFDLGVBQWUsMEJBQTBCO0FBQUEsTUFBQSxDQUMzQztBQUc0Qyx5QkFBQSx3QkFBQSxrQkFBQSxNQUFBLG9CQUFzQixNQUFNOzs7O0lBQTVDLElBQWdCLE9BQUk7QUFBQSxhQUFBLG1CQUFBO0FBQUEsSUFBQTtBQUFBLElBQXBCLElBQWdCLEtBQUksT0FBQTtBQUFBLHlCQUFBLHdCQUFBO0FBQUEsSUFBQTtBQUFBLElBRXpDLG9CQUFpQjtBQUN2QixZQUFNLFFBQVEsTUFBTSxLQUFLLEtBQUssUUFBUSxFQUFFLEtBQUssQ0FBQyxPQUFPLEdBQUcsY0FBYyxXQUFXO0FBQ2pGLFVBQUksT0FBTztBQUNULGNBQU0sT0FBTztBQUFBLE1BQ2Y7QUFBQSxJQUNGO0FBQUEsSUFFUSxnQkFBZ0IsT0FBWTtBQUNsQyxZQUFNLFFBQVMsTUFBTSxPQUNsQixpQkFBQSxFQUNBLEtBQUssQ0FBQyxNQUE0QixFQUFFLGNBQWMsV0FBVztBQUNoRSxVQUFJLE9BQU87QUFDVCx1QkFBZSxRQUFRLEtBQUs7QUFDNUIsY0FBTSxjQUFjO0FBQUEsTUFDdEI7QUFBQSxJQUNGO0FBQUEsSUFFbUIsaUJBQWM7QUFDL0IsYUFBTyxNQUFNLG9CQUFvQixLQUFLLGFBQWEsSUFBSSxLQUFLLElBQUk7QUFBQSxJQUNsRTtBQUFBLElBRW1CLFNBQU07QUFDdkIsYUFBTztBQUFBLHdDQUM2QixLQUFLLGdCQUFnQjtBQUFBO0FBQUEseUNBRXBCLEtBQUssZUFBZTtBQUFBLDBEQUNILEtBQUssaUJBQWlCO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQUs5RTtBQUFBLEtBakM2Qjs7QUFBNUIsdUJBQUEsQ0FBQSxTQUFTLEVBQUUsU0FBUyxLQUFBLENBQU0sQ0FBQztBQUFDLGlCQUFBLElBQUEsTUFBQSxrQkFBQSxFQUFBLE1BQUEsWUFBQSxNQUFBLFFBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsVUFBQSxLQUFBLEtBQUEsQ0FBQSxRQUFBLElBQWdCLE1BQUksS0FBQSxDQUFBLEtBQUEsVUFBQTtBQUFBLFVBQUosT0FBSTtBQUFBLElBQUEsS0FBQSxVQUFBLFVBQUEsR0FBQSxvQkFBQSx1QkFBQTtBQWZuRCxpQkFBQSxNQUFBLG1CQUFBLEVBQUEsT0FBQSxXQUFBLEdBQUEsa0JBQUEsRUFBQSxNQUFBLFNBQUEsTUFBQSxXQUFBLE1BQUEsVUFBQSxVQUFBLEdBQUEsTUFBQSx1QkFBQTs7O1FBQ3lCLEdBQUEsU0FBeUIsQ0FBQyxpQkFBaUIsS0FBSyxHQURuRSxrQkFBQSxZQUFBLHVCQUFBLEdBQWlCOzs7In0=
|
package/off-brand-theme.css
CHANGED
|
@@ -1640,6 +1640,11 @@ summary {
|
|
|
1640
1640
|
--sbb-selection-panel-input-padding-block-m
|
|
1641
1641
|
);
|
|
1642
1642
|
--sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-m);
|
|
1643
|
+
--sbb-status-color: var(--sbb-color-4);
|
|
1644
|
+
--sbb-status-gap: var(--sbb-spacing-fixed-1x);
|
|
1645
|
+
--sbb-status-font-size: var(--sbb-text-font-size-s);
|
|
1646
|
+
--sbb-status-title-color: var(--sbb-color-granite);
|
|
1647
|
+
--sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
|
1643
1648
|
--sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
|
|
1644
1649
|
--sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
|
|
1645
1650
|
--sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
|
|
@@ -2338,14 +2343,6 @@ sbb-notification:has(sbb-title)[size=s] {
|
|
|
2338
2343
|
--_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
|
|
2339
2344
|
}
|
|
2340
2345
|
|
|
2341
|
-
sbb-status:has(sbb-title) {
|
|
2342
|
-
--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
|
|
2343
|
-
--_sbb-status-text-color-override: var(--sbb-color-granite);
|
|
2344
|
-
--_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
|
2345
|
-
--_sbb-status-title-font-size: var(--sbb-heading-font-size-5);
|
|
2346
|
-
--_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);
|
|
2347
|
-
}
|
|
2348
|
-
|
|
2349
2346
|
.sbb-overlay-outlet {
|
|
2350
2347
|
position: fixed;
|
|
2351
2348
|
inset: 0;
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.7.0-dev.1772543736",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
9
|
"storybook",
|
|
10
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
10
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/1adeeda027f2aa0ad19b86723957080c42d47917"
|
|
11
11
|
],
|
|
12
12
|
"type": "module",
|
|
13
13
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -1640,6 +1640,11 @@ summary {
|
|
|
1640
1640
|
--sbb-selection-panel-input-padding-block-m
|
|
1641
1641
|
);
|
|
1642
1642
|
--sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-m);
|
|
1643
|
+
--sbb-status-color: var(--sbb-color-4);
|
|
1644
|
+
--sbb-status-gap: var(--sbb-spacing-fixed-1x);
|
|
1645
|
+
--sbb-status-font-size: var(--sbb-text-font-size-s);
|
|
1646
|
+
--sbb-status-title-color: var(--sbb-color-granite);
|
|
1647
|
+
--sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
|
1643
1648
|
--sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
|
|
1644
1649
|
--sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
|
|
1645
1650
|
--sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
|
|
@@ -2338,14 +2343,6 @@ sbb-notification:has(sbb-title)[size=s] {
|
|
|
2338
2343
|
--_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
|
|
2339
2344
|
}
|
|
2340
2345
|
|
|
2341
|
-
sbb-status:has(sbb-title) {
|
|
2342
|
-
--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
|
|
2343
|
-
--_sbb-status-text-color-override: var(--sbb-color-granite);
|
|
2344
|
-
--_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
|
2345
|
-
--_sbb-status-title-font-size: var(--sbb-heading-font-size-5);
|
|
2346
|
-
--_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);
|
|
2347
|
-
}
|
|
2348
|
-
|
|
2349
2346
|
.sbb-overlay-outlet {
|
|
2350
2347
|
position: fixed;
|
|
2351
2348
|
inset: 0;
|
package/standard-theme.css
CHANGED
|
@@ -1640,6 +1640,11 @@ summary {
|
|
|
1640
1640
|
--sbb-selection-panel-input-padding-block-m
|
|
1641
1641
|
);
|
|
1642
1642
|
--sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-m);
|
|
1643
|
+
--sbb-status-color: var(--sbb-color-4);
|
|
1644
|
+
--sbb-status-gap: var(--sbb-spacing-fixed-1x);
|
|
1645
|
+
--sbb-status-font-size: var(--sbb-text-font-size-s);
|
|
1646
|
+
--sbb-status-title-color: var(--sbb-color-granite);
|
|
1647
|
+
--sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
|
1643
1648
|
--sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
|
|
1644
1649
|
--sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
|
|
1645
1650
|
--sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
|
|
@@ -2338,14 +2343,6 @@ sbb-notification:has(sbb-title)[size=s] {
|
|
|
2338
2343
|
--_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);
|
|
2339
2344
|
}
|
|
2340
2345
|
|
|
2341
|
-
sbb-status:has(sbb-title) {
|
|
2342
|
-
--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
|
|
2343
|
-
--_sbb-status-text-color-override: var(--sbb-color-granite);
|
|
2344
|
-
--_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
|
2345
|
-
--_sbb-status-title-font-size: var(--sbb-heading-font-size-5);
|
|
2346
|
-
--_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);
|
|
2347
|
-
}
|
|
2348
|
-
|
|
2349
2346
|
.sbb-overlay-outlet {
|
|
2350
2347
|
position: fixed;
|
|
2351
2348
|
inset: 0;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
var
|
|
1
|
+
var d = (t) => {
|
|
2
2
|
throw TypeError(t);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
import { __esDecorate as
|
|
4
|
+
var g = (t, s, e) => s.has(t) || d("Cannot " + e);
|
|
5
|
+
var y = (t, s, e) => (g(t, s, "read from private field"), e ? e.call(t) : s.get(t)), _ = (t, s, e) => s.has(t) ? d("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), c = (t, s, e, r) => (g(t, s, "write to private field"), r ? r.call(t, e) : s.set(t, e), e);
|
|
6
|
+
import { __esDecorate as f, __runInitializers as b } from "tslib";
|
|
7
7
|
import { css as v, LitElement as x, html as S } from "lit";
|
|
8
8
|
import { customElement as z, property as k } from "lit/decorators.js";
|
|
9
9
|
import { SbbElementInternalsMixin as I } from "../core/mixins.js";
|
|
10
10
|
import { boxSizingStyles as E } from "../core/styles.js";
|
|
11
|
-
import { SbbIconNameMixin as
|
|
12
|
-
const
|
|
11
|
+
import { SbbIconNameMixin as N } from "../icon.js";
|
|
12
|
+
const T = v`:host{--sbb-status-text-color: var(--sbb-status-color);display:flex;gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}:host([type=error]){--sbb-status-color: var(--sbb-color-error)}:host([type=success]){--sbb-status-color: var(--sbb-color-success)}:host([type=warning]){--sbb-status-color: var(--sbb-color-2)}:host([type=pending]){--sbb-status-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color: var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color: var(--sbb-color-5);--sbb-status-text-color: var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color: var(--sbb-color-pink)}:host(:is(:state(slotted-title),[state--slotted-title])){--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-title-font-size: var(--sbb-heading-font-size-5);--_sbb-status-title-line-height: var(--sbb-typo-line-height-heading);color:var(--sbb-status-title-color)}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--sbb-status-color);margin-block-start:calc((var(--_sbb-status-title-font-size, var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__content-slot{display:inline;margin:0;padding:0}::slotted(sbb-title){margin-block:0}`;
|
|
13
13
|
let P = (() => {
|
|
14
|
-
var i,
|
|
15
|
-
let t = [z("sbb-status")], s, e = [], r, p =
|
|
16
|
-
return
|
|
14
|
+
var i, o;
|
|
15
|
+
let t = [z("sbb-status")], s, e = [], r, p = N(I(x)), u, m = [], h = [];
|
|
16
|
+
return o = class extends p {
|
|
17
17
|
constructor() {
|
|
18
18
|
super(...arguments);
|
|
19
19
|
_(this, i);
|
|
@@ -26,45 +26,43 @@ let P = (() => {
|
|
|
26
26
|
["incomplete", "circle-dotted-part-x-small"],
|
|
27
27
|
["not-started", "circle-dotted-small"],
|
|
28
28
|
["in-progress", "circle-dotted-part-small"]
|
|
29
|
-
]),
|
|
29
|
+
]), c(this, i, b(this, m, "info")), b(this, h);
|
|
30
30
|
}
|
|
31
31
|
/** The type of the status. */
|
|
32
32
|
get type() {
|
|
33
|
-
return
|
|
33
|
+
return y(this, i);
|
|
34
34
|
}
|
|
35
35
|
set type(a) {
|
|
36
|
-
|
|
36
|
+
c(this, i, a);
|
|
37
37
|
}
|
|
38
38
|
_handleSlotchange() {
|
|
39
|
-
const a = Array.from(this.children).find((
|
|
39
|
+
const a = Array.from(this.children).find((l) => l.localName === "sbb-title");
|
|
40
40
|
a && (a.slot = "title");
|
|
41
41
|
}
|
|
42
42
|
_configureTitle(a) {
|
|
43
|
-
const
|
|
44
|
-
|
|
43
|
+
const l = a.target.assignedElements().find((n) => n.localName === "sbb-title");
|
|
44
|
+
l && (customElements.upgrade(l), l.visualLevel = "5");
|
|
45
45
|
}
|
|
46
46
|
renderIconName() {
|
|
47
47
|
return super.renderIconName() || this._statusTypes.get(this.type);
|
|
48
48
|
}
|
|
49
49
|
render() {
|
|
50
50
|
return S`
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</span>
|
|
59
|
-
</div>
|
|
51
|
+
<span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
|
|
52
|
+
<span class="sbb-status__content">
|
|
53
|
+
<slot name="title" @slotchange=${this._configureTitle}></slot>
|
|
54
|
+
<p class="sbb-status__content-slot" @slotchange=${this._handleSlotchange}>
|
|
55
|
+
<slot></slot>
|
|
56
|
+
</p>
|
|
57
|
+
</span>
|
|
60
58
|
`;
|
|
61
59
|
}
|
|
62
|
-
}, i = new WeakMap(), r =
|
|
60
|
+
}, i = new WeakMap(), r = o, (() => {
|
|
63
61
|
const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
|
|
64
|
-
u = [k({ reflect: !0 })],
|
|
65
|
-
|
|
66
|
-
} }, metadata: a }, m,
|
|
67
|
-
})(),
|
|
62
|
+
u = [k({ reflect: !0 })], f(o, null, u, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (l) => "type" in l, get: (l) => l.type, set: (l, n) => {
|
|
63
|
+
l.type = n;
|
|
64
|
+
} }, metadata: a }, m, h), f(null, s = { value: r }, t, { kind: "class", name: r.name, metadata: a }, null, e), r = s.value, a && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
|
|
65
|
+
})(), o.styles = [E, T], b(r, e), r;
|
|
68
66
|
})();
|
|
69
67
|
export {
|
|
70
68
|
P as SbbStatusElement
|