@swisspost/design-system-components 2.0.3 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index-f243643b.js +4 -0
- package/dist/cjs/index.cjs.js +14 -12
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{package-628f6e9c.js → package-96a46572.js} +1 -1
- package/dist/cjs/{post-accordion-da546aa2.js → post-accordion-9d27458a.js} +1 -1
- package/dist/cjs/{post-accordion-item-33d5593a.js → post-accordion-item-61fb55fa.js} +1 -1
- package/dist/cjs/post-accordion-item.cjs.entry.js +2 -2
- package/dist/cjs/post-accordion.cjs.entry.js +2 -2
- package/dist/cjs/{post-alert-26c1bcda.js → post-alert-a810f5b9.js} +1 -1
- package/dist/cjs/post-alert.cjs.entry.js +2 -2
- package/dist/cjs/{post-collapsible-278b2a71.js → post-collapsible-1867015c.js} +1 -1
- package/dist/cjs/post-collapsible.cjs.entry.js +2 -2
- package/dist/cjs/post-components.cjs.js +1 -1
- package/dist/cjs/{post-icon-fd09bc54.js → post-icon-07a67b83.js} +1 -1
- package/dist/cjs/post-icon.cjs.entry.js +2 -2
- package/dist/cjs/{post-popover-1e454296.js → post-popover-9610b64c.js} +1 -1
- package/dist/cjs/post-popover.cjs.entry.js +2 -2
- package/dist/cjs/{post-popovercontainer-5e355de3.js → post-popovercontainer-003c0819.js} +1 -1
- package/dist/cjs/post-popovercontainer.cjs.entry.js +2 -2
- package/dist/cjs/post-rating-75574abd.js +88 -0
- package/dist/cjs/post-rating.cjs.entry.js +11 -0
- package/dist/cjs/post-tab-header-85424e32.js +32 -0
- package/dist/cjs/post-tab-header.cjs.entry.js +2 -2
- package/dist/cjs/{post-tab-panel-67ba226d.js → post-tab-panel-6a9c4a4f.js} +2 -2
- package/dist/cjs/post-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/{post-tabs-71510ced.js → post-tabs-2eb6f376.js} +3 -3
- package/dist/cjs/post-tabs.cjs.entry.js +2 -2
- package/dist/cjs/{post-tooltip-b6bbb3e4.js → post-tooltip-260d0627.js} +2 -2
- package/dist/cjs/post-tooltip.cjs.entry.js +2 -2
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/post-rating/post-rating.css +3 -0
- package/dist/collection/components/post-rating/post-rating.js +202 -0
- package/dist/collection/components/post-tab-header/post-tab-header.css +1 -1
- package/dist/collection/components/post-tab-header/post-tab-header.js +1 -1
- package/dist/collection/components/post-tab-panel/post-tab-panel.js +1 -1
- package/dist/collection/components/post-tabs/post-tabs.css +1 -1
- package/dist/collection/components/post-tabs/post-tabs.js +1 -1
- package/dist/collection/components/post-tooltip/post-tooltip.js +1 -1
- package/dist/collection/index.js +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/package.js +1 -1
- package/dist/components/post-rating.d.ts +11 -0
- package/dist/components/post-rating.js +6 -0
- package/dist/components/post-rating2.js +113 -0
- package/dist/components/post-tab-header2.js +2 -2
- package/dist/components/post-tab-panel2.js +1 -1
- package/dist/components/post-tabs2.js +2 -2
- package/dist/components/post-tooltip2.js +1 -1
- package/dist/docs.json +149 -2
- package/dist/esm/index-1708db56.js +4 -0
- package/dist/esm/index.js +13 -12
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{package-15929f57.js → package-50a9c0c3.js} +1 -1
- package/dist/esm/{post-accordion-be080240.js → post-accordion-33fe4f0e.js} +1 -1
- package/dist/esm/{post-accordion-item-7b3c726b.js → post-accordion-item-1fd95c9f.js} +1 -1
- package/dist/esm/post-accordion-item.entry.js +2 -2
- package/dist/esm/post-accordion.entry.js +2 -2
- package/dist/esm/{post-alert-37f853eb.js → post-alert-65d67f69.js} +1 -1
- package/dist/esm/post-alert.entry.js +2 -2
- package/dist/esm/{post-collapsible-967bb191.js → post-collapsible-50dc361b.js} +1 -1
- package/dist/esm/post-collapsible.entry.js +2 -2
- package/dist/esm/post-components.js +1 -1
- package/dist/esm/{post-icon-ba163099.js → post-icon-00f314ae.js} +1 -1
- package/dist/esm/post-icon.entry.js +2 -2
- package/dist/esm/{post-popover-69694fa6.js → post-popover-40bfd1b7.js} +1 -1
- package/dist/esm/post-popover.entry.js +2 -2
- package/dist/esm/{post-popovercontainer-da870ff0.js → post-popovercontainer-62e1fd82.js} +1 -1
- package/dist/esm/post-popovercontainer.entry.js +2 -2
- package/dist/esm/post-rating-f7a79ed4.js +86 -0
- package/dist/esm/post-rating.entry.js +3 -0
- package/dist/esm/post-tab-header-0683252a.js +30 -0
- package/dist/esm/post-tab-header.entry.js +2 -2
- package/dist/esm/{post-tab-panel-d89c4c50.js → post-tab-panel-37a1331f.js} +2 -2
- package/dist/esm/post-tab-panel.entry.js +2 -2
- package/dist/esm/{post-tabs-e995886a.js → post-tabs-c4e65a45.js} +3 -3
- package/dist/esm/post-tabs.entry.js +2 -2
- package/dist/esm/{post-tooltip-0ec6a388.js → post-tooltip-033f63fa.js} +2 -2
- package/dist/esm/post-tooltip.entry.js +2 -2
- package/dist/post-components/index.esm.js +1 -1
- package/dist/post-components/p-00dcad55.js +1 -0
- package/dist/post-components/p-01e57281.entry.js +1 -0
- package/dist/post-components/p-06c989fb.entry.js +1 -0
- package/dist/post-components/p-07ffb6de.entry.js +1 -0
- package/dist/post-components/p-26c658c1.entry.js +1 -0
- package/dist/post-components/p-2a964700.js +1 -0
- package/dist/post-components/{p-ac7b779e.js → p-35f14000.js} +1 -1
- package/dist/post-components/{p-d9c9ed63.js → p-3fb09ecd.js} +1 -1
- package/dist/post-components/p-4b0a45d8.entry.js +1 -0
- package/dist/post-components/p-53e8e4e7.entry.js +1 -0
- package/dist/post-components/{p-6b3ba10a.js → p-598b11b6.js} +1 -1
- package/dist/post-components/p-5b6ee52a.entry.js +1 -0
- package/dist/post-components/{p-94256868.js → p-7e7833f7.js} +3 -3
- package/dist/post-components/p-8139faa4.entry.js +1 -0
- package/dist/post-components/p-8cd6d7c2.js +1 -0
- package/dist/post-components/{p-1f284e66.js → p-99a9602e.js} +1 -1
- package/dist/post-components/p-a2775477.entry.js +1 -0
- package/dist/post-components/p-a905b16b.entry.js +1 -0
- package/dist/post-components/p-aa02111b.js +1 -0
- package/dist/post-components/{p-a9d59b04.js → p-b135d3e2.js} +1 -1
- package/dist/post-components/p-b81e61ed.entry.js +1 -0
- package/dist/post-components/p-d6bc34ff.js +1 -0
- package/dist/post-components/p-da2b8e26.entry.js +1 -0
- package/dist/post-components/{p-e8d17225.js → p-f0476913.js} +1 -1
- package/dist/post-components/{p-5ecceba0.js → p-ff0e1564.js} +1 -1
- package/dist/post-components/post-components.esm.js +1 -1
- package/dist/types/components/post-rating/post-rating.d.ts +43 -0
- package/dist/types/components.d.ts +69 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +3 -3
- package/dist/cjs/post-tab-header-5c8b9a0d.js +0 -32
- package/dist/esm/post-tab-header-14ed99cd.js +0 -30
- package/dist/post-components/p-00ab91d9.entry.js +0 -1
- package/dist/post-components/p-04f47e54.entry.js +0 -1
- package/dist/post-components/p-209e33a5.js +0 -1
- package/dist/post-components/p-282e21c2.entry.js +0 -1
- package/dist/post-components/p-34a772e3.entry.js +0 -1
- package/dist/post-components/p-46c47aa4.entry.js +0 -1
- package/dist/post-components/p-51fe19e0.js +0 -1
- package/dist/post-components/p-557f0f10.entry.js +0 -1
- package/dist/post-components/p-61d98756.js +0 -1
- package/dist/post-components/p-82f4f464.entry.js +0 -1
- package/dist/post-components/p-98cb0bbd.entry.js +0 -1
- package/dist/post-components/p-9ee95668.entry.js +0 -1
- package/dist/post-components/p-a0d342e4.entry.js +0 -1
- package/dist/post-components/p-e1bf894f.entry.js +0 -1
- package/dist/post-components/p-f47b0207.js +0 -1
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
|
+
import { version } from "../../../package.json";
|
|
3
|
+
export class PostRating {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.hasChanged = false;
|
|
6
|
+
this.hoveredIndex = undefined;
|
|
7
|
+
this.label = 'Rating';
|
|
8
|
+
this.stars = 5;
|
|
9
|
+
this.currentRating = 0;
|
|
10
|
+
this.readonly = false;
|
|
11
|
+
this.keydownHandler = this.keydownHandler.bind(this);
|
|
12
|
+
this.blurHandler = this.blurHandler.bind(this);
|
|
13
|
+
this.hoverHandler = this.hoverHandler.bind(this);
|
|
14
|
+
}
|
|
15
|
+
update(value) {
|
|
16
|
+
if (this.readonly || value < 0 || value > this.stars)
|
|
17
|
+
return;
|
|
18
|
+
this.currentRating = this.currentRating !== value ? value : 0; // If a star is clicked the second time, the rating gets set to 0.
|
|
19
|
+
this.input.emit({ value: this.currentRating });
|
|
20
|
+
this.hasChanged = true;
|
|
21
|
+
}
|
|
22
|
+
keydownHandler(e) {
|
|
23
|
+
switch (e.key) {
|
|
24
|
+
case 'ArrowDown':
|
|
25
|
+
case 'ArrowLeft':
|
|
26
|
+
e.preventDefault();
|
|
27
|
+
this.update(this.currentRating - 1);
|
|
28
|
+
break;
|
|
29
|
+
case 'ArrowUp':
|
|
30
|
+
case 'ArrowRight':
|
|
31
|
+
e.preventDefault();
|
|
32
|
+
this.update(this.currentRating + 1);
|
|
33
|
+
break;
|
|
34
|
+
case 'Home':
|
|
35
|
+
e.preventDefault();
|
|
36
|
+
this.update(0);
|
|
37
|
+
break;
|
|
38
|
+
case 'End':
|
|
39
|
+
e.preventDefault();
|
|
40
|
+
this.update(this.stars);
|
|
41
|
+
break;
|
|
42
|
+
case 'Enter':
|
|
43
|
+
case ' ':
|
|
44
|
+
this.blurHandler();
|
|
45
|
+
break;
|
|
46
|
+
default:
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
blurHandler() {
|
|
51
|
+
if (this.hasChanged) {
|
|
52
|
+
this.change.emit({ value: this.currentRating });
|
|
53
|
+
this.hasChanged = false;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
hoverHandler(index, e) {
|
|
57
|
+
if (this.readonly)
|
|
58
|
+
return;
|
|
59
|
+
if (e.type === 'mouseenter') {
|
|
60
|
+
this.hoveredIndex = index;
|
|
61
|
+
}
|
|
62
|
+
else if (e.type === 'mouseleave') {
|
|
63
|
+
this.hoveredIndex = undefined;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
render() {
|
|
67
|
+
return (h(Host, { key: '024062262951980933a54144b7ed00fead499f07', "data-version": version }, h("div", { key: '1be8030d6d4d5d25010a0df6823da0fe72e7e682', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
|
|
68
|
+
'star': true,
|
|
69
|
+
'before-hover': i < this.hoveredIndex,
|
|
70
|
+
'active': i < Math.round(this.currentRating),
|
|
71
|
+
'hover': i === this.hoveredIndex,
|
|
72
|
+
'after-active': i > this.hoveredIndex && i < this.currentRating,
|
|
73
|
+
}, onClick: () => this.update(i + 1), onMouseEnter: e => this.hoverHandler(i, e), onMouseLeave: e => this.hoverHandler(i, e) }, h("post-icon", { name: "2062", class: "stroke" }), h("post-icon", { name: "2574", class: "fill" })))))));
|
|
74
|
+
}
|
|
75
|
+
static get is() { return "post-rating"; }
|
|
76
|
+
static get encapsulation() { return "shadow"; }
|
|
77
|
+
static get originalStyleUrls() {
|
|
78
|
+
return {
|
|
79
|
+
"$": ["post-rating.scss"]
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
static get styleUrls() {
|
|
83
|
+
return {
|
|
84
|
+
"$": ["post-rating.css"]
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
static get properties() {
|
|
88
|
+
return {
|
|
89
|
+
"label": {
|
|
90
|
+
"type": "string",
|
|
91
|
+
"mutable": false,
|
|
92
|
+
"complexType": {
|
|
93
|
+
"original": "string",
|
|
94
|
+
"resolved": "string",
|
|
95
|
+
"references": {}
|
|
96
|
+
},
|
|
97
|
+
"required": false,
|
|
98
|
+
"optional": false,
|
|
99
|
+
"docs": {
|
|
100
|
+
"tags": [],
|
|
101
|
+
"text": "Defines a hidden label for the component."
|
|
102
|
+
},
|
|
103
|
+
"attribute": "label",
|
|
104
|
+
"reflect": false,
|
|
105
|
+
"defaultValue": "'Rating'"
|
|
106
|
+
},
|
|
107
|
+
"stars": {
|
|
108
|
+
"type": "number",
|
|
109
|
+
"mutable": false,
|
|
110
|
+
"complexType": {
|
|
111
|
+
"original": "number",
|
|
112
|
+
"resolved": "number",
|
|
113
|
+
"references": {}
|
|
114
|
+
},
|
|
115
|
+
"required": false,
|
|
116
|
+
"optional": false,
|
|
117
|
+
"docs": {
|
|
118
|
+
"tags": [],
|
|
119
|
+
"text": "Defines the total amount of stars rendered in the component."
|
|
120
|
+
},
|
|
121
|
+
"attribute": "stars",
|
|
122
|
+
"reflect": false,
|
|
123
|
+
"defaultValue": "5"
|
|
124
|
+
},
|
|
125
|
+
"currentRating": {
|
|
126
|
+
"type": "number",
|
|
127
|
+
"mutable": true,
|
|
128
|
+
"complexType": {
|
|
129
|
+
"original": "number",
|
|
130
|
+
"resolved": "number",
|
|
131
|
+
"references": {}
|
|
132
|
+
},
|
|
133
|
+
"required": false,
|
|
134
|
+
"optional": false,
|
|
135
|
+
"docs": {
|
|
136
|
+
"tags": [],
|
|
137
|
+
"text": "Defines the rating that the component should show."
|
|
138
|
+
},
|
|
139
|
+
"attribute": "current-rating",
|
|
140
|
+
"reflect": false,
|
|
141
|
+
"defaultValue": "0"
|
|
142
|
+
},
|
|
143
|
+
"readonly": {
|
|
144
|
+
"type": "boolean",
|
|
145
|
+
"mutable": false,
|
|
146
|
+
"complexType": {
|
|
147
|
+
"original": "boolean",
|
|
148
|
+
"resolved": "boolean",
|
|
149
|
+
"references": {}
|
|
150
|
+
},
|
|
151
|
+
"required": false,
|
|
152
|
+
"optional": false,
|
|
153
|
+
"docs": {
|
|
154
|
+
"tags": [],
|
|
155
|
+
"text": "Defines if the component is readonly or not.\nThis usually should be used together with the `currentRating` property."
|
|
156
|
+
},
|
|
157
|
+
"attribute": "readonly",
|
|
158
|
+
"reflect": false,
|
|
159
|
+
"defaultValue": "false"
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
}
|
|
163
|
+
static get states() {
|
|
164
|
+
return {
|
|
165
|
+
"hoveredIndex": {}
|
|
166
|
+
};
|
|
167
|
+
}
|
|
168
|
+
static get events() {
|
|
169
|
+
return [{
|
|
170
|
+
"method": "input",
|
|
171
|
+
"name": "input",
|
|
172
|
+
"bubbles": true,
|
|
173
|
+
"cancelable": true,
|
|
174
|
+
"composed": true,
|
|
175
|
+
"docs": {
|
|
176
|
+
"tags": [],
|
|
177
|
+
"text": "An event emitted whenever the component's value has changed (on input).\nThe event payload can be used like so: `event.detail.value`."
|
|
178
|
+
},
|
|
179
|
+
"complexType": {
|
|
180
|
+
"original": "{ value: number }",
|
|
181
|
+
"resolved": "{ value: number; }",
|
|
182
|
+
"references": {}
|
|
183
|
+
}
|
|
184
|
+
}, {
|
|
185
|
+
"method": "change",
|
|
186
|
+
"name": "change",
|
|
187
|
+
"bubbles": true,
|
|
188
|
+
"cancelable": true,
|
|
189
|
+
"composed": true,
|
|
190
|
+
"docs": {
|
|
191
|
+
"tags": [],
|
|
192
|
+
"text": "An event emitted whenever the component's value has changed (on blur).\nThe event payload can be used like so: `event.detail.value`."
|
|
193
|
+
},
|
|
194
|
+
"complexType": {
|
|
195
|
+
"original": "{ value: number }",
|
|
196
|
+
"resolved": "{ value: number; }",
|
|
197
|
+
"references": {}
|
|
198
|
+
}
|
|
199
|
+
}];
|
|
200
|
+
}
|
|
201
|
+
static get elementRef() { return "host"; }
|
|
202
|
+
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
.tab-title[role=tab]{display:inline-block;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color
|
|
1
|
+
.tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none;background-color:var(--post-contrast-color-inverted)}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted);box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:"";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:var(--post-contrast-color-inverted);color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:"";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}:is(.bg-dark,.bg-primary,.bg-black,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.bg-success-green,.bg-error-red) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:is(.bg-dark,.bg-primary,.bg-black,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.bg-success-green,.bg-error-red) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-success .tab-title{background-color:#2c911c}.bg-success .tab-title.active{background-color:#2c911c}.bg-success .nav-item{background-color:#2c911c}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-danger .tab-title{background-color:#a51728}.bg-danger .tab-title.active{background-color:#a51728}.bg-danger .nav-item{background-color:#a51728}.bg-nightblue .tab-title{background-color:#004976}.bg-nightblue .tab-title.active{background-color:#004976}.bg-nightblue .nav-item{background-color:#004976}.bg-nightblue-bright .tab-title{background-color:#0076a8}.bg-nightblue-bright .tab-title.active{background-color:#0076a8}.bg-nightblue-bright .nav-item{background-color:#0076a8}.bg-petrol .tab-title{background-color:#006d68}.bg-petrol .tab-title.active{background-color:#006d68}.bg-petrol .nav-item{background-color:#006d68}.bg-petrol-bright .tab-title{background-color:#00968f}.bg-petrol-bright .tab-title.active{background-color:#00968f}.bg-petrol-bright .nav-item{background-color:#00968f}.bg-coral .tab-title{background-color:#9e2a2f}.bg-coral .tab-title.active{background-color:#9e2a2f}.bg-coral .nav-item{background-color:#9e2a2f}.bg-coral-bright .tab-title{background-color:#e03c31}.bg-coral-bright .tab-title.active{background-color:#e03c31}.bg-coral-bright .nav-item{background-color:#e03c31}.bg-olive .tab-title{background-color:#716135}.bg-olive .tab-title.active{background-color:#716135}.bg-olive .nav-item{background-color:#716135}.bg-olive-bright .tab-title{background-color:#aa9d2e}.bg-olive-bright .tab-title.active{background-color:#aa9d2e}.bg-olive-bright .nav-item{background-color:#aa9d2e}.bg-purple .tab-title{background-color:#80276c}.bg-purple .tab-title.active{background-color:#80276c}.bg-purple .nav-item{background-color:#80276c}.bg-purple-bright .tab-title{background-color:#c5299b}.bg-purple-bright .tab-title.active{background-color:#c5299b}.bg-purple-bright .nav-item{background-color:#c5299b}.bg-aubergine .tab-title{background-color:#523178}.bg-aubergine .tab-title.active{background-color:#523178}.bg-aubergine .nav-item{background-color:#523178}.bg-aubergine-bright .tab-title{background-color:#7566a0}.bg-aubergine-bright .tab-title.active{background-color:#7566a0}.bg-aubergine-bright .nav-item{background-color:#7566a0}.bg-success-green .tab-title{background-color:#2c871d}.bg-success-green .tab-title.active{background-color:#2c871d}.bg-success-green .nav-item{background-color:#2c871d}.bg-error-red .tab-title{background-color:#a51728}.bg-error-red .tab-title.active{background-color:#a51728}.bg-error-red .nav-item{background-color:#a51728}.bg-warning-orange .tab-title{background-color:#f49e00}.bg-warning-orange .tab-title.active{background-color:#f49e00}.bg-warning-orange .nav-item{background-color:#f49e00}.bg-success-background .tab-title{background-color:#c0debb}.bg-success-background .tab-title.active{background-color:#c0debb}.bg-success-background .nav-item{background-color:#c0debb}.bg-error-background .tab-title{background-color:#ffdade}.bg-error-background .tab-title.active{background-color:#ffdade}.bg-error-background .nav-item{background-color:#ffdade}.bg-warning-background .tab-title{background-color:#fce2b2}.bg-warning-background .tab-title.active{background-color:#fce2b2}.bg-warning-background .nav-item{background-color:#fce2b2}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}/*!
|
|
2
2
|
* Copyright 2021 by Swiss Post, Information Technology
|
|
3
3
|
*/:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;-webkit-appearance:button;appearance:button}
|
|
@@ -16,7 +16,7 @@ export class PostTabHeader {
|
|
|
16
16
|
this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
return (h(Host, { key: '
|
|
19
|
+
return (h(Host, { key: '999ab8056178562bbcf615b03787451a946f8929', "data-version": version }, h("button", { key: '9795891344158c294f6d77a2245200108f1fe737', "aria-selected": "false", class: "tab-title", id: this.tabId, role: "tab", tabindex: "-1", type: "button" }, h("slot", { key: 'd62f2894e9bf89c00a9d5673cd47507ef7b26359' }))));
|
|
20
20
|
}
|
|
21
21
|
static get is() { return "post-tab-header"; }
|
|
22
22
|
static get encapsulation() { return "shadow"; }
|
|
@@ -13,7 +13,7 @@ export class PostTabPanel {
|
|
|
13
13
|
this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
return (h(Host, { key: '
|
|
16
|
+
return (h(Host, { key: '08148fe9b221905fbeab99bdb14f4d040deda959', "data-version": version }, h("div", { key: '04ad9fba5b296902fc75e0e36f7cefd91d0b6948', class: "tab-pane", id: this.panelId, role: "tabpanel" }, h("slot", { key: '840a5242e071f47b102340738f31b3f8b3c10052' }))));
|
|
17
17
|
}
|
|
18
18
|
static get is() { return "post-tab-panel"; }
|
|
19
19
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color
|
|
1
|
+
.tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(var(--post-contrast-color-rgb), 0.02)}.tabs-wrapper::after{content:"";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap}.tabs::after{content:"";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}.bg-yellow .tabs-wrapper{background-color:#fc0}.bg-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:#333}.bg-primary .tabs-wrapper{background-color:#333}.bg-white .tabs-wrapper{background-color:#fff}.bg-black .tabs-wrapper{background-color:#000}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-success .tabs-wrapper{background-color:#2c911c}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-danger .tabs-wrapper{background-color:#a51728}.bg-nightblue .tabs-wrapper{background-color:#004976}.bg-nightblue-bright .tabs-wrapper{background-color:#0076a8}.bg-petrol .tabs-wrapper{background-color:#006d68}.bg-petrol-bright .tabs-wrapper{background-color:#00968f}.bg-coral .tabs-wrapper{background-color:#9e2a2f}.bg-coral-bright .tabs-wrapper{background-color:#e03c31}.bg-olive .tabs-wrapper{background-color:#716135}.bg-olive-bright .tabs-wrapper{background-color:#aa9d2e}.bg-purple .tabs-wrapper{background-color:#80276c}.bg-purple-bright .tabs-wrapper{background-color:#c5299b}.bg-aubergine .tabs-wrapper{background-color:#523178}.bg-aubergine-bright .tabs-wrapper{background-color:#7566a0}.bg-success-green .tabs-wrapper{background-color:#2c871d}.bg-error-red .tabs-wrapper{background-color:#a51728}.bg-warning-orange .tabs-wrapper{background-color:#f49e00}.bg-success-background .tabs-wrapper{background-color:#c0debb}.bg-error-background .tabs-wrapper{background-color:#ffdade}.bg-warning-background .tabs-wrapper{background-color:#fce2b2}:host{display:block}
|
|
@@ -139,7 +139,7 @@ export class PostTabs {
|
|
|
139
139
|
nextTabTitle.focus();
|
|
140
140
|
}
|
|
141
141
|
render() {
|
|
142
|
-
return (h(Host, { key: '
|
|
142
|
+
return (h(Host, { key: '474b7d00c23aec2a44a202c09b8a75a9dc12b4a8', "data-version": version }, h("div", { key: '2fe1b6cad96fd868cbaa7e775d185537a37228fd', class: "tabs-wrapper" }, h("div", { key: 'ef70af3ddd337cefb719d183d603eb93fb033e25', class: "tabs", role: "tablist" }, h("slot", { key: '360909ea07bbbca523cb21b71daa8b4b02f60bed', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'ba44b0e8484e63d9b48f66933f37d854eb648854', class: "tab-content" }, h("slot", { key: 'cd22488448be508393fcb9f9428d3f712c9b659b', onSlotchange: () => this.moveMisplacedTabs() }))));
|
|
143
143
|
}
|
|
144
144
|
static get is() { return "post-tabs"; }
|
|
145
145
|
static get encapsulation() { return "shadow"; }
|
|
@@ -165,7 +165,7 @@ export class PostTooltip {
|
|
|
165
165
|
}
|
|
166
166
|
render() {
|
|
167
167
|
const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
|
|
168
|
-
return (h(Host, { key: '
|
|
168
|
+
return (h(Host, { key: '63124ebabffbe5fe857bcc61eecf4133f2952e85', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '42e1b5e0ab8cbb3a1b805ccf5b40232b071cf5ad', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'bf414a19c044f3c608ab3141bb93736dd7dea723' }))));
|
|
169
169
|
}
|
|
170
170
|
static get is() { return "post-tooltip"; }
|
|
171
171
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/index.js
CHANGED
|
@@ -6,6 +6,7 @@ export { PostCollapsible } from './components/post-collapsible/post-collapsible'
|
|
|
6
6
|
export { PostIcon } from './components/post-icon/post-icon';
|
|
7
7
|
export { PostPopover } from './components/post-popover/post-popover';
|
|
8
8
|
export { PostPopovercontainer } from './components/post-popovercontainer/post-popovercontainer';
|
|
9
|
+
export { PostRating } from './components/post-rating/post-rating';
|
|
9
10
|
export { PostTabs } from './components/post-tabs/post-tabs';
|
|
10
11
|
export { PostTabHeader } from './components/post-tab-header/post-tab-header';
|
|
11
12
|
export { PostTabPanel } from './components/post-tab-panel/post-tab-panel';
|
package/dist/components/index.js
CHANGED
|
@@ -6,6 +6,7 @@ export { P as PostCollapsible } from './post-collapsible2.js';
|
|
|
6
6
|
export { P as PostIcon } from './post-icon2.js';
|
|
7
7
|
export { P as PostPopover } from './post-popover2.js';
|
|
8
8
|
export { P as PostPopovercontainer } from './post-popovercontainer2.js';
|
|
9
|
+
export { P as PostRating } from './post-rating2.js';
|
|
9
10
|
export { P as PostTabs } from './post-tabs2.js';
|
|
10
11
|
export { P as PostTabHeader } from './post-tab-header2.js';
|
|
11
12
|
export { P as PostTabPanel } from './post-tab-panel2.js';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface PostRating extends Components.PostRating, HTMLElement {}
|
|
4
|
+
export const PostRating: {
|
|
5
|
+
prototype: PostRating;
|
|
6
|
+
new (): PostRating;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
+
import { v as version } from './package.js';
|
|
3
|
+
import { d as defineCustomElement$1 } from './post-icon2.js';
|
|
4
|
+
|
|
5
|
+
const postRatingCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:inline-block}.rating{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 -0.25rem;border-radius:4px}.rating .star{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fff;position:relative;width:2rem;height:2rem;cursor:pointer}.rating .star .stroke,.rating .star .fill{display:block;width:100%;height:100%;transition:all ease 100ms}.rating .star .stroke{position:absolute;inset:auto;z-index:1;color:var(--post-rating-star-stroke)}.rating .star .fill{margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:var(--post-rating-star-fill)}.rating .star.before-hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.active{--post-rating-star-stroke:hsl(0, 0%, 20%);--post-rating-star-fill:#fc0}.rating .star.hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.after-active{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:hsl(0, 0%, 80%)}.rating :focus{outline:none}.rating:focus-visible{outline-offset:2px;outline:2px solid #1976c8}.rating[aria-readonly=true] .star,.rating[aria-disabled=true] .star{cursor:default}.rating[aria-disabled=true] .star{--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:#fff}.rating[aria-disabled=true] .star.active{cursor:default;--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:hsl(0, 0%, 90%)}";
|
|
6
|
+
const PostRatingStyle0 = postRatingCss;
|
|
7
|
+
|
|
8
|
+
const PostRating = /*@__PURE__*/ proxyCustomElement(class PostRating extends HTMLElement {
|
|
9
|
+
constructor() {
|
|
10
|
+
super();
|
|
11
|
+
this.__registerHost();
|
|
12
|
+
this.__attachShadow();
|
|
13
|
+
this.input = createEvent(this, "input", 7);
|
|
14
|
+
this.change = createEvent(this, "change", 7);
|
|
15
|
+
this.hasChanged = false;
|
|
16
|
+
this.hoveredIndex = undefined;
|
|
17
|
+
this.label = 'Rating';
|
|
18
|
+
this.stars = 5;
|
|
19
|
+
this.currentRating = 0;
|
|
20
|
+
this.readonly = false;
|
|
21
|
+
this.keydownHandler = this.keydownHandler.bind(this);
|
|
22
|
+
this.blurHandler = this.blurHandler.bind(this);
|
|
23
|
+
this.hoverHandler = this.hoverHandler.bind(this);
|
|
24
|
+
}
|
|
25
|
+
update(value) {
|
|
26
|
+
if (this.readonly || value < 0 || value > this.stars)
|
|
27
|
+
return;
|
|
28
|
+
this.currentRating = this.currentRating !== value ? value : 0; // If a star is clicked the second time, the rating gets set to 0.
|
|
29
|
+
this.input.emit({ value: this.currentRating });
|
|
30
|
+
this.hasChanged = true;
|
|
31
|
+
}
|
|
32
|
+
keydownHandler(e) {
|
|
33
|
+
switch (e.key) {
|
|
34
|
+
case 'ArrowDown':
|
|
35
|
+
case 'ArrowLeft':
|
|
36
|
+
e.preventDefault();
|
|
37
|
+
this.update(this.currentRating - 1);
|
|
38
|
+
break;
|
|
39
|
+
case 'ArrowUp':
|
|
40
|
+
case 'ArrowRight':
|
|
41
|
+
e.preventDefault();
|
|
42
|
+
this.update(this.currentRating + 1);
|
|
43
|
+
break;
|
|
44
|
+
case 'Home':
|
|
45
|
+
e.preventDefault();
|
|
46
|
+
this.update(0);
|
|
47
|
+
break;
|
|
48
|
+
case 'End':
|
|
49
|
+
e.preventDefault();
|
|
50
|
+
this.update(this.stars);
|
|
51
|
+
break;
|
|
52
|
+
case 'Enter':
|
|
53
|
+
case ' ':
|
|
54
|
+
this.blurHandler();
|
|
55
|
+
break;
|
|
56
|
+
default:
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
blurHandler() {
|
|
61
|
+
if (this.hasChanged) {
|
|
62
|
+
this.change.emit({ value: this.currentRating });
|
|
63
|
+
this.hasChanged = false;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
hoverHandler(index, e) {
|
|
67
|
+
if (this.readonly)
|
|
68
|
+
return;
|
|
69
|
+
if (e.type === 'mouseenter') {
|
|
70
|
+
this.hoveredIndex = index;
|
|
71
|
+
}
|
|
72
|
+
else if (e.type === 'mouseleave') {
|
|
73
|
+
this.hoveredIndex = undefined;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
render() {
|
|
77
|
+
return (h(Host, { key: '024062262951980933a54144b7ed00fead499f07', "data-version": version }, h("div", { key: '1be8030d6d4d5d25010a0df6823da0fe72e7e682', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
|
|
78
|
+
'star': true,
|
|
79
|
+
'before-hover': i < this.hoveredIndex,
|
|
80
|
+
'active': i < Math.round(this.currentRating),
|
|
81
|
+
'hover': i === this.hoveredIndex,
|
|
82
|
+
'after-active': i > this.hoveredIndex && i < this.currentRating,
|
|
83
|
+
}, onClick: () => this.update(i + 1), onMouseEnter: e => this.hoverHandler(i, e), onMouseLeave: e => this.hoverHandler(i, e) }, h("post-icon", { name: "2062", class: "stroke" }), h("post-icon", { name: "2574", class: "fill" })))))));
|
|
84
|
+
}
|
|
85
|
+
get host() { return this; }
|
|
86
|
+
static get style() { return PostRatingStyle0; }
|
|
87
|
+
}, [1, "post-rating", {
|
|
88
|
+
"label": [1],
|
|
89
|
+
"stars": [2],
|
|
90
|
+
"currentRating": [1026, "current-rating"],
|
|
91
|
+
"readonly": [4],
|
|
92
|
+
"hoveredIndex": [32]
|
|
93
|
+
}]);
|
|
94
|
+
function defineCustomElement() {
|
|
95
|
+
if (typeof customElements === "undefined") {
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
const components = ["post-rating", "post-icon"];
|
|
99
|
+
components.forEach(tagName => { switch (tagName) {
|
|
100
|
+
case "post-rating":
|
|
101
|
+
if (!customElements.get(tagName)) {
|
|
102
|
+
customElements.define(tagName, PostRating);
|
|
103
|
+
}
|
|
104
|
+
break;
|
|
105
|
+
case "post-icon":
|
|
106
|
+
if (!customElements.get(tagName)) {
|
|
107
|
+
defineCustomElement$1();
|
|
108
|
+
}
|
|
109
|
+
break;
|
|
110
|
+
} });
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
export { PostRating as P, defineCustomElement as d };
|
|
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
|
|
|
2
2
|
import { v as version } from './package.js';
|
|
3
3
|
import { c as checkNonEmpty } from './check-non-empty.js';
|
|
4
4
|
|
|
5
|
-
const postTabHeaderCss = ".tab-title[role=tab]{display:inline-block;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color
|
|
5
|
+
const postTabHeaderCss = ".tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none;background-color:var(--post-contrast-color-inverted)}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted);box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:\"\";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:var(--post-contrast-color-inverted);color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}:is(.bg-dark,.bg-primary,.bg-black,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.bg-success-green,.bg-error-red) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:is(.bg-dark,.bg-primary,.bg-black,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.bg-success-green,.bg-error-red) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-success .tab-title{background-color:#2c911c}.bg-success .tab-title.active{background-color:#2c911c}.bg-success .nav-item{background-color:#2c911c}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-danger .tab-title{background-color:#a51728}.bg-danger .tab-title.active{background-color:#a51728}.bg-danger .nav-item{background-color:#a51728}.bg-nightblue .tab-title{background-color:#004976}.bg-nightblue .tab-title.active{background-color:#004976}.bg-nightblue .nav-item{background-color:#004976}.bg-nightblue-bright .tab-title{background-color:#0076a8}.bg-nightblue-bright .tab-title.active{background-color:#0076a8}.bg-nightblue-bright .nav-item{background-color:#0076a8}.bg-petrol .tab-title{background-color:#006d68}.bg-petrol .tab-title.active{background-color:#006d68}.bg-petrol .nav-item{background-color:#006d68}.bg-petrol-bright .tab-title{background-color:#00968f}.bg-petrol-bright .tab-title.active{background-color:#00968f}.bg-petrol-bright .nav-item{background-color:#00968f}.bg-coral .tab-title{background-color:#9e2a2f}.bg-coral .tab-title.active{background-color:#9e2a2f}.bg-coral .nav-item{background-color:#9e2a2f}.bg-coral-bright .tab-title{background-color:#e03c31}.bg-coral-bright .tab-title.active{background-color:#e03c31}.bg-coral-bright .nav-item{background-color:#e03c31}.bg-olive .tab-title{background-color:#716135}.bg-olive .tab-title.active{background-color:#716135}.bg-olive .nav-item{background-color:#716135}.bg-olive-bright .tab-title{background-color:#aa9d2e}.bg-olive-bright .tab-title.active{background-color:#aa9d2e}.bg-olive-bright .nav-item{background-color:#aa9d2e}.bg-purple .tab-title{background-color:#80276c}.bg-purple .tab-title.active{background-color:#80276c}.bg-purple .nav-item{background-color:#80276c}.bg-purple-bright .tab-title{background-color:#c5299b}.bg-purple-bright .tab-title.active{background-color:#c5299b}.bg-purple-bright .nav-item{background-color:#c5299b}.bg-aubergine .tab-title{background-color:#523178}.bg-aubergine .tab-title.active{background-color:#523178}.bg-aubergine .nav-item{background-color:#523178}.bg-aubergine-bright .tab-title{background-color:#7566a0}.bg-aubergine-bright .tab-title.active{background-color:#7566a0}.bg-aubergine-bright .nav-item{background-color:#7566a0}.bg-success-green .tab-title{background-color:#2c871d}.bg-success-green .tab-title.active{background-color:#2c871d}.bg-success-green .nav-item{background-color:#2c871d}.bg-error-red .tab-title{background-color:#a51728}.bg-error-red .tab-title.active{background-color:#a51728}.bg-error-red .nav-item{background-color:#a51728}.bg-warning-orange .tab-title{background-color:#f49e00}.bg-warning-orange .tab-title.active{background-color:#f49e00}.bg-warning-orange .nav-item{background-color:#f49e00}.bg-success-background .tab-title{background-color:#c0debb}.bg-success-background .tab-title.active{background-color:#c0debb}.bg-success-background .nav-item{background-color:#c0debb}.bg-error-background .tab-title{background-color:#ffdade}.bg-error-background .tab-title.active{background-color:#ffdade}.bg-error-background .nav-item{background-color:#ffdade}.bg-warning-background .tab-title{background-color:#fce2b2}.bg-warning-background .tab-title.active{background-color:#fce2b2}.bg-warning-background .nav-item{background-color:#fce2b2}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;-webkit-appearance:button;appearance:button}";
|
|
6
6
|
const PostTabHeaderStyle0 = postTabHeaderCss;
|
|
7
7
|
|
|
8
8
|
const PostTabHeader = /*@__PURE__*/ proxyCustomElement(class PostTabHeader extends HTMLElement {
|
|
@@ -20,7 +20,7 @@ const PostTabHeader = /*@__PURE__*/ proxyCustomElement(class PostTabHeader exten
|
|
|
20
20
|
this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: '999ab8056178562bbcf615b03787451a946f8929', "data-version": version }, h("button", { key: '9795891344158c294f6d77a2245200108f1fe737', "aria-selected": "false", class: "tab-title", id: this.tabId, role: "tab", tabindex: "-1", type: "button" }, h("slot", { key: 'd62f2894e9bf89c00a9d5673cd47507ef7b26359' }))));
|
|
24
24
|
}
|
|
25
25
|
get host() { return this; }
|
|
26
26
|
static get watchers() { return {
|
|
@@ -17,7 +17,7 @@ const PostTabPanel = /*@__PURE__*/ proxyCustomElement(class PostTabPanel extends
|
|
|
17
17
|
this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
|
|
18
18
|
}
|
|
19
19
|
render() {
|
|
20
|
-
return (h(Host, { key: '
|
|
20
|
+
return (h(Host, { key: '08148fe9b221905fbeab99bdb14f4d040deda959', "data-version": version }, h("div", { key: '04ad9fba5b296902fc75e0e36f7cefd91d0b6948', class: "tab-pane", id: this.panelId, role: "tabpanel" }, h("slot", { key: '840a5242e071f47b102340738f31b3f8b3c10052' }))));
|
|
21
21
|
}
|
|
22
22
|
get host() { return this; }
|
|
23
23
|
static get style() { return PostTabPanelStyle0; }
|
|
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
|
|
|
2
2
|
import { v as version } from './package.js';
|
|
3
3
|
import { f as fadeOut, a as fadeIn } from './fade.js';
|
|
4
4
|
|
|
5
|
-
const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color
|
|
5
|
+
const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(var(--post-contrast-color-rgb), 0.02)}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}.bg-yellow .tabs-wrapper{background-color:#fc0}.bg-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:#333}.bg-primary .tabs-wrapper{background-color:#333}.bg-white .tabs-wrapper{background-color:#fff}.bg-black .tabs-wrapper{background-color:#000}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-success .tabs-wrapper{background-color:#2c911c}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-danger .tabs-wrapper{background-color:#a51728}.bg-nightblue .tabs-wrapper{background-color:#004976}.bg-nightblue-bright .tabs-wrapper{background-color:#0076a8}.bg-petrol .tabs-wrapper{background-color:#006d68}.bg-petrol-bright .tabs-wrapper{background-color:#00968f}.bg-coral .tabs-wrapper{background-color:#9e2a2f}.bg-coral-bright .tabs-wrapper{background-color:#e03c31}.bg-olive .tabs-wrapper{background-color:#716135}.bg-olive-bright .tabs-wrapper{background-color:#aa9d2e}.bg-purple .tabs-wrapper{background-color:#80276c}.bg-purple-bright .tabs-wrapper{background-color:#c5299b}.bg-aubergine .tabs-wrapper{background-color:#523178}.bg-aubergine-bright .tabs-wrapper{background-color:#7566a0}.bg-success-green .tabs-wrapper{background-color:#2c871d}.bg-error-red .tabs-wrapper{background-color:#a51728}.bg-warning-orange .tabs-wrapper{background-color:#f49e00}.bg-success-background .tabs-wrapper{background-color:#c0debb}.bg-error-background .tabs-wrapper{background-color:#ffdade}.bg-warning-background .tabs-wrapper{background-color:#fce2b2}:host{display:block}";
|
|
6
6
|
const PostTabsStyle0 = postTabsCss;
|
|
7
7
|
|
|
8
8
|
const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLElement {
|
|
@@ -143,7 +143,7 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
|
|
|
143
143
|
nextTabTitle.focus();
|
|
144
144
|
}
|
|
145
145
|
render() {
|
|
146
|
-
return (h(Host, { key: '
|
|
146
|
+
return (h(Host, { key: '474b7d00c23aec2a44a202c09b8a75a9dc12b4a8', "data-version": version }, h("div", { key: '2fe1b6cad96fd868cbaa7e775d185537a37228fd', class: "tabs-wrapper" }, h("div", { key: 'ef70af3ddd337cefb719d183d603eb93fb033e25', class: "tabs", role: "tablist" }, h("slot", { key: '360909ea07bbbca523cb21b71daa8b4b02f60bed', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'ba44b0e8484e63d9b48f66933f37d854eb648854', class: "tab-content" }, h("slot", { key: 'cd22488448be508393fcb9f9428d3f712c9b659b', onSlotchange: () => this.moveMisplacedTabs() }))));
|
|
147
147
|
}
|
|
148
148
|
get host() { return this; }
|
|
149
149
|
static get style() { return PostTabsStyle0; }
|
|
@@ -4939,7 +4939,7 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
|
|
|
4939
4939
|
}
|
|
4940
4940
|
render() {
|
|
4941
4941
|
const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
|
|
4942
|
-
return (h(Host, { key: '
|
|
4942
|
+
return (h(Host, { key: '63124ebabffbe5fe857bcc61eecf4133f2952e85', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '42e1b5e0ab8cbb3a1b805ccf5b40232b071cf5ad', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'bf414a19c044f3c608ab3141bb93736dd7dea723' }))));
|
|
4943
4943
|
}
|
|
4944
4944
|
get host() { return this; }
|
|
4945
4945
|
static get style() { return PostTooltipStyle0; }
|