@swisspost/design-system-components 8.1.0 → 8.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-a1440961.js → index-01f30442.js} +13 -0
- package/dist/cjs/{index-baad16da.js → index-c15bd800.js} +43 -5
- package/dist/cjs/index.cjs.js +19 -17
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/{package-fd539ea9.js → package-69bba137.js} +1 -1
- package/dist/cjs/{post-accordion-bebb0498.js → post-accordion-3da9563f.js} +2 -2
- package/dist/cjs/{post-accordion-item-b15bcbb9.js → post-accordion-item-57046b20.js} +3 -3
- package/dist/cjs/post-accordion-item.cjs.entry.js +4 -4
- package/dist/cjs/post-accordion.cjs.entry.js +3 -3
- package/dist/cjs/{post-alert-4a1ab7e3.js → post-alert-54b0ed5d.js} +3 -3
- package/dist/cjs/post-alert.cjs.entry.js +4 -4
- package/dist/cjs/post-card-control-407e03b7.js +272 -0
- package/dist/cjs/post-card-control.cjs.entry.js +3 -3
- package/dist/cjs/{post-collapsible-trigger-b82b368e.js → post-collapsible-trigger-68e20fe1.js} +3 -3
- package/dist/cjs/post-collapsible_2.cjs.entry.js +4 -4
- package/dist/cjs/post-components.cjs.js +2 -2
- package/dist/cjs/{post-icon-36f7a65e.js → post-icon-0fb3e3a5.js} +3 -3
- package/dist/cjs/post-icon.cjs.entry.js +4 -4
- package/dist/cjs/post-logo-f4c77b1a.js +39 -0
- package/dist/cjs/post-logo.cjs.entry.js +14 -0
- package/dist/cjs/{post-popover-eb936464.js → post-popover-01193d5f.js} +3 -3
- package/dist/cjs/post-popover.cjs.entry.js +3 -3
- package/dist/cjs/{post-popovercontainer-ba97a4b4.js → post-popovercontainer-d462f01b.js} +4 -4
- package/dist/cjs/post-popovercontainer.cjs.entry.js +3 -3
- package/dist/cjs/{post-rating-1df2edf5.js → post-rating-49248453.js} +3 -3
- package/dist/cjs/post-rating.cjs.entry.js +3 -3
- package/dist/cjs/{post-tab-header-52ce1af4.js → post-tab-header-01d91e1c.js} +3 -3
- package/dist/cjs/post-tab-header.cjs.entry.js +3 -3
- package/dist/cjs/{post-tab-panel-e94c9c58.js → post-tab-panel-9f29af4a.js} +3 -3
- package/dist/cjs/post-tab-panel.cjs.entry.js +3 -3
- package/dist/cjs/{post-tabs-af38f271.js → post-tabs-0952f6c0.js} +28 -7
- package/dist/cjs/post-tabs.cjs.entry.js +3 -3
- package/dist/cjs/{post-tag-1dcddcae.js → post-tag-7afb5956.js} +4 -4
- package/dist/cjs/post-tag.cjs.entry.js +3 -3
- package/dist/cjs/{post-tooltip-1e8d5f4e.js → post-tooltip-2c85c40a.js} +4 -4
- package/dist/cjs/post-tooltip.cjs.entry.js +4 -4
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/post-card-control/post-card-control.css +1 -1
- package/dist/collection/components/post-card-control/post-card-control.js +23 -25
- package/dist/collection/components/post-logo/post-logo.css +1 -0
- package/dist/collection/components/post-logo/post-logo.js +73 -0
- package/dist/collection/components/post-popover/post-popover.js +1 -1
- package/dist/collection/components/post-popovercontainer/post-popovercontainer.js +2 -2
- package/dist/collection/components/post-rating/post-rating.js +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.js +6 -5
- package/dist/collection/components/post-tag/post-tag.css +1 -1
- package/dist/collection/components/post-tag/post-tag.js +1 -1
- package/dist/collection/components/post-tooltip/post-tooltip.js +1 -1
- package/dist/collection/index.js +1 -0
- package/dist/collection/utils/component-on-ready.js +20 -0
- package/dist/collection/utils/index.js +1 -0
- package/dist/collection/utils/property-checkers/check-url.js +10 -0
- package/dist/collection/utils/property-checkers/index.js +3 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index2.js +13 -1
- package/dist/components/package.js +1 -1
- package/dist/components/post-card-control2.js +21 -64
- package/dist/components/post-logo.d.ts +11 -0
- package/dist/components/post-logo.js +6 -0
- package/dist/components/post-logo2.js +56 -0
- package/dist/components/post-popover2.js +1 -1
- package/dist/components/post-popovercontainer2.js +2 -2
- package/dist/components/post-rating2.js +1 -1
- package/dist/components/post-tab-header2.js +1 -1
- package/dist/components/post-tab-panel2.js +1 -1
- package/dist/components/post-tabs2.js +26 -5
- package/dist/components/post-tag2.js +2 -2
- package/dist/components/post-tooltip2.js +1 -1
- package/dist/docs.json +64 -5
- package/dist/esm/{index-189d3985.js → index-0b56fc28.js} +43 -5
- package/dist/esm/{index-d1eba94c.js → index-f41b763f.js} +13 -1
- package/dist/esm/index.js +18 -17
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{package-8c58ace7.js → package-cc8df0dd.js} +1 -1
- package/dist/esm/{post-accordion-6b2f2b73.js → post-accordion-0997a59a.js} +2 -2
- package/dist/esm/{post-accordion-item-c8614cda.js → post-accordion-item-6ed597ee.js} +3 -3
- package/dist/esm/post-accordion-item.entry.js +4 -4
- package/dist/esm/post-accordion.entry.js +3 -3
- package/dist/esm/{post-alert-de5e60d3.js → post-alert-a0eeba8b.js} +3 -3
- package/dist/esm/post-alert.entry.js +4 -4
- package/dist/esm/post-card-control-453166e5.js +270 -0
- package/dist/esm/post-card-control.entry.js +3 -3
- package/dist/esm/{post-collapsible-trigger-221d58c1.js → post-collapsible-trigger-ee4b6850.js} +3 -3
- package/dist/esm/post-collapsible_2.entry.js +4 -4
- package/dist/esm/post-components.js +3 -3
- package/dist/esm/{post-icon-0f2f4f9b.js → post-icon-91683e26.js} +3 -3
- package/dist/esm/post-icon.entry.js +4 -4
- package/dist/esm/post-logo-3f8cf707.js +37 -0
- package/dist/esm/post-logo.entry.js +6 -0
- package/dist/esm/{post-popover-2e6ada87.js → post-popover-b44d91a2.js} +3 -3
- package/dist/esm/post-popover.entry.js +3 -3
- package/dist/esm/{post-popovercontainer-0c396235.js → post-popovercontainer-23860260.js} +4 -4
- package/dist/esm/post-popovercontainer.entry.js +3 -3
- package/dist/esm/{post-rating-fcf19507.js → post-rating-dfd43afc.js} +3 -3
- package/dist/esm/post-rating.entry.js +3 -3
- package/dist/esm/{post-tab-header-75337bbc.js → post-tab-header-42bfc542.js} +3 -3
- package/dist/esm/post-tab-header.entry.js +3 -3
- package/dist/esm/{post-tab-panel-1ca4f5c9.js → post-tab-panel-233c4dc3.js} +3 -3
- package/dist/esm/post-tab-panel.entry.js +3 -3
- package/dist/esm/{post-tabs-77ac9eee.js → post-tabs-fdea9439.js} +28 -7
- package/dist/esm/post-tabs.entry.js +3 -3
- package/dist/esm/{post-tag-9741c642.js → post-tag-98651c1c.js} +4 -4
- package/dist/esm/post-tag.entry.js +3 -3
- package/dist/esm/{post-tooltip-c69b7162.js → post-tooltip-f46b5e51.js} +4 -4
- package/dist/esm/post-tooltip.entry.js +4 -4
- package/dist/post-components/index.esm.js +1 -1
- package/dist/post-components/p-0e04f44b.entry.js +1 -0
- package/dist/post-components/{p-88fc0fa3.js → p-17b8b241.js} +1 -1
- package/dist/post-components/p-18c01d62.js +1 -0
- package/dist/post-components/{p-e4acf838.js → p-1a4ef000.js} +1 -1
- package/dist/post-components/{p-8a781b6e.js → p-213cfa52.js} +1 -1
- package/dist/post-components/p-30af6382.entry.js +1 -0
- package/dist/post-components/p-326709cb.js +1 -0
- package/dist/post-components/{p-1e374a42.js → p-35f06c3d.js} +1 -1
- package/dist/post-components/p-3749f35b.entry.js +1 -0
- package/dist/post-components/p-444824a1.entry.js +1 -0
- package/dist/post-components/{p-d2753c4a.js → p-4aef4c0b.js} +1 -1
- package/dist/post-components/p-4c229386.js +1 -0
- package/dist/post-components/{p-32713474.js → p-50bc322d.js} +1 -1
- package/dist/post-components/p-605b64b4.entry.js +1 -0
- package/dist/post-components/p-60cc57a5.entry.js +1 -0
- package/dist/post-components/p-660594c0.js +1 -0
- package/dist/post-components/p-7bf744e9.entry.js +1 -0
- package/dist/post-components/p-94d8f3d2.entry.js +1 -0
- package/dist/post-components/{p-38abadc5.js → p-968de7fe.js} +2 -2
- package/dist/post-components/p-b41129e7.entry.js +1 -0
- package/dist/post-components/p-b545df93.entry.js +1 -0
- package/dist/post-components/p-b5fa3ba0.entry.js +1 -0
- package/dist/post-components/{p-ed2b2d33.js → p-b96c35d4.js} +1 -1
- package/dist/post-components/{p-d36a5db5.js → p-bd339c2c.js} +1 -1
- package/dist/post-components/{p-2c424cd4.js → p-c0aa6d02.js} +1 -1
- package/dist/post-components/p-c4f5fa27.entry.js +1 -0
- package/dist/post-components/p-c998fdc9.entry.js +1 -0
- package/dist/post-components/p-cb757310.js +1 -0
- package/dist/post-components/p-d2912c01.entry.js +1 -0
- package/dist/post-components/p-d2f9de94.js +2 -0
- package/dist/post-components/p-deb4131c.js +1 -0
- package/dist/post-components/p-e00b4f0d.entry.js +1 -0
- package/dist/post-components/p-f04634da.js +1 -0
- package/dist/post-components/post-components.esm.js +1 -1
- package/dist/types/components/post-card-control/post-card-control.d.ts +5 -7
- package/dist/types/components/post-logo/post-logo.d.ts +14 -0
- package/dist/types/components.d.ts +29 -8
- package/dist/types/index.d.ts +1 -0
- package/dist/types/utils/component-on-ready.d.ts +6 -0
- package/dist/types/utils/index.d.ts +1 -0
- package/dist/types/utils/property-checkers/check-url.d.ts +1 -0
- package/dist/types/utils/property-checkers/index.d.ts +2 -0
- package/loaders/attribute-observer.js +25 -0
- package/loaders/check-non-empty.js +9 -0
- package/loaders/check-one-of.js +6 -0
- package/loaders/check-type.js +14 -0
- package/loaders/constants.js +3 -0
- package/loaders/fade.js +7 -0
- package/loaders/heading-levels.js +3 -0
- package/loaders/index.d.ts +68 -0
- package/loaders/index.js +18 -0
- package/loaders/index2.js +34 -0
- package/loaders/package.js +3 -0
- package/loaders/post-accordion-item.d.ts +11 -0
- package/loaders/post-accordion-item.js +86 -0
- package/loaders/post-accordion.d.ts +11 -0
- package/loaders/post-accordion.js +128 -0
- package/loaders/post-alert.d.ts +11 -0
- package/loaders/post-alert.js +139 -0
- package/loaders/post-card-control.d.ts +11 -0
- package/loaders/post-card-control.js +306 -0
- package/loaders/post-collapsible-trigger.d.ts +11 -0
- package/loaders/post-collapsible-trigger.js +6 -0
- package/loaders/post-collapsible-trigger2.js +144 -0
- package/loaders/post-collapsible.d.ts +11 -0
- package/loaders/post-collapsible.js +6 -0
- package/loaders/post-collapsible2.js +103 -0
- package/loaders/post-icon.d.ts +11 -0
- package/loaders/post-icon.js +6 -0
- package/loaders/post-icon2.js +136 -0
- package/loaders/post-logo.d.ts +11 -0
- package/loaders/post-logo.js +59 -0
- package/loaders/post-popover.d.ts +11 -0
- package/loaders/post-popover.js +133 -0
- package/loaders/post-popovercontainer.d.ts +11 -0
- package/loaders/post-popovercontainer.js +6 -0
- package/loaders/post-popovercontainer2.js +2204 -0
- package/loaders/post-rating.d.ts +11 -0
- package/loaders/post-rating.js +116 -0
- package/loaders/post-tab-header.d.ts +11 -0
- package/loaders/post-tab-header.js +53 -0
- package/loaders/post-tab-panel.d.ts +11 -0
- package/loaders/post-tab-panel.js +45 -0
- package/loaders/post-tabs.d.ts +11 -0
- package/loaders/post-tabs.js +192 -0
- package/loaders/post-tag.d.ts +11 -0
- package/loaders/post-tag.js +77 -0
- package/loaders/post-tooltip.d.ts +11 -0
- package/loaders/post-tooltip.js +5000 -0
- package/package.json +12 -11
- package/dist/cjs/post-card-control-c363c793.js +0 -315
- package/dist/esm/post-card-control-38a302fe.js +0 -313
- package/dist/post-components/p-02d1f275.js +0 -1
- package/dist/post-components/p-28e17fd1.entry.js +0 -1
- package/dist/post-components/p-6dd5d5ba.entry.js +0 -1
- package/dist/post-components/p-726fec57.js +0 -1
- package/dist/post-components/p-7301b124.entry.js +0 -1
- package/dist/post-components/p-7bdec425.js +0 -1
- package/dist/post-components/p-7fc15b07.entry.js +0 -1
- package/dist/post-components/p-80f33a98.js +0 -1
- package/dist/post-components/p-8126cca3.entry.js +0 -1
- package/dist/post-components/p-8b86cde6.entry.js +0 -1
- package/dist/post-components/p-95b7403d.entry.js +0 -1
- package/dist/post-components/p-a0187d40.entry.js +0 -1
- package/dist/post-components/p-a5c8a3de.js +0 -1
- package/dist/post-components/p-a931e3c6.entry.js +0 -1
- package/dist/post-components/p-b5f7d9e5.entry.js +0 -1
- package/dist/post-components/p-b9176139.entry.js +0 -1
- package/dist/post-components/p-c0f265c8.js +0 -2
- package/dist/post-components/p-c88f169d.entry.js +0 -1
- package/dist/post-components/p-e6bc1a0c.entry.js +0 -1
- package/dist/post-components/p-ea2954f3.entry.js +0 -1
- package/dist/post-components/p-f91c0e1b.js +0 -1
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { h, Host } from "@stencil/core";
|
|
2
|
+
import { version } from "../../../../package";
|
|
3
|
+
import { checkEmptyOrUrl } from "../../utils/index";
|
|
4
|
+
/**
|
|
5
|
+
* @slot default - Slot for placing hidden descriptive text. If `url` is set, this text will serve as the accessible name of the link; otherwise, it will be used as the title of the SVG.
|
|
6
|
+
*/
|
|
7
|
+
export class PostLogo {
|
|
8
|
+
constructor() {
|
|
9
|
+
this.url = undefined;
|
|
10
|
+
}
|
|
11
|
+
validateUrl() {
|
|
12
|
+
checkEmptyOrUrl(this.url, 'The "url" property of the post-logo is invalid');
|
|
13
|
+
}
|
|
14
|
+
connectedCallback() {
|
|
15
|
+
this.validateUrl();
|
|
16
|
+
this.checkDescription();
|
|
17
|
+
}
|
|
18
|
+
checkDescription() {
|
|
19
|
+
if (!this.host.textContent) {
|
|
20
|
+
console.warn('Be sure to add descriptive text in the post-logo to ensure good accessibility of the component.');
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
render() {
|
|
24
|
+
const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
|
|
25
|
+
const LogoTag = logoLink ? 'a' : 'span';
|
|
26
|
+
return (h(Host, { key: 'c1d583f828a1f35ed482f1d1894354a503d8010e', "data-version": version }, h(LogoTag, Object.assign({ key: '61886ad3e388a6286e86b49a8ab150774e9e3d19', class: "logo" }, (logoLink ? { href: logoLink } : {})), h("span", { key: '88c01bbd0e146157ff2897300199717e8da1b2f0', class: "description" }, h("slot", { key: 'dccdd781dd6b6c78d9c8775a3f91765c6c4a8449', onSlotchange: () => this.checkDescription() })), h("svg", { key: '3f66dab4ca898d245759249828508adfa0ac92ea', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: 'bb5bb34aa56362a8805f6f97562825448d4ffac7', id: "Logo" }, h("rect", { key: '8bbee198611c558653cac3b31683beb9bc17c196', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '2ca797bd9ad0861b81b953e04626abb2d5cb7323', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: 'eefa701f5f04ba0f0c04eb51748e62209e33ff06', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
|
|
27
|
+
}
|
|
28
|
+
static get is() { return "post-logo"; }
|
|
29
|
+
static get encapsulation() { return "shadow"; }
|
|
30
|
+
static get originalStyleUrls() {
|
|
31
|
+
return {
|
|
32
|
+
"$": ["post-logo.scss"]
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
static get styleUrls() {
|
|
36
|
+
return {
|
|
37
|
+
"$": ["post-logo.css"]
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
static get properties() {
|
|
41
|
+
return {
|
|
42
|
+
"url": {
|
|
43
|
+
"type": "string",
|
|
44
|
+
"mutable": false,
|
|
45
|
+
"complexType": {
|
|
46
|
+
"original": "string | URL",
|
|
47
|
+
"resolved": "URL | string",
|
|
48
|
+
"references": {
|
|
49
|
+
"URL": {
|
|
50
|
+
"location": "global",
|
|
51
|
+
"id": "global::URL"
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
"required": false,
|
|
56
|
+
"optional": false,
|
|
57
|
+
"docs": {
|
|
58
|
+
"tags": [],
|
|
59
|
+
"text": "The URL to which the user is redirected upon clicking the logo."
|
|
60
|
+
},
|
|
61
|
+
"attribute": "url",
|
|
62
|
+
"reflect": false
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
static get elementRef() { return "host"; }
|
|
67
|
+
static get watchers() {
|
|
68
|
+
return [{
|
|
69
|
+
"propName": "url",
|
|
70
|
+
"methodName": "validateUrl"
|
|
71
|
+
}];
|
|
72
|
+
}
|
|
73
|
+
}
|
|
@@ -88,7 +88,7 @@ export class PostPopover {
|
|
|
88
88
|
this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
|
|
89
89
|
}
|
|
90
90
|
render() {
|
|
91
|
-
return (h(Host, { key: '
|
|
91
|
+
return (h(Host, { key: '6fe379d071ec88a76f99cc10f0fdce0b2f079fbd', "data-version": version }, h("post-popovercontainer", { key: '3a5e2896e87e3f2d32c0ad9b1d80327cc585f289', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '46834ef6a3893fe8823776d8feb20a2fb328e3bc', class: "popover-container" }, h("div", { key: '9d61b678c2613e84efc0df805cbb67fbe3d06991', class: "popover-content" }, h("slot", { key: '1cfef5daaea3f6370869a3ae648ff36e2dddd82a' })), h("button", { key: 'c7a2e12ece46ee63d8004d99427c8c6febc2dc17', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '1aee8ffe06b5c4c9bade0185a8832328410fbe4a', class: "visually-hidden" }, this.closeButtonCaption))))));
|
|
92
92
|
}
|
|
93
93
|
static get is() { return "post-popover"; }
|
|
94
94
|
static get encapsulation() { return "shadow"; }
|
|
@@ -135,9 +135,9 @@ export class PostPopovercontainer {
|
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
137
|
render() {
|
|
138
|
-
return (h(Host, { key: '
|
|
138
|
+
return (h(Host, { key: 'daf21d119057a14c2c2f68b8068901ab698beae3', "data-version": version }, this.arrow && (h("span", { key: '4f5cfb1422217f9ef71732cdfc0c97b6b29e4809', class: "arrow", ref: el => {
|
|
139
139
|
this.arrowRef = el;
|
|
140
|
-
} })), h("slot", { key: '
|
|
140
|
+
} })), h("slot", { key: 'f6e4beefb8e365dbf20a0a5019cceaac4ecb73a4' })));
|
|
141
141
|
}
|
|
142
142
|
static get is() { return "post-popovercontainer"; }
|
|
143
143
|
static get originalStyleUrls() {
|
|
@@ -64,7 +64,7 @@ export class PostRating {
|
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
render() {
|
|
67
|
-
return (h(Host, { key: '
|
|
67
|
+
return (h(Host, { key: '0a4972eeedcda4d4f772db0407ba2a6279f5d797', "data-version": version }, h("div", { key: 'a9ab9daaa3f9e1e421f28267057b99a1a2e235ee', 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
68
|
'star': true,
|
|
69
69
|
'before-hover': i < this.hoveredIndex,
|
|
70
70
|
'active': i < Math.round(this.currentRating),
|
|
@@ -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: '35077e5514ffd19a4fb27bc3a4c1d9d19072768b', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '67b09864a209c00c677e1c279240d9b4ca289faa' })));
|
|
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: '2d01a8e7f06e45b4750e63584a3c52232dee4dd5', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: 'b51e2f112791ac22df43ebb537208c65aebe3d03' })));
|
|
17
17
|
}
|
|
18
18
|
static get is() { return "post-tab-panel"; }
|
|
19
19
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import { version } from "../../../../package";
|
|
3
3
|
import { fadeIn, fadeOut } from "../../animations/index";
|
|
4
|
+
import { componentOnReady } from "../../utils/index";
|
|
4
5
|
/**
|
|
5
6
|
* @slot tabs - Slot for placing tab headers. Each tab header should be a <post-tab-header> element.
|
|
6
7
|
* @slot default - Slot for placing tab panels. Each tab panel should be a <post-tab-panel> element.
|
|
@@ -66,7 +67,7 @@ export class PostTabs {
|
|
|
66
67
|
if (!this.tabs)
|
|
67
68
|
return;
|
|
68
69
|
this.tabs.forEach(async (tab) => {
|
|
69
|
-
await
|
|
70
|
+
await componentOnReady(tab);
|
|
70
71
|
// if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
|
|
71
72
|
if (tab.getAttribute('aria-controls'))
|
|
72
73
|
return;
|
|
@@ -82,9 +83,9 @@ export class PostTabs {
|
|
|
82
83
|
void this.show(tab.panel);
|
|
83
84
|
}
|
|
84
85
|
});
|
|
85
|
-
tab.addEventListener('keydown', (
|
|
86
|
-
if (key === 'ArrowRight' || key === 'ArrowLeft')
|
|
87
|
-
this.navigateTabs(tab, key);
|
|
86
|
+
tab.addEventListener('keydown', (e) => {
|
|
87
|
+
if (e.key === 'ArrowRight' || e.key === 'ArrowLeft')
|
|
88
|
+
this.navigateTabs(tab, e.key);
|
|
88
89
|
});
|
|
89
90
|
});
|
|
90
91
|
// if the currently active tab was removed from the DOM then select the first one
|
|
@@ -141,7 +142,7 @@ export class PostTabs {
|
|
|
141
142
|
nextTab.focus();
|
|
142
143
|
}
|
|
143
144
|
render() {
|
|
144
|
-
return (h(Host, { key: '
|
|
145
|
+
return (h(Host, { key: '6a3e84a92b03d462dbff1b8fc638f7ebf8ea9d23', "data-version": version }, h("div", { key: 'e73b58f1524e70401089830b1b9b47a2c85b828a', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '9da5ce2d30d37c74dee92f2e871e56e96d07d429', class: "tabs", role: "tablist" }, h("slot", { key: '944e209f2f23b9a3469bc6b5167a0939da4c9631', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '93caabfd1a0be19df3e8be64f0965de488159526', class: "tab-content", part: "content" }, h("slot", { key: '92465fa749afad52130631cb3957fefeb40b8e9a', onSlotchange: () => this.moveMisplacedTabs() }))));
|
|
145
146
|
}
|
|
146
147
|
static get is() { return "post-tabs"; }
|
|
147
148
|
static get encapsulation() { return "shadow"; }
|
|
@@ -28,4 +28,4 @@
|
|
|
28
28
|
* THE SOFTWARE.
|
|
29
29
|
*//*!
|
|
30
30
|
* Copyright 2021 by Swiss Post, Information Technology
|
|
31
|
-
*/.tag,.tag:where(:has(:not(pre))){--post-tag-bg: hsl(0, 0%, 90%);--post-tag-fg: #000;display:inline-flex;align-items:center;gap:.25rem;padding:0 .5rem;max-width:
|
|
31
|
+
*/.tag,.tag:where(:has(:not(pre))){--post-tag-bg: hsl(0, 0%, 90%);--post-tag-fg: #000;display:inline-flex;align-items:center;gap:.25rem;padding:0 .5rem;max-width:100%;background-color:var(--post-tag-bg);border:1px solid rgba(0,0,0,0);border-radius:.25rem;font-size:1rem;line-height:1.875rem;white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:1.5rem}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg: #fff;--post-tag-fg: #000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg: #fc0;--post-tag-fg: #000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg: #2c871d;--post-tag-fg: #fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg: #f49e00;--post-tag-fg: #000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg: #a51728;--post-tag-fg: #fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg: #cce4ee;--post-tag-fg: #000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:var(--post-contrast-color)}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}
|
|
@@ -30,7 +30,7 @@ export class PostTag {
|
|
|
30
30
|
this.setClasses();
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
|
-
return (h(Host, { key: '
|
|
33
|
+
return (h(Host, { key: '7426002d3008de53e92edc8ec2fc759569b191bf', "data-version": version }, h("div", { key: '1cde8f5c3d2db66f45aaa64091a1b76f1d1468ee', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: 'cc63b7277ba4f4076a46f5038b24699f6818c81b', class: "tag-text" }, h("slot", { key: '37b57632add7f7c093e42302e44defef63ccc29f' })))));
|
|
34
34
|
}
|
|
35
35
|
static get is() { return "post-tag"; }
|
|
36
36
|
static get encapsulation() { return "shadow"; }
|
|
@@ -179,7 +179,7 @@ export class PostTooltip {
|
|
|
179
179
|
}
|
|
180
180
|
render() {
|
|
181
181
|
const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
|
|
182
|
-
return (h(Host, { key: '
|
|
182
|
+
return (h(Host, { key: 'f543fa8f63cc6b65e1a86e34b1a59b4ca0bb9e47', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'e920d62462d209ff25593f7989ca16f6177b7292', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '607d7357cb201c7e6e62f9a241392bd5ef1f156e' }))));
|
|
183
183
|
}
|
|
184
184
|
static get is() { return "post-tooltip"; }
|
|
185
185
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/index.js
CHANGED
|
@@ -6,6 +6,7 @@ export { PostCardControl } from './components/post-card-control/post-card-contro
|
|
|
6
6
|
export { PostCollapsible } from './components/post-collapsible/post-collapsible';
|
|
7
7
|
export { PostCollapsibleTrigger } from './components/post-collapsible-trigger/post-collapsible-trigger';
|
|
8
8
|
export { PostIcon } from './components/post-icon/post-icon';
|
|
9
|
+
export { PostLogo } from './components/post-logo/post-logo';
|
|
9
10
|
export { PostPopover } from './components/post-popover/post-popover';
|
|
10
11
|
export { PostPopovercontainer } from './components/post-popovercontainer/post-popovercontainer';
|
|
11
12
|
export { PostRating } from './components/post-rating/post-rating';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Invoke the `componentOnReady` method if it is available, simulate it otherwise
|
|
3
|
+
* @see https://stenciljs.com/docs/api#componentonready
|
|
4
|
+
*/
|
|
5
|
+
export const componentOnReady = (el) => {
|
|
6
|
+
if (typeof el.componentOnReady === 'function') {
|
|
7
|
+
return el.componentOnReady();
|
|
8
|
+
}
|
|
9
|
+
else {
|
|
10
|
+
return new Promise(resolve => customOnReady(() => {
|
|
11
|
+
resolve(el);
|
|
12
|
+
}));
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
const customOnReady = (callback) => {
|
|
16
|
+
if (typeof requestAnimationFrame === 'function') {
|
|
17
|
+
return requestAnimationFrame(callback);
|
|
18
|
+
}
|
|
19
|
+
return setTimeout(callback);
|
|
20
|
+
};
|
|
@@ -2,10 +2,13 @@ import { emptyOr } from "./empty-or";
|
|
|
2
2
|
import { checkOneOf } from "./check-one-of";
|
|
3
3
|
import { checkPattern } from "./check-pattern";
|
|
4
4
|
import { checkType } from "./check-type";
|
|
5
|
+
import { checkUrl } from "./check-url";
|
|
5
6
|
export const checkEmptyOrOneOf = emptyOr(checkOneOf);
|
|
6
7
|
export const checkEmptyOrPattern = emptyOr(checkPattern);
|
|
7
8
|
export const checkEmptyOrType = emptyOr(checkType);
|
|
9
|
+
export const checkEmptyOrUrl = emptyOr(checkUrl);
|
|
8
10
|
export * from './check-non-empty';
|
|
9
11
|
export * from './check-one-of';
|
|
10
12
|
export * from './check-pattern';
|
|
11
13
|
export * from './check-type';
|
|
14
|
+
export * from './check-url';
|
package/dist/components/index.js
CHANGED
|
@@ -6,6 +6,7 @@ export { P as PostCardControl } from './post-card-control2.js';
|
|
|
6
6
|
export { P as PostCollapsible } from './post-collapsible2.js';
|
|
7
7
|
export { P as PostCollapsibleTrigger } from './post-collapsible-trigger2.js';
|
|
8
8
|
export { P as PostIcon } from './post-icon2.js';
|
|
9
|
+
export { P as PostLogo } from './post-logo2.js';
|
|
9
10
|
export { P as PostPopover } from './post-popover2.js';
|
|
10
11
|
export { P as PostPopovercontainer } from './post-popovercontainer2.js';
|
|
11
12
|
export { P as PostRating } from './post-rating2.js';
|
|
@@ -15,8 +15,20 @@ function checkPattern(value, pattern, errorMessage) {
|
|
|
15
15
|
throw new Error(errorMessage);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
+
function checkUrl(value, error) {
|
|
19
|
+
if (typeof value !== 'string' && !(value instanceof URL))
|
|
20
|
+
throw new Error(error);
|
|
21
|
+
try {
|
|
22
|
+
new URL(value);
|
|
23
|
+
}
|
|
24
|
+
catch (e) {
|
|
25
|
+
throw new Error(error);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
18
29
|
const checkEmptyOrOneOf = emptyOr(checkOneOf);
|
|
19
30
|
const checkEmptyOrPattern = emptyOr(checkPattern);
|
|
20
31
|
const checkEmptyOrType = emptyOr(checkType);
|
|
32
|
+
const checkEmptyOrUrl = emptyOr(checkUrl);
|
|
21
33
|
|
|
22
|
-
export { checkEmptyOrPattern as a, checkEmptyOrType as b, checkEmptyOrOneOf as c };
|
|
34
|
+
export { checkEmptyOrPattern as a, checkEmptyOrType as b, checkEmptyOrOneOf as c, checkEmptyOrUrl as d };
|