wcs-core 7.1.0 → 7.2.0

package/dist/wcs/{p-a7891233.entry.js → p-3a18535f.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,H as c}from"./p-32e583ea.js";const a=":host{--wcs-field-label-color:var(--wcs-semantic-color-text-secondary);--wcs-field-label-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-field-label-font-size:var(--wcs-semantic-font-size-body-3);--wcs-field-label-line-height:var(--wcs-semantic-font-line-height-large);--wcs-field-content-color:var(--wcs-semantic-color-text-secondary);--wcs-field-content-font-weight:var(--wcs-semantic-font-weight-book);--wcs-field-content-font-size:var(--wcs-semantic-font-size-body-3);--wcs-field-content-line-height:var(--wcs-semantic-font-line-height-medium);--wcs-field-margin-top:var(--wcs-semantic-spacing-base);--wcs-field-margin-bottom:var(--wcs-semantic-spacing-large);--wcs-field-gap:var(--wcs-semantic-spacing-small);display:flex;flex-direction:column;margin-top:var(--wcs-field-margin-top);margin-bottom:var(--wcs-field-margin-bottom);gap:var(--wcs-field-gap)}::slotted([slot=label]){color:var(--wcs-field-label-color);font-weight:var(--wcs-field-label-font-weight);font-size:var(--wcs-field-label-font-size);line-height:var(--wcs-field-label-line-height)}::slotted([slot=content]){color:var(--wcs-field-content-color);font-weight:var(--wcs-field-content-font-weight);font-size:var(--wcs-field-content-font-size);line-height:var(--wcs-field-content-line-height)}";const i=a;const s=class{constructor(t){e(this,t)}render(){return t(c,{key:"fb2c8c01280829e581dda580158aa646771324d0"},t("slot",{key:"26ad71454a94463bc4f0b9c32ad7b9a1cca72196",name:"label"}),t("slot",{key:"2bb5c1c03c3e26e07cc6da22b20a581b7fb4a4aa",name:"content"}))}};s.style=i;export{s as wcs_field};
-//# sourceMappingURL=p-a7891233.entry.js.map
+import{r as e,h as t,H as c}from"./p-32e583ea.js";const i=":host{--wcs-field-label-color:var(--wcs-semantic-color-text-secondary);--wcs-field-label-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-field-label-font-size:var(--wcs-semantic-font-size-body-3);--wcs-field-label-line-height:var(--wcs-semantic-font-line-height-large);--wcs-field-content-color:var(--wcs-semantic-color-text-secondary);--wcs-field-content-font-weight:var(--wcs-semantic-font-weight-book);--wcs-field-content-font-size:var(--wcs-semantic-font-size-body-3);--wcs-field-content-line-height:var(--wcs-semantic-font-line-height-medium);--wcs-field-margin-top:var(--wcs-semantic-spacing-base);--wcs-field-margin-bottom:var(--wcs-semantic-spacing-large);--wcs-field-gap:var(--wcs-semantic-spacing-small);display:flex;flex-direction:column;margin-top:var(--wcs-field-margin-top);margin-bottom:var(--wcs-field-margin-bottom);gap:var(--wcs-field-gap)}::slotted([slot=label]){color:var(--wcs-field-label-color);font-weight:var(--wcs-field-label-font-weight);font-size:var(--wcs-field-label-font-size);line-height:var(--wcs-field-label-line-height)}::slotted([slot=content]){color:var(--wcs-field-content-color);font-weight:var(--wcs-field-content-font-weight);font-size:var(--wcs-field-content-font-size);line-height:var(--wcs-field-content-line-height)}";const a=i;const s=class{constructor(t){e(this,t)}render(){return t(c,{key:"ae0a6c7224dc199cd6cd342d77878bfff17aa49b"},t("slot",{key:"408c146f3e6bfa1868964a29934494215627fb59",name:"label"}),t("slot",{key:"9c2151491f6acc4a5a6da36676e21e8dee6f156a",name:"content"}))}};s.style=a;export{s as wcs_field};
+//# sourceMappingURL=p-3a18535f.entry.js.map

package/dist/wcs/p-41b946b2.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as c}from"./p-32e583ea.js";const r=":host{--wcs-badge-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-badge-height-l:calc(4 * var(--wcs-semantic-size-base));--wcs-badge-font-size-l:var(--wcs-semantic-font-size-label-1);--wcs-badge-height-m:calc(3 * var(--wcs-semantic-size-base));--wcs-badge-font-size-m:var(--wcs-semantic-font-size-label-2);--wcs-badge-height-s:calc(2.5 * var(--wcs-semantic-size-base));--wcs-badge-font-size-s:var(--wcs-semantic-font-size-label-3);--wcs-badge-border-radius-default:var(--wcs-semantic-border-radius-base);--wcs-badge-border-radius-circular:var(--wcs-semantic-border-radius-full);--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse);--wcs-badge-padding-horizontal-l:var(--wcs-semantic-spacing-base);--wcs-badge-padding-horizontal-m:var(--wcs-semantic-spacing-base);--wcs-badge-padding-horizontal-s:calc(0.75 * var(--wcs-semantic-spacing-base));--wcs-badge-height:var(--wcs-badge-height-m);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-base) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-m);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-m);display:inline-flex;gap:var(--wcs-badge-gap);padding:0 var(--wcs-badge-padding-horizontal);height:var(--wcs-badge-height);inline-size:fit-content;font-size:var(--wcs-badge-font-size);box-sizing:border-box;font-weight:var(--wcs-badge-font-weight);line-height:1;text-align:center;align-content:center;align-items:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--wcs-badge-border-radius-default);color:var(--wcs-badge-color);background-color:var(--wcs-badge-background-color)}:host([color=lighter]){--wcs-badge-color:var(--wcs-badge-color-lighter) !important;--wcs-badge-background-color:var(--wcs-badge-background-color-lighter) !important}:host([shape=rounded]){border-radius:var(--wcs-badge-border-radius-circular)}:host([size=l]){--wcs-badge-height:var(--wcs-badge-height-l);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-large) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-l);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-l)}:host([size=m]){--wcs-badge-height:var(--wcs-badge-height-m);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-base) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-m);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-m)}:host([size=s]){--wcs-badge-height:var(--wcs-badge-height-s);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-small) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-s);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-s)}:host(.wcs-secondary){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-secondary);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-success){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-success-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-success-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-info){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-information-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-information-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-warning){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-warning-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-warning-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-inverse);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-critical),:host(.wcs-danger){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-critical-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-critical-lightest);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-critical)}";const e=r;const s=class{constructor(c){a(this,c);this.shape="normal";this.color="initial";this.size="m"}render(){return c("slot",{key:"6d9646b28344f4d1f05a3efaf798a6273252a8bf"})}};s.style=e;export{s as wcs_badge};
+//# sourceMappingURL=p-41b946b2.entry.js.map

package/dist/wcs/p-41b946b2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["badgeCss","WcsBadgeStyle0","Badge","render","h","key"],"sources":["src/components/badge/badge.scss?tag=wcs-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":[":host {\n    --wcs-badge-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-badge-height-l: calc(4 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-l: var(--wcs-semantic-font-size-label-1);\n    --wcs-badge-height-m: calc(3 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-m: var(--wcs-semantic-font-size-label-2);\n    --wcs-badge-height-s: calc(2.5 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-s: var(--wcs-semantic-font-size-label-3);\n\n    --wcs-badge-border-radius-default: var(--wcs-semantic-border-radius-base);\n    --wcs-badge-border-radius-circular: var(--wcs-semantic-border-radius-full);\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-brand);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n    --wcs-badge-padding-horizontal-l: var(--wcs-semantic-spacing-base);\n    --wcs-badge-padding-horizontal-m: var(--wcs-semantic-spacing-base);\n    --wcs-badge-padding-horizontal-s: calc(0.75 * var(--wcs-semantic-spacing-base));\n\n    // Default\n    --wcs-badge-height: var(--wcs-badge-height-m);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-base) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-m);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-m);\n\n    display: inline-flex;\n    gap: var(--wcs-badge-gap);\n    padding: 0 var(--wcs-badge-padding-horizontal);\n    height: var(--wcs-badge-height);\n    inline-size: fit-content;\n    font-size: var(--wcs-badge-font-size);\n    box-sizing: border-box;\n    font-weight: var(--wcs-badge-font-weight);\n    line-height: 1;\n    text-align: center;\n    align-content: center;\n    align-items: center;\n    white-space: nowrap;\n    vertical-align: baseline;\n    border-radius: var(--wcs-badge-border-radius-default);\n    color: var(--wcs-badge-color);\n    background-color: var(--wcs-badge-background-color);\n}\n\n:host([color=lighter]) {\n    --wcs-badge-color: var(--wcs-badge-color-lighter) !important;\n    --wcs-badge-background-color: var(--wcs-badge-background-color-lighter) !important;\n}\n\n:host([shape=rounded]){\n    border-radius: var(--wcs-badge-border-radius-circular);\n}\n\n:host([size=l]) {\n    --wcs-badge-height: var(--wcs-badge-height-l);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-large) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-l);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-l);\n}\n\n:host([size=m]) { // Default\n    --wcs-badge-height: var(--wcs-badge-height-m);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-base) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-m);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-m);\n}\n\n:host([size=s]) {\n    --wcs-badge-height: var(--wcs-badge-height-s);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-small) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-s);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-s);\n}\n\n\n/* Color variants */\n\n:host(.wcs-secondary) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-secondary);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-success) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-success-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-success-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-info) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-information-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-information-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-warning) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-warning-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-warning-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-inverse);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-critical), :host(.wcs-danger) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-critical-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-critical-lightest);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-critical);\n}\n","import { Component, ComponentInterface, h, Prop } from '@stencil/core';\nimport { BadgeColor, BadgeShape, BadgeSize } from './badge-interface';\n\n/**\n * The badge component is a small label, generally appearing inside or in proximity to another larger interface component,\n * representing a status, property, or some other metadata.  \n *\n * @cssprop --wcs-badge-font-weight - Define the font weight of the badge\n * @cssprop --wcs-badge-height-l - Large height of the badge\n * @cssprop --wcs-badge-font-size-l - Large font size of the badge\n * @cssprop --wcs-badge-height-m - Medium height of the badge\n * @cssprop --wcs-badge-font-size-m - Font size of the badge\n * @cssprop --wcs-badge-height-s - Small height of the badge\n * @cssprop --wcs-badge-font-size-s - Small font size of the badge\n * @cssprop --wcs-badge-border-radius-default - Default border radius of the badge\n * @cssprop --wcs-badge-border-radius-circular - Circular border radius of the badge\n * \n * @cssprop --wcs-badge-background-color - Background color of the badge\n * @cssprop --wcs-badge-background-color-lighter - Background color of the lighter badge\n * @cssprop --wcs-badge-color - Text color of the badge\n * @cssprop --wcs-badge-color-lighter - Text color of the lighter badge\n * @cssporp --wcs-badge-gap - The gap inside the badge\n * \n * @cssprop --wcs-badge-padding-horizontal-l - Horizontal padding of the size L badge\n * @cssprop --wcs-badge-padding-horizontal-m - Horizontal padding of the size M badge\n * @cssprop --wcs-badge-padding-horizontal-s - Horizontal padding of the size S badge\n */\n@Component({\n    tag: 'wcs-badge',\n    styleUrl: 'badge.scss',\n    shadow: true\n})\nexport class Badge implements ComponentInterface {\n    /**\n     * Define the shape of the badge\n     */\n    @Prop() shape: BadgeShape = 'normal';\n    /**\n     * Allows you to change the color of the badge to make it less bright (based on the color chosen by the CSS class).\n     */\n    @Prop() color: BadgeColor = 'initial';\n\n    /**\n     * Specify the size of the badge.\n     */\n    @Prop({ reflect: true }) size: BadgeSize = 'm';\n\n    render() {\n        return (\n            <slot/>\n        );\n    }\n}\n"],"mappings":"2CAAA,MAAMA,EAAW,y6IACjB,MAAAC,EAAeD,E,MC+BFE,EAAK,M,oCAIc,S,WAIA,U,UAKe,G,CAE3C,MAAAC,GACI,OACIC,EAAA,QAAAC,IAAA,4C"}

package/dist/wcs/{p-4661290b.entry.js → p-496115a5.entry.js}

@@ -1,2 +1,2 @@
-import{r as a,h as t,H as c,g as s}from"./p-32e583ea.js";const e=":host{--wcs-action-bar-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-action-bar-gap:var(--wcs-semantic-spacing-small);--wcs-action-bar-gap-actions:calc(4 * var(--wcs-semantic-spacing-base));--wcs-action-bar-min-height:calc(10 * var(--wcs-semantic-size-base));--wcs-action-bar-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-action-bar-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-action-bar-tabs-margin-top:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-action-bar-title-font-size:var(--wcs-semantic-font-size-heading-4);--wcs-action-bar-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-action-bar-title-color:var(--wcs-semantic-color-text-primary);--wcs-tabs-gutter-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-gutter-background-color:var(--wcs-semantic-color-border-secondary);padding:0 var(--wcs-action-bar-padding-horizontal);min-height:var(--wcs-action-bar-min-height);background-color:var(--wcs-action-bar-background-color);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--wcs-action-bar-gap)}:host .title-actions{padding-top:var(--wcs-action-bar-padding-vertical);padding-bottom:var(--wcs-action-bar-padding-vertical);gap:var(--wcs-action-bar-gap-actions);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex-grow:1}:host .title-actions[data-has-tabs]{padding-bottom:0}:host h1{font-size:var(--wcs-action-bar-title-font-size);font-weight:var(--wcs-action-bar-title-font-weight);line-height:1.25;margin:0;color:var(--wcs-action-bar-title-color)}:host([gutter]){border-bottom:solid var(--wcs-tabs-gutter-border-width) var(--wcs-tabs-gutter-background-color)}::slotted([slot=actions]){display:flex}::slotted([slot=tabs]){margin-top:var(--wcs-action-bar-tabs-margin-top)}";const i=e;const o=class{constructor(t){a(this,t);this.gutter=undefined;this.hasTabs=false}componentWillLoad(){this.hasTabs=!!this.el.querySelector('[slot="tabs"]')}render(){return t(c,{key:"d67394521e0f511ce6c4632ff2ac177920cee7f6"},t("div",{key:"15e01e65524923776ff1e9a793a84ca395fc9cb6",class:"title-actions","data-has-tabs":this.hasTabs},t("h1",{key:"9b260476e27f3702402fccd690f1481cd2b6937a"},t("slot",{key:"8610b80130c93f2f3b1bbd987d9c3eb8044389ae"})),t("div",{key:"4b8b05c7331d1de0ac889c475de8a675cb4ab96d",class:"actions"},t("slot",{key:"129ffb87ce43f64a6793606ae5fbca423270bc9f",name:"actions"}))),t("div",{key:"21f236bd1e8cce919d2410f2865531dc85973079",class:"tabs-container"},t("slot",{key:"4d137643a6576ee3d34d32dd38e63952ecb9171e",name:"tabs"})))}get el(){return s(this)}};o.style=i;export{o as wcs_action_bar};
-//# sourceMappingURL=p-4661290b.entry.js.map
+import{r as a,h as t,H as c,g as s}from"./p-32e583ea.js";const i=":host{--wcs-action-bar-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-action-bar-gap:var(--wcs-semantic-spacing-small);--wcs-action-bar-gap-actions:calc(4 * var(--wcs-semantic-spacing-base));--wcs-action-bar-min-height:calc(10 * var(--wcs-semantic-size-base));--wcs-action-bar-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-action-bar-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-action-bar-tabs-margin-top:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-action-bar-title-font-size:var(--wcs-semantic-font-size-heading-4);--wcs-action-bar-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-action-bar-title-color:var(--wcs-semantic-color-text-primary);--wcs-tabs-gutter-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-gutter-background-color:var(--wcs-semantic-color-border-secondary);padding:0 var(--wcs-action-bar-padding-horizontal);min-height:var(--wcs-action-bar-min-height);background-color:var(--wcs-action-bar-background-color);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--wcs-action-bar-gap)}:host .title-actions{padding-top:var(--wcs-action-bar-padding-vertical);padding-bottom:var(--wcs-action-bar-padding-vertical);gap:var(--wcs-action-bar-gap-actions);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex-grow:1}:host .title-actions[data-has-tabs]{padding-bottom:0}:host h1{font-size:var(--wcs-action-bar-title-font-size);font-weight:var(--wcs-action-bar-title-font-weight);line-height:1.25;margin:0;color:var(--wcs-action-bar-title-color)}:host([gutter]){border-bottom:solid var(--wcs-tabs-gutter-border-width) var(--wcs-tabs-gutter-background-color)}::slotted([slot=actions]){display:flex}::slotted([slot=tabs]){margin-top:var(--wcs-action-bar-tabs-margin-top)}";const e=i;const o=class{constructor(t){a(this,t);this.gutter=undefined;this.hasTabs=false}componentWillLoad(){this.hasTabs=!!this.el.querySelector('[slot="tabs"]')}render(){return t(c,{key:"4312c81132be4f4db1205a5f0bfae699c26e6436"},t("div",{key:"746da3288b2092209451cf9014d5b5374bc36d70",class:"title-actions","data-has-tabs":this.hasTabs},t("h1",{key:"e143ac0afe1fe76f2760859ba700d432d9d5756d"},t("slot",{key:"f5b7269692fd481a0d9fbc0e873580adfe9d6cc1"})),t("div",{key:"0ef5d4aca6cc88c96d541cd391e04a31ead116ee",class:"actions"},t("slot",{key:"05364550979377548c2e4c97a21f3b52b27b457f",name:"actions"}))),t("div",{key:"613a7c98d9e9777f900e634500e541860a242fbc",class:"tabs-container"},t("slot",{key:"35b753163a40381873e8fb07eb13fef58c0bcda6",name:"tabs"})))}get el(){return s(this)}};o.style=e;export{o as wcs_action_bar};
+//# sourceMappingURL=p-496115a5.entry.js.map

package/dist/wcs/{p-4661290b.entry.js.map → p-496115a5.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["actionBarCss","WcsActionBarStyle0","ActionBar","componentWillLoad","this","hasTabs","el","querySelector","render","h","Host","key","class","name"],"sources":["src/components/action-bar/action-bar.scss?tag=wcs-action-bar&encapsulation=shadow","src/components/action-bar/action-bar.tsx"],"sourcesContent":[":host {\n    --wcs-action-bar-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-action-bar-gap: var(--wcs-semantic-spacing-small);\n    --wcs-action-bar-gap-actions: calc(4 * var(--wcs-semantic-spacing-base));\n    --wcs-action-bar-min-height: calc(10 * var(--wcs-semantic-size-base));\n    --wcs-action-bar-padding-horizontal: var(--wcs-semantic-spacing-large);\n    --wcs-action-bar-padding-vertical: var(--wcs-semantic-spacing-base);\n\n    --wcs-action-bar-tabs-margin-top: calc(1.5 * var(--wcs-semantic-spacing-base));\n\n    --wcs-action-bar-title-font-size: var(--wcs-semantic-font-size-heading-4);\n    --wcs-action-bar-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-action-bar-title-color: var(--wcs-semantic-color-text-primary);\n\n    --wcs-tabs-gutter-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-tabs-gutter-background-color: var(--wcs-semantic-color-border-secondary);\n\n    padding: 0 var(--wcs-action-bar-padding-horizontal);\n    min-height: var(--wcs-action-bar-min-height);\n    background-color: var(--wcs-action-bar-background-color);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-action-bar-gap);\n\n    .title-actions {\n        padding-top: var(--wcs-action-bar-padding-vertical);\n        padding-bottom: var(--wcs-action-bar-padding-vertical);\n        gap: var(--wcs-action-bar-gap-actions);\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        justify-content: space-between;\n        flex-grow: 1;\n    }\n\n    .title-actions[data-has-tabs] {\n        padding-bottom: 0;\n    }\n\n    h1 {\n        font-size: var(--wcs-action-bar-title-font-size);\n        font-weight: var(--wcs-action-bar-title-font-weight);\n        line-height: 1.25;\n        margin: 0;\n        color: var(--wcs-action-bar-title-color);\n    }\n}\n\n:host([gutter]) {\n    border-bottom: solid var(--wcs-tabs-gutter-border-width) var(--wcs-tabs-gutter-background-color);\n}\n\n::slotted([slot=actions]) {\n    display: flex;\n}\n\n::slotted([slot=tabs]) {\n    margin-top: var(--wcs-action-bar-tabs-margin-top);\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * The action-bar component is a group of elements appearing across the top of all pages on a business application.\n * \n * @cssprop --wcs-action-bar-background-color - Background color of the action bar\n * @cssprop --wcs-action-bar-gap - Gap between the title and the tabs\n * @cssprop --wcs-action-bar-gap-actions - Gap between the title and the actions\n * @cssprop --wcs-action-bar-min-height - Minimum height of the action bar\n * @cssprop --wcs-action-bar-padding-horizontal - Horizontal padding of the action bar\n * @cssprop --wcs-action-bar-padding-vertical - Vertical padding of the action bar\n * @cssprop --wcs-action-bar-tabs-margin-top - Margin top of the tabs when slotted\n * @cssprop --wcs-action-bar-title-font-size - Font size of the title\n * @cssprop --wcs-action-bar-title-font-weight - Font weight of the title\n * @cssprop --wcs-action-bar-title-color - Color of the title\n * @cssprop --wcs-tabs-gutter-border-width - Border width of the gutter\n * @cssprop --wcs-tabs-gutter-background-color - Background color of the gutter\n */\n@Component({\n    tag: 'wcs-action-bar',\n    styleUrl: 'action-bar.scss',\n    shadow: true\n})\nexport class ActionBar implements ComponentInterface {\n    @Element() private el: HTMLWcsActionBarElement;\n    /**\n     * Determines if the action bar should have a border at the bottom.\n     * You should not use this property if a gutter is already present on tabs\n     */\n    @Prop({ reflect: true }) gutter: boolean;\n    @State() private hasTabs = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.hasTabs = !!this.el.querySelector('[slot=\"tabs\"]');\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"title-actions\" data-has-tabs={this.hasTabs}>\n                    <h1>\n                        <slot></slot>\n                    </h1>\n                    <div class=\"actions\">\n                        <slot name=\"actions\"></slot>\n                    </div>\n                </div>\n                <div class=\"tabs-container\">\n                    <slot name=\"tabs\"></slot>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,qxDACrB,MAAAC,EAAeD,E,MCsBFE,EAAS,M,4DAOS,K,CAE3B,iBAAAC,GACIC,KAAKC,UAAYD,KAAKE,GAAGC,cAAc,gB,CAG3C,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBAAe,gBAAgBR,KAAKC,SAC3CI,EAAA,MAAAE,IAAA,4CACIF,EAAA,QAAAE,IAAA,8CAEJF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACPH,EAAA,QAAAE,IAAA,2CAAME,KAAK,cAGnBJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACPH,EAAA,QAAAE,IAAA,2CAAME,KAAK,U"}
+{"version":3,"names":["actionBarCss","WcsActionBarStyle0","ActionBar","componentWillLoad","this","hasTabs","el","querySelector","render","h","Host","key","class","name"],"sources":["src/components/action-bar/action-bar.scss?tag=wcs-action-bar&encapsulation=shadow","src/components/action-bar/action-bar.tsx"],"sourcesContent":[":host {\n    --wcs-action-bar-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-action-bar-gap: var(--wcs-semantic-spacing-small);\n    --wcs-action-bar-gap-actions: calc(4 * var(--wcs-semantic-spacing-base));\n    --wcs-action-bar-min-height: calc(10 * var(--wcs-semantic-size-base));\n    --wcs-action-bar-padding-horizontal: var(--wcs-semantic-spacing-large);\n    --wcs-action-bar-padding-vertical: var(--wcs-semantic-spacing-base);\n\n    --wcs-action-bar-tabs-margin-top: calc(1.5 * var(--wcs-semantic-spacing-base));\n\n    --wcs-action-bar-title-font-size: var(--wcs-semantic-font-size-heading-4);\n    --wcs-action-bar-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-action-bar-title-color: var(--wcs-semantic-color-text-primary);\n\n    --wcs-tabs-gutter-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-tabs-gutter-background-color: var(--wcs-semantic-color-border-secondary);\n\n    padding: 0 var(--wcs-action-bar-padding-horizontal);\n    min-height: var(--wcs-action-bar-min-height);\n    background-color: var(--wcs-action-bar-background-color);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-action-bar-gap);\n\n    .title-actions {\n        padding-top: var(--wcs-action-bar-padding-vertical);\n        padding-bottom: var(--wcs-action-bar-padding-vertical);\n        gap: var(--wcs-action-bar-gap-actions);\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        justify-content: space-between;\n        flex-grow: 1;\n    }\n\n    .title-actions[data-has-tabs] {\n        padding-bottom: 0;\n    }\n\n    h1 {\n        font-size: var(--wcs-action-bar-title-font-size);\n        font-weight: var(--wcs-action-bar-title-font-weight);\n        line-height: 1.25;\n        margin: 0;\n        color: var(--wcs-action-bar-title-color);\n    }\n}\n\n:host([gutter]) {\n    border-bottom: solid var(--wcs-tabs-gutter-border-width) var(--wcs-tabs-gutter-background-color);\n}\n\n::slotted([slot=actions]) {\n    display: flex;\n}\n\n::slotted([slot=tabs]) {\n    margin-top: var(--wcs-action-bar-tabs-margin-top);\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * The action-bar component is a group of elements appearing across the top of all pages on a business application.\n * \n * @cssprop --wcs-action-bar-background-color - Background color of the action bar\n * @cssprop --wcs-action-bar-gap - Gap between the title and the tabs\n * @cssprop --wcs-action-bar-gap-actions - Gap between the title and the actions\n * @cssprop --wcs-action-bar-min-height - Minimum height of the action bar\n * @cssprop --wcs-action-bar-padding-horizontal - Horizontal padding of the action bar\n * @cssprop --wcs-action-bar-padding-vertical - Vertical padding of the action bar\n * @cssprop --wcs-action-bar-tabs-margin-top - Margin top of the tabs when slotted\n * @cssprop --wcs-action-bar-title-font-size - Font size of the title\n * @cssprop --wcs-action-bar-title-font-weight - Font weight of the title\n * @cssprop --wcs-action-bar-title-color - Color of the title\n * @cssprop --wcs-tabs-gutter-border-width - Border width of the gutter\n * @cssprop --wcs-tabs-gutter-background-color - Background color of the gutter\n */\n@Component({\n    tag: 'wcs-action-bar',\n    styleUrl: 'action-bar.scss',\n    shadow: true\n})\nexport class ActionBar implements ComponentInterface {\n    @Element() private el: HTMLWcsActionBarElement;\n    /**\n     * Determines if the action bar should have a border at the bottom.\n     * You should not use this property if a gutter is already present on tabs\n     */\n    @Prop({ reflect: true }) gutter: boolean;\n    @State() private hasTabs: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.hasTabs = !!this.el.querySelector('[slot=\"tabs\"]');\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"title-actions\" data-has-tabs={this.hasTabs}>\n                    <h1>\n                        <slot></slot>\n                    </h1>\n                    <div class=\"actions\">\n                        <slot name=\"actions\"></slot>\n                    </div>\n                </div>\n                <div class=\"tabs-container\">\n                    <slot name=\"tabs\"></slot>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,qxDACrB,MAAAC,EAAeD,E,MCsBFE,EAAS,M,4DAOkB,K,CAEpC,iBAAAC,GACIC,KAAKC,UAAYD,KAAKE,GAAGC,cAAc,gB,CAG3C,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBAAe,gBAAgBR,KAAKC,SAC3CI,EAAA,MAAAE,IAAA,4CACIF,EAAA,QAAAE,IAAA,8CAEJF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACPH,EAAA,QAAAE,IAAA,2CAAME,KAAK,cAGnBJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACPH,EAAA,QAAAE,IAAA,2CAAME,KAAK,U"}

package/dist/wcs/p-4fb2d985.entry.js

@@ -0,0 +1,2 @@
+import{r as c,c as e,h as o,H as r,g as t}from"./p-32e583ea.js";import{i as a,a as s,s as i}from"./p-52d77e1f.js";import{g as n}from"./p-a7468a3a.js";const d=':host{--wcs-checkbox-border-color:var(--wcs-checkbox-border-color-default);--wcs-checkbox-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-checkbox-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-checkbox-border-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-checkbox-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-checkbox-border-color-indeterminate:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-checkbox-border-radius:calc(0.5 * var(--wcs-semantic-size-base));--wcs-checkbox-border-width:var(--wcs-semantic-border-width-large);--wcs-checkbox-size:calc(2 * var(--wcs-semantic-size-base));--wcs-checkbox-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-checkbox-text-color-disabled:var(--wcs-semantic-color-text-tertiary);--wcs-checkbox-text-color-hover:var(--wcs-semantic-color-text-secondary);--wcs-checkbox-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-checkbox-text-font-size:var(--wcs-semantic-font-size-label-1);--wcs-checkbox-text-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-checkbox-background-color-default:transparent;--wcs-checkbox-background-color-hover:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-checkbox-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-checkbox-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-checkbox-background-color-indeterminate:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-checkbox-outline-radius-focus:var(--wcs-semantic-border-radius-base);--wcs-checkbox-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-checkbox-gap:var(--wcs-semantic-spacing-base);--wcs-checkmark-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-checkmark-height:0.5rem;--wcs-checkmark-width:0.1875rem;--wcs-checkmark-border-width:0.125rem;--wcs-indeterminate-bar-width:0.625rem;--wcs-indeterminate-bar-height:0.125rem;--wcs-indeterminate-bar-border-radius:0.0625rem;--wcs-indeterminate-bar-background-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-checkbox-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:inline-flex}:host([disabled]) .text{color:var(--wcs-checkbox-text-color-disabled)}:host([disabled]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-disabled)}:host([disabled]) .wcs-container{cursor:not-allowed}:host([checked]:not([indeterminate][disabled])){--wcs-checkbox-border-color:var(--wcs-checkbox-border-color-selected)}.wcs-checkmark{transition-property:border-color, background-color, color;transition:var(--wcs-checkbox-transition-duration) ease-in-out}.wcs-container{position:relative;font-size:var(--wcs-checkbox-text-font-size);font-weight:var(--wcs-checkbox-text-font-weight);user-select:none;display:flex;gap:var(--wcs-checkbox-gap)}.wcs-container:not([aria-disabled]){cursor:pointer}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.wcs-container:hover:not([aria-disabled]) .text,input:focus .text{color:var(--wcs-checkbox-text-color-hover)}.wcs-container:hover:not([aria-disabled]) .wcs-checkmark,input:focus .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-hover)}.wcs-container:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-checkbox-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-checkbox-outline-radius-focus)}@supports not selector(.wcs-container:has(input:focus-visible)){.wcs-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-checkbox-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-checkbox-outline-radius-focus)}}.wcs-checkmark{flex:0 0 var(--wcs-checkbox-size);width:var(--wcs-checkbox-size);height:var(--wcs-checkbox-size);background-color:var(--wcs-checkbox-background-color-default);border:var(--wcs-checkbox-border-width) solid var(--wcs-checkbox-border-color);border-radius:var(--wcs-checkbox-border-radius);box-sizing:border-box}:host([indeterminate]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-indeterminate);background:var(--wcs-checkbox-background-color-indeterminate)}:host([indeterminate][disabled]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-disabled);background:var(--wcs-checkbox-background-color-disabled)}.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark{background-color:var(--wcs-checkbox-background-color-selected)}.wcs-container[aria-disabled] input:checked~.wcs-checkmark{background-color:var(--wcs-checkbox-background-color-disabled)}.wcs-checkmark:after{content:"";position:absolute;display:none}.wcs-checkmark{position:relative}:host([checked]),:host([indeterminate]){}:host([checked]) .wcs-container input~.wcs-checkmark:after,:host([indeterminate]) .wcs-container input~.wcs-checkmark:after{display:flex}:host([checked]) .wcs-container:not([aria-disabled]):hover .wcs-checkmark,:host([indeterminate]) .wcs-container:not([aria-disabled]):hover .wcs-checkmark{background-color:var(--wcs-checkbox-background-color-hover)}:host(:not([indeterminate])){}:host(:not([indeterminate])) .wcs-container .wcs-checkmark:after{left:0.25rem;width:var(--wcs-checkmark-width);height:var(--wcs-checkmark-height);border:solid var(--wcs-checkmark-color, white);border-width:0 var(--wcs-checkmark-border-width) var(--wcs-checkmark-border-width) 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}:host([indeterminate]) .wcs-container .wcs-checkmark:after{position:absolute;background-color:var(--wcs-indeterminate-bar-background-color);left:calc(50% - var(--wcs-indeterminate-bar-width) / 2);top:calc(50% - var(--wcs-indeterminate-bar-height) / 2);width:var(--wcs-indeterminate-bar-width);height:var(--wcs-indeterminate-bar-height);border-radius:var(--wcs-indeterminate-bar-border-radius)}.wcs-container:not([aria-disabled]) input:not(:checked)~.text{color:var(--wcs-checkbox-text-color-default);font-weight:var(--wcs-checkbox-text-font-weight)}.wcs-container:not([aria-disabled]) input:checked~.text{color:var(--wcs-checkbox-text-color-selected);font-weight:var(--wcs-checkbox-text-font-weight)}.hidden{display:none}';const h=d;const l=["tabindex","title"];const b=class{constructor(o){c(this,o);this.wcsChange=e(this,"wcsChange",7);this.wcsFocus=e(this,"wcsFocus",7);this.wcsBlur=e(this,"wcsBlur",7);this.inheritedAttributes={};this.checkboxId=`wcs-checkbox-${w++}`;this.name=this.checkboxId;this.indeterminate=false;this.checked=false;this.labelAlignment="center";this.disabled=false}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),s(this.el,l))}componentDidLoad(){this.onSlotChange()}async setAriaAttribute(c,e){i(this.nativeInput,c,e)}async getLabel(){return n(this.el)}handleChange(c){c.stopImmediatePropagation();c.preventDefault();this.toggleCheckboxState()}async handleHostClick(c){c.preventDefault();c.stopPropagation();this.toggleCheckboxState()}handleInputClick(c){if(c.detail){c.stopImmediatePropagation();c.preventDefault()}}toggleCheckboxState(){if(this.disabled)return;this.indeterminate=false;this.checked=!this.checked;this.wcsChange.emit({checked:this.checked})}handleFocus(c){this.wcsFocus.emit(c)}handleBlur(c){this.wcsBlur.emit(c)}onSlotChange(){const c=this.el.shadowRoot.querySelector("slot");if(c){const e=c.assignedNodes();if(e.length>0){this.el.shadowRoot.querySelector(".text").classList.remove("hidden")}else{this.el.shadowRoot.querySelector(".text").classList.add("hidden")}}}render(){return o(r,{key:"a2215c880bbe8e2751505e44275e5cd085266baa"},o("label",{key:"ce09cb611a5e40695e2c2a8734501b28a04fe581",htmlFor:this.name,class:"wcs-container","aria-disabled":this.disabled},o("input",Object.assign({key:"ac1a253cfe304ed08e83383137f83e3bcc2403b9",onBlur:this.handleBlur.bind(this),onChange:this.handleChange.bind(this),onFocus:this.handleFocus.bind(this),onClick:this.handleInputClick.bind(this),checked:this.checked,class:"wcs-checkbox",type:"checkbox",ref:c=>this.nativeInput=c,name:this.name,disabled:this.disabled,id:this.name},this.inheritedAttributes)),o("span",{key:"04814a8a11514ee090d04b708095553c73aea6f8",class:"wcs-checkmark"}),o("span",{key:"8a2894a93d030a2854b39a47cad63066d0b6904a",class:"text"},o("slot",{key:"40d804d00c1e3ba9eff5aa510b252a95a089e416",onSlotchange:c=>this.onSlotChange()}))))}static get delegatesFocus(){return true}get el(){return t(this)}};let w=0;b.style=h;export{b as wcs_checkbox};
+//# sourceMappingURL=p-4fb2d985.entry.js.map

package/dist/wcs/{p-9243a323.entry.js.map → p-4fb2d985.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["checkboxCss","WcsCheckboxStyle0","CHECKBOX_INHERITED_ATTRS","Checkbox","this","inheritedAttributes","checkboxId","checkboxIds","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","componentDidLoad","onSlotChange","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeInput","getLabel","getSlottedContentText","handleChange","e","stopImmediatePropagation","preventDefault","toggleCheckboxState","handleHostClick","stopPropagation","handleInputClick","ev","detail","disabled","indeterminate","checked","wcsChange","emit","handleFocus","event","wcsFocus","handleBlur","wcsBlur","slot","shadowRoot","querySelector","assignedNodes","length","classList","remove","add","render","h","Host","key","htmlFor","name","class","onBlur","bind","onChange","onFocus","onClick","type","ref","id","onSlotchange","_"],"sources":["src/components/checkbox/checkbox.scss?tag=wcs-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-default);\n    --wcs-checkbox-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-checkbox-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-checkbox-border-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-checkbox-border-color-indeterminate: var(--wcs-semantic-color-border-control-indicator-selected);\n\n    --wcs-checkbox-border-radius: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-checkbox-border-width: var(--wcs-semantic-border-width-large);\n\n    --wcs-checkbox-size: calc(2 * var(--wcs-semantic-size-base));\n\n    --wcs-checkbox-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-disabled: var(--wcs-semantic-color-text-tertiary);\n    --wcs-checkbox-text-color-hover: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-selected: var(--wcs-semantic-color-text-primary);\n\n    --wcs-checkbox-text-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-checkbox-text-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-checkbox-background-color-default: transparent;\n    --wcs-checkbox-background-color-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n    --wcs-checkbox-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-checkbox-background-color-indeterminate: var(--wcs-semantic-color-background-control-indicator-selected);\n\n    --wcs-checkbox-outline-radius-focus: var(--wcs-semantic-border-radius-base);\n    --wcs-checkbox-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-checkbox-gap: var(--wcs-semantic-spacing-base);\n    --wcs-checkmark-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-checkmark-height: 0.5rem;\n    --wcs-checkmark-width: 0.1875rem;\n    --wcs-checkmark-border-width: 0.125rem;\n\n    --wcs-indeterminate-bar-width: 0.625rem;\n    --wcs-indeterminate-bar-height: 0.125rem;\n    --wcs-indeterminate-bar-border-radius: 0.0625rem;\n    --wcs-indeterminate-bar-background-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n\n    --wcs-checkbox-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: inline-flex;\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-checkbox-text-color-disabled);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n    }\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n:host([checked]:not([indeterminate][disabled])) {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-selected);\n}\n\n.wcs-checkmark {\n    transition-property: border-color, background-color, color;\n    transition: var(--wcs-checkbox-transition-duration) ease-in-out;\n\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    font-size: var(--wcs-checkbox-text-font-size);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n    user-select: none;\n    display: flex;\n    gap: var(--wcs-checkbox-gap);\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]){\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]){\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]){\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default checkbox */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n.wcs-container:hover:not([aria-disabled]), input:focus {\n    .text {\n        color: var(--wcs-checkbox-text-color-hover);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-hover);\n    }\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n}\n\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n    }\n}\n\n/* Create a custom checkbox */\n.wcs-checkmark {\n    flex: 0 0 var(--wcs-checkbox-size);\n    width: var(--wcs-checkbox-size);\n    height: var(--wcs-checkbox-size);\n    background-color: var(--wcs-checkbox-background-color-default);\n    border: var(--wcs-checkbox-border-width) solid var(--wcs-checkbox-border-color);\n    border-radius: var(--wcs-checkbox-border-radius);\n    box-sizing: border-box;\n}\n\n:host([indeterminate]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-indeterminate);\n        background: var(--wcs-checkbox-background-color-indeterminate);\n    }\n}\n\n:host([indeterminate][disabled]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n        background: var(--wcs-checkbox-background-color-disabled);\n    }\n}\n\n/* When the checkbox is checked, add a blue background */\n.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-selected);\n}\n.wcs-container[aria-disabled] input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-disabled);\n}\n\n/* Create the wcs-checkmark/indicator (hidden when not checked) */\n.wcs-checkmark:after {\n    content: \"\";\n    position: absolute;\n    display: none;\n}\n\n.wcs-checkmark {\n    position: relative;\n}\n\n:host([checked]), :host([indeterminate]) {\n    /* Show the wcs-checkmark when checked */\n    .wcs-container input~.wcs-checkmark:after {\n        display: flex;\n    }\n\n    /* Handle hover when checked/indeterminate */\n    .wcs-container:not([aria-disabled]):hover {\n        .wcs-checkmark {\n            background-color: var(--wcs-checkbox-background-color-hover);\n        }\n    }\n}\n\n:host(:not([indeterminate])) {\n    /* Style the wcs-checkmark/indicator */\n    .wcs-container .wcs-checkmark:after {\n        left: 0.25rem;\n        width: var(--wcs-checkmark-width);\n        height: var(--wcs-checkmark-height);\n        border: solid var(--wcs-checkmark-color, white);\n        border-width: 0 var(--wcs-checkmark-border-width) var(--wcs-checkmark-border-width) 0;\n        -webkit-transform: rotate(45deg);\n        -ms-transform: rotate(45deg);\n        transform: rotate(45deg);\n    }\n}\n\n:host([indeterminate]) {\n    .wcs-container .wcs-checkmark:after {\n        position: absolute;\n        background-color: var(--wcs-indeterminate-bar-background-color);\n        left: calc(50% - (var(--wcs-indeterminate-bar-width) / 2));\n        top: calc(50% - (var(--wcs-indeterminate-bar-height) / 2));\n        width: var(--wcs-indeterminate-bar-width);\n        height: var(--wcs-indeterminate-bar-height);\n        border-radius: var(--wcs-indeterminate-bar-border-radius);\n    }\n}\n\n.wcs-container:not([aria-disabled]) input:not(:checked)~.text {\n    color: var(--wcs-checkbox-text-color-default);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.wcs-container:not([aria-disabled]) input:checked~.text {\n    color: var(--wcs-checkbox-text-color-selected);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.hidden {\n    display: none;\n}\n","import {\n    Component,\n    Prop,\n    Event,\n    EventEmitter,\n    ComponentInterface,\n    h,\n    Host,\n    Method,\n    Element,\n    Listen\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.\n * \n * @cssprop --wcs-checkbox-border-color-default - Default color of the border\n * @cssprop --wcs-checkbox-border-color-hover - Color of the border when hovered\n * @cssprop --wcs-checkbox-border-color-disabled - Color of the border when disabled\n * @cssprop --wcs-checkbox-border-color-selected - Color of the border when selected\n * @cssprop --wcs-checkbox-border-color-indeterminate - Color of the border when indeterminate\n * \n * @cssprop --wcs-checkbox-border-radius - Border radius of the checkbox\n * @cssprop --wcs-checkbox-border-width - Width of the border of the checkbox\n * \n * @cssprop --wcs-checkbox-size - Size of the checkbox\n * \n * @cssprop --wcs-checkbox-text-color-default - Color of the text when the checkbox is not selected\n * @cssprop --wcs-checkbox-text-color-disabled - Color of the text when the checkbox is disabled\n * @cssprop --wcs-checkbox-text-color-hover - Color of the text when the checkbox is hovered\n * @cssprop --wcs-checkbox-text-color-selected - Color of the text when the checkbox is selected\n * \n * @cssprop --wcs-checkbox-text-font-size - Font size of the text\n * @cssprop --wcs-checkbox-text-font-weight - Font weight of the text\n * \n * @cssprop --wcs-checkbox-background-color-default - Default background color of the checkbox\n * @cssprop --wcs-checkbox-background-color-hover - Background color of the checkbox when hovered\n * @cssprop --wcs-checkbox-background-color-disabled - Background color of the checkbox when disabled\n * @cssprop --wcs-checkbox-background-color-selected - Background color of the checkbox when selected\n * @cssprop --wcs-checkbox-background-color-indeterminate - Background color of the checkbox when indeterminate\n * \n * @cssprop --wcs-checkbox-outline-radius-focus - Border radius of the focus outline\n * @cssprop --wcs-checkbox-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-checkbox-gap - Gap between the checkbox and the label\n * @cssprop --wcs-checkmark-color - Color of the checkmark\n * @cssprop --wcs-checkmark-height - Height of the checkmark (From the bottom left to the top right of the checkmark)\n * @cssprop --wcs-checkmark-width - Width of the checkmark (From the bottom right to the top left of the checkmark)\n * @cssprop --wcs-checkmark-border-width - Width of the border of the checkmark\n *\n * @cssprop --wcs-indeterminate-bar-width - Width of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-height - Height of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-border-radius - Border-radius of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-background-color - Color of the indeterminate bar\n * \n * @cssprop --wcs-checkbox-transition-duration - Duration of the transition\n */\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: {\n        delegatesFocus: true,\n    },\n})\nexport class Checkbox implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n    @Element() private el!: HTMLElement;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n\n    @Prop() name = this.checkboxId;\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify whether the checkbox is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    /**\n     * Emitted when the checkbox has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the checkbox loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, CHECKBOX_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.onSlotChange();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    @Method()\n    async getLabel(): Promise<string> {\n        return getSlottedContentText(this.el);\n    }\n\n    handleChange(e: Event) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        this.toggleCheckboxState();\n    }\n    \n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n        \n        this.toggleCheckboxState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleCheckboxState() {\n        if (this.disabled) return;\n        \n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n    \n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    onSlotChange() { \n        const slot = this.el.shadowRoot.querySelector('slot');\n        if (slot) {\n            // TODO: remove when pseudo-class that indicate a slot has content is supported in all major browsers \n            //  (https://github.com/w3c/csswg-drafts/issues/6867)\n            // https://developer.mozilla.org/en-US/docs/Web/CSS/:empty\n            const assignedNodes = slot.assignedNodes();\n            if (assignedNodes.length > 0) {\n                this.el.shadowRoot.querySelector('.text').classList.remove('hidden');\n            } else {\n                this.el.shadowRoot.querySelector('.text').classList.add('hidden');\n            }\n        }\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input\n                        onBlur={this.handleBlur.bind(this)}\n                        onChange={this.handleChange.bind(this)}\n                        onFocus={this.handleFocus.bind(this)}\n                        onClick={this.handleInputClick.bind(this)}\n                        checked={this.checked}\n                        class=\"wcs-checkbox\"\n                        type=\"checkbox\"\n                        ref={(el) => (this.nativeInput = el)}\n                        name={this.name}\n                        disabled={this.disabled}\n                        id={this.name}\n                        {...this.inheritedAttributes}\n                    ></input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot onSlotchange={(_) => this.onSlotChange()} />\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"],"mappings":"iJAAA,MAAMA,EAAc,giNACpB,MAAAC,EAAeD,ECgBf,MAAME,EAA2B,CAAC,WAAY,S,MAqDjCC,EAAQ,M,kIAGTC,KAAAC,oBAA4C,GAC5CD,KAAAE,WAAa,gBAAgBC,M,UAEtBH,KAAKE,W,mBAIoC,M,aAKN,M,oBAK+B,S,cAKpC,K,CAiB7C,iBAAAE,GACIJ,KAAKC,oBAAmBI,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBP,KAAKQ,KAC3BC,EAAkBT,KAAKQ,GAAIV,G,CAItC,gBAAAY,GACIV,KAAKW,c,CAIT,sBAAMC,CAAiBC,EAAyBC,GAC5CC,EAAqBf,KAAKgB,YAAaH,EAAMC,E,CAIjD,cAAMG,GACF,OAAOC,EAAsBlB,KAAKQ,G,CAGtC,YAAAW,CAAaC,GACTA,EAAEC,2BACFD,EAAEE,iBACFtB,KAAKuB,qB,CAIT,qBAAMC,CAAgBJ,GAClBA,EAAEE,iBACFF,EAAEK,kBAEFzB,KAAKuB,qB,CAGT,gBAAAG,CAAiBC,GAGb,GAAIA,EAAGC,OAAQ,CACXD,EAAGN,2BACHM,EAAGL,gB,EAIX,mBAAAC,GACI,GAAIvB,KAAK6B,SAAU,OAEnB7B,KAAK8B,cAAgB,MACrB9B,KAAK+B,SAAW/B,KAAK+B,QACrB/B,KAAKgC,UAAUC,KAAK,CAChBF,QAAS/B,KAAK+B,S,CAItB,WAAAG,CAAYC,GACRnC,KAAKoC,SAASH,KAAKE,E,CAGvB,UAAAE,CAAWF,GACPnC,KAAKsC,QAAQL,KAAKE,E,CAGtB,YAAAxB,GACI,MAAM4B,EAAOvC,KAAKQ,GAAGgC,WAAWC,cAAc,QAC9C,GAAIF,EAAM,CAIN,MAAMG,EAAgBH,EAAKG,gBAC3B,GAAIA,EAAcC,OAAS,EAAG,CAC1B3C,KAAKQ,GAAGgC,WAAWC,cAAc,SAASG,UAAUC,OAAO,S,KACxD,CACH7C,KAAKQ,GAAGgC,WAAWC,cAAc,SAASG,UAAUE,IAAI,S,GAKpE,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,SAAAE,IAAA,2CAAOC,QAASnD,KAAKoD,KAAMC,MAAM,gBAAe,gBAAgBrD,KAAK6B,UACjEmB,EAAA,QAAA3C,OAAAC,OAAA,CAAA4C,IAAA,2CACII,OAAQtD,KAAKqC,WAAWkB,KAAKvD,MAC7BwD,SAAUxD,KAAKmB,aAAaoC,KAAKvD,MACjCyD,QAASzD,KAAKkC,YAAYqB,KAAKvD,MAC/B0D,QAAS1D,KAAK0B,iBAAiB6B,KAAKvD,MACpC+B,QAAS/B,KAAK+B,QACdsB,MAAM,eACNM,KAAK,WACLC,IAAMpD,GAAQR,KAAKgB,YAAcR,EACjC4C,KAAMpD,KAAKoD,KACXvB,SAAU7B,KAAK6B,SACfgC,GAAI7D,KAAKoD,MACLpD,KAAKC,sBAEb+C,EAAA,QAAAE,IAAA,2CAAMG,MAAM,kBACZL,EAAA,QAAAE,IAAA,2CAAMG,MAAM,QACRL,EAAA,QAAAE,IAAA,2CAAMY,aAAeC,GAAM/D,KAAKW,mB,mEAQxD,IAAIR,EAAc,E"}
+{"version":3,"names":["checkboxCss","WcsCheckboxStyle0","CHECKBOX_INHERITED_ATTRS","Checkbox","this","inheritedAttributes","checkboxId","checkboxIds","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","componentDidLoad","onSlotChange","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeInput","getLabel","getSlottedContentText","handleChange","e","stopImmediatePropagation","preventDefault","toggleCheckboxState","handleHostClick","stopPropagation","handleInputClick","ev","detail","disabled","indeterminate","checked","wcsChange","emit","handleFocus","event","wcsFocus","handleBlur","wcsBlur","slot","shadowRoot","querySelector","assignedNodes","length","classList","remove","add","render","h","Host","key","htmlFor","name","class","onBlur","bind","onChange","onFocus","onClick","type","ref","id","onSlotchange","_"],"sources":["src/components/checkbox/checkbox.scss?tag=wcs-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-default);\n    --wcs-checkbox-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-checkbox-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-checkbox-border-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-checkbox-border-color-indeterminate: var(--wcs-semantic-color-border-control-indicator-selected);\n\n    --wcs-checkbox-border-radius: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-checkbox-border-width: var(--wcs-semantic-border-width-large);\n\n    --wcs-checkbox-size: calc(2 * var(--wcs-semantic-size-base));\n\n    --wcs-checkbox-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-disabled: var(--wcs-semantic-color-text-tertiary);\n    --wcs-checkbox-text-color-hover: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-selected: var(--wcs-semantic-color-text-primary);\n\n    --wcs-checkbox-text-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-checkbox-text-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-checkbox-background-color-default: transparent;\n    --wcs-checkbox-background-color-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n    --wcs-checkbox-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-checkbox-background-color-indeterminate: var(--wcs-semantic-color-background-control-indicator-selected);\n\n    --wcs-checkbox-outline-radius-focus: var(--wcs-semantic-border-radius-base);\n    --wcs-checkbox-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-checkbox-gap: var(--wcs-semantic-spacing-base);\n    --wcs-checkmark-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-checkmark-height: 0.5rem;\n    --wcs-checkmark-width: 0.1875rem;\n    --wcs-checkmark-border-width: 0.125rem;\n\n    --wcs-indeterminate-bar-width: 0.625rem;\n    --wcs-indeterminate-bar-height: 0.125rem;\n    --wcs-indeterminate-bar-border-radius: 0.0625rem;\n    --wcs-indeterminate-bar-background-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n\n    --wcs-checkbox-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: inline-flex;\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-checkbox-text-color-disabled);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n    }\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n:host([checked]:not([indeterminate][disabled])) {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-selected);\n}\n\n.wcs-checkmark {\n    transition-property: border-color, background-color, color;\n    transition: var(--wcs-checkbox-transition-duration) ease-in-out;\n\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    font-size: var(--wcs-checkbox-text-font-size);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n    user-select: none;\n    display: flex;\n    gap: var(--wcs-checkbox-gap);\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]){\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]){\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]){\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default checkbox */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n.wcs-container:hover:not([aria-disabled]), input:focus {\n    .text {\n        color: var(--wcs-checkbox-text-color-hover);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-hover);\n    }\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n}\n\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n    }\n}\n\n/* Create a custom checkbox */\n.wcs-checkmark {\n    flex: 0 0 var(--wcs-checkbox-size);\n    width: var(--wcs-checkbox-size);\n    height: var(--wcs-checkbox-size);\n    background-color: var(--wcs-checkbox-background-color-default);\n    border: var(--wcs-checkbox-border-width) solid var(--wcs-checkbox-border-color);\n    border-radius: var(--wcs-checkbox-border-radius);\n    box-sizing: border-box;\n}\n\n:host([indeterminate]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-indeterminate);\n        background: var(--wcs-checkbox-background-color-indeterminate);\n    }\n}\n\n:host([indeterminate][disabled]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n        background: var(--wcs-checkbox-background-color-disabled);\n    }\n}\n\n/* When the checkbox is checked, add a blue background */\n.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-selected);\n}\n.wcs-container[aria-disabled] input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-disabled);\n}\n\n/* Create the wcs-checkmark/indicator (hidden when not checked) */\n.wcs-checkmark:after {\n    content: \"\";\n    position: absolute;\n    display: none;\n}\n\n.wcs-checkmark {\n    position: relative;\n}\n\n:host([checked]), :host([indeterminate]) {\n    /* Show the wcs-checkmark when checked */\n    .wcs-container input~.wcs-checkmark:after {\n        display: flex;\n    }\n\n    /* Handle hover when checked/indeterminate */\n    .wcs-container:not([aria-disabled]):hover {\n        .wcs-checkmark {\n            background-color: var(--wcs-checkbox-background-color-hover);\n        }\n    }\n}\n\n:host(:not([indeterminate])) {\n    /* Style the wcs-checkmark/indicator */\n    .wcs-container .wcs-checkmark:after {\n        left: 0.25rem;\n        width: var(--wcs-checkmark-width);\n        height: var(--wcs-checkmark-height);\n        border: solid var(--wcs-checkmark-color, white);\n        border-width: 0 var(--wcs-checkmark-border-width) var(--wcs-checkmark-border-width) 0;\n        -webkit-transform: rotate(45deg);\n        -ms-transform: rotate(45deg);\n        transform: rotate(45deg);\n    }\n}\n\n:host([indeterminate]) {\n    .wcs-container .wcs-checkmark:after {\n        position: absolute;\n        background-color: var(--wcs-indeterminate-bar-background-color);\n        left: calc(50% - (var(--wcs-indeterminate-bar-width) / 2));\n        top: calc(50% - (var(--wcs-indeterminate-bar-height) / 2));\n        width: var(--wcs-indeterminate-bar-width);\n        height: var(--wcs-indeterminate-bar-height);\n        border-radius: var(--wcs-indeterminate-bar-border-radius);\n    }\n}\n\n.wcs-container:not([aria-disabled]) input:not(:checked)~.text {\n    color: var(--wcs-checkbox-text-color-default);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.wcs-container:not([aria-disabled]) input:checked~.text {\n    color: var(--wcs-checkbox-text-color-selected);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.hidden {\n    display: none;\n}\n","import {\n    Component,\n    Prop,\n    Event,\n    EventEmitter,\n    ComponentInterface,\n    h,\n    Host,\n    Method,\n    Element,\n    Listen\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.\n * \n * @cssprop --wcs-checkbox-border-color-default - Default color of the border\n * @cssprop --wcs-checkbox-border-color-hover - Color of the border when hovered\n * @cssprop --wcs-checkbox-border-color-disabled - Color of the border when disabled\n * @cssprop --wcs-checkbox-border-color-selected - Color of the border when selected\n * @cssprop --wcs-checkbox-border-color-indeterminate - Color of the border when indeterminate\n * \n * @cssprop --wcs-checkbox-border-radius - Border radius of the checkbox\n * @cssprop --wcs-checkbox-border-width - Width of the border of the checkbox\n * \n * @cssprop --wcs-checkbox-size - Size of the checkbox\n * \n * @cssprop --wcs-checkbox-text-color-default - Color of the text when the checkbox is not selected\n * @cssprop --wcs-checkbox-text-color-disabled - Color of the text when the checkbox is disabled\n * @cssprop --wcs-checkbox-text-color-hover - Color of the text when the checkbox is hovered\n * @cssprop --wcs-checkbox-text-color-selected - Color of the text when the checkbox is selected\n * \n * @cssprop --wcs-checkbox-text-font-size - Font size of the text\n * @cssprop --wcs-checkbox-text-font-weight - Font weight of the text\n * \n * @cssprop --wcs-checkbox-background-color-default - Default background color of the checkbox\n * @cssprop --wcs-checkbox-background-color-hover - Background color of the checkbox when hovered\n * @cssprop --wcs-checkbox-background-color-disabled - Background color of the checkbox when disabled\n * @cssprop --wcs-checkbox-background-color-selected - Background color of the checkbox when selected\n * @cssprop --wcs-checkbox-background-color-indeterminate - Background color of the checkbox when indeterminate\n * \n * @cssprop --wcs-checkbox-outline-radius-focus - Border radius of the focus outline\n * @cssprop --wcs-checkbox-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-checkbox-gap - Gap between the checkbox and the label\n * @cssprop --wcs-checkmark-color - Color of the checkmark\n * @cssprop --wcs-checkmark-height - Height of the checkmark (From the bottom left to the top right of the checkmark)\n * @cssprop --wcs-checkmark-width - Width of the checkmark (From the bottom right to the top left of the checkmark)\n * @cssprop --wcs-checkmark-border-width - Width of the border of the checkmark\n *\n * @cssprop --wcs-indeterminate-bar-width - Width of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-height - Height of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-border-radius - Border-radius of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-background-color - Color of the indeterminate bar\n * \n * @cssprop --wcs-checkbox-transition-duration - Duration of the transition\n */\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: {\n        delegatesFocus: true,\n    },\n})\nexport class Checkbox implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n    @Element() private el!: HTMLElement;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n\n    @Prop() name = this.checkboxId;\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify whether the checkbox is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    /**\n     * Emitted when the checkbox has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the checkbox loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, CHECKBOX_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.onSlotChange();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    @Method()\n    async getLabel(): Promise<string> {\n        return getSlottedContentText(this.el);\n    }\n\n    handleChange(e: Event) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        this.toggleCheckboxState();\n    }\n    \n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n        \n        this.toggleCheckboxState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleCheckboxState() {\n        if (this.disabled) return;\n        \n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n    \n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    onSlotChange() { \n        const slot = this.el.shadowRoot.querySelector('slot');\n        if (slot) {\n            // TODO: remove when pseudo-class that indicate a slot has content is supported in all major browsers \n            //  (https://github.com/w3c/csswg-drafts/issues/6867)\n            // https://developer.mozilla.org/en-US/docs/Web/CSS/:empty\n            const assignedNodes = slot.assignedNodes();\n            if (assignedNodes.length > 0) {\n                this.el.shadowRoot.querySelector('.text').classList.remove('hidden');\n            } else {\n                this.el.shadowRoot.querySelector('.text').classList.add('hidden');\n            }\n        }\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input\n                        onBlur={this.handleBlur.bind(this)}\n                        onChange={this.handleChange.bind(this)}\n                        onFocus={this.handleFocus.bind(this)}\n                        onClick={this.handleInputClick.bind(this)}\n                        checked={this.checked}\n                        class=\"wcs-checkbox\"\n                        type=\"checkbox\"\n                        ref={(el) => (this.nativeInput = el)}\n                        name={this.name}\n                        disabled={this.disabled}\n                        id={this.name}\n                        {...this.inheritedAttributes}\n                    ></input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot onSlotchange={(_) => this.onSlotChange()} />\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"],"mappings":"sJAAA,MAAMA,EAAc,giNACpB,MAAAC,EAAeD,ECgBf,MAAME,EAA2B,CAAC,WAAY,S,MAqDjCC,EAAQ,M,kIAGTC,KAAAC,oBAA4C,GAC5CD,KAAAE,WAAa,gBAAgBC,M,UAEtBH,KAAKE,W,mBAI6C,M,aAKN,M,oBAKsB,S,cAKpC,K,CAiB7C,iBAAAE,GACIJ,KAAKC,oBAAmBI,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBP,KAAKQ,KAC3BC,EAAkBT,KAAKQ,GAAIV,G,CAItC,gBAAAY,GACIV,KAAKW,c,CAIT,sBAAMC,CAAiBC,EAAyBC,GAC5CC,EAAqBf,KAAKgB,YAAaH,EAAMC,E,CAIjD,cAAMG,GACF,OAAOC,EAAsBlB,KAAKQ,G,CAGtC,YAAAW,CAAaC,GACTA,EAAEC,2BACFD,EAAEE,iBACFtB,KAAKuB,qB,CAIT,qBAAMC,CAAgBJ,GAClBA,EAAEE,iBACFF,EAAEK,kBAEFzB,KAAKuB,qB,CAGT,gBAAAG,CAAiBC,GAGb,GAAIA,EAAGC,OAAQ,CACXD,EAAGN,2BACHM,EAAGL,gB,EAIX,mBAAAC,GACI,GAAIvB,KAAK6B,SAAU,OAEnB7B,KAAK8B,cAAgB,MACrB9B,KAAK+B,SAAW/B,KAAK+B,QACrB/B,KAAKgC,UAAUC,KAAK,CAChBF,QAAS/B,KAAK+B,S,CAItB,WAAAG,CAAYC,GACRnC,KAAKoC,SAASH,KAAKE,E,CAGvB,UAAAE,CAAWF,GACPnC,KAAKsC,QAAQL,KAAKE,E,CAGtB,YAAAxB,GACI,MAAM4B,EAAOvC,KAAKQ,GAAGgC,WAAWC,cAAc,QAC9C,GAAIF,EAAM,CAIN,MAAMG,EAAgBH,EAAKG,gBAC3B,GAAIA,EAAcC,OAAS,EAAG,CAC1B3C,KAAKQ,GAAGgC,WAAWC,cAAc,SAASG,UAAUC,OAAO,S,KACxD,CACH7C,KAAKQ,GAAGgC,WAAWC,cAAc,SAASG,UAAUE,IAAI,S,GAKpE,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,SAAAE,IAAA,2CAAOC,QAASnD,KAAKoD,KAAMC,MAAM,gBAAe,gBAAgBrD,KAAK6B,UACjEmB,EAAA,QAAA3C,OAAAC,OAAA,CAAA4C,IAAA,2CACII,OAAQtD,KAAKqC,WAAWkB,KAAKvD,MAC7BwD,SAAUxD,KAAKmB,aAAaoC,KAAKvD,MACjCyD,QAASzD,KAAKkC,YAAYqB,KAAKvD,MAC/B0D,QAAS1D,KAAK0B,iBAAiB6B,KAAKvD,MACpC+B,QAAS/B,KAAK+B,QACdsB,MAAM,eACNM,KAAK,WACLC,IAAMpD,GAAQR,KAAKgB,YAAcR,EACjC4C,KAAMpD,KAAKoD,KACXvB,SAAU7B,KAAK6B,SACfgC,GAAI7D,KAAKoD,MACLpD,KAAKC,sBAEb+C,EAAA,QAAAE,IAAA,2CAAMG,MAAM,kBACZL,EAAA,QAAAE,IAAA,2CAAMG,MAAM,QACRL,EAAA,QAAAE,IAAA,2CAAMY,aAAeC,GAAM/D,KAAKW,mB,mEAQxD,IAAIR,EAAc,E"}

package/dist/wcs/{p-d895ffb4.entry.js → p-5202b323.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t}from"./p-32e583ea.js";const i=":host{--wcs-skeleton-width:100%;--wcs-skeleton-height:100%;--wcs-skeleton-min-height:1rem;--wcs-skeleton-background-color:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);--wcs-skeleton-animation-duration:var(--wcs-semantic-motion-duration-animation-base);display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:var(--wcs-skeleton-height);width:var(--wcs-skeleton-width);min-height:var(--wcs-skeleton-min-height);background:var(--wcs-skeleton-background-color);background-size:400% 100%}:host([animation=glide]) span{animation:glide var(--wcs-skeleton-animation-duration) ease-in-out infinite}:host([animation=pulse]){animation:pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-text-height:var(--wcs-semantic-font-size-base);--wcs-skeleton-text-height-h1:var(--wcs-semantic-font-size-heading-1);--wcs-skeleton-text-height-h2:var(--wcs-semantic-font-size-heading-2);--wcs-skeleton-text-height-h3:var(--wcs-semantic-font-size-heading-3);--wcs-skeleton-text-height-body:var(--wcs-semantic-font-size-body-3);--wcs-skeleton-text-height-caption:var(--wcs-semantic-font-size-caption-1)}:host([height=h1]){height:var(--wcs-skeleton-text-height-h1)}:host([height=h2]){height:var(--wcs-skeleton-text-height-h2)}:host([height=h3]){height:var(--wcs-skeleton-text-height-h3)}:host([height=body]){height:var(--wcs-skeleton-text-height-body)}:host([height=caption]){height:var(--wcs-skeleton-text-height-caption)}";const s=i;const o=class{constructor(t){e(this,t);this.animation="glide";this.height="body"}render(){return t("span",{key:"9f7fd22e258db1be4ca8aef533e548fe14fc24ea","aria-hidden":"true"})}};o.style=s;export{o as wcs_skeleton_text};
-//# sourceMappingURL=p-d895ffb4.entry.js.map
+import{r as e,h as t}from"./p-32e583ea.js";const i=":host{--wcs-skeleton-width:100%;--wcs-skeleton-height:100%;--wcs-skeleton-min-height:1rem;--wcs-skeleton-background-color:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);--wcs-skeleton-animation-duration:var(--wcs-semantic-motion-duration-animation-base);display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:var(--wcs-skeleton-height);width:var(--wcs-skeleton-width);min-height:var(--wcs-skeleton-min-height);background:var(--wcs-skeleton-background-color);background-size:400% 100%}:host([animation=glide]) span{animation:glide var(--wcs-skeleton-animation-duration) ease-in-out infinite}:host([animation=pulse]){animation:pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-text-height:var(--wcs-semantic-font-size-base);--wcs-skeleton-text-height-h1:var(--wcs-semantic-font-size-heading-1);--wcs-skeleton-text-height-h2:var(--wcs-semantic-font-size-heading-2);--wcs-skeleton-text-height-h3:var(--wcs-semantic-font-size-heading-3);--wcs-skeleton-text-height-body:var(--wcs-semantic-font-size-body-3);--wcs-skeleton-text-height-caption:var(--wcs-semantic-font-size-caption-1)}:host([height=h1]){height:var(--wcs-skeleton-text-height-h1)}:host([height=h2]){height:var(--wcs-skeleton-text-height-h2)}:host([height=h3]){height:var(--wcs-skeleton-text-height-h3)}:host([height=body]){height:var(--wcs-skeleton-text-height-body)}:host([height=caption]){height:var(--wcs-skeleton-text-height-caption)}";const s=i;const o=class{constructor(t){e(this,t);this.animation="glide";this.height="body"}render(){return t("span",{key:"ba89cefda296d6c9fec4c035756a12deddfc35e3","aria-hidden":"true"})}};o.style=s;export{o as wcs_skeleton_text};
+//# sourceMappingURL=p-5202b323.entry.js.map

package/dist/wcs/{p-ca8f3677.entry.js → p-53a395a9.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as r,H as c}from"./p-32e583ea.js";import{I as t}from"./p-3abf8a42.js";const i=':host{--wcs-breadcrumb-item-max-height:var(--wcs-semantic-size-s);--wcs-breadcrumb-item-line-height:var(--wcs-semantic-font-line-height-large);--wcs-breadcrumb-item-font-size:var(--wcs-semantic-font-size-body-3);--wcs-breadcrumb-item-icon-color:var(--wcs-semantic-color-foreground-brand);--wcs-breadcrumb-item-icon-font-size:0.5rem;--wcs-breadcrumb-item-gap:var(--wcs-semantic-spacing-base);--wcs-breadcrumb-item-link-color:var(--wcs-semantic-color-text-link-default);--wcs-breadcrumb-item-link-color-hover:var(--wcs-semantic-color-text-link-hover);--wcs-breadcrumb-item-link-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-breadcrumb-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-breadcrumb-item-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-breadcrumb-item-active-color:var(--wcs-semantic-color-text-primary);display:flex;align-items:baseline;max-height:var(--wcs-breadcrumb-item-max-height);font-size:var(--wcs-breadcrumb-item-font-size);color:var(--wcs-breadcrumb-item-active-color);line-height:var(--wcs-breadcrumb-item-line-height)}:host ::slotted(a){display:block;height:100%;padding:1px 2px;font-weight:var(--wcs-breadcrumb-item-link-font-weight);color:var(--wcs-breadcrumb-item-link-color);text-decoration:none;border-radius:var(--wcs-breadcrumb-item-border-width-focus)}:host ::slotted(a:focus-visible){outline:var(--wcs-breadcrumb-item-border-width-focus) dashed var(--wcs-breadcrumb-item-border-color-focus);outline-offset:0;border-radius:0.1rem}:host ::slotted(a:hover){text-decoration:underline;color:var(--wcs-breadcrumb-item-link-color-hover)}:host .item-icon{margin-left:calc(var(--wcs-breadcrumb-item-gap) - 2px);font-family:"icons";font-size:var(--wcs-breadcrumb-item-icon-font-size);color:var(--wcs-breadcrumb-item-icon-color)}';const o=i;const a=class{constructor(r){e(this,r);this.last=false}render(){return r(c,{key:"6effffe4ccde341f04d1d84563fedfe1132266b1",role:"listitem"},r("slot",{key:"812a6c9525e402c42242727e6ab5d82a790262d2"}),!this.last&&r("span",{key:"c63d5dd46647a36bc57f1bc84379119b95bfde79",class:"item-icon","aria-hidden":"true"},t))}};a.style=o;export{a as wcs_breadcrumb_item};
-//# sourceMappingURL=p-ca8f3677.entry.js.map
+import{r as e,h as r,H as c}from"./p-32e583ea.js";import{I as t}from"./p-3abf8a42.js";const i=':host{--wcs-breadcrumb-item-max-height:var(--wcs-semantic-size-s);--wcs-breadcrumb-item-line-height:var(--wcs-semantic-font-line-height-large);--wcs-breadcrumb-item-font-size:var(--wcs-semantic-font-size-body-3);--wcs-breadcrumb-item-icon-color:var(--wcs-semantic-color-foreground-brand);--wcs-breadcrumb-item-icon-font-size:0.5rem;--wcs-breadcrumb-item-gap:var(--wcs-semantic-spacing-base);--wcs-breadcrumb-item-link-color:var(--wcs-semantic-color-text-link-default);--wcs-breadcrumb-item-link-color-hover:var(--wcs-semantic-color-text-link-hover);--wcs-breadcrumb-item-link-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-breadcrumb-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-breadcrumb-item-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-breadcrumb-item-active-color:var(--wcs-semantic-color-text-primary);display:flex;align-items:baseline;max-height:var(--wcs-breadcrumb-item-max-height);font-size:var(--wcs-breadcrumb-item-font-size);color:var(--wcs-breadcrumb-item-active-color);line-height:var(--wcs-breadcrumb-item-line-height)}:host ::slotted(a){display:block;height:100%;padding:1px 2px;font-weight:var(--wcs-breadcrumb-item-link-font-weight);color:var(--wcs-breadcrumb-item-link-color);text-decoration:none;border-radius:var(--wcs-breadcrumb-item-border-width-focus)}:host ::slotted(a:focus-visible){outline:var(--wcs-breadcrumb-item-border-width-focus) dashed var(--wcs-breadcrumb-item-border-color-focus);outline-offset:0;border-radius:0.1rem}:host ::slotted(a:hover){text-decoration:underline;color:var(--wcs-breadcrumb-item-link-color-hover)}:host .item-icon{margin-left:calc(var(--wcs-breadcrumb-item-gap) - 2px);font-family:"icons";font-size:var(--wcs-breadcrumb-item-icon-font-size);color:var(--wcs-breadcrumb-item-icon-color)}';const o=i;const a=class{constructor(r){e(this,r);this.last=false}render(){return r(c,{key:"56e9780cd4ef4603b3a7364384222ffbc69bd4a5",role:"listitem"},r("slot",{key:"d3b484440c71efc646b2de9cb5f6ff8154887207"}),!this.last&&r("span",{key:"47eb0cbd394d31e46b0d919ab77d2f61d1d0aeef",class:"item-icon","aria-hidden":"true"},t))}};a.style=o;export{a as wcs_breadcrumb_item};
+//# sourceMappingURL=p-53a395a9.entry.js.map

package/dist/wcs/{p-ca8f3677.entry.js.map → p-53a395a9.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["breadcrumbItemCss","WcsBreadcrumbItemStyle0","BreadcrumbItem","render","h","Host","key","role","this","last","class","ICONS_FONT_CHEVRON_UNICODE"],"sources":["src/components/breadcrumb-item/breadcrumb-item.scss?tag=wcs-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-breadcrumb-item-max-height: var(--wcs-semantic-size-s);\n    --wcs-breadcrumb-item-line-height: var(--wcs-semantic-font-line-height-large);\n    --wcs-breadcrumb-item-font-size: var(--wcs-semantic-font-size-body-3);\n\n    --wcs-breadcrumb-item-icon-color: var(--wcs-semantic-color-foreground-brand);\n    --wcs-breadcrumb-item-icon-font-size: 0.5rem;\n    --wcs-breadcrumb-item-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-breadcrumb-item-link-color: var(--wcs-semantic-color-text-link-default);\n    --wcs-breadcrumb-item-link-color-hover: var(--wcs-semantic-color-text-link-hover);\n    --wcs-breadcrumb-item-link-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-breadcrumb-item-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-breadcrumb-item-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-breadcrumb-item-active-color: var(--wcs-semantic-color-text-primary);\n\n    display: flex;\n    align-items: baseline;\n    max-height: var(--wcs-breadcrumb-item-max-height);\n    font-size: var(--wcs-breadcrumb-item-font-size);\n    color: var(--wcs-breadcrumb-item-active-color);\n    line-height: var(--wcs-breadcrumb-item-line-height);\n\n    ::slotted(a) {\n        display: block;\n        height: 100%;\n        padding: 1px 2px;\n        font-weight: var(--wcs-breadcrumb-item-link-font-weight);\n        color: var(--wcs-breadcrumb-item-link-color);\n        text-decoration: none;\n        border-radius: var(--wcs-breadcrumb-item-border-width-focus);\n    }\n    ::slotted(a:focus-visible ) {\n        @include focus-outline($outline-color: var(--wcs-breadcrumb-item-border-color-focus), $outline-offset: 0, $border-width: var(--wcs-breadcrumb-item-border-width-focus));\n    }\n    ::slotted(a:hover) {\n        text-decoration: underline;\n        color: var(--wcs-breadcrumb-item-link-color-hover);\n    }\n\n    .item-icon {\n        margin-left: calc(var(--wcs-breadcrumb-item-gap) - 2px);\n        font-family: \"icons\";\n        font-size: var(--wcs-breadcrumb-item-icon-font-size);\n        color: var(--wcs-breadcrumb-item-icon-color);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\nimport { ICONS_FONT_CHEVRON_UNICODE } from '../breadcrumb/breadcrumb-constants';\n\n/**\n * The breadcrumb item represents a link inside a breadcrumb.\n * \n * @slot <no-name> Main container slot\n * \n * @cssprop --wcs-breadcrumb-item-max-height - Maximum height of the breadcrumb item\n * @cssprop --wcs-breadcrumb-item-line-height - Line height of the breadcrumb item\n * @cssprop --wcs-breadcrumb-item-font-size - Font size of the breadcrumb item\n * \n * @cssprop --wcs-breadcrumb-item-icon-color - Color of the breadcrumb item icon\n * @cssprop --wcs-breadcrumb-item-icon-font-size - Font size of the breadcrumb item icon\n * \n * @cssprop --wcs-breadcrumb-item-gap - Gap between text and chevron icon\n * @cssprop --wcs-breadcrumb-item-link-color - Color of the breadcrumb item link\n * @cssprop --wcs-breadcrumb-item-link-color-hover - Color of the breadcrumb item link when hovered\n * @cssprop --wcs-breadcrumb-item-link-font-weight - Font weight of the breadcrumb item link\n * \n * @cssprop --wcs-breadcrumb-item-border-width-focus - Border width of the breadcrumb item when focused\n * @cssprop --wcs-breadcrumb-item-border-color-focus - Border color of the breadcrumb item when focused\n * \n * @cssprop --wcs-breadcrumb-item-active-color - Color of the breadcrumb item when the link is active\n */\n@Component({\n    tag: 'wcs-breadcrumb-item',\n    styleUrl: 'breadcrumb-item.scss',\n    shadow: true,\n})\nexport class BreadcrumbItem implements ComponentInterface {\n    /**\n     * Automatically set by the parent breadcrumb.\n     * True if it is the last breadcrumb item.\n     * (You shouldn't set this prop by yourself) \n     * @internal\n     * @ignore\n     */\n    @Prop() last = false;\n\n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot />\n                {!this.last && (\n                    <span class=\"item-icon\" aria-hidden=\"true\">\n                        {ICONS_FONT_CHEVRON_UNICODE}\n                    </span>\n                )}\n            </Host>\n        );\n    }\n}\n"],"mappings":"sFAAA,MAAMA,EAAoB,6wDAC1B,MAAAC,EAAeD,E,MC8BFE,EAAc,M,mCAQR,K,CAEf,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACPH,EAAA,QAAAE,IAAA,8CACEE,KAAKC,MACHL,EAAA,QAAAE,IAAA,2CAAMI,MAAM,YAAW,cAAa,QAC/BC,G"}
+{"version":3,"names":["breadcrumbItemCss","WcsBreadcrumbItemStyle0","BreadcrumbItem","render","h","Host","key","role","this","last","class","ICONS_FONT_CHEVRON_UNICODE"],"sources":["src/components/breadcrumb-item/breadcrumb-item.scss?tag=wcs-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-breadcrumb-item-max-height: var(--wcs-semantic-size-s);\n    --wcs-breadcrumb-item-line-height: var(--wcs-semantic-font-line-height-large);\n    --wcs-breadcrumb-item-font-size: var(--wcs-semantic-font-size-body-3);\n\n    --wcs-breadcrumb-item-icon-color: var(--wcs-semantic-color-foreground-brand);\n    --wcs-breadcrumb-item-icon-font-size: 0.5rem;\n    --wcs-breadcrumb-item-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-breadcrumb-item-link-color: var(--wcs-semantic-color-text-link-default);\n    --wcs-breadcrumb-item-link-color-hover: var(--wcs-semantic-color-text-link-hover);\n    --wcs-breadcrumb-item-link-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-breadcrumb-item-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-breadcrumb-item-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-breadcrumb-item-active-color: var(--wcs-semantic-color-text-primary);\n\n    display: flex;\n    align-items: baseline;\n    max-height: var(--wcs-breadcrumb-item-max-height);\n    font-size: var(--wcs-breadcrumb-item-font-size);\n    color: var(--wcs-breadcrumb-item-active-color);\n    line-height: var(--wcs-breadcrumb-item-line-height);\n\n    ::slotted(a) {\n        display: block;\n        height: 100%;\n        padding: 1px 2px;\n        font-weight: var(--wcs-breadcrumb-item-link-font-weight);\n        color: var(--wcs-breadcrumb-item-link-color);\n        text-decoration: none;\n        border-radius: var(--wcs-breadcrumb-item-border-width-focus);\n    }\n    ::slotted(a:focus-visible ) {\n        @include focus-outline($outline-color: var(--wcs-breadcrumb-item-border-color-focus), $outline-offset: 0, $border-width: var(--wcs-breadcrumb-item-border-width-focus));\n    }\n    ::slotted(a:hover) {\n        text-decoration: underline;\n        color: var(--wcs-breadcrumb-item-link-color-hover);\n    }\n\n    .item-icon {\n        margin-left: calc(var(--wcs-breadcrumb-item-gap) - 2px);\n        font-family: \"icons\";\n        font-size: var(--wcs-breadcrumb-item-icon-font-size);\n        color: var(--wcs-breadcrumb-item-icon-color);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\nimport { ICONS_FONT_CHEVRON_UNICODE } from '../breadcrumb/breadcrumb-constants';\n\n/**\n * The breadcrumb item represents a link inside a breadcrumb.\n * \n * @slot <no-name> Main container slot\n * \n * @cssprop --wcs-breadcrumb-item-max-height - Maximum height of the breadcrumb item\n * @cssprop --wcs-breadcrumb-item-line-height - Line height of the breadcrumb item\n * @cssprop --wcs-breadcrumb-item-font-size - Font size of the breadcrumb item\n * \n * @cssprop --wcs-breadcrumb-item-icon-color - Color of the breadcrumb item icon\n * @cssprop --wcs-breadcrumb-item-icon-font-size - Font size of the breadcrumb item icon\n * \n * @cssprop --wcs-breadcrumb-item-gap - Gap between text and chevron icon\n * @cssprop --wcs-breadcrumb-item-link-color - Color of the breadcrumb item link\n * @cssprop --wcs-breadcrumb-item-link-color-hover - Color of the breadcrumb item link when hovered\n * @cssprop --wcs-breadcrumb-item-link-font-weight - Font weight of the breadcrumb item link\n * \n * @cssprop --wcs-breadcrumb-item-border-width-focus - Border width of the breadcrumb item when focused\n * @cssprop --wcs-breadcrumb-item-border-color-focus - Border color of the breadcrumb item when focused\n * \n * @cssprop --wcs-breadcrumb-item-active-color - Color of the breadcrumb item when the link is active\n */\n@Component({\n    tag: 'wcs-breadcrumb-item',\n    styleUrl: 'breadcrumb-item.scss',\n    shadow: true,\n})\nexport class BreadcrumbItem implements ComponentInterface {\n    /**\n     * Automatically set by the parent breadcrumb.\n     * True if it is the last breadcrumb item.\n     * (You shouldn't set this prop by yourself) \n     * @internal\n     * @ignore\n     */\n    @Prop() last: boolean = false;\n\n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot />\n                {!this.last && (\n                    <span class=\"item-icon\" aria-hidden=\"true\">\n                        {ICONS_FONT_CHEVRON_UNICODE}\n                    </span>\n                )}\n            </Host>\n        );\n    }\n}\n"],"mappings":"sFAAA,MAAMA,EAAoB,6wDAC1B,MAAAC,EAAeD,E,MC8BFE,EAAc,M,mCAQC,K,CAExB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACPH,EAAA,QAAAE,IAAA,8CACEE,KAAKC,MACHL,EAAA,QAAAE,IAAA,2CAAMI,MAAM,YAAW,cAAa,QAC/BC,G"}

package/dist/wcs/p-5607246c.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as s,H as c}from"./p-32e583ea.js";const t=":host{--wcs-card-body-padding:var(--wcs-semantic-spacing-base-300);--wcs-card-body-gap:var(--wcs-semantic-spacing-base);flex:1 1 auto;padding:var(--wcs-card-body-padding)}:host(.horizontal),:host(.vertical){display:flex;flex-direction:column;gap:var(--wcs-card-body-gap)}::slotted(p){margin:0}";const o=t;const r=class{constructor(s){a(this,s);this.orientation=null}async setOrientation(a){this.orientation=a}render(){return s(c,{key:"27547ebfbab0737a4947baf9ff4086d37b494155",class:this.orientation},s("slot",{key:"f9444717438f9981b479b39575c03297b04a5847"}))}};r.style=o;export{r as wcs_card_body};
+//# sourceMappingURL=p-5607246c.entry.js.map

package/dist/wcs/p-5607246c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardBodyCss","WcsCardBodyStyle0","CardBody","setOrientation","orientation","this","render","h","Host","key","class"],"sources":["src/components/card-body/card-body.scss?tag=wcs-card-body&encapsulation=shadow","src/components/card-body/card-body.tsx"],"sourcesContent":[":host {\n    --wcs-card-body-padding: var(--wcs-semantic-spacing-base-300);\n    --wcs-card-body-gap: var(--wcs-semantic-spacing-base);\n\n    flex: 1 1 auto;\n    padding: var(--wcs-card-body-padding);\n}\n\n:host(.horizontal), :host(.vertical) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-card-body-gap);\n}\n\n::slotted(p) {\n    margin: 0;\n}\n","import { Component, ComponentInterface, h, Host, Method, State } from '@stencil/core';\nimport { CardOrientation } from '../card/card-interface';\n\n/**\n * The card-body is a subcomponent of `wcs-card`. It represents content of the card with an extra padding around.\n *\n * @slot default - Default slot for the card body content. You can put anything you want. If you want a structured card, you can use `wcs-card-header`, `wcs-card-content`, and `wcs-card-footer` as slot\n *\n * @cssprop --wcs-card-body-padding - Padding of the card body\n * @cssprop --wcs-card-body-gap - Gap between each element in the card body\n */\n@Component({\n    tag: 'wcs-card-body',\n    styleUrl: 'card-body.scss',\n    shadow: true\n})\nexport class CardBody implements ComponentInterface {\n    @State() private orientation: CardOrientation = null;\n\n    /**\n     * @internal this method is not intended to be used by the user\n     */\n    @Method()\n    async setOrientation(orientation: CardOrientation) {\n        this.orientation = orientation;\n    }\n\n    render() {\n        return (\n            <Host class={this.orientation}>\n                <slot></slot>\n            </Host>\n        );\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,wSACpB,MAAAC,EAAeD,E,MCeFE,EAAQ,M,0CAC+B,I,CAMhD,oBAAMC,CAAeC,GACjBC,KAAKD,YAAcA,C,CAGvB,MAAAE,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOL,KAAKD,aACdG,EAAA,QAAAE,IAAA,6C"}

package/dist/wcs/p-580b3142.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as t,g as e}from"./p-32e583ea.js";import{i,a as r,s as n}from"./p-52d77e1f.js";const c=["title"];const o=class{constructor(t){s(this,t);this.inheritedAttributes={};this.icon=undefined;this.size=undefined}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),r(this.el,c))}async setAriaAttribute(s,t){n(this.nativeIcon,s,t)}render(){const s={class:{[`icons-${this.icon}`]:true,[`icons-size-${this.size}`]:true}};return t("i",Object.assign({key:"429ebd8357f8097d812e43f9bda0921323f7b981"},s,{ref:s=>this.nativeIcon=s},this.inheritedAttributes))}get el(){return e(this)}};export{o as wcs_icon};
+//# sourceMappingURL=p-580b3142.entry.js.map

package/dist/wcs/p-5da0534f.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as i,H as r,g as e}from"./p-32e583ea.js";import{r as o,i as n,a,s as c,t as d}from"./p-52d77e1f.js";const l=":host{--wcs-input-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-input-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-input-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-input-background-color:var(--wcs-semantic-color-background-control-default);--wcs-input-border-radius-left:var(--wcs-semantic-border-radius-base);--wcs-input-border-radius-right:var(--wcs-semantic-border-radius-base);--wcs-input-border-width:var(--wcs-semantic-border-width-default);--wcs-input-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-input-height-l:var(--wcs-semantic-size-l);--wcs-input-height-m:var(--wcs-semantic-size-m);--wcs-input-height-s:var(--wcs-semantic-size-s);--wcs-input-font-size-l:var(--wcs-semantic-font-size-l);--wcs-input-font-size-m:var(--wcs-semantic-font-size-m);--wcs-input-font-size-s:var(--wcs-semantic-font-size-s);--wcs-input-prefix-suffix-background-color:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-input-prefix-suffix-color:var(--wcs-semantic-color-foreground-on-accent);--wcs-input-prefix-suffix-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-input-prefix-suffix-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-input-border-style-default:solid;--wcs-input-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-input-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-input-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-input-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-input-reveal-password-button-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-input-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-input-value-color:var(--wcs-semantic-color-text-primary);--wcs-input-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-input-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-input-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-input-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-input-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-input-min-height:var(--wcs-semantic-size-s);--wcs-input-padding-horizontal-s:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-input-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-input-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-input-gap:var(--wcs-semantic-spacing-base);--wcs-input-host-height:var(--wcs-input-height-m);--wcs-input-font-size:var(--wcs-input-font-size-m);padding-left:calc(var(--wcs-input-padding-horizontal-m));padding-right:calc(var(--wcs-input-padding-horizontal-m));display:flex;width:100%;height:var(--wcs-input-host-height);box-sizing:border-box;border-radius:var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);background-color:var(--wcs-input-background-color);outline:var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);outline-offset:calc(var(--wcs-input-border-width) * -1);background-clip:padding-box;gap:var(--wcs-input-gap)}:host input{overflow:hidden;height:var(--wcs-input-host-height);width:100%;padding:0;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-input-value-color);font-weight:var(--wcs-input-value-font-weight) !important;border:none;font-size:var(--wcs-input-font-size, 1rem);line-height:1.5}:host input::placeholder{color:var(--wcs-input-placeholder-color);opacity:1;font-weight:var(--wcs-input-placeholder-font-weight);font-style:var(--wcs-input-placeholder-font-style)}:host input:focus{box-shadow:none;outline:0}:host button.toggle_password{background:transparent;border:none;color:inherit;cursor:pointer}:host button.toggle_password:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-input-reveal-password-button-border-color-focus);outline-offset:calc(-2 * var(--wcs-input-border-width-focus));border-radius:0.1rem}:host .prefix,:host .suffix{color:var(--wcs-input-prefix-suffix-color);display:flex;white-space:nowrap;align-items:center;font-size:var(--wcs-input-font-size, 1rem);padding:0 calc(var(--wcs-input-padding-horizontal-m) / 2);font-weight:var(--wcs-input-prefix-suffix-font-weight) !important;background-color:var(--wcs-input-prefix-suffix-background-color)}:host .prefix{border-radius:var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left)}:host .suffix{border-radius:0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0}:host wcs-mat-icon{color:var(--wcs-input-icon-color-default)}:host([size=l]){--wcs-input-host-height:var(--wcs-input-height-l);--wcs-input-font-size:var(--wcs-input-font-size-l);padding-left:calc(var(--wcs-input-padding-horizontal-l));padding-right:calc(var(--wcs-input-padding-horizontal-l))}:host([size=m]){--wcs-input-host-height:var(--wcs-input-height-m);--wcs-input-font-size:var(--wcs-input-font-size-m);padding-left:calc(var(--wcs-input-padding-horizontal-m));padding-right:calc(var(--wcs-input-padding-horizontal-m))}:host([size=s]){--wcs-input-host-height:var(--wcs-input-height-s);--wcs-input-font-size:var(--wcs-input-font-size-s);padding-left:calc(var(--wcs-input-padding-horizontal-s));padding-right:calc(var(--wcs-input-padding-horizontal-s))}:host([state=error]){outline-color:var(--wcs-input-border-color-error) !important}:host([data-has-prefix]){padding-left:0}:host([data-has-suffix]){padding-right:0}:host([disabled]){cursor:not-allowed;outline:var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);--wcs-input-background-color:var(--wcs-semantic-color-background-control-disabled)}:host([disabled]) input{cursor:not-allowed;color:var(--wcs-input-text-color-disabled)}:host([disabled]) input::placeholder{color:var(--wcs-input-text-color-disabled)}:host([disabled]) .prefix,:host([disabled]) .suffix{color:var(--wcs-input-prefix-suffix-color-disabled);cursor:text}:host([disabled]) wcs-mat-icon{color:var(--wcs-input-icon-color-disabled);cursor:not-allowed}:host([readonly]){--wcs-input-background-color:var(--wcs-semantic-color-background-control-readonly);--wcs-input-border-width:0}:host(:focus-within){outline:var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);outline-offset:calc(var(--wcs-input-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-input-icon-color-focus)}";const u=l;const h=["tabindex","title"];const p=class{constructor(i){t(this,i);this.wcsInput=s(this,"wcsInput",7);this.wcsChange=s(this,"wcsChange",7);this.wcsBlur=s(this,"wcsBlur",7);this.wcsFocus=s(this,"wcsFocus",7);this.inputId=`wcs-input-${w++}`;this.inheritedAttributes={};this.iconPassword="visibility";this.onInput=t=>{const s=t.target;if(s){this.value=s.value||""}this.wcsInput.emit(t)};this.onChange=t=>{this.wcsChange.emit({value:this.nativeInput.value})};this.onBlur=t=>{if(this.fireFocusEvents){this.wcsBlur.emit(t)}};this.onFocus=t=>{if(this.fireFocusEvents){this.wcsFocus.emit(t)}};this.fireFocusEvents=true;this.passwordReveal=false;this.accept=undefined;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.debounce=0;this.prefixLabel=undefined;this.suffixLabel=undefined;this.disabled=false;this.enterkeyhint=undefined;this.size="m";this.icon=undefined;this.inputmode=undefined;this.max=undefined;this.maxlength=undefined;this.min=undefined;this.minlength=undefined;this.multiple=undefined;this.name=this.inputId;this.hidePasswordButtonAriaLabel="Cacher le mot de passe";this.showPasswordButtonAriaLabel="Afficher le mot de passe";this.pattern=undefined;this.placeholder=undefined;this.readonly=false;this.required=false;this.spellcheck=false;this.state="initial";this.step=undefined;this.type="text";this.value=""}debounceChanged(){this.wcsInput=o(this.wcsInput,this.debounce)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),a(this.el,h))}connectedCallback(){this.debounceChanged();{document.dispatchEvent(new CustomEvent("wcsInputDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("wcsInputDidUnload",{detail:this.el}))}}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}async setAriaAttribute(t,s){c(this.nativeInput,t,s)}getValueAsString(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}passwordRevealIconClick(){this.passwordReveal=!this.passwordReveal}onPasswordRevealChange(){this.iconPassword=this.passwordReveal?"visibility_off":"visibility"}render(){const t=this.getValueAsString();const s=this.inputId+"-lbl";const e=d(this.el);if(e){e.id=s}return i(r,{key:"20899914842d410ef72a8f81906e1e2be6e423cf","aria-disabled":this.disabled?"true":null,"data-has-prefix":!!this.prefixLabel,"data-has-suffix":!!this.suffixLabel},this.prefixLabel?i("span",{class:"prefix",part:"prefix"},this.prefixLabel):null,this.icon?i("wcs-mat-icon",{icon:this.icon,size:"m"}):null,i("input",Object.assign({key:"059fb987112d535b3f1cf51ea9bbaa01f36667c5",class:"native-input",ref:t=>this.nativeInput=t,"aria-labelledby":e?s:null,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalize,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder||"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,type:this.passwordReveal?"text":this.type,value:t,onInput:this.onInput,onChange:this.onChange,onBlur:this.onBlur,onFocus:this.onFocus},this.inheritedAttributes)),this.type==="password"?i("button",{title:this.passwordReveal?this.hidePasswordButtonAriaLabel:this.showPasswordButtonAriaLabel,class:"toggle_password",onClick:()=>this.passwordRevealIconClick()},i("wcs-mat-icon",{icon:this.iconPassword,size:"m"})):null,this.suffixLabel?i("span",{class:"suffix",part:"suffix"},this.suffixLabel):null)}static get delegatesFocus(){return true}get el(){return e(this)}static get watchers(){return{debounce:["debounceChanged"],passwordReveal:["onPasswordRevealChange"]}}};let w=0;p.style=u;export{p as wcs_input};
+//# sourceMappingURL=p-5da0534f.entry.js.map

package/dist/wcs/p-5da0534f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inputCss","WcsInputStyle0","INPUT_INHERITED_ATTRS","Input","this","inputId","inputIds","inheritedAttributes","iconPassword","onInput","ev","input","target","value","wcsInput","emit","onChange","_","wcsChange","nativeInput","onBlur","fireFocusEvents","wcsBlur","onFocus","wcsFocus","debounceChanged","debounceEvent","debounce","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","connectedCallback","document","dispatchEvent","CustomEvent","detail","disconnectedCallback","setBlur","blur","getInputElement","Promise","resolve","setAriaAttribute","attr","setOrRemoveAttribute","getValueAsString","toString","passwordRevealIconClick","passwordReveal","onPasswordRevealChange","render","labelId","label","findItemLabel","id","h","Host","key","disabled","prefixLabel","suffixLabel","class","part","icon","size","ref","accept","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","min","max","minLength","minlength","maxLength","maxlength","multiple","name","pattern","placeholder","readOnly","readonly","required","spellcheck","step","type","title","hidePasswordButtonAriaLabel","showPasswordButtonAriaLabel","onClick"],"sources":["src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../../style/placeholder.scss';\n\n:host {\n    --wcs-input-icon-color-default: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-focus: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-default);\n\n    --wcs-input-border-radius-left: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n    --wcs-input-border-radius-right: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n\n    --wcs-input-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-input-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-input-height-l: var(--wcs-semantic-size-l);\n    --wcs-input-height-m: var(--wcs-semantic-size-m);\n    --wcs-input-height-s: var(--wcs-semantic-size-s);\n    --wcs-input-font-size-l: var(--wcs-semantic-font-size-l);\n    --wcs-input-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-input-font-size-s: var(--wcs-semantic-font-size-s);\n\n    --wcs-input-prefix-suffix-background-color: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-input-prefix-suffix-color: var(--wcs-semantic-color-foreground-on-accent);\n    --wcs-input-prefix-suffix-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-input-prefix-suffix-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-border-style-default: solid;\n    --wcs-input-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-input-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-input-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n    --wcs-input-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n    --wcs-input-reveal-password-button-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-input-border-color-error: var(--wcs-semantic-color-border-critical);\n\n    --wcs-input-value-color: var(--wcs-semantic-color-text-primary);\n    --wcs-input-value-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-input-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-input-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n    --wcs-input-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-input-min-height: var(--wcs-semantic-size-s);\n    --wcs-input-padding-horizontal-s: calc(1.5 * var(--wcs-semantic-spacing-base));\n    --wcs-input-padding-horizontal-m: var(--wcs-semantic-spacing-large);\n    --wcs-input-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n    --wcs-input-gap: var(--wcs-semantic-spacing-base);\n\n    // Default\n    --wcs-input-host-height: var(--wcs-input-height-m);\n    --wcs-input-font-size: var(--wcs-input-font-size-m);\n    padding-left: calc(var(--wcs-input-padding-horizontal-m));\n    padding-right: calc(var(--wcs-input-padding-horizontal-m));\n\n    display: flex;\n    width: 100%;\n    height: var(--wcs-input-host-height);\n    box-sizing: border-box;\n    border-radius: var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);\n    background-color: var(--wcs-input-background-color);\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);\n    outline-offset: calc(var(--wcs-input-border-width) * -1);\n    background-clip: padding-box;\n\n    gap: var(--wcs-input-gap);\n\n    input {\n        overflow: hidden;\n        height: var(--wcs-input-host-height);\n        width: 100%;\n        padding: 0; // Reset padding from user agent stylesheet, it's the container that will handle padding\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-input-value-color);\n        font-weight: var(--wcs-input-value-font-weight) !important;\n        border: none;\n        font-size: var(--wcs-input-font-size, 1rem);\n        line-height: 1.5;\n\n        &::placeholder {\n            @include placeholder(var(--wcs-input-placeholder-color), var(--wcs-input-placeholder-font-weight), var(--wcs-input-placeholder-font-style));\n        }\n    }\n\n    input:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    button.toggle_password {\n        background: transparent;\n        border: none;\n        color: inherit;\n\n        cursor: pointer;\n\n\n        &:focus-visible {\n            @include focus-outline(var(--wcs-input-reveal-password-button-border-color-focus), $outline-offset: calc(-2 * var(--wcs-input-border-width-focus)));\n        }\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color);\n        display: flex;\n        white-space: nowrap;\n        align-items: center;\n        font-size: var(--wcs-input-font-size, 1rem);\n        padding: 0 calc(var(--wcs-input-padding-horizontal-m) / 2);\n        font-weight: var(--wcs-input-prefix-suffix-font-weight) !important;\n        background-color: var(--wcs-input-prefix-suffix-background-color);\n    }\n\n    .prefix {\n        border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n    }\n\n    .suffix {\n        border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-default);\n    }\n}\n\n:host([size=l]) {\n    --wcs-input-host-height: var(--wcs-input-height-l);\n    --wcs-input-font-size: var(--wcs-input-font-size-l);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-l));\n    padding-right: calc(var(--wcs-input-padding-horizontal-l));\n}\n\n:host([size=m]) { // Default\n    --wcs-input-host-height: var(--wcs-input-height-m);\n    --wcs-input-font-size: var(--wcs-input-font-size-m);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-m));\n    padding-right: calc(var(--wcs-input-padding-horizontal-m));\n}\n\n:host([size=s]) {\n    --wcs-input-host-height: var(--wcs-input-height-s);\n    --wcs-input-font-size: var(--wcs-input-font-size-s);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-s));\n    padding-right: calc(var(--wcs-input-padding-horizontal-s));\n}\n\n:host([state=error]) {\n    outline-color: var(--wcs-input-border-color-error) !important;\n}\n\n:host([data-has-prefix]) {\n    padding-left: 0;\n}\n\n:host([data-has-suffix]) {\n    padding-right: 0;\n}\n\n:host([disabled]) {\n    cursor: not-allowed; // padding is handled by the container, so we need to set cursor not allowed on it\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-disabled);\n\n    input {\n        cursor: not-allowed;\n        color: var(--wcs-input-text-color-disabled);\n\n        &::placeholder {\n            color: var(--wcs-input-text-color-disabled);\n        }\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color-disabled);\n        cursor: text; // reset cursor to text for prefix and suffix, to be able to select text\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host([readonly]) {\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-readonly);\n    --wcs-input-border-width: 0;\n}\n\n:host(:focus-within) {\n    outline: var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);\n    outline-offset: calc(var(--wcs-input-border-width-focus) * -1);\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-focus);\n    }\n}\n","import {\n    Build,\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    debounceEvent,\n    findItemLabel,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport {\n    AutocompleteTypes,\n    InputChangeEventDetail,\n    TextFieldTypes,\n    WcsInputSize,\n    WcsInputAutocorrect,\n    WcsInputEnterKeyHint,\n    WcsInputInputMode,\n    WcsInputState\n} from './input-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst INPUT_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The input component is a form control that accepts a single line of text.\n * Implementation mainly inspired from Ionic Input Component.\n *\n * ## Accessibility guidelines 💡\n * > - If you use wcs-input outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n * \n * @cssprop --wcs-input-icon-color-default - default icon color when the input is not focused\n * @cssprop --wcs-input-icon-color-focus - icon color when the input is focused\n * @cssprop --wcs-input-icon-color-disabled - icon color when the input is disabled\n *\n * @cssprop --wcs-input-background-color - background color of the input\n *\n * @cssprop --wcs-input-border-radius-left - border radius of the left side of the input\n * @cssprop --wcs-input-border-radius-right - border radius of the right side of the input\n * \n * @cssprop --wcs-input-border-width - border width of the input\n * @cssprop --wcs-input-border-width-focus - border width of the input when focused\n *\n * @cssprop --wcs-input-height-l - large height of the input\n * @cssprop --wcs-input-height-m - medium height of the input\n * @cssprop --wcs-input-height-s - small height of the input\n * @cssprop --wcs-input-font-size-l - large font size of the input\n * @cssprop --wcs-input-font-size-m - medium font size of the input\n * @cssprop --wcs-input-font-size-s - small font size of the input\n *\n * @cssprop --wcs-input-border-style-default - default border style of the input\n * @cssprop --wcs-input-border-style-focus - border style of the input when focused\n * \n * @cssprop --wcs-input-prefix-suffix-background-color - background color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color - color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color-disabled - color of the suffix/prefix when the input is disabled\n * @cssprop --wcs-input-prefix-suffix-font-weight - font weight of the suffix/prefix\n *\n * @cssprop --wcs-input-border-color-default - default border color of the input when not focused\n * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled\n * @cssprop --wcs-input-border-color-focus - border color of the input when focused\n * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused\n * @cssprop --wcs-input-border-color-error - border color of the input when in error state\n *\n * @cssprop --wcs-input-value-color - color of the input value\n * @cssprop --wcs-input-value-font-weight - font weight of the input value\n * \n * @cssprop --wcs-input-placeholder-color - color of the input placeholder\n * @cssprop --wcs-input-placeholder-font-weight - font weight of the input placeholder\n * @cssprop --wcs-input-placeholder-font-style - font style of the input placeholder\n * \n * @cssprop --wcs-input-text-color-disabled - color of the input when disabled\n *\n * @cssprop --wcs-input-padding-horizontal-s - horizontal padding of the input in small size\n * @cssprop --wcs-input-padding-horizontal-m - horizontal padding of the input in medium size\n * @cssprop --wcs-input-padding-horizontal-l - horizontal padding of the input in large size\n * \n * @cssprop --wcs-input-gap - gap between text input and icon\n */\n@Component({\n    tag: 'wcs-input',\n    styleUrl: 'input.scss',\n    shadow: { delegatesFocus: true },\n})\nexport class Input implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput?: HTMLInputElement;\n    private inputId = `wcs-input-${inputIds++}`;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private iconPassword = \"visibility\";\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents: boolean = true;\n\n    @State() private passwordReveal: boolean = false;\n\n    /**\n     * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the\n     * server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n     */\n    @Prop() accept?: string;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n     */\n    @Prop() autocapitalize = 'off';\n\n    /**\n     * Indicates whether the value of the control can be automatically completed by the browser.\n     */\n    @Prop() autocomplete: AutocompleteTypes = 'off';\n\n    /**\n     * Whether auto correction should be enabled when the user is entering/editing the text value.\n     */\n    @Prop() autocorrect: WcsInputAutocorrect = 'off';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus: boolean = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n     * This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n    }\n\n    /**\n     * Prefix displayed before the text field contents. This is not included in the value.\n     */\n    @Prop() prefixLabel: string;\n\n    /**\n     * Suffix displayed after the text field contents. This is not included in the value.\n     */\n    @Prop() suffixLabel: string;\n\n    /**\n     * If `true`, the user cannot interact with the input.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     */\n    @Prop() enterkeyhint?: WcsInputEnterKeyHint;\n\n    /**\n     * Specify the size (height) of the input.\n     */\n    @Prop({reflect: true}) size: WcsInputSize = 'm';\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     */\n    @Prop() inputmode?: WcsInputInputMode;\n\n    /**\n     * The maximum value, which must not be less than its minimum (min attribute) value.\n     */\n    @Prop() max?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * The minimum value, which must not be greater than its maximum (max attribute) value.\n     */\n    @Prop() min?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to\n     * `\"email\"` or `\"file\"`, otherwise it is ignored.\n     */\n    @Prop({ reflect: true }) multiple?: boolean;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    @Prop() hidePasswordButtonAriaLabel: string = \"Cacher le mot de passe\";\n    @Prop() showPasswordButtonAriaLabel: string = \"Afficher le mot de passe\";\n\n    /**\n     * A regular expression that the value is checked against. The pattern must match the entire value, not just some\n     * subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value\n     * of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise\n     * it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support\n     * the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for\n     * more information.\n     */\n    @Prop() pattern?: string;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop({ reflect: true }) readonly: boolean = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop({ reflect: true }) required: boolean = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck: boolean = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error'\n     * state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: WcsInputState = 'initial';\n\n    /**\n     * Works with the min and max attributes to limit the increments at which a value can be set.\n     * Possible values are: `\"any\"` or a positive floating point number.\n     */\n    @Prop() step?: string;\n\n    /**\n     * The type of control to display. The default type is text.\n     */\n    @Prop() type: TextFieldTypes = 'text';\n\n    /**\n     * The value of the input.\n     */\n    @Prop({mutable: true}) value?: string | number | null = '';\n\n    /**\n     * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the value has changed. See https://developer.mozilla.org/en-US/docs/Web/Events/change\n     */\n    @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, INPUT_INHERITED_ATTRS)\n        };\n    }\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    /**\n     * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<input>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLInputElement> {\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n    \n    private getValueAsString(): string {\n        return typeof this.value === 'number' ? this.value.toString() :\n            (this.value || '').toString();\n    }\n\n    private onInput = (ev: Event) => {\n        const input = ev.target as HTMLInputElement | null;\n        if (input) {\n            this.value = input.value || '';\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n\n    private onChange = (_: Event) => {\n        this.wcsChange.emit({value: this.nativeInput.value});\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private passwordRevealIconClick(): void {\n        this.passwordReveal = !this.passwordReveal;\n    }\n\n    @Watch('passwordReveal')\n    onPasswordRevealChange(): void {\n        this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n    }\n\n    render() {\n        const value = this.getValueAsString();\n        const labelId = this.inputId + '-lbl';\n        const label = findItemLabel(this.el);\n        if (label) {\n            label.id = labelId;\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n                data-has-prefix={!!this.prefixLabel}\n                data-has-suffix={!!this.suffixLabel}\n            >\n                {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <input\n                    class=\"native-input\"\n                    ref={input => this.nativeInput = input}\n                    aria-labelledby={label ? labelId : null}\n                    disabled={this.disabled}\n                    accept={this.accept}\n                    autoCapitalize={this.autocapitalize}\n                    autoComplete={this.autocomplete}\n                    autoCorrect={this.autocorrect}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    min={this.min}\n                    max={this.max}\n                    minLength={this.minlength}\n                    maxLength={this.maxlength}\n                    multiple={this.multiple}\n                    name={this.name}\n                    pattern={this.pattern}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    step={this.step}\n                    type={this.passwordReveal ? 'text' : this.type}\n                    value={value}\n                    onInput={this.onInput}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    {...this.inheritedAttributes}\n                />\n                {this.type === \"password\" ? (\n                    <button title={this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel} class=\"toggle_password\" onClick={() => this.passwordRevealIconClick()}>\n                        <wcs-mat-icon icon={this.iconPassword} size=\"m\"></wcs-mat-icon>\n                    </button>\n                ) : null}\n                {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n            </Host>\n        );\n    }\n}\n\nlet inputIds = 0;\n"],"mappings":"2HAAA,MAAMA,EAAW,i/MACjB,MAAAC,EAAeD,ECgCf,MAAME,EAAwB,CAAC,WAAY,S,MA+D9BC,EAAK,M,qKAGNC,KAAAC,QAAU,aAAaC,MACvBF,KAAAG,oBAA4C,GAC5CH,KAAAI,aAAe,aAyPfJ,KAAAK,QAAWC,IACf,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACPP,KAAKS,MAAQF,EAAME,OAAS,E,CAEhCT,KAAKU,SAASC,KAAKL,EAAoB,EAGnCN,KAAAY,SAAYC,IAChBb,KAAKc,UAAUH,KAAK,CAACF,MAAOT,KAAKe,YAAYN,OAAO,EAGhDT,KAAAgB,OAAUV,IACd,GAAIN,KAAKiB,gBAAiB,CACtBjB,KAAKkB,QAAQP,KAAKL,E,GAIlBN,KAAAmB,QAAWb,IACf,GAAIN,KAAKiB,gBAAiB,CACtBjB,KAAKoB,SAAST,KAAKL,E,wBAnQQ,K,oBAEQ,M,0CAYlB,M,kBAKiB,M,iBAKC,M,eAKd,M,cAMV,E,oEAoB0B,M,sCAUD,I,uKA2CrBN,KAAKC,Q,iCAEkB,yB,iCACA,2B,gEAoBD,M,cAKA,M,gBAKf,M,WAMgB,U,8BAWf,O,WAKyB,E,CA7H9C,eAAAoB,GACNrB,KAAKU,SAAWY,EAActB,KAAKU,SAAUV,KAAKuB,S,CAkJtD,iBAAAC,GACIxB,KAAKG,oBAAmBsB,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsB3B,KAAK4B,KAC3BC,EAAkB7B,KAAK4B,GAAI9B,G,CAItC,iBAAAgC,GACI9B,KAAKqB,kBACgB,CACjBU,SAASC,cAAc,IAAIC,YAAY,kBAAmB,CACtDC,OAAQlC,KAAK4B,K,EAKzB,oBAAAO,GACyB,CACjBJ,SAASC,cAAc,IAAIC,YAAY,oBAAqB,CACxDC,OAAQlC,KAAK4B,K,EAWzB,aAAMQ,GACF,GAAIpC,KAAKe,YAAa,CAClBf,KAAKe,YAAYsB,M,EAQzB,eAAAC,GACI,OAAOC,QAAQC,QAAQxC,KAAKe,Y,CAIhC,sBAAM0B,CAAiBC,EAAyBjC,GAC5CkC,EAAqB3C,KAAKe,YAAa2B,EAAMjC,E,CAGzC,gBAAAmC,GACJ,cAAc5C,KAAKS,QAAU,SAAWT,KAAKS,MAAMoC,YAC9C7C,KAAKS,OAAS,IAAIoC,U,CA2BnB,uBAAAC,GACJ9C,KAAK+C,gBAAkB/C,KAAK+C,c,CAIhC,sBAAAC,GACIhD,KAAKI,aAAeJ,KAAK+C,eAAiB,iBAAmB,Y,CAGjE,MAAAE,GACI,MAAMxC,EAAQT,KAAK4C,mBACnB,MAAMM,EAAUlD,KAAKC,QAAU,OAC/B,MAAMkD,EAAQC,EAAcpD,KAAK4B,IACjC,GAAIuB,EAAO,CACPA,EAAME,GAAKH,C,CAGf,OACII,EAACC,EAAI,CAAAC,IAAA,2DACcxD,KAAKyD,SAAW,OAAS,KAAI,oBACzBzD,KAAK0D,YAAW,oBAChB1D,KAAK2D,aAEvB3D,KAAK0D,YAAeJ,EAAA,QAAMM,MAAM,SAASC,KAAK,UAAU7D,KAAK0D,aAAuB,KACpF1D,KAAK8D,KAAQR,EAAA,gBAAcQ,KAAM9D,KAAK8D,KAAMC,KAAK,MAAuB,KACzET,EAAA,QAAA7B,OAAAC,OAAA,CAAA8B,IAAA,2CACII,MAAM,eACNI,IAAKzD,GAASP,KAAKe,YAAcR,EAAK,kBACrB4C,EAAQD,EAAU,KACnCO,SAAUzD,KAAKyD,SACfQ,OAAQjE,KAAKiE,OACbC,eAAgBlE,KAAKmE,eACrBC,aAAcpE,KAAKqE,aACnBC,YAAatE,KAAKuE,YAClBC,UAAWxE,KAAKyE,UAChBC,aAAc1E,KAAK2E,aACnBC,UAAW5E,KAAK6E,UAChBC,IAAK9E,KAAK8E,IACVC,IAAK/E,KAAK+E,IACVC,UAAWhF,KAAKiF,UAChBC,UAAWlF,KAAKmF,UAChBC,SAAUpF,KAAKoF,SACfC,KAAMrF,KAAKqF,KACXC,QAAStF,KAAKsF,QACdC,YAAavF,KAAKuF,aAAe,GACjCC,SAAUxF,KAAKyF,SACfC,SAAU1F,KAAK0F,SACfC,WAAY3F,KAAK2F,WACjBC,KAAM5F,KAAK4F,KACXC,KAAM7F,KAAK+C,eAAiB,OAAS/C,KAAK6F,KAC1CpF,MAAOA,EACPJ,QAASL,KAAKK,QACdO,SAAUZ,KAAKY,SACfI,OAAQhB,KAAKgB,OACbG,QAASnB,KAAKmB,SACVnB,KAAKG,sBAEZH,KAAK6F,OAAS,WACXvC,EAAA,UAAQwC,MAAO9F,KAAK+C,eAAiB/C,KAAK+F,4BAA8B/F,KAAKgG,4BAA6BpC,MAAM,kBAAkBqC,QAAS,IAAMjG,KAAK8C,2BAClJQ,EAAA,gBAAcQ,KAAM9D,KAAKI,aAAc2D,KAAK,OAEhD,KACH/D,KAAK2D,YAAeL,EAAA,QAAMM,MAAM,SAASC,KAAK,UAAU7D,KAAK2D,aAAuB,K,wKAMrG,IAAIzD,EAAW,E"}

package/dist/wcs/p-5e8fff73.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as s,g as a}from"./p-32e583ea.js";import{S as c}from"./p-84e22272.js";const r=":host{--wcs-native-select-line-height:var(--wcs-semantic-font-line-height-large);--wcs-native-select-size-m:var(--wcs-semantic-size-m);--wcs-native-select-font-size-m:var(--wcs-semantic-font-size-m);--wcs-native-select-size-l:var(--wcs-semantic-size-l);--wcs-native-select-font-size-l:var(--wcs-semantic-font-size-l);--wcs-native-select-border-radius:var(--wcs-semantic-border-radius-base);--wcs-native-select-background-color:var(--wcs-semantic-color-background-control-default);--wcs-native-select-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-native-select-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-native-select-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-native-select-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-native-select-border-style-default:solid;--wcs-native-select-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-native-select-border-width:var(--wcs-semantic-border-width-default);--wcs-native-select-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-native-select-value-color:var(--wcs-semantic-color-text-primary);--wcs-native-select-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-native-select-value-font-style:normal;--wcs-native-select-internal-padding-horizontal:var(--wcs-native-select-padding-horizontal-m);--wcs-native-select-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-native-select-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-native-select-arrow-color:var(--wcs-semantic-color-foreground-brand);--wcs-native-select-arrow-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-native-select-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-native-select-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-native-select-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-native-select-option-color:var(--wcs-semantic-color-text-primary);--wcs-native-select-option-font-style:normal;--wcs-native-select-option-selected-color:var(--wcs-semantic-color-text-primary)}::slotted(select){box-sizing:border-box;-moz-appearance:none !important;-webkit-appearance:none !important;appearance:none !important;background-color:var(--wcs-native-select-background-color);color:var(--wcs-native-select-value-color);border-radius:var(--wcs-native-select-border-radius);border:none;outline:var(--wcs-native-select-border-style-default) var(--wcs-native-select-border-width) var(--wcs-native-select-border-color-default);outline-offset:calc(var(--wcs-native-select-border-width) * -1);user-select:none;cursor:pointer;line-height:var(--wcs-native-select-line-height);font-size:inherit;opacity:1;max-width:100%;flex-grow:1;padding-right:calc(var(--wcs-native-select-internal-padding-horizontal) + 24px);padding-left:var(--wcs-native-select-internal-padding-horizontal)}::slotted(select:disabled){cursor:not-allowed;color:var(--wcs-native-select-text-color-disabled);outline:var(--wcs-native-select-border-style-default) var(--wcs-native-select-border-width) var(--wcs-native-select-border-color-disabled);--wcs-native-select-background-color:var(--wcs-semantic-color-background-control-disabled);--wcs-native-select-value-color:var(--wcs-native-select-text-color-disabled)}::slotted(select[aria-invalid=true]){outline-style:var(--wcs-native-select-border-style-default);outline-color:var(--wcs-native-select-border-color-error) !important;outline-offset:calc(var(--wcs-native-select-border-width) * -1)}:host([data-disabled]) .select-wrapper .arrow-container .arrow{fill:var(--wcs-native-select-arrow-color-disabled)}:host,:host([data-size=m]){font-size:var(--wcs-native-select-font-size-m);--wcs-native-select-internal-padding-horizontal:var(--wcs-native-select-padding-horizontal-m)}:host ::slotted(select),:host([data-size=m]) ::slotted(select){height:var(--wcs-native-select-size-m)}:host([data-size=l]){font-size:var(--wcs-native-select-font-size-l);--wcs-native-select-internal-padding-horizontal:var(--wcs-native-select-padding-horizontal-l)}:host([data-size=l]) ::slotted(select){height:var(--wcs-native-select-size-l)}::slotted(select:focus-visible){outline:var(--wcs-native-select-border-style-focus) var(--wcs-native-select-border-width-focus) var(--wcs-native-select-border-color-focus);outline-offset:calc(var(--wcs-native-select-border-width-focus) * -1)}.select-wrapper{position:relative;display:flex;flex-wrap:nowrap}svg{flex-shrink:0}.arrow{fill:var(--wcs-native-select-arrow-color)}.arrow-container{pointer-events:none;display:flex;align-items:center;vertical-align:center;position:absolute;top:0;bottom:0;right:calc(var(--wcs-native-select-internal-padding-horizontal) - 4px);margin:auto 0}";const i=r;const o=class{constructor(t){e(this,t);this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST=["disabled"];this.size="m";this.required=false;this.expanded=false;this.disabled=undefined}requiredChanged(e,t){if(e!==t){if(!this.selectElement)return;this.selectElement.required=this.required}}componentWillLoad(){this.selectElement=this.el.querySelector("select");if(!this.selectElement)throw new Error("wcs-native-select must be used with a native slotted select, please refer to the documentation.");this.onSelectedOptionChange();this.selectElement.addEventListener("change",(()=>{this.onSelectedOptionChange()}));this.observer=new MutationObserver((e=>{const t=e.filter((e=>this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(e.attributeName))).length>0;if(t){this.updateHostAttributeWithSlottedSelect()}if(e.filter((e=>e.attributeName==="class")).length>0){this._updateStyles()}}));this.updateHostAttributeWithSlottedSelect();this.observer.observe(this.selectElement,{attributes:true})}async setAriaAttribute(e,t){if(!this.selectElement)return;this.selectElement.setAttribute(e,t)}onSelectedOptionChange(){this._updateStyles()}_updateStyles(){if(this.isPlaceholderOptionSelected()){this.applyPlaceholderStylesOnNativeSlottedSelectElement()}else{this.applySelectedOptionStylesOnNativeSlottedSelectElement()}}isPlaceholderOptionSelected(){var e;return((e=Array.from(this.selectElement.options).filter((e=>e.selected))[0])===null||e===void 0?void 0:e.disabled)==true}applySelectedOptionStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-native-select-value-color)";this.selectElement.style.fontStyle="var(--wcs-native-select-value-font-style)";this.selectElement.style.fontWeight="var(--wcs-native-select-value-font-weight)";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="var(--wcs-native-select-option-font-style)";if(!e.disabled){e.style.color="var(--wcs-native-select-option-color)"}}))}applyPlaceholderStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-native-select-placeholder-color)";this.selectElement.style.fontWeight="var(--wcs-native-select-placeholder-font-weight)";this.selectElement.style.fontStyle="var(--wcs-native-select-placeholder-font-style)";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="var(--wcs-native-select-option-font-style)";if(!e.disabled){e.style.color="var(--wcs-native-select-option-color)"}}))}updateHostAttributeWithSlottedSelect(){var e;this.disabled=(e=this.selectElement)===null||e===void 0?void 0:e.hasAttribute("disabled")}disconnectedCallback(){var e,t;(e=this.observer)===null||e===void 0?void 0:e.disconnect();(t=this.selectElement)===null||t===void 0?void 0:t.removeEventListener("change",(()=>{this.onSelectedOptionChange()}))}async updateStyles(){this._updateStyles()}render(){return t(s,{key:"dedd08d93118cc5323b6d2062577275504972b12",class:`${this.expanded?"expanded":""}`,"data-disabled":this.disabled,"data-size":this.size},t("div",{key:"bd211e20d0ab314767729ab54611c3d28fb8cca7",class:"select-wrapper"},t("slot",{key:"b0e58a954d0212c19a05395065ad5ed76efa9f39"}),t("div",{key:"5f70166ee1756180982a43151b9762e1cfec51d4",class:"arrow-container"},t(c,{key:"ed256e18a87ab7cf17af6b5226ee6f10779d5bb1",up:this.expanded}))))}get el(){return a(this)}static get watchers(){return{required:["requiredChanged"]}}};o.style=i;export{o as wcs_native_select};
+//# sourceMappingURL=p-5e8fff73.entry.js.map

package/dist/wcs/p-5e8fff73.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nativeSelectCss","WcsNativeSelectStyle0","NativeSelect","this","SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST","requiredChanged","newValue","oldValue","selectElement","required","componentWillLoad","el","querySelector","Error","onSelectedOptionChange","addEventListener","observer","MutationObserver","mutations","hasSpiedAttrMutation","filter","m","includes","attributeName","length","updateHostAttributeWithSlottedSelect","_updateStyles","observe","attributes","setAriaAttribute","attr","value","setAttribute","isPlaceholderOptionSelected","applyPlaceholderStylesOnNativeSlottedSelectElement","applySelectedOptionStylesOnNativeSlottedSelectElement","_a","Array","from","options","o","selected","disabled","style","color","fontStyle","fontWeight","forEach","option","hasAttribute","disconnectedCallback","disconnect","_b","removeEventListener","updateStyles","render","h","Host","key","class","expanded","size","SelectArrow","up"],"sources":["src/components/native-select/native-select.scss?tag=wcs-native-select&encapsulation=shadow","src/components/native-select/native-select.tsx"],"sourcesContent":[":host {\n    --wcs-native-select-line-height: var(--wcs-semantic-font-line-height-large);\n\n    --wcs-native-select-size-m: var(--wcs-semantic-size-m);\n    --wcs-native-select-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-native-select-size-l: var(--wcs-semantic-size-l);\n    --wcs-native-select-font-size-l: var(--wcs-semantic-font-size-l);\n\n    --wcs-native-select-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-control-default);\n\n    --wcs-native-select-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-native-select-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n    --wcs-native-select-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n    --wcs-native-select-border-color-error: var(--wcs-semantic-color-border-critical);\n\n    --wcs-native-select-border-style-default: solid;\n    --wcs-native-select-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-native-select-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-native-select-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-native-select-value-color: var(--wcs-semantic-color-text-primary);\n    --wcs-native-select-value-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-native-select-value-font-style: normal; // ⚠️ UPDATE IN JS, IF REFACTOR THE NAME REFACTOR IN THE JS CODE\n\n    --wcs-native-select-internal-padding-horizontal: var(--wcs-native-select-padding-horizontal-m);\n    --wcs-native-select-padding-horizontal-m: var(--wcs-semantic-spacing-large);\n    --wcs-native-select-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n\n    --wcs-native-select-arrow-color: var(--wcs-semantic-color-foreground-brand);\n    --wcs-native-select-arrow-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-native-select-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-native-select-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-native-select-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n    --wcs-native-select-option-color: var(--wcs-semantic-color-text-primary);\n    --wcs-native-select-option-font-style: normal;\n\n    --wcs-native-select-option-selected-color: var(--wcs-semantic-color-text-primary);\n}\n\n::slotted(select) {\n    box-sizing: border-box;\n    -moz-appearance:none !important;\n    -webkit-appearance: none !important;\n    appearance: none !important;\n\n    background-color: var(--wcs-native-select-background-color);\n\n    color: var(--wcs-native-select-value-color);\n\n    border-radius: var(--wcs-native-select-border-radius);\n    border: none;\n\n    outline: var(--wcs-native-select-border-style-default) var(--wcs-native-select-border-width) var(--wcs-native-select-border-color-default);\n    outline-offset: calc(var(--wcs-native-select-border-width) * -1);\n    user-select: none;\n    cursor: pointer;\n    line-height: var(--wcs-native-select-line-height);\n    font-size: inherit;\n    opacity: 1; // user agent set 0.7 opacity on select by default when disabled (https://github.com/tailwindlabs/tailwindcss/discussions/11792#discussioncomment-6696015)\n\n    max-width: 100%;\n    flex-grow: 1;\n    padding-right: calc(var(--wcs-native-select-internal-padding-horizontal) + 24px); // To not let text overflow on arrow icon, we add 24px of padding\n    padding-left: var(--wcs-native-select-internal-padding-horizontal);\n}\n\n::slotted(select:disabled) {\n    cursor: not-allowed;\n    color: var(--wcs-native-select-text-color-disabled);\n    outline: var(--wcs-native-select-border-style-default) var(--wcs-native-select-border-width) var(--wcs-native-select-border-color-disabled);\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-control-disabled);\n    --wcs-native-select-value-color: var(--wcs-native-select-text-color-disabled);\n}\n\n::slotted(select[aria-invalid=true]) {\n    outline-style: var(--wcs-native-select-border-style-default);\n    outline-color: var(--wcs-native-select-border-color-error) !important;\n    outline-offset: calc(var(--wcs-native-select-border-width) * -1);\n}\n\n:host([data-disabled]) {\n    .select-wrapper {\n        .arrow-container {\n            .arrow {\n                fill: var(--wcs-native-select-arrow-color-disabled);\n            }\n        }\n    }\n}\n\n:host, :host([data-size=m])  { // Default\n    font-size: var(--wcs-native-select-font-size-m);\n    --wcs-native-select-internal-padding-horizontal: var(--wcs-native-select-padding-horizontal-m);\n\n    ::slotted(select) {\n        height: var(--wcs-native-select-size-m);\n    }\n}\n\n:host([data-size=l]) {\n    font-size: var(--wcs-native-select-font-size-l);\n    --wcs-native-select-internal-padding-horizontal: var(--wcs-native-select-padding-horizontal-l);\n\n    ::slotted(select) {\n        height: var(--wcs-native-select-size-l);\n    }\n}\n\n::slotted(select:focus-visible) {\n    outline: var(--wcs-native-select-border-style-focus) var(--wcs-native-select-border-width-focus) var(--wcs-native-select-border-color-focus);\n    outline-offset: calc(var(--wcs-native-select-border-width-focus) * -1);\n}\n\n.select-wrapper {\n    position: relative;\n\n    display: flex;\n    flex-wrap: nowrap;\n}\n\n// So the arrow on the right doesn't shrink when text overflows.\nsvg {\n    flex-shrink: 0;\n}\n\n.arrow {\n    fill: var(--wcs-native-select-arrow-color);\n}\n\n.arrow-container {\n    pointer-events: none;\n    display: flex;\n    align-items: center;\n    vertical-align: center;\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: calc(var(--wcs-native-select-internal-padding-horizontal) - 4px); // 4px is the blank space inside the arrow svg on the right\n    margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element, Method, Watch } from '@stencil/core';\n\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsNativeSelectSize } from './native-select-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/**\n * The `wcs-native-select` component is designed to accept a native `<select>` element as a slotted child. This choice\n * allows developers to bind the `<select>` element using the framework of their choice, without the need to re-expose all the\n * properties of the `<select>` and `<option>` elements in this component.\n *\n * The component wraps the native `<select>` element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * ### ✅ Guidance\n *\n * - To have a placeholder, you must have an option as child which has `selected` attribute and `disabled`\n * attribute. You can add the `hidden` attribute to don't show the placeholder option in the options overlay.\n *\n * ### Example usage\n *\n * ```html\n * <wcs-native-select>\n *   <select>\n *     <option value=\"option1\">Option 1</option>\n *     <option value=\"option2\">Option 2</option>\n *     <option value=\"option3\">Option 3</option>\n *   </select>\n * </wcs-native-select>\n * ```\n *\n * ### Note\n * - We did not find a way to detect when the select is reset, if you want to apply the placeholder style when the\n * select is reset, you have to call the `updateStyles()` method manually.\n * - It is strongly recommended to use native-select when you don't have to support the multi-selection feature\n * - Use a native-select instead of a wcs-select if your application is mainly on mobile / tablet. The native behavior of the device will be used.\n *\n * @cssprop --wcs-native-select-line-height - Line height of the select\n * \n * @cssprop --wcs-native-select-size-m - Height of the select when size is 'm'\n * @cssprop --wcs-native-select-font-size-m - Font size of the select when size is 'm'\n * @cssprop --wcs-native-select-size-l - Height of the select when size is 'l'\n * @cssprop --wcs-native-select-font-size-l - Font size of the select when size is 'l'\n * \n * @cssprop --wcs-native-select-border-radius - Border radius of the select\n * \n * @cssprop --wcs-native-select-background-color - Background color of the select\n * \n * @cssprop --wcs-native-select-border-color-default - Border color of the select when not focused\n * @cssprop --wcs-native-select-border-color-disabled - Border color of the select when disabled\n * @cssprop --wcs-native-select-border-color-focus - Border color of the select when focused\n * @cssprop --wcs-native-select-border-color-error - Border color of the select when in error state\n * \n * @cssprop --wcs-native-select-border-style-default - Border style of the select when not focused\n * @cssprop --wcs-native-select-border-style-focus - Border style of the select when focused\n * \n * @cssprop --wcs-native-select-border-width - Border width of the select when not focused\n * @cssprop --wcs-native-select-border-width-focus - Border width of the select when focused\n * \n * @cssprop --wcs-native-select-value-color - Color of the selected value\n * @cssprop --wcs-native-select-value-font-weight - Font weight of the selected value\n * @cssprop --wcs-native-select-value-font-style - Font style of the selected value\n * \n * @cssprop --wcs-native-select-padding-horizontal-m - Padding horizontal of the select when size is 'm'\n * @cssprop --wcs-native-select-padding-horizontal-l - Padding horizontal of the select when size is 'l'\n * \n * @cssprop --wcs-native-select-arrow-color - Color of the select arrow\n * @cssprop --wcs-native-select-arrow-color-disabled - Color of the select arrow when the select is disabled\n * \n * @cssprop --wcs-native-select-text-color-disabled - Color of the text when the select is disabled\n *\n * @cssprop --wcs-native-select-placeholder-color - Color of the placeholder\n * @cssprop --wcs-native-select-placeholder-font-weight - Font weight of the placeholder\n * @cssprop --wcs-native-select-placeholder-font-style - Font style of the placeholder\n *\n * @cssprop --wcs-native-select-option-color - Text color of the options\n * @cssprop --wcs-native-select-option-font-style - Font style of the options\n * @cssprop --wcs-native-select-option-selected-color - Text color of the selected option\n *\n * \n */\n@Component({\n    tag: 'wcs-native-select',\n    styleUrl: 'native-select.scss',\n    shadow: true\n})\nexport class NativeSelect implements ComponentInterface, MutableAriaAttribute {\n    /**\n     * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n     * There are two possible size options:\n     * - 'm': medium size\n     * - 'l': large size\n     *\n     * The default value is 'm'.\n     */\n    @Prop({reflect: true}) size: WcsNativeSelectSize = 'm';\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     * It is propagated to the slotted select element\n     */\n    @Prop({ reflect: true }) required: boolean = false;\n    \n    @Element() private el!: HTMLWcsNativeSelectElement;\n\n    @State() private expanded: boolean = false;\n\n    @State() private disabled: boolean;\n    private selectElement: HTMLSelectElement;\n\n    private observer: MutationObserver;\n    private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n    @Watch('required')\n    requiredChanged(newValue: boolean, oldValue: boolean) {\n        if(newValue !== oldValue) {\n            if(!this.selectElement) return;\n            this.selectElement.required = this.required;\n        }\n    }\n    \n    componentWillLoad() {\n        this.selectElement = this.el.querySelector('select');\n        if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n        this.onSelectedOptionChange();\n\n        /**\n         * We use an event listener to apply the default style to the select when user chose an active option\n         */\n        this.selectElement.addEventListener('change', () => {\n            this.onSelectedOptionChange();\n        });\n\n        this.observer = new MutationObserver(mutations => {\n            const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n            if (hasSpiedAttrMutation) {\n                this.updateHostAttributeWithSlottedSelect();\n            }\n\n            // A workaround to detect when the select is reset by using a class change on the select element. For example\n            // angular add/remove ng-pristine and ng-dirty classes on the form controls when the form is reset.\n            // Not the best solution but it works since we cannot detect the reset event on the native select element.\n            if (mutations.filter(m => m.attributeName === 'class').length > 0) {\n                this._updateStyles();\n            }\n        });\n        this.updateHostAttributeWithSlottedSelect();\n        this.observer.observe(this.selectElement, {attributes: true});\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        if(!this.selectElement) return;\n        this.selectElement.setAttribute(attr, value);\n    }\n\n    private onSelectedOptionChange(): void {\n        this._updateStyles();\n    }\n\n    private _updateStyles() {\n        if (this.isPlaceholderOptionSelected()) {\n            this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n        } else {\n            this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n        }\n    }\n\n    private isPlaceholderOptionSelected() {\n        return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n    }\n\n    /**\n     * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n     * @private\n     */\n    private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-native-select-value-color)\";\n        this.selectElement.style.fontStyle = \"var(--wcs-native-select-value-font-style)\";\n        this.selectElement.style.fontWeight = \"var(--wcs-native-select-value-font-weight)\";\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = \"var(--wcs-native-select-option-font-style)\";\n            if (!option.disabled) {\n                option.style.color = \"var(--wcs-native-select-option-color)\";\n            }\n        });\n    }\n\n    /**\n     * This method apply styles when the placeholder is shown.\n     *\n     * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n     * @private\n     */\n    private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-native-select-placeholder-color)\";\n        this.selectElement.style.fontWeight = \"var(--wcs-native-select-placeholder-font-weight)\";\n        this.selectElement.style.fontStyle = \"var(--wcs-native-select-placeholder-font-style)\";\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = \"var(--wcs-native-select-option-font-style)\";\n            if (!option.disabled) {\n                option.style.color = \"var(--wcs-native-select-option-color)\";\n            }\n        });\n    }\n\n    private updateHostAttributeWithSlottedSelect() {\n        this.disabled = this.selectElement?.hasAttribute('disabled');\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n        this.selectElement?.removeEventListener(\"change\", () => {\n            this.onSelectedOptionChange();\n        });\n    }\n\n    /**\n     * Use this method to force the component to update its styles. It can be useful when the select is reset (with a placeholder).\n     */\n    @Method()\n    async updateStyles() {\n        // Note : we try to automatically detect if the select is reset with the onreset event and with a mutation\n        // observer on the select element. But it seems that the onreset event is not fired when the select is reset.\n        // and the mutation observer is not fired when the select is reset with the reset() method on the form.\n        // So we have to let the user call this method manually when he reset the select.\n        this._updateStyles();\n    }\n\n    render() {\n        return (\n            <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n                <div class=\"select-wrapper\">\n                    <slot></slot>\n                    <div class=\"arrow-container\">\n                        <SelectArrow up={this.expanded}></SelectArrow>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,wvJACxB,MAAAC,EAAeD,E,MCqFFE,EAAY,M,yBAwBJC,KAAAC,uCAAyC,CAAC,Y,UAfR,I,cAKN,M,cAIR,M,wBASrC,eAAAC,CAAgBC,EAAmBC,GAC/B,GAAGD,IAAaC,EAAU,CACtB,IAAIJ,KAAKK,cAAe,OACxBL,KAAKK,cAAcC,SAAWN,KAAKM,Q,EAI3C,iBAAAC,GACIP,KAAKK,cAAgBL,KAAKQ,GAAGC,cAAc,UAC3C,IAAKT,KAAKK,cAAe,MAAM,IAAIK,MAAM,mGAEzCV,KAAKW,yBAKLX,KAAKK,cAAcO,iBAAiB,UAAU,KAC1CZ,KAAKW,wBAAwB,IAGjCX,KAAKa,SAAW,IAAIC,kBAAiBC,IACjC,MAAMC,EAAuBD,EAAUE,QAAOC,GAAKlB,KAAKC,uCAAuCkB,SAASD,EAAEE,iBAAgBC,OAAS,EACnI,GAAIL,EAAsB,CACtBhB,KAAKsB,sC,CAMT,GAAIP,EAAUE,QAAOC,GAAKA,EAAEE,gBAAkB,UAASC,OAAS,EAAG,CAC/DrB,KAAKuB,e,KAGbvB,KAAKsB,uCACLtB,KAAKa,SAASW,QAAQxB,KAAKK,cAAe,CAACoB,WAAY,M,CAI3D,sBAAMC,CAAiBC,EAAyBC,GAC5C,IAAI5B,KAAKK,cAAe,OACxBL,KAAKK,cAAcwB,aAAaF,EAAMC,E,CAGlC,sBAAAjB,GACJX,KAAKuB,e,CAGD,aAAAA,GACJ,GAAIvB,KAAK8B,8BAA+B,CACpC9B,KAAK+B,oD,KACF,CACH/B,KAAKgC,uD,EAIL,2BAAAF,G,MACJ,QAAOG,EAAAC,MAAMC,KAAKnC,KAAKK,cAAc+B,SAASnB,QAAOoB,GAAKA,EAAEC,WAAU,MAAE,MAAAL,SAAA,SAAAA,EAAEM,WAAY,I,CAOlF,qDAAAP,GACJhC,KAAKK,cAAcmC,MAAMC,MAAQ,uCACjCzC,KAAKK,cAAcmC,MAAME,UAAY,4CACrC1C,KAAKK,cAAcmC,MAAMG,WAAa,6CACtCT,MAAMC,KAAKnC,KAAKK,cAAc+B,SAASQ,SAAQC,IAC3CA,EAAOL,MAAME,UAAY,6CACzB,IAAKG,EAAON,SAAU,CAClBM,EAAOL,MAAMC,MAAQ,uC,KAWzB,kDAAAV,GACJ/B,KAAKK,cAAcmC,MAAMC,MAAQ,6CACjCzC,KAAKK,cAAcmC,MAAMG,WAAa,mDACtC3C,KAAKK,cAAcmC,MAAME,UAAY,kDACrCR,MAAMC,KAAKnC,KAAKK,cAAc+B,SAASQ,SAAQC,IAC3CA,EAAOL,MAAME,UAAY,6CACzB,IAAKG,EAAON,SAAU,CAClBM,EAAOL,MAAMC,MAAQ,uC,KAKzB,oCAAAnB,G,MACJtB,KAAKuC,UAAWN,EAAAjC,KAAKK,iBAAa,MAAA4B,SAAA,SAAAA,EAAEa,aAAa,W,CAGrD,oBAAAC,G,SACId,EAAAjC,KAAKa,YAAQ,MAAAoB,SAAA,SAAAA,EAAEe,cACfC,EAAAjD,KAAKK,iBAAa,MAAA4C,SAAA,SAAAA,EAAEC,oBAAoB,UAAU,KAC9ClD,KAAKW,wBAAwB,G,CAQrC,kBAAMwC,GAKFnD,KAAKuB,e,CAGT,MAAA6B,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,GAAGxD,KAAKyD,SAAW,WAAa,KAAI,gBAAiBzD,KAAKuC,SAAQ,YAAavC,KAAK0D,MAC7FL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACPH,EAAA,QAAAE,IAAA,6CACAF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACPH,EAACM,EAAW,CAAAJ,IAAA,2CAACK,GAAI5D,KAAKyD,a"}

package/dist/wcs/{p-dddcd685.entry.js → p-622f7403.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as a,H as t,g as o}from"./p-32e583ea.js";import{i as c,a as i,s as r,q as s,b as n}from"./p-52d77e1f.js";import{c as l}from"./p-0f864e86.js";const d=':host{--wcs-galactic-menu-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-galactic-menu-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-gap:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-height:var(--wcs-semantic-size-s);--wcs-galactic-menu-icon-focus-outline-color:var(--wcs-galactic-text-color, white);--wcs-galactic-menu-overlay-color:var(--wcs-semantic-color-text-inverse);--wcs-galactic-menu-overlay-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-galactic-menu-overlay-padding:var(--wcs-semantic-spacing-large);display:flex;align-items:center;box-sizing:border-box;height:var(--wcs-galactic-menu-height);gap:var(--wcs-galactic-menu-gap);padding:0 var(--wcs-galactic-menu-padding-horizontal);background-color:var(--wcs-galactic-menu-background-color)}#menu{display:none;background-color:var(--wcs-galactic-menu-overlay-background-color);color:var(--wcs-galactic-menu-overlay-color);padding:var(--wcs-galactic-menu-overlay-padding);--wcs-semantic-color-border-focus-base:var(--wcs-semantic-color-text-inverse, white)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}button{background:transparent;border:none;color:inherit;cursor:pointer;user-select:none}button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-galactic-menu-icon-focus-outline-color);outline-offset:0;border-radius:0.1rem}';const u=d;const m=["tabindex","title"];const p=class{constructor(a){e(this,a);this.inheritedAttributes={};this.showPopoverMenu=false;this.text=undefined}componentDidLoad(){this.menu=this.el.shadowRoot.getElementById("toggle-menu-icon");this.tooltip=this.el.shadowRoot.getElementById("menu");this.popper=l(this.menu,this.tooltip,{placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,8]}}]})}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),i(this.el,m))}async setAriaAttribute(e,a){r(this.menuButton,e,a)}onWindowClickEvent(e){if(s(e,this.tooltip)||s(e,this.menu)){return}else{if(this.showPopoverMenu){this.toggleMenu()}}}onKeyDown(e){var a;if(n(e)){e.preventDefault();this.showPopoverMenu=false;(a=this.menuButton)===null||a===void 0?void 0:a.focus()}}toggleMenu(){this.showPopoverMenu=!this.showPopoverMenu}componentDidRender(){if(this.popper){this.popper.update()}}render(){return a(t,{key:"57fa555ec72e13761295e18aa779d5ac5be81111"},a("span",{key:"91b4fe9a2f6ee303c3ba00c2ba1a1ded0ac7a761"},this.text),a("button",Object.assign({key:"324d0c458e500ba5d47187bdd59297f67e067374","aria-haspopup":"true","aria-controls":"menu",ref:e=>{this.menuButton=e},"aria-expanded":this.showPopoverMenu?"true":"false"},this.inheritedAttributes,{onClick:e=>this.toggleMenu()}),a("wcs-mat-icon",{key:"accf07fb4f5d737f30f16c5cd96b96a5b66ba1d0",id:"toggle-menu-icon",icon:"more_horiz",size:"m"})),a("span",{key:"f9ae129e58d7911a7a88d8b2449a8b2e19be516f",id:"menu",role:"menu","data-show":this.showPopoverMenu},a("div",{key:"f4b78cf4631a7fa1b6ca1e68a7eb633d52c7b994",id:"arrow","data-popper-arrow":true}),a("slot",{key:"c9eb687e1b82f075a5ef1b84d09b69bdbf9c292f"})))}get el(){return o(this)}};p.style=u;export{p as wcs_galactic_menu};
-//# sourceMappingURL=p-dddcd685.entry.js.map
+import{r as a,h as e,H as t,g as c}from"./p-32e583ea.js";import{i as o,a as i,s as r,q as s,b as n}from"./p-52d77e1f.js";import{c as l}from"./p-0f864e86.js";const d=':host{--wcs-galactic-menu-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-galactic-menu-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-gap:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-height:var(--wcs-semantic-size-s);--wcs-galactic-menu-icon-focus-outline-color:var(--wcs-galactic-text-color, white);--wcs-galactic-menu-overlay-color:var(--wcs-semantic-color-text-inverse);--wcs-galactic-menu-overlay-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-galactic-menu-overlay-padding:var(--wcs-semantic-spacing-large);display:flex;align-items:center;box-sizing:border-box;height:var(--wcs-galactic-menu-height);gap:var(--wcs-galactic-menu-gap);padding:0 var(--wcs-galactic-menu-padding-horizontal);background-color:var(--wcs-galactic-menu-background-color)}#menu{display:none;background-color:var(--wcs-galactic-menu-overlay-background-color);color:var(--wcs-galactic-menu-overlay-color);padding:var(--wcs-galactic-menu-overlay-padding);--wcs-semantic-color-border-focus-base:var(--wcs-semantic-color-text-inverse, white)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}button{background:transparent;border:none;color:inherit;cursor:pointer;user-select:none}button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-galactic-menu-icon-focus-outline-color);outline-offset:0;border-radius:0.1rem}';const u=d;const m=["tabindex","title"];const p=class{constructor(e){a(this,e);this.inheritedAttributes={};this.showPopoverMenu=false;this.text=undefined}componentDidLoad(){this.menu=this.el.shadowRoot.getElementById("toggle-menu-icon");this.tooltip=this.el.shadowRoot.getElementById("menu");this.popper=l(this.menu,this.tooltip,{placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,8]}}]})}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),i(this.el,m))}async setAriaAttribute(a,e){r(this.menuButton,a,e)}onWindowClickEvent(a){if(s(a,this.tooltip)||s(a,this.menu)){return}else{if(this.showPopoverMenu){this.toggleMenu()}}}onKeyDown(a){var e;if(n(a)){a.preventDefault();this.showPopoverMenu=false;(e=this.menuButton)===null||e===void 0?void 0:e.focus()}}toggleMenu(){this.showPopoverMenu=!this.showPopoverMenu}componentDidRender(){if(this.popper){this.popper.update()}}render(){return e(t,{key:"bc460c17b222723b8cc037042cc758f8ca0e50ec"},e("span",{key:"d324ff624a9e5c9f6984134d4091986cac11f18b"},this.text),e("button",Object.assign({key:"7b0160174a249b30e082b9b2a77aca334ee6256a","aria-haspopup":"true","aria-controls":"menu",ref:a=>{this.menuButton=a},"aria-expanded":this.showPopoverMenu?"true":"false"},this.inheritedAttributes,{onClick:a=>this.toggleMenu()}),e("wcs-mat-icon",{key:"96b20053845f5490791ea278c2444392ba630600",id:"toggle-menu-icon",icon:"more_horiz",size:"m"})),e("span",{key:"6f959f220edbf293fe6922f7aaeaab0f213bf736",id:"menu",role:"menu","data-show":this.showPopoverMenu},e("div",{key:"6a05e468d65252ecbb57b421a53be0a0a1974f98",id:"arrow","data-popper-arrow":true}),e("slot",{key:"c9398cbb856d836820ac1cddf3113710eeaff5fb"})))}get el(){return c(this)}};p.style=u;export{p as wcs_galactic_menu};
+//# sourceMappingURL=p-622f7403.entry.js.map

package/dist/wcs/p-637ec45a.entry.js

@@ -0,0 +1,2 @@
+import{r,h as o,g as a}from"./p-32e583ea.js";const t=":host{--wcs-card-border-color:var(--wcs-semantic-color-border-secondary);--wcs-card-border-radius:var(--wcs-semantic-border-radius-base);--wcs-card-border-width:var(--wcs-semantic-border-width-default);--wcs-card-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-card-text-color:var(--wcs-semantic-color-text-primary);--wcs-card-horizontal-min-height:160px;position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-clip:border-box;border-radius:var(--wcs-card-border-radius);background-color:var(--wcs-card-background-color);color:var(--wcs-card-text-color)}:host([mode=raised]){box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}:host([mode=flat]){border:solid var(--wcs-card-border-width) var(--wcs-card-border-color)}:host([orientation=horizontal]){flex-direction:row;min-height:var(--wcs-card-horizontal-height)}:host([orientation=vertical]){flex-direction:column}";const c=t;const i=class{constructor(o){r(this,o);this.mode="flat";this.orientation=null}orientationChanged(){this.updateWcsCardImageOrientation()}onSlotChange(){if(this.orientation){this.updateWcsCardBodyOrientation();this.updateWcsCardImageOrientation()}}updateWcsCardImageOrientation(){var r;(r=this.findWcsCardMedia())===null||r===void 0?void 0:r.setOrientation(this.orientation)}updateWcsCardBodyOrientation(){var r;(r=this.findWcsCardBody())===null||r===void 0?void 0:r.setOrientation(this.orientation)}findWcsCardMedia(){return this.el.querySelector("wcs-card-media")}findWcsCardBody(){return this.el.querySelector("wcs-card-body")}render(){return o("slot",{key:"20a57cf8fc64155e65a98bdb69618ec013ea5a7f",onSlotchange:()=>this.onSlotChange()})}get el(){return a(this)}static get watchers(){return{orientation:["orientationChanged"]}}};i.style=c;export{i as wcs_card};
+//# sourceMappingURL=p-637ec45a.entry.js.map

package/dist/wcs/p-637ec45a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardCss","WcsCardStyle0","Card","orientationChanged","this","updateWcsCardImageOrientation","onSlotChange","orientation","updateWcsCardBodyOrientation","_a","findWcsCardMedia","setOrientation","findWcsCardBody","el","querySelector","render","h","key","onSlotchange"],"sources":["src/components/card/card.scss?tag=wcs-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":[":host {\n    --wcs-card-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-card-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-card-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-card-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-card-text-color: var(--wcs-semantic-color-text-primary);\n\n    --wcs-card-horizontal-min-height: 160px;\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    word-wrap: break-word;\n    background-clip: border-box;\n    border-radius: var(--wcs-card-border-radius);\n    background-color: var(--wcs-card-background-color);\n    color: var(--wcs-card-text-color);\n}\n\n:host([mode=\"raised\"]) {\n    /* Card mode raised is deprecated in the new design system */\n    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20)\n}\n\n:host([mode=\"flat\"]) {\n    border: solid var(--wcs-card-border-width) var(--wcs-card-border-color);\n}\n\n:host([orientation=\"horizontal\"]) {\n    flex-direction: row;\n    min-height: var(--wcs-card-horizontal-height);\n}\n\n:host([orientation=\"vertical\"]) {\n    flex-direction: column;\n}\n","import { Component, ComponentInterface, h, Prop, Element, Watch } from '@stencil/core';\nimport { CardMode, CardOrientation } from './card-interface';\n\n/**\n * The card component is a container that display content such as text, images, buttons, and lists.  \n * A card can be a single component, but is often made up of a header, title, subtitle, and content.\n * \n * While they're very flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body`\n * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to make sure the card is well-designed.\n *\n * @slot - Default slot for the card content\n * \n * @cssprop --wcs-card-border-color - Border color of the card\n * @cssprop --wcs-card-border-radius - Border radius of the card\n * @cssprop --wcs-card-border-width - Border width of the card\n * @cssprop --wcs-card-background-color - Background color of the card\n * @cssprop --wcs-card-text-color - Text color of the card\n * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal\n */\n@Component({\n    tag: 'wcs-card',\n    styleUrl: 'card.scss',\n    shadow: true\n})\nexport class Card implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n    @Prop({reflect: true, mutable: true})\n    mode: CardMode = 'flat';\n    /**\n     * The orientation of the card, can be horizontal or vertical\n     */\n    @Prop({reflect: true})\n    orientation: CardOrientation = null;\n\n    @Watch('orientation')\n    orientationChanged() {\n        this.updateWcsCardImageOrientation();\n    }\n\n    private onSlotChange() {\n        if(this.orientation) {\n            this.updateWcsCardBodyOrientation();\n            this.updateWcsCardImageOrientation();\n        }\n    }\n\n    private updateWcsCardImageOrientation() {\n        this.findWcsCardMedia()?.setOrientation(this.orientation);\n    }\n\n    private updateWcsCardBodyOrientation() {\n        this.findWcsCardBody()?.setOrientation(this.orientation);\n    }\n\n    private findWcsCardMedia(): HTMLWcsCardMediaElement {\n        return this.el.querySelector('wcs-card-media');\n    }\n\n    private findWcsCardBody(): HTMLWcsCardBodyElement {\n        return this.el.querySelector('wcs-card-body');\n    }\n\n    render() {\n        return (\n            <slot onSlotchange={() => this.onSlotChange()}/>\n        );\n    }\n}\n"],"mappings":"6CAAA,MAAMA,EAAU,o+BAChB,MAAAC,EAAeD,E,MCuBFE,EAAI,M,mCAGI,O,iBAKc,I,CAG/B,kBAAAC,GACIC,KAAKC,+B,CAGD,YAAAC,GACJ,GAAGF,KAAKG,YAAa,CACjBH,KAAKI,+BACLJ,KAAKC,+B,EAIL,6BAAAA,G,OACJI,EAAAL,KAAKM,sBAAkB,MAAAD,SAAA,SAAAA,EAAEE,eAAeP,KAAKG,Y,CAGzC,4BAAAC,G,OACJC,EAAAL,KAAKQ,qBAAiB,MAAAH,SAAA,SAAAA,EAAEE,eAAeP,KAAKG,Y,CAGxC,gBAAAG,GACJ,OAAON,KAAKS,GAAGC,cAAc,iB,CAGzB,eAAAF,GACJ,OAAOR,KAAKS,GAAGC,cAAc,gB,CAGjC,MAAAC,GACI,OACIC,EAAA,QAAAC,IAAA,2CAAMC,aAAc,IAAMd,KAAKE,gB"}

package/dist/wcs/p-6aededc6.entry.js

@@ -0,0 +1,2 @@
+import{r as c,h as e,H as a}from"./p-32e583ea.js";const s=":host{--wcs-card-footer-gap:var(--wcs-semantic-spacing-base);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-card-footer-gap)}";const r=s;const o=class{constructor(e){c(this,e)}render(){return e(a,{key:"8b600e63a3178bbf9c3d577053b927ff6ea9a48f"},e("slot",{key:"1ce0728f66cd296c44dcc4d85c9e9d9dcbae853a"}))}};o.style=r;export{o as wcs_card_footer};
+//# sourceMappingURL=p-6aededc6.entry.js.map

package/dist/wcs/p-6aededc6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardFooterCss","WcsCardFooterStyle0","CardFooter","render","h","Host","key"],"sources":["src/components/card-footer/card-footer.scss?tag=wcs-card-footer&encapsulation=shadow","src/components/card-footer/card-footer.tsx"],"sourcesContent":[":host {\n    --wcs-card-footer-gap: var(--wcs-semantic-spacing-base);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--wcs-card-footer-gap);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * The card footer component is a container that display content at the bottom of the card.\n * It uses a flex layout to organize actions the user can take with a card\n * \n * @cssprop --wcs-card-footer-gap - Gap of the card footer\n */\n@Component({\n    tag: 'wcs-card-footer',\n    styleUrl: 'card-footer.scss',\n    shadow: true,\n})\nexport class CardFooter {\n\n    render() {\n        return (\n            <Host>\n                <slot></slot>\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,kJACtB,MAAAC,EAAeD,E,MCYFE,EAAU,M,yBAEnB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,QAAAE,IAAA,6C"}

package/dist/wcs/p-6c6079ee.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as a,h as c,H as r,g as e}from"./p-32e583ea.js";import{S as n}from"./p-84e22272.js";import{i as s,a as i,s as d}from"./p-52d77e1f.js";const t=":host{display:flex;flex-direction:column;cursor:pointer;--wcs-accordion-panel-color-default:var(--wcs-semantic-color-text-primary);--wcs-accordion-panel-color-highlight:var(--wcs-semantic-color-text-primary);--wcs-accordion-panel-color-hover:var(--wcs-semantic-color-text-primary);--wcs-accordion-panel-color-press:var(--wcs-semantic-color-text-primary);--wcs-accordion-panel-action-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-accordion-panel-action-color-highlight:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-accordion-panel-action-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-accordion-panel-action-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-accordion-panel-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-accordion-panel-background-color-highlight:var(--wcs-semantic-color-background-action-secondary-press);--wcs-accordion-panel-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-accordion-panel-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-accordion-panel-header-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-accordion-panel-header-font-size:var(--wcs-semantic-font-size-heading-6);--wcs-accordion-panel-header-gap:calc(3 * var(--wcs-semantic-spacing-base));--wcs-accordion-panel-border-radius:var(--wcs-semantic-border-radius-base);--wcs-accordion-panel-border-radius-open:var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius) 0 0;--wcs-accordion-panel-padding-vertical:var(--wcs-semantic-spacing-large);--wcs-accordion-panel-padding-horizontal:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-accordion-panel-header-border-width:var(--wcs-semantic-border-width-default);--wcs-accordion-panel-border-width:var(--wcs-semantic-border-width-default);--wcs-accordion-panel-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-accordion-panel-border-color:var(--wcs-semantic-color-border-secondary);--wcs-accordion-panel-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-accordion-panel-border-style-focus:var(--wcs-semantic-border-style-focus-base);--wcs-accordion-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);border:var(--wcs-accordion-panel-border-width) solid var(--wcs-accordion-panel-border-color);border-radius:var(--wcs-accordion-panel-border-radius)}:host .header{display:flex;align-items:center;justify-content:space-between;gap:var(--wcs-accordion-panel-header-gap);padding:var(--wcs-accordion-panel-padding-vertical) var(--wcs-accordion-panel-padding-horizontal);border-radius:var(--wcs-accordion-panel-border-radius);font-weight:var(--wcs-accordion-panel-header-font-weight);font-size:var(--wcs-accordion-panel-header-font-size);font-family:var(--wcs-font-sans-serif);color:var(--wcs-accordion-panel-color-default);background-color:var(--wcs-accordion-panel-background-color-default);border:none;transition:background-color var(--wcs-accordion-transition-duration)}@media (forced-colors: active){:host .header{border:var(--wcs-accordion-panel-header-border-width) solid ButtonBorder}}:host .header:focus-visible{outline:var(--wcs-accordion-panel-border-width-focus) var(--wcs-accordion-panel-border-style-focus) var(--wcs-accordion-panel-border-color-focus)}:host .header:hover{cursor:pointer;color:var(--wcs-accordion-panel-color-hover);background-color:var(--wcs-accordion-panel-background-color-hover)}:host .header:hover .header-action{color:var(--wcs-accordion-panel-action-color-hover)}:host .header:hover .header-action .arrow{fill:var(--wcs-accordion-panel-action-color-hover)}:host .header:active{background-color:var(--wcs-accordion-panel-background-color-press)}:host .header-action{display:flex;align-items:center;user-select:none;color:var(--wcs-accordion-panel-action-color-default)}:host .header-action .arrow{fill:var(--wcs-accordion-panel-action-color-default)}:host .content{display:none}:host([open]){margin-bottom:0;}:host([open]) .header{border-radius:var(--wcs-accordion-panel-border-radius-open)}:host([open]) .content{display:block}:host([open]):host([highlight]){}:host([open]):host([highlight]) .header{background-color:var(--wcs-accordion-panel-background-color-highlight);color:var(--wcs-accordion-panel-color-highlight)}:host([open]):host([highlight]) .header-action{color:var(--wcs-accordion-panel-action-color-highlight)}:host([open]):host([highlight]) .header-action .arrow{fill:var(--wcs-accordion-panel-action-color-highlight)}";const l=t;const h=["tabindex","title"];const p=class{constructor(c){o(this,c);this.wcsOpenChange=a(this,"wcsOpenChange",7);this.inheritedAttributes={};this.open=false;this.hideActionText=false;this.highlight=false;this.groupContentWithHeader=false}openChange(o){this.wcsOpenChange.emit(o)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),i(this.el,h))}async setAriaAttribute(o,a){d(this.nativeButton,o,a)}async close(){this.open=false}render(){return c(r,{key:"72253126a8cf58f763fd07bff54c0cf2c446afdc"},c("button",Object.assign({key:"97b70c995180acbd0fcfc97a43ea9208fdc464ff","aria-expanded":this.open?"true":"false","aria-controls":"content",class:"header",ref:o=>this.nativeButton=o,onClick:()=>this.open=!this.open},this.inheritedAttributes),c("slot",{key:"1b2d8ad5d8ee9a30f5e3d90aad3888f2061cfab8",name:"header"}),c("span",{key:"27867e5c690c771735f63115661e2e4949aac3f3",class:"header-action"},!this.hideActionText&&c("span",{key:"3ca56e1a94f8366117bb3cdeabeab8ee6ead8da8"},this.open?"Fermez":"Ouvrez"),c(n,{key:"eddb7be148606307d13b785aae423b72410495c3",up:this.open}))),c("div",{key:"2be057b4461c0c969fd4285509dab6514487edb6",class:"content",id:"content"},c("slot",{key:"5be6f3677c52dde4f2f64058d1a378e455da3d27",name:"content"})))}get el(){return e(this)}static get watchers(){return{open:["openChange"]}}};p.style=l;export{p as wcs_accordion_panel};
+//# sourceMappingURL=p-6c6079ee.entry.js.map