@swisspost/design-system-components 10.0.0-next.59 → 10.0.0-next.60
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/loader.cjs.js +1 -1
- package/dist/cjs/{package-DzZ0YUie.js → package-ENij-plM.js} +1 -1
- package/dist/cjs/post-accordion_2.cjs.entry.js +1 -1
- package/dist/cjs/post-avatar.cjs.entry.js +1 -1
- package/dist/cjs/post-back-to-top.cjs.entry.js +1 -1
- package/dist/cjs/post-banner.cjs.entry.js +2 -2
- package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +1 -1
- package/dist/cjs/post-breadcrumbs.cjs.entry.js +1 -1
- package/dist/cjs/post-card-control.cjs.entry.js +1 -1
- package/dist/cjs/post-closebutton_13.cjs.entry.js +30 -6
- package/dist/cjs/post-collapsible_2.cjs.entry.js +3 -3
- package/dist/cjs/post-components.cjs.js +1 -1
- package/dist/cjs/post-footer.cjs.entry.js +1 -1
- package/dist/cjs/post-linkarea.cjs.entry.js +1 -1
- package/dist/cjs/post-pagination.cjs.entry.js +1 -1
- package/dist/cjs/post-popover-trigger.cjs.entry.js +1 -1
- package/dist/cjs/post-popover.cjs.entry.js +1 -1
- package/dist/cjs/post-rating.cjs.entry.js +1 -1
- package/dist/cjs/post-stepper-item.cjs.entry.js +1 -1
- package/dist/cjs/post-stepper.cjs.entry.js +1 -1
- package/dist/cjs/post-tab-item.cjs.entry.js +1 -1
- package/dist/cjs/post-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/post-tabs.cjs.entry.js +1 -1
- package/dist/cjs/post-tooltip-trigger.cjs.entry.js +1 -1
- package/dist/cjs/post-tooltip.cjs.entry.js +1 -1
- package/dist/collection/components/post-banner/post-banner.css +1 -1
- package/dist/collection/components/post-closebutton/post-closebutton.css +1 -1
- package/dist/collection/components/post-closebutton/post-closebutton.js +83 -7
- package/dist/collection/components/post-closebutton/types.js +3 -0
- package/dist/collection/components/post-collapsible/post-collapsible.js +2 -2
- package/dist/collection/components/post-megadropdown/post-megadropdown.css +1 -1
- package/dist/collection/components/post-megadropdown/post-megadropdown.js +1 -1
- package/dist/components/package.js +1 -1
- package/dist/components/post-banner.js +1 -1
- package/dist/components/post-closebutton2.js +1 -1
- package/dist/components/post-collapsible2.js +1 -1
- package/dist/components/post-megadropdown.js +1 -1
- package/dist/components/react/p-B7eGY_zG.js +1 -0
- package/dist/components/react/{p-CpHa76t0.js → p-BM5T_AgG.js} +1 -1
- package/dist/components/react/{p-IlUuXTk7.js → p-BNkE0s86.js} +1 -1
- package/dist/components/react/{p-CBPQwhIE.js → p-BX_nFrcn.js} +1 -1
- package/dist/components/react/p-BexjFgWq.js +1 -0
- package/dist/components/react/{p-CoS8dKpi.js → p-BhcKbsKY.js} +1 -1
- package/dist/components/react/p-BzBcOfzl.js +1 -0
- package/dist/components/react/{p-B7Pfex_I.js → p-CILij1jX.js} +1 -1
- package/dist/components/react/{p-Boi6UOyj.js → p-CwmHQ2Kf.js} +1 -1
- package/dist/components/react/{p-CS0PEJyh.js → p-D-kVF35b.js} +1 -1
- package/dist/components/react/{p-Bo4Ni2Xq.js → p-Djm_fenS.js} +1 -1
- package/dist/components/react/{p-C6KbCbAw.js → p-aSO__sH6.js} +1 -1
- package/dist/components/react/{p-Bj1Y_nVo.js → p-mA_8jS9w.js} +1 -1
- package/dist/components/react/post-accordion-item.js +1 -1
- package/dist/components/react/post-accordion.js +1 -1
- package/dist/components/react/post-avatar.js +1 -1
- package/dist/components/react/post-back-to-top.js +1 -1
- package/dist/components/react/post-banner.js +1 -1
- package/dist/components/react/post-breadcrumb-item.js +1 -1
- package/dist/components/react/post-breadcrumbs.js +1 -1
- package/dist/components/react/post-card-control.js +1 -1
- package/dist/components/react/post-closebutton.js +1 -1
- package/dist/components/react/post-collapsible-trigger.js +1 -1
- package/dist/components/react/post-collapsible.js +1 -1
- package/dist/components/react/post-footer.js +1 -1
- package/dist/components/react/post-header.js +1 -1
- package/dist/components/react/post-icon.js +1 -1
- package/dist/components/react/post-language-menu-item.js +1 -1
- package/dist/components/react/post-language-menu.js +1 -1
- package/dist/components/react/post-linkarea.js +1 -1
- package/dist/components/react/post-logo.js +1 -1
- package/dist/components/react/post-mainnavigation.js +1 -1
- package/dist/components/react/post-megadropdown-trigger.js +1 -1
- package/dist/components/react/post-megadropdown.js +1 -1
- package/dist/components/react/post-menu-item.js +1 -1
- package/dist/components/react/post-menu-trigger.js +1 -1
- package/dist/components/react/post-menu.js +1 -1
- package/dist/components/react/post-pagination.js +1 -1
- package/dist/components/react/post-popover-trigger.js +1 -1
- package/dist/components/react/post-popover.js +1 -1
- package/dist/components/react/post-popovercontainer.js +1 -1
- package/dist/components/react/post-rating.js +1 -1
- package/dist/components/react/post-stepper-item.js +1 -1
- package/dist/components/react/post-stepper.js +1 -1
- package/dist/components/react/post-tab-item.js +1 -1
- package/dist/components/react/post-tab-panel.js +1 -1
- package/dist/components/react/post-tabs.js +1 -1
- package/dist/components/react/post-togglebutton.js +1 -1
- package/dist/components/react/post-tooltip-trigger.js +1 -1
- package/dist/components/react/post-tooltip.js +1 -1
- package/dist/docs.json +98 -6
- package/dist/esm/loader.js +1 -1
- package/dist/esm/package-BzBcOfzl.js +3 -0
- package/dist/esm/post-accordion_2.entry.js +1 -1
- package/dist/esm/post-avatar.entry.js +1 -1
- package/dist/esm/post-back-to-top.entry.js +1 -1
- package/dist/esm/post-banner.entry.js +2 -2
- package/dist/esm/post-breadcrumb-item_2.entry.js +1 -1
- package/dist/esm/post-breadcrumbs.entry.js +1 -1
- package/dist/esm/post-card-control.entry.js +1 -1
- package/dist/esm/post-closebutton_13.entry.js +31 -7
- package/dist/esm/post-collapsible_2.entry.js +3 -3
- package/dist/esm/post-components.js +1 -1
- package/dist/esm/post-footer.entry.js +1 -1
- package/dist/esm/post-linkarea.entry.js +1 -1
- package/dist/esm/post-pagination.entry.js +1 -1
- package/dist/esm/post-popover-trigger.entry.js +1 -1
- package/dist/esm/post-popover.entry.js +1 -1
- package/dist/esm/post-rating.entry.js +1 -1
- package/dist/esm/post-stepper-item.entry.js +1 -1
- package/dist/esm/post-stepper.entry.js +1 -1
- package/dist/esm/post-tab-item.entry.js +1 -1
- package/dist/esm/post-tab-panel.entry.js +1 -1
- package/dist/esm/post-tabs.entry.js +1 -1
- package/dist/esm/post-tooltip-trigger.entry.js +1 -1
- package/dist/esm/post-tooltip.entry.js +1 -1
- package/dist/post-components/p-10c6b9f8.entry.js +1 -0
- package/dist/post-components/{p-3b6dcc38.entry.js → p-14c79a22.entry.js} +1 -1
- package/dist/post-components/{p-b0c36658.entry.js → p-2fdef7e4.entry.js} +1 -1
- package/dist/post-components/{p-0a76c979.entry.js → p-3964cd4a.entry.js} +1 -1
- package/dist/post-components/{p-92d66a15.entry.js → p-412c8217.entry.js} +1 -1
- package/dist/post-components/{p-da7c950f.entry.js → p-42fbf08e.entry.js} +1 -1
- package/dist/post-components/{p-7aad9f68.entry.js → p-5bc68b21.entry.js} +1 -1
- package/dist/post-components/{p-c90f26f6.entry.js → p-9bd9914b.entry.js} +1 -1
- package/dist/post-components/p-BzBcOfzl.js +1 -0
- package/dist/post-components/{p-76f197fd.entry.js → p-a0b438d5.entry.js} +1 -1
- package/dist/post-components/p-c6ed2b41.entry.js +1 -0
- package/dist/post-components/{p-f62429f0.entry.js → p-cac2f377.entry.js} +1 -1
- package/dist/post-components/{p-8d73b352.entry.js → p-d5996fe6.entry.js} +1 -1
- package/dist/post-components/{p-8760ec7c.entry.js → p-d90885ef.entry.js} +1 -1
- package/dist/post-components/{p-47d4a8eb.entry.js → p-df1a61e6.entry.js} +1 -1
- package/dist/post-components/{p-b54fe9b1.entry.js → p-e2a9c561.entry.js} +1 -1
- package/dist/post-components/{p-15abb76f.entry.js → p-e972c1ff.entry.js} +1 -1
- package/dist/post-components/{p-69d8b42f.entry.js → p-ecd9e81a.entry.js} +1 -1
- package/dist/post-components/{p-dbbd1f97.entry.js → p-ed634845.entry.js} +1 -1
- package/dist/post-components/{p-6bf3a582.entry.js → p-edb3d745.entry.js} +1 -1
- package/dist/post-components/{p-18808faa.entry.js → p-f6dc1ae3.entry.js} +1 -1
- package/dist/post-components/{p-8e935fb5.entry.js → p-fa268248.entry.js} +1 -1
- package/dist/post-components/{p-6e4b9414.entry.js → p-fd6e39db.entry.js} +1 -1
- package/dist/post-components/post-components.esm.js +1 -1
- package/dist/types/components/post-closebutton/post-closebutton.d.ts +12 -2
- package/dist/types/components/post-closebutton/types.d.ts +6 -0
- package/dist/types/components.d.ts +34 -14
- package/hydrate/index.js +37 -11
- package/hydrate/index.mjs +37 -11
- package/package.json +4 -4
- package/dist/collection/components/post-closebutton/button-types.js +0 -1
- package/dist/components/react/p-BIsI9uKb.js +0 -1
- package/dist/components/react/p-BedNtdrk.js +0 -1
- package/dist/components/react/p-DzmpoNOx.js +0 -1
- package/dist/esm/package-DzmpoNOx.js +0 -3
- package/dist/post-components/p-535cd139.entry.js +0 -1
- package/dist/post-components/p-92d166c6.entry.js +0 -1
- package/dist/post-components/p-DzmpoNOx.js +0 -1
- package/dist/types/components/post-closebutton/button-types.d.ts +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.btn{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6)}.btn:hover{text-decoration:none}.btn:disabled{border-style:var(--post-core-border-style-dash)}.btn{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(a){color:LinkText;border:unset}.btn:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.btn:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.btn:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.btn>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-primary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg);color:var(--post-scheme-color-interactive-button-primary-enabled-fg)}.btn-primary:disabled{border-color:var(--post-scheme-color-interactive-button-primary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-disabled-bg);color:var(--post-scheme-color-interactive-button-primary-disabled-fg)}.btn-primary:not(:disabled):hover,.btn-primary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);color:var(--post-scheme-color-interactive-button-primary-hover-fg)}.btn-default{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg)}.btn-default:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg)}.btn-default:not(:disabled):hover,.btn-default.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg);color:var(--post-scheme-color-interactive-button-secondary-hover-fg)}.btn-secondary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg)}.btn-secondary:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg)}.btn-secondary:not(:disabled):hover,.btn-secondary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg);color:var(--post-scheme-color-interactive-button-secondary-hover-fg)}.btn-tertiary{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-tertiary:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-tertiary:not(:disabled):hover,.btn-tertiary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-link{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-link:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-link:not(:disabled):hover,.btn-link.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-sm{min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7)}.btn-sm>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-lg{min-height:var(--post-device-sizing-interactive-button-height-2);gap:var(--post-device-spacing-gap-inline-1);padding:0 var(--post-device-spacing-padding-inline-5)}.btn-lg>post-icon{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-link{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border:0 none;border-radius:var(--post-device-border-radius-focus);min-height:0;font-size:inherit;font-weight:inherit;padding:0}.btn-link:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.btn-icon{padding:0;width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-height:0;vertical-align:text-bottom}.btn-icon>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon.btn-sm{padding:0;width:var(--post-device-sizing-interactive-button-height-4);height:var(--post-device-sizing-interactive-button-height-4);min-height:0;vertical-align:text-bottom}.btn-icon.btn-sm>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-lg{padding:0;width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);min-height:0;vertical-align:text-bottom}.btn-icon.btn-lg>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton[size=small] .btn{height:var(--post-device-sizing-interactive-button-height-7);width:var(--post-device-sizing-interactive-button-height-7)}post-closebutton:not([placement]),post-closebutton[placement=auto]{position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%)}post-closebutton .btn{background-color:var(--post-scheme-color-interactive-primary-enabled-bg1)}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg)}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import { version } from "../../../../package";
|
|
3
|
-
import { checkEmptyOrOneOf } from "../../utils/index";
|
|
4
|
-
import { BUTTON_TYPES } from "./
|
|
3
|
+
import { checkEmptyOrOneOf, checkRequiredAndOneOf } from "../../utils/index";
|
|
4
|
+
import { BUTTON_TYPES, PLACEMENT, SIZE } from "./types";
|
|
5
5
|
/**
|
|
6
6
|
* @slot default - Slot for placing visually hidden label in the close button.
|
|
7
7
|
*/
|
|
@@ -9,13 +9,27 @@ export class PostClosebutton {
|
|
|
9
9
|
constructor() {
|
|
10
10
|
this.mutationObserver = new MutationObserver(this.checkContent.bind(this));
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
12
|
+
* The "type" attribute used for the close button
|
|
13
13
|
*/
|
|
14
14
|
this.buttonType = 'button';
|
|
15
|
+
/**
|
|
16
|
+
* Defines whether the close button is positioned automatically by the component or left unpositioned for manual styling.
|
|
17
|
+
*/
|
|
18
|
+
this.placement = 'auto';
|
|
19
|
+
/**
|
|
20
|
+
* The size of the close button.
|
|
21
|
+
*/
|
|
22
|
+
this.size = 'default';
|
|
15
23
|
}
|
|
16
24
|
validateButtonType() {
|
|
17
25
|
checkEmptyOrOneOf(this, 'buttonType', BUTTON_TYPES);
|
|
18
26
|
}
|
|
27
|
+
validatePlacement() {
|
|
28
|
+
checkRequiredAndOneOf(this, 'placement', PLACEMENT);
|
|
29
|
+
}
|
|
30
|
+
validateSize() {
|
|
31
|
+
checkRequiredAndOneOf(this, 'size', SIZE);
|
|
32
|
+
}
|
|
19
33
|
componentDidLoad() {
|
|
20
34
|
this.checkContent();
|
|
21
35
|
}
|
|
@@ -33,12 +47,14 @@ export class PostClosebutton {
|
|
|
33
47
|
}
|
|
34
48
|
checkContent() {
|
|
35
49
|
this.validateButtonType();
|
|
50
|
+
this.validatePlacement();
|
|
51
|
+
this.validateSize();
|
|
36
52
|
if (!this.host.querySelector('.visually-hidden').textContent) {
|
|
37
53
|
console.error(`The \`${this.host.localName}\` component requires content for accessibility.`);
|
|
38
54
|
}
|
|
39
55
|
}
|
|
40
56
|
render() {
|
|
41
|
-
return (h(Host, { key: '
|
|
57
|
+
return (h(Host, { key: 'ae74db094a2b1de985564d3f7528f78a98fd7ce9', "data-version": version }, h("button", { key: '7bab137e2dab6b3b405f486c10b3bbfbecdebafa', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm" }, h("post-icon", { key: 'ed323a3c13211f234551957a498f678e18ff4f66', "aria-hidden": "true", name: "closex" }), h("span", { key: 'aad44b5c93d357fab3d7cf537f477abd7c89f9be', class: "visually-hidden" }, h("slot", { key: 'd8424ae25100fc673188e3c77f89abe95847a38a' })))));
|
|
42
58
|
}
|
|
43
59
|
static get is() { return "post-closebutton"; }
|
|
44
60
|
static get originalStyleUrls() {
|
|
@@ -62,8 +78,8 @@ export class PostClosebutton {
|
|
|
62
78
|
"references": {
|
|
63
79
|
"ButtonType": {
|
|
64
80
|
"location": "import",
|
|
65
|
-
"path": "./
|
|
66
|
-
"id": "src/components/post-closebutton/
|
|
81
|
+
"path": "./types",
|
|
82
|
+
"id": "src/components/post-closebutton/types.ts::ButtonType",
|
|
67
83
|
"referenceLocation": "ButtonType"
|
|
68
84
|
}
|
|
69
85
|
}
|
|
@@ -72,13 +88,67 @@ export class PostClosebutton {
|
|
|
72
88
|
"optional": true,
|
|
73
89
|
"docs": {
|
|
74
90
|
"tags": [],
|
|
75
|
-
"text": "
|
|
91
|
+
"text": "The \"type\" attribute used for the close button"
|
|
76
92
|
},
|
|
77
93
|
"getter": false,
|
|
78
94
|
"setter": false,
|
|
79
95
|
"reflect": false,
|
|
80
96
|
"attribute": "button-type",
|
|
81
97
|
"defaultValue": "'button'"
|
|
98
|
+
},
|
|
99
|
+
"placement": {
|
|
100
|
+
"type": "string",
|
|
101
|
+
"mutable": false,
|
|
102
|
+
"complexType": {
|
|
103
|
+
"original": "Placement",
|
|
104
|
+
"resolved": "\"auto\" | \"manual\"",
|
|
105
|
+
"references": {
|
|
106
|
+
"Placement": {
|
|
107
|
+
"location": "import",
|
|
108
|
+
"path": "./types",
|
|
109
|
+
"id": "src/components/post-closebutton/types.ts::Placement",
|
|
110
|
+
"referenceLocation": "Placement"
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
"required": false,
|
|
115
|
+
"optional": false,
|
|
116
|
+
"docs": {
|
|
117
|
+
"tags": [],
|
|
118
|
+
"text": "Defines whether the close button is positioned automatically by the component or left unpositioned for manual styling."
|
|
119
|
+
},
|
|
120
|
+
"getter": false,
|
|
121
|
+
"setter": false,
|
|
122
|
+
"reflect": true,
|
|
123
|
+
"attribute": "placement",
|
|
124
|
+
"defaultValue": "'auto'"
|
|
125
|
+
},
|
|
126
|
+
"size": {
|
|
127
|
+
"type": "string",
|
|
128
|
+
"mutable": false,
|
|
129
|
+
"complexType": {
|
|
130
|
+
"original": "Size",
|
|
131
|
+
"resolved": "\"default\" | \"small\"",
|
|
132
|
+
"references": {
|
|
133
|
+
"Size": {
|
|
134
|
+
"location": "import",
|
|
135
|
+
"path": "./types",
|
|
136
|
+
"id": "src/components/post-closebutton/types.ts::Size",
|
|
137
|
+
"referenceLocation": "Size"
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
"required": false,
|
|
142
|
+
"optional": false,
|
|
143
|
+
"docs": {
|
|
144
|
+
"tags": [],
|
|
145
|
+
"text": "The size of the close button."
|
|
146
|
+
},
|
|
147
|
+
"getter": false,
|
|
148
|
+
"setter": false,
|
|
149
|
+
"reflect": true,
|
|
150
|
+
"attribute": "size",
|
|
151
|
+
"defaultValue": "'default'"
|
|
82
152
|
}
|
|
83
153
|
};
|
|
84
154
|
}
|
|
@@ -87,6 +157,12 @@ export class PostClosebutton {
|
|
|
87
157
|
return [{
|
|
88
158
|
"propName": "buttonType",
|
|
89
159
|
"methodName": "validateButtonType"
|
|
160
|
+
}, {
|
|
161
|
+
"propName": "placement",
|
|
162
|
+
"methodName": "validatePlacement"
|
|
163
|
+
}, {
|
|
164
|
+
"propName": "size",
|
|
165
|
+
"methodName": "validateSize"
|
|
90
166
|
}];
|
|
91
167
|
}
|
|
92
168
|
}
|
|
@@ -38,10 +38,10 @@ export class PostCollapsible {
|
|
|
38
38
|
const isExpanded = this.isExpanded;
|
|
39
39
|
if (IS_BROWSER) {
|
|
40
40
|
const animation = isExpanded ? expand(this.host) : collapse(this.host);
|
|
41
|
+
this.postToggle.emit(isExpanded);
|
|
41
42
|
await animation.finished;
|
|
42
43
|
animation.commitStyles();
|
|
43
44
|
this.updateTriggers();
|
|
44
|
-
this.postToggle.emit(isExpanded);
|
|
45
45
|
}
|
|
46
46
|
return isExpanded;
|
|
47
47
|
}
|
|
@@ -53,7 +53,7 @@ export class PostCollapsible {
|
|
|
53
53
|
triggers.forEach(trigger => trigger.update());
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
|
-
return (h(Host, { key: '
|
|
56
|
+
return (h(Host, { key: 'd7937850db1db8346199da4ad80d8db2e305f32a', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: '36fbe680b15c4d39e28bcb2c245c52e79a8d8c83' })));
|
|
57
57
|
}
|
|
58
58
|
static get is() { return "post-collapsible"; }
|
|
59
59
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
*,::before,::after{box-sizing:border-box}.megadropdown{position:absolute;inset-inline:0;overflow-y:auto;background-color:#fafafa;box-shadow:var(--post-device-elevation-300)}@media screen and (min-width: 1024px){.megadropdown{z-index:-1;inset-block-start:100%}.megadropdown.slide-in{animation:slide-down 350ms forwards}.megadropdown.slide-out{animation:slide-up 350ms forwards}}@media screen and (max-width: 1023.98px){.megadropdown{z-index:1;inset-block-start:var(--post-header-navigation-current-inset);overscroll-behavior:contain}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{border-block-end:1px solid CanvasText}}.section{width:100%;max-width:var(--post-header-content-max-width);margin-inline:auto;position:relative}@media screen and (min-width: 1024px){.section{max-height:calc(100vh - var(--post-header-height) - 3rem);padding:
|
|
1
|
+
*,::before,::after{box-sizing:border-box}.megadropdown{position:absolute;inset-inline:0;overflow-y:auto;background-color:#fafafa;box-shadow:var(--post-device-elevation-300)}@media screen and (min-width: 1024px){.megadropdown{z-index:-1;inset-block-start:100%}.megadropdown.slide-in{animation:slide-down 350ms forwards}.megadropdown.slide-out{animation:slide-up 350ms forwards}}@media screen and (max-width: 1023.98px){.megadropdown{z-index:1;inset-block-start:var(--post-header-navigation-current-inset);overscroll-behavior:contain}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{border-block-end:1px solid CanvasText}}.section{width:100%;max-width:var(--post-header-content-max-width);margin-inline:auto;position:relative}@media screen and (min-width: 1024px){.section{max-height:calc(100vh - var(--post-header-height) - 3rem);padding:3rem 2.5rem 2.5rem}}@media screen and (max-width: 1023.98px){.section{display:flex;flex-direction:column;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));padding-inline:var(--post-burger-menu-padding-inline);padding-block:1.5rem}}.megadropdown-title{margin-block:0 1rem;font-weight:950}@media screen and (min-width: 600px)and (max-width: 1023.98px){.megadropdown-title{font-size:1.25rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.megadropdown-title{font-size:1.125rem}}.back-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);order:-1;width:fit-content;padding-inline:0}.back-button:hover{text-decoration:none}.back-button:disabled{border-style:var(--post-core-border-style-dash)}.back-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(a){color:LinkText;border:unset}.back-button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.back-button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.back-button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.back-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.back-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media screen and (min-width: 600px)and (max-width: 1023.98px){.back-button{margin-block-end:2rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.back-button{margin-block-end:1.5rem}}.close-button{position:absolute;inset-block-start:.5rem;inset-inline-end:.5rem}@media screen and (max-width: 1023.98px){.close-button{display:none}}
|
|
@@ -281,7 +281,7 @@ export class PostMegadropdown {
|
|
|
281
281
|
}
|
|
282
282
|
render() {
|
|
283
283
|
const containerStyle = this.isVisible ? {} : { display: 'none' };
|
|
284
|
-
return (h(Host, { key: '02194ee3593dd471e2fc3aadb1d69041d613ce0a', version: version }, h("div", { key: '77ab3faeb3705ac0d97ab0d72cc3fbf12c19badc', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, h("div", { key: '5d8b3ef651c3eb19f08e3ccd6c9356e01463a2e0', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: 'e99a5751ea896f3ab55dc9bf58635f7b2fef2a1c', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: 'a0a1bfa04de139d48c825df8fdb24f93e031ea66', class: "megadropdown-content" }, h("slot", { key: '68e44ce30fec1efed2855490b5d9af56ba41e004' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack))))));
|
|
284
|
+
return (h(Host, { key: '02194ee3593dd471e2fc3aadb1d69041d613ce0a', version: version }, h("div", { key: '77ab3faeb3705ac0d97ab0d72cc3fbf12c19badc', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, h("div", { key: '5d8b3ef651c3eb19f08e3ccd6c9356e01463a2e0', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: 'e99a5751ea896f3ab55dc9bf58635f7b2fef2a1c', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: 'a0a1bfa04de139d48c825df8fdb24f93e031ea66', class: "megadropdown-content" }, h("slot", { key: '68e44ce30fec1efed2855490b5d9af56ba41e004' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack))))));
|
|
285
285
|
}
|
|
286
286
|
static get is() { return "post-megadropdown"; }
|
|
287
287
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const t="10.0.0-next.
|
|
1
|
+
const t="10.0.0-next.60";export{t as v}
|