wcs-core 7.5.1 → 7.7.0

package/dist/wcs/p-c5bad0b8.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getAccessibleName","order","double","GridPaginationArrow","active","h","mode","shape","size","disabled","title","style","cursor","xmlns","width","height","viewBox","type","fill","class","d","gridPaginationCss","WcsGridPaginationStyle0","GRID_PAGINATION_INHERITED_ATTRS","GridPagination","this","inheritedAttributes","INDEX_FIRST_PAGE","availablePageSizes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeNav","getWcsGrid","parentElement","tagName","undefined","lastPage","currentPage","pageCount","emitPaginationChange","focusFirstGridCell","nextPage","canGoToNextPage","previousPage","canGoToPreviousPage","firstPage","onChangePageSize","event","pageSize","detail","grid","requestAnimationFrame","blur","focusFirstCell","wcsGridPaginationChange","emit","pagination","itemsCount","render","Host","key","slot","placeholder","onWcsChange","bind","map","id","hidden","ref","onClick"],"sources":["src/components/grid-pagination/grid-pagination-arrow.tsx","src/components/grid-pagination/grid-pagination.scss?tag=wcs-grid-pagination&encapsulation=shadow","src/components/grid-pagination/grid-pagination.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface GridPaginationArrowProps {\n  active: boolean;\n  order: 'next' | 'previous';\n  double?: boolean;\n}\n\nconst getAccessibleName = (order: GridPaginationArrowProps['order'], double: GridPaginationArrowProps['double']): string => {\n  switch (order) {\n    case 'next':\n      return double ? 'Dernière page' : 'Page suivante';\n    case 'previous':\n    default:\n      return double ? 'Première page' : 'Page précédente';\n  }\n}\n\nexport const GridPaginationArrow: FunctionalComponent<GridPaginationArrowProps> = ({active, order, double = false}) => (\n  <wcs-button mode=\"clear\"\n              shape=\"square\"\n              size=\"s\"\n              disabled={!active}\n              title={getAccessibleName(order, double)}>\n    <svg style={{cursor: 'pointer'}}\n         aria-hidden=\"true\"\n         xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n      <style type=\"text/css\">{`\n              .arrow-group {\n                  transform-origin: 50% 51%;\n                  transition: transform 175ms ease-in-out;\n              }\n              .arrow {\n                  transition: fill 175ms ease-in-out;\n                  fill: var(--wcs-grid-pagination-arrow-color-inactive, var(--wcs-button-color));\n              }\n              .second-arrow {\n                  transform: translateY(-8px);\n              }\n              .next {\n                  transform: rotate(90deg);\n              }\n              .previous {\n                  transform: rotate(-90deg);\n              }\n              .active {\n                  fill: var(--wcs-grid-pagination-arrow-color-active, var(--wcs-button-color));\n              }\n          `}</style>\n      <g fill=\"none\" class={order + ' arrow-group'}>\n        <path class={(active ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n      </g>\n      {\n        double ?\n          <g fill=\"none\" class={order + ' arrow-group'}>\n            <path class={(active ? 'active' : '') + ' arrow second-arrow'}\n                  d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n            <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n          </g>\n          : ''\n      }\n    </svg>\n  </wcs-button>\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: block;\n    margin-top: var(--wcs-grid-pagination-margin-top);\n\n    --wcs-grid-pagination-color: var(--wcs-semantic-color-text-primary);\n    --wcs-grid-pagination-font-size: var(--wcs-semantic-font-size-label-2);\n    --wcs-grid-pagination-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-grid-pagination-gap: var(--wcs-semantic-spacing-base);\n    --wcs-grid-pagination-page-size-gap: var(--wcs-semantic-spacing-base);\n    --wcs-grid-pagination-counter-gap: var(--wcs-semantic-spacing-small);\n    --wcs-grid-pagination-margin-top: var(--wcs-semantic-spacing-large);\n\n    --wcs-grid-pagination-arrow-color-inactive: unset; /* Optional : Overrides the fill property of the grid-pagination-arrow */\n    --wcs-grid-pagination-arrow-color-active: unset; /* Optional : Overrides the fill property of the grid-pagination-arrow */\n}\n\n.container {\n    display: grid;\n    gap: var(--wcs-grid-pagination-gap);\n    grid-template-columns: auto auto auto;\n    justify-content: space-between;\n    align-items: center;\n    color: var(--wcs-grid-pagination-color);\n    font-size: var(--wcs-grid-pagination-font-size);\n    font-weight: var(--wcs-grid-pagination-font-weight);\n}\n\n.available-page-sizes {\n    width: auto;\n}\n\n.page-management, .page-size, .items-count {\n    display: flex;\n    align-items: center;\n}\n\n.page-size {\n    gap: var(--wcs-grid-pagination-page-size-gap);\n}\n\n.page-management {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n\n.pagination-arrow {\n    display: flex;\n}\n\n.pagination-counter {\n    padding: 0 var(--wcs-grid-pagination-counter-gap);\n\n    span {\n        white-space: nowrap;\n    }\n}\n\n/* TODO : Remove this when the select component will be able to handle the size S */\nwcs-select.available-page-sizes {\n    --wcs-select-control-height: var(--wcs-semantic-size-s);\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    Event, EventEmitter,\n    h,\n    Host, Method,\n    Prop\n} from '@stencil/core';\nimport {\n    WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst GRID_PAGINATION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.\n * \n * @cssprop --wcs-grid-pagination-color - Text color of the grid pagination\n * @cssprop --wcs-grid-pagination-font-size - Font-size of the grid pagination\n * @cssprop --wcs-grid-pagination-font-weight - Font-weight of the grid pagination\n * @cssprop --wcs-grid-pagination-gap - Gap between the page size, number of elements and page management\n * @cssprop --wcs-grid-pagination-page-size-gap - Gap between the select and the text within the page size container\n * @cssprop --wcs-grid-pagination-counter-gap - Gap within the page management counter\n * @cssprop --wcs-grid-pagination-margin-top - Margin between the grid and the pagination\n * @cssprop --wcs-grid-pagination-arrow-color-inactive - Color of the inactive arrow\n * @cssprop --wcs-grid-pagination-arrow-color-active - Color of the active arrow\n */\n@Component({\n    tag: 'wcs-grid-pagination',\n    styleUrl: 'grid-pagination.scss',\n    shadow: true\n})\nexport class GridPagination implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeNav!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    static readonly INDEX_FIRST_PAGE: number = 0;\n    /**\n     * Set the available page sizes in the pagination dropdown on the left.\n     */\n    @Prop() availablePageSizes: number[] = [10, 20, 50];\n    /**\n     * The current page of the pagination. First page starts at index 0.\n     */\n    @Prop({mutable: true}) currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n    /**\n     * Maximum number of elements shown per page.  \n     * Default is the first value of `availablePageSizes`.\n     */\n    @Prop() pageSize: number = this.availablePageSizes[0];\n    /**\n     * Total elements in the grid.  \n     * - **Grid in `Server mode`** : You have to set `itemsCount` = your total data length.  \n     * - **Grid not in Server mode** : Do not set it manually : itemsCount is set and updated every pagination refresh.\n     */\n    @Prop() itemsCount: number = 0;\n    /**\n     * Max number of pages.  \n     * - **Grid in `Server mode`** : You have to set `pageCount` = `itemsCount` divided by `pageSize`.  \n     * - **Grid not in Server mode** : Do not set it manually : pageCount is set and updated every pagination refresh.\n     */\n    @Prop() pageCount: number = 1;\n    /**\n     * Event emitted when the pagination changes.\n     */\n    @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GRID_PAGINATION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeNav, attr, value);\n    }\n    \n    private getWcsGrid(): HTMLWcsGridElement | undefined {\n        return this.el.parentElement.tagName === 'WCS-GRID' ? this.el.parentElement as HTMLWcsGridElement : undefined;\n    }\n\n    private lastPage(): void {\n        this.currentPage = this.pageCount - 1;\n        this.emitPaginationChange();\n        this.focusFirstGridCell();\n    }\n\n    private nextPage(): void {\n        if (this.canGoToNextPage()) {\n            this.currentPage++;\n            this.emitPaginationChange();\n            this.focusFirstGridCell();\n        }\n    }\n\n    private canGoToNextPage(): boolean {\n        return this.currentPage + 1 < this.pageCount;\n    }\n\n    private previousPage(): void {\n        if (this.canGoToPreviousPage()) {\n            this.currentPage--;\n            this.emitPaginationChange();\n            this.focusFirstGridCell();\n        }\n    }\n\n    private canGoToPreviousPage(): boolean {\n        return this.currentPage > 0;\n    }\n\n    private firstPage(): void {\n        this.currentPage = 0;\n        this.emitPaginationChange();\n        this.focusFirstGridCell();\n    }\n\n    private onChangePageSize(event: CustomEvent<SelectChangeEventDetail>): void {\n        this.pageSize = event.detail.value;\n        if (this.currentPage + 1 > this.pageSize) {\n            this.currentPage = 0;\n        }\n        this.emitPaginationChange();\n        this.focusFirstGridCell();\n    }\n\n    /**\n     * Move focus to the first grid cell after a pagination change\n     */\n    private focusFirstGridCell() {\n        const grid = this.getWcsGrid();\n        if (grid) {\n            requestAnimationFrame(() => {\n                this.el.blur();\n                grid.focusFirstCell();\n            })\n        }\n    }\n\n    private emitPaginationChange(): void {\n        this.wcsGridPaginationChange.emit({\n            pagination: {\n                currentPage: this.currentPage,\n                pageSize: this.pageSize,\n                itemsCount: this.itemsCount,\n                pageCount: this.pageCount\n            }\n        });\n    }\n\n    render(): any {\n        return (<Host slot=\"grid-pagination\">\n            <div class=\"container\">\n                <div class=\"page-size\">\n                    <wcs-select placeholder=\"Eléments par page\"\n                                class=\"available-page-sizes\"\n                                aria-labelledby=\"elements-per-page-number elements-per-page-text\"\n                                value={this.pageSize}\n                                onWcsChange={this.onChangePageSize.bind(this)}>\n                        {\n                            this.availablePageSizes.map((pageSize) =>\n                                <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n                            )\n                        }\n                    </wcs-select>\n                    <span id=\"elements-per-page-number\" hidden>{this.pageSize}</span>\n                    <span id=\"elements-per-page-text\">éléments par page</span>\n                </div>\n\n                <div class=\"items-count\">\n                    <span>{this.itemsCount} éléments</span>\n                </div>\n\n                <nav aria-label=\"pagination\" ref={(el) => (this.nativeNav = el)} {...this.inheritedAttributes}>\n                    <ul class=\"page-management\">\n                        <li class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n                        </li>\n    \n                        <li class=\"pagination-counter\">\n                            <span aria-label={`Page ${this.currentPage + 1} sur ${this.pageCount}`} aria-current=\"page\">\n                                {this.currentPage + 1} / {this.pageCount}\n                            </span>\n                        </li>\n    \n                        <li class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </Host>)\n    }\n}\n"],"mappings":"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"}

package/dist/wcs/p-c7812760.entry.js

@@ -1,2 +0,0 @@
-import{r,h as e,H as s}from"./p-32e583ea.js";const c=":host{--wcs-divider-color:var(--wcs-semantic-color-border-secondary);--wcs-divider-height:var(--wcs-semantic-border-width-default);display:block;border-bottom:solid var(--wcs-divider-height) var(--wcs-divider-color)}";const o=c;const d=class{constructor(e){r(this,e)}render(){return e(s,{key:"cf4452e90a52e1bb419fec0db2d9c0838ad7b134"})}};d.style=o;export{d as wcs_divider};
-//# sourceMappingURL=p-c7812760.entry.js.map

package/dist/wcs/p-cad10435.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as r,h as e,H as t}from"./p-32e583ea.js";import{c as d,d as c}from"./p-52d77e1f.js";const s="wcs-dropdown-item{--wcs-dropdown-item-height:var(--wcs-semantic-size-m);--wcs-dropdown-item-padding-horizontal:var(--wcs-semantic-spacing-base);--wcs-dropdown-item-padding-vertical:0;--wcs-dropdown-item-text-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-dropdown-item-text-color-default:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-dropdown-item-text-color-hover:var(--wcs-semantic-color-foreground-action-neutral-hover);--wcs-dropdown-item-text-color-press:var(--wcs-semantic-color-foreground-action-neutral-press);--wcs-dropdown-item-background-color-default:var(--wcs-semantic-color-background-action-neutral-default);--wcs-dropdown-item-background-color-hover:var(--wcs-semantic-color-background-action-neutral-hover);--wcs-dropdown-item-background-color-press:var(--wcs-semantic-color-background-action-neutral-press);--wcs-dropdown-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-dropdown-item-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-item-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);padding:0 var(--wcs-dropdown-item-padding-horizontal);font-weight:var(--wcs-dropdown-item-text-font-weight);cursor:pointer;color:var(--wcs-dropdown-item-text-color-default);height:var(--wcs-dropdown-item-height);display:flex;flex-direction:row;align-items:center;border-radius:var(--wcs-dropdown-item-border-radius);transition:background-color var(--wcs-dropdown-item-transition-duration) ease-in-out}wcs-dropdown-item:hover{color:var(--wcs-dropdown-item-text-color-hover);background-color:var(--wcs-dropdown-item-background-color-hover)}wcs-dropdown-item:active{color:var(--wcs-dropdown-item-text-color-press);background-color:var(--wcs-dropdown-item-background-color-press)}wcs-dropdown-item:focus-visible{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}@supports not selector(wcs-dropdown-item:focus-visible){wcs-dropdown-item:focus-within{outline:dashed var(--wcs-dropdown-item-border-width-focus) var(--wcs-dropdown-item-border-color-focus);outline-offset:calc(-1 * var(--wcs-dropdown-item-border-width-focus))}}";const i=s;const n=class{constructor(e){o(this,e);this.wcsDropdownItemClick=r(this,"wcsDropdownItemClick",7)}onMouseUp(o){this.wcsDropdownItemClick.emit()}onKeyDown(o){if(d(o)||c(o)){o.preventDefault();o.stopImmediatePropagation();this.wcsDropdownItemClick.emit()}}render(){return e(t,{key:"70e0767afe5fe295df4292e356db89d555fa71a3",slot:"item",role:"menuitem",tabindex:"-1"},e("slot",{key:"11cd674f89784aec6bfa1ba4d15f0fb0f25d976e"}))}};n.style=i;export{n as wcs_dropdown_item};
-//# sourceMappingURL=p-cad10435.entry.js.map

package/dist/wcs/p-dfb52a1c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["alertDrawerCss","WcsAlertDrawerStyle0","AlertDrawer","this","alertEventListeners","WeakMap","timeoutId","undefined","userPrefersReducedMotion","window","matchMedia","matches","close","alert","setTimeout","remove","delete","parseCssTimeValueToMilliseconds","getComputedStyle","el","getPropertyValue","show","alertsContainer","appendChild","renderToast","alertElement","document","createElement","setAttribute","intent","_a","showProgressBar","String","_b","timeout","listener","set","addEventListener","title","textContent","subtitle","render","h","Host","key","role","ref","id","disconnectedCallback","clearTimeout"],"sources":["src/components/alert-drawer/alert-drawer.scss?tag=wcs-alert-drawer&encapsulation=shadow","src/components/alert-drawer/alert-drawer.tsx"],"sourcesContent":["@import '../../style/breakpoints';\n@import './alert-drawer-keyframes';\n\n:host {\n    --wcs-alert-drawer-gap: var(--wcs-semantic-spacing-base);\n    --wcs-alert-drawer-margin-horizontal: var(--wcs-semantic-spacing-base);\n    --wcs-alert-drawer-margin-vertical: var(--wcs-semantic-spacing-base);\n    --wcs-alert-drawer-min-width: 400px;\n\n    --wcs-alert-drawer-hide-alert-animation-duration: var(--wcs-semantic-motion-duration-feedback-slow);\n\n    position: fixed;\n    z-index: 99999;\n    width: fit-content;\n\n    wcs-alert {\n        --wcs-alert-min-width: var(--wcs-alert-drawer-min-width);\n    }\n\n    wcs-alert:not([show]) {\n        animation-duration: var(--wcs-alert-drawer-hide-alert-animation-duration);\n        animation-timing-function: ease;\n        animation-name: slide-out;\n\n        animation-fill-mode: forwards; // forwards = keep the last keyframe state => that keeps the alert with the opacity 0 at the end of the animation\n\n        @media (prefers-reduced-motion: reduce) {\n            animation: none;\n        }\n    }\n\n    #alerts-container {\n        display: flex;\n        flex-direction: column;\n        gap: var(--wcs-alert-drawer-gap);\n    }\n}\n\n@include for-phone-only {\n    :host {\n        left: 50% !important; // !important => to override the left applied by the :host([position=left]) selector\n        transform: translate(-50%, 0);\n        width: calc(100% - 2 * var(--wcs-alert-drawer-margin-horizontal)); // 1 * margin for the left and 1 * margin for the right\n\n        wcs-alert {\n            --wcs-alert-min-width: 100%;\n        }\n    }\n}\n\n:host([position=top]), :host([position=top-left]), :host([position=top-right]) {\n    top: var(--wcs-alert-drawer-margin-vertical);\n    flex-direction: column-reverse;\n\n    wcs-alert[show] {\n        animation: slide-in-top var(--wcs-alert-drawer-hide-alert-animation-duration) ease;\n\n        @media (prefers-reduced-motion: reduce) {\n            animation: none;\n        }\n    }\n}\n\n:host([position=bottom]), :host([position=bottom-left]), :host([position=bottom-right]) {\n    bottom: var(--wcs-alert-drawer-margin-vertical);\n\n    wcs-alert[show] {\n        animation: slide-in-bottom var(--wcs-alert-drawer-hide-alert-animation-duration) ease;\n\n        @media (prefers-reduced-motion: reduce) {\n            animation: none;\n        }\n    }\n}\n\n:host([position=top-right]), :host([position=bottom-right]) {\n    right: var(--wcs-alert-drawer-margin-horizontal);\n}\n\n:host([position=top-left]), :host([position=bottom-left]) {\n    left: var(--wcs-alert-drawer-margin-horizontal);\n}\n\n:host([position=bottom]), :host([position=top]) {\n    left: 50%;\n    transform: translate(-50%, 0);\n}\n","import { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { parseCssTimeValueToMilliseconds } from '../../utils/helpers';\nimport { WcsAlertDrawerPosition } from \"./alert-drawer-interface\";\nimport { WcsAlertConfig } from \"../alert/alert-interface\";\n\n/**\n * Serve as a container for displaying `wcs-alert` components. Directly use this component to display alerts in your applications.\n * \n * ## Usage\n * \n * You can place the `wcs-alert-drawer` component anywhere in your application. It will be used to display alerts.\n * You need to set `position` property to define where the alert drawer will be displayed on the screen.\n * \n * About alerts order:\n * - alerts are ordered up-bottom if the position is `top` and bottom-up if the position is `bottom`\n * \n * ## Accessibility guidelines 💡\n * \n * - The component has `aria-live=\"polite\"` and `aria-atomic=\"true\"` attributes to announce the new alerts to screen readers\n * \n * ## Configuration (on the web component)\n *\n * Per default, the `wcs-alert-drawer` is configured with:\n * - `position: 'top-right'`\n * - `showProgressBar: false`\n * - `timeout: 5000`\n *\n * When using the `WcsAlertDrawer::show(alert: WcsAlertConfig)` method, you can override the default configuration by \n * overriding it through the argument.\n * You can also set them in the `wcs-alert-drawer` component directly as attributes\n * \n * ```html\n * <wcs-alert-drawer position=\"top-right\" show-progress-bar timeout=\"10000\">\n * ```\n * With this configuration, all alerts will be displayed with a progress bar and a timeout of 10 seconds.\n * \n * @slot - the alert drawer content, where alerts you put as children will be displayed\n * \n * @cssprop --wcs-alert-drawer-gap - Gap between alerts\n * @cssprop --wcs-alert-drawer-margin-horizontal - Margin horizontal of the alert drawer\n * @cssprop --wcs-alert-drawer-margin-vertical - Margin vertical of the alert drawer\n * @cssprop --wcs-alert-drawer-hide-alert-animation-duration - Duration of the hide alert animation\n * @cssprop --wcs-alert-drawer-min-width - Minimum width of the alert drawer => define the width of the alerts\n */\n@Component({\n    tag: 'wcs-alert-drawer',\n    styleUrl: 'alert-drawer.scss',\n    shadow: true,\n})\nexport class AlertDrawer {\n    @Element()\n    private el!: HTMLWcsAlertDrawerElement;\n\n    /**\n     * Position of the alert drawer on the screen\n     */\n    @Prop({ reflect: true }) position: WcsAlertDrawerPosition = 'bottom-right';\n\n    /**\n     * Timeout for the alert to be dismissed automatically\n     */\n    @Prop() timeout: number = 5000;\n    /**\n     * Whether to show the progress bar or not\n     */\n    @Prop() showProgressBar: boolean = false;\n\n    /*\n     https://www.reddit.com/r/Frontend/comments/1ato11w/comment/kqz4gt8/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button\n     https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef\n     */\n    private alertEventListeners = new WeakMap<HTMLElement, (evt: AnimationEvent) => void>();\n    private timeoutId = undefined;\n\n    private userPrefersReducedMotion: boolean = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    private alertsContainer: HTMLDivElement;\n\n    /**\n     * Handles the dismissal of an alert\n     * @param alert The alert element\n     */\n    private close = (alert: HTMLWcsAlertElement): void => {\n        if (!this.userPrefersReducedMotion) {\n            this.timeoutId = setTimeout(() => {\n                alert.remove();\n                // Cleanup the event listener reference\n                this.alertEventListeners.delete(alert);\n            }, parseCssTimeValueToMilliseconds(window.getComputedStyle(this.el).getPropertyValue(\"--wcs-alert-drawer-hide-alert-animation-duration\")) || 300);\n        } else {\n            // If the user has reduced motion preference, remove the alert immediately\n            alert.remove();\n            // Cleanup the event listener reference\n            this.alertEventListeners.delete(alert);\n        }\n    };\n\n    /**\n     * Method exposed on `wcs-alert-drawer` to show an alert programmatically via the JS API\n     * @example\n     * Plain javascript (example inside a script tag):\n     * ```javascript\n     *  document.querySelector('wcs-alert-drawer').show({\n     *      title: 'Alert title',\n     *      subtitle: 'Alert subtitle',\n     *      intent: 'info',\n     *      showProgressBar: true,\n     *      timeout: 5000\n     *  });\n     * @param alert The alert to show\n     */\n    @Method()\n    async show(alert: WcsAlertConfig): Promise<void> {\n        this.alertsContainer.appendChild(this.renderToast(alert));\n    }\n\n    private renderToast(alert: WcsAlertConfig): HTMLWcsAlertElement {\n        const alertElement = document.createElement('wcs-alert') as HTMLWcsAlertElement;\n        alertElement.setAttribute('intent', alert.intent);\n\n        // Uses the alert config if defined, otherwise falls back to the drawer default\n        // as the showProgressBar is a boolean attribute, we need to set it to an empty string only if true\n        if ((alert.showProgressBar ?? this.showProgressBar)) {\n            alertElement.setAttribute('show-progress-bar', '');\n        }\n        \n        // Uses the alert config if defined, otherwise falls back to the drawer default\n        alertElement.setAttribute('timeout', String(alert.timeout ?? this.timeout));\n\n        const listener = () => this.close(alertElement);\n        this.alertEventListeners.set(alertElement, listener);\n        alertElement.addEventListener(\"wcsAlertDismiss\", listener);\n        \n        const title = document.createElement('span') as HTMLSpanElement;\n        title.setAttribute('slot', 'title');\n        title.textContent = alert.title;\n        alertElement.appendChild(title);\n\n        const subtitle = document.createElement('span') as HTMLSpanElement;\n        subtitle.setAttribute('slot', 'subtitle');\n        subtitle.textContent = alert.subtitle;\n        alertElement.appendChild(subtitle);\n\n        return alertElement;\n    }\n\n    render() {\n        // https://www.clever-cloud.com/doc/clever-components/?path=/docs/%F0%9F%9B%A0-toast-cc-toaster--docs#about-accessibility\n        return (\n            <Host role=\"region\" aria-label=\"Informations\" aria-live=\"polite\" aria-atomic=\"true\">\n                <div ref={(el) => this.alertsContainer = el} id=\"alerts-container\">\n                </div>\n            </Host>\n        );\n    }\n\n    disconnectedCallback() {\n        this.alertEventListeners = new WeakMap(); // Clear the event listeners, weakmap is not iterable\n        clearTimeout(this.timeoutId);\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,okFACvB,MAAAC,EAAeD,E,MCgDFE,EAAW,M,yBAsBZC,KAAAC,oBAAsB,IAAIC,QAC1BF,KAAAG,UAAYC,UAEZJ,KAAAK,yBAAoCC,OAAOC,WAAW,oCAAoCC,QAO1FR,KAAAS,MAASC,IACb,IAAKV,KAAKK,yBAA0B,CAChCL,KAAKG,UAAYQ,YAAW,KACxBD,EAAME,SAENZ,KAAKC,oBAAoBY,OAAOH,EAAM,GACvCI,EAAgCR,OAAOS,iBAAiBf,KAAKgB,IAAIC,iBAAiB,sDAAwD,I,KAC1I,CAEHP,EAAME,SAENZ,KAAKC,oBAAoBY,OAAOH,E,iBApCoB,e,aAKlC,I,qBAIS,K,CA8CnC,UAAMQ,CAAKR,GACPV,KAAKmB,gBAAgBC,YAAYpB,KAAKqB,YAAYX,G,CAG9C,WAAAW,CAAYX,G,QAChB,MAAMY,EAAeC,SAASC,cAAc,aAC5CF,EAAaG,aAAa,SAAUf,EAAMgB,QAI1C,IAAKC,EAAAjB,EAAMkB,mBAAe,MAAAD,SAAA,EAAAA,EAAI3B,KAAK4B,gBAAkB,CACjDN,EAAaG,aAAa,oBAAqB,G,CAInDH,EAAaG,aAAa,UAAWI,QAAOC,EAAApB,EAAMqB,WAAO,MAAAD,SAAA,EAAAA,EAAI9B,KAAK+B,UAElE,MAAMC,EAAW,IAAMhC,KAAKS,MAAMa,GAClCtB,KAAKC,oBAAoBgC,IAAIX,EAAcU,GAC3CV,EAAaY,iBAAiB,kBAAmBF,GAEjD,MAAMG,EAAQZ,SAASC,cAAc,QACrCW,EAAMV,aAAa,OAAQ,SAC3BU,EAAMC,YAAc1B,EAAMyB,MAC1Bb,EAAaF,YAAYe,GAEzB,MAAME,EAAWd,SAASC,cAAc,QACxCa,EAASZ,aAAa,OAAQ,YAC9BY,EAASD,YAAc1B,EAAM2B,SAC7Bf,EAAaF,YAAYiB,GAEzB,OAAOf,C,CAGX,MAAAgB,GAEI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SAAQ,aAAY,eAAc,YAAW,SAAQ,cAAa,QACzEH,EAAA,OAAAE,IAAA,2CAAKE,IAAM3B,GAAOhB,KAAKmB,gBAAkBH,EAAI4B,GAAG,qB,CAM5D,oBAAAC,GACI7C,KAAKC,oBAAsB,IAAIC,QAC/B4C,aAAa9C,KAAKG,U"}

package/dist/wcs/p-e26c19e5.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as c,H as t}from"./p-32e583ea.js";const s=class{constructor(c){e(this,c)}render(){return c(t,{key:"251b9ccc1b13766b287f356dfc51d6a953ad0a5e",slot:"content"},c("slot",{key:"ee7d55bf47c0f468829e99a26a0fe340fbafcc9f"}))}};export{s as wcs_field_content};
-//# sourceMappingURL=p-e26c19e5.entry.js.map

package/dist/wcs/p-fe303f58.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as o,H as r,g as t}from"./p-32e583ea.js";import{S as s}from"./p-84e22272.js";import{k as a,s as i,i as n,a as c}from"./p-52d77e1f.js";import{k as d}from"./p-89b8c724.js";import{c as l}from"./p-e1fb3625.js";function p(e,o){const r=d(e);if(r==="UNKNOWN"){return[]}switch(o){case"closed":switch(r){case"UP_ARROW":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"last"}];case"DOWN_ARROW":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"first"}];case"SPACE":case"ENTER":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"first"}]}break;case"opened":switch(r){case"UP_ARROW":return[{kind:"FocusItem",target:"previous"}];case"DOWN_ARROW":return[{kind:"FocusItem",target:"next"}];case"HOME":return[{kind:"FocusItem",target:"first"}];case"END":return[{kind:"FocusItem",target:"last"}];case"ESCAPE":case"MAJ+TAB":case"TAB":return[{kind:"CloseMenu"}]}break;default:throw Error("Unknown error")}return[]}const w=':host{display:flex;--wcs-dropdown-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-padding-empty:var(--wcs-semantic-spacing-large);--wcs-dropdown-plain-arrow-color:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-dropdown-stroked-arrow-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-dropdown-clear-arrow-color:var(--wcs-semantic-color-foreground-action-tertiary-default);--wcs-dropdown-arrow-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-dropdown-overlay-max-height:360px;--wcs-dropdown-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-dropdown-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-dropdown-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-dropdown-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-overlay-border-color:var(--wcs-semantic-color-border-secondary)}:host wcs-button{height:fit-content}:host svg{margin-right:-0.25rem}button{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;outline:0;outline-offset:0}button:focus-visible+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}@supports not selector(button:focus-visible + wcs-button){button:focus-within+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}}.wcs-button-content-wrapper{display:flex;align-items:center}.popover{display:none;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);border-radius:var(--wcs-dropdown-overlay-border-radius);background-color:var(--wcs-dropdown-overlay-background-color);z-index:9999}.show{display:block}.container{min-width:calc(10 * var(--wcs-semantic-size-base));border-radius:inherit;overflow:hidden;padding:var(--wcs-dropdown-overlay-padding);background-color:var(--wcs-dropdown-overlay-background-color)}:host([mode=clear]) .arrow{fill:var(--wcs-dropdown-clear-arrow-color)}:host([mode=stroked]) .arrow{fill:var(--wcs-dropdown-stroked-arrow-color)}:host([mode=plain]) .arrow{fill:var(--wcs-dropdown-plain-arrow-color)}:host([disabled]) .arrow{fill:var(--wcs-dropdown-arrow-color-disabled)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color)}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}#is-empty{display:block;width:20ch;padding:0 var(--wcs-dropdown-padding-empty)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}';const h=w;const u=["tabindex"];const b=class{constructor(o){e(this,o);this.inheritedAttributes={};this.noArrow=false;this.mode="stroked";this.shape="normal";this.size="m";this.disabled=false;this.placement="bottom-end";this.expanded=false}get items(){return Array.from(this.el.querySelectorAll("wcs-dropdown-item"))}placementChange(){this.popper.setOptions(Object.assign(Object.assign({},this.popper.state.options),{placement:this.placement})).then((e=>this.popper.update()))}onBlur(){this.clearLastFocusedItem();this.expanded=false}componentDidLoad(){this.popper=l(this.wcsButton,this.popoverDiv,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,8]}}]});this.fixForFirefoxBelow63()}fixForFirefoxBelow63(){const e=this.el.querySelectorAll("wcs-dropdown-item");const o=this.el.querySelector(".container");if(e.length>0&&o){e.forEach((e=>{this.el.removeChild(e);o.appendChild(e)}))}}onButtonClick(e){this.clearLastFocusedItem();this.expanded=!this.expanded;if(this.expanded){this.focusItem(0)}}onWindowClickEvent(e){const o=a(e,this.el);if(this.expanded&&!o){this.expanded=false}}dropdownItemClick(e){this.expanded=false;this.nativeButton.focus()}onKeyDown(e){const o=this.expanded?"opened":"closed";const r=p(e,o);if(r.length!=0){e.preventDefault()}for(const e of r){this.doActionFromKeyboardEventAssociatedAction(e)}}async setAriaAttribute(e,o){i(this.nativeButton,e,o)}doActionFromKeyboardEventAssociatedAction(e){switch(e.kind){case"OpenMenu":this.expanded=true;this.focusItem(0);break;case"CloseMenu":this.expanded=false;this.nativeButton.focus();break;case"ClearFocus":this.clearLastFocusedItem();break;case"FocusItem":switch(e.target){case"previous":this.focusClosestItem("previous");break;case"next":this.focusClosestItem("next");break;case"first":this.focusItem(0);break;case"last":this.focusItem(this.items.length-1);break}break}}clearLastFocusedItem(){if(this.lastFocusedItemElement){this.lastFocusedItemElement.tabIndex=-1;this.lastFocusedItemElement=null}}focusItem(e){this.clearLastFocusedItem();this.lastFocusedItemElement=this.items[e];if(this.lastFocusedItemElement){this.lastFocusedItemElement.tabIndex=0;requestAnimationFrame((()=>{var e;(e=this.lastFocusedItemElement)===null||e===void 0?void 0:e.focus()}))}}focusClosestItem(e){const o=this.getClosestActiveItemIndexForDirection(e);if(o===-1)return;this.focusItem(o)}getClosestActiveItemIndexForDirection(e){const o=this.items;let r=Array.from(o).indexOf(this.lastFocusedItemElement);const t=0;const s=o.length-1;if(e==="next"&&r<s){r++}else if(e==="previous"&&r>t){r--}else{if(e==="next"&&r>=s){r=0}if(e==="previous"&&r===t){r=s}}return r}componentDidRender(){if(this.popper){this.popper.update()}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),c(this.el,u))}render(){return o(r,{key:"96be2f9df0a80b4d6c88cf15419ff29cb001c695"},o("button",Object.assign({key:"562456822837e6ff61ed23569335e42ad4e36df9",id:"dropdown-button","aria-controls":"menu",disabled:this.disabled,"aria-haspopup":"true",role:"button","aria-expanded":this.expanded?"true":"false",ref:e=>this.nativeButton=e,onClick:e=>this.onButtonClick(e),onBlur:e=>e.stopImmediatePropagation()},this.inheritedAttributes),"Dropdown"),o("wcs-button",{key:"66348725409b810219dd1bd4658611c63bbb5eb8",mode:this.mode,shape:this.shape,disabled:this.disabled,size:this.size,ref:e=>this.wcsButton=e,"aria-hidden":"true",tabindex:-1,onClick:e=>this.onButtonClick(e),onBlur:e=>e.stopImmediatePropagation()},o("div",{key:"028e06637e35ecc14b66cf74fba32dc59d58121a",class:"wcs-button-content-wrapper"},o("slot",{key:"7f7e2db54f9b5d3a20588c48c1d3fd6750187017",name:"placeholder"}),this.noArrow?null:o(s,{up:this.expanded}))),o("div",{key:"7f6f4efe22cab63033b3e7775791856ed8e1b921",class:(this.expanded?"show ":"")+"popover",id:"menu",role:"menu","aria-labelledby":"dropdown-button",tabindex:-1,ref:e=>this.popoverDiv=e},o("div",{key:"ca7ce6adea1005d7126d4ae060ada55e9d3b6d70",role:"presentation",id:"arrow","data-popper-arrow":true}),o("div",{key:"0f2a9e15df898550117743f855e7ee0746157ab1",role:"presentation",class:"container"},o("slot",{key:"688fd29a894bae8aee4c848a9b07380c95302ca2",name:"item"},o("span",{key:"a80c902d26d7afed58e8a17646dac92473042fa4",id:"is-empty"})))))}static get delegatesFocus(){return true}get el(){return t(this)}static get watchers(){return{placement:["placementChange"]}}};b.style=h;export{b as wcs_dropdown};
-//# sourceMappingURL=p-fe303f58.entry.js.map

package/dist/wcs/p-fe303f58.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getActionForKeyboardEvent","event","currentState","keyboardShortcut","keyboardShortcutFromKeyboardEvent","kind","target","Error","dropdownCss","WcsDropdownStyle0","DROPDOWN_INHERITED_ATTRS","Dropdown","this","inheritedAttributes","items","Array","from","el","querySelectorAll","placementChange","popper","setOptions","Object","assign","state","options","placement","then","_","update","onBlur","clearLastFocusedItem","expanded","componentDidLoad","createPopper","wcsButton","popoverDiv","modifiers","name","offset","fixForFirefoxBelow63","container","querySelector","length","forEach","i","removeChild","appendChild","onButtonClick","focusItem","onWindowClickEvent","clickedOnDropdownOrChildren","clickTargetIsElementOrChildren","dropdownItemClick","nativeButton","focus","onKeyDown","_event","actionsFromKeyboardEvents","preventDefault","actionFromKeyboardEvent","doActionFromKeyboardEventAssociatedAction","setAriaAttribute","attr","value","setOrRemoveAttribute","focusClosestItem","lastFocusedItemElement","tabIndex","indexToFocus","requestAnimationFrame","_a","direction","getClosestActiveItemIndexForDirection","currentIndex","indexOf","MIN_INDEX","MAX_INDEX","componentDidRender","componentWillLoad","inheritAriaAttributes","inheritAttributes","render","h","Host","key","id","disabled","role","ref","onClick","$event","stopImmediatePropagation","mode","shape","size","tabindex","e","class","noArrow","SelectArrow","up"],"sources":["src/components/dropdown/dropdown-keyboard-event.ts","src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { keyboardShortcutFromKeyboardEvent } from \"../../utils/keyboard-event\";\n\n// Possible Shortcuts\n\n// Dropdown button\n// ENTER : open menu, move focus to first item\n// SPACE : open menu, move focus to first item\n// DOWN_ARROW : open menu, move focus to first item\n// UP_ARROW : open menu, move focus to last item\n\n// Dropdown item\n// HOME : focus first item\n// END : focus last item\n// UP_ARROW : move focus to previous item\n// DOWN_ARROW : move focus to previous item\n// ESCAPE : close menu, set focus on the dropdown button\n// ENTER : activate the item, close menu, set focus to menu button (already handled via the wcsDropdownItemClick event)\n\nexport type KeyboardEventAssociatedAction = OpenMenu\n    | CloseMenu\n    | ClearFocus\n    | FocusItem;\n\ntype OpenMenu = {kind: 'OpenMenu'};\ntype CloseMenu = {kind: 'CloseMenu'};\n\n\ntype ClearFocus = {kind: 'ClearFocus'};\ntype FocusItem = {kind: 'FocusItem', target: 'next' | 'previous' | 'first' | 'last'};\n\n/**\n * We follow this pattern https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/\n * @param event\n * @param currentState\n * @param type\n */\nexport function getActionForKeyboardEvent(event: KeyboardEvent, currentState: 'closed' | 'opened'): KeyboardEventAssociatedAction[] {\n    const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);\n\n    if(keyboardShortcut === 'UNKNOWN') {\n        return [];\n    }\n\n    switch (currentState) {\n        case 'closed':\n            // We handle every available shortcut for the closed state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'last'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                case 'SPACE':\n                case 'ENTER':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                default:\n                    break;\n            }\n            break;\n        case 'opened':\n            // We handle every available shortcut for the opened state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'FocusItem', target: 'previous'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'FocusItem', target: 'next'}];\n                case 'HOME':\n                    return [{kind: 'FocusItem', target: 'first'}];\n                case 'END':\n                    return [{kind: 'FocusItem', target: 'last'}];\n                case 'ESCAPE':\n                case 'MAJ+TAB':\n                case 'TAB':\n                    return [{kind: 'CloseMenu'}];\n                default:\n                    break;\n            }\n            break;\n        default:\n            throw Error('Unknown error');\n    }\n    return [];\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: flex;\n\n    --wcs-dropdown-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    // Padding\n    --wcs-dropdown-padding-empty: var(--wcs-semantic-spacing-large);\n\n    // Arrow color\n    --wcs-dropdown-plain-arrow-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-dropdown-stroked-arrow-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-dropdown-clear-arrow-color: var(--wcs-semantic-color-foreground-action-tertiary-default);\n\n    --wcs-dropdown-arrow-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    // Overlay\n    --wcs-dropdown-overlay-max-height: 360px;\n    --wcs-dropdown-overlay-padding: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-dropdown-overlay-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-dropdown-overlay-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-dropdown-overlay-border-color: var(--wcs-semantic-color-border-secondary);\n\n    wcs-button {\n        height: fit-content;\n    }\n\n    svg {\n        margin-right: -0.25rem;\n    }\n}\n\n/* Visually hide the native button */\nbutton {\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    outline: 0;\n    outline-offset: 0;\n}\n\nbutton:focus-visible + wcs-button {\n    @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n}\n\n@supports not selector(button:focus-visible + wcs-button) {\n    button:focus-within + wcs-button {\n        @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n    align-items: center;\n}\n\n.popover {\n    display: none;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n    border-radius: var(--wcs-dropdown-overlay-border-radius);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    min-width: calc(10 * var(--wcs-semantic-size-base));\n    border-radius: inherit;\n    overflow: hidden;\n    padding: var(--wcs-dropdown-overlay-padding);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n}\n\n:host([mode=clear]) {\n    // SVG arrow inside the button, on clear background\n    .arrow {\n        fill: var(--wcs-dropdown-clear-arrow-color);\n    }\n}\n\n:host([mode=stroked]) {\n    // SVG arrow inside the button, on stroked background\n    .arrow {\n        fill: var(--wcs-dropdown-stroked-arrow-color);\n    }\n}\n\n:host([mode=plain]) {\n    // SVG arrow inside the button, on primary background\n    .arrow {\n        fill: var(--wcs-dropdown-plain-arrow-color);\n    }\n}\n\n:host([disabled]) {\n    .arrow {\n        fill: var(--wcs-dropdown-arrow-color-disabled);\n    }\n}\n\n// Popover arrow\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n#is-empty {\n    display: block;\n    width: 20ch;\n    padding: 0 var(--wcs-dropdown-padding-empty);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport {\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n} from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport {\n    clickTargetIsElementOrChildren,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { getActionForKeyboardEvent, KeyboardEventAssociatedAction } from \"./dropdown-keyboard-event\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst DROPDOWN_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\n * dropdown.\n * \n * @slot placeholder - The slot containing the placeholder displayed in button\n * @slot item - The slot container the list of `wcs-dropdown-item` elements\n * \n * @cssprop --wcs-dropdown-outline-color-focus - Outline color of dropdown when focus it\n * \n * @cssprop --wcs-dropdown-plain-arrow-color - Color of the arrow indicator when the dropdown is plain\n * @cssprop --wcs-dropdown-stroked-arrow-color - Color of the arrow indicator when the dropdown is stroked\n * @cssprop --wcs-dropdown-clear-arrow-color - Color of the arrow indicator when the dropdown is not filled\n * @cssprop --wcs-dropdown-arrow-color-disabled - Base color of the arrow indicator when the dropdown is disabled\n * \n * @cssprop --wcs-dropdown-padding-empty - Padding of and empty dropdown\n * \n * @cssprop --wcs-dropdown-overlay-padding - Defines the vertical padding inside the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-max-height - Specifies the maximum height of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-background-color - Determines the background color of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-width - Sets the border width of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-radius - Defines the border radius of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-color - Specifies the border color of the dropdown overlay\n */\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsDropdownElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * This button is visually hidden. It used to carry all aria attributes and acts as the controller of the menu.\n     * The wcs-button could not handle the aria-controls and aria-activedescendant attributes because of the IDREF\n     * not passing from a shadow-dom through another.\n     * @private\n     */\n    private nativeButton!: HTMLButtonElement;\n\n    /**\n     * This button is shown on the user interface, and visually receives focus and catch click events.  \n     * It is hidden to screen readers since the native button carries all the aria informations.\n     * @private\n     */\n    private wcsButton!: HTMLWcsButtonElement;\n\n    /**\n     * This div is shown on the user interface when the dropdown is expanded.\n     * @private\n     */\n    private popoverDiv!: HTMLDivElement;\n\n    /** Hides the arrow in the button */\n    @Prop({ reflect: true }) noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n    \n    /** Dropdown's button size */\n    @Prop() size: WcsButtonSize = 'm';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded: boolean = false;\n\n\n    private popper: Instance;\n    \n    private lastFocusedItemElement: HTMLWcsDropdownItemElement | null;\n    \n    private get items(): HTMLWcsDropdownItemElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n    }\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n    \n    @Listen('blur')\n    onBlur() {\n        this.clearLastFocusedItem();\n        this.expanded = false;\n    }\n\n    componentDidLoad() {\n        this.popper = createPopper(this.wcsButton, this.popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.clearLastFocusedItem();\n        this.expanded = !this.expanded;\n        \n        if (this.expanded) {\n            this.focusItem(0);\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n        this.nativeButton.focus();\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent): void {\n        const currentState = this.expanded ? 'opened' : 'closed';\n        const actionsFromKeyboardEvents: KeyboardEventAssociatedAction[] = getActionForKeyboardEvent(_event, currentState);\n\n        // If we have at least one associated actions, we prevent the default behavior of the event. \n        // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)\n        if (actionsFromKeyboardEvents.length != 0) {\n            _event.preventDefault();\n        }\n\n        for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {\n            this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction) {\n        switch (actionFromKeyboardEvent.kind) {\n            case 'OpenMenu':\n                this.expanded = true;\n                this.focusItem(0);\n                break;\n            case 'CloseMenu':\n                this.expanded = false;\n                this.nativeButton.focus();\n                break;\n            case 'ClearFocus':\n                this.clearLastFocusedItem();\n                break;\n            case 'FocusItem':\n                switch (actionFromKeyboardEvent.target) {\n                    case 'previous':\n                        this.focusClosestItem('previous');\n                        break;\n                    case 'next':\n                        this.focusClosestItem('next');\n                        break;\n                    case 'first':\n                        this.focusItem(0);\n                        break;\n                    case 'last':\n                        this.focusItem(this.items.length - 1);\n                        break;\n                    default:\n                        break;\n                }\n                break;\n            default:\n                break;\n        }\n    }\n\n    /**\n     * Removes the focus and tabindex 0 of the last focused item if any.\n     * @private\n     */\n    private clearLastFocusedItem() {\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = -1;\n            this.lastFocusedItemElement = null;\n        }\n    }\n    \n    private focusItem(indexToFocus: number) {\n        this.clearLastFocusedItem();\n        this.lastFocusedItemElement = this.items[indexToFocus];\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = 0;\n            requestAnimationFrame(() => {\n                this.lastFocusedItemElement?.focus();\n            });\n        }\n    }\n    \n    private focusClosestItem(direction: 'next' | 'previous'): void {\n        const indexToFocus = this.getClosestActiveItemIndexForDirection(direction);\n        if (indexToFocus === -1) return;\n        \n        this.focusItem(indexToFocus);\n    }\n    \n    private getClosestActiveItemIndexForDirection(direction: 'next' | 'previous'): number {\n        const items = this.items;\n        let currentIndex = Array.from(items).indexOf(this.lastFocusedItemElement);\n\n        const MIN_INDEX = 0;\n        const MAX_INDEX = items.length - 1;\n\n        if (direction === 'next' && currentIndex < MAX_INDEX) {\n            currentIndex++;\n        } else if (direction === 'previous' && currentIndex > MIN_INDEX) {\n            currentIndex--;\n        } else {\n            // Used to scroll through items infinitely with keyboard\n            if (direction === 'next' && currentIndex >= MAX_INDEX) {\n                currentIndex = 0;\n            }\n            if (direction === 'previous' && currentIndex === MIN_INDEX) {\n                currentIndex = MAX_INDEX;\n            }\n        }\n        \n        return currentIndex;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS),\n        };\n    }\n    \n    render() {\n        return (\n            <Host>\n                <button id=\"dropdown-button\"\n                        aria-controls=\"menu\"\n                        disabled={this.disabled}\n                        aria-haspopup=\"true\"\n                        role=\"button\"\n                        aria-expanded={this.expanded ? 'true' : 'false'}\n                        ref={el => this.nativeButton = el}\n                        onClick={($event) => this.onButtonClick($event)}\n                        onBlur={($event) => $event.stopImmediatePropagation()}\n                        {...this.inheritedAttributes}>Dropdown</button>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n                            ref={el => this.wcsButton = el}\n                            aria-hidden=\"true\"\n                            tabindex={-1}\n                            onClick={($event) => this.onButtonClick($event)}\n                            onBlur={(e) => e.stopImmediatePropagation()}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}\n                     id=\"menu\"\n                     role=\"menu\"\n                     aria-labelledby=\"dropdown-button\"\n                     tabindex={-1}\n                     ref={el => this.popoverDiv = el}>\n                    <div role=\"presentation\" id=\"arrow\" data-popper-arrow/>\n                    <div role=\"presentation\" class=\"container\">\n                        <slot name=\"item\">\n                            <span id={\"is-empty\"}></span>\n                        </slot>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"mappings":"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"}