wcs-core 7.6.0 → 7.7.0

package/dist/esm/wcs-alert.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-alert.entry.js","mappings":"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","names":[],"sources":["src/components/alert/alert.scss?tag=wcs-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@import './alert-keyframes.scss';\n\n:host {\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-brand-default);\n\n    --wcs-alert-title-color: var(--wcs-semantic-color-text-primary);\n    --wcs-alert-subtitle-color: var(--wcs-semantic-color-text-secondary);\n    --wcs-alert-dismiss-button-color: var(--wcs-semantic-color-foreground-inverse);\n\n    --wcs-alert-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-alert-subtitle-font-weight: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-alert-title-font-size: var(--wcs-semantic-font-size-base);\n    --wcs-alert-subtitle-font-size: var(--wcs-semantic-font-size-caption-2);\n\n    --wcs-alert-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-primary);\n    --wcs-alert-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-alert-padding: var(--wcs-semantic-spacing-base-150);\n    --wcs-alert-gap: var(--wcs-semantic-spacing-base-150);\n    --wcs-alert-min-width: 100%;\n\n    --wcs-alert-progress-bar-height: 0.25rem;\n    --wcs-alert-progress-bar-background-color: var(--wcs-alert-icon-background-color);\n\n    --wcs-alert-internal-progress-bar-animation-duration: 5s;\n\n    box-sizing: border-box;\n\n    background-color: var(--wcs-alert-background-color);\n    border-radius: var(--wcs-alert-border-radius);\n    padding: var(--wcs-alert-padding);\n    width: 100%;\n    min-width: var(--wcs-alert-min-width);\n\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--wcs-alert-gap);\n    border: solid var(--wcs-alert-border-width) var(--wcs-alert-border-color);\n\n    overflow: hidden; // to avoid overflow of progress bar especially with voyageurs theme\n\n    .content {\n        display: flex;\n        flex-direction: column;\n    }\n\n    .announcement-icon {\n        color: var(--wcs-alert-icon-background-color);\n    }\n\n    ::slotted([slot=title]) {\n        color: var(--wcs-alert-title-color);\n        font-size: var(--wcs-alert-title-font-size);\n        font-weight: var(--wcs-alert-title-font-weight);\n    }\n\n    ::slotted([slot=subtitle]) {\n        font-weight: var(--wcs-alert-subtitle-font-weight);\n        color: var(--wcs-alert-subtitle-color);\n        font-size: var(--wcs-alert-subtitle-font-size);\n    }\n\n    .progress-bar {\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: var(--wcs-alert-progress-bar-height);\n        position: absolute;\n    }\n\n    .progress-bar-track {\n        background-color: var(--wcs-alert-progress-bar-background-color);\n        height: 100%;\n        animation: progress-bar-slide var(--wcs-alert-internal-progress-bar-animation-duration) linear;\n        border-bottom-left-radius: var(--wcs-alert-border-radius);\n        border-bottom-right-radius: var(--wcs-alert-border-radius);\n        border-top-right-radius: var(--wcs-alert-border-radius); // to avoid a visual glitch, it's bizarre to have only radius on the bottom\n    }\n}\n\n:host([intent=success]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-success);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-success-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-success-default);\n}\n\n:host([intent=information]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-information);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-information-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-information-default);\n}\n\n:host([intent=warning]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-warning);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-warning-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-warning-default);\n}\n\n:host([intent=error]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-critical);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-critical-lightest);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-critical-default);\n}\n\n:host > * {\n    box-sizing: border-box;\n}\n\n.icon-content-container {\n    display: flex;\n    gap: var(--wcs-alert-gap);\n    align-items: center;\n}\n\n.close-button {\n    wcs-mat-icon {\n        color: var(--wcs-alert-dismiss-button-color);\n    }\n}\n\n.hidden {\n    display: none;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, Element, Listen } from '@stencil/core';\nimport { WcsAlertIntent } from \"./alert-interface\";\n\n/**\n * Alerts are used to communicate a state or an action that has been performed.\n * It has to be used conjunction with the `wcs-alert-drawer` component, or you can use it independently by taking care of \n * the alert visibility\n * \n * @cssprop --wcs-alert-background-color - Background color of the alert\n * @cssprop --wcs-alert-icon-background-color - Background color of the icon\n * @cssprop --wcs-alert-title-color - Color of the title\n * @cssprop --wcs-alert-subtitle-color - Color of the subtitle\n * @cssprop --wcs-alert-dismiss-button-color - Color of the dismiss button\n * @cssprop --wcs-alert-title-font-weight - Font weight of the title\n * @cssprop --wcs-alert-subtitle-font-weight - Font weight of the subtitle\n * @cssprop --wcs-alert-title-font-size - Font size of the title\n * @cssprop --wcs-alert-subtitle-font-size - Font size of the subtitle\n * @cssprop --wcs-alert-border-width - Border width of the alert\n * @cssprop --wcs-alert-border-color - Border color of the alert\n * @cssprop --wcs-alert-border-radius - Border radius of the alert\n * @cssprop --wcs-alert-padding - Padding of the alert\n * @cssprop --wcs-alert-gap - Gap between each element of the alert, icon content and close button\n * @cssprop --wcs-alert-min-width - Minimum width of the alert, default to 100% and it is set by alert-drawer component\n * @cssprop --wcs-alert-progress-bar-height - Height of the progress bar if `showProgressBar` is set to true\n * @cssprop --wcs-alert-progress-bar-background-color - Background color of the progress bar\n */\n@Component({\n    tag: 'wcs-alert',\n    styleUrl: 'alert.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Element() private el: HTMLElement;\n\n    /**\n     * Controls the visibility state of the alert.\n     * This property is exposed to allow control of the alert's display state and animation timing:\n     * - Used by wcs-alert-drawer to coordinate exit animations when the alert is dismissed\n     * - Can be used directly for custom implementations (though using wcs-alert-drawer is recommended)\n     * - When set to false, it triggers the exit animation if implemented\n     * \n     * Note: While direct usage is possible for custom implementations, it's recommended to use\n     * wcs-alert-drawer for consistent alert management and animations.\n     */\n    @Prop({ mutable: true, reflect: true }) show: boolean = true;\n\n    @Prop({ reflect: true })\n    intent: WcsAlertIntent = 'success';\n\n    /**\n     * Event emitted when the alert is dismissed\n     */\n    @Event() wcsAlertDismiss: EventEmitter<void>;\n\n    /**\n     * Time duration of the alert visibility\n     * \n     * 5000ms by default\n     * If 0, the alert will not emit `wcsAlertDismiss` event automatically\n     */\n    @Prop() timeout = 5000;\n    @Prop() showProgressBar: boolean = false;\n\n    /** Only active if timeout > 0, becomes true when the alert reaches its maximum display time */\n    private isTimedOut: boolean = false;\n\n    /** Indicates if the mouse cursor is hovering over the alert */\n    private isMouseHover: boolean = false;\n    /**\n     * ID of the setTimeout used to manage the alert's lifetime\n     * https://developer.mozilla.org/en-US/docs/Web/API/Window/clearTimeout#notes\n     */\n    private timeoutId = undefined;\n\n    /** Reference to the alert's information icon for managing its aria-label */\n    private annoucementIconHtmlElement!: HTMLWcsMatIconElement;\n\n\n    @Listen('mouseover')\n    mouseOverHandler() {\n        this.mouseHover(true)\n    }\n\n    @Listen('mouseout')\n    mouseOutHandler() {\n        this.mouseHover(false);\n    }\n\n    /**\n     * Handles the mouse hover state of the alert\n     * @param hover - true if the mouse is hovering over the alert, false otherwise\n     */\n    private mouseHover(hover: boolean) {\n        this.isMouseHover = hover;\n\n        // If the timeout has passed (i.e. the user had the mouse on the component when it expired), we close the alert.\n        if (this.isTimedOut && !this.isMouseHover) {\n            this.close();\n        }\n    }\n\n    async componentWillLoad() {\n        await this.showAlertAndRunTimeout();\n    }\n\n    async componentDidLoad() {\n        /*\n        Because icon serves also to announce the state of the alert based on the type. We set aria-label on the icon based\n        on the type\n         */\n        this.annoucementIconHtmlElement?.setAriaAttribute('aria-hidden', 'false');\n\n        if (this.showProgressBar) {\n            this.el.style.setProperty('--wcs-alert-internal-progress-bar-animation-duration', this.timeout / 1000 + 's');\n        } else {\n            this.el.style.setProperty('--wcs-alert-internal-progress-bar-animation-duration', '0s');\n        }\n    }\n\n    async showAlertAndRunTimeout() {\n        if (this.timeout === 0) return;\n        this.show = true;\n        this.timeoutId = setTimeout(() => {\n            // If the user has the mouse over the alert, we only indicate that the timemout has expired, and the method that handles the mousehover event will close it\n            if (!this.isMouseHover) {\n                this.close();\n            }\n            this.isTimedOut = true;\n        }, this.timeout);\n    }\n\n    private onCloseButtonClick(_: MouseEvent) {\n        this.close();\n    }\n\n    private close() {\n        this.show = false;\n        this.wcsAlertDismiss.emit();\n    }\n\n    private getMaterialIcon() {\n        switch (this.intent) {\n            case \"success\":\n                return 'check_circle'\n            case \"information\":\n                return 'info'\n            case \"error\":\n                return 'error'\n            case \"warning\":\n                return 'warning'\n        }\n    }\n\n    private getAriaLabel() {\n        switch (this.intent) {\n            case \"success\":\n                return 'Succès';\n            case \"information\":\n                return 'Information';\n            case \"error\":\n                return 'Erreur';\n            case \"warning\":\n                return 'Attention';\n        }\n    }\n\n    disconnectedCallback() {\n        /*\n         https://developer.mozilla.org/en-US/docs/Web/API/Window/clearTimeout#notes \n         (Passing an invalid ID to clearTimeout() silently does nothing; no exception is thrown.)\n         */\n        clearTimeout(this.timeoutId);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"icon-content-container\">\n                    <wcs-mat-icon class=\"announcement-icon\"\n                        ref={(el) => this.annoucementIconHtmlElement = el}\n                        icon={this.getMaterialIcon()}\n                        aria-label={this.getAriaLabel()}\n                        role=\"img\"\n                        aria-hidden={false}></wcs-mat-icon>\n                    <div class=\"content\">\n                        <slot name=\"title\"></slot>\n                        <slot name=\"subtitle\"></slot>\n                    </div>\n                </div>\n                <wcs-button shape=\"round\" size=\"s\" mode=\"clear\" class=\"close-button wcs-dark\"\n                    aria-label=\"Fermer cette notification\"\n                    onClick={($event) => this.onCloseButtonClick($event)}>\n                    <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n                </wcs-button>\n                <div class={'progress-bar' + (!this.showProgressBar ? ' hidden' : '')}>\n                    <div class=\"progress-bar-track\"></div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-alert.entry.js","mappings":"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","names":[],"sources":["src/components/alert/alert.scss?tag=wcs-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@import './alert-keyframes.scss';\n@import '../../style/mixins/toast-common';\n\n:host {\n    @include toast-common;\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-brand-default);\n\n    --wcs-alert-title-color: var(--wcs-semantic-color-text-primary);\n    --wcs-alert-subtitle-color: var(--wcs-semantic-color-text-secondary);\n    --wcs-alert-dismiss-button-color: var(--wcs-semantic-color-foreground-inverse);\n\n    --wcs-alert-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-alert-subtitle-font-weight: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-alert-title-font-size: var(--wcs-semantic-font-size-base);\n    --wcs-alert-subtitle-font-size: var(--wcs-semantic-font-size-caption-2);\n\n    --wcs-alert-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-primary);\n    --wcs-alert-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-alert-padding: var(--wcs-semantic-spacing-base-150);\n    --wcs-alert-gap: var(--wcs-semantic-spacing-base-150);\n    --wcs-alert-min-width: 100%;\n\n    --wcs-alert-progress-bar-height: 0.25rem;\n    --wcs-alert-progress-bar-background-color: var(--wcs-alert-icon-background-color);\n\n    --wcs-alert-internal-progress-bar-animation-duration: 5s;\n\n    background-color: var(--wcs-alert-background-color);\n    border-radius: var(--wcs-alert-border-radius);\n    padding: var(--wcs-alert-padding);\n    width: 100%;\n    min-width: var(--wcs-alert-min-width);\n\n    gap: var(--wcs-alert-gap);\n    border: solid var(--wcs-alert-border-width) var(--wcs-alert-border-color);\n\n    overflow: hidden; // to avoid overflow of progress bar especially with voyageurs theme\n\n    .announcement-icon {\n        color: var(--wcs-alert-icon-background-color);\n    }\n\n    .icon-content-container{\n        gap: var(--wcs-alert-gap);\n    }\n\n    ::slotted([slot=title]) {\n        color: var(--wcs-alert-title-color);\n        font-size: var(--wcs-alert-title-font-size);\n        font-weight: var(--wcs-alert-title-font-weight);\n    }\n\n    ::slotted([slot=subtitle]) {\n        font-weight: var(--wcs-alert-subtitle-font-weight);\n        color: var(--wcs-alert-subtitle-color);\n        font-size: var(--wcs-alert-subtitle-font-size);\n    }\n\n    .progress-bar {\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: var(--wcs-alert-progress-bar-height);\n        position: absolute;\n    }\n\n    .progress-bar-track {\n        background-color: var(--wcs-alert-progress-bar-background-color);\n        height: 100%;\n        animation: progress-bar-slide var(--wcs-alert-internal-progress-bar-animation-duration) linear;\n        border-bottom-left-radius: var(--wcs-alert-border-radius);\n        border-bottom-right-radius: var(--wcs-alert-border-radius);\n        border-top-right-radius: var(--wcs-alert-border-radius); // to avoid a visual glitch, it's bizarre to have only radius on the bottom\n    }\n}\n\n:host([intent=success]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-success);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-success-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-success-default);\n}\n\n:host([intent=information]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-information);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-information-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-information-default);\n}\n\n:host([intent=warning]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-warning);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-warning-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-warning-default);\n}\n\n:host([intent=error]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-critical);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-critical-lightest);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-critical-default);\n}\n\n:host > * {\n    box-sizing: border-box;\n}\n\n.close-button {\n    wcs-mat-icon {\n        color: var(--wcs-alert-dismiss-button-color);\n    }\n}\n\n.hidden {\n    display: none;\n}\n","import {Component, Event, EventEmitter, h, Host, Prop, Element, Listen} from '@stencil/core';\nimport {WcsAlertIntent} from \"./alert-interface\";\nimport {AlertCloseButton} from \"./alert-close-button\";\n\n/**\n * Alerts are used to communicate a state or an action that has been performed.\n * It has to be used conjunction with the `wcs-alert-drawer` component, or you can use it independently by taking care of\n * the alert visibility\n *\n * @cssprop --wcs-alert-background-color - Background color of the alert\n * @cssprop --wcs-alert-icon-background-color - Background color of the icon\n * @cssprop --wcs-alert-title-color - Color of the title\n * @cssprop --wcs-alert-subtitle-color - Color of the subtitle\n * @cssprop --wcs-alert-dismiss-button-color - Color of the dismiss button\n * @cssprop --wcs-alert-title-font-weight - Font weight of the title\n * @cssprop --wcs-alert-subtitle-font-weight - Font weight of the subtitle\n * @cssprop --wcs-alert-title-font-size - Font size of the title\n * @cssprop --wcs-alert-subtitle-font-size - Font size of the subtitle\n * @cssprop --wcs-alert-border-width - Border width of the alert\n * @cssprop --wcs-alert-border-color - Border color of the alert\n * @cssprop --wcs-alert-border-radius - Border radius of the alert\n * @cssprop --wcs-alert-padding - Padding of the alert\n * @cssprop --wcs-alert-gap - Gap between each element of the alert, icon content and close button\n * @cssprop --wcs-alert-min-width - Minimum width of the alert, default to 100% and it is set by alert-drawer component\n * @cssprop --wcs-alert-progress-bar-height - Height of the progress bar if `showProgressBar` is set to true\n * @cssprop --wcs-alert-progress-bar-background-color - Background color of the progress bar\n */\n@Component({\n    tag: 'wcs-alert',\n    styleUrl: 'alert.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Element() private el: HTMLElement;\n\n    /**\n     * Controls the visibility state of the alert.\n     * This property is exposed to allow control of the alert's display state and animation timing:\n     * - Used by wcs-alert-drawer to coordinate exit animations when the alert is dismissed\n     * - Can be used directly for custom implementations (though using wcs-alert-drawer is recommended)\n     * - When set to false, it triggers the exit animation if implemented\n     *\n     * Note: While direct usage is possible for custom implementations, it's recommended to use\n     * wcs-alert-drawer for consistent alert management and animations.\n     */\n    @Prop({mutable: true, reflect: true}) show: boolean = true;\n\n    @Prop({reflect: true})\n    intent: WcsAlertIntent = 'success';\n\n    /**\n     * Event emitted when the alert is dismissed\n     */\n    @Event() wcsAlertDismiss: EventEmitter<void>;\n\n    /**\n     * Time duration of the alert visibility\n     *\n     * 5000ms by default\n     * If 0, the alert will not emit `wcsAlertDismiss` event automatically\n     */\n    @Prop() timeout = 5000;\n    @Prop() showProgressBar: boolean = false;\n\n    /** Only active if timeout > 0, becomes true when the alert reaches its maximum display time */\n    private isTimedOut: boolean = false;\n\n    /** Indicates if the mouse cursor is hovering over the alert */\n    private isMouseHover: boolean = false;\n    /**\n     * ID of the setTimeout used to manage the alert's lifetime\n     * https://developer.mozilla.org/en-US/docs/Web/API/Window/clearTimeout#notes\n     */\n    private timeoutId = undefined;\n\n    /** Reference to the alert's information icon for managing its aria-label */\n    private annoucementIconHtmlElement!: HTMLWcsMatIconElement;\n\n\n    @Listen('mouseover')\n    mouseOverHandler() {\n        this.mouseHover(true)\n    }\n\n    @Listen('mouseout')\n    mouseOutHandler() {\n        this.mouseHover(false);\n    }\n\n    /**\n     * Handles the mouse hover state of the alert\n     * @param hover - true if the mouse is hovering over the alert, false otherwise\n     */\n    private mouseHover(hover: boolean) {\n        this.isMouseHover = hover;\n\n        // If the timeout has passed (i.e. the user had the mouse on the component when it expired), we close the alert.\n        if (this.isTimedOut && !this.isMouseHover) {\n            this.close();\n        }\n    }\n\n    async componentWillLoad() {\n        await this.showAlertAndRunTimeout();\n    }\n\n    async componentDidLoad() {\n        /*\n        Because icon serves also to announce the state of the alert based on the type. We set aria-label on the icon based\n        on the type\n         */\n        this.annoucementIconHtmlElement?.setAriaAttribute('aria-hidden', 'false');\n\n        if (this.showProgressBar) {\n            this.el.style.setProperty('--wcs-alert-internal-progress-bar-animation-duration', this.timeout / 1000 + 's');\n        } else {\n            this.el.style.setProperty('--wcs-alert-internal-progress-bar-animation-duration', '0s');\n        }\n    }\n\n    async showAlertAndRunTimeout() {\n        if (this.timeout === 0) return;\n        this.show = true;\n        this.timeoutId = setTimeout(() => {\n            // If the user has the mouse over the alert, we only indicate that the timemout has expired, and the method that handles the mousehover event will close it\n            if (!this.isMouseHover) {\n                this.close();\n            }\n            this.isTimedOut = true;\n        }, this.timeout);\n    }\n\n    private onCloseButtonClick(_: MouseEvent) {\n        this.close();\n    }\n\n    private close() {\n        this.show = false;\n        this.wcsAlertDismiss.emit();\n    }\n\n    private getMaterialIcon() {\n        switch (this.intent) {\n            case \"success\":\n                return 'check_circle'\n            case \"information\":\n                return 'info'\n            case \"error\":\n                return 'error'\n            case \"warning\":\n                return 'warning'\n        }\n    }\n\n    private getAriaLabel() {\n        switch (this.intent) {\n            case \"success\":\n                return 'Succès';\n            case \"information\":\n                return 'Information';\n            case \"error\":\n                return 'Erreur';\n            case \"warning\":\n                return 'Attention';\n        }\n    }\n\n    disconnectedCallback() {\n        /*\n         https://developer.mozilla.org/en-US/docs/Web/API/Window/clearTimeout#notes \n         (Passing an invalid ID to clearTimeout() silently does nothing; no exception is thrown.)\n         */\n        clearTimeout(this.timeoutId);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"icon-content-container\">\n                    <wcs-mat-icon class=\"announcement-icon\"\n                                  ref={(el) => this.annoucementIconHtmlElement = el}\n                                  icon={this.getMaterialIcon()}\n                                  aria-label={this.getAriaLabel()}\n                                  role=\"img\"\n                                  aria-hidden={false}></wcs-mat-icon>\n                    <div class=\"content\">\n                        <slot name=\"title\"></slot>\n                        <slot name=\"subtitle\"></slot>\n                    </div>\n                </div>\n                <AlertCloseButton onClick={($event) => this.onCloseButtonClick($event)}/>\n                <div class={'progress-bar' + (!this.showProgressBar ? ' hidden' : '')}>\n                    <div class=\"progress-bar-track\"></div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/esm/wcs-app.entry.js

@@ -9,9 +9,9 @@ const App = class {
     }
     render() {
         return [
-            h("slot", { key: '615427e4b1e7219b1b78fbca36f8385f64119314', name: "header" }),
-            h("slot", { key: 'da5fbe3b8d0eb3963d9e42a9e3396f9bf3d49c0d', name: "sidebar" }),
-            h("slot", { key: '3227284afd347f4af0c47ad0f9b46712502df225', name: "content" })
+            h("slot", { key: '3238c405d5fbe3ff12228c573d8bc3e9752fbde0', name: "header" }),
+            h("slot", { key: '7a77769a0554d193169427f2acf14afae4ebd929', name: "sidebar" }),
+            h("slot", { key: '52a5516e1a554263ce6bd203b73701af7e7e5cc3', name: "content" })
         ];
     }
 };

package/dist/esm/wcs-badge.entry.js

@@ -11,7 +11,7 @@ const Badge = class {
         this.size = 'm';
     }
     render() {
-        return (h("slot", { key: '6d9646b28344f4d1f05a3efaf798a6273252a8bf' }));
+        return (h("slot", { key: 'd7154c1a24abfa3084a6915857734f9b63ad70da' }));
     }
 };
 Badge.style = WcsBadgeStyle0;

package/dist/esm/wcs-breadcrumb-item.entry.js

@@ -10,7 +10,7 @@ const BreadcrumbItem = class {
         this.last = false;
     }
     render() {
-        return (h(Host, { key: '56e9780cd4ef4603b3a7364384222ffbc69bd4a5', role: "listitem" }, h("slot", { key: 'd3b484440c71efc646b2de9cb5f6ff8154887207' }), !this.last && (h("span", { key: '47eb0cbd394d31e46b0d919ab77d2f61d1d0aeef', class: "item-icon", "aria-hidden": "true" }, ICONS_FONT_CHEVRON_UNICODE))));
+        return (h(Host, { key: '4df249e147039831b67e3a4eccd868bcf83754e4', role: "listitem" }, h("slot", { key: 'bcba22a4050eba17cd46feff2d3a37b68c63f5a6' }), !this.last && (h("span", { key: 'beab86c3589bd6288cc061eca1e27a288f74c612', class: "item-icon", "aria-hidden": "true" }, ICONS_FONT_CHEVRON_UNICODE))));
     }
 };
 BreadcrumbItem.style = WcsBreadcrumbItemStyle0;

package/dist/esm/wcs-breadcrumb.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-d9de61ce.js';
-import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-89faa1b1.js';
+import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-2d73ee7c.js';
 import { E as EXPAND_BTN_ARIA_LABEL_DEFAULT, I as ICONS_FONT_CHEVRON_UNICODE, N as NAV_ARIA_LABEL_DEFAULT } from './breadcrumb-constants-5d525e22.js';
 
 const breadcrumbCss = ":host{--wcs-breadcrumb-icon-color:var(--wcs-semantic-color-foreground-brand);--wcs-breadcrumb-icon-font-size:0.5rem;--wcs-breadcrumb-gap:var(--wcs-semantic-spacing-base)}nav.wcs-breadcrumb-container slot[name=hidden-items]{display:none}nav.wcs-breadcrumb-container.show-hidden-items slot[name=hidden-items]{display:contents}nav.wcs-breadcrumb-container div[role=list]{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}nav.wcs-breadcrumb-container div[role=list] ::slotted(wcs-breadcrumb-item){margin-right:var(--wcs-breadcrumb-gap)}nav.wcs-breadcrumb-container div[role=list] ::slotted(wcs-breadcrumb-item:last-child){margin-right:0}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted{display:flex;align-items:center;margin-right:var(--wcs-breadcrumb-gap)}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted wcs-button[size=s]{--wcs-button-min-width:24px;--wcs-button-height:20px;--wcs-button-border-radius:2px;transform:translateY(2px)}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted .item-icon{margin-left:calc(var(--wcs-breadcrumb-gap) - 1px);font-family:\"icons\";font-size:var(--wcs-breadcrumb-icon-font-size);color:var(--wcs-breadcrumb-icon-color);transform:translateY(1px)}";
@@ -112,7 +112,7 @@ const Breadcrumb = class {
     }
     render() {
         const showExpandBtn = this.shouldCollapseItems() && !this.showHiddenItems;
-        return (h(Host, { key: '1707e6c3ee0cc621c75f85f927b543dea1af4342' }, h("nav", Object.assign({ key: 'b326c58b86feed5092f8a6c5d46c3cf2dd06a783', class: `wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`, "aria-label": NAV_ARIA_LABEL_DEFAULT }, this.inheritedAttributes, { ref: (el) => this.navEl = el }), h("div", { key: '9a4395f63e0895bca1918d7236a01dd9d0437f26', role: "list" }, h("slot", { key: 'b74aa1fc77ddfc892f0ba79bceffceab10e49c1f', onSlotchange: this.handleSlotChange.bind(this) }), h("slot", { key: 'c616f6281282a7088073ceb131f12f93d1126c8b', name: "non-collapsed" }), h("slot", { key: '0db22f440bc3956219c343e4dac60bfe09581d73', name: "items-before-expand-btn" }), h("slot", { key: 'a29809c5122d539d11c1e53e591ed4342c338810', name: "hidden-items" }), showExpandBtn && this.renderExpandAllButton(), h("slot", { key: 'aa906ec3b5805f78136b39e5d56937cdca7a7f38', name: "items-after-expand-btn" })))));
+        return (h(Host, { key: '7af7766cd0a98654c8bb3d33e16507896e90da69' }, h("nav", Object.assign({ key: '764a9ffbbd04fba9de39ce5ce053d417358f3f70', class: `wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`, "aria-label": NAV_ARIA_LABEL_DEFAULT }, this.inheritedAttributes, { ref: (el) => this.navEl = el }), h("div", { key: 'e8a41248aaca6d882d9c3e081fb51fcea0aed41f', role: "list" }, h("slot", { key: 'e4dc24b03a604346866db1a8e998b700731465a5', onSlotchange: this.handleSlotChange.bind(this) }), h("slot", { key: 'fef25754be0c6dc6bb0b8669117d9233065264ce', name: "non-collapsed" }), h("slot", { key: '1c4d24bd0003042f39c99749370a1a5b8aa965db', name: "items-before-expand-btn" }), h("slot", { key: 'c3f2bceb5a667fbefcc07715b44f2d9026ed7e47', name: "hidden-items" }), showExpandBtn && this.renderExpandAllButton(), h("slot", { key: '64b7751d6b1889f369ba0dbad2e27aaf38283004', name: "items-after-expand-btn" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/{wcs-button_2.entry.js → wcs-button_3.entry.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-d9de61ce.js';
-import { D as hasShadowDom, i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-89faa1b1.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-d9de61ce.js';
+import { C as hasShadowDom, i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-2d73ee7c.js';
 
 /**
  * Stores result from supportsCssVariables to avoid redundant processing to
@@ -1072,7 +1072,7 @@ var MDCRipple = /** @class */ (function (_super) {
     return MDCRipple;
 }(MDCComponent));
 
-const buttonCss = "@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity;position:relative;outline:none;overflow:hidden}.mdc-ripple-surface::before,.mdc-ripple-surface::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface::before,.mdc-ripple-surface::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-upgraded--unbounded::before,.mdc-ripple-upgraded--unbounded::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface::before,.mdc-ripple-surface::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-ripple-surface:hover::before,.mdc-ripple-surface.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}:host{display:inline-block;--wcs-button-color:var(--wcs-button-plain-color-default);--wcs-button-plain-color-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-button-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-button-stroked-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-button-clear-color-default:var(--wcs-semantic-color-foreground-action-tertiary-default);--wcs-button-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-button-focus-outline-border-width:var(--wcs-semantic-border-width-large);--wcs-button-background-color:var(--wcs-button-plain-background-color-default);--wcs-button-plain-background-color-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-button-plain-background-color-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-button-stroked-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-button-stroked-background-color-disabled:var(--wcs-semantic-color-background-action-secondary-disabled);--wcs-button-clear-background-color-default:var(--wcs-semantic-color-background-action-tertiary-default);--wcs-button-clear-background-color-disabled:var(--wcs-semantic-color-background-action-tertiary-disabled);--wcs-button-ripple-color:var(--wcs-button-plain-ripple-color-default);--wcs-button-plain-ripple-color-default:var(--wcs-semantic-color-ripple-action-primary);--wcs-button-stroked-ripple-color-default:var(--wcs-semantic-color-ripple-action-secondary);--wcs-button-clear-ripple-color-default:var(--wcs-semantic-color-ripple-action-tertiary);--wcs-button-border-radius:var(--wcs-button-border-radius-default);--wcs-button-border-radius-default:var(--wcs-semantic-border-radius-base);--wcs-button-border-radius-rounded:var(--wcs-semantic-border-radius-full);--wcs-button-stroked-border-color:var(--wcs-button-stroked-border-color-default);--wcs-button-stroked-border-width:var(--wcs-semantic-border-width-default);--wcs-button-stroked-border-color-default:var(--wcs-semantic-color-border-action-secondary-default);--wcs-button-stroked-border-color-disabled:var(--wcs-semantic-color-border-action-secondary-disabled);--wcs-button-height-s:var(--wcs-semantic-size-s);--wcs-button-font-size-s:var(--wcs-semantic-font-size-label-2);--wcs-button-padding-size-s:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-button-height-m:var(--wcs-semantic-size-m);--wcs-button-font-size-m:var(--wcs-semantic-font-size-label-1);--wcs-button-padding-size-m:calc(2 * var(--wcs-semantic-spacing-base));--wcs-button-height-l:var(--wcs-semantic-size-l);--wcs-button-font-size-l:var(--wcs-semantic-font-size-label-1);--wcs-button-padding-size-l:calc(3 * var(--wcs-semantic-spacing-base));--wcs-button-font-weight:var(--wcs-semantic-font-weight-medium)}.wcs-inner-button:focus-visible{outline:var(--wcs-button-focus-outline-border-width) dashed var(--wcs-button-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}:host([mode=clear]){--wcs-button-stroked-border-color:transparent}:host([mode=clear]) .wcs-inner-button{box-shadow:none}:host([mode=stroked]){--wcs-button-color:var(--wcs-button-stroked-color-default);--wcs-button-background-color:transparent}:host([mode=stroked]) .wcs-inner-button::before,:host([mode=stroked]) .wcs-inner-button::after{--wcs-button-ripple-color:var(--wcs-button-stroked-ripple-color-default)}:host([mode=clear]){--wcs-button-color:var(--wcs-button-clear-color-default);--wcs-button-background-color:transparent}:host([mode=clear]) .wcs-inner-button::before,:host([mode=clear]) .wcs-inner-button::after{--wcs-button-ripple-color:var(--wcs-button-clear-ripple-color-default)}:host([size=l]){--wcs-button-padding:0 var(--wcs-button-padding-size-l);--wcs-button-height:var(--wcs-button-height-l);--wcs-button-min-width:var(--wcs-button-height-l);--wcs-button-font-size:var(--wcs-button-font-size-l)}:host([size=l]):host([shape=round]) ::slotted(wcs-mat-icon),:host([size=l]):host([shape=square]) ::slotted(wcs-mat-icon){margin:calc(-1 * var(--wcs-button-padding-size-l))}:host,:host([size=m]){--wcs-button-padding:0 var(--wcs-button-padding-size-m);--wcs-button-height:var(--wcs-button-height-m);--wcs-button-min-width:var(--wcs-button-height-m);--wcs-button-font-size:var(--wcs-button-font-size-m)}:host:host([shape=round]) ::slotted(wcs-mat-icon),:host:host([shape=square]) ::slotted(wcs-mat-icon),:host([size=m]):host([shape=round]) ::slotted(wcs-mat-icon),:host([size=m]):host([shape=square]) ::slotted(wcs-mat-icon){margin:calc(-1 * var(--wcs-button-padding-size-m))}:host([size=s]){--wcs-button-padding:0 var(--wcs-button-padding-size-s);--wcs-button-height:var(--wcs-button-height-s);--wcs-button-min-width:var(--wcs-button-height-s);--wcs-button-font-size:var(--wcs-button-font-size-s)}:host([size=s]):host([shape=round]) ::slotted(wcs-mat-icon),:host([size=s]):host([shape=square]) ::slotted(wcs-mat-icon){margin:calc(-1 * var(--wcs-button-padding-size-s))}:host([shape=round]){--wcs-button-border-radius:var(--wcs-button-border-radius-rounded)}:host([shape=square]){--wcs-button-padding:0}:host([shape=normal]) .wcs-inner-button{min-width:var(--wcs-button-min-width, unset);min-height:var(--wcs-button-height, unset)}:host([mode=stroked]) .wcs-inner-button{box-shadow:inset 0 0 0 var(--wcs-button-stroked-border-width) var(--wcs-button-stroked-border-color)}:host([loading]){position:relative}:host([loading]) .wcs-inner-button>*:not(wcs-spinner){visibility:hidden;opacity:0}:host([loading]) wcs-spinner{--wcs-spinner-dashed-background-circle:var(--wcs-button-color);--wcs-spinner-rotating-circle-color:var(--wcs-button-color);height:calc(var(--wcs-button-height) / 2);width:calc(var(--wcs-button-min-width) / 2);position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}:host([disabled]),:host([loading]){cursor:not-allowed}:host([disabled]) .wcs-inner-button,:host([loading]) .wcs-inner-button{opacity:1;cursor:default;pointer-events:none}:host([disabled]){--wcs-button-color:var(--wcs-button-color-disabled);--wcs-button-background-color:var(--wcs-button-plain-background-color-disabled)}:host([mode=stroked][disabled]){--wcs-button-stroked-border-color:var(--wcs-button-stroked-border-color-disabled);--wcs-button-background-color:var(--wcs-button-stroked-background-color-disabled)}:host([mode=clear][disabled]){--wcs-button-background-color:var(--wcs-button-clear-background-color-disabled)}.wcs-inner-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity;--mdc-ripple-focus-opacity:0;display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--wcs-font-sans-serif);background-color:var(--wcs-button-background-color);color:var(--wcs-button-color);padding:var(--wcs-button-padding);border-radius:var(--wcs-button-border-radius);border:none;overflow:hidden;outline:0;text-transform:none;margin:0;cursor:pointer;font-weight:var(--wcs-button-font-weight);text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;font-size:var(--wcs-button-font-size);line-height:1.5;height:var(--wcs-button-height);min-width:var(--wcs-button-min-width);transition:color 175ms ease-in-out, background-color 175ms ease-in-out}.wcs-inner-button::before,.wcs-inner-button::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.wcs-inner-button::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.wcs-inner-button::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.wcs-inner-button.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.wcs-inner-button.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.wcs-inner-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.wcs-inner-button.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.wcs-inner-button.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.wcs-inner-button::before,.wcs-inner-button::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.wcs-inner-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.wcs-inner-button:hover::before,.wcs-inner-button.mdc-ripple-surface--hover::before{opacity:0.1;opacity:var(--mdc-ripple-hover-opacity, 0.1)}.wcs-inner-button.mdc-ripple-upgraded--background-focused::before,.wcs-inner-button:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}.wcs-inner-button:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.wcs-inner-button:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.3;opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-inner-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-inner-button::before,.wcs-inner-button::after{background-color:white;background-color:var(--mdc-ripple-color, white)}.wcs-inner-button::before,.wcs-inner-button::after{background-color:var(--wcs-button-ripple-color)}a{text-decoration:none;box-sizing:border-box}button::-moz-focus-inner,a::-moz-focus-inner{border:0}";
+const buttonCss = "@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity;position:relative;outline:none;overflow:hidden}.mdc-ripple-surface::before,.mdc-ripple-surface::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-ripple-surface::before,.mdc-ripple-surface::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-upgraded--unbounded::before,.mdc-ripple-upgraded--unbounded::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface::before,.mdc-ripple-surface::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-ripple-surface:hover::before,.mdc-ripple-surface.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}:host{display:inline-block;--wcs-button-color:var(--wcs-button-plain-color-default);--wcs-button-plain-color-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-button-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-button-stroked-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-button-clear-color-default:var(--wcs-semantic-color-foreground-action-tertiary-default);--wcs-button-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-button-focus-outline-border-width:var(--wcs-semantic-border-width-large);--wcs-button-background-color:var(--wcs-button-plain-background-color-default);--wcs-button-plain-background-color-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-button-plain-background-color-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-button-stroked-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-button-stroked-background-color-disabled:var(--wcs-semantic-color-background-action-secondary-disabled);--wcs-button-clear-background-color-default:var(--wcs-semantic-color-background-action-tertiary-default);--wcs-button-clear-background-color-disabled:var(--wcs-semantic-color-background-action-tertiary-disabled);--wcs-button-ripple-color:var(--wcs-button-plain-ripple-color-default);--wcs-button-plain-ripple-color-default:var(--wcs-semantic-color-ripple-action-primary);--wcs-button-stroked-ripple-color-default:var(--wcs-semantic-color-ripple-action-secondary);--wcs-button-clear-ripple-color-default:var(--wcs-semantic-color-ripple-action-tertiary);--wcs-button-border-radius:var(--wcs-button-border-radius-default);--wcs-button-border-radius-default:var(--wcs-semantic-border-radius-base);--wcs-button-border-radius-rounded:var(--wcs-semantic-border-radius-full);--wcs-button-stroked-border-color:var(--wcs-button-stroked-border-color-default);--wcs-button-stroked-border-width:var(--wcs-semantic-border-width-default);--wcs-button-stroked-border-color-default:var(--wcs-semantic-color-border-action-secondary-default);--wcs-button-stroked-border-color-disabled:var(--wcs-semantic-color-border-action-secondary-disabled);--wcs-button-gap:var(--wcs-semantic-spacing-base);--wcs-button-height-s:var(--wcs-semantic-size-s);--wcs-button-font-size-s:var(--wcs-semantic-font-size-label-2);--wcs-button-padding-size-s:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-button-height-m:var(--wcs-semantic-size-m);--wcs-button-font-size-m:var(--wcs-semantic-font-size-label-1);--wcs-button-padding-size-m:calc(2 * var(--wcs-semantic-spacing-base));--wcs-button-height-l:var(--wcs-semantic-size-l);--wcs-button-font-size-l:var(--wcs-semantic-font-size-label-1);--wcs-button-padding-size-l:calc(3 * var(--wcs-semantic-spacing-base));--wcs-button-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-button-start-icon-size-l:calc(var(--wcs-button-font-size-l) * 1.5);--wcs-button-start-icon-size-m:calc(var(--wcs-button-font-size-m) * 1.5);--wcs-button-start-icon-size-s:calc(var(--wcs-button-font-size-s) * 1.5);--wcs-button-end-icon-size-l:calc(var(--wcs-button-font-size-l) * 1.5);--wcs-button-end-icon-size-m:calc(var(--wcs-button-font-size-m) * 1.5);--wcs-button-end-icon-size-s:calc(var(--wcs-button-font-size-s) * 1.5)}.wcs-inner-button:focus-visible{outline:var(--wcs-button-focus-outline-border-width) dashed var(--wcs-button-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}:host([mode=clear]){--wcs-button-stroked-border-color:transparent}:host([mode=clear]) .wcs-inner-button{box-shadow:none}:host([mode=stroked]){--wcs-button-color:var(--wcs-button-stroked-color-default);--wcs-button-background-color:transparent}:host([mode=stroked]) .wcs-inner-button::before,:host([mode=stroked]) .wcs-inner-button::after{--wcs-button-ripple-color:var(--wcs-button-stroked-ripple-color-default)}:host([mode=clear]){--wcs-button-color:var(--wcs-button-clear-color-default);--wcs-button-background-color:transparent}:host([mode=clear]) .wcs-inner-button::before,:host([mode=clear]) .wcs-inner-button::after{--wcs-button-ripple-color:var(--wcs-button-clear-ripple-color-default)}:host([size=l]){--wcs-button-padding:0 var(--wcs-button-padding-size-l);--wcs-button-height:var(--wcs-button-height-l);--wcs-button-min-width:var(--wcs-button-height-l);--wcs-button-font-size:var(--wcs-button-font-size-l)}:host([size=l]):host([shape=round]) ::slotted(wcs-mat-icon),:host([size=l]):host([shape=square]) ::slotted(wcs-mat-icon){margin:calc(-1 * var(--wcs-button-padding-size-l))}:host([size=l]) :host([start-icon]) wcs-mat-icon#start-icon{--wcs-mat-icon-font-size-m:var(--wcs-button-start-icon-size-l)}:host([size=l]) :host([end-icon]) wcs-mat-icon#end-icon{--wcs-mat-icon-font-size-m:var(--wcs-button-end-icon-size-l)}:host,:host([size=m]){--wcs-button-padding:0 var(--wcs-button-padding-size-m);--wcs-button-height:var(--wcs-button-height-m);--wcs-button-min-width:var(--wcs-button-height-m);--wcs-button-font-size:var(--wcs-button-font-size-m)}:host:host([shape=round]) ::slotted(wcs-mat-icon),:host:host([shape=square]) ::slotted(wcs-mat-icon),:host([size=m]):host([shape=round]) ::slotted(wcs-mat-icon),:host([size=m]):host([shape=square]) ::slotted(wcs-mat-icon){margin:calc(-1 * var(--wcs-button-padding-size-m))}:host:host([start-icon]) wcs-mat-icon#start-icon,:host([size=m]):host([start-icon]) wcs-mat-icon#start-icon{--wcs-mat-icon-font-size-m:var(--wcs-button-start-icon-size-m)}:host:host([end-icon]) wcs-mat-icon#end-icon,:host([size=m]):host([end-icon]) wcs-mat-icon#end-icon{--wcs-mat-icon-font-size-m:var(--wcs-button-end-icon-size-m)}:host([size=s]){--wcs-button-padding:0 var(--wcs-button-padding-size-s);--wcs-button-height:var(--wcs-button-height-s);--wcs-button-min-width:var(--wcs-button-height-s);--wcs-button-font-size:var(--wcs-button-font-size-s)}:host([size=s]):host([shape=round]) ::slotted(wcs-mat-icon),:host([size=s]):host([shape=square]) ::slotted(wcs-mat-icon){margin:calc(-1 * var(--wcs-button-padding-size-s))}:host([size=s]):host([start-icon]) wcs-mat-icon#start-icon{--wcs-mat-icon-font-size-m:var(--wcs-button-start-icon-size-s)}:host([size=s]):host([end-icon]) wcs-mat-icon#end-icon{--wcs-mat-icon-font-size-m:var(--wcs-button-end-icon-size-s)}:host([shape=round]){--wcs-button-border-radius:var(--wcs-button-border-radius-rounded)}:host([shape=square]){--wcs-button-padding:0}:host([shape=normal]) .wcs-inner-button{min-width:var(--wcs-button-min-width, unset);min-height:var(--wcs-button-height, unset)}:host([mode=stroked]) .wcs-inner-button{box-shadow:inset 0 0 0 var(--wcs-button-stroked-border-width) var(--wcs-button-stroked-border-color)}:host([loading]){position:relative}:host([loading]) .wcs-inner-button>*:not(wcs-spinner){visibility:hidden;opacity:0}:host([loading]) wcs-spinner{--wcs-spinner-dashed-background-circle:var(--wcs-button-color);--wcs-spinner-rotating-circle-color:var(--wcs-button-color);height:calc(var(--wcs-button-height) / 2);width:calc(var(--wcs-button-min-width) / 2);position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}:host([disabled]),:host([loading]){cursor:not-allowed}:host([disabled]) .wcs-inner-button,:host([loading]) .wcs-inner-button{opacity:1;cursor:default;pointer-events:none}:host([disabled]){--wcs-button-color:var(--wcs-button-color-disabled);--wcs-button-background-color:var(--wcs-button-plain-background-color-disabled)}:host([mode=stroked][disabled]){--wcs-button-stroked-border-color:var(--wcs-button-stroked-border-color-disabled);--wcs-button-background-color:var(--wcs-button-stroked-background-color-disabled)}:host([mode=clear][disabled]){--wcs-button-background-color:var(--wcs-button-clear-background-color-disabled)}.wcs-inner-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity;--mdc-ripple-focus-opacity:0;display:flex;align-items:center;justify-content:center;width:100%;font-family:var(--wcs-font-sans-serif);background-color:var(--wcs-button-background-color);color:var(--wcs-button-color);padding:var(--wcs-button-padding);border-radius:var(--wcs-button-border-radius);border:none;overflow:hidden;outline:0;text-transform:none;margin:0;cursor:pointer;font-weight:var(--wcs-button-font-weight);text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;font-size:var(--wcs-button-font-size);line-height:1.5;height:var(--wcs-button-height);min-width:var(--wcs-button-min-width);gap:var(--wcs-button-gap);transition:color 175ms ease-in-out, background-color 175ms ease-in-out}.wcs-inner-button::before,.wcs-inner-button::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.wcs-inner-button::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.wcs-inner-button::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.wcs-inner-button.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.wcs-inner-button.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.wcs-inner-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.wcs-inner-button.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.wcs-inner-button.mdc-ripple-upgraded--foreground-deactivation::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.wcs-inner-button::before,.wcs-inner-button::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.wcs-inner-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.wcs-inner-button:hover::before,.wcs-inner-button.mdc-ripple-surface--hover::before{opacity:0.1;opacity:var(--mdc-ripple-hover-opacity, 0.1)}.wcs-inner-button.mdc-ripple-upgraded--background-focused::before,.wcs-inner-button:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}.wcs-inner-button:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.wcs-inner-button:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.3;opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-inner-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-inner-button::before,.wcs-inner-button::after{background-color:white;background-color:var(--mdc-ripple-color, white)}.wcs-inner-button::before,.wcs-inner-button::after{background-color:var(--wcs-button-ripple-color)}a{text-decoration:none;box-sizing:border-box}button::-moz-focus-inner,a::-moz-focus-inner{border:0}";
 const WcsButtonStyle0 = buttonCss;
 
 const BUTTON_INHERITED_ATTRS = ['tabindex', 'title'];
@@ -1082,6 +1082,8 @@ const Button = class {
         this.inheritedAttributes = {};
         this.type = 'button';
         this.href = undefined;
+        this.startIcon = undefined;
+        this.endIcon = undefined;
         this.target = undefined;
         this.disabled = false;
         this.ripple = true;
@@ -1138,7 +1140,7 @@ const Button = class {
         const attrs = this.href !== undefined
             ? { href: this.href, role: 'button', target: this.target }
             : { type: this.type };
-        return (h(TagType, Object.assign({ key: '14f58b90f3d1b05b2709cbdb941621c827d462ec' }, attrs, { class: "wcs-inner-button", disabled: this.disabled || this.loading, ref: (el) => this.nativeButton = el }, this.inheritedAttributes), this.loading && h("wcs-spinner", { key: '58dbb8b462b5023c59e8bf728ba1d93aa0575cb4' }), h("slot", { key: 'b6c394ac1c6a4ee5a9fd6bf10a268420843409d2' })));
+        return (h(TagType, Object.assign({ key: '354b94e4b7b5a8666da9eb9b9c3dde2eb7defa82' }, attrs, { class: "wcs-inner-button", disabled: this.disabled || this.loading, ref: (el) => this.nativeButton = el }, this.inheritedAttributes), this.loading && h("wcs-spinner", { key: 'e9712fbc68976f2b2982e1875c70e3dd60027f67' }), this.startIcon && h("wcs-mat-icon", { key: '983131bbd0d2160cb4f167e28ca54775cabda25a', id: "start-icon", size: 'm', icon: this.startIcon }), h("slot", { key: 'd9fd23e642eb9260c7b777a04f68920d5c02774c' }), this.endIcon && h("wcs-mat-icon", { key: 'd16c804a91b7fccc2025229e22e096abe0ccd586', id: "end-icon", size: 'm', icon: this.endIcon })));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -1148,6 +1150,38 @@ const Button = class {
 };
 Button.style = WcsButtonStyle0;
 
+const matIconCss = ":host{--wcs-mat-icon-font-size-s:18px;--wcs-mat-icon-font-size-m:24px;--wcs-mat-icon-font-size-l:36px;--wcs-mat-icon-font-size-xl:48px;display:flex;flex-direction:column;justify-content:center}:host .size-s{font-size:var(--wcs-mat-icon-font-size-s) !important}:host .size-m{font-size:var(--wcs-mat-icon-font-size-m) !important}:host .size-l{font-size:var(--wcs-mat-icon-font-size-l) !important}:host .size-xl{font-size:var(--wcs-mat-icon-font-size-xl) !important}:host .material-icons{font-family:\"Material Icons\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}:host .material-icons-outlined{font-family:\"Material Icons Outlined\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}:host .material-icons-two-tone{--google-font-color-materialiconstwotone:none;font-family:\"Material Icons Two Tone\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}:host .material-icons-round{font-family:\"Material Icons Round\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}:host .material-icons-sharp{font-family:\"Material Icons Sharp\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}";
+const WcsMatIconStyle0 = matIconCss;
+
+const ICON_FAMILY_CLASS_NAME = {
+    filled: 'material-icons',
+    outlined: 'material-icons-outlined',
+    twotone: 'material-icons-two-tone',
+    rounded: 'material-icons-round',
+    sharp: 'material-icons-sharp'
+};
+const MAT_ICON_INHERITED_ATTRS = ['title'];
+const MatIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.inheritedAttributes = {};
+        this.icon = undefined;
+        this.size = 'm';
+        this.family = 'filled';
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, MAT_ICON_INHERITED_ATTRS));
+    }
+    async setAriaAttribute(attr, value) {
+        setOrRemoveAttribute(this.nativeIcon, attr, value);
+    }
+    render() {
+        return (h(Host, { key: '5b8dfa39a9c80b2526a936a7fde2cfa500b78707' }, h("i", Object.assign({ key: 'e70d3e0e6e4e83316fa64fd5bb5f522b65a51144', "aria-hidden": "true", class: ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size, ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes), this.icon)));
+    }
+    get el() { return getElement(this); }
+};
+MatIcon.style = WcsMatIconStyle0;
+
 const spinnerCss = "@keyframes wcs-spinner-grow{0%{opacity:0;transform:scale(0)}25%{opacity:1}75%{opacity:0;transform:scale(1)}}@keyframes wcs-spinner-rotate{0%{transform:rotate(0deg);transform-origin:center}100%{transform:rotate(360deg);transform-origin:center}}@keyframes wcs-spinner-dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-131}}:host{display:inline-block;width:2rem;height:2rem;vertical-align:text-bottom;border-radius:50%;--wcs-spinner-dashed-background-circle:var(--wcs-semantic-color-background-surface-tertiary);--wcs-spinner-rotating-circle-color:var(--wcs-semantic-color-background-surface-brand);--wcs-spinner-rotate-animation-duration:var(--wcs-semantic-motion-duration-animation-base);--wcs-spinner-dashed-animation-duration:var(--wcs-semantic-motion-duration-animation-base);--wcs-spinner-growing-animation-duration:var(--wcs-semantic-motion-duration-animation-fast)}:host([mode=border]) svg .dashed-background-circle{stroke:var(--wcs-spinner-dashed-background-circle);stroke-width:7px;stroke-dasharray:3, 3;stroke-dashoffset:1;stroke-linecap:butt}:host([mode=border]) svg .infinite-rotation-container{animation:wcs-spinner-rotate var(--wcs-spinner-rotate-animation-duration) linear infinite}:host([mode=border]) svg .dash-rotating-circle{stroke:var(--wcs-spinner-rotating-circle-color);stroke-width:8px;stroke-linecap:round;animation:wcs-spinner-dash var(--wcs-spinner-dashed-animation-duration) ease-in-out infinite}:host([mode=growing]){background-color:var(--wcs-spinner-rotating-circle-color);opacity:0;animation:wcs-spinner-grow var(--wcs-spinner-growing-animation-duration) ease-out infinite}";
 const WcsSpinnerStyle0 = spinnerCss;
 
@@ -1157,11 +1191,11 @@ const Spinner = class {
         this.mode = 'border';
     }
     render() {
-        return (h("svg", { key: '166ed35ffcf46c317b2427e7ee0c3a960726f990', viewBox: "0 0 50 50" }, h("circle", { key: '642490f6a8186e12a9072173882767b84d5c2dbc', class: "dashed-background-circle", cx: "25", cy: "25", r: "21", fill: "none" }), h("g", { key: '0df7abf2426c8f04f0d1eb3867b91ce7c3faaceb', class: "infinite-rotation-container" }, h("circle", { key: 'd02aa1c02b2c732dd8bc1cd018f9b72bda28f7c4', class: "dash-rotating-circle", cx: "25", cy: "25", r: "21", fill: "none" }))));
+        return (h("svg", { key: '79a932d2ac7e36ac39ee7e44c09b48b8235d4517', viewBox: "0 0 50 50" }, h("circle", { key: '4429d6304a2fefc73c5d313b2ce30871a920f70f', class: "dashed-background-circle", cx: "25", cy: "25", r: "21", fill: "none" }), h("g", { key: 'cc434256168f567ef59bebc2aeafb60d50f6084d', class: "infinite-rotation-container" }, h("circle", { key: '96f2d91af40a1c8ca343e03b916ef14eefec92ff', class: "dash-rotating-circle", cx: "25", cy: "25", r: "21", fill: "none" }))));
     }
 };
 Spinner.style = WcsSpinnerStyle0;
 
-export { Button as wcs_button, Spinner as wcs_spinner };
+export { Button as wcs_button, MatIcon as wcs_mat_icon, Spinner as wcs_spinner };
 
-//# sourceMappingURL=wcs-button_2.entry.js.map
+//# sourceMappingURL=wcs-button_3.entry.js.map