npm - wcs-core - Versions diffs - 3.0.0 → 4.0.1 - Mend

wcs-core 3.0.0 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (334) hide show

package/dist/wcs/{p-d998e112.entry.js.map → p-b6cd196d.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["comNavSubmenuCss","WCS_COM_NAV_CATEGORY","ComNavSubmenu","componentWillLoad","slottedCategoryItems","this","el","querySelectorAll","registerCloseHandlerForFocusOutEventOn","onWindowClickEvent","_","menuOpen","onSubmenuOpened","event","detail","menuElement","onEscapeKeyDown","_event","isEscapeKey","async","onClick","evt","stopPropagation","wcsSubmenuOpened","emit","handleMenuItemsKeyDown","isSpaceKey","isEnterKey","handleMenuItemsClick","handleMenuKeyDown","target","tagName","close","wcsClickOnFinalAction","wcsCategoryItemClickedHandler","render","h","Host","tabindex","screen","width","onKeyDown","class","label","tabIndex","panelTitle","panelDescription"],"sources":["./src/components/com-nav-submenu/com-nav-submenu.scss?tag=wcs-com-nav-submenu&encapsulation=shadow","./src/components/com-nav-submenu/com-nav-submenu.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n display: block;\n padding-bottom: var(--wcs-padding);\n\n .menu-button {\n display: block;\n font-weight: 500;\n padding-left: calc(3 * var(--wcs-base-margin));\n }\n\n .arrow-icon {\n display: none;\n }\n\n .arrow-container {\n display: none;\n }\n\n .label {\n text-transform: uppercase;\n font-size: 16px;\n cursor: unset;\n font-weight: 500;\n color: var(--wcs-gray);\n text-decoration: none;\n }\n\n .drawer {\n display: contents;\n }\n\n .drawer-container {\n display: contents;\n }\n .drawer-description {\n display: none;\n }\n .menu-items {\n ::slotted(a):after {\n font-family: icons;\n padding-left: var(--wcs-base-margin);\n font-size: 0.6rem;\n content: \"\\f107\";\n line-height: 1;\n box-sizing: border-box;\n }\n\n ::slotted(a) {\n user-select: none;\n cursor: pointer;\n text-decoration: none;\n font-size: 16px;\n color: var(--wcs-gray);\n font-weight: 500;\n display: block;\n padding-top: calc(1.5 * var(--wcs-base-margin));\n padding-bottom: calc(1.5 * var(--wcs-base-margin));\n padding-left: calc(6 * var(--wcs-base-margin));\n }\n\n /*For mobile/\n ::slotted(a:focus-visible){\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n\n @supports not selector(::slotted(a:focus-visible)) {\n ::slotted(a:focus-within) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n }\n }\n}\n\n@media screen and (min-width: 576px) {\n :host {\n height: 100%;\n padding-bottom: unset;\n\n .menu-button {\n display: flex;\n align-items: center;\n height: 100%;\n cursor: pointer;\n user-select: none;\n font-weight: unset;\n padding-left: unset;\n }\n\n .menu-button:focus-visible {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n\n @supports not selector(.menu-button:focus-visible) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n\n .label {\n text-transform: unset;\n cursor: pointer;\n }\n\n .arrow-icon {\n display: inline-block;\n font-family: icons;\n font-size: 0.6rem;\n line-height: 1;\n box-sizing: border-box;\n }\n\n .arrow-container {\n display: unset;\n margin-left: var(--wcs-base-margin);\n }\n\n .arrow-icon:not([data-open]) {\n transform: rotate(90deg);\n }\n\n .arrow-icon[data-open] {\n transform: rotate(-90deg);\n }\n\n .drawer {\n display: none;\n position: absolute;\n top: 75px;\n z-index: 8888;\n left: 0;\n width: 100%;\n box-sizing: border-box;\n padding: 50px;\n background-color: var(--wcs-primary);\n color: var(--wcs-white);\n }\n\n .drawer-content {\n display: flex;\n justify-content: space-between;\n max-width: 62.5%;\n flex: 1;\n\n div:first-child {\n flex: 0.8;\n }\n\n div {\n max-width: 260px;\n }\n }\n\n .menu-items {\n padding: 0 80px 0 50px;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n\n ::slotted(:not(:first-child)) {\n margin-top: 24px;\n }\n\n ::slotted(a) {\n color: var(--wcs-white);\n font-weight: 400;\n display: unset;\n padding-top: unset;\n padding-bottom: unset;\n padding-left: unset;\n }\n\n ::slotted(a:focus-visible){\n @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n }\n\n @supports not selector(::slotted(a:focus-visible)) {\n ::slotted(a:focus-within) {\n @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n }\n }\n }\n\n .drawer-container {\n display: flex;\n max-width: var(--wcs-com-content-max-width);\n margin: 0 auto;\n\n h3 {\n margin: 0 0 24px 0;\n font-size: 1.5rem;\n line-height: 1.25;\n font-weight: 400;\n }\n\n p {\n margin-top: 0;\n margin-bottom: 1rem;\n font-weight: 500;\n font-size: 1rem;\n line-height: 1.375;\n }\n }\n\n .drawer[data-open] {\n display: block;\n }\n .drawer-description {\n display: block;\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n h,\n Host,\n Listen,\n Prop,\n State,\n Element,\n Event,\n EventEmitter, Method\n} from '@stencil/core';\nimport {MenuOpenedEventDetail} from '../com-nav/com-nav-interface';\nimport {isEnterKey, isEscapeKey, isSpaceKey} from \"../../utils/helpers\";\nimport {registerCloseHandlerForFocusOutEventOn} from \"../com-nav/com-nav-utils\";\n\n\nconst WCS_COM_NAV_CATEGORY = 'WCS-COM-NAV-CATEGORY';\n\n@Component({\n tag: 'wcs-com-nav-submenu',\n styleUrl: 'com-nav-submenu.scss',\n shadow: true,\n})\nexport class ComNavSubmenu implements ComponentInterface {\n @Element() el!: HTMLWcsComNavSubmenuElement;\n @Prop() label: string;\n @Prop() panelTitle: string;\n @Prop() panelDescription: string;\n @State() menuOpen: boolean = false;\n @Event() wcsSubmenuOpened: EventEmitter<MenuOpenedEventDetail>;\n /\n Emitted when a user click on a final navigation action.\n \n Used by the com-nav component to close the mobile menu overlay when a user click on a final action.\n /\n @Event() wcsClickOnFinalAction: EventEmitter<void>;\n\n componentWillLoad(): Promise<void> \| void {\n const slottedCategoryItems = this.el.querySelectorAll(':scope > wcs-com-nav-category:not([slot])');\n registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavCategoryElement>(slottedCategoryItems, WCS_COM_NAV_CATEGORY);\n }\n\n /\n If the user clicks outside the menu, we close it\n /\n @Listen('click', {target: 'window'})\n onWindowClickEvent(_: MouseEvent) {\n if (this.menuOpen) this.menuOpen = false;\n }\n\n @Listen('wcsSubmenuOpened', {target: 'window'})\n onSubmenuOpened(event: CustomEvent<MenuOpenedEventDetail>) {\n // If the clicked menu is not this component, we close it\n if (event.detail.menuElement !== this.el) {\n this.menuOpen = false;\n }\n }\n\n /\n Close the menu when escape is pressed\n * @param _event keydown event\n /\n @Listen('keydown', {target: 'window'})\n onEscapeKeyDown(_event: KeyboardEvent) {\n if (isEscapeKey(_event) && this.menuOpen) {\n this.menuOpen = false;\n }\n }\n\n /\n Close the menu\n /\n @Method()\n async close() {\n this.menuOpen = false;\n }\n\n /\n Opens the menu\n /\n @Method()\n async open() {\n this.menuOpen = true;\n }\n\n /\n When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage\n * the closing of the menu correctly\n /\n private onClick(evt: MouseEvent) {\n evt.stopPropagation();\n this.wcsSubmenuOpened.emit({menuElement: this.el})\n }\n\n /\n Handle key down on menu items\n * @param _event the keyboard event\n * @private\n /\n private handleMenuItemsKeyDown(_event: KeyboardEvent) {\n if ((isSpaceKey(_event)) \|\| isEnterKey(_event)) {\n this.handleMenuItemsClick(_event);\n }\n }\n\n /\n Open the menu if it is closed and closed the menu if it is already opened\n * @param _event the keyboard event\n * @private\n /\n private handleMenuKeyDown(_event: KeyboardEvent) {\n if ((isSpaceKey(_event)) \|\| isEnterKey(_event)) {\n this.menuOpen = !this.menuOpen;\n }\n }\n\n private handleMenuItemsClick(evt: UIEvent) {\n if ((evt.target as HTMLElement).tagName === 'A') {\n this.close();\n this.wcsClickOnFinalAction.emit();\n }\n }\n\n /\n handle category item click to close the submenu\n * @param _\n * @private\n */\n @Listen('wcsCategoryItemClicked')\n // @ts-ignore\n private wcsCategoryItemClickedHandler(_: CustomEvent<UIEvent>) {\n // If a category item is clicked, we close the submenu drawer;\n this.close();\n }\n\n\n render(): any {\n return (\n <Host onClick={evt => this.onClick(evt)}>\n <div tabindex={screen.width < 576 ? \"-1\" : \"0\"}\n onClick={_ => this.menuOpen = !this.menuOpen}\n onKeyDown={evt => this.handleMenuKeyDown(evt)}\n class=\"menu-button\">\n <span class=\"label\">{this.label}</span><span class=\"arrow-container\"><span\n class=\"arrow-icon\" data-open={this.menuOpen}></span></span>\n </div>\n <div class=\"drawer\" data-open={this.menuOpen} tabIndex={-1}>\n <div class=\"drawer-container\">\n <div class=\"drawer-content\">\n <div class=\"drawer-description\">\n <h3>{this.panelTitle}</h3>\n <p>{this.panelDescription}</p>\n </div>\n <div class=\"menu-items\"\n onClick={(evt) => this.handleMenuItemsClick(evt)}\n onKeyDown={evt => this.handleMenuItemsKeyDown(evt)}>\n <slot/>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n\n}\n"],"mappings":"sJAAA,MAAMA,EAAmB,yxGCiBzB,MAAMC,EAAuB,uB,MAOhBC,EAAa,M,sOAKO,K,CAS7BC,oBACI,MAAMC,EAAuBC,KAAKC,GAAGC,iBAAiB,6CACtDC,EAAqEJ,EAAsBH,E,CAO/FQ,mBAAmBC,GACf,GAAIL,KAAKM,SAAUN,KAAKM,SAAW,K,CAIvCC,gBAAgBC,GAEZ,GAAIA,EAAMC,OAAOC,cAAgBV,KAAKC,GAAI,CACtCD,KAAKM,SAAW,K,EASxBK,gBAAgBC,GACZ,GAAIC,EAAYD,IAAWZ,KAAKM,SAAU,CACtCN,KAAKM,SAAW,K,EAQxBQ,cACId,KAAKM,SAAW,K,CAOpBQ,aACId,KAAKM,SAAW,I,CAOZS,QAAQC,GACZA,EAAIC,kBACJjB,KAAKkB,iBAAiBC,KAAK,CAACT,YAAaV,KAAKC,I,CAQ1CmB,uBAAuBR,GAC3B,GAAKS,EAAWT,IAAYU,EAAWV,GAAS,CAC5CZ,KAAKuB,qBAAqBX,E,EAS1BY,kBAAkBZ,GACtB,GAAKS,EAAWT,IAAYU,EAAWV,GAAS,CAC5CZ,KAAKM,UAAYN,KAAKM,Q,EAItBiB,qBAAqBP,GACzB,GAAKA,EAAIS,OAAuBC,UAAY,IAAK,CAC7C1B,KAAK2B,QACL3B,KAAK4B,sBAAsBT,M,EAW3BU,8BAA8BxB,GAElCL,KAAK2B,O,CAITG,SACI,OACIC,EAACC,EAAI,CAACjB,QAASC,GAAOhB,KAAKe,QAAQC,IAC/Be,EAAA,OAAKE,SAAUC,OAAOC,MAAQ,IAAM,KAAO,IACtCpB,QAASV,GAAKL,KAAKM,UAAYN,KAAKM,SACpC8B,UAAWpB,GAAOhB,KAAKwB,kBAAkBR,GACzCqB,MAAM,eACPN,EAAA,QAAMM,MAAM,SAASrC,KAAKsC,OAAaP,EAAA,QAAMM,MAAM,mBAAkBN,EAAA,QACrEM,MAAM,aAAY,YAAYrC,KAAKM,UAAQ,OAE/CyB,EAAA,OAAKM,MAAM,SAAQ,YAAYrC,KAAKM,SAAUiC,UAAW,GACrDR,EAAA,OAAKM,MAAM,oBACPN,EAAA,OAAKM,MAAM,kBACPN,EAAA,OAAKM,MAAM,sBACPN,EAAA,UAAK/B,KAAKwC,YACVT,EAAA,SAAI/B,KAAKyC,mBAEbV,EAAA,OAAKM,MAAM,aACNtB,QAAUC,GAAQhB,KAAKuB,qBAAqBP,GAC5CoB,UAAWpB,GAAOhB,KAAKoB,uBAAuBJ,IAC/Ce,EAAA,iB"}
1	+ {"version":3,"names":["comNavSubmenuCss","WCS_COM_NAV_CATEGORY","ComNavSubmenu","componentWillLoad","slottedCategoryItems","this","el","querySelectorAll","registerCloseHandlerForFocusOutEventOn","onWindowClickEvent","_","menuOpen","onSubmenuOpened","event","detail","menuElement","onEscapeKeyDown","_event","isEscapeKey","async","onClick","evt","stopPropagation","wcsSubmenuOpened","emit","handleMenuItemsKeyDown","isSpaceKey","isEnterKey","handleMenuItemsClick","handleMenuKeyDown","target","tagName","close","wcsClickOnFinalAction","wcsCategoryItemClickedHandler","render","h","Host","tabindex","screen","width","onKeyDown","class","label","tabIndex","panelTitle","panelDescription"],"sources":["./src/components/com-nav-submenu/com-nav-submenu.scss?tag=wcs-com-nav-submenu&encapsulation=shadow","./src/components/com-nav-submenu/com-nav-submenu.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n display: block;\n padding-bottom: var(--wcs-padding);\n\n .menu-button {\n display: block;\n font-weight: 500;\n padding-left: calc(3 * var(--wcs-base-margin));\n }\n\n .arrow-icon {\n display: none;\n }\n\n .arrow-container {\n display: none;\n }\n\n .label {\n text-transform: uppercase;\n font-size: 16px;\n cursor: unset;\n font-weight: 500;\n color: var(--wcs-gray);\n text-decoration: none;\n }\n\n .drawer {\n display: contents;\n }\n\n .drawer-container {\n display: contents;\n }\n .drawer-description {\n display: none;\n }\n .menu-items {\n ::slotted(a):after {\n font-family: icons;\n padding-left: var(--wcs-base-margin);\n font-size: 0.6rem;\n content: \"\\f107\";\n line-height: 1;\n box-sizing: border-box;\n }\n\n ::slotted(a) {\n user-select: none;\n cursor: pointer;\n text-decoration: none;\n font-size: 16px;\n color: var(--wcs-gray);\n font-weight: 500;\n display: block;\n padding-top: calc(1.5 * var(--wcs-base-margin));\n padding-bottom: calc(1.5 * var(--wcs-base-margin));\n padding-left: calc(6 * var(--wcs-base-margin));\n }\n\n /*For mobile/\n ::slotted(a:focus-visible){\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n\n @supports not selector(::slotted(a:focus-visible)) {\n ::slotted(a:focus-within) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n }\n }\n}\n\n@media screen and (min-width: 576px) {\n :host {\n height: 100%;\n padding-bottom: unset;\n\n .menu-button {\n display: flex;\n align-items: center;\n height: 100%;\n cursor: pointer;\n user-select: none;\n font-weight: unset;\n padding-left: unset;\n }\n\n .menu-button:focus-visible {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n\n @supports not selector(.menu-button:focus-visible) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n\n .label {\n text-transform: unset;\n cursor: pointer;\n }\n\n .arrow-icon {\n display: inline-block;\n font-family: icons;\n font-size: 0.6rem;\n line-height: 1;\n box-sizing: border-box;\n }\n\n .arrow-container {\n display: unset;\n margin-left: var(--wcs-base-margin);\n }\n\n .arrow-icon:not([data-open]) {\n transform: rotate(90deg);\n }\n\n .arrow-icon[data-open] {\n transform: rotate(-90deg);\n }\n\n .drawer {\n display: none;\n position: absolute;\n top: 75px;\n z-index: 8888;\n left: 0;\n width: 100%;\n box-sizing: border-box;\n padding: 50px;\n background-color: var(--wcs-primary);\n color: var(--wcs-white);\n }\n\n .drawer-content {\n display: flex;\n justify-content: space-between;\n max-width: 62.5%;\n flex: 1;\n\n div:first-child {\n flex: 0.8;\n }\n\n div {\n max-width: 260px;\n }\n }\n\n .menu-items {\n padding: 0 80px 0 50px;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n\n ::slotted(:not(:first-child)) {\n margin-top: 24px;\n }\n\n ::slotted(a) {\n color: var(--wcs-white);\n font-weight: 400;\n display: unset;\n padding-top: unset;\n padding-bottom: unset;\n padding-left: unset;\n }\n\n ::slotted(a:focus-visible){\n @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n }\n\n @supports not selector(::slotted(a:focus-visible)) {\n ::slotted(a:focus-within) {\n @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n }\n }\n }\n\n .drawer-container {\n display: flex;\n max-width: var(--wcs-com-content-max-width);\n margin: 0 auto;\n\n h3 {\n margin: 0 0 24px 0;\n font-size: 1.5rem;\n line-height: 1.25;\n font-weight: 400;\n }\n\n p {\n margin-top: 0;\n margin-bottom: 1rem;\n font-weight: 500;\n font-size: 1rem;\n line-height: 1.375;\n }\n }\n\n .drawer[data-open] {\n display: block;\n }\n .drawer-description {\n display: block;\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n h,\n Host,\n Listen,\n Prop,\n State,\n Element,\n Event,\n EventEmitter, Method\n} from '@stencil/core';\nimport {MenuOpenedEventDetail} from '../com-nav/com-nav-interface';\nimport {isEnterKey, isEscapeKey, isSpaceKey} from \"../../utils/helpers\";\nimport {registerCloseHandlerForFocusOutEventOn} from \"../com-nav/com-nav-utils\";\n\n\nconst WCS_COM_NAV_CATEGORY = 'WCS-COM-NAV-CATEGORY';\n\n@Component({\n tag: 'wcs-com-nav-submenu',\n styleUrl: 'com-nav-submenu.scss',\n shadow: true,\n})\nexport class ComNavSubmenu implements ComponentInterface {\n @Element() private el!: HTMLWcsComNavSubmenuElement;\n @Prop() label: string;\n @Prop() panelTitle: string;\n @Prop() panelDescription: string;\n @State() private menuOpen: boolean = false;\n @Event() wcsSubmenuOpened: EventEmitter<MenuOpenedEventDetail>;\n /\n Emitted when a user click on a final navigation action.\n \n Used by the com-nav component to close the mobile menu overlay when a user click on a final action.\n /\n @Event() wcsClickOnFinalAction: EventEmitter<void>;\n\n componentWillLoad(): Promise<void> \| void {\n const slottedCategoryItems = this.el.querySelectorAll(':scope > wcs-com-nav-category:not([slot])');\n registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavCategoryElement>(slottedCategoryItems, WCS_COM_NAV_CATEGORY);\n }\n\n /\n If the user clicks outside the menu, we close it\n /\n @Listen('click', {target: 'window'})\n onWindowClickEvent(_: MouseEvent) {\n if (this.menuOpen) this.menuOpen = false;\n }\n\n @Listen('wcsSubmenuOpened', {target: 'window'})\n onSubmenuOpened(event: CustomEvent<MenuOpenedEventDetail>) {\n // If the clicked menu is not this component, we close it\n if (event.detail.menuElement !== this.el) {\n this.menuOpen = false;\n }\n }\n\n /\n Close the menu when escape is pressed\n * @param _event keydown event\n /\n @Listen('keydown', {target: 'window'})\n onEscapeKeyDown(_event: KeyboardEvent) {\n if (isEscapeKey(_event) && this.menuOpen) {\n this.menuOpen = false;\n }\n }\n\n /\n Close the menu\n /\n @Method()\n async close() {\n this.menuOpen = false;\n }\n\n /\n Opens the menu\n /\n @Method()\n async open() {\n this.menuOpen = true;\n }\n\n /\n When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage\n * the closing of the menu correctly\n /\n private onClick(evt: MouseEvent) {\n evt.stopPropagation();\n this.wcsSubmenuOpened.emit({menuElement: this.el})\n }\n\n /\n Handle key down on menu items\n * @param _event the keyboard event\n * @private\n /\n private handleMenuItemsKeyDown(_event: KeyboardEvent) {\n if ((isSpaceKey(_event)) \|\| isEnterKey(_event)) {\n this.handleMenuItemsClick(_event);\n }\n }\n\n /\n Open the menu if it is closed and closed the menu if it is already opened\n * @param _event the keyboard event\n * @private\n /\n private handleMenuKeyDown(_event: KeyboardEvent) {\n if ((isSpaceKey(_event)) \|\| isEnterKey(_event)) {\n this.menuOpen = !this.menuOpen;\n }\n }\n\n private handleMenuItemsClick(evt: UIEvent) {\n if ((evt.target as HTMLElement).tagName === 'A') {\n this.close();\n this.wcsClickOnFinalAction.emit();\n }\n }\n\n /\n handle category item click to close the submenu\n * @param _\n * @private\n */\n @Listen('wcsCategoryItemClicked')\n // @ts-ignore\n private wcsCategoryItemClickedHandler(_: CustomEvent<UIEvent>) {\n // If a category item is clicked, we close the submenu drawer;\n this.close();\n }\n\n\n render(): any {\n return (\n <Host onClick={evt => this.onClick(evt)}>\n <div tabindex={screen.width < 576 ? \"-1\" : \"0\"}\n onClick={_ => this.menuOpen = !this.menuOpen}\n onKeyDown={evt => this.handleMenuKeyDown(evt)}\n class=\"menu-button\">\n <span class=\"label\">{this.label}</span><span class=\"arrow-container\"><span\n class=\"arrow-icon\" data-open={this.menuOpen}></span></span>\n </div>\n <div class=\"drawer\" data-open={this.menuOpen} tabIndex={-1}>\n <div class=\"drawer-container\">\n <div class=\"drawer-content\">\n <div class=\"drawer-description\">\n <h3>{this.panelTitle}</h3>\n <p>{this.panelDescription}</p>\n </div>\n <div class=\"menu-items\"\n onClick={(evt) => this.handleMenuItemsClick(evt)}\n onKeyDown={evt => this.handleMenuItemsKeyDown(evt)}>\n <slot/>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n\n}\n"],"mappings":"sJAAA,MAAMA,EAAmB,yxGCiBzB,MAAMC,EAAuB,uB,MAOhBC,EAAa,M,sOAKe,K,CASrCC,oBACI,MAAMC,EAAuBC,KAAKC,GAAGC,iBAAiB,6CACtDC,EAAqEJ,EAAsBH,E,CAO/FQ,mBAAmBC,GACf,GAAIL,KAAKM,SAAUN,KAAKM,SAAW,K,CAIvCC,gBAAgBC,GAEZ,GAAIA,EAAMC,OAAOC,cAAgBV,KAAKC,GAAI,CACtCD,KAAKM,SAAW,K,EASxBK,gBAAgBC,GACZ,GAAIC,EAAYD,IAAWZ,KAAKM,SAAU,CACtCN,KAAKM,SAAW,K,EAQxBQ,cACId,KAAKM,SAAW,K,CAOpBQ,aACId,KAAKM,SAAW,I,CAOZS,QAAQC,GACZA,EAAIC,kBACJjB,KAAKkB,iBAAiBC,KAAK,CAACT,YAAaV,KAAKC,I,CAQ1CmB,uBAAuBR,GAC3B,GAAKS,EAAWT,IAAYU,EAAWV,GAAS,CAC5CZ,KAAKuB,qBAAqBX,E,EAS1BY,kBAAkBZ,GACtB,GAAKS,EAAWT,IAAYU,EAAWV,GAAS,CAC5CZ,KAAKM,UAAYN,KAAKM,Q,EAItBiB,qBAAqBP,GACzB,GAAKA,EAAIS,OAAuBC,UAAY,IAAK,CAC7C1B,KAAK2B,QACL3B,KAAK4B,sBAAsBT,M,EAW3BU,8BAA8BxB,GAElCL,KAAK2B,O,CAITG,SACI,OACIC,EAACC,EAAI,CAACjB,QAASC,GAAOhB,KAAKe,QAAQC,IAC/Be,EAAA,OAAKE,SAAUC,OAAOC,MAAQ,IAAM,KAAO,IACtCpB,QAASV,GAAKL,KAAKM,UAAYN,KAAKM,SACpC8B,UAAWpB,GAAOhB,KAAKwB,kBAAkBR,GACzCqB,MAAM,eACPN,EAAA,QAAMM,MAAM,SAASrC,KAAKsC,OAAaP,EAAA,QAAMM,MAAM,mBAAkBN,EAAA,QACrEM,MAAM,aAAY,YAAYrC,KAAKM,UAAQ,OAE/CyB,EAAA,OAAKM,MAAM,SAAQ,YAAYrC,KAAKM,SAAUiC,UAAW,GACrDR,EAAA,OAAKM,MAAM,oBACPN,EAAA,OAAKM,MAAM,kBACPN,EAAA,OAAKM,MAAM,sBACPN,EAAA,UAAK/B,KAAKwC,YACVT,EAAA,SAAI/B,KAAKyC,mBAEbV,EAAA,OAAKM,MAAM,aACNtB,QAAUC,GAAQhB,KAAKuB,qBAAqBP,GAC5CoB,UAAWpB,GAAOhB,KAAKoB,uBAAuBJ,IAC/Ce,EAAA,iB"}

package/dist/wcs/p-b856f2f6.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,c as e,h as t,H as i,g as r}from"./p-a2df3a49.js";import{i as a,a as s}from"./p-12ac2547.js";const n=':host{width:fit-content}:host([mode=radio]:focus-within){transition:none;outline:2px dashed var(--wcs-primary);outline-offset:0;border-radius:0.5rem}:host([mode=horizontal]:focus-within){transition:none;outline:2px dashed var(--wcs-primary);outline-offset:2px;border-radius:0.5rem}:host([mode=radio]) input,:host([mode=horizontal]) input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([mode=radio]) label,:host([mode=horizontal]) label{margin-bottom:0;color:var(--wcs-text-medium);background-color:transparent;font-weight:500 !important;display:inline-block}:host([mode=radio]) label:before,:host([mode=horizontal]) label:before{border-radius:50%;border:2px solid var(--wcs-text-disabled);position:relative;width:1.125rem;height:1.125rem;pointer-events:none;content:"";background-color:var(--wcs-white)}:host([mode=radio]) label:after,:host([mode=horizontal]) label:after{transition:0.175s ease-in-out;position:relative;width:1.125rem;height:1.125rem;content:"";background:no-repeat 50%/50% 50%}:host([disabled]) label{color:var(--wcs-text-disabled);cursor:not-allowed}:host(:not([disabled])) label{cursor:pointer}:host([mode=radio][checked]) label,:host([mode=horizontal][checked]) label{color:var(--wcs-primary)}:host([mode=radio][checked]) label:before,:host([mode=horizontal][checked]) label:before{border-color:var(--wcs-primary);background-color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label,:host([mode=horizontal]:hover):not([disabled]) label{color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label:before,:host([mode=horizontal]:hover):not([disabled]) label:before{border-color:var(--wcs-primary)}:host([mode=radio]) label{padding:0.125rem 0.125rem 0 0;border:none;transition:0.175s ease-in-out}:host([mode=radio]) label:before{transition:0.175s ease-in-out;margin-right:var(--wcs-base-margin);display:inline-block;top:3px;box-sizing:border-box}:host([mode=horizontal]) label:before{transition:background-color 0.175s ease-in-out;margin:auto auto var(--wcs-base-margin);display:block}:host([mode=option]){padding:var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);font-weight:500 !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:5px calc(2 * var(--wcs-base-margin));margin-bottom:0;color:var(--wcs-white);white-space:nowrap;border-radius:0.4375rem}:host([mode=option]:focus-within) label{outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:0.4375rem}:host([mode=option][checked]) label{font-weight:500 !important;color:var(--wcs-primary);background-color:var(--wcs-white)}';const d=class{constructor(t){o(this,t);this.wcsRadioClick=e(this,"wcsRadioClick",7);this.inputId=`wcs-rb-${l++}`;this.mode="radio";this.value=undefined;this.label=undefined;this.checked=false;this.disabled=false}onKeyDown(o){if((a(o)\|\|s(o))&&!this.el.checked){this.el.checked=true;this.emitRadioChangeEvent()}}componentWillLoad(){if(this.value===undefined){this.value=this.el.innerText\|\|""}}componentDidLoad(){this.inputEl=this.el.shadowRoot.querySelector("input");this.inputEl.addEventListener("change",(o=>{this.emitRadioChangeEvent();this.checked=true}))}emitRadioChangeEvent(){this.wcsRadioClick.emit({label:this.label,source:this.el,value:this.value})}render(){return t(i,{slot:"option"},t("input",{id:this.inputId,type:"radio",value:this.value,checked:this.checked,disabled:this.disabled,"aria-disabled":this.disabled?"true":null,"aria-checked":`${this.checked}`}),t("label",{htmlFor:`${this.inputId}`},this.label))}get el(){return r(this)}};let l=0;d.style=n;export{d as wcs_radio};
2	+ //# sourceMappingURL=p-b856f2f6.entry.js.map

package/dist/wcs/p-b856f2f6.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["radioCss","Radio","this","inputId","radioButtonIds","onKeyDown","_event","isSpaceKey","isEnterKey","el","checked","emitRadioChangeEvent","componentWillLoad","value","undefined","innerText","componentDidLoad","inputEl","shadowRoot","querySelector","addEventListener","_","wcsRadioClick","emit","label","source","render","h","Host","slot","id","type","disabled","htmlFor"],"sources":["./src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","./src/components/radio/radio.component.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n width: fit-content;\n}\n\n:host([mode=radio]:focus-within) {\n transition: none;\n @include focus-outline($border-radius: 0.5rem, $outline-offset: 0);\n}\n\n:host([mode=horizontal]:focus-within) {\n transition: none;\n @include focus-outline($border-radius: 0.5rem, $outline-offset: 2px);\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n input {\n position: absolute;\n opacity: 0;\n height: 1px;\n width: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n }\n\n label {\n margin-bottom: 0;\n color: var(--wcs-text-medium);\n background-color: transparent;\n font-weight: 500 !important;\n display: inline-block;\n\n &:before {\n border-radius: 50%;\n border: 2px solid var(--wcs-text-disabled);\n position: relative;\n width: 1.125rem;\n height: 1.125rem;\n pointer-events: none;\n content: \"\";\n background-color: var(--wcs-white);\n }\n\n &:after {\n transition: 0.175s ease-in-out;\n position: relative;\n width: 1.125rem;\n height: 1.125rem;\n content: \"\";\n background: no-repeat 50% / 50% 50%;\n }\n }\n}\n\n:host([disabled]) {\n label {\n color: var(--wcs-text-disabled);\n cursor: not-allowed;\n }\n}\n\n:host(:not([disabled])) {\n label {\n cursor: pointer;\n }\n}\n\n:host([mode=radio][checked]),\n:host([mode=horizontal][checked]) {\n label {\n color: var(--wcs-primary);\n\n &:before {\n border-color: var(--wcs-primary);\n background-color: var(--wcs-primary);\n }\n }\n}\n\n:host([mode=radio]:hover):not([disabled]),\n:host([mode=horizontal]:hover):not([disabled]) {\n label {\n color: var(--wcs-primary);\n\n &:before {\n border-color: var(--wcs-primary);\n }\n }\n}\n\n:host([mode=radio]) {\n label {\n padding: 0.125rem 0.125rem 0 0;\n border: none;\n transition: 0.175s ease-in-out;\n\n &:before {\n transition: 0.175s ease-in-out;\n margin-right: var(--wcs-base-margin);\n display: inline-block;\n top: 3px;\n box-sizing: border-box;\n }\n }\n}\n\n:host([mode=horizontal]) {\n label {\n &:before {\n transition: background-color 0.175s ease-in-out;\n margin: auto auto var(--wcs-base-margin);\n display: block;\n\n }\n }\n}\n\n:host([mode=option]) {\n padding: var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);\n font-weight: 500 !important;\n\n input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n box-sizing: border-box;\n padding: 0;\n }\n\n label {\n padding: 5px calc(2 * var(--wcs-base-margin));\n margin-bottom: 0;\n color: var(--wcs-white);\n white-space: nowrap;\n border-radius: 0.4375rem;\n }\n}\n\n:host([mode=option]:focus-within) {\n label {\n @include focus-outline(var(--wcs-white), 0.4375rem, 0.1rem);\n }\n}\n\n:host([mode=option][checked]) {\n label {\n font-weight: 500 !important;\n color: var(--wcs-primary);\n background-color: var(--wcs-white);\n }\n}\n","import { Component, ComponentInterface, h, Host, Prop, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { isEnterKey, isSpaceKey } from '../../utils/helpers';\n\n@Component({\n tag: 'wcs-radio',\n styleUrl: 'radio.scss',\n shadow: true\n})\nexport class Radio implements ComponentInterface {\n private inputId = `wcs-rb-${radioButtonIds++}`;\n private inputEl: HTMLInputElement;\n @Element() private el!: HTMLWcsRadioElement;\n @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n @Prop({ mutable: true, reflect: true }) label: string;\n /**\n * If `true`, the radio is selected.\n */\n @Prop({mutable: true, reflect: true}) checked = false;\n /**\n * If `true`, the user cannot interact with the radio.\n */\n @Prop({ mutable: true }) disabled = false;\n // FIXME renommer l'évènement c'est pas un onclick mais un onchange\n @Event({eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n @Listen('keydown')\n onKeyDown(_event: KeyboardEvent) {\n if ((isSpaceKey(_event) || isEnterKey(_event)) && !this.el.checked) {\n this.el.checked = true;\n this.emitRadioChangeEvent();\n }\n }\n\n componentWillLoad(): Promise<void> | void {\n if (this.value === undefined) {\n // If no value was given we use the text content instead.\n this.value = this.el.innerText || '';\n }\n }\n\n componentDidLoad() {\n this.inputEl = this.el.shadowRoot.querySelector('input');\n this.inputEl.addEventListener('change', _ => {\n this.emitRadioChangeEvent();\n this.checked = true;\n })\n }\n\n emitRadioChangeEvent() {\n this.wcsRadioClick.emit({\n label: this.label,\n source: this.el,\n value: this.value\n });\n }\n\n render() {\n return (\n <Host slot=\"option\">\n <input\n id={this.inputId}\n type=\"radio\"\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n aria-disabled={this.disabled ? 'true' : null}\n aria-checked={`${this.checked}`}/>\n <label htmlFor={`${this.inputId}`}>{this.label}</label>\n </Host>\n );\n }\n}\n\nlet radioButtonIds = 0;\n"],"mappings":"2GAAA,MAAMA,EAAW,kpF,MCUJC,EAAK,M,sEACNC,KAAAC,QAAU,UAAUC,M,UAGoC,Q,uDAOhB,M,cAIZ,K,CAKpCC,UAAUC,GACN,IAAKC,EAAWD,IAAWE,EAAWF,MAAaJ,KAAKO,GAAGC,QAAS,CAChER,KAAKO,GAAGC,QAAU,KAClBR,KAAKS,sB,EAIbC,oBACI,GAAIV,KAAKW,QAAUC,UAAW,CAE1BZ,KAAKW,MAAQX,KAAKO,GAAGM,WAAa,E,EAI1CC,mBACId,KAAKe,QAAUf,KAAKO,GAAGS,WAAWC,cAAc,SAChDjB,KAAKe,QAAQG,iBAAiB,UAAUC,IACpCnB,KAAKS,uBACLT,KAAKQ,QAAU,IAAI,G,CAI3BC,uBACIT,KAAKoB,cAAcC,KAAK,CACpBC,MAAOtB,KAAKsB,MACZC,OAAQvB,KAAKO,GACbI,MAAOX,KAAKW,O,CAIpBa,SACI,OACIC,EAACC,EAAI,CAACC,KAAK,UACPF,EAAA,SACIG,GAAI5B,KAAKC,QACT4B,KAAK,QACLlB,MAAOX,KAAKW,MACZH,QAASR,KAAKQ,QACdsB,SAAU9B,KAAK8B,SAAQ,gBACR9B,KAAK8B,SAAW,OAAS,KAAI,eAC9B,GAAG9B,KAAKQ,YAC1BiB,EAAA,SAAOM,QAAS,GAAG/B,KAAKC,WAAYD,KAAKsB,O,2BAMzD,IAAIpB,EAAiB,E"}

package/dist/wcs/{p-274232e6.entry.js → p-bcb8b731.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as i,f as s,h as e,H as n,g as r}from"./p-a2df3a49.js";import{l as o}from"./p-adef7aaf.js";import{G as h}from"./p-62db1219.js";function a(t){switch(t){case"asc":return 1;case"desc":return-1}}var l;var c=new Uint8Array(16);function d(){if(!l){l=typeof crypto!=="undefined"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||typeof msCrypto!=="undefined"&&typeof msCrypto.getRandomValues==="function"&&msCrypto.getRandomValues.bind(msCrypto);if(!l){throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported")}}return l(c)}const u=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;function f(t){return typeof t==="string"&&u.test(t)}var g=[];for(var p=0;p<256;++p){g.push((p+256).toString(16).substr(1))}function m(t){var i=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var s=(g[t[i+0]]+g[t[i+1]]+g[t[i+2]]+g[t[i+3]]+"-"+g[t[i+4]]+g[t[i+5]]+"-"+g[t[i+6]]+g[t[i+7]]+"-"+g[t[i+8]]+g[t[i+9]]+"-"+g[t[i+10]]+g[t[i+11]]+g[t[i+12]]+g[t[i+13]]+g[t[i+14]]+g[t[i+15]]).toLowerCase();if(!f(s)){throw TypeError("Stringified UUID is invalid")}return s}function w(t,i,s){t=t||{};var e=t.random||(t.rng||d)();e[6]=e[6]&15|64;e[8]=e[8]&63|128;if(i){s=s||0;for(var n=0;n<16;++n){i[s+n]=e[n]}return i}return m(e)}const v=":host{display:block;--wcs-grid-highlight-color:var(--wcs-light)}:host th{background-color:var(--wcs-light)}:host th:not(:first-child){border-left:solid 1px var(--wcs-text-light)}:host ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:none}:host table{width:100%;border-spacing:0}:host td{color:var(--wcs-gray-light);margin:0;padding:calc(var(--wcs-padding) / 2) var(--wcs-padding)}:host tr:not(:last-child) td{border-bottom:solid 1px var(--wcs-text-light)}:host .wcs-grid-selection-column{padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);width:40px}:host tr.selected{background-color:var(--wcs-grid-highlight-color)}:host .loading{text-align:center}:host([selection]) ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:solid 1px var(--wcs-text-light) !important}";const C=class{constructor(s){t(this,s);this.wcsGridSelectionChange=i(this,"wcsGridSelectionChange",7);this.wcsGridAllSelectionChange=i(this,"wcsGridAllSelectionChange",7);this.serverMode=undefined;this.data=undefined;this.loading=undefined;this.selectionConfig="none";this.selectedItems=[];this.wcsGridPaginationId=undefined;this.rowIdPath=undefined;this.columns=undefined;this.paginationEl=undefined;this.rows=[]}onDataChange(t){this.updateGridRows(t);this.refreshSort(false)}onSelectedItemsPropertyChange(t){this.updateSelectionWithValues(t)}onHiddenColumnChange(){s(this)}updateSelectionWithValues(t){if(this.selectionConfig==="single"){this.rows.map((t=>t.selected=false));for(const i of this.rows){if(o.isEqual(i.data,t)){i.selected=true;break}}}else if(this.selectionConfig==="multiple"){this.rows.map((t=>t.selected=false));for(const i of this.rows){if(t.find((t=>o.isEqual(t,i.data)))){i.selected=true}}}this.rows=o.cloneDeep(this.rows)}wcsGridRowToWcsGridRowData(t){return{selected:t.selected,page:t.page,data:t.data}}updateGridRows(t){const i=[];if(t&&this.columns){for(let s=0;s<t.length;s++){const e={uuid:w(),data:t[s],selected:false,cells:[]};for(const i of this.columns){e.cells.push({content:o.get(t[s],i.path),column:i,formatter:i.formatter})}i.push(e)}this.rows=i;this.updatePageIndex()}}componentDidLoad(){this.columns=this.getGridColumnsFromTemplate();this.paginationEl=this.wcsGridPaginationId?document.getElementById(this.wcsGridPaginationId):this.getGridPaginationsFromTemplate()[0];this.updateGridRows(this.data);if(this.selectedItems){this.updateSelectionWithValues(this.selectedItems)}this.refreshSort(true)}refreshSort(t){if(this.columns){const[i,...s]=this.columns.filter((t=>t.sortOrder!=="none"));if(i&&!this.serverMode){this.sortBy(i)}t&&this.disableSortOrderForColumns(s)}}disableSortOrderForColumns(t){t===null||t===void 0?void 0:t.forEach((t=>t.sortOrder="none"))}getGridColumnsFromTemplate(){const t=this.el.shadowRoot.querySelector('slot[name="grid-column"]');return t.assignedElements()}getGridPaginationsFromTemplate(){const t=this.el.shadowRoot.querySelector('slot[name="grid-pagination"]');return t.assignedElements()}sortChangeEventHandler(t){if(t.detail.order==="none")return;this.disableSortOrderForColumns(this.columns.filter((i=>i!==t.detail.column)));if(this.serverMode)return;this.sortBy(t.detail.column);this.updatePageIndex()}sortBy(t){if(t.sortFn){this.rows=o.cloneDeep(this.rows).sort(((i,s)=>t.sortFn(i.data,s.data,t)*a(t.sortOrder)))}else{this.rows=o.cloneDeep(this.rows).sort(((i,s)=>{const e=t.path;return(o.get(i.data,e)<o.get(s.data,e)?-1:o.get(i.data,e)>o.get(s.data,e)?1:0)*a(t.sortOrder)}))}}updatePageIndex(){if(!this.serverMode&&this.paginationEl){this.paginationEl.itemsCount=this.data.length;this.paginationEl.pageCount=Math.ceil(this.data.length/this.paginationEl.pageSize);if(this.paginationEl.pageCount<=1){this.paginationEl.currentPage=h.INDEX_FIRST_PAGE}else if(this.paginationEl.pageCount>0&&this.paginationEl.currentPage+1>this.paginationEl.pageCount){this.paginationEl.currentPage=this.paginationEl.pageCount-1}const t=o.cloneDeep(this.rows);t.forEach(((t,i)=>t.page=Math.floor(i/this.paginationEl.pageSize)));this.rows=[...t]}}paginationChangeEventHandler(){this.onPaginationChange()}paginationChangeEventHandlerOutside(t){if(this.wcsGridPaginationId&&this.wcsGridPaginationId===t.target.id){this.onPaginationChange()}}onPaginationChange(){if(this.serverMode)return;this.updatePageIndex()}onRowSelection(t){if(this.selectionConfig==="single"){this.rows.filter((i=>i.uuid!==t.uuid)).map((t=>t.selected=false))}t.selected=!t.selected;if(this.selectionConfig!=="single"||t.selected){this.wcsGridSelectionChange.emit({row:this.wcsGridRowToWcsGridRowData(t)})}this.rows=o.cloneDeep(this.rows)}selectAllRows(){const t=this.getRowsForCurrentPage();const i=!this.allRowsAreSelected();t.map((t=>t.selected=i));this.wcsGridAllSelectionChange.emit({rows:i?t.map((t=>this.wcsGridRowToWcsGridRowData(t))):[]});this.rows=o.cloneDeep(this.rows)}allRowsAreSelected(){const t=this.getRowsForCurrentPage();return t.length>0&&t.filter((t=>t.selected)).length===t.length}getRowsForCurrentPage(){if(this.paginationEl){return this.rows.filter((t=>t.page===this.paginationEl.currentPage))}return this.rows}renderSelectionColumn(t){switch(this.selectionConfig){case"none":return;case"single":return e("td",null,e("wcs-radio",{checked:t.selected,onClick:this.onRowSelection.bind(this,t)}));case"multiple":return e("td",null,e("wcs-checkbox",{checked:t.selected,onWcsChange:this.onRowSelection.bind(this,t)}))}}getCellContent(t,i){if(i.formatter){return i.formatter(e,i.column,this.wcsGridRowToWcsGridRowData(t))}return i.content}totalColumnCount(){if(!this.columns){return 0}return this.columns.length+(this.selectionConfig==="none"?0:1)}render(){var t;return e(n,null,e("table",null,e("thead",null,this.selectionConfig==="none"?"":e("th",{class:"wcs-grid-selection-column"},this.selectionConfig==="single"?"":e("wcs-checkbox",{checked:this.allRowsAreSelected(),onWcsChange:this.selectAllRows.bind(this)})),e("slot",{name:"grid-column"})),e("tbody",null,this.loading?e("tr",null,e("td",{colSpan:this.totalColumnCount(),class:"loading"},e("wcs-spinner",null))):(t=this.rows)===null||t===void 0?void 0:t.filter((t=>this.serverMode||!this.paginationEl||t.page===this.paginationEl.currentPage)).map((t=>this.renderRow(t))))),e("slot",{name:"grid-pagination"}))}renderRow(t){var i;return e("tr",{class:t.selected?"selected":""},this.renderSelectionColumn(t),(i=t.cells)===null||i===void 0?void 0:i.map((i=>{if(i.column.hidden){return}return i.column.customCells?e("td",null,e("slot",{name:i.column.id+"-"+t.data[this.rowIdPath]})):e("td",{part:i.column.path+"-column"},this.getCellContent(t,i))})))}get el(){return r(this)}static get watchers(){return{data:["onDataChange"],selectedItems:["onSelectedItemsPropertyChange"]}}};C.style=v;export{C as wcs_grid};
-//# sourceMappingURL=p-274232e6.entry.js.map
+import{r as t,c as i,f as s,h as e,H as n,g as r}from"./p-a2df3a49.js";import{l as o}from"./p-adef7aaf.js";import{G as h}from"./p-475ac7c5.js";function a(t){switch(t){case"asc":return 1;case"desc":return-1}}var l;var c=new Uint8Array(16);function d(){if(!l){l=typeof crypto!=="undefined"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||typeof msCrypto!=="undefined"&&typeof msCrypto.getRandomValues==="function"&&msCrypto.getRandomValues.bind(msCrypto);if(!l){throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported")}}return l(c)}const u=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;function f(t){return typeof t==="string"&&u.test(t)}var g=[];for(var p=0;p<256;++p){g.push((p+256).toString(16).substr(1))}function m(t){var i=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var s=(g[t[i+0]]+g[t[i+1]]+g[t[i+2]]+g[t[i+3]]+"-"+g[t[i+4]]+g[t[i+5]]+"-"+g[t[i+6]]+g[t[i+7]]+"-"+g[t[i+8]]+g[t[i+9]]+"-"+g[t[i+10]]+g[t[i+11]]+g[t[i+12]]+g[t[i+13]]+g[t[i+14]]+g[t[i+15]]).toLowerCase();if(!f(s)){throw TypeError("Stringified UUID is invalid")}return s}function w(t,i,s){t=t||{};var e=t.random||(t.rng||d)();e[6]=e[6]&15|64;e[8]=e[8]&63|128;if(i){s=s||0;for(var n=0;n<16;++n){i[s+n]=e[n]}return i}return m(e)}const v=":host{display:block;--wcs-grid-highlight-color:var(--wcs-light)}:host th{background-color:var(--wcs-light)}:host th:not(:first-child){border-left:solid 1px var(--wcs-text-light)}:host ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:none}:host table{width:100%;border-spacing:0}:host td{color:var(--wcs-gray-light);margin:0;padding:calc(var(--wcs-padding) / 2) var(--wcs-padding)}:host tr:not(:last-child) td{border-bottom:solid 1px var(--wcs-text-light)}:host .wcs-grid-selection-column{padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);width:40px}:host tr.selected{background-color:var(--wcs-grid-highlight-color)}:host .loading{text-align:center}:host([selection]) ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:solid 1px var(--wcs-text-light) !important}";const C=class{constructor(s){t(this,s);this.wcsGridSelectionChange=i(this,"wcsGridSelectionChange",7);this.wcsGridAllSelectionChange=i(this,"wcsGridAllSelectionChange",7);this.serverMode=undefined;this.data=undefined;this.loading=undefined;this.selectionConfig="none";this.selectedItems=[];this.wcsGridPaginationId=undefined;this.rowIdPath=undefined;this.columns=undefined;this.paginationEl=undefined;this.rows=[]}onDataChange(t){this.updateGridRows(t);this.refreshSort(false)}onSelectedItemsPropertyChange(t){this.updateSelectionWithValues(t)}onHiddenColumnChange(){s(this)}updateSelectionWithValues(t){if(this.selectionConfig==="single"){this.rows.map((t=>t.selected=false));for(const i of this.rows){if(o.isEqual(i.data,t)){i.selected=true;break}}}else if(this.selectionConfig==="multiple"){this.rows.map((t=>t.selected=false));for(const i of this.rows){if(t.find((t=>o.isEqual(t,i.data)))){i.selected=true}}}this.rows=o.cloneDeep(this.rows)}wcsGridRowToWcsGridRowData(t){return{selected:t.selected,page:t.page,data:t.data}}updateGridRows(t){const i=[];if(t&&this.columns){for(let s=0;s<t.length;s++){const e={uuid:w(),data:t[s],selected:false,cells:[]};for(const i of this.columns){e.cells.push({content:o.get(t[s],i.path),column:i,formatter:i.formatter})}i.push(e)}this.rows=i;this.updatePageIndex()}}componentDidLoad(){this.columns=this.getGridColumnsFromTemplate();this.paginationEl=this.wcsGridPaginationId?document.getElementById(this.wcsGridPaginationId):this.getGridPaginationsFromTemplate()[0];this.updateGridRows(this.data);if(this.selectedItems){this.updateSelectionWithValues(this.selectedItems)}this.refreshSort(true)}refreshSort(t){if(this.columns){const[i,...s]=this.columns.filter((t=>t.sortOrder!=="none"));if(i&&!this.serverMode){this.sortBy(i)}t&&this.disableSortOrderForColumns(s)}}disableSortOrderForColumns(t){t===null||t===void 0?void 0:t.forEach((t=>t.sortOrder="none"))}getGridColumnsFromTemplate(){const t=this.el.shadowRoot.querySelector('slot[name="grid-column"]');return t.assignedElements()}getGridPaginationsFromTemplate(){const t=this.el.shadowRoot.querySelector('slot[name="grid-pagination"]');return t.assignedElements()}sortChangeEventHandler(t){if(t.detail.order==="none")return;this.disableSortOrderForColumns(this.columns.filter((i=>i!==t.detail.column)));if(this.serverMode)return;this.sortBy(t.detail.column);this.updatePageIndex()}sortBy(t){if(t.sortFn){this.rows=o.cloneDeep(this.rows).sort(((i,s)=>t.sortFn(i.data,s.data,t)*a(t.sortOrder)))}else{this.rows=o.cloneDeep(this.rows).sort(((i,s)=>{const e=t.path;return(o.get(i.data,e)<o.get(s.data,e)?-1:o.get(i.data,e)>o.get(s.data,e)?1:0)*a(t.sortOrder)}))}}updatePageIndex(){if(!this.serverMode&&this.paginationEl){this.paginationEl.itemsCount=this.data.length;this.paginationEl.pageCount=Math.ceil(this.data.length/this.paginationEl.pageSize);if(this.paginationEl.pageCount<=1){this.paginationEl.currentPage=h.INDEX_FIRST_PAGE}else if(this.paginationEl.pageCount>0&&this.paginationEl.currentPage+1>this.paginationEl.pageCount){this.paginationEl.currentPage=this.paginationEl.pageCount-1}const t=o.cloneDeep(this.rows);t.forEach(((t,i)=>t.page=Math.floor(i/this.paginationEl.pageSize)));this.rows=[...t]}}paginationChangeEventHandler(){this.onPaginationChange()}paginationChangeEventHandlerOutside(t){if(this.wcsGridPaginationId&&this.wcsGridPaginationId===t.target.id){this.onPaginationChange()}}onPaginationChange(){if(this.serverMode)return;this.updatePageIndex()}onRowSelection(t){if(this.selectionConfig==="single"){this.rows.filter((i=>i.uuid!==t.uuid)).map((t=>t.selected=false))}t.selected=!t.selected;if(this.selectionConfig!=="single"||t.selected){this.wcsGridSelectionChange.emit({row:this.wcsGridRowToWcsGridRowData(t)})}this.rows=o.cloneDeep(this.rows)}selectAllRows(){const t=this.getRowsForCurrentPage();const i=!this.allRowsAreSelected();t.map((t=>t.selected=i));this.wcsGridAllSelectionChange.emit({rows:i?t.map((t=>this.wcsGridRowToWcsGridRowData(t))):[]});this.rows=o.cloneDeep(this.rows)}allRowsAreSelected(){const t=this.getRowsForCurrentPage();return t.length>0&&t.filter((t=>t.selected)).length===t.length}getRowsForCurrentPage(){if(this.paginationEl){return this.rows.filter((t=>t.page===this.paginationEl.currentPage))}return this.rows}renderSelectionColumn(t){switch(this.selectionConfig){case"none":return;case"single":return e("td",null,e("wcs-radio",{checked:t.selected,onClick:this.onRowSelection.bind(this,t)}));case"multiple":return e("td",null,e("wcs-checkbox",{checked:t.selected,onWcsChange:this.onRowSelection.bind(this,t)}))}}getCellContent(t,i){if(i.formatter){return i.formatter(e,i.column,this.wcsGridRowToWcsGridRowData(t))}return i.content}totalColumnCount(){if(!this.columns){return 0}return this.columns.length+(this.selectionConfig==="none"?0:1)}render(){var t;return e(n,null,e("table",null,e("thead",null,this.selectionConfig==="none"?"":e("th",{class:"wcs-grid-selection-column"},this.selectionConfig==="single"?"":e("wcs-checkbox",{checked:this.allRowsAreSelected(),onWcsChange:this.selectAllRows.bind(this)})),e("slot",{name:"grid-column"})),e("tbody",null,this.loading?e("tr",null,e("td",{colSpan:this.totalColumnCount(),class:"loading"},e("wcs-spinner",null))):(t=this.rows)===null||t===void 0?void 0:t.filter((t=>this.serverMode||!this.paginationEl||t.page===this.paginationEl.currentPage)).map((t=>this.renderRow(t))))),e("slot",{name:"grid-pagination"}))}renderRow(t){var i;return e("tr",{class:t.selected?"selected":""},this.renderSelectionColumn(t),(i=t.cells)===null||i===void 0?void 0:i.map((i=>{if(i.column.hidden){return}return i.column.customCells?e("td",null,e("slot",{name:i.column.id+"-"+t.data[this.rowIdPath]})):e("td",{part:i.column.path+"-column"},this.getCellContent(t,i))})))}get el(){return r(this)}static get watchers(){return{data:["onDataChange"],selectedItems:["onSelectedItemsPropertyChange"]}}};C.style=v;export{C as wcs_grid};
+//# sourceMappingURL=p-bcb8b731.entry.js.map

package/dist/wcs/p-bcb8b731.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["getSortOrderInteger","sortOrder","getRandomValues","rnds8","Uint8Array","rng","crypto","bind","msCrypto","Error","REGEX","validate","uuid","test","byteToHex","i","push","toString","substr","stringify","arr","offset","arguments","length","undefined","toLowerCase","TypeError","v4","options","buf","rnds","random","gridCss","Grid","onDataChange","newValue","this","updateGridRows","refreshSort","onSelectedItemsPropertyChange","updateSelectionWithValues","onHiddenColumnChange","forceUpdate","values","selectionConfig","rows","map","r","selected","row","_","isEqual","data","find","x","cloneDeep","wcsGridRowToWcsGridRowData","page","columns","cells","column","content","get","path","formatter","updatePageIndex","componentDidLoad","getGridColumnsFromTemplate","paginationEl","wcsGridPaginationId","document","getElementById","getGridPaginationsFromTemplate","selectedItems","refreshOthersColmumnsSortOrderState","first","other","filter","c","serverMode","sortBy","disableSortOrderForColumns","forEach","slotted","el","shadowRoot","querySelector","assignedElements","sortChangeEventHandler","event","detail","order","colmun","sortFn","sort","a","b","itemsCount","pageCount","Math","ceil","pageSize","currentPage","GridPagination","INDEX_FIRST_PAGE","index","floor","paginationChangeEventHandler","onPaginationChange","paginationChangeEventHandlerOutside","target","id","onRowSelection","wcsGridSelectionChange","emit","selectAllRows","getRowsForCurrentPage","allRowsAreSelected","wcsGridAllSelectionChange","renderSelectionColumn","h","checked","onClick","onWcsChange","getCellContent","cell","totalColumnCount","render","Host","class","name","loading","colSpan","_a","renderRow","hidden","customCells","rowIdPath","part"],"sources":["./src/components/grid/grid-interface.ts","./node_modules/uuid/dist/esm-browser/rng.js","./node_modules/uuid/dist/esm-browser/regex.js","./node_modules/uuid/dist/esm-browser/validate.js","./node_modules/uuid/dist/esm-browser/stringify.js","./node_modules/uuid/dist/esm-browser/v4.js","./src/components/grid/grid.scss?tag=wcs-grid&encapsulation=shadow","./src/components/grid/grid.tsx"],"sourcesContent":["import { VNode } from '@stencil/core';\n\nexport type WcsGridSelectionConfig = 'none' | 'single' | 'multiple';\n\nexport type WcsSortFn = (a: any, b: any, column: HTMLWcsGridColumnElement) => -1 | 0 | 1;\n\nexport type WcsCellFormatter = (_h: HyperFunc<VNode>, column: HTMLWcsGridColumnElement, rowData: WcsGridRowData) => HTMLElement | HTMLElement[];\n\nexport interface WcsGridColumnSortChangeEventDetails {\n sortFn: WcsSortFn;\n order: WcsSortOrder;\n column: HTMLWcsGridColumnElement;\n}\n\nexport interface WcsGridRowSelectedEventDetails {\n row: WcsGridRowData;\n}\n\nexport interface WcsGridAllRowSelectedEventDetails {\n rows: WcsGridRowData[];\n}\n\nexport type WcsGridPaginationConfig = {\n currentPage: number;\n pageSize: number;\n itemsCount: number;\n pageCount: number;\n};\n\nexport interface WcsGridPaginationChangeEventDetails {\n pagination: WcsGridPaginationConfig;\n}\n\nexport type WcsSortOrder = 'asc' | 'desc' | 'none';\n\nexport function getSortOrderInteger(sortOrder: WcsSortOrder) {\n switch (sortOrder) {\n case 'asc':\n return 1;\n case 'desc':\n return -1;\n case 'none':\n break;\n }\n}\n\nexport interface WcsGridRow {\n uuid: string;\n page?: number;\n selected?: boolean;\n data?: any;\n cells?: WcsGridCell[];\n}\n\nexport interface WcsGridCell {\n content: string | void;\n column: HTMLWcsGridColumnElement;\n formatter: (_h: HyperFunc<VNode>, column: HTMLWcsGridColumnElement, rowData: WcsGridRowData) => HTMLElement | HTMLElement[];\n}\n\nexport interface WcsGridRowData {\n page: number;\n selected: boolean;\n data: any;\n}\n\nexport interface HyperFunc<T> {\n (tag: any): T;\n}\n\nexport interface HyperFunc<T> {\n (tag: any, data: any): T;\n}\n\nexport interface HyperFunc<T> {\n (tag: any, text: string): T;\n}\n\nexport interface HyperFunc<T> {\n (sel: any, children: (T | undefined | null)[]): T;\n}\n\nexport interface HyperFunc<T> {\n (sel: any, data: any, text: string): T;\n}\n\nexport interface HyperFunc<T> {\n (sel: any, data: any, children: (T | undefined | null)[]): T;\n}\n\nexport interface HyperFunc<T> {\n (sel: any, data: any, children: T): T;\n}\n","// Unique ID creation requires a high quality random # generator. In the browser we therefore\n// require the crypto API and do not support built-in fallback to lower quality random number\n// generators (like Math.random()).\nvar getRandomValues;\nvar rnds8 = new Uint8Array(16);\nexport default function rng() {\n // lazy load so that environments that need to polyfill have a chance to do so\n if (!getRandomValues) {\n // getRandomValues needs to be invoked in a context where \"this\" is a Crypto implementation. Also,\n // find the complete implementation of crypto (msCrypto) on IE11.\n getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);\n\n if (!getRandomValues) {\n throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n }\n }\n\n return getRandomValues(rnds8);\n}","export default /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;","import REGEX from './regex.js';\n\nfunction validate(uuid) {\n return typeof uuid === 'string' && REGEX.test(uuid);\n}\n\nexport default validate;","import validate from './validate.js';\n/**\n * Convert array of 16 byte values to UUID string format of the form:\n * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\n */\n\nvar byteToHex = [];\n\nfor (var i = 0; i < 256; ++i) {\n byteToHex.push((i + 0x100).toString(16).substr(1));\n}\n\nfunction stringify(arr) {\n var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n // Note: Be careful editing this code! It's been tuned for performance\n // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434\n var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID. If this throws, it's likely due to one\n // of the following:\n // - One or more input array values don't map to a hex octet (leading to\n // \"undefined\" in the uuid)\n // - Invalid input values for the RFC `version` or `variant` fields\n\n if (!validate(uuid)) {\n throw TypeError('Stringified UUID is invalid');\n }\n\n return uuid;\n}\n\nexport default stringify;","import rng from './rng.js';\nimport stringify from './stringify.js';\n\nfunction v4(options, buf, offset) {\n options = options || {};\n var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`\n\n rnds[6] = rnds[6] & 0x0f | 0x40;\n rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided\n\n if (buf) {\n offset = offset || 0;\n\n for (var i = 0; i < 16; ++i) {\n buf[offset + i] = rnds[i];\n }\n\n return buf;\n }\n\n return stringify(rnds);\n}\n\nexport default v4;",":host {\n display: block;\n --wcs-grid-highlight-color: var(--wcs-light);\n\n th {\n background-color: var(--wcs-light);\n }\n\n th:not(:first-child) {\n border-left: solid 1px var(--wcs-text-light);\n }\n\n // Remove the border for the first column\n ::slotted([slot=grid-column]:first-child) {\n --wcs-grid-column-border-left: none;\n }\n\n table {\n width: 100%;\n border-spacing: 0;\n }\n\n td {\n color: var(--wcs-gray-light);\n margin: 0;\n padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);\n }\n\n tr:not(:last-child) td {\n border-bottom: solid 1px var(--wcs-text-light);\n }\n\n .wcs-grid-selection-column {\n padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);\n width: 40px;\n }\n\n tr.selected {\n background-color: var(--wcs-grid-highlight-color);\n }\n\n .loading {\n text-align: center;\n }\n}\n\n// If the grid displays a selection column, we set the border on the\n// first data column (which has been disabled in :host)\n:host([selection]) {\n ::slotted([slot=grid-column]:first-child) {\n --wcs-grid-column-border-left: solid 1px var(--wcs-text-light) !important;\n }\n}\n","import {\n Component,\n ComponentDidLoad,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n forceUpdate,\n h,\n Host,\n Listen,\n Prop,\n State,\n VNode,\n Watch\n} from '@stencil/core';\nimport {\n getSortOrderInteger,\n HyperFunc,\n WcsGridAllRowSelectedEventDetails,\n WcsGridCell,\n WcsGridColumnSortChangeEventDetails,\n WcsGridPaginationChangeEventDetails,\n WcsGridRow,\n WcsGridRowData,\n WcsGridRowSelectedEventDetails,\n WcsGridSelectionConfig\n} from './grid-interface';\nimport _ from 'lodash';\nimport { v4 as uuid } from 'uuid';\nimport { GridPagination } from '../grid-pagination/grid-pagination';\n\n@Component({\n tag: 'wcs-grid',\n styleUrl: 'grid.scss',\n shadow: true\n})\nexport class Grid implements ComponentInterface, ComponentDidLoad {\n @Element() private el!: HTMLWcsGridElement;\n /**\n * True to manage sort and pagination with a backend server, default: false\n */\n @Prop() serverMode: boolean;\n @Prop() data: any[];\n /**\n * Flag to display spinner during data loading\n */\n @Prop() loading: boolean;\n /**\n * Used to manage grid's row selection\n */\n @Prop() selectionConfig: WcsGridSelectionConfig = 'none';\n /**\n * Set the selected items\n */\n @Prop() selectedItems: any | any[] = [];\n @Prop() wcsGridPaginationId: string;\n /**\n * Name of the object's key that will be used to display the cells whose keyValue attribute matches to the\n * object's value for this key.\n */\n @Prop() rowIdPath: string;\n @State() private columns: HTMLWcsGridColumnElement[];\n @State() private paginationEl: HTMLWcsGridPaginationElement;\n /**\n * Rows to display, contains user data and meta data\n */\n @State() private rows: WcsGridRow[] = [];\n /**\n * Event emitted when a row is selected or unselected\n */\n @Event() wcsGridSelectionChange!: EventEmitter<WcsGridRowSelectedEventDetails>;\n /**\n * Event emitted when all rows are selected or unselected\n */\n @Event() wcsGridAllSelectionChange!: EventEmitter<WcsGridAllRowSelectedEventDetails>;\n\n @Watch('data')\n onDataChange(newValue: any[]): void {\n this.updateGridRows(newValue);\n this.refreshSort(false);\n }\n\n @Watch('selectedItems')\n onSelectedItemsPropertyChange(newValue: any | any[]) {\n this.updateSelectionWithValues(newValue);\n }\n\n @Listen('wcsHiddenChange')\n onHiddenColumnChange(): void {\n // We use forceUpdate because the fact of hiding a column or not does not modify the internal structure of the grid (WcsGridRow).\n // Hide a column only impacts the way it is rendered but the grid-column remains in the dom and in our internal model.\n forceUpdate(this);\n }\n\n private updateSelectionWithValues(values: any | any[]) {\n if (this.selectionConfig === 'single') {\n this.rows.map(r => r.selected = false);\n for (const row of this.rows) {\n if (_.isEqual(row.data, values)) {\n row.selected = true;\n break; // only one line can be selected\n }\n }\n } else if (this.selectionConfig === 'multiple') {\n this.rows.map(r => r.selected = false);\n for (const row of this.rows) {\n if (values.find(x => _.isEqual(x, row.data))) {\n row.selected = true;\n }\n }\n }\n this.rows = _.cloneDeep(this.rows);\n }\n\n private wcsGridRowToWcsGridRowData(row: WcsGridRow): WcsGridRowData {\n return {selected: row.selected, page: row.page, data: row.data};\n }\n\n private updateGridRows(data: any[]): void {\n const rows: WcsGridRow[] = [];\n if (data && this.columns) {\n for (let i = 0; i < data.length; i++) {\n const row: WcsGridRow = {\n uuid: uuid(),\n data: data[i],\n selected: false,\n cells: []\n };\n for (const column of this.columns) {\n row.cells.push({\n content: _.get(data[i], column.path),\n column,\n formatter: column.formatter\n })\n }\n rows.push(row);\n }\n this.rows = rows;\n this.updatePageIndex();\n }\n }\n\n componentDidLoad(): void {\n this.columns = this.getGridColumnsFromTemplate();\n this.paginationEl = this.wcsGridPaginationId\n ? document.getElementById(this.wcsGridPaginationId) as HTMLWcsGridPaginationElement\n : this.getGridPaginationsFromTemplate()[0];\n this.updateGridRows(this.data);\n if (this.selectedItems) {\n this.updateSelectionWithValues(this.selectedItems);\n }\n this.refreshSort(true);\n }\n\n /**\n * Handle existing column's filters (defined before the grid is instantiated)\n * @private\n */\n private refreshSort(refreshOthersColmumnsSortOrderState: boolean) {\n //fixme: why the column property can be null or undefined?\n if (this.columns) {\n const [first, ...other] = this.columns.filter(c => c.sortOrder !== 'none');\n if (first && !this.serverMode) {\n this.sortBy(first);\n }\n refreshOthersColmumnsSortOrderState && this.disableSortOrderForColumns(other);\n }\n }\n\n private disableSortOrderForColumns(columns: HTMLWcsGridColumnElement[] | null | undefined): void {\n columns?.forEach(c => c.sortOrder = 'none');\n }\n\n private getGridColumnsFromTemplate(): HTMLWcsGridColumnElement[] {\n const slotted = this.el.shadowRoot.querySelector('slot[name=\"grid-column\"]') as HTMLSlotElement;\n return slotted.assignedElements() as any as HTMLWcsGridColumnElement[];\n }\n\n private getGridPaginationsFromTemplate(): HTMLWcsGridPaginationElement[] {\n const slotted = this.el.shadowRoot.querySelector('slot[name=\"grid-pagination\"]') as HTMLSlotElement;\n return slotted.assignedElements() as any as HTMLWcsGridPaginationElement[];\n }\n\n @Listen('wcsSortChange')\n sortChangeEventHandler(event: CustomEvent<WcsGridColumnSortChangeEventDetails>): void {\n if (event.detail.order === 'none') return;\n // We keep only one active sort column\n this.disableSortOrderForColumns(this.columns.filter(c => c !== event.detail.column));\n if (this.serverMode) return;\n this.sortBy(event.detail.column);\n this.updatePageIndex();\n }\n\n /**\n * Sorts the grid rows according to the given column's configuration\n * @param colmun Column from which to extract the sorting configuration\n * @private\n */\n private sortBy(colmun: HTMLWcsGridColumnElement) {\n if (colmun.sortFn) {\n this.rows = _.cloneDeep(this.rows)\n .sort((a: any, b: any) => colmun.sortFn(a.data, b.data, colmun) * getSortOrderInteger(colmun.sortOrder));\n } else {\n this.rows = _.cloneDeep(this.rows)\n .sort((a: any, b: any) => {\n const path = colmun.path;\n return ((_.get(a.data, path) < _.get(b.data, path)) ? -1 : (_.get(a.data, path) > _.get(b.data, path)) ? 1 : 0) * getSortOrderInteger(colmun.sortOrder);\n });\n }\n }\n\n /**\n * Update the page's number of all rows\n */\n private updatePageIndex(): void {\n if (!this.serverMode && this.paginationEl) {\n this.paginationEl.itemsCount = this.data.length;\n this.paginationEl.pageCount = Math.ceil(this.data.length / this.paginationEl.pageSize);\n\n if (this.paginationEl.pageCount <= 1) {\n this.paginationEl.currentPage = GridPagination.INDEX_FIRST_PAGE;\n } else if (this.paginationEl.pageCount > 0 && this.paginationEl.currentPage + 1 > this.paginationEl.pageCount) {\n this.paginationEl.currentPage = this.paginationEl.pageCount - 1;\n }\n\n const rows = _.cloneDeep(this.rows);\n rows.forEach((row: WcsGridRow, index: number) =>\n row.page = Math.floor(index / this.paginationEl.pageSize)\n );\n this.rows = [...rows];\n }\n }\n\n @Listen('wcsGridPaginationChange')\n paginationChangeEventHandler(): void {\n this.onPaginationChange();\n }\n\n @Listen('wcsGridPaginationChange', {target: 'window'})\n paginationChangeEventHandlerOutside(event: CustomEvent<WcsGridPaginationChangeEventDetails>): void {\n if (this.wcsGridPaginationId && this.wcsGridPaginationId === (event.target as HTMLElement).id) {\n this.onPaginationChange();\n }\n }\n\n private onPaginationChange(): void {\n if (this.serverMode) return;\n this.updatePageIndex();\n }\n\n private onRowSelection(row: WcsGridRow): void {\n if (this.selectionConfig === 'single') {\n this.rows.filter(r => r.uuid !== row.uuid).map(r => r.selected = false);\n }\n row.selected = !row.selected;\n if (this.selectionConfig !== 'single' || row.selected) {\n this.wcsGridSelectionChange.emit({row: this.wcsGridRowToWcsGridRowData(row)});\n }\n this.rows = _.cloneDeep(this.rows);\n }\n\n private selectAllRows(): void {\n const rows = this.getRowsForCurrentPage();\n const selected = !this.allRowsAreSelected();\n rows.map(r => r.selected = selected);\n this.wcsGridAllSelectionChange.emit({rows: selected ? rows.map(row => this.wcsGridRowToWcsGridRowData(row)) : []});\n this.rows = _.cloneDeep(this.rows);\n }\n\n private allRowsAreSelected(): boolean {\n const rows = this.getRowsForCurrentPage();\n return rows.length > 0 && rows.filter(row => row.selected).length === rows.length;\n }\n\n private getRowsForCurrentPage(): WcsGridRow[] {\n if (this.paginationEl) {\n return this.rows.filter(row => row.page === this.paginationEl.currentPage);\n }\n return this.rows;\n }\n\n renderSelectionColumn(row: WcsGridRow): any {\n switch (this.selectionConfig) {\n case 'none':\n return;\n case 'single':\n return <td>\n <wcs-radio checked={row.selected} onClick={this.onRowSelection.bind(this, row)}/>\n </td>;\n case 'multiple':\n return <td>\n <wcs-checkbox checked={row.selected} onWcsChange={this.onRowSelection.bind(this, row)}/>\n </td>;\n }\n }\n\n private getCellContent(row: WcsGridRow, cell: WcsGridCell): HTMLElement | HTMLElement[] | string | void {\n if (cell.formatter) {\n return cell.formatter(\n (h as unknown) as HyperFunc<VNode>,\n cell.column,\n this.wcsGridRowToWcsGridRowData(row)\n );\n }\n return cell.content;\n }\n\n private totalColumnCount() {\n if (!this.columns) {\n return 0;\n }\n return this.columns.length + (this.selectionConfig === 'none' ? 0 : 1);\n }\n\n render(): any {\n return (\n <Host>\n {\n <table>\n <thead>\n {\n this.selectionConfig === 'none' ? ''\n : <th class=\"wcs-grid-selection-column\">\n {\n this.selectionConfig === 'single' ? '' :\n <wcs-checkbox checked={this.allRowsAreSelected()}\n onWcsChange={this.selectAllRows.bind(this)}/>\n }\n </th>\n }\n <slot name=\"grid-column\"></slot>\n </thead>\n <tbody>\n {\n this.loading\n ? <tr>\n <td colSpan={this.totalColumnCount()} class=\"loading\">\n <wcs-spinner></wcs-spinner>\n </td>\n </tr>\n : this.rows\n ?.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage)\n .map(row =>\n this.renderRow(row)\n )\n }\n </tbody>\n </table>\n }\n <slot name=\"grid-pagination\"></slot>\n </Host>\n );\n }\n\n private renderRow(row: WcsGridRow) {\n return <tr class={row.selected ? 'selected' : ''}>\n {this.renderSelectionColumn(row)}\n {row.cells?.map(cell => {\n if (cell.column.hidden) {\n return;\n }\n return cell.column.customCells\n ? (<td>\n <slot name={cell.column.id + '-' + row.data[this.rowIdPath]}/>\n </td>)\n : (<td part={cell.column.path + '-column'}>{this.getCellContent(row, cell)}</td>)\n }\n )}\n </tr>;\n }\n}\n\n/**\n * Pour resize le tableau\n * https://www.brainbell.com/javascript/making-resizable-table-js.htmls\n *\n */\n"],"mappings":"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"}

package/dist/wcs/p-d2da0c9f.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as i,h as s,H as r,g as e}from"./p-a2df3a49.js";import{j as n,k as a,l as h}from"./p-12ac2547.js";const o=["s","m","l"];function d(t){return o.includes(t)}const c=":host{--wcs-input-icon-color:var(--wcs-text-medium);--wcs-internal-input-border-radius-left:var(--wcs-input-border-radius-left, var(--wcs-border-radius));--wcs-internal-input-border-radius-right:var(--wcs-input-border-radius-right, var(--wcs-border-radius));--wcs-internal-input-border-width:2px;display:flex;width:100%;height:var(--wcs-input-host-height);box-sizing:border-box;border-radius:var(--wcs-internal-input-border-radius-left) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-left);background-color:var(--wcs-light);border:var(--wcs-internal-input-border-width) solid var(--wcs-light);background-clip:padding-box}:host ::placeholder{font-weight:400;font-style:italic}:host input{overflow:hidden;min-height:var(--wcs-size-xs);width:100%;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-primary);font-weight:var(--wcs-font-weight-form-value) !important;border:none;padding:0 calc(var(--wcs-padding) - var(--wcs-internal-input-border-width));font-size:var(--wcs-input-font-size, 1rem);line-height:1.5}:host input:focus{box-shadow:none;outline:0}:host wcs-mat-icon{position:relative;margin-left:8px;margin-right:-8px}:host .toggle_password{cursor:pointer;margin-left:-8px;margin-right:8px}:host .prefix,:host .suffix{color:var(--wcs-white);display:flex;white-space:nowrap;align-items:center;font-size:var(--wcs-input-font-size, 1rem);padding:0 calc(var(--wcs-padding) / 2);font-weight:var(--wcs-font-weight-form-value) !important;background-color:var(--wcs-text-disabled)}:host .prefix{border-radius:var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);margin:calc(-1 * var(--wcs-internal-input-border-width)) 0 calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width));border-left:solid var(--wcs-internal-input-border-width) transparent;border-top:solid var(--wcs-internal-input-border-width) transparent;border-bottom:solid var(--wcs-internal-input-border-width) transparent}:host .suffix{border-radius:0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;margin:calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) 0px;border-right:solid var(--wcs-internal-input-border-width) transparent;border-top:solid var(--wcs-internal-input-border-width) transparent;border-bottom:solid var(--wcs-internal-input-border-width) transparent}:host([size=l]){--wcs-input-host-height:var(--wcs-size-l);--wcs-input-font-size:1.0625rem}:host([size=m]){--wcs-input-host-height:var(--wcs-size-m);--wcs-input-font-size:1rem}:host([size=s]){--wcs-input-host-height:var(--wcs-size-s);--wcs-input-font-size:0.9375rem}:host([state=error]){border-color:var(--wcs-red) !important}:host([data-has-prefix]) input{padding-left:calc(var(--wcs-padding) / 2)}:host([data-has-suffix]) input{padding-left:calc(var(--wcs-padding) / 2)}:host([disabled]) input{color:var(--wcs-text-disabled);cursor:not-allowed}:host([disabled]) .prefix,:host([disabled]) .suffix{color:var(--wcs-light)}:host(:focus-within){border:dashed var(--wcs-internal-input-border-width) var(--wcs-primary)}:host(:focus-within) .prefix{border-left:dashed var(--wcs-internal-input-border-width) var(--wcs-primary);border-top:dashed var(--wcs-internal-input-border-width) var(--wcs-primary);border-bottom:dashed var(--wcs-internal-input-border-width) var(--wcs-primary)}:host(:focus-within) .suffix{border-right:dashed var(--wcs-internal-input-border-width) var(--wcs-primary);border-top:dashed var(--wcs-internal-input-border-width) var(--wcs-primary);border-bottom:dashed var(--wcs-internal-input-border-width) var(--wcs-primary)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-primary)}";const l=class{constructor(s){t(this,s);this.wcsInput=i(this,"wcsInput",7);this.wcsChange=i(this,"wcsChange",7);this.wcsBlur=i(this,"wcsBlur",7);this.wcsFocus=i(this,"wcsFocus",7);this.inputId=`wcs-input-${u++}`;this.didBlurAfterEdit=false;this.inheritedAttributes={};this.iconPassword="visibility";this.onInput=t=>{const i=t.target;if(i){this.value=i.value\|\|""}this.wcsInput.emit(t)};this.onBlur=t=>{this.hasFocus=false;this.focusChanged();if(this.fireFocusEvents){this.wcsBlur.emit(t)}};this.onFocus=t=>{this.hasFocus=true;this.focusChanged();if(this.fireFocusEvents){this.wcsFocus.emit(t)}};this.onKeydown=t=>{if(this.shouldClearOnEdit()){if(this.didBlurAfterEdit&&this.hasValue()&&t.key!=="Enter"){this.clearTextInput()}this.didBlurAfterEdit=false}};this.clearTextInput=t=>{if(this.clearInput&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation();this.setFocus()}this.value="";if(this.nativeInput){this.nativeInput.value=""}};this.fireFocusEvents=true;this.hasFocus=false;this.passwordReveal=false;this.accept=undefined;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.clearInput=false;this.clearOnEdit=undefined;this.debounce=0;this.prefixLabel=undefined;this.suffixLabel=undefined;this.disabled=false;this.enterkeyhint=undefined;this.size="m";this.icon=undefined;this.inputmode=undefined;this.max=undefined;this.maxlength=undefined;this.min=undefined;this.minlength=undefined;this.multiple=undefined;this.name=this.inputId;this.pattern=undefined;this.placeholder=undefined;this.readonly=false;this.required=false;this.spellcheck=false;this.state="initial";this.step=undefined;this.type="text";this.value=""}debounceChanged(){this.wcsChange=n(this.wcsChange,this.debounce)}valueChanged(){var t;this.wcsChange.emit({value:(t=this.value)===null\|\|t===void 0?void 0:t.toString()})}componentWillLoad(){this.inheritedAttributes=a(this.el,["aria-label","tabindex","title"]);if(!d(this.size)){console.error(`Invalid size value for wcs-input : "${this.size}". Must be one of "${o.join(", ")}"`);this.size="m"}}connectedCallback(){this.debounceChanged();{document.dispatchEvent(new CustomEvent("wcsInputDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("wcsInputDidUnload",{detail:this.el}))}}async setFocus(){if(this.nativeInput){this.nativeInput.focus()}}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}shouldClearOnEdit(){const{type:t,clearOnEdit:i}=this;return i===undefined?t==="password":i}getValue(){return typeof this.value==="number"?this.value.toString():(this.value\|\|"").toString()}focusChanged(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}}hasValue(){return this.getValue().length>0}passwordRevealIconClick(){this.passwordReveal=!this.passwordReveal}onPasswordRevealChange(){this.iconPassword=this.passwordReveal?"visibility_off":"visibility"}render(){const t=this.getValue();const i=this.inputId+"-lbl";const e=h(this.el);if(e){e.id=i}return s(r,{"aria-disabled":this.disabled?"true":null,"data-has-prefix":!!this.prefixLabel,"data-has-suffix":!!this.suffixLabel},this.prefixLabel?s("span",{class:"prefix",part:"prefix"},this.prefixLabel):null,this.icon?s("wcs-mat-icon",{icon:this.icon,size:"m"}):null,s("input",Object.assign({class:"native-input",ref:t=>this.nativeInput=t,"aria-labelledby":e?i:null,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalize,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder\|\|"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,type:this.passwordReveal?"text":this.type,value:t,onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,onKeyDown:this.onKeydown},this.inheritedAttributes)),this.type==="password"?s("wcs-mat-icon",{class:"toggle_password",icon:this.iconPassword,size:"m",onClick:()=>this.passwordRevealIconClick()}):null,this.suffixLabel?s("span",{class:"suffix",part:"suffix"},this.suffixLabel):null)}static get delegatesFocus(){return true}get el(){return e(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"],passwordReveal:["onPasswordRevealChange"]}}};let u=0;l.style=c;export{l as wcs_input};
2	+ //# sourceMappingURL=p-d2da0c9f.entry.js.map

package/dist/wcs/p-d2da0c9f.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["WcsInputSizeValues","isWcsInputSize","size","includes","inputCss","Input","this","inputId","inputIds","didBlurAfterEdit","inheritedAttributes","iconPassword","onInput","ev","input","target","value","wcsInput","emit","onBlur","hasFocus","focusChanged","fireFocusEvents","wcsBlur","onFocus","wcsFocus","onKeydown","shouldClearOnEdit","hasValue","key","clearTextInput","clearInput","readonly","disabled","preventDefault","stopPropagation","setFocus","nativeInput","debounceChanged","wcsChange","debounceEvent","debounce","valueChanged","_a","toString","componentWillLoad","inheritAttributes","el","console","error","join","connectedCallback","document","dispatchEvent","CustomEvent","detail","disconnectedCallback","async","focus","blur","getInputElement","Promise","resolve","type","clearOnEdit","undefined","getValue","length","passwordRevealIconClick","passwordReveal","onPasswordRevealChange","render","labelId","label","findItemLabel","id","h","Host","prefixLabel","suffixLabel","class","part","icon","Object","assign","ref","accept","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","min","max","minLength","minlength","maxLength","maxlength","multiple","name","pattern","placeholder","readOnly","required","spellcheck","step","onKeyDown","onClick"],"sources":["./src/components/input/input-interface.ts","./src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","./src/components/input/input.tsx"],"sourcesContent":["// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nimport { WcsSize } from '../../shared-types';\n\nexport type AutocompleteTypes = (\n | 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix'\n | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization'\n | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2'\n | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name'\n | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount'\n | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local'\n | 'tel-extension' | 'impp' | 'url' | 'photo');\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local' | 'file';\n\n\nexport const WcsInputSizeValues = ['s', 'm', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsInputSize = Extract<WcsSize, typeof WcsInputSizeValues[number]>;\n\nexport function isWcsInputSize(size: string): size is WcsInputSize {\n // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n return WcsInputSizeValues.includes(size);\n}\n\nexport interface InputChangeEventDetail {\n value: string | undefined | null;\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n --wcs-input-icon-color: var(--wcs-text-medium);\n --wcs-internal-input-border-radius-left: var(--wcs-input-border-radius-left, var(--wcs-border-radius));\n --wcs-internal-input-border-radius-right: var(--wcs-input-border-radius-right, var(--wcs-border-radius));\n --wcs-internal-input-border-width: 2px;\n display: flex;\n width: 100%;\n height: var(--wcs-input-host-height);\n box-sizing: border-box;\n border-radius: var(--wcs-internal-input-border-radius-left) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-left);\n background-color: var(--wcs-light);\n border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n background-clip: padding-box;\n\n ::placeholder {\n font-weight: 400;\n font-style: italic;\n }\n\n input {\n overflow: hidden;\n min-height: var(--wcs-size-xs);\n width: 100%;\n background-color: transparent;\n font-family: var(--wcs-font-sans-serif);\n color: var(--wcs-primary);\n font-weight: var(--wcs-font-weight-form-value) !important;\n border: none;\n padding: 0 calc(var(--wcs-padding) - var(--wcs-internal-input-border-width));\n font-size: var(--wcs-input-font-size, 1rem);\n line-height: 1.5;\n }\n\n input:focus {\n box-shadow: none;\n outline: 0;\n }\n\n wcs-mat-icon {\n position: relative;\n margin-left: 8px;\n margin-right: -8px;\n }\n\n .toggle_password {\n cursor: pointer;\n margin-left: -8px;\n margin-right: 8px;\n }\n\n\n .prefix, .suffix {\n color: var(--wcs-white);\n display: flex;\n white-space: nowrap;\n align-items: center;\n font-size: var(--wcs-input-font-size, 1rem);\n padding: 0 calc(var(--wcs-padding) / 2);\n font-weight: var(--wcs-font-weight-form-value) !important;\n background-color: var(--wcs-text-disabled);\n }\n\n .prefix {\n border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n margin: calc(-1 * var(--wcs-internal-input-border-width)) 0 calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width));\n border-left: solid var(--wcs-internal-input-border-width) transparent;\n border-top: solid var(--wcs-internal-input-border-width) transparent;\n border-bottom: solid var(--wcs-internal-input-border-width) transparent;\n }\n\n .suffix {\n border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n margin: calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) 0px;\n border-right: solid var(--wcs-internal-input-border-width) transparent;\n border-top: solid var(--wcs-internal-input-border-width) transparent;\n border-bottom: solid var(--wcs-internal-input-border-width) transparent;\n }\n}\n\n:host([size=l]) {\n --wcs-input-host-height: var(--wcs-size-l);\n --wcs-input-font-size: 1.0625rem;\n}\n\n:host([size=m]) { // Default\n --wcs-input-host-height: var(--wcs-size-m);\n --wcs-input-font-size: 1rem;\n}\n\n:host([size=s]) {\n --wcs-input-host-height: var(--wcs-size-s);\n --wcs-input-font-size: 0.9375rem;\n}\n\n:host([state=error]) {\n border-color: var(--wcs-red) !important;\n}\n\n:host([data-has-prefix]) {\n input {\n padding-left: calc(var(--wcs-padding) / 2);\n }\n}\n\n:host([data-has-suffix]) {\n input {\n padding-left: calc(var(--wcs-padding) / 2);\n }\n}\n\n:host([disabled]) {\n input {\n color: var(--wcs-text-disabled);\n cursor: not-allowed;\n }\n\n .prefix, .suffix {\n color: var(--wcs-light);\n }\n}\n\n:host(:focus-within) {\n border: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n\n .prefix {\n border-left: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n border-top: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n border-bottom: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n }\n\n .suffix {\n border-right: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n border-top: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n border-bottom: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n }\n\n wcs-mat-icon {\n color: var(--wcs-primary);\n }\n}\n","import {\n Build, Component,\n ComponentInterface, Element, Event, EventEmitter, h, Host, Method, Prop,\n State, Watch\n} from '@stencil/core';\nimport { debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers';\nimport {\n AutocompleteTypes, InputChangeEventDetail, isWcsInputSize, TextFieldTypes, WcsInputSize, WcsInputSizeValues\n} from './input-interface';\n\n/**\n * Mainly inspired from Ionic Input Component\n */\n@Component({\n tag: 'wcs-input',\n styleUrl: 'input.scss',\n shadow: {delegatesFocus: true},\n})\nexport class Input implements ComponentInterface {\n private nativeInput?: HTMLInputElement;\n private inputId = `wcs-input-${inputIds++}`;\n private didBlurAfterEdit = false;\n private inheritedAttributes: { [k: string]: any } = {};\n private iconPassword = \"visibility\";\n\n\n /**\n * This is required for a WebKit bug which requires us to\n * blur and focus an input to properly focus the input in\n * an item with delegatesFocus. It will no longer be needed\n * with iOS 14.\n *\n * @internal\n */\n @Prop() fireFocusEvents = true;\n\n @State() private hasFocus = false;\n\n @State() private passwordReveal = false;\n\n @Element() private el!: HTMLElement;\n\n /**\n * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n */\n @Prop() accept?: string;\n\n /**\n * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n */\n @Prop() autocapitalize = 'off';\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: AutocompleteTypes = 'off';\n\n /**\n * Whether auto correction should be enabled when the user is entering/editing the text value.\n */\n @Prop() autocorrect: 'on' | 'off' = 'off';\n\n /**\n * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n */\n @Prop() autofocus = false;\n\n /**\n * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n */\n @Prop() clearInput = false;\n\n /**\n * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n */\n @Prop() clearOnEdit?: boolean;\n\n /**\n * Set the amount of time, in milliseconds, to wait to trigger the `wcsChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.\n */\n @Prop() debounce = 0;\n\n /**\n * Prefix displayed before the text field contents. This is not included in the value.\n */\n @Prop() prefixLabel: string;\n\n /**\n * Suffix displayed after the text field contents. This is not included in the value.\n */\n @Prop() suffixLabel: string;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.wcsChange = debounceEvent(this.wcsChange, this.debounce);\n }\n\n /**\n * If `true`, the user cannot interact with the input.\n */\n @Prop() disabled = false;\n\n /**\n * A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n */\n @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n /**\n * Specify the size (height) of the input.\n */\n @Prop({reflect: true}) size: WcsInputSize = 'm';\n\n /**\n * Name of the material icon to add to the input\n */\n @Prop() icon: string;\n\n /**\n * A hint to the browser for which keyboard to display.\n * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n */\n @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n /**\n * The maximum value, which must not be less than its minimum (min attribute) value.\n */\n @Prop() max?: string;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n */\n @Prop() maxlength?: number;\n\n /**\n * The minimum value, which must not be greater than its maximum (max attribute) value.\n */\n @Prop() min?: string;\n\n /**\n * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n */\n @Prop() minlength?: number;\n\n /**\n * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n */\n @Prop() multiple?: boolean;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.\n */\n @Prop() pattern?: string;\n\n /**\n * Instructional text that shows before the input has a value.\n */\n @Prop() placeholder?: string | null;\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop() readonly = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required = false;\n\n /**\n * If `true`, the element will have its spelling and grammar checked.\n */\n @Prop() spellcheck = false;\n\n /**\n * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error' state if the data given by the user is not valid.\n */\n @Prop({reflect: true}) state: 'initial' | 'error' = 'initial';\n\n /**\n * Works with the min and max attributes to limit the increments at which a value can be set.\n * Possible values are: `\"any\"` or a positive floating point number.\n */\n @Prop() step?: string;\n\n /**\n * The type of control to display. The default type is text.\n */\n @Prop() type: TextFieldTypes = 'text';\n\n /**\n * The value of the input.\n */\n @Prop({mutable: true}) value?: string | number | null = '';\n\n /**\n * Emitted when a keyboard input occurred.\n */\n @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input has focus.\n */\n @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n this.wcsChange.emit({value: this.value?.toString()});\n }\n\n componentWillLoad() {\n this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);\n\n if (!isWcsInputSize(this.size)) {\n console.error(`Invalid size value for wcs-input : \"${this.size}\". Must be one of \"${WcsInputSizeValues.join(', ')}\"`);\n this.size = \"m\"; // Default fallback value\n }\n }\n\n connectedCallback() {\n this.debounceChanged();\n if (Build.isBrowser) {\n document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n detail: this.el\n }));\n }\n }\n\n disconnectedCallback() {\n if (Build.isBrowser) {\n document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n detail: this.el\n }));\n }\n }\n\n /**\n * @deprecated use the native focus method instead\n *\n * Sets focus on the native `input` in `wcs-input`. Use this method instead of the global\n * `input.focus()`.\n */\n @Method()\n async setFocus() {\n if (this.nativeInput) {\n this.nativeInput.focus();\n }\n }\n\n /**\n * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n * `input.blur()`.\n * @internal\n */\n @Method()\n async setBlur() {\n if (this.nativeInput) {\n this.nativeInput.blur();\n }\n }\n\n /**\n * Returns the native `<input>` element used under the hood.\n */\n @Method()\n getInputElement(): Promise<HTMLInputElement> {\n return Promise.resolve(this.nativeInput!);\n }\n\n private shouldClearOnEdit() {\n const {type, clearOnEdit} = this;\n return (clearOnEdit === undefined)\n ? type === 'password'\n : clearOnEdit;\n }\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() :\n (this.value || '').toString();\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n this.wcsInput.emit(ev as KeyboardEvent);\n }\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n this.focusChanged();\n\n if (this.fireFocusEvents) {\n this.wcsBlur.emit(ev);\n }\n }\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusChanged();\n\n if (this.fireFocusEvents) {\n this.wcsFocus.emit(ev);\n }\n }\n\n private onKeydown = (ev: KeyboardEvent) => {\n if (this.shouldClearOnEdit()) {\n // Did the input value change after it was blurred and edited?\n // Do not clear if user is hitting Enter to submit form\n if (this.didBlurAfterEdit && this.hasValue() && ev.key !== 'Enter') {\n // Clear the input\n this.clearTextInput();\n }\n\n // Reset the flag\n this.didBlurAfterEdit = false;\n }\n }\n\n private clearTextInput = (ev?: Event) => {\n if (this.clearInput && !this.readonly && !this.disabled && ev) {\n ev.preventDefault();\n ev.stopPropagation();\n\n // Attempt to focus input again after pressing clear button\n this.setFocus();\n }\n\n this.value = '';\n\n /**\n * This is needed for clearOnEdit\n * Otherwise the value will not be cleared\n * if user is inside the input\n */\n if (this.nativeInput) {\n this.nativeInput.value = '';\n }\n }\n\n private focusChanged() {\n // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {\n this.didBlurAfterEdit = true;\n }\n }\n\n private hasValue(): boolean {\n return this.getValue().length > 0;\n }\n\n private passwordRevealIconClick(): void {\n this.passwordReveal = !this.passwordReveal;\n }\n\n @Watch('passwordReveal')\n onPasswordRevealChange(): void {\n this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n }\n\n render() {\n const value = this.getValue();\n const labelId = this.inputId + '-lbl';\n const label = findItemLabel(this.el);\n if (label) {\n label.id = labelId;\n }\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n data-has-prefix={!!this.prefixLabel}\n data-has-suffix={!!this.suffixLabel}\n >\n {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n <input\n class=\"native-input\"\n ref={input => this.nativeInput = input}\n aria-labelledby={label ? labelId : null}\n disabled={this.disabled}\n accept={this.accept}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n min={this.min}\n max={this.max}\n minLength={this.minlength}\n maxLength={this.maxlength}\n multiple={this.multiple}\n name={this.name}\n pattern={this.pattern}\n placeholder={this.placeholder || ''}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n step={this.step}\n type={this.passwordReveal ? 'text' : this.type}\n value={value}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onKeyDown={this.onKeydown}\n {...this.inheritedAttributes}\n />\n {this.type === \"password\" ? (<wcs-mat-icon class=\"toggle_password\" icon={this.iconPassword} size=\"m\" onClick={() => this.passwordRevealIconClick()}></wcs-mat-icon>) : null}\n {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"],"mappings":"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"}

package/dist/wcs/p-d3f1cafe.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["fieldCss","Field","render","h","Host","name"],"sources":["./src/components/field/field.scss?tag=wcs-field&encapsulation=shadow","./src/components/field/field.tsx"],"sourcesContent":[":host{\n display: flex;\n flex-direction: column;\n margin-top: var(--wcs-base-margin);\n margin-bottom: calc(var(--wcs-base-margin) * 2);\n}\n::slotted([slot=label]) {\n font-size: 1rem;\n line-height: 1.375;\n font-weight: 500;\n margin-bottom: calc(var(--wcs-base-margin) / 2);\n color: var(--wcs-gray-light);\n}\n\n::slotted([slot=content]) {\n font-size: 1rem;\n font-weight: 400;\n color: var(--wcs-gray-light);\n}\n","import { Component, ComponentInterface, h, Host, } from '@stencil/core';\n\n@Component({\n tag: 'wcs-field',\n styleUrl: 'field.scss',\n shadow: true\n})\nexport class Field implements ComponentInterface {\n render() {\n return (\n <Host>\n <slot name=\"label\"/>\n <slot name=\"content\"/>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAW,sW,~~MCOJC~~,EAAK,M,yBACdC,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,QAAME,KAAK,UACXF,EAAA,QAAME,KAAK,Y"}
1	+ {"version":3,"names":["fieldCss","Field","render","h","Host","name"],"sources":["./src/components/field/field.scss?tag=wcs-field&encapsulation=shadow","./src/components/field/field.tsx"],"sourcesContent":[":host{\n display: flex;\n flex-direction: column;\n margin-top: var(--wcs-base-margin);\n margin-bottom: calc(var(--wcs-base-margin) * 2);\n}\n::slotted([slot=label]) {\n font-size: 1rem;\n line-height: 1.375;\n font-weight: 500;\n margin-bottom: calc(var(--wcs-base-margin) / 2);\n color: var(--wcs-gray-light);\n}\n\n::slotted([slot=content]) {\n font-size: 1rem;\n font-weight: 400;\n color: var(--wcs-gray-light);\n}\n","import { Component, ComponentInterface, h, Host, } from '@stencil/core';\n\n/*\n @slot label Label of the field\n * @slot content Content of the field\n */\n@Component({\n tag: 'wcs-field',\n styleUrl: 'field.scss',\n shadow: true\n})\nexport class Field implements ComponentInterface {\n render() {\n return (\n <Host>\n <slot name=\"label\"/>\n <slot name=\"content\"/>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAW,sW,MCWJC,EAAK,M,yBACdC,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,QAAME,KAAK,UACXF,EAAA,QAAME,KAAK,Y"}

package/dist/wcs/p-d6b3f742.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{h as t,r as e,c as i,H as s,g as a}from"./p-a2df3a49.js";const r=({step:e,checkOnComplete:i,complete:s,passed:a,active:r,first:o,disable:l,onClick:h})=>t("div",{class:"graphic-step","data-first":o},o?null:t("wcs-progress-bar",{value:a?100:0}),t("wcs-button",{style:{backgroundColor:"white"},shape:"round",onClick:t=>h(e),mode:(r\|\|s)&&!e.disable?"plain":"stroked",disabled:l},n(e.button,i,s,r)));const n=(e,i,s,a)=>{if(i&&s&&!a){return t("wcs-mat-icon",{size:"m",icon:"done",family:"outlined"})}switch(e.kind){case"Icon":return t("wcs-mat-icon",{size:"m",icon:e.iconName,family:e.family?e.family:"outlined"});case"Text":return e.text}};const o=":host{display:block}:host .steps{display:flex;flex-direction:row;flex:1}:host .graphic-step{display:flex;flex-direction:row;flex:1;align-items:center}:host .graphic-step[data-first]{flex:0}:host wcs-progress-bar{--wcs-internal-progress-bar-border-radius:0;flex:1;margin:0 -1px}:host .label-container{justify-content:space-between;display:flex;flex-direction:row;margin-top:var(--wcs-base-margin)}:host .label-container>{width:100%;text-align:center;flex:1;color:var(--wcs-text-medium);font-weight:500}:host .label-container>[data-disable]{color:var(--wcs-text-light)}:host .label-container>[data-current]{color:var(--wcs-primary)}:host .label-container>div[data-first]{margin-left:20px;text-align:left;flex:0.5}:host .label-container>div[data-first]>span{margin-left:-20px}:host .label-container>div[data-last]{margin-right:20px;text-align:right;flex:0.5}:host .label-container>div[data-last]>span{margin-right:-20px}";const l=class{constructor(t){e(this,t);this.wcsHorizontalStepClick=i(this,"wcsHorizontalStepClick",7);this.currentStep=0;this.steps=undefined;this.mode="nonLinear";this.checkOnComplete=undefined;this.internalCurrentStep=undefined}componentWillLoad(){this.internalCurrentStep=this.currentStep;if(this.steps.length<1){throw new Error("You must add at least one step")}}onCurrentStepChange(t,e){if(this.internalCurrentStep!==undefined){const i=Math.abs(e-t);this.el.style.setProperty("--wcs-progress-bar-animation-duration",375/i+"ms");if(t!==e){for(let s=0;s<i;s++){setTimeout((()=>{this.internalCurrentStep-=e-t>0?1:-1;if(s===i-1){this.el.style.removeProperty("--wcs-progress-bar-animation-duration")}}),s(375/i))}}}}async previous(){this.navigateToIndex(this.internalCurrentStep-1,"backward")}async next(){this.navigateToIndex(this.internalCurrentStep+1,"forward")}navigateToIndex(t,e){var i,s;if(t>=0&&t<=this.steps.length-1){if(((i=this.steps[t])===null\|\|i===void 0?void 0:i.complete)\|\|((s=this.steps[t])===null\|\|s===void 0?void 0:s.disable)){this.navigateToIndex(t+(e==="forward"?1:-1),e)}else{this.currentStep=t}}}render(){return t(s,null,t("div",{class:"steps"},this.steps.map(((e,i)=>t(r,{step:e,passed:i<=this.internalCurrentStep,checkOnComplete:this.checkOnComplete,complete:this.isComplete(e,i),active:i===this.internalCurrentStep,first:i===0,disable:this.isDisable(e,i),onClick:t=>this.wcsHorizontalStepClick.emit({step:t,index:i})})))),this.renderLabels())}isComplete(t,e){return e<=this.internalCurrentStep\|\|t.complete}renderLabels(){if(this.steps.map((t=>t.text)).every((t=>!t))){return null}else{return t("div",{class:"label-container"},this.steps.map(((e,i)=>t("div",{"data-first":i===0,"data-current":i===this.internalCurrentStep&&!e.disable,"data-disable":this.isDisable(e,i),"data-last":i===this.steps.length-1},t("span",null,e.text)))))}}isDisable(t,e){return t.disable\|\|this.mode==="linear"&&(!this.isNextPossibleStep(e)&&this.internalCurrentStep<e)}isNextPossibleStep(t){var e;if(t===0)return true;if(((e=this.steps[t-1])===null\|\|e===void 0?void 0:e.disable)\|\|this.previousStepIsCompleteAndNotActive(t))return this.isNextPossibleStep(t-1);return this.internalCurrentStep===t-1}previousStepIsCompleteAndNotActive(t){var e;return((e=this.steps[t-1])===null\|\|e===void 0?void 0:e.complete)&&t-1!==this.internalCurrentStep}get el(){return a(this)}static get watchers(){return{currentStep:["onCurrentStepChange"]}}};l.style=o;export{l as wcs_horizontal_stepper};
2	+ //# sourceMappingURL=p-d6b3f742.entry.js.map

package/dist/wcs/p-d6b3f742.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["HorizontalStep","step","checkOnComplete","complete","passed","active","first","disable","onClick","h","class","value","style","backgroundColor","shape","_","mode","disabled","getButtonContent","button","stepButton","size","icon","family","kind","iconName","horizontalStepperCss","HorizontalStepper","componentWillLoad","this","internalCurrentStep","currentStep","steps","length","Error","onCurrentStepChange","newValue","oldValue","undefined","stepInterval","Math","abs","el","setProperty","i","setTimeout","removeProperty","async","navigateToIndex","index","direction","_a","_b","render","Host","map","isComplete","isDisable","wcsHorizontalStepClick","emit","renderLabels","s","text","every","isNextPossibleStep","previousStepIsCompleteAndNotActive"],"sources":["./src/components/horizontal-stepper/horizontal-step.tsx","./src/components/horizontal-stepper/horizontal-stepper.scss?tag=wcs-horizontal-stepper&encapsulation=shadow","./src/components/horizontal-stepper/horizontal-stepper.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { HorizontalStepConfig, StepButton } from './horizontal-stepper-interface';\n\ninterface HorizontalStepProps {\n step: HorizontalStepConfig;\n checkOnComplete: boolean;\n complete: boolean;\n passed: boolean;\n active: boolean;\n first: boolean;\n disable: boolean;\n onClick: (step: HorizontalStepConfig) => void;\n}\n\nexport const HorizontalStep: FunctionalComponent<HorizontalStepProps> = (\n {\n step,\n checkOnComplete,\n complete,\n passed,\n active,\n first,\n disable,\n onClick\n }) => {\n return (\n <div class=\"graphic-step\" data-first={first}>\n {first ? null : (<wcs-progress-bar value={passed ? 100 : 0}></wcs-progress-bar>)}\n <wcs-button style={{'backgroundColor': 'white'}}\n shape=\"round\"\n onClick={_ => onClick(step)}\n mode={(active || complete) && !step.disable ? 'plain' : 'stroked'}\n disabled={disable}>{getButtonContent(step.button, checkOnComplete, complete, active)}</wcs-button>\n </div>\n );\n}\n\nconst getButtonContent = (stepButton: StepButton, checkOnComplete: boolean, complete: boolean, active: boolean) => {\n if (checkOnComplete && complete && !active) {\n return (<wcs-mat-icon size=\"m\" icon=\"done\" family=\"outlined\"></wcs-mat-icon>);\n }\n switch (stepButton.kind) {\n case 'Icon':\n return (<wcs-mat-icon size=\"m\" icon={stepButton.iconName}\n family={stepButton.family ? stepButton.family : 'outlined'}></wcs-mat-icon>);\n case 'Text':\n return (stepButton.text);\n }\n}\n\n",":host {\n display: block;\n\n .steps {\n display: flex;\n flex-direction: row;\n flex: 1;\n }\n\n .graphic-step {\n display: flex;\n flex-direction: row;\n flex: 1;\n align-items: center;\n }\n\n .graphic-step[data-first] {\n flex: 0;\n }\n\n wcs-progress-bar {\n --wcs-internal-progress-bar-border-radius: 0;\n flex: 1;\n margin: 0 -1px;\n }\n\n .label-container {\n justify-content: space-between;\n display: flex;\n flex-direction: row;\n margin-top: var(--wcs-base-margin);\n }\n\n .label-container > * {\n width: 100%;\n text-align: center;\n flex: 1;\n color: var(--wcs-text-medium);\n font-weight: 500;\n\n }\n\n .label-container > *[data-disable] {\n color: var(--wcs-text-light);\n }\n\n .label-container > *[data-current] {\n color: var(--wcs-primary);\n }\n\n .label-container > div[data-first] {\n margin-left: 20px;\n text-align: left;\n flex: 0.5;\n }\n\n .label-container > div[data-first] > span {\n margin-left: -20px;\n }\n\n .label-container > div[data-last] {\n margin-right: 20px;\n text-align: right;\n flex: 0.5;\n }\n\n .label-container > div[data-last] > span {\n margin-right: -20px;\n }\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch\n} from '@stencil/core';\nimport { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode } from './horizontal-stepper-interface';\nimport { HorizontalStep } from './horizontal-step';\n\n@Component({\n tag: 'wcs-horizontal-stepper',\n styleUrl: 'horizontal-stepper.scss',\n shadow: true,\n})\nexport class HorizontalStepper implements ComponentInterface {\n @Element() private el!: HTMLWcsHorizontalStepperElement;\n /**\n * index of the active step. The index corresponds to the index of the step in the 'steps' list\n */\n @Prop({mutable: true}) currentStep: number = 0;\n /**\n * steps to display\n */\n @Prop() steps: HorizontalStepConfig[];\n /**\n * Specifies if the stepper is in linear mode (the user can only click on the next step)\n * or non-linear (the user can click on any step)\n */\n @Prop() mode: HorizontalStepperMode = 'nonLinear';\n /**\n * Specifies whether a check should be displayed when a step is passed.\n */\n @Prop() checkOnComplete: boolean;\n /**\n * Emits when the user selects a new step.\n */\n @Event() wcsHorizontalStepClick!: EventEmitter<HorizontalStepClickEvent>\n @State() private internalCurrentStep;\n\n componentWillLoad(): Promise<void> | void {\n this.internalCurrentStep = this.currentStep;\n if (this.steps.length < 1) {\n throw new Error('You must add at least one step');\n }\n }\n\n @Watch('currentStep')\n // @ts-ignore\n private onCurrentStepChange(newValue: number, oldValue: number) {\n //Check if the function is called before the component has finished its initialization in which case we do nothing\n if (this.internalCurrentStep !== undefined) {\n const stepInterval = Math.abs(oldValue - newValue);\n this.el.style.setProperty('--wcs-progress-bar-animation-duration', 375 / stepInterval + 'ms');\n if (newValue !== oldValue) {\n for (let i = 0; i < stepInterval; i++) {\n setTimeout(() => {\n this.internalCurrentStep -= (oldValue - newValue) > 0 ? 1 : -1;\n if (i === stepInterval - 1) {\n this.el.style.removeProperty('--wcs-progress-bar-animation-duration');\n }\n }, (i * (375 / stepInterval)));\n }\n }\n }\n }\n\n @Method()\n async previous() {\n this.navigateToIndex(this.internalCurrentStep - 1, 'backward');\n }\n\n @Method()\n async next() {\n this.navigateToIndex(this.internalCurrentStep + 1, 'forward');\n }\n\n private navigateToIndex(index: number, direction: 'backward' | 'forward'): void {\n if (index >= 0 && index <= this.steps.length - 1) {\n if (this.steps[index]?.complete || this.steps[index]?.disable) {\n this.navigateToIndex(index + (direction === 'forward' ? 1 : -1), direction)\n } else {\n this.currentStep = index;\n }\n }\n }\n\n render(): any {\n return (\n <Host>\n <div class=\"steps\">\n {this.steps.map((step, index) =>\n (<HorizontalStep step={step}\n passed={index <= this.internalCurrentStep}\n checkOnComplete={this.checkOnComplete}\n complete={this.isComplete(step, index)}\n active={index === this.internalCurrentStep}\n first={index === 0}\n disable={this.isDisable(step, index)}\n onClick={step => this.wcsHorizontalStepClick.emit({step, index})}\n />\n )\n )}\n </div>\n {this.renderLabels()}\n </Host>\n );\n }\n\n private isComplete(step: HorizontalStepConfig, index: number) {\n return index <= this.internalCurrentStep || step.complete;\n }\n\n private renderLabels() {\n if (this.steps.map(s => s.text).every(s => !s)) {\n return null;\n } else {\n return <div class=\"label-container\">\n {this.steps.map((step, index) =>\n (<div data-first={index === 0} data-current={index === this.internalCurrentStep && !step.disable}\n data-disable={this.isDisable(step, index)} data-last={index === this.steps.length - 1}>\n <span>{step.text}</span></div>)\n )}\n </div>;\n }\n }\n\n private isDisable(step, index) {\n return step.disable || (this.mode === 'linear' && (!this.isNextPossibleStep(index) && this.internalCurrentStep < index));\n }\n\n private isNextPossibleStep(index) {\n if (index === 0) return true;\n if (this.steps[index - 1]?.disable || this.previousStepIsCompleteAndNotActive(index)) return this.isNextPossibleStep(index - 1);\n return this.internalCurrentStep === index - 1;\n }\n\n private previousStepIsCompleteAndNotActive(index) {\n return this.steps[index - 1]?.complete && index - 1 !== this.internalCurrentStep;\n }\n}\n"],"mappings":"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"}

package/dist/wcs/p-ee453b6e.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as L,h as M,H as w}from"./p-a2df3a49.js";const j=":host{display:block;background-color:var(--wcs-gray)}.container{height:32px;align-items:center;justify-content:space-between;color:var(--wcs-white);font-size:14px;display:flex;max-width:var(--wcs-com-content-max-width);margin:0 auto}.container #sncf-logo{height:32px;margin-right:20px}.container .container-left{display:flex;align-items:center}";const s=class{constructor(M){L(this,M);this.text=undefined;this.show=false}render(){return M(w,null,M("div",{class:"container"},M("div",{class:"container-left"},M("img",{src:u,id:"sncf-logo",alt:"Logo SNCF"}),M("span",null,this.text)),M("div",{class:"menu"},M("slot",null))))}};const u="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVy"+"c2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5"+"rIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHX0dSQURJRU5UIiBncmFkaW"+"VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIxNiIgeDI9IjMxLjk1OTMiIHkyPSIxNiI+DQoJCTxzdG9wICBvZmZzZXQ9IjAiIHN0e"+"WxlPSJzdG9wLWNvbG9yOiM4MzJGNzAiLz4NCgkJPHN0b3AgIG9mZnNldD0iMC4yNDcyIiBzdHlsZT0ic3RvcC1jb2xvcjojQUMyODdDIi8+DQoJCTxz"+"dG9wICBvZmZzZXQ9IjAuODE0NiIgc3R5bGU9InN0b3AtY29sb3I6I0RGMjUzMCIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2x"+"vcjojREYyNTMwIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cGF0aCBmaWxsPSJ1cmwoI1NWR19HUkFESUVOVCkiIGQ9Ik0wLjYsNy43QzAuMiw3Lj"+"csMCw3LjgsMCw4LjJ2MTUuN2MwLDAuMywwLjIsMC41LDAuNSwwLjVoMjhjMC4zLDAsMC41LDAsMC42LTAuNGMwLDAsMi44LTguOSwyLjktOSBjMC4xL"+"TAuMywwLTAuNS0wLjMtMC43QzIyLjYsOC41LDguOSw3LjYsMi44LDcuNkMxLjksNy42LDEuMSw3LjYsMC42LDcuN3oiLz4NCgk8cGF0aCBmaWxsPSIj"+"RkZGRkZGIiBkPSJNNi40LDE3LjdjLTEtMC41LTEuNy0wLjgtMS42LTEuM0M1LDE1LjgsNi4xLDE1LjYsNywxNS42YzAuNSwwLDAuOCwwLjEsMS4yLDA"+"uMmwwLjMtMS4xIGMtMC41LTAuMS0wLjgtMC4xLTEuNC0wLjFjLTEuOSwwLTMuNiwwLjUtNCwxLjZjLTAuNSwxLjMsMC45LDIsMi4yLDIuNmMxLDAuNS"+"wxLjgsMC45LDEuNSwxLjVjLTAuMiwwLjUtMC45LDAuNy0yLDAuNyBjLTAuOSwwLTItMC4zLTIuOS0wLjdsLTAuNSwxLjFjMC42LDAuMywyLDAuNywzL"+"jEsMC43YzIuMSwwLDMuNS0wLjUsNC4xLTEuN0M5LjMsMTkuMSw3LjcsMTguMyw2LjQsMTcuN3oiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJN"+"OS4zLDE5LjZDOS4zLDE5LjcsOS4zLDE5LjcsOS4zLDE5LjZjMC4xLDAsMC4xLDAsMC4xLDBjMCwwLDEtMy4yLDEtMy4yYzEuMSwxLjUsMi4xLDMuNSw"+"yLjcsNS42aDEuNyBsMC45LTIuN2MwLDAsMCwwLDAuMSwwYzAsMCwwLDAsMC4xLDBjMC4zLDEuNywxLjksMi44LDQuMywyLjhjMS41LDAsMi45LTAuNC"+"wzLjItMC42bDAuOS0yLjhoMy40bDAuMy0xLjFoLTMuNGwwLjYtMS44aDQuMSBsMC40LTEuMWgtNS43bC0xLjksNi4xYy0wLjQsMC4xLTAuOSwwLjItM"+"S41LDAuMmMtMS4xLDAtMi4xLTAuMy0yLjYtMC45Yy0wLjQtMC41LTAuNS0xLTAuNC0xLjdjMC4yLTEuNiwxLjgtMi42LDMuOC0yLjYgYzAuNCwwLDAu"+"OSwwLDEuMywwLjFsMC40LTEuMmMtMC41LTAuMS0xLjEtMC4xLTEuNy0wLjFjLTEuOCwwLTMuNCwwLjYtNC40LDEuN2MwLDAtMC4xLDAtMC4xLDBjMCw"+"wLTAuMSwwLDAsMGwwLjUtMS42aC0xLjUgTDE0LDE5LjhjLTAuNS0xLjUtMS42LTMuNS0yLjktNS4xSDkuNWwtMS4yLDMuN0M4LjksMTguOCw5LjEsMT"+"kuMiw5LjMsMTkuNnoiLz4NCjwvc3ZnPg0K";s.style=j;export{s as wcs_galactic};
2	+ //# sourceMappingURL=p-ee453b6e.entry.js.map

package/dist/wcs/p-ee453b6e.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["galacticCss","Galactic","render","h","Host","class","src","SNCF_BASE64_SVG_LOGO","id","alt","this","text"],"sources":["./src/components/galactic/galactic.scss?tag=wcs-galactic&encapsulation=shadow","./src/components/galactic/galactic.tsx"],"sourcesContent":["\n:host {\n display: block;\n background-color: var(--wcs-gray);\n}\n\n.container {\n height: 32px;\n align-items: center;\n justify-content: space-between;\n color: var(--wcs-white);\n font-size: 14px;\n display: flex;\n max-width: var(--wcs-com-content-max-width);\n margin: 0 auto;\n\n #sncf-logo {\n height: 32px;\n margin-right: 20px;\n }\n\n .container-left {\n display: flex;\n align-items: center;\n }\n}\n\n","import { Component, ComponentInterface, Host, h, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'wcs-galactic',\n styleUrl: 'galactic.scss',\n shadow: true\n})\nexport class Galactic implements ComponentInterface {\n /** Text to display in the bar */\n @Prop() text: string;\n @State() show: boolean = false;\n\n\n render(): any {\n return (<Host>\n <div class=\"container\">\n <div class=\"container-left\">\n <img\n src={SNCF_BASE64_SVG_LOGO}\n id=\"sncf-logo\"\n alt=\"Logo SNCF\"/>\n <span>{this.text}</span>\n </div>\n <div class=\"menu\">\n <slot/>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n\nconst SNCF_BASE64_SVG_LOGO = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVy' +\n 'c2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5' +\n 'rIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHX0dSQURJRU5UIiBncmFkaW' +\n 'VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIxNiIgeDI9IjMxLjk1OTMiIHkyPSIxNiI+DQoJCTxzdG9wICBvZmZzZXQ9IjAiIHN0e' +\n 'WxlPSJzdG9wLWNvbG9yOiM4MzJGNzAiLz4NCgkJPHN0b3AgIG9mZnNldD0iMC4yNDcyIiBzdHlsZT0ic3RvcC1jb2xvcjojQUMyODdDIi8+DQoJCTxz' +\n 'dG9wICBvZmZzZXQ9IjAuODE0NiIgc3R5bGU9InN0b3AtY29sb3I6I0RGMjUzMCIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2x' +\n 'vcjojREYyNTMwIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cGF0aCBmaWxsPSJ1cmwoI1NWR19HUkFESUVOVCkiIGQ9Ik0wLjYsNy43QzAuMiw3Lj' +\n 'csMCw3LjgsMCw4LjJ2MTUuN2MwLDAuMywwLjIsMC41LDAuNSwwLjVoMjhjMC4zLDAsMC41LDAsMC42LTAuNGMwLDAsMi44LTguOSwyLjktOSBjMC4xL' +\n 'TAuMywwLTAuNS0wLjMtMC43QzIyLjYsOC41LDguOSw3LjYsMi44LDcuNkMxLjksNy42LDEuMSw3LjYsMC42LDcuN3oiLz4NCgk8cGF0aCBmaWxsPSIj' +\n 'RkZGRkZGIiBkPSJNNi40LDE3LjdjLTEtMC41LTEuNy0wLjgtMS42LTEuM0M1LDE1LjgsNi4xLDE1LjYsNywxNS42YzAuNSwwLDAuOCwwLjEsMS4yLDA' +\n 'uMmwwLjMtMS4xIGMtMC41LTAuMS0wLjgtMC4xLTEuNC0wLjFjLTEuOSwwLTMuNiwwLjUtNCwxLjZjLTAuNSwxLjMsMC45LDIsMi4yLDIuNmMxLDAuNS' +\n 'wxLjgsMC45LDEuNSwxLjVjLTAuMiwwLjUtMC45LDAuNy0yLDAuNyBjLTAuOSwwLTItMC4zLTIuOS0wLjdsLTAuNSwxLjFjMC42LDAuMywyLDAuNywzL' +\n 'jEsMC43YzIuMSwwLDMuNS0wLjUsNC4xLTEuN0M5LjMsMTkuMSw3LjcsMTguMyw2LjQsMTcuN3oiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJN' +\n 'OS4zLDE5LjZDOS4zLDE5LjcsOS4zLDE5LjcsOS4zLDE5LjZjMC4xLDAsMC4xLDAsMC4xLDBjMCwwLDEtMy4yLDEtMy4yYzEuMSwxLjUsMi4xLDMuNSw' +\n 'yLjcsNS42aDEuNyBsMC45LTIuN2MwLDAsMCwwLDAuMSwwYzAsMCwwLDAsMC4xLDBjMC4zLDEuNywxLjksMi44LDQuMywyLjhjMS41LDAsMi45LTAuNC' +\n 'wzLjItMC42bDAuOS0yLjhoMy40bDAuMy0xLjFoLTMuNGwwLjYtMS44aDQuMSBsMC40LTEuMWgtNS43bC0xLjksNi4xYy0wLjQsMC4xLTAuOSwwLjItM' +\n 'S41LDAuMmMtMS4xLDAtMi4xLTAuMy0yLjYtMC45Yy0wLjQtMC41LTAuNS0xLTAuNC0xLjdjMC4yLTEuNiwxLjgtMi42LDMuOC0yLjYgYzAuNCwwLDAu' +\n 'OSwwLDEuMywwLjFsMC40LTEuMmMtMC41LTAuMS0xLjEtMC4xLTEuNy0wLjFjLTEuOCwwLTMuNCwwLjYtNC40LDEuN2MwLDAtMC4xLDAtMC4xLDBjMCw' +\n 'wLTAuMSwwLDAsMGwwLjUtMS42aC0xLjUgTDE0LDE5LjhjLTAuNS0xLjUtMS42LTMuNS0yLjktNS4xSDkuNWwtMS4yLDMuN0M4LjksMTguOCw5LjEsMT' +\n 'kuMiw5LjMsMTkuNnoiLz4NCjwvc3ZnPg0K';\n"],"mappings":"kDAAA,MAAMA,EAAc,2V,MCOPC,EAAQ,M,uDAGQ,K,CAGzBC,SACI,OAAQC,EAACC,EAAI,KACLD,EAAA,OAAKE,MAAM,aACPF,EAAA,OAAKE,MAAM,kBACPF,EAAA,OACIG,IAAKC,EACLC,GAAG,YACHC,IAAI,cACRN,EAAA,YAAOO,KAAKC,OAEhBR,EAAA,OAAKE,MAAM,QACPF,EAAA,e,GASxB,MAAMI,EAAuB,6FACzB,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,sHACA,qC"}

package/dist/wcs/p-f386bb8b.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["comNavCss","WCS_COM_NAV_SUBMENU_TAG_NAME","ComNav","this","hasAlreadyRegisteredClickHandlerOnSlottedLink","mobileMenuIconClick","mobileMenuOpen","disconnectedCallback","_a","resizeObserver","disconnect","componentWillLoad","ResizeObserver","entry","cr","contentRect","paddingRight","right","width","paddingLeft","left","currentActiveSizing","observe","document","body","slottedNavigableItems","el","querySelectorAll","registerCloseHandlerForFocusOutEventOn","componentDidRender","registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag","mainSlot","shadowRoot","querySelector","assignedElements","filter","e","tagName","forEach","a","addEventListener","_","onClickOnFinalAction","onClickOnFinalActionCat","render","h","Host","class","appName","name","id","onClick"],"sources":["./src/components/com-nav/com-nav.scss?tag=wcs-com-nav&encapsulation=shadow","./src/components/com-nav/com-nav.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n display: block;\n position: relative;\n height: 75px;\n border-bottom: solid 1px var(--wcs-text-light);\n\n .container {\n padding: 0 var(--wcs-padding);\n height: 100%;\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n }\n\n .container-left {\n display: flex;\n height: 100%;\n align-items: center;\n flex-direction: row;\n }\n\n .container-right {\n display: flex;\n align-items: center;\n }\n\n .app-name {\n font-weight: 400;\n font-size: 1.5rem;\n line-height: 1.25;\n color: var(--wcs-gray);\n }\n\n .menu-bar {\n display: none;\n }\n\n ::slotted(a) {\n padding-top: calc(1.5 * var(--wcs-base-margin));\n padding-bottom: calc(1.5 * var(--wcs-base-margin));\n padding-left: calc(3 * var(--wcs-base-margin));\n display: flex;\n align-items: center;\n height: 100%;\n font-size: 16px;\n cursor: pointer;\n font-weight: 500;\n color: var(--wcs-gray);\n text-decoration: none;\n }\n\n ::slotted(a):after {\n font-family: icons;\n padding-left: var(--wcs-base-margin);\n font-size: 0.6rem;\n content: \"\\f107\";\n line-height: 1;\n box-sizing: border-box;\n }\n\n ::slotted(a:focus-visible) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n\n @supports not selector(::slotted(a:focus-visible)) {\n ::slotted(a:focus-within) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n }\n\n #mobile-menu-icon {\n height: 24px;\n padding-left: calc(2 * var(--wcs-base-margin));\n margin-left: var(--wcs-base-margin);\n border-left: solid 1px var(--wcs-text-light);\n }\n\n #mobile-menu-icon:after {\n font-family: icons;\n font-size: 24px;\n cursor: pointer;\n content: \"\\f198\";\n line-height: 1;\n box-sizing: border-box;\n }\n #mobile-menu-icon[data-mobile-open]:after {\n content: \"\\f129\";\n }\n .mobile-overlay {\n display: none;\n }\n\n .mobile-overlay[data-mobile-open] {\n padding-top: calc(2 * var(--wcs-base-margin));\n padding-bottom: calc(2 * var(--wcs-base-margin));\n position: relative;\n top: 0;\n left: 0;\n right: 0;\n display: block;\n z-index: 9999;\n background-color: var(--wcs-white);\n }\n}\n\n@media screen and (min-width: 576px) {\n :host {\n .container {\n margin: 0 auto;\n max-width: var(--wcs-com-content-max-width);\n }\n\n .menu-bar {\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: 50px;\n\n ::slotted(:not(:first-child)) {\n margin-left: 40px;\n }\n\n ::slotted(a:focus-visible) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n\n @supports not selector(::slotted(a:focus-visible)) {\n ::slotted(a:focus-within) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n }\n }\n\n #mobile-menu-icon {\n display: none;\n }\n\n .mobile-overlay {\n display: none !important;\n }\n\n ::slotted(a) {\n padding-top: unset;\n padding-bottom: unset;\n padding-left: unset;\n }\n }\n}\n","import {Component, Host, h, Prop, Element, ComponentInterface, State, Listen} from '@stencil/core';\nimport {registerCloseHandlerForFocusOutEventOn} from \"./com-nav-utils\";\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n@Component({\n tag: 'wcs-com-nav',\n styleUrl: 'com-nav.scss',\n shadow: true,\n})\nexport class ComNav implements ComponentInterface {\n @Element() el!: HTMLWcsComNavElement;\n\n /* Name of the application to be displayed in the menu bar */\n @Prop() appName: string;\n\n @State() mobileMenuOpen: boolean = false;\n @State() currentActiveSizing: 'desktop' \| 'mobile';\n resizeObserver: ResizeObserver;\n private hasAlreadyRegisteredClickHandlerOnSlottedLink: boolean = false;\n\n private mobileMenuIconClick() {\n this.mobileMenuOpen = !this.mobileMenuOpen;\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n componentWillLoad(): Promise<void> \| void {\n this.resizeObserver = new ResizeObserver(entry => {\n const cr = entry[0].contentRect;\n const paddingRight = cr.right - cr.width;\n const paddingLeft = cr.left;\n if (cr.width < 576 - (paddingLeft + paddingRight)) {\n this.currentActiveSizing = 'mobile';\n } else {\n this.currentActiveSizing = 'desktop';\n }\n });\n this.resizeObserver.observe(document.body);\n\n const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n }\n\n componentDidRender() {\n this.registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag();\n }\n\n\n private registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag() {\n if (this.hasAlreadyRegisteredClickHandlerOnSlottedLink) return;\n\n const mainSlot = this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n if (mainSlot) {\n this.hasAlreadyRegisteredClickHandlerOnSlottedLink = true;\n // If the user click on a `a` tag, we close the mobile menu overlay.\n mainSlot.assignedElements().filter(e => e.tagName === 'A').forEach(a => {\n a.addEventListener('click', _ => {\n this.mobileMenuOpen = false;\n })\n }\n );\n\n }\n }\n\n //region Handlers for mobile menu overlay visibility\n //\n // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n // opening state.\n //\n // We listen to the click events fired by the sebmenu component and we close the mobile menu.\n // In desktop mode, the submenu itself manages the closing of the menu.\n @Listen('wcsClickOnFinalAction')\n onClickOnFinalAction() {\n this.mobileMenuOpen = false;\n }\n\n // We also listen click events on the category menu items, to close the mobile menu.\n // In desktop mode, the category itself manages the closing of the menu.\n @Listen('wcsCategoryItemClicked')\n onClickOnFinalActionCat() {\n this.mobileMenuOpen = false;\n }\n\n //endregion\n\n render() {\n return (\n <Host>\n <div class=\"container\">\n <div class=\"container-left\">\n <div class=\"app-name\">{this.appName}\n <slot name=\"app-name\"/>\n </div>\n <div class=\"menu-bar\">\n {this.currentActiveSizing === 'desktop' ? <slot/> : null}\n </div>\n </div>\n <div class=\"container-right\">\n <slot name=\"actions\"/>\n <span id=\"mobile-menu-icon\" data-mobile-open={this.mobileMenuOpen}\n onClick={() => this.mobileMenuIconClick()}></span>\n </div>\n </div>\n <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen}>\n {this.currentActiveSizing === 'mobile' ? <slot/> : null}\n </div>\n </Host>\n );\n }\n\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,++ECGlB,MAAMC,EAA+B,sB,MAOxBC,EAAM,M,yBASPC,KAAAC,8CAAyD,M,2CAH9B,M,mCAK3BC,sBACJF,KAAKG,gBAAkBH,KAAKG,c,CAGhCC,uB,OACIC,EAAAL,KAAKM,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,Y,CAGzBC,oBACIR,KAAKM,eAAiB,IAAIG,gBAAeC,IACrC,MAAMC,EAAKD,EAAM,GAAGE,YACpB,MAAMC,EAAeF,EAAGG,MAAQH,EAAGI,MACnC,MAAMC,EAAcL,EAAGM,KACvB,GAAIN,EAAGI,MAAQ,KAAOC,EAAcH,GAAe,CAC/Cb,KAAKkB,oBAAsB,Q,KACxB,CACHlB,KAAKkB,oBAAsB,S,KAGnClB,KAAKM,eAAea,QAAQC,SAASC,MAErC,MAAMC,EAAwBtB,KAAKuB,GAAGC,iBAAiB,oEACvDC,EAAoEH,EAAuBxB,E,CAG/F4B,qBACI1B,KAAK2B,yD,CAIDA,0DACJ,GAAI3B,KAAKC,8CAA+C,OAExD,MAAM2B,EAAW5B,KAAKuB,GAAGM,WAAWC,cAAc,oBAClD,GAAIF,EAAU,CACV5B,KAAKC,8CAAgD,KAErD2B,EAASG,mBAAmBC,QAAOC,GAAKA,EAAEC,UAAY,MAAKC,SAAQC,IAC3DA,EAAEC,iBAAiB,SAASC,IACxBtC,KAAKG,eAAiB,KAAK,GAC7B,G,EAgBlBoC,uBACIvC,KAAKG,eAAiB,K,CAM1BqC,0BACIxC,KAAKG,eAAiB,K,CAK1BsC,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,OAAKE,MAAM,aACPF,EAAA,OAAKE,MAAM,kBACPF,EAAA,OAAKE,MAAM,YAAY5C,KAAK6C,QACxBH,EAAA,QAAMI,KAAK,cAEfJ,EAAA,OAAKE,MAAM,YACN5C,KAAKkB,sBAAwB,UAAYwB,EAAA,aAAU,OAG5DA,EAAA,OAAKE,MAAM,mBACPF,EAAA,QAAMI,KAAK,YACXJ,EAAA,QAAMK,GAAG,mBAAkB,mBAAmB/C,KAAKG,eAC7C6C,QAAS,IAAMhD,KAAKE,0BAGlCwC,EAAA,OAAKE,MAAM,iBAAgB,mBAAmB5C,KAAKG,gBAC9CH,KAAKkB,sBAAwB,SAAWwB,EAAA,aAAU,M"}
1	+ {"version":3,"names":["comNavCss","WCS_COM_NAV_SUBMENU_TAG_NAME","ComNav","this","hasAlreadyRegisteredClickHandlerOnSlottedLink","mobileMenuIconClick","mobileMenuOpen","disconnectedCallback","_a","resizeObserver","disconnect","componentWillLoad","ResizeObserver","entry","cr","contentRect","paddingRight","right","width","paddingLeft","left","currentActiveSizing","observe","document","body","slottedNavigableItems","el","querySelectorAll","registerCloseHandlerForFocusOutEventOn","componentDidRender","registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag","mainSlot","shadowRoot","querySelector","assignedElements","filter","e","tagName","forEach","a","addEventListener","_","onClickOnFinalAction","onClickOnFinalActionCat","render","h","Host","class","appName","name","id","onClick"],"sources":["./src/components/com-nav/com-nav.scss?tag=wcs-com-nav&encapsulation=shadow","./src/components/com-nav/com-nav.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n display: block;\n position: relative;\n height: 75px;\n border-bottom: solid 1px var(--wcs-text-light);\n\n .container {\n padding: 0 var(--wcs-padding);\n height: 100%;\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n }\n\n .container-left {\n display: flex;\n height: 100%;\n align-items: center;\n flex-direction: row;\n }\n\n .container-right {\n display: flex;\n align-items: center;\n }\n\n .app-name {\n font-weight: 400;\n font-size: 1.5rem;\n line-height: 1.25;\n color: var(--wcs-gray);\n }\n\n .menu-bar {\n display: none;\n }\n\n ::slotted(a) {\n padding-top: calc(1.5 * var(--wcs-base-margin));\n padding-bottom: calc(1.5 * var(--wcs-base-margin));\n padding-left: calc(3 * var(--wcs-base-margin));\n display: flex;\n align-items: center;\n height: 100%;\n font-size: 16px;\n cursor: pointer;\n font-weight: 500;\n color: var(--wcs-gray);\n text-decoration: none;\n }\n\n ::slotted(a):after {\n font-family: icons;\n padding-left: var(--wcs-base-margin);\n font-size: 0.6rem;\n content: \"\\f107\";\n line-height: 1;\n box-sizing: border-box;\n }\n\n ::slotted(a:focus-visible) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n\n @supports not selector(::slotted(a:focus-visible)) {\n ::slotted(a:focus-within) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n }\n\n #mobile-menu-icon {\n height: 24px;\n padding-left: calc(2 * var(--wcs-base-margin));\n margin-left: var(--wcs-base-margin);\n border-left: solid 1px var(--wcs-text-light);\n }\n\n #mobile-menu-icon:after {\n font-family: icons;\n font-size: 24px;\n cursor: pointer;\n content: \"\\f198\";\n line-height: 1;\n box-sizing: border-box;\n }\n #mobile-menu-icon[data-mobile-open]:after {\n content: \"\\f129\";\n }\n .mobile-overlay {\n display: none;\n }\n\n .mobile-overlay[data-mobile-open] {\n padding-top: calc(2 * var(--wcs-base-margin));\n padding-bottom: calc(2 * var(--wcs-base-margin));\n position: relative;\n top: 0;\n left: 0;\n right: 0;\n display: block;\n z-index: 9999;\n background-color: var(--wcs-white);\n }\n}\n\n@media screen and (min-width: 576px) {\n :host {\n .container {\n margin: 0 auto;\n max-width: var(--wcs-com-content-max-width);\n }\n\n .menu-bar {\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: 50px;\n\n ::slotted(:not(:first-child)) {\n margin-left: 40px;\n }\n\n ::slotted(a:focus-visible) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n\n @supports not selector(::slotted(a:focus-visible)) {\n ::slotted(a:focus-within) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n }\n }\n\n #mobile-menu-icon {\n display: none;\n }\n\n .mobile-overlay {\n display: none !important;\n }\n\n ::slotted(a) {\n padding-top: unset;\n padding-bottom: unset;\n padding-left: unset;\n }\n }\n}\n","import {Component, Host, h, Prop, Element, ComponentInterface, State, Listen} from '@stencil/core';\nimport {registerCloseHandlerForFocusOutEventOn} from \"./com-nav-utils\";\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n@Component({\n tag: 'wcs-com-nav',\n styleUrl: 'com-nav.scss',\n shadow: true,\n})\nexport class ComNav implements ComponentInterface {\n @Element() private el!: HTMLWcsComNavElement;\n\n /* Name of the application to be displayed in the menu bar */\n @Prop() appName: string;\n\n @State() private mobileMenuOpen: boolean = false;\n @State() private currentActiveSizing: 'desktop' \| 'mobile';\n private resizeObserver: ResizeObserver;\n private hasAlreadyRegisteredClickHandlerOnSlottedLink: boolean = false;\n\n private mobileMenuIconClick() {\n this.mobileMenuOpen = !this.mobileMenuOpen;\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n componentWillLoad(): Promise<void> \| void {\n this.resizeObserver = new ResizeObserver(entry => {\n const cr = entry[0].contentRect;\n const paddingRight = cr.right - cr.width;\n const paddingLeft = cr.left;\n if (cr.width < 576 - (paddingLeft + paddingRight)) {\n this.currentActiveSizing = 'mobile';\n } else {\n this.currentActiveSizing = 'desktop';\n }\n });\n this.resizeObserver.observe(document.body);\n\n const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n }\n\n componentDidRender() {\n this.registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag();\n }\n\n\n private registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag() {\n if (this.hasAlreadyRegisteredClickHandlerOnSlottedLink) return;\n\n const mainSlot = this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n if (mainSlot) {\n this.hasAlreadyRegisteredClickHandlerOnSlottedLink = true;\n // If the user click on a `a` tag, we close the mobile menu overlay.\n mainSlot.assignedElements().filter(e => e.tagName === 'A').forEach(a => {\n a.addEventListener('click', _ => {\n this.mobileMenuOpen = false;\n })\n }\n );\n\n }\n }\n\n //region Handlers for mobile menu overlay visibility\n //\n // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n // opening state.\n //\n // We listen to the click events fired by the sebmenu component and we close the mobile menu.\n // In desktop mode, the submenu itself manages the closing of the menu.\n @Listen('wcsClickOnFinalAction')\n onClickOnFinalAction() {\n this.mobileMenuOpen = false;\n }\n\n // We also listen click events on the category menu items, to close the mobile menu.\n // In desktop mode, the category itself manages the closing of the menu.\n @Listen('wcsCategoryItemClicked')\n onClickOnFinalActionCat() {\n this.mobileMenuOpen = false;\n }\n\n //endregion\n\n render() {\n return (\n <Host>\n <div class=\"container\">\n <div class=\"container-left\">\n <div class=\"app-name\">{this.appName}\n <slot name=\"app-name\"/>\n </div>\n <div class=\"menu-bar\">\n {this.currentActiveSizing === 'desktop' ? <slot/> : null}\n </div>\n </div>\n <div class=\"container-right\">\n <slot name=\"actions\"/>\n <span id=\"mobile-menu-icon\" data-mobile-open={this.mobileMenuOpen}\n onClick={() => this.mobileMenuIconClick()}></span>\n </div>\n </div>\n <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen}>\n {this.currentActiveSizing === 'mobile' ? <slot/> : null}\n </div>\n </Host>\n );\n }\n\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,++ECGlB,MAAMC,EAA+B,sB,MAOxBC,EAAM,M,yBASPC,KAAAC,8CAAyD,M,2CAHtB,M,mCAKnCC,sBACJF,KAAKG,gBAAkBH,KAAKG,c,CAGhCC,uB,OACIC,EAAAL,KAAKM,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,Y,CAGzBC,oBACIR,KAAKM,eAAiB,IAAIG,gBAAeC,IACrC,MAAMC,EAAKD,EAAM,GAAGE,YACpB,MAAMC,EAAeF,EAAGG,MAAQH,EAAGI,MACnC,MAAMC,EAAcL,EAAGM,KACvB,GAAIN,EAAGI,MAAQ,KAAOC,EAAcH,GAAe,CAC/Cb,KAAKkB,oBAAsB,Q,KACxB,CACHlB,KAAKkB,oBAAsB,S,KAGnClB,KAAKM,eAAea,QAAQC,SAASC,MAErC,MAAMC,EAAwBtB,KAAKuB,GAAGC,iBAAiB,oEACvDC,EAAoEH,EAAuBxB,E,CAG/F4B,qBACI1B,KAAK2B,yD,CAIDA,0DACJ,GAAI3B,KAAKC,8CAA+C,OAExD,MAAM2B,EAAW5B,KAAKuB,GAAGM,WAAWC,cAAc,oBAClD,GAAIF,EAAU,CACV5B,KAAKC,8CAAgD,KAErD2B,EAASG,mBAAmBC,QAAOC,GAAKA,EAAEC,UAAY,MAAKC,SAAQC,IAC3DA,EAAEC,iBAAiB,SAASC,IACxBtC,KAAKG,eAAiB,KAAK,GAC7B,G,EAgBlBoC,uBACIvC,KAAKG,eAAiB,K,CAM1BqC,0BACIxC,KAAKG,eAAiB,K,CAK1BsC,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,OAAKE,MAAM,aACPF,EAAA,OAAKE,MAAM,kBACPF,EAAA,OAAKE,MAAM,YAAY5C,KAAK6C,QACxBH,EAAA,QAAMI,KAAK,cAEfJ,EAAA,OAAKE,MAAM,YACN5C,KAAKkB,sBAAwB,UAAYwB,EAAA,aAAU,OAG5DA,EAAA,OAAKE,MAAM,mBACPF,EAAA,QAAMI,KAAK,YACXJ,EAAA,QAAMK,GAAG,mBAAkB,mBAAmB/C,KAAKG,eAC7C6C,QAAS,IAAMhD,KAAKE,0BAGlCwC,EAAA,OAAKE,MAAM,iBAAgB,mBAAmB5C,KAAKG,gBAC9CH,KAAKkB,sBAAwB,SAAWwB,EAAA,aAAU,M"}

package/dist/wcs/{p-e4dcd310.entry.js → p-f82e7a61.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as o,H as s,g as i}from"./p-a2df3a49.js";import{i as a,a as n}from"./p-dc57a5f7.js";const r=':host{display:block;padding-bottom:var(--wcs-padding);}:host .label-container{display:block;padding-left:calc(9 * var(--wcs-base-margin));color:var(--wcs-gray)}:host ::slotted(a):after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:"\\f107";line-height:1;box-sizing:border-box}:host ::slotted(a){display:block;cursor:pointer;text-decoration:none;font-size:16px;color:var(--wcs-gray);padding-left:calc(12 * var(--wcs-base-margin));padding-top:calc(1.5 * var(--wcs-base-margin));padding-bottom:calc(1.5 * var(--wcs-base-margin))}:host ::slotted(a:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host ::slotted(a:focus-within){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}}@media screen and (min-width: 576px){:host{padding-bottom:unset}:host .item-container:not([data-open]){display:none}:host .label:after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:"\\f107";line-height:1;box-sizing:border-box}:host .label-container{cursor:pointer;user-select:none;display:flex;align-items:center;padding-left:unset;color:var(--wcs-white)}:host .label-container:focus-visible{outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:5px}@supports not selector(.label-container:focus-visible){:host .label-container:focus-within{outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:5px}}:host .label-container[data-open]:after{position:absolute;left:calc(50% + var(--wcs-com-content-max-width) / 8 - 0.5625rem);z-index:2;display:block;width:1.125rem;height:1.125rem;content:"";background-color:var(--wcs-primary);transform:rotate(45deg)}:host .item-container[data-open]{position:absolute;left:calc(50% + var(--wcs-com-content-max-width) / 8);top:0;right:0;padding:50px 0 50px 50px;background-blend-mode:multiply;background-color:rgba(0, 0, 0, 0.15);box-sizing:border-box;height:100%;display:flex;flex-direction:column;align-items:start}:host .item-container[data-open] ::slotted(a:not(:first-child)){margin-top:24px}:host .item-container[data-open] ::slotted(a){display:unset;color:var(--wcs-white);padding-left:unset;padding-top:unset;padding-bottom:unset}:host .item-container[data-open] ::slotted(a:focus-visible){outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host .item-container[data-open] ::slotted(a:focus-within){outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:2px}}}';const l=class{constructor(o){t(this,o);this.wcsCategoryOpened=e(this,"wcsCategoryOpened",7);this.wcsCategoryItemClicked=e(this,"wcsCategoryItemClicked",7);this.label=undefined;this.categoryOpen=false}onWindowClickEvent(t){if(this.categoryOpen)this.categoryOpen=false}onSubmenuOpened(t){if(t.detail.categoryElement!==this.el){this.categoryOpen=false}}handleMenuKeyDown(t){if(a(t)||n(t)){this.categoryOpen=!this.categoryOpen}}handleCategoryItemsKeyDown(t){if(a(t)||n(t)){this.handleItemClick(t)}}async close(){this.categoryOpen=false}async open(){this.categoryOpen=true}onClick(t){t.stopPropagation();this.wcsCategoryOpened.emit({categoryElement:this.el})}handleItemClick(t){if(t.target.tagName==="A"){this.close();this.wcsCategoryItemClicked.emit(t)}}render(){return o(s,{onClick:t=>this.onClick(t)},o("div",{tabindex:screen.width<576?"-1":"0",class:"label-container","data-open":this.categoryOpen,onKeyDown:t=>this.handleMenuKeyDown(t),onClick:t=>this.categoryOpen=!this.categoryOpen},o("span",{class:"label"},this.label)),o("div",{class:"item-container",tabIndex:-1,"data-open":this.categoryOpen,onKeyDown:t=>this.handleCategoryItemsKeyDown(t),onClick:t=>this.handleItemClick(t)},o("slot",null)))}get el(){return i(this)}};l.style=r;export{l as wcs_com_nav_category};
-//# sourceMappingURL=p-e4dcd310.entry.js.map
+import{r as t,c as e,h as o,H as s,g as i}from"./p-a2df3a49.js";import{i as a,a as n}from"./p-12ac2547.js";const r=':host{display:block;padding-bottom:var(--wcs-padding);}:host .label-container{display:block;padding-left:calc(9 * var(--wcs-base-margin));color:var(--wcs-gray)}:host ::slotted(a):after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:"\\f107";line-height:1;box-sizing:border-box}:host ::slotted(a){display:block;cursor:pointer;text-decoration:none;font-size:16px;color:var(--wcs-gray);padding-left:calc(12 * var(--wcs-base-margin));padding-top:calc(1.5 * var(--wcs-base-margin));padding-bottom:calc(1.5 * var(--wcs-base-margin))}:host ::slotted(a:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host ::slotted(a:focus-within){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}}@media screen and (min-width: 576px){:host{padding-bottom:unset}:host .item-container:not([data-open]){display:none}:host .label:after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:"\\f107";line-height:1;box-sizing:border-box}:host .label-container{cursor:pointer;user-select:none;display:flex;align-items:center;padding-left:unset;color:var(--wcs-white)}:host .label-container:focus-visible{outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:5px}@supports not selector(.label-container:focus-visible){:host .label-container:focus-within{outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:5px}}:host .label-container[data-open]:after{position:absolute;left:calc(50% + var(--wcs-com-content-max-width) / 8 - 0.5625rem);z-index:2;display:block;width:1.125rem;height:1.125rem;content:"";background-color:var(--wcs-primary);transform:rotate(45deg)}:host .item-container[data-open]{position:absolute;left:calc(50% + var(--wcs-com-content-max-width) / 8);top:0;right:0;padding:50px 0 50px 50px;background-blend-mode:multiply;background-color:rgba(0, 0, 0, 0.15);box-sizing:border-box;height:100%;display:flex;flex-direction:column;align-items:start}:host .item-container[data-open] ::slotted(a:not(:first-child)){margin-top:24px}:host .item-container[data-open] ::slotted(a){display:unset;color:var(--wcs-white);padding-left:unset;padding-top:unset;padding-bottom:unset}:host .item-container[data-open] ::slotted(a:focus-visible){outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host .item-container[data-open] ::slotted(a:focus-within){outline:2px dashed var(--wcs-white);outline-offset:0.1rem;border-radius:2px}}}';const l=class{constructor(o){t(this,o);this.wcsCategoryOpened=e(this,"wcsCategoryOpened",7);this.wcsCategoryItemClicked=e(this,"wcsCategoryItemClicked",7);this.label=undefined;this.categoryOpen=false}onWindowClickEvent(t){if(this.categoryOpen)this.categoryOpen=false}onSubmenuOpened(t){if(t.detail.categoryElement!==this.el){this.categoryOpen=false}}handleMenuKeyDown(t){if(a(t)||n(t)){this.categoryOpen=!this.categoryOpen}}handleCategoryItemsKeyDown(t){if(a(t)||n(t)){this.handleItemClick(t)}}async close(){this.categoryOpen=false}async open(){this.categoryOpen=true}onClick(t){t.stopPropagation();this.wcsCategoryOpened.emit({categoryElement:this.el})}handleItemClick(t){if(t.target.tagName==="A"){this.close();this.wcsCategoryItemClicked.emit(t)}}render(){return o(s,{onClick:t=>this.onClick(t)},o("div",{tabindex:screen.width<576?"-1":"0",class:"label-container","data-open":this.categoryOpen,onKeyDown:t=>this.handleMenuKeyDown(t),onClick:t=>this.categoryOpen=!this.categoryOpen},o("span",{class:"label"},this.label)),o("div",{class:"item-container",tabIndex:-1,"data-open":this.categoryOpen,onKeyDown:t=>this.handleCategoryItemsKeyDown(t),onClick:t=>this.handleItemClick(t)},o("slot",null)))}get el(){return i(this)}};l.style=r;export{l as wcs_com_nav_category};
+//# sourceMappingURL=p-f82e7a61.entry.js.map

package/dist/wcs/{p-e4dcd310.entry.js.map → p-f82e7a61.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["comNavCategoryCss","ComNavCategory","onWindowClickEvent","_","this","categoryOpen","onSubmenuOpened","event","detail","categoryElement","el","handleMenuKeyDown","_event","isSpaceKey","isEnterKey","handleCategoryItemsKeyDown","handleItemClick","async","onClick","evt","stopPropagation","wcsCategoryOpened","emit","target","tagName","close","wcsCategoryItemClicked","render","h","Host","tabindex","screen","width","class","onKeyDown","label","tabIndex"],"sources":["./src/components/com-nav-category/com-nav-category.scss?tag=wcs-com-nav-category&encapsulation=shadow","./src/components/com-nav-category/com-nav-category.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host{\n display: block;\n padding-bottom: var(--wcs-padding);\n .label-container {\n display: block;\n padding-left: calc(9 * var(--wcs-base-margin));\n color: var(--wcs-gray);\n }\n ::slotted(a):after {\n font-family: icons;\n padding-left: var(--wcs-base-margin);\n font-size: 0.6rem;\n content: \"\\f107\";\n line-height: 1;\n box-sizing: border-box;\n }\n\n ::slotted(a) {\n display: block;\n cursor: pointer;\n text-decoration: none;\n font-size: 16px;\n color: var(--wcs-gray);\n padding-left: calc(12 * var(--wcs-base-margin));\n padding-top: calc(1.5 * var(--wcs-base-margin));\n padding-bottom: calc(1.5 * var(--wcs-base-margin));\n }\n\n /*For mobile/\n ::slotted(a:focus-visible) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n\n @supports not selector(::slotted(a:focus-visible)) {\n ::slotted(a:focus-within) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n }\n}\n\n@media screen and (min-width: 576px) {\n :host {\n padding-bottom: unset;\n\n .item-container:not([data-open]) {\n display: none;\n }\n\n .label:after {\n font-family: icons;\n padding-left: var(--wcs-base-margin);\n font-size: 0.6rem;\n content: \"\\f107\";\n line-height: 1;\n box-sizing: border-box;\n }\n\n .label-container {\n cursor: pointer;\n user-select: none;\n display: flex;\n align-items: center;\n padding-left: unset;\n color: var(--wcs-white);\n }\n\n .label-container:focus-visible {\n @include focus-outline(var(--wcs-white), 5px, 0.1rem);\n }\n\n @supports not selector(.label-container:focus-visible) {\n .label-container:focus-within {\n @include focus-outline(var(--wcs-white), 5px, 0.1rem);\n }\n }\n\n .label-container[data-open]:after {\n position: absolute;\n left: calc(calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8)) - calc(1.125rem / 2));\n z-index: 2;\n display: block;\n width: 1.125rem;\n height: 1.125rem;\n content: \"\";\n background-color: var(--wcs-primary);\n transform: rotate(45deg);\n }\n\n .item-container[data-open] {\n position: absolute;\n left: calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8));\n top: 0;\n right: 0;\n padding: 50px 0 50px 50px;\n background-blend-mode: multiply;\n background-color: rgba(0, 0, 0, 0.15);\n box-sizing: border-box;\n height: calc(100%);\n display: flex;\n flex-direction: column;\n align-items: start;\n\n ::slotted(a:not(:first-child)) {\n margin-top: 24px;\n }\n ::slotted(a) {\n display: unset;\n color: var(--wcs-white);\n padding-left: unset;\n padding-top: unset;\n padding-bottom: unset;\n }\n\n ::slotted(a:focus-visible) {\n @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n }\n\n @supports not selector(::slotted(a:focus-visible)) {\n ::slotted(a:focus-within) {\n @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n }\n }\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen, Method,\n Prop,\n State\n} from '@stencil/core';\nimport { CategoryOpenedEventDetail } from '../com-nav/com-nav-interface';\nimport {isEnterKey, isSpaceKey} from \"../../utils/helpers\";\n\n@Component({\n tag: 'wcs-com-nav-category',\n styleUrl: 'com-nav-category.scss',\n shadow: true,\n})\nexport class ComNavCategory implements ComponentInterface {\n @Element() el!: HTMLWcsComNavCategoryElement;\n @Prop() label: string;\n @State() categoryOpen: boolean = false;\n @Event() wcsCategoryOpened: EventEmitter<CategoryOpenedEventDetail>;\n @Event() wcsCategoryItemClicked: EventEmitter<UIEvent>;\n\n @Listen('click', {target: 'window'})\n onWindowClickEvent(_: MouseEvent) {\n if (this.categoryOpen) this.categoryOpen = false;\n }\n\n @Listen('wcsCategoryOpened', {target: 'window'})\n onSubmenuOpened(event: CustomEvent<CategoryOpenedEventDetail>) {\n if (event.detail.categoryElement !== this.el) {\n this.categoryOpen = false;\n }\n }\n\n /*\n Open the menu if it is closed and closed the menu if it is already opened\n * @param _event the keyboard event\n * @private\n /\n private handleMenuKeyDown(_event: KeyboardEvent) {\n if ((isSpaceKey(_event)) \|\| isEnterKey(_event)) {\n this.categoryOpen = !this.categoryOpen;\n }\n }\n\n /\n Handle key down on category items\n * @param _event the keyboard event\n * @private\n /\n private handleCategoryItemsKeyDown(_event: KeyboardEvent) {\n if ((isSpaceKey(_event)) \|\| isEnterKey(_event)) {\n this.handleItemClick(_event);\n }\n }\n\n /\n Close the category\n /\n @Method()\n async close() {\n this.categoryOpen = false;\n }\n\n /\n Opens the category\n /\n @Method()\n async open() {\n this.categoryOpen = true;\n }\n\n /\n When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage\n * the closing of the menu correctly\n /\n private onClick(evt: MouseEvent) {\n evt.stopPropagation();\n this.wcsCategoryOpened.emit({categoryElement: this.el})\n }\n\n\n /\n Close the category and fire item click if we detect a mouse click on a slotted `a` element.\n * @param evt\n * @private\n */\n private handleItemClick(evt: UIEvent) {\n if ((evt.target as HTMLElement).tagName === 'A') {\n this.close();\n this.wcsCategoryItemClicked.emit(evt);\n }\n }\n\n render(): any {\n return (\n <Host onClick={evt => this.onClick(evt)}>\n <div tabindex={screen.width < 576 ? \"-1\" : \"0\"}\n class=\"label-container\"\n data-open={this.categoryOpen}\n onKeyDown={evt => this.handleMenuKeyDown(evt)}\n onClick={_ => this.categoryOpen = !this.categoryOpen}><span class=\"label\">{this.label}</span></div>\n <div class=\"item-container\"\n tabIndex={-1}\n data-open={this.categoryOpen}\n onKeyDown={evt => this.handleCategoryItemsKeyDown(evt)}\n onClick={(evt) => this.handleItemClick(evt)}>\n <slot/>\n </div>\n </Host>\n )\n }\n\n}\n"],"mappings":"2GAAA,MAAMA,EAAoB,siF,MCoBbC,EAAc,M,~~oLAGU~~,K,~~CAKjCC~~,mBAAmBC,GACf,GAAIC,KAAKC,aAAcD,KAAKC,aAAe,K,CAI/CC,gBAAgBC,GACZ,GAAIA,EAAMC,OAAOC,kBAAoBL,KAAKM,GAAI,CAC1CN,KAAKC,aAAe,K,EASpBM,kBAAkBC,GACtB,GAAKC,EAAWD,IAAYE,EAAWF,GAAS,CAC5CR,KAAKC,cAAgBD,KAAKC,Y,EAS1BU,2BAA2BH,GAC/B,GAAKC,EAAWD,IAAYE,EAAWF,GAAS,CAC5CR,KAAKY,gBAAgBJ,E,EAQ7BK,cACIb,KAAKC,aAAe,K,CAOxBY,aACIb,KAAKC,aAAe,I,CAOhBa,QAAQC,GACZA,EAAIC,kBACJhB,KAAKiB,kBAAkBC,KAAK,CAACb,gBAAiBL,KAAKM,I,CAS/CM,gBAAgBG,GACpB,GAAKA,EAAII,OAAuBC,UAAY,IAAK,CAC7CpB,KAAKqB,QACLrB,KAAKsB,uBAAuBJ,KAAKH,E,EAIzCQ,SACI,OACIC,EAACC,EAAI,CAACX,QAASC,GAAOf,KAAKc,QAAQC,IAC/BS,EAAA,OAAKE,SAAUC,OAAOC,MAAQ,IAAM,KAAO,IACtCC,MAAM,kBAAiB,YACZ7B,KAAKC,aAChB6B,UAAWf,GAAOf,KAAKO,kBAAkBQ,GACzCD,QAASf,GAAKC,KAAKC,cAAgBD,KAAKC,cAAcuB,EAAA,QAAMK,MAAM,SAAS7B,KAAK+B,QACrFP,EAAA,OAAKK,MAAM,iBACNG,UAAW,EAAC,YACDhC,KAAKC,aAChB6B,UAAWf,GAAOf,KAAKW,2BAA2BI,GAClDD,QAAUC,GAAQf,KAAKY,gBAAgBG,IACxCS,EAAA,c"}
1	+ {"version":3,"names":["comNavCategoryCss","ComNavCategory","onWindowClickEvent","_","this","categoryOpen","onSubmenuOpened","event","detail","categoryElement","el","handleMenuKeyDown","_event","isSpaceKey","isEnterKey","handleCategoryItemsKeyDown","handleItemClick","async","onClick","evt","stopPropagation","wcsCategoryOpened","emit","target","tagName","close","wcsCategoryItemClicked","render","h","Host","tabindex","screen","width","class","onKeyDown","label","tabIndex"],"sources":["./src/components/com-nav-category/com-nav-category.scss?tag=wcs-com-nav-category&encapsulation=shadow","./src/components/com-nav-category/com-nav-category.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host{\n display: block;\n padding-bottom: var(--wcs-padding);\n .label-container {\n display: block;\n padding-left: calc(9 * var(--wcs-base-margin));\n color: var(--wcs-gray);\n }\n ::slotted(a):after {\n font-family: icons;\n padding-left: var(--wcs-base-margin);\n font-size: 0.6rem;\n content: \"\\f107\";\n line-height: 1;\n box-sizing: border-box;\n }\n\n ::slotted(a) {\n display: block;\n cursor: pointer;\n text-decoration: none;\n font-size: 16px;\n color: var(--wcs-gray);\n padding-left: calc(12 * var(--wcs-base-margin));\n padding-top: calc(1.5 * var(--wcs-base-margin));\n padding-bottom: calc(1.5 * var(--wcs-base-margin));\n }\n\n /*For mobile/\n ::slotted(a:focus-visible) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n\n @supports not selector(::slotted(a:focus-visible)) {\n ::slotted(a:focus-within) {\n @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n }\n }\n}\n\n@media screen and (min-width: 576px) {\n :host {\n padding-bottom: unset;\n\n .item-container:not([data-open]) {\n display: none;\n }\n\n .label:after {\n font-family: icons;\n padding-left: var(--wcs-base-margin);\n font-size: 0.6rem;\n content: \"\\f107\";\n line-height: 1;\n box-sizing: border-box;\n }\n\n .label-container {\n cursor: pointer;\n user-select: none;\n display: flex;\n align-items: center;\n padding-left: unset;\n color: var(--wcs-white);\n }\n\n .label-container:focus-visible {\n @include focus-outline(var(--wcs-white), 5px, 0.1rem);\n }\n\n @supports not selector(.label-container:focus-visible) {\n .label-container:focus-within {\n @include focus-outline(var(--wcs-white), 5px, 0.1rem);\n }\n }\n\n .label-container[data-open]:after {\n position: absolute;\n left: calc(calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8)) - calc(1.125rem / 2));\n z-index: 2;\n display: block;\n width: 1.125rem;\n height: 1.125rem;\n content: \"\";\n background-color: var(--wcs-primary);\n transform: rotate(45deg);\n }\n\n .item-container[data-open] {\n position: absolute;\n left: calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8));\n top: 0;\n right: 0;\n padding: 50px 0 50px 50px;\n background-blend-mode: multiply;\n background-color: rgba(0, 0, 0, 0.15);\n box-sizing: border-box;\n height: calc(100%);\n display: flex;\n flex-direction: column;\n align-items: start;\n\n ::slotted(a:not(:first-child)) {\n margin-top: 24px;\n }\n ::slotted(a) {\n display: unset;\n color: var(--wcs-white);\n padding-left: unset;\n padding-top: unset;\n padding-bottom: unset;\n }\n\n ::slotted(a:focus-visible) {\n @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n }\n\n @supports not selector(::slotted(a:focus-visible)) {\n ::slotted(a:focus-within) {\n @include focus-outline(var(--wcs-white), 2px, 0.1rem);\n }\n }\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen, Method,\n Prop,\n State\n} from '@stencil/core';\nimport { CategoryOpenedEventDetail } from '../com-nav/com-nav-interface';\nimport {isEnterKey, isSpaceKey} from \"../../utils/helpers\";\n\n@Component({\n tag: 'wcs-com-nav-category',\n styleUrl: 'com-nav-category.scss',\n shadow: true,\n})\nexport class ComNavCategory implements ComponentInterface {\n @Element() private el!: HTMLWcsComNavCategoryElement;\n @Prop() label: string;\n @State() private categoryOpen: boolean = false;\n @Event() wcsCategoryOpened: EventEmitter<CategoryOpenedEventDetail>;\n @Event() wcsCategoryItemClicked: EventEmitter<UIEvent>;\n\n @Listen('click', {target: 'window'})\n onWindowClickEvent(_: MouseEvent) {\n if (this.categoryOpen) this.categoryOpen = false;\n }\n\n @Listen('wcsCategoryOpened', {target: 'window'})\n onSubmenuOpened(event: CustomEvent<CategoryOpenedEventDetail>) {\n if (event.detail.categoryElement !== this.el) {\n this.categoryOpen = false;\n }\n }\n\n /*\n Open the menu if it is closed and closed the menu if it is already opened\n * @param _event the keyboard event\n * @private\n /\n private handleMenuKeyDown(_event: KeyboardEvent) {\n if ((isSpaceKey(_event)) \|\| isEnterKey(_event)) {\n this.categoryOpen = !this.categoryOpen;\n }\n }\n\n /\n Handle key down on category items\n * @param _event the keyboard event\n * @private\n /\n private handleCategoryItemsKeyDown(_event: KeyboardEvent) {\n if ((isSpaceKey(_event)) \|\| isEnterKey(_event)) {\n this.handleItemClick(_event);\n }\n }\n\n /\n Close the category\n /\n @Method()\n async close() {\n this.categoryOpen = false;\n }\n\n /\n Opens the category\n /\n @Method()\n async open() {\n this.categoryOpen = true;\n }\n\n /\n When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage\n * the closing of the menu correctly\n /\n private onClick(evt: MouseEvent) {\n evt.stopPropagation();\n this.wcsCategoryOpened.emit({categoryElement: this.el})\n }\n\n\n /\n Close the category and fire item click if we detect a mouse click on a slotted `a` element.\n * @param evt\n * @private\n */\n private handleItemClick(evt: UIEvent) {\n if ((evt.target as HTMLElement).tagName === 'A') {\n this.close();\n this.wcsCategoryItemClicked.emit(evt);\n }\n }\n\n render(): any {\n return (\n <Host onClick={evt => this.onClick(evt)}>\n <div tabindex={screen.width < 576 ? \"-1\" : \"0\"}\n class=\"label-container\"\n data-open={this.categoryOpen}\n onKeyDown={evt => this.handleMenuKeyDown(evt)}\n onClick={_ => this.categoryOpen = !this.categoryOpen}><span class=\"label\">{this.label}</span></div>\n <div class=\"item-container\"\n tabIndex={-1}\n data-open={this.categoryOpen}\n onKeyDown={evt => this.handleCategoryItemsKeyDown(evt)}\n onClick={(evt) => this.handleItemClick(evt)}>\n <slot/>\n </div>\n </Host>\n )\n }\n\n}\n"],"mappings":"2GAAA,MAAMA,EAAoB,siF,MCoBbC,EAAc,M,oLAGkB,K,CAKzCC,mBAAmBC,GACf,GAAIC,KAAKC,aAAcD,KAAKC,aAAe,K,CAI/CC,gBAAgBC,GACZ,GAAIA,EAAMC,OAAOC,kBAAoBL,KAAKM,GAAI,CAC1CN,KAAKC,aAAe,K,EASpBM,kBAAkBC,GACtB,GAAKC,EAAWD,IAAYE,EAAWF,GAAS,CAC5CR,KAAKC,cAAgBD,KAAKC,Y,EAS1BU,2BAA2BH,GAC/B,GAAKC,EAAWD,IAAYE,EAAWF,GAAS,CAC5CR,KAAKY,gBAAgBJ,E,EAQ7BK,cACIb,KAAKC,aAAe,K,CAOxBY,aACIb,KAAKC,aAAe,I,CAOhBa,QAAQC,GACZA,EAAIC,kBACJhB,KAAKiB,kBAAkBC,KAAK,CAACb,gBAAiBL,KAAKM,I,CAS/CM,gBAAgBG,GACpB,GAAKA,EAAII,OAAuBC,UAAY,IAAK,CAC7CpB,KAAKqB,QACLrB,KAAKsB,uBAAuBJ,KAAKH,E,EAIzCQ,SACI,OACIC,EAACC,EAAI,CAACX,QAASC,GAAOf,KAAKc,QAAQC,IAC/BS,EAAA,OAAKE,SAAUC,OAAOC,MAAQ,IAAM,KAAO,IACtCC,MAAM,kBAAiB,YACZ7B,KAAKC,aAChB6B,UAAWf,GAAOf,KAAKO,kBAAkBQ,GACzCD,QAASf,GAAKC,KAAKC,cAAgBD,KAAKC,cAAcuB,EAAA,QAAMK,MAAM,SAAS7B,KAAK+B,QACrFP,EAAA,OAAKK,MAAM,iBACNG,UAAW,EAAC,YACDhC,KAAKC,aAChB6B,UAAWf,GAAOf,KAAKW,2BAA2BI,GAClDD,QAAUC,GAAQf,KAAKY,gBAAgBG,IACxCS,EAAA,c"}

package/dist/wcs/p-fc3f5b53.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["actionBarCss","ActionBar","componentWillLoad","this","hasTabs","el","querySelector","render","h","Host","class","name"],"sources":["./src/components/action-bar/action-bar.scss?tag=wcs-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx"],"sourcesContent":[":host {\n padding: 0 var(--wcs-padding);\n min-height: 81px;\n background-color: var(--wcs-white);\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n\n .title-actions {\n padding-top: 16px;\n padding-bottom: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-grow: 1;\n }\n\n .title-actions[data-has-tabs] {\n padding-bottom: 0;\n }\n\n h1 {\n font-weight: 400;\n line-height: 1.25;\n margin: 0;\n color: var(--wcs-gray);\n }\n}\n\n:host([gutter]) {\n border-bottom: solid 1px var(--wcs-light);\n}\n\n::slotted([slot=actions]) {\n display: flex;\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'wcs-action-bar',\n styleUrl: 'action-bar.scss',\n shadow: true\n})\nexport class ActionBar implements ComponentInterface {\n @Element() el: HTMLWcsActionBarElement;\n /*\n Determines if the action bar should have a border at the bottom.\n * You should not use this property if a gutter is already present on tabs\n */\n @Prop() gutter: boolean;\n @State() hasTabs = false;\n\n componentWillLoad(): Promise<void> \| void {\n this.hasTabs = !!this.el.querySelector('[slot=\"tabs\"]');\n }\n\n render() {\n return (\n <Host>\n <div class=\"title-actions\" data-has-tabs={this.hasTabs}>\n <h1>\n <slot></slot>\n </h1>\n <div class=\"actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n <div class=\"tabs-container\">\n <slot name=\"tabs\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,mf,MCORC,EAAS,M,~~4DAOC~~,K,~~CAEnBC~~,oBACIC,KAAKC,UAAYD,KAAKE,GAAGC,cAAc,gB,CAG3CC,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,OAAKE,MAAM,gBAAe,gBAAgBP,KAAKC,SAC3CI,EAAA,UACIA,EAAA,cAEJA,EAAA,OAAKE,MAAM,WACPF,EAAA,QAAMG,KAAK,cAGnBH,EAAA,OAAKE,MAAM,kBACPF,EAAA,QAAMG,KAAK,U"}
1	+ {"version":3,"names":["actionBarCss","ActionBar","componentWillLoad","this","hasTabs","el","querySelector","render","h","Host","class","name"],"sources":["./src/components/action-bar/action-bar.scss?tag=wcs-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx"],"sourcesContent":[":host {\n padding: 0 var(--wcs-padding);\n min-height: 81px;\n background-color: var(--wcs-white);\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n\n .title-actions {\n padding-top: 16px;\n padding-bottom: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-grow: 1;\n }\n\n .title-actions[data-has-tabs] {\n padding-bottom: 0;\n }\n\n h1 {\n font-weight: 400;\n line-height: 1.25;\n margin: 0;\n color: var(--wcs-gray);\n }\n}\n\n:host([gutter]) {\n border-bottom: solid 1px var(--wcs-light);\n}\n\n::slotted([slot=actions]) {\n display: flex;\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'wcs-action-bar',\n styleUrl: 'action-bar.scss',\n shadow: true\n})\nexport class ActionBar implements ComponentInterface {\n @Element() private el: HTMLWcsActionBarElement;\n /*\n Determines if the action bar should have a border at the bottom.\n * You should not use this property if a gutter is already present on tabs\n */\n @Prop() gutter: boolean;\n @State() private hasTabs = false;\n\n componentWillLoad(): Promise<void> \| void {\n this.hasTabs = !!this.el.querySelector('[slot=\"tabs\"]');\n }\n\n render() {\n return (\n <Host>\n <div class=\"title-actions\" data-has-tabs={this.hasTabs}>\n <h1>\n <slot></slot>\n </h1>\n <div class=\"actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n <div class=\"tabs-container\">\n <slot name=\"tabs\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,mf,MCORC,EAAS,M,4DAOS,K,CAE3BC,oBACIC,KAAKC,UAAYD,KAAKE,GAAGC,cAAc,gB,CAG3CC,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,OAAKE,MAAM,gBAAe,gBAAgBP,KAAKC,SAC3CI,EAAA,UACIA,EAAA,cAEJA,EAAA,OAAKE,MAAM,WACPF,EAAA,QAAMG,KAAK,cAGnBH,EAAA,OAAKE,MAAM,kBACPF,EAAA,QAAMG,KAAK,U"}

package/dist/wcs/wcs.css CHANGED Viewed

	@@ -1 +1 @@
1	- .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.wcs-primary{--wcs-base:var(--wcs-primary);--wcs-contrast:var(--wcs-white)}.wcs-secondary{--wcs-base:var(--wcs-gray-light);--wcs-contrast:var(--wcs-white)}.wcs-success{--wcs-base:var(--wcs-green);--wcs-contrast:var(--wcs-gray-darker)}.wcs-warning{--wcs-base:var(--wcs-yellow);--wcs-contrast:var(--wcs-gray-darker)}.wcs-info{--wcs-base:var(--wcs-cyan);--wcs-contrast:var(--wcs-white)}.wcs-danger{--wcs-base:var(--wcs-red);--wcs-contrast:var(--wcs-white)}.wcs-dark{--wcs-base:var(--wcs-gray-dark);--wcs-contrast:var(--wcs-white)}.wcs-light{--wcs-base:var(--wcs-light);--wcs-contrast:var(--wcs-gray-darker)}.wcs-overlay{height:100vh;width:100vw;pointer-events:none;top:0;position:absolute;z-index:9999999}.tippy-box[data-theme~=wcs]{background-color:var(--wcs-black);color:var(--wcs-white)}.tippy-box[data-theme~=wcs][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--wcs-black)}.tippy-box[data-theme~=wcs][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--wcs-black)}.tippy-box[data-theme~=wcs][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--wcs-black)}.tippy-box[data-theme~=wcs][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--wcs-black)}.tippy-content{overflow-wrap:break-word}:root{--wcs-white:#ffffff;--wcs-light:#f2f2f2;--wcs-gray-light:#4d4f53;--wcs-gray:#333;--wcs-gray-dark:#343a40;--wcs-gray-darker:#212529;--wcs-black:black;--wcs-text-light:#d7d7d7;--wcs-text-disabled:#b9b9b9;--wcs-text-medium:#747678;--wcs-blue:#0088CE;--wcs-purple:#6e1e78;--wcs-pink:#a1006b;--wcs-red:#cd0037;--wcs-orange:#e05206;--wcs-yellow:#ffb612;--wcs-green:#82be00;--wcs-teal:#d2e100;--wcs-cyan:#009aa6;--wcs-primary:var(--wcs-blue);--wcs-base:var(--wcs-primary);--wcs-contrast:var(--wcs-white);--wcs-font-sans-serif:Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--wcs-font-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--wcs-font-weight-form-value:500;--wcs-border-radius:~~8px~~;--wcs-padding:~~16px~~;--wcs-base-~~margin~~:~~8px~~;--wcs-~~text~~-padding:~~8px~~;--wcs-com-content-max-width:1024px;--wcs-tabs-headers-border-bottom:1px solid #ebebeb}body{font-weight:400;font-family:var(--wcs-font-sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,textarea,select{font:inherit}::placeholder{color:var(--wcs-text-medium);opacity:1;font-weight:normal;font-style:italic}
1	+ .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.wcs-primary{--wcs-base:var(--wcs-primary);--wcs-contrast:var(--wcs-white)}.wcs-secondary{--wcs-base:var(--wcs-gray-light);--wcs-contrast:var(--wcs-white)}.wcs-success{--wcs-base:var(--wcs-green);--wcs-contrast:var(--wcs-gray-darker)}.wcs-warning{--wcs-base:var(--wcs-yellow);--wcs-contrast:var(--wcs-gray-darker)}.wcs-info{--wcs-base:var(--wcs-cyan);--wcs-contrast:var(--wcs-white)}.wcs-danger{--wcs-base:var(--wcs-red);--wcs-contrast:var(--wcs-white)}.wcs-dark{--wcs-base:var(--wcs-gray-dark);--wcs-contrast:var(--wcs-white)}.wcs-light{--wcs-base:var(--wcs-light);--wcs-contrast:var(--wcs-gray-darker)}.wcs-overlay{height:100vh;width:100vw;pointer-events:none;top:0;position:absolute;z-index:9999999}.tippy-box[data-theme~=wcs]{background-color:var(--wcs-black);color:var(--wcs-white)}.tippy-box[data-theme~=wcs][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--wcs-black)}.tippy-box[data-theme~=wcs][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--wcs-black)}.tippy-box[data-theme~=wcs][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--wcs-black)}.tippy-box[data-theme~=wcs][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--wcs-black)}.tippy-content{overflow-wrap:break-word}:root{--wcs-white:#ffffff;--wcs-light:#f2f2f2;--wcs-gray-light:#4d4f53;--wcs-gray:#333;--wcs-gray-dark:#343a40;--wcs-gray-darker:#212529;--wcs-black:black;--wcs-text-light:#d7d7d7;--wcs-text-disabled:#b9b9b9;--wcs-text-medium:#747678;--wcs-blue:#0088CE;--wcs-purple:#6e1e78;--wcs-pink:#a1006b;--wcs-red:#cd0037;--wcs-orange:#e05206;--wcs-yellow:#ffb612;--wcs-green:#82be00;--wcs-teal:#d2e100;--wcs-cyan:#009aa6;--wcs-primary:var(--wcs-blue);--wcs-base:var(--wcs-primary);--wcs-contrast:var(--wcs-white);--wcs-font-sans-serif:Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--wcs-font-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--wcs-font-weight-form-value:500;--wcs-base-size:8px;--wcs-size-xl:calc(7 * var(--wcs-base-size));--wcs-size-l:calc(6 * var(--wcs-base-size));--wcs-size-m:calc(5 * var(--wcs-base-size));--wcs-size-s:calc(4 * var(--wcs-base-size));--wcs-size-xs:calc(3 * var(--wcs-base-size));--wcs-border-size:2px;--wcs-border-radius:var(--wcs-base-size);--wcs-text-padding:var(--wcs-base-size);--wcs-padding:calc(2 * var(--wcs-base-size));--wcs-padding-l:calc(1.5 * var(--wcs-base-size));--wcs-padding-m:var(--wcs-base-size);--wcs-padding-s:calc(0.5 * var(--wcs-base-size));--wcs-base-margin:var(--wcs-base-size);--wcs-margin:calc(2 * var(--wcs-base-margin));--wcs-margin-l:calc(1.5 * var(--wcs-base-size));--wcs-margin-m:var(--wcs-base-size);--wcs-margin-s:calc(0.5 * var(--wcs-base-size));--wcs-com-content-max-width:1024px;--wcs-tabs-headers-border-bottom:1px solid #ebebeb}body{font-weight:400;font-family:var(--wcs-font-sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,textarea,select{font:inherit}::placeholder{color:var(--wcs-text-medium);opacity:1;font-weight:normal;font-style:italic}