npm - wcs-core - Versions diffs - 7.5.1 → 7.7.0 - Mend

wcs-core 7.5.1 → 7.7.0

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 (768) hide show

package/dist/cjs/wcs-skeleton-circle.cjs.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SkeletonCircle = class {
         this.radius = 50;
     }
     render() {
-        return (index.h(index.Host, { key: '0d5704fdc6c41256665994d2a2d63c525e14ee6c', style: { width: `${this.radius}px`, height: `${this.radius}px` } }, index.h("span", { key: 'e2712e309be66af8be9fd3aee2b34ee20b67a980', "aria-hidden": "true" })));
+        return (index.h(index.Host, { key: 'd6af1043a00360a88e30dc8ba5f5ad93a92e97f0', style: { width: `${this.radius}px`, height: `${this.radius}px` } }, index.h("span", { key: 'aa8281b154fe9ef96513cecbcd3e3b23fabf7192', "aria-hidden": "true" })));
     }
 };
 SkeletonCircle.style = WcsSkeletonCircleStyle0;

package/dist/cjs/wcs-skeleton-rectangle.cjs.entry.js CHANGED Viewed

@@ -16,7 +16,7 @@ const SkeletonRectangle = class {
         this.width = 'auto';
     }
     render() {
-        return (index.h(index.Host, { key: 'edf5aa2fa711b6e27d066dab259559154af9b08e', style: { height: this.height, width: this.width } }, index.h("span", { key: 'f139ef33c3d2a10aede15bbd540f10758cc1ce16', "aria-hidden": "true" })));
+        return (index.h(index.Host, { key: '682827ad99425147388230d9882e6db3dd1c730f', style: { height: this.height, width: this.width } }, index.h("span", { key: '4cdee71037f4610f9894c0f6a365f949cfb29d47', "aria-hidden": "true" })));
     }
 };
 SkeletonRectangle.style = WcsSkeletonRectangleStyle0;

package/dist/cjs/wcs-skeleton-text.cjs.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SkeletonText = class {
         this.height = 'body';
     }
     render() {
-        return index.h("span", { key: 'ba89cefda296d6c9fec4c035756a12deddfc35e3', "aria-hidden": "true" });
+        return index.h("span", { key: '59b1ed8722675d4483d8e3b36939bb4d5802f715', "aria-hidden": "true" });
     }
 };
 SkeletonText.style = WcsSkeletonTextStyle0;

package/dist/cjs/wcs-switch.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-2f1a8ddc.js');
+const helpers = require('./helpers-eaafd588.js');
 const controlComponentInterface = require('./control-component-interface-d9b68f28.js');
 const switchCss = ":host{--wcs-switch-background-color-initial:var(--wcs-semantic-color-background-control-indicator-default);--wcs-switch-background-color-final:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-switch-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-switch-background-color-disabled-selected:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-switch-background-color-hover-selected:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-switch-padding-horizontal:var(--wcs-semantic-spacing-small);--wcs-switch-padding-vertical:calc((var(--wcs-switch-height) - var(--wcs-switch-dot-size)) / 2);--wcs-switch-dot-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-switch-dot-color-selected:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-switch-dot-color-disabled:var(--wcs-semantic-color-foreground-control-indicator-disabled);--wcs-switch-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-switch-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-switch-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-switch-text-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-switch-text-font-weight-selected:var(--wcs-semantic-font-weight-medium);--wcs-switch-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-switch-dot-translate-x:calc(var(--wcs-switch-width) - var(--wcs-switch-dot-size) - (2 * var(--wcs-switch-padding-horizontal)));--wcs-switch-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-switch-dot-size:0.875rem;--wcs-switch-height:var(--wcs-semantic-size-xs);--wcs-switch-width:var(--wcs-semantic-size-l);--wcs-switch-border-radius:var(--wcs-semantic-border-radius-full);--wcs-switch-gap:var(--wcs-semantic-spacing-base);display:inline-flex}:host([disabled]) .text{color:var(--wcs-switch-text-color-disabled)}:host([disabled]) .wcs-container{cursor:not-allowed}.wcs-container{position:relative;display:flex;user-select:none;margin-bottom:0;gap:var(--wcs-switch-gap)}.wcs-container:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-switch-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-switch-border-radius)}@supports not selector(.wcs-container:has(input:focus-visible)){.wcs-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-switch-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-switch-border-radius)}}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:0;width:0}.text{color:var(--wcs-switch-text-color-default);font-weight:var(--wcs-switch-text-font-weight-default);line-height:1.375}.wcs-container:not([aria-disabled]) input:checked~.text{font-weight:var(--wcs-switch-text-font-weight-selected);color:var(--wcs-switch-text-color-selected)}.wcs-checkmark::before{position:absolute;transition:all var(--wcs-switch-transition-duration) ease-out}.wcs-checkmark::before{bottom:var(--wcs-switch-padding-vertical);left:var(--wcs-switch-padding-horizontal);width:var(--wcs-switch-dot-size);height:var(--wcs-switch-dot-size);content:\"\";border-radius:50%;background-color:var(--wcs-switch-dot-color-default)}:host([disabled]:not([checked])) .wcs-checkmark::before{background-color:var(--wcs-switch-dot-color-disabled)}:host([disabled]:not([checked])) .wcs-checkmark{background-color:var(--wcs-switch-background-color-disabled)}:host([disabled][checked]) .wcs-checkmark{background-color:var(--wcs-switch-background-color-disabled-selected)}:host([disabled]) .text{color:var(--wcs-switch-text-color-disabled)}.wcs-checkmark{top:0;right:0;bottom:0;left:0;width:var(--wcs-switch-width);height:var(--wcs-switch-height);border-radius:var(--wcs-switch-border-radius);background-color:var(--wcs-switch-background-color-initial);min-width:3rem;position:relative}.wcs-container:not([aria-disabled]){cursor:pointer}input:not([disabled]):checked+.wcs-checkmark::before,.wcs-container:focus input:not([disabled])+.wcs-checkmark::before{background-color:var(--wcs-switch-dot-color-selected)}input:checked+.wcs-checkmark::before{transform:translateX(var(--wcs-switch-dot-translate-x))}input:not([disabled]):checked+.wcs-checkmark{background-color:var(--wcs-switch-background-color-final)}.wcs-container:hover input:not([disabled]):checked+.wcs-checkmark{background-color:var(--wcs-switch-background-color-hover-selected)}";
@@ -65,7 +65,7 @@ const Switch = class {
         return controlComponentInterface.getSlottedContentText(this.el);
     }
     render() {
-        return (index.h(index.Host, { key: 'cedd87377ee17731f5422f42117321f23d944281' }, index.h("label", { key: '1bb8e511921d30ccf6153738eb6a0844ea3f4082', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, index.h("input", Object.assign({ key: 'b05af8decb4cd3c23b2c814fd849612370c896e6', onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), onClick: this.handleInputClick.bind(this), onFocus: this.handleFocus.bind(this), checked: this.checked, id: this.name, class: "wcs-switch", type: "checkbox", name: this.name, disabled: this.disabled, ref: el => { this.nativeInput = el; } }, this.inheritedAttributes)), index.h("span", { key: 'fcc0664435cb4d40d6fd95571ff233ae44806f58', class: "wcs-checkmark" }), index.h("span", { key: '67a951e606c537e911352799de289e4eefc87e23', class: "text" }, index.h("slot", { key: 'dbe2ced66c88f5184144661215c9332d464c01fc' })))));
+        return (index.h(index.Host, { key: '84f13bc693503d19ff543c0ff9d915b5759a74c6' }, index.h("label", { key: 'f0230dcdccdcb5673f3f250850427383ef8962eb', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, index.h("input", Object.assign({ key: 'ca40b1867d863bb3a93d48faf12e21bca9349c45', onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), onClick: this.handleInputClick.bind(this), onFocus: this.handleFocus.bind(this), checked: this.checked, id: this.name, class: "wcs-switch", type: "checkbox", name: this.name, disabled: this.disabled, ref: el => { this.nativeInput = el; } }, this.inheritedAttributes)), index.h("span", { key: 'b0fa80ef305db1fc2ba59f00502968b36c6a3b27', class: "wcs-checkmark" }), index.h("span", { key: 'f0ad8d08234489bd9a8f6df9c98f1bc8c1267166', class: "text" }, index.h("slot", { key: 'ff27b093741e17a5b0440cd5cfc4eb09a14eee49' })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wcs-tab.cjs.entry.js CHANGED Viewed

@@ -18,7 +18,7 @@ const Tab = class {
         this.tabLoaded.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '794409fa3f716ebb644a961702f98908d396c9e2', slot: "wcs-tab", role: "tabpanel" }, index.h("slot", { key: '9d98f7701d339eb5a1c3a9680595d7e5e88beba6' })));
+        return (index.h(index.Host, { key: '2dc9b94bb8055841fc1d2fbf6828d8fb9d0d26ea', slot: "wcs-tab", role: "tabpanel" }, index.h("slot", { key: '6a6558b3857c3b8302e9b5680284a0dd14352fed' })));
     }
 };
 Tab.style = WcsTabStyle0;

package/dist/cjs/wcs-tabs.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-2f1a8ddc.js');
+const helpers = require('./helpers-eaafd588.js');
 const selectArrow = require('./select-arrow-a8a47fe4.js');
 const popper = require('./popper-1b61df21.js');
@@ -306,7 +306,7 @@ const Tabs = class {
         return (this.headers.map((header, idx) => index.h("div", { class: 'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : ''), onClick: () => this.selectTabAndEmitChangeEvent(idx), onKeyDown: evt => this.handleKeyDown(evt, idx), tabIndex: this.currentActiveTabIndex === idx ? 0 : -1, role: "tab", id: `tabs-id-${this.tabsId}-tab-id-${idx}`, "aria-controls": `tabs-id-${this.tabsId}-tab-panel-${idx}`, "aria-label": header, "aria-selected": this.currentActiveTabIndex === idx ? 'true' : 'false' }, index.h("span", null, header))));
     }
     render() {
-        return (index.h(index.Host, { key: '072fa3551b320a6415c20a3107500f2bee2aa690' }, index.h("div", Object.assign({ key: '294008dc27c2ff694119c3ce136caf866a0802b3', class: "wcs-tabs-headers", role: this.mobile ? null : 'tablist', ref: (el) => (this.nativeTablist = el), "aria-orientation": this.mobile ? null : 'horizontal', "aria-label": this.mobile ? null : this.description }, (!this.mobile && this.inheritedAttributes)), this.mobile ? this.mobileLayout() : this.desktopLayout()), index.h("div", { key: 'd20bb48fe80434a6797c86d206a86d11081b92ea', class: "wcs-tabs" }, index.h("slot", { key: 'd4a31047e41627dc9c2cfb63f201e5e7ddc40f15', onSlotchange: () => this.onTabsSlotChange(), name: "wcs-tab" }))));
+        return (index.h(index.Host, { key: '75568ca6a7aeec231dd3cf6635af3097abc2fa37' }, index.h("div", Object.assign({ key: 'd42b3e1963f66f46197ab9c91efc2a12fc103fad', class: "wcs-tabs-headers", role: this.mobile ? null : 'tablist', ref: (el) => (this.nativeTablist = el), "aria-orientation": this.mobile ? null : 'horizontal', "aria-label": this.mobile ? null : this.description }, (!this.mobile && this.inheritedAttributes)), this.mobile ? this.mobileLayout() : this.desktopLayout()), index.h("div", { key: '8037e7b015386894daa212ed1d461cbaf4910848', class: "wcs-tabs" }, index.h("slot", { key: '23c47cc557cb6d2a01173ca4a86790b39e2fd97f', onSlotchange: () => this.onTabsSlotChange(), name: "wcs-tab" }))));
     }
     /**
      * Observe when a new tab panel is added to the slot to let's handle accessibility properties for tabs panel:

package/dist/cjs/wcs-textarea.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-2f1a8ddc.js');
+const helpers = require('./helpers-eaafd588.js');
 const textareaCss = ":host{--wcs-textarea-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-textarea-value-color:var(--wcs-semantic-color-text-primary);--wcs-textarea-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-textarea-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-textarea-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-textarea-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-textarea-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-textarea-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-textarea-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-textarea-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-textarea-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-textarea-border-style-default:solid;--wcs-textarea-border-style-error:solid;--wcs-textarea-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-internal-textarea-border-radius-left:var(--wcs-textarea-border-radius-left, var(--wcs-semantic-border-radius-base));--wcs-internal-textarea-border-radius-right:var(--wcs-textarea-border-radius-right, var(--wcs-semantic-border-radius-base));--wcs-textarea-border-width:var(--wcs-semantic-border-width-default);--wcs-textarea-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-textarea-gap:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-top:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-internal-textarea-padding-left:var(--wcs-textarea-padding-left, var(--wcs-semantic-spacing-large));--wcs-internal-textarea-padding-right:var(--wcs-textarea-padding-right, var(--wcs-semantic-spacing-large));--wcs-textarea-min-height:var(--wcs-semantic-size-m);--wcs-internal-textarea-max-height:var(--wcs-textarea-max-height, unset);--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-default);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-textarea-gap);width:100%;border-radius:var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);background-color:var(--wcs-textarea-background-color);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-default);outline-offset:calc(-1 * var(--wcs-textarea-border-width));background-clip:padding-box;box-sizing:border-box}:host textarea{box-sizing:border-box;font-family:inherit;overflow:auto;flex:1;width:100%;min-height:var(--wcs-textarea-min-height);max-height:var(--wcs-internal-textarea-max-height);background-color:transparent;color:var(--wcs-textarea-value-color);font-weight:var(--wcs-textarea-value-font-weight) !important;border:none;padding-top:var(--wcs-textarea-padding-top);padding-bottom:var(--wcs-textarea-padding-bottom);padding-left:var(--wcs-internal-textarea-padding-left);padding-right:var(--wcs-internal-textarea-padding-right);font-size:1rem;line-height:1.5}:host textarea::placeholder{color:var(--wcs-textarea-placeholder-color);opacity:1;font-weight:var(--wcs-textarea-placeholder-font-weight);font-style:var(--wcs-textarea-placeholder-font-style)}:host textarea:focus{box-shadow:none;outline:0}:host wcs-mat-icon{margin-left:var(--wcs-internal-textarea-padding-left);color:var(--wcs-textarea-icon-color-default)}:host([disabled]){--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-disabled);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-disabled)}:host([disabled]) textarea{color:var(--wcs-textarea-text-color-disabled);cursor:not-allowed}:host([disabled]) textarea::placeholder{color:var(--wcs-textarea-text-color-disabled)}:host([disabled]) wcs-mat-icon{color:var(--wcs-textarea-icon-color-disabled)}:host([icon]) textarea{padding-left:0}:host([state=error]){outline-color:var(--wcs-textarea-border-color-error) !important}:host(:focus-within){outline:var(--wcs-textarea-border-style-focus) var(--wcs-textarea-border-width-focus) var(--wcs-textarea-border-color-focus);outline-offset:calc(var(--wcs-textarea-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-textarea-icon-color-focus)}";
 const WcsTextareaStyle0 = textareaCss;
@@ -136,7 +136,7 @@ const Textarea = class {
     render() {
         const value = this.getValue();
         const style = Object.assign({}, (this.resize && { 'resize': this.resize }));
-        return (index.h(index.Host, { key: '2ffd19f34c0feb9a49931942e48d7b7193ff377e', "aria-disabled": this.disabled ? 'true' : null }, this.icon ? (index.h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, index.h("textarea", Object.assign({ key: 'ce0c430d962cf93b962c7a6227ec98d6cfcc46f0', class: "native-textarea", ref: el => this.nativeInput = el, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, style: style }, this.inheritedAttributes), value)));
+        return (index.h(index.Host, { key: '73730d741ba11707127e14964e9e5017438ef626', "aria-disabled": this.disabled ? 'true' : null }, this.icon ? (index.h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, index.h("textarea", Object.assign({ key: 'ceef50fd9ab18c377a6af07c737e7882381a0c3a', class: "native-textarea", ref: el => this.nativeInput = el, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, style: style }, this.inheritedAttributes), value)));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wcs-tooltip.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
 const popper = require('./popper-1b61df21.js');
-const helpers = require('./helpers-2f1a8ddc.js');
+const helpers = require('./helpers-eaafd588.js');
 const mutableAriaAttribute = require('./mutable-aria-attribute-342a2304.js');
 /**!
@@ -1652,7 +1652,7 @@ const Tooltip = class {
         (_a = this.tippyInstance) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     render() {
-        return (index.h(index.Host, { key: '34f019e113250ce19d69186080c932f838ac5c86', role: "tooltip" }, index.h("slot", { key: '7edce2cfc96d454177668c81d615231369600977', onSlotchange: _ => this.updateTippyContent() })));
+        return (index.h(index.Host, { key: '1176204e4bb1cb9d64ae9ec886723cbaa61186d3', role: "tooltip" }, index.h("slot", { key: 'ae9c0e875c10486f51796eca6cbb64efd16ae5f6', onSlotchange: _ => this.updateTippyContent() })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/wcs.cjs.js CHANGED Viewed

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"wcs-editable-field.cjs\",[[1,\"wcs-editable-field\",{\"type\":[1],\"label\":[1],\"readonly\":[516],\"value\":[1032],\"validateFn\":[16],\"formatFn\":[16],\"errorMsg\":[1,\"error-msg\"],\"size\":[513],\"currentState\":[32],\"isError\":[32]},[[8,\"click\",\"onWindowClickEvent\"]],{\"value\":[\"onValueChange\"]}]]],[\"wcs-grid-pagination.cjs\",[[1,\"wcs-grid-pagination\",{\"availablePageSizes\":[16],\"currentPage\":[1026,\"current-page\"],\"pageSize\":[2,\"page-size\"],\"itemsCount\":[2,\"items-count\"],\"pageCount\":[2,\"page-count\"],\"setAriaAttribute\":[64]}]]],[\"wcs-alert-drawer.cjs\",[[1,\"wcs-alert-drawer\",{\"position\":[513],\"timeout\":[2],\"showProgressBar\":[4,\"show-progress-bar\"],\"show\":[64]}]]],[\"wcs-horizontal-stepper.cjs\",[[1,\"wcs-horizontal-stepper\",{\"currentStep\":[1026,\"current-step\"],\"steps\":[16],\"mode\":[1],\"checkOnComplete\":[516,\"check-on-complete\"],\"internalCurrentStepIndex\":[32],\"previous\":[64],\"next\":[64]},null,{\"currentStep\":[\"onCurrentStepChange\"]}]]],[\"wcs-breadcrumb.cjs\",[[1,\"wcs-breadcrumb\",{\"maxItems\":[2,\"max-items\"],\"itemsBeforeCollapse\":[2,\"items-before-collapse\"],\"itemsAfterCollapse\":[2,\"items-after-collapse\"],\"ariaLabelExpandButton\":[1,\"aria-label-expand-button\"],\"showHiddenItems\":[32],\"setAriaAttribute\":[64]},null,{\"maxItems\":[\"handleCollapsePropsChange\"],\"itemsBeforeCollapse\":[\"handleCollapsePropsChange\"],\"itemsAfterCollapse\":[\"handleCollapsePropsChange\"],\"ariaLabelExpandButton\":[\"handleAriaLabelExpandBtnChange\"]}]]],[\"wcs-counter.cjs\",[[17,\"wcs-counter\",{\"size\":[513],\"label\":[1],\"disabled\":[516],\"min\":[1026],\"max\":[1026],\"step\":[1026],\"value\":[1026],\"displayedValue\":[32],\"setAriaAttribute\":[64]},null,{\"value\":[\"valueChange\"]}]]],[\"wcs-grid.cjs\",[[1,\"wcs-grid\",{\"serverMode\":[516,\"server-mode\"],\"data\":[16],\"loading\":[516],\"selectionConfig\":[1,\"selection-config\"],\"selectedItems\":[8,\"selected-items\"],\"wcsGridPaginationId\":[1,\"wcs-grid-pagination-id\"],\"rowIdPath\":[1,\"row-id-path\"],\"rowCssPartsFn\":[16],\"columns\":[32],\"paginationEl\":[32],\"rows\":[32],\"cursorPosition\":[32],\"focusFirstCell\":[64],\"setAriaAttribute\":[64]},[[0,\"focus\",\"onFocus\"],[0,\"blur\",\"onBlur\"],[0,\"wcsHiddenChange\",\"onHiddenColumnChange\"],[0,\"keydown\",\"onKeyDown\"],[1,\"mousedown\",\"onClick\"],[0,\"wcsSortChange\",\"sortChangeEventHandler\"],[0,\"wcsGridPaginationChange\",\"paginationChangeEventHandler\"],[8,\"wcsGridPaginationChange\",\"paginationChangeEventHandlerOutside\"]],{\"cursorPosition\":[\"onCursorPositionChange\"],\"data\":[\"onDataChange\"],\"selectedItems\":[\"onSelectedItemsPropertyChange\"]}]]],[\"wcs-modal.cjs\",[[4,\"wcs-modal\",{\"withoutBackdrop\":[516,\"without-backdrop\"],\"show\":[1540],\"showCloseButton\":[516,\"show-close-button\"],\"closeButtonAriaLabel\":[1,\"close-button-aria-label\"],\"size\":[1],\"hideActions\":[516,\"hide-actions\"],\"modalTriggerControlsId\":[1,\"modal-trigger-controls-id\"],\"initialFocusElementId\":[1,\"initial-focus-element-id\"],\"disableAutoFocus\":[516,\"disable-auto-focus\"],\"setAriaAttribute\":[64]},[[4,\"keydown\",\"onKeyDown\"]],{\"show\":[\"onShowChange\"]}]]],[\"wcs-dropdown.cjs\",[[17,\"wcs-dropdown\",{\"noArrow\":[516,\"no-arrow\"],\"mode\":[1],\"shape\":[1],\"size\":[1],\"disabled\":[516],\"placement\":[1],\"expanded\":[32],\"setAriaAttribute\":[64]},[[0,\"blur\",\"onBlur\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"wcsDropdownItemClick\",\"dropdownItemClick\"],[0,\"keydown\",\"onKeyDown\"]],{\"placement\":[\"placementChange\"]}]]],[\"wcs-galactic-menu.cjs\",[[1,\"wcs-galactic-menu\",{\"text\":[1],\"showPopoverMenu\":[32],\"setAriaAttribute\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-input.cjs\",[[17,\"wcs-input\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"accept\":[1],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"debounce\":[2],\"prefixLabel\":[1,\"prefix-label\"],\"suffixLabel\":[1,\"suffix-label\"],\"disabled\":[516],\"enterkeyhint\":[1],\"size\":[513],\"icon\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[516],\"name\":[1],\"hidePasswordButtonAriaLabel\":[1,\"hide-password-button-aria-label\"],\"showPasswordButtonAriaLabel\":[1,\"show-password-button-aria-label\"],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[516],\"spellcheck\":[4],\"state\":[513],\"step\":[1],\"type\":[1],\"value\":[1032],\"passwordReveal\":[32],\"setBlur\":[64],\"getInputElement\":[64],\"setAriaAttribute\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"passwordReveal\":[\"onPasswordRevealChange\"]}]]],[\"wcs-textarea.cjs\",[[17,\"wcs-textarea\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"autocapitalize\":[1],\"autofocus\":[4],\"debounce\":[2],\"disabled\":[516],\"icon\":[1],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[516],\"spellcheck\":[4],\"state\":[513],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"autoGrow\":[516,\"auto-grow\"],\"value\":[1025],\"resize\":[513],\"setAriaAttribute\":[64],\"fitContent\":[64],\"setBlur\":[64],\"getInputElement\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}]]],[\"wcs-accordion.cjs\",[[1,\"wcs-accordion\",{\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"],\"multiExpandable\":[4,\"multi-expandable\"]},[[0,\"wcsOpenChange\",\"wcsOpenChangeHandler\"]],{\"hideActionText\":[\"updateHideActiontextOnPanel\"],\"highlight\":[\"updateHighlightOnPanel\"],\"groupContentWithHeader\":[\"updateGroupContentWithHeader\"]}]]],[\"wcs-accordion-content.cjs\",[[1,\"wcs-accordion-content\"]]],[\"wcs-accordion-header.cjs\",[[1,\"wcs-accordion-header\"]]],[\"wcs-accordion-panel.cjs\",[[1,\"wcs-accordion-panel\",{\"open\":[1540],\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"],\"setAriaAttribute\":[64],\"close\":[64]},null,{\"open\":[\"openChange\"]}]]],[\"wcs-action-bar.cjs\",[[1,\"wcs-action-bar\",{\"gutter\":[516],\"hasTabs\":[32]}]]],[\"wcs-app.cjs\",[[1,\"wcs-app\"]]],[\"wcs-badge.cjs\",[[1,\"wcs-badge\",{\"shape\":[1],\"color\":[1],\"size\":[513]}]]],[\"wcs-breadcrumb-item.cjs\",[[1,\"wcs-breadcrumb-item\",{\"last\":[4]}]]],[\"wcs-card.cjs\",[[1,\"wcs-card\",{\"mode\":[1537],\"orientation\":[513]},null,{\"orientation\":[\"orientationChanged\"]}]]],[\"wcs-card-body.cjs\",[[1,\"wcs-card-body\",{\"orientation\":[32],\"setOrientation\":[64]}]]],[\"wcs-card-content.cjs\",[[1,\"wcs-card-content\"]]],[\"wcs-card-footer.cjs\",[[1,\"wcs-card-footer\"]]],[\"wcs-card-header.cjs\",[[1,\"wcs-card-header\"]]],[\"wcs-card-media.cjs\",[[1,\"wcs-card-media\",{\"orientation\":[32],\"setOrientation\":[64]}]]],[\"wcs-chip.cjs\",[[1,\"wcs-chip\",{\"value\":[1],\"label\":[1],\"selected\":[516],\"open\":[516],\"disabled\":[516],\"variant\":[513],\"mode\":[513]}]]],[\"wcs-com-nav.cjs\",[[1,\"wcs-com-nav\",{\"appName\":[1,\"app-name\"],\"mobileMenuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64]},[[0,\"wcsClickOnFinalAction\",\"onClickOnFinalAction\"],[8,\"keydown\",\"exitMobileMenuOnKeyDown\"]]]]],[\"wcs-com-nav-category.cjs\",[[1,\"wcs-com-nav-category\",{\"label\":[1],\"categoryOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsCategoryOpened\",\"onSubmenuOpened\"]]]]],[\"wcs-com-nav-item.cjs\",[[1,\"wcs-com-nav-item\",null,[[0,\"click\",\"onClick\"]]]]],[\"wcs-com-nav-submenu.cjs\",[[1,\"wcs-com-nav-submenu\",{\"label\":[1],\"panelTitle\":[1,\"panel-title\"],\"panelDescription\":[1,\"panel-description\"],\"menuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsSubmenuOpened\",\"onSubmenuOpened\"],[8,\"keydown\",\"onEscapeKeyDown\"],[0,\"wcsClickOnFinalAction\",\"wcsCategoryItemClickedHandler\"]]]]],[\"wcs-divider.cjs\",[[1,\"wcs-divider\"]]],[\"wcs-dropdown-divider.cjs\",[[1,\"wcs-dropdown-divider\"]]],[\"wcs-dropdown-header.cjs\",[[1,\"wcs-dropdown-header\"]]],[\"wcs-dropdown-item.cjs\",[[4,\"wcs-dropdown-item\",null,[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-field.cjs\",[[1,\"wcs-field\"]]],[\"wcs-field-content.cjs\",[[1,\"wcs-field-content\"]]],[\"wcs-field-label.cjs\",[[1,\"wcs-field-label\"]]],[\"wcs-footer.cjs\",[[1,\"wcs-footer\"]]],[\"wcs-galactic.cjs\",[[1,\"wcs-galactic\",{\"text\":[1],\"show\":[32]}]]],[\"wcs-grid-column.cjs\",[[1,\"wcs-grid-column\",{\"path\":[1],\"name\":[1],\"sort\":[516],\"sortFn\":[16],\"formatter\":[16],\"sortOrder\":[1025,\"sort-order\"],\"width\":[1],\"customCells\":[516,\"custom-cells\"],\"hidden\":[516],\"cursorPosition\":[16],\"columnPosition\":[2,\"column-position\"],\"setAriaAttribute\":[64]},null,{\"hidden\":[\"parseMyObjectProp\"],\"sortOrder\":[\"sortOrderChange\"]}]]],[\"wcs-grid-custom-cell.cjs\",[[1,\"wcs-grid-custom-cell\",{\"columnId\":[1,\"column-id\"],\"rowId\":[8,\"row-id\"]}]]],[\"wcs-header.cjs\",[[1,\"wcs-header\",{\"setAriaAttribute\":[64]}]]],[\"wcs-hint.cjs\",[[1,\"wcs-hint\",{\"small\":[1540]}]]],[\"wcs-icon.cjs\",[[0,\"wcs-icon\",{\"icon\":[1],\"size\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-list-item.cjs\",[[1,\"wcs-list-item\",{\"activated\":[1540]}]]],[\"wcs-list-item-properties.cjs\",[[1,\"wcs-list-item-properties\"]]],[\"wcs-list-item-property.cjs\",[[1,\"wcs-list-item-property\"]]],[\"wcs-native-select.cjs\",[[1,\"wcs-native-select\",{\"size\":[513],\"required\":[516],\"expanded\":[32],\"disabled\":[32],\"setAriaAttribute\":[64],\"updateStyles\":[64]},null,{\"required\":[\"requiredChanged\"]}]]],[\"wcs-nav.cjs\",[[1,\"wcs-nav\",{\"setAriaAttribute\":[64]}]]],[\"wcs-nav-item.cjs\",[[4,\"wcs-nav-item\",null,[[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-progress-radial.cjs\",[[1,\"wcs-progress-radial\",{\"size\":[2],\"showLabel\":[516,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-radio.cjs\",[[17,\"wcs-radio\",{\"value\":[1544],\"label\":[1537],\"disabled\":[1540],\"name\":[1025],\"mode\":[513],\"checked\":[32],\"radioTabIndex\":[32],\"updateState\":[64],\"setTabIndex\":[64],\"setAriaAttribute\":[64]}]]],[\"wcs-radio-group.cjs\",[[1,\"wcs-radio-group\",{\"value\":[1032],\"name\":[520],\"mode\":[513],\"setAriaAttribute\":[64]},[[0,\"wcsRadioClick\",\"handleRadioClick\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[\"onValueChangeHandler\"],\"name\":[\"updateAllRadioModeAndName\"],\"mode\":[\"updateAllRadioModeAndName\"]}]]],[\"wcs-skeleton-circle.cjs\",[[1,\"wcs-skeleton-circle\",{\"animation\":[513],\"radius\":[514]}]]],[\"wcs-skeleton-rectangle.cjs\",[[1,\"wcs-skeleton-rectangle\",{\"animation\":[513],\"rounded\":[516],\"height\":[513],\"width\":[513]}]]],[\"wcs-skeleton-text.cjs\",[[1,\"wcs-skeleton-text\",{\"animation\":[513],\"height\":[1]}]]],[\"wcs-switch.cjs\",[[17,\"wcs-switch\",{\"name\":[1],\"checked\":[516],\"labelAlignment\":[513,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-tab.cjs\",[[1,\"wcs-tab\",{\"header\":[513],\"itemKey\":[8,\"item-key\"]}]]],[\"wcs-tabs.cjs\",[[1,\"wcs-tabs\",{\"align\":[513],\"selectedIndex\":[2,\"selected-index\"],\"selectedKey\":[8,\"selected-key\"],\"headersOnly\":[516,\"headers-only\"],\"gutter\":[516],\"description\":[1],\"mobileOverlayExpanded\":[32],\"mobile\":[32],\"headers\":[32],\"currentActiveTabIndex\":[32],\"setAriaAttribute\":[64]},[[0,\"tabLoaded\",\"onTabLoaded\"],[8,\"click\",\"onWindowClickEvent\"]],{\"selectedIndex\":[\"selectedIndexChanged\"],\"selectedKey\":[\"selectedTabkeyChanged\"],\"mobile\":[\"onMobileChange\"]}]]],[\"wcs-tooltip.cjs\",[[1,\"wcs-tooltip\",{\"for\":[1],\"position\":[513],\"interactive\":[516],\"maxWidth\":[8,\"max-width\"],\"delay\":[2],\"duration\":[2],\"trigger\":[1],\"theme\":[1],\"content\":[1],\"appendTo\":[1,\"append-to\"],\"hide\":[64],\"show\":[64],\"disable\":[64],\"enable\":[64]},[[8,\"keydown\",\"handleKeyDown\"]],{\"interactive\":[\"updateProps\"],\"position\":[\"updateProps\"],\"maxWidth\":[\"updateProps\"],\"theme\":[\"updateProps\"],\"delay\":[\"updateProps\"],\"duration\":[\"updateProps\"],\"trigger\":[\"updateProps\"],\"content\":[\"updateTippyContent\"]}]]],[\"wcs-alert.cjs\",[[1,\"wcs-alert\",{\"show\":[1540],\"intent\":[513],\"timeout\":[2],\"showProgressBar\":[4,\"show-progress-bar\"]},[[1,\"mouseover\",\"mouseOverHandler\"],[1,\"mouseout\",\"mouseOutHandler\"]]]]],[\"wcs-progress-bar.cjs\",[[1,\"wcs-progress-bar\",{\"size\":[1],\"showLabel\":[516,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-checkbox.cjs\",[[17,\"wcs-checkbox\",{\"name\":[1],\"indeterminate\":[1540],\"checked\":[1540],\"required\":[4],\"labelAlignment\":[1537,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-select_2.cjs\",[[4,\"wcs-select-option\",{\"disabled\":[1540],\"selected\":[1540],\"highlighted\":[1540],\"value\":[8],\"chipColor\":[1,\"chip-color\"],\"chipBackgroundColor\":[1,\"chip-background-color\"],\"multiple\":[1540]},[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"handleKeydown\"]]],[1,\"wcs-select\",{\"size\":[513],\"value\":[1032],\"placeholder\":[1537],\"disabled\":[1540],\"required\":[516],\"multiple\":[516],\"autocomplete\":[516],\"serverMode\":[516,\"server-mode\"],\"filterFn\":[16],\"chips\":[516],\"name\":[1],\"compareWith\":[16],\"expanded\":[32],\"displayText\":[32],\"focused\":[32],\"showNoResultFoundLabel\":[32],\"autocompleteValue\":[32],\"overlayDirection\":[32],\"open\":[64],\"close\":[64],\"setAriaAttribute\":[64]},[[1,\"mouseup\",\"onMouseUp\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"],[0,\"wcsSelectOptionClick\",\"selectedOptionChanged\"],[0,\"focus\",\"onFocus\"],[2,\"blur\",\"onBlur\"]],{\"value\":[\"onValueChangeHandler\"]}]]],[\"wcs-error_3.cjs\",[[1,\"wcs-error\"],[1,\"wcs-form-field\",{\"isError\":[1540,\"is-error\"],\"hasPrefix\":[32],\"hasSuffix\":[32],\"spiedElement\":[32]},null,{\"isError\":[\"isErrorChange\"]}],[1,\"wcs-label\",{\"required\":[516],\"setAriaAttribute\":[64]}]]],[\"wcs-mat-icon.cjs\",[[1,\"wcs-mat-icon\",{\"icon\":[1],\"size\":[1],\"family\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-button_2.cjs\",[[17,\"wcs-button\",{\"type\":[1025],\"href\":[1],\"target\":[1],\"disabled\":[516],\"ripple\":[4],\"size\":[513],\"shape\":[513],\"mode\":[513],\"loading\":[1540],\"setAriaAttribute\":[64]},[[0,\"click\",\"onClick\"]],{\"ripple\":[\"onRippleChange\"]}],[1,\"wcs-spinner\",{\"mode\":[513]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"wcs-grid-pagination.cjs\",[[1,\"wcs-grid-pagination\",{\"availablePageSizes\":[16],\"currentPage\":[1026,\"current-page\"],\"pageSize\":[2,\"page-size\"],\"itemsCount\":[2,\"items-count\"],\"pageCount\":[2,\"page-count\"],\"setAriaAttribute\":[64]}]]],[\"wcs-editable-field.cjs\",[[1,\"wcs-editable-field\",{\"type\":[1],\"label\":[1],\"readonly\":[516],\"value\":[1032],\"validateFn\":[16],\"formatFn\":[16],\"errorMsg\":[1,\"error-msg\"],\"size\":[513],\"currentState\":[32],\"isError\":[32]},[[8,\"click\",\"onWindowClickEvent\"]],{\"value\":[\"onValueChange\"]}]]],[\"wcs-alert-drawer.cjs\",[[1,\"wcs-alert-drawer\",{\"position\":[513],\"timeout\":[2],\"showProgressBar\":[4,\"show-progress-bar\"],\"show\":[64],\"clear\":[64]}]]],[\"wcs-grid.cjs\",[[1,\"wcs-grid\",{\"serverMode\":[516,\"server-mode\"],\"data\":[16],\"loading\":[516],\"selectionConfig\":[1,\"selection-config\"],\"selectedItems\":[8,\"selected-items\"],\"wcsGridPaginationId\":[1,\"wcs-grid-pagination-id\"],\"rowIdPath\":[1,\"row-id-path\"],\"rowCssPartsFn\":[16],\"columns\":[32],\"paginationEl\":[32],\"rows\":[32],\"cursorPosition\":[32],\"focusFirstCell\":[64],\"setAriaAttribute\":[64]},[[0,\"focus\",\"onFocus\"],[0,\"blur\",\"onBlur\"],[0,\"wcsHiddenChange\",\"onHiddenColumnChange\"],[0,\"keydown\",\"onKeyDown\"],[1,\"mousedown\",\"onClick\"],[0,\"wcsSortChange\",\"sortChangeEventHandler\"],[0,\"wcsGridPaginationChange\",\"paginationChangeEventHandler\"],[8,\"wcsGridPaginationChange\",\"paginationChangeEventHandlerOutside\"]],{\"cursorPosition\":[\"onCursorPositionChange\"],\"data\":[\"onDataChange\"],\"selectedItems\":[\"onSelectedItemsPropertyChange\"]}]]],[\"wcs-horizontal-stepper.cjs\",[[1,\"wcs-horizontal-stepper\",{\"currentStep\":[1026,\"current-step\"],\"steps\":[16],\"mode\":[1],\"checkOnComplete\":[516,\"check-on-complete\"],\"internalCurrentStepIndex\":[32],\"previous\":[64],\"next\":[64]},null,{\"currentStep\":[\"onCurrentStepChange\"]}]]],[\"wcs-breadcrumb.cjs\",[[1,\"wcs-breadcrumb\",{\"maxItems\":[2,\"max-items\"],\"itemsBeforeCollapse\":[2,\"items-before-collapse\"],\"itemsAfterCollapse\":[2,\"items-after-collapse\"],\"ariaLabelExpandButton\":[1,\"aria-label-expand-button\"],\"showHiddenItems\":[32],\"setAriaAttribute\":[64]},null,{\"maxItems\":[\"handleCollapsePropsChange\"],\"itemsBeforeCollapse\":[\"handleCollapsePropsChange\"],\"itemsAfterCollapse\":[\"handleCollapsePropsChange\"],\"ariaLabelExpandButton\":[\"handleAriaLabelExpandBtnChange\"]}]]],[\"wcs-counter.cjs\",[[17,\"wcs-counter\",{\"size\":[513],\"label\":[1],\"disabled\":[516],\"min\":[1026],\"max\":[1026],\"step\":[1026],\"value\":[1026],\"displayedValue\":[32],\"setAriaAttribute\":[64]},null,{\"value\":[\"valueChange\"]}]]],[\"wcs-dropdown.cjs\",[[17,\"wcs-dropdown\",{\"noArrow\":[516,\"no-arrow\"],\"mode\":[1],\"shape\":[1],\"size\":[1],\"disabled\":[516],\"placement\":[1],\"expanded\":[32],\"setAriaAttribute\":[64]},[[0,\"blur\",\"onBlur\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"wcsDropdownItemClick\",\"dropdownItemClick\"],[0,\"keydown\",\"onKeyDown\"]],{\"placement\":[\"placementChange\"]}]]],[\"wcs-message.cjs\",[[1,\"wcs-message\",{\"intent\":[513],\"background\":[513],\"showCloseButton\":[516,\"show-close-button\"],\"showBorder\":[516,\"show-border\"]}]]],[\"wcs-modal.cjs\",[[4,\"wcs-modal\",{\"withoutBackdrop\":[516,\"without-backdrop\"],\"show\":[1540],\"showCloseButton\":[516,\"show-close-button\"],\"closeButtonAriaLabel\":[1,\"close-button-aria-label\"],\"size\":[1],\"hideActions\":[516,\"hide-actions\"],\"modalTriggerControlsId\":[1,\"modal-trigger-controls-id\"],\"initialFocusElementId\":[1,\"initial-focus-element-id\"],\"disableAutoFocus\":[516,\"disable-auto-focus\"],\"setAriaAttribute\":[64]},[[4,\"keydown\",\"onKeyDown\"]],{\"show\":[\"onShowChange\"]}]]],[\"wcs-galactic-menu.cjs\",[[1,\"wcs-galactic-menu\",{\"text\":[1],\"showPopoverMenu\":[32],\"setAriaAttribute\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-input.cjs\",[[17,\"wcs-input\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"accept\":[1],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"debounce\":[2],\"prefixLabel\":[1,\"prefix-label\"],\"suffixLabel\":[1,\"suffix-label\"],\"disabled\":[516],\"enterkeyhint\":[1],\"size\":[513],\"icon\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[516],\"name\":[1],\"hidePasswordButtonAriaLabel\":[1,\"hide-password-button-aria-label\"],\"showPasswordButtonAriaLabel\":[1,\"show-password-button-aria-label\"],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[516],\"spellcheck\":[4],\"state\":[513],\"step\":[1],\"type\":[1],\"value\":[1032],\"passwordReveal\":[32],\"setBlur\":[64],\"getInputElement\":[64],\"setAriaAttribute\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"passwordReveal\":[\"onPasswordRevealChange\"]}]]],[\"wcs-textarea.cjs\",[[17,\"wcs-textarea\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"autocapitalize\":[1],\"autofocus\":[4],\"debounce\":[2],\"disabled\":[516],\"icon\":[1],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[516],\"spellcheck\":[4],\"state\":[513],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"autoGrow\":[516,\"auto-grow\"],\"value\":[1025],\"resize\":[513],\"setAriaAttribute\":[64],\"fitContent\":[64],\"setBlur\":[64],\"getInputElement\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}]]],[\"wcs-accordion.cjs\",[[1,\"wcs-accordion\",{\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"],\"multiExpandable\":[4,\"multi-expandable\"]},[[0,\"wcsOpenChange\",\"wcsOpenChangeHandler\"]],{\"hideActionText\":[\"updateHideActiontextOnPanel\"],\"highlight\":[\"updateHighlightOnPanel\"],\"groupContentWithHeader\":[\"updateGroupContentWithHeader\"]}]]],[\"wcs-accordion-content.cjs\",[[1,\"wcs-accordion-content\"]]],[\"wcs-accordion-header.cjs\",[[1,\"wcs-accordion-header\"]]],[\"wcs-accordion-panel.cjs\",[[1,\"wcs-accordion-panel\",{\"open\":[1540],\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"],\"setAriaAttribute\":[64],\"close\":[64]},null,{\"open\":[\"openChange\"]}]]],[\"wcs-action-bar.cjs\",[[1,\"wcs-action-bar\",{\"gutter\":[516],\"hasTabs\":[32]}]]],[\"wcs-app.cjs\",[[1,\"wcs-app\"]]],[\"wcs-badge.cjs\",[[1,\"wcs-badge\",{\"shape\":[1],\"color\":[1],\"size\":[513]}]]],[\"wcs-breadcrumb-item.cjs\",[[1,\"wcs-breadcrumb-item\",{\"last\":[4]}]]],[\"wcs-card.cjs\",[[1,\"wcs-card\",{\"mode\":[1537],\"orientation\":[513]},null,{\"orientation\":[\"orientationChanged\"]}]]],[\"wcs-card-body.cjs\",[[1,\"wcs-card-body\",{\"orientation\":[32],\"setOrientation\":[64]}]]],[\"wcs-card-content.cjs\",[[1,\"wcs-card-content\"]]],[\"wcs-card-footer.cjs\",[[1,\"wcs-card-footer\"]]],[\"wcs-card-header.cjs\",[[1,\"wcs-card-header\"]]],[\"wcs-card-media.cjs\",[[1,\"wcs-card-media\",{\"orientation\":[32],\"setOrientation\":[64]}]]],[\"wcs-chip.cjs\",[[1,\"wcs-chip\",{\"value\":[1],\"label\":[1],\"selected\":[516],\"open\":[516],\"disabled\":[516],\"variant\":[513],\"mode\":[513]}]]],[\"wcs-com-nav.cjs\",[[1,\"wcs-com-nav\",{\"appName\":[1,\"app-name\"],\"mobileMenuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64]},[[0,\"wcsClickOnFinalAction\",\"onClickOnFinalAction\"],[8,\"keydown\",\"exitMobileMenuOnKeyDown\"]]]]],[\"wcs-com-nav-category.cjs\",[[1,\"wcs-com-nav-category\",{\"label\":[1],\"categoryOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsCategoryOpened\",\"onSubmenuOpened\"]]]]],[\"wcs-com-nav-item.cjs\",[[1,\"wcs-com-nav-item\",null,[[0,\"click\",\"onClick\"]]]]],[\"wcs-com-nav-submenu.cjs\",[[1,\"wcs-com-nav-submenu\",{\"label\":[1],\"panelTitle\":[1,\"panel-title\"],\"panelDescription\":[1,\"panel-description\"],\"menuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsSubmenuOpened\",\"onSubmenuOpened\"],[8,\"keydown\",\"onEscapeKeyDown\"],[0,\"wcsClickOnFinalAction\",\"wcsCategoryItemClickedHandler\"]]]]],[\"wcs-divider.cjs\",[[1,\"wcs-divider\"]]],[\"wcs-dropdown-divider.cjs\",[[1,\"wcs-dropdown-divider\"]]],[\"wcs-dropdown-header.cjs\",[[1,\"wcs-dropdown-header\"]]],[\"wcs-dropdown-item.cjs\",[[4,\"wcs-dropdown-item\",null,[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-field.cjs\",[[1,\"wcs-field\"]]],[\"wcs-field-content.cjs\",[[1,\"wcs-field-content\"]]],[\"wcs-field-label.cjs\",[[1,\"wcs-field-label\"]]],[\"wcs-footer.cjs\",[[1,\"wcs-footer\"]]],[\"wcs-galactic.cjs\",[[1,\"wcs-galactic\",{\"text\":[1],\"show\":[32]}]]],[\"wcs-grid-column.cjs\",[[1,\"wcs-grid-column\",{\"path\":[1],\"name\":[1],\"sort\":[516],\"sortFn\":[16],\"formatter\":[16],\"sortOrder\":[1025,\"sort-order\"],\"width\":[1],\"customCells\":[516,\"custom-cells\"],\"hidden\":[516],\"cursorPosition\":[16],\"columnPosition\":[2,\"column-position\"],\"setAriaAttribute\":[64]},null,{\"hidden\":[\"parseMyObjectProp\"],\"sortOrder\":[\"sortOrderChange\"]}]]],[\"wcs-grid-custom-cell.cjs\",[[1,\"wcs-grid-custom-cell\",{\"columnId\":[1,\"column-id\"],\"rowId\":[8,\"row-id\"]}]]],[\"wcs-header.cjs\",[[1,\"wcs-header\",{\"setAriaAttribute\":[64]}]]],[\"wcs-hint.cjs\",[[1,\"wcs-hint\",{\"small\":[1540]}]]],[\"wcs-icon.cjs\",[[0,\"wcs-icon\",{\"icon\":[1],\"size\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-list-item.cjs\",[[1,\"wcs-list-item\",{\"activated\":[1540]}]]],[\"wcs-list-item-properties.cjs\",[[1,\"wcs-list-item-properties\"]]],[\"wcs-list-item-property.cjs\",[[1,\"wcs-list-item-property\"]]],[\"wcs-native-select.cjs\",[[1,\"wcs-native-select\",{\"size\":[513],\"required\":[516],\"expanded\":[32],\"disabled\":[32],\"setAriaAttribute\":[64],\"updateStyles\":[64]},null,{\"required\":[\"requiredChanged\"]}]]],[\"wcs-nav.cjs\",[[1,\"wcs-nav\",{\"setAriaAttribute\":[64]}]]],[\"wcs-nav-item.cjs\",[[4,\"wcs-nav-item\",null,[[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-progress-radial.cjs\",[[1,\"wcs-progress-radial\",{\"size\":[2],\"showLabel\":[516,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-radio.cjs\",[[1,\"wcs-radio\",{\"value\":[1544],\"label\":[1537],\"disabled\":[1540],\"name\":[1025],\"mode\":[513],\"checked\":[32],\"radioTabIndex\":[32],\"updateState\":[64],\"setTabIndex\":[64],\"setAriaAttribute\":[64]}]]],[\"wcs-radio-group.cjs\",[[1,\"wcs-radio-group\",{\"value\":[1032],\"name\":[520],\"mode\":[513],\"setAriaAttribute\":[64]},[[0,\"wcsRadioClick\",\"handleRadioClick\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[\"onValueChangeHandler\"],\"name\":[\"updateAllRadioModeAndName\"],\"mode\":[\"updateAllRadioModeAndName\"]}]]],[\"wcs-skeleton-circle.cjs\",[[1,\"wcs-skeleton-circle\",{\"animation\":[513],\"radius\":[514]}]]],[\"wcs-skeleton-rectangle.cjs\",[[1,\"wcs-skeleton-rectangle\",{\"animation\":[513],\"rounded\":[516],\"height\":[513],\"width\":[513]}]]],[\"wcs-skeleton-text.cjs\",[[1,\"wcs-skeleton-text\",{\"animation\":[513],\"height\":[1]}]]],[\"wcs-switch.cjs\",[[17,\"wcs-switch\",{\"name\":[1],\"checked\":[516],\"labelAlignment\":[513,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-tab.cjs\",[[1,\"wcs-tab\",{\"header\":[513],\"itemKey\":[8,\"item-key\"]}]]],[\"wcs-tabs.cjs\",[[1,\"wcs-tabs\",{\"align\":[513],\"selectedIndex\":[2,\"selected-index\"],\"selectedKey\":[8,\"selected-key\"],\"headersOnly\":[516,\"headers-only\"],\"gutter\":[516],\"description\":[1],\"mobileOverlayExpanded\":[32],\"mobile\":[32],\"headers\":[32],\"currentActiveTabIndex\":[32],\"setAriaAttribute\":[64]},[[0,\"tabLoaded\",\"onTabLoaded\"],[8,\"click\",\"onWindowClickEvent\"]],{\"selectedIndex\":[\"selectedIndexChanged\"],\"selectedKey\":[\"selectedTabkeyChanged\"],\"mobile\":[\"onMobileChange\"]}]]],[\"wcs-tooltip.cjs\",[[1,\"wcs-tooltip\",{\"for\":[1],\"position\":[513],\"interactive\":[516],\"maxWidth\":[8,\"max-width\"],\"delay\":[2],\"duration\":[2],\"trigger\":[1],\"theme\":[1],\"content\":[1],\"appendTo\":[1,\"append-to\"],\"hide\":[64],\"show\":[64],\"disable\":[64],\"enable\":[64]},[[8,\"keydown\",\"handleKeyDown\"]],{\"interactive\":[\"updateProps\"],\"position\":[\"updateProps\"],\"maxWidth\":[\"updateProps\"],\"theme\":[\"updateProps\"],\"delay\":[\"updateProps\"],\"duration\":[\"updateProps\"],\"trigger\":[\"updateProps\"],\"content\":[\"updateTippyContent\"]}]]],[\"wcs-alert.cjs\",[[1,\"wcs-alert\",{\"show\":[1540],\"intent\":[513],\"timeout\":[2],\"showProgressBar\":[4,\"show-progress-bar\"]},[[1,\"mouseover\",\"mouseOverHandler\"],[1,\"mouseout\",\"mouseOutHandler\"]]]]],[\"wcs-progress-bar.cjs\",[[1,\"wcs-progress-bar\",{\"size\":[1],\"showLabel\":[516,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-checkbox.cjs\",[[17,\"wcs-checkbox\",{\"name\":[1],\"indeterminate\":[1540],\"checked\":[1540],\"required\":[4],\"labelAlignment\":[1537,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-select_2.cjs\",[[4,\"wcs-select-option\",{\"disabled\":[1540],\"selected\":[1540],\"highlighted\":[1540],\"value\":[8],\"chipColor\":[1,\"chip-color\"],\"chipBackgroundColor\":[1,\"chip-background-color\"],\"multiple\":[1540]},[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"handleKeydown\"]]],[1,\"wcs-select\",{\"size\":[513],\"value\":[1032],\"placeholder\":[1537],\"disabled\":[1540],\"required\":[516],\"multiple\":[516],\"autocomplete\":[516],\"serverMode\":[516,\"server-mode\"],\"filterFn\":[16],\"chips\":[516],\"name\":[1],\"compareWith\":[16],\"expanded\":[32],\"displayText\":[32],\"focused\":[32],\"showNoResultFoundLabel\":[32],\"autocompleteValue\":[32],\"overlayDirection\":[32],\"open\":[64],\"close\":[64],\"setAriaAttribute\":[64]},[[1,\"mouseup\",\"onMouseUp\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"],[0,\"wcsSelectOptionClick\",\"selectedOptionChanged\"],[0,\"focus\",\"onFocus\"],[2,\"blur\",\"onBlur\"]],{\"value\":[\"onValueChangeHandler\"]}]]],[\"wcs-error_3.cjs\",[[1,\"wcs-error\"],[1,\"wcs-form-field\",{\"isError\":[1540,\"is-error\"],\"hasPrefix\":[32],\"hasSuffix\":[32],\"spiedElement\":[32]},null,{\"isError\":[\"isErrorChange\"]}],[1,\"wcs-label\",{\"required\":[516],\"setAriaAttribute\":[64]}]]],[\"wcs-button_3.cjs\",[[17,\"wcs-button\",{\"type\":[1025],\"href\":[1],\"startIcon\":[1,\"start-icon\"],\"endIcon\":[1,\"end-icon\"],\"target\":[1],\"disabled\":[516],\"ripple\":[4],\"size\":[513],\"shape\":[513],\"mode\":[513],\"loading\":[1540],\"setAriaAttribute\":[64]},[[0,\"click\",\"onClick\"]],{\"ripple\":[\"onRippleChange\"]}],[1,\"wcs-spinner\",{\"mode\":[513]}],[1,\"wcs-mat-icon\",{\"icon\":[1],\"size\":[1],\"family\":[1],\"setAriaAttribute\":[64]}]]]]"), options);
 });
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -53,6 +53,7 @@
     "components/list-item-properties/list-item-properties.js",
     "components/list-item-property/list-item-property.js",
     "components/mat-icon/mat-icon.js",
+    "components/message/message.js",
     "components/modal/modal.js",
     "components/native-select/native-select.js",
     "components/nav/nav.js",

package/dist/collection/components/alert/alert-close-button.js ADDED Viewed

@@ -0,0 +1,3 @@
+import { h } from "@stencil/core";
+export const AlertCloseButton = ({ onClick }) => (h("wcs-button", { shape: "round", size: "s", mode: "clear", class: "close-button wcs-dark", "aria-label": "Fermer cette notification", onClick: onClick }, h("wcs-mat-icon", { icon: "close" })));
+//# sourceMappingURL=alert-close-button.js.map

package/dist/collection/components/alert/alert-close-button.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"alert-close-button.js","sourceRoot":"","sources":["../../../src/components/alert/alert-close-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,CAAC,MAAM,gBAAgB,GAExB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAClB,kBACI,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,uBAAuB,gBAClB,2BAA2B,EACtC,OAAO,EAAE,OAAO;IAEhB,oBAAc,IAAI,EAAC,OAAO,GAAgB,CACjC,CAChB,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\nexport const AlertCloseButton: FunctionalComponent<{\n onClick: (e: MouseEvent) => void;\n}> = ({ onClick }) => (\n <wcs-button\n shape=\"round\"\n size=\"s\"\n mode=\"clear\"\n class=\"close-button wcs-dark\"\n aria-label=\"Fermer cette notification\"\n onClick={onClick}\n >\n <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n </wcs-button>\n);\n"]}

package/dist/collection/components/alert/alert.css CHANGED Viewed

@@ -7,6 +7,11 @@
   }
 }
 :host {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-accent-lighter);
   --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-brand-default);
   --wcs-alert-title-color: var(--wcs-semantic-color-text-primary);
@@ -25,16 +30,11 @@
   --wcs-alert-progress-bar-height: 0.25rem;
   --wcs-alert-progress-bar-background-color: var(--wcs-alert-icon-background-color);
   --wcs-alert-internal-progress-bar-animation-duration: 5s;
-  box-sizing: border-box;
   background-color: var(--wcs-alert-background-color);
   border-radius: var(--wcs-alert-border-radius);
   padding: var(--wcs-alert-padding);
   width: 100%;
   min-width: var(--wcs-alert-min-width);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   gap: var(--wcs-alert-gap);
   border: solid var(--wcs-alert-border-width) var(--wcs-alert-border-color);
   overflow: hidden;
@@ -43,9 +43,16 @@
   display: flex;
   flex-direction: column;
 }
+:host .icon-content-container {
+  display: flex;
+  align-items: center;
+}
 :host .announcement-icon {
   color: var(--wcs-alert-icon-background-color);
 }
+:host .icon-content-container {
+  gap: var(--wcs-alert-gap);
+}
 :host ::slotted([slot=title]) {
   color: var(--wcs-alert-title-color);
   font-size: var(--wcs-alert-title-font-size);
@@ -100,12 +107,6 @@
   box-sizing: border-box;
 }
-.icon-content-container {
-  display: flex;
-  gap: var(--wcs-alert-gap);
-  align-items: center;
-}
 .close-button wcs-mat-icon {
   color: var(--wcs-alert-dismiss-button-color);
 }

package/dist/collection/components/alert/alert.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { AlertCloseButton } from "./alert-close-button";
 /**
  * Alerts are used to communicate a state or an action that has been performed.
  * It has to be used conjunction with the `wcs-alert-drawer` component, or you can use it independently by taking care of
@@ -123,7 +124,7 @@ export class Alert {
         clearTimeout(this.timeoutId);
     }
     render() {
-        return (h(Host, { key: '82c9f5879eae7adef41c921ef34b2b9d891c0d6b' }, h("div", { key: 'b46424dfb6b620b62767b6bb8048827f83d116a7', class: "icon-content-container" }, h("wcs-mat-icon", { key: 'ff3a0bc91a73e275936bbe8f77c904f397296551', class: "announcement-icon", ref: (el) => this.annoucementIconHtmlElement = el, icon: this.getMaterialIcon(), "aria-label": this.getAriaLabel(), role: "img", "aria-hidden": false }), h("div", { key: 'ea866940416ddaf5eaf73cec83f30c71b01c41d8', class: "content" }, h("slot", { key: 'd14c321ebdb78b646bb4fc19e613dbd2cc61ed31', name: "title" }), h("slot", { key: '569d6556ea823f82e1d6164ac20361e27c85b592', name: "subtitle" }))), h("wcs-button", { key: 'f13afc31116b7b6fe04e0186128d0288725ace98', shape: "round", size: "s", mode: "clear", class: "close-button wcs-dark", "aria-label": "Fermer cette notification", onClick: ($event) => this.onCloseButtonClick($event) }, h("wcs-mat-icon", { key: '02557c896159ec1a7fdab853a07f7c79c17dd5d7', icon: "close" })), h("div", { key: '9e90e95009da575ca693e5ba4e92b3916ad4ee6f', class: 'progress-bar' + (!this.showProgressBar ? ' hidden' : '') }, h("div", { key: 'c8858551592bb0b1622e2ee19c67a662f31ce068', class: "progress-bar-track" }))));
+        return (h(Host, { key: '9d063f0f07f1af0d1cd34d362503a8f7c79eb511' }, h("div", { key: 'd8c3709856c49c5392641113deabf7d2d00dc6d5', class: "icon-content-container" }, h("wcs-mat-icon", { key: 'aecbcb8979b40a28d90e372b4ec8889514cc4ce5', class: "announcement-icon", ref: (el) => this.annoucementIconHtmlElement = el, icon: this.getMaterialIcon(), "aria-label": this.getAriaLabel(), role: "img", "aria-hidden": false }), h("div", { key: '1b1ffabeae463b8fba6d77ee4636f45125a6cd4b', class: "content" }, h("slot", { key: '3afb040593b7e0d7d451018df4b1b10dc85f0f21', name: "title" }), h("slot", { key: 'ed674d6b1289f8dd3a3523f2536a717b5bd7031b', name: "subtitle" }))), h(AlertCloseButton, { key: '387c28511f2d4be039e4ea108c7c1245d9aad89c', onClick: ($event) => this.onCloseButtonClick($event) }), h("div", { key: '745eaef7aaaa2d8f258c97f298869eeabbe308b8', class: 'progress-bar' + (!this.showProgressBar ? ' hidden' : '') }, h("div", { key: 'e8ae7aa5de583328bf7be34317f5fb25f68c214d', class: "progress-bar-track" }))));
     }
     static get is() { return "wcs-alert"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/alert/alert.js.map CHANGED Viewed

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

package/dist/collection/components/alert-drawer/alert-drawer.js CHANGED Viewed

@@ -83,11 +83,23 @@ export class AlertDrawer {
      *      showProgressBar: true,
      *      timeout: 5000
      *  });
+     * ```
      * @param alert The alert to show
      */
     async show(alert) {
         this.alertsContainer.appendChild(this.renderToast(alert));
     }
+    /**
+     * Method exposed on `wcs-alert-drawer` to clear all `wcs-alert` which are inside, via the JS API
+     * @example
+     * Plain javascript (example inside a script tag):
+     * ```javascript
+     *  document.querySelector('wcs-alert-drawer').clear();
+     * ```
+     */
+    async clear() {
+        this.alertsContainer.replaceChildren();
+    }
     renderToast(alert) {
         var _a, _b;
         const alertElement = document.createElement('wcs-alert');
@@ -114,7 +126,7 @@ export class AlertDrawer {
     }
     render() {
         // https://www.clever-cloud.com/doc/clever-components/?path=/docs/%F0%9F%9B%A0-toast-cc-toaster--docs#about-accessibility
-        return (h(Host, { key: '18a68f9f7727b29da85e0852dc87de30d79581ed', role: "region", "aria-label": "Informations", "aria-live": "polite", "aria-atomic": "true" }, h("div", { key: 'ee0d30077439b991e5ff6eb02b24873f015dce5e', ref: (el) => this.alertsContainer = el, id: "alerts-container" })));
+        return (h(Host, { key: '7df0dd0305bc6a7074ba14d9bfd2153a9fe08ccf', role: "region", "aria-label": "Informations", "aria-live": "polite", "aria-atomic": "true" }, h("div", { key: '8037fe4cd08765cdebb5b78054d3370996f1ea9b', ref: (el) => this.alertsContainer = el, id: "alerts-container" })));
     }
     disconnectedCallback() {
         this.alertEventListeners = new WeakMap(); // Clear the event listeners, weakmap is not iterable
@@ -223,12 +235,32 @@ export class AlertDrawer {
                     "text": "Method exposed on `wcs-alert-drawer` to show an alert programmatically via the JS API",
                     "tags": [{
                             "name": "example",
-                            "text": "Plain javascript (example inside a script tag):\n```javascript\n document.querySelector('wcs-alert-drawer').show({\n     title: 'Alert title',\n     subtitle: 'Alert subtitle',\n     intent: 'info',\n     showProgressBar: true,\n     timeout: 5000\n });"
+                            "text": "Plain javascript (example inside a script tag):\n```javascript\n document.querySelector('wcs-alert-drawer').show({\n     title: 'Alert title',\n     subtitle: 'Alert subtitle',\n     intent: 'info',\n     showProgressBar: true,\n     timeout: 5000\n });\n```"
                         }, {
                             "name": "param",
                             "text": "alert The alert to show"
                         }]
                 }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method exposed on `wcs-alert-drawer` to clear all `wcs-alert` which are inside, via the JS API",
+                    "tags": [{
+                            "name": "example",
+                            "text": "Plain javascript (example inside a script tag):\n```javascript\n document.querySelector('wcs-alert-drawer').clear();\n```"
+                        }]
+                }
             }
         };
     }

package/dist/collection/components/alert-drawer/alert-drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert-drawer.js","sourceRoot":"","sources":["../../../src/components/alert-drawer/alert-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { parseCssTimeValueToMilliseconds } from '../../utils/helpers';\nimport { WcsAlertDrawerPosition } from \"./alert-drawer-interface\";\nimport { WcsAlertConfig } from \"../alert/alert-interface\";\n\n/*\n Serve as a container for displaying `wcs-alert` components. Directly use this component to display alerts in your applications.\n * \n * ## Usage\n * \n * You can place the `wcs-alert-drawer` component anywhere in your application. It will be used to display alerts.\n * You need to set `position` property to define where the alert drawer will be displayed on the screen.\n * \n * About alerts order:\n * - alerts are ordered up-bottom if the position is `top` and bottom-up if the position is `bottom`\n * \n * ## Accessibility guidelines 💡\n * \n * - The component has `aria-live=\"polite\"` and `aria-atomic=\"true\"` attributes to announce the new alerts to screen readers\n * \n * ## Configuration (on the web component)\n \n Per default, the `wcs-alert-drawer` is configured with:\n * - `position: 'top-right'`\n * - `showProgressBar: false`\n * - `timeout: 5000`\n \n When using the `WcsAlertDrawer::show(alert: WcsAlertConfig)` method, you can override the default configuration by \n * overriding it through the argument.\n * You can also set them in the `wcs-alert-drawer` component directly as attributes\n * \n * ```html\n * <wcs-alert-drawer position=\"top-right\" show-progress-bar timeout=\"10000\">\n * ```\n * With this configuration, all alerts will be displayed with a progress bar and a timeout of 10 seconds.\n * \n * @slot - the alert drawer content, where alerts you put as children will be displayed\n * \n * @cssprop --wcs-alert-drawer-gap - Gap between alerts\n * @cssprop --wcs-alert-drawer-margin-horizontal - Margin horizontal of the alert drawer\n * @cssprop --wcs-alert-drawer-margin-vertical - Margin vertical of the alert drawer\n * @cssprop --wcs-alert-drawer-hide-alert-animation-duration - Duration of the hide alert animation\n * @cssprop --wcs-alert-drawer-min-width - Minimum width of the alert drawer => define the width of the alerts\n /\n@Component({\n tag: 'wcs-alert-drawer',\n styleUrl: 'alert-drawer.scss',\n shadow: true,\n})\nexport class AlertDrawer {\n @Element()\n private el!: HTMLWcsAlertDrawerElement;\n\n /\n Position of the alert drawer on the screen\n /\n @Prop({ reflect: true }) position: WcsAlertDrawerPosition = 'bottom-right';\n\n /\n Timeout for the alert to be dismissed automatically\n /\n @Prop() timeout: number = 5000;\n /\n Whether to show the progress bar or not\n /\n @Prop() showProgressBar: boolean = false;\n\n /\n https://www.reddit.com/r/Frontend/comments/1ato11w/comment/kqz4gt8/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button\n https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef\n /\n private alertEventListeners = new WeakMap<HTMLElement, (evt: AnimationEvent) => void>();\n private timeoutId = undefined;\n\n private userPrefersReducedMotion: boolean = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n private alertsContainer: HTMLDivElement;\n\n /\n Handles the dismissal of an alert\n * @param alert The alert element\n /\n private close = (alert: HTMLWcsAlertElement): void => {\n if (!this.userPrefersReducedMotion) {\n this.timeoutId = setTimeout(() => {\n alert.remove();\n // Cleanup the event listener reference\n this.alertEventListeners.delete(alert);\n }, parseCssTimeValueToMilliseconds(window.getComputedStyle(this.el).getPropertyValue(\"--wcs-alert-drawer-hide-alert-animation-duration\")) \|\| 300);\n } else {\n // If the user has reduced motion preference, remove the alert immediately\n alert.remove();\n // Cleanup the event listener reference\n this.alertEventListeners.delete(alert);\n }\n };\n\n /\n Method exposed on `wcs-alert-drawer` to show an alert programmatically via the JS API\n * @example\n * Plain javascript (example inside a script tag):\n * ```javascript\n * document.querySelector('wcs-alert-drawer').show({\n * title: 'Alert title',\n * subtitle: 'Alert subtitle',\n * intent: 'info',\n * showProgressBar: true,\n * timeout: 5000\n * });\n * @param alert The alert to show\n */\n @Method()\n async show(alert: WcsAlertConfig): Promise<void> {\n this.alertsContainer.appendChild(this.renderToast(alert));\n }\n\n private renderToast(alert: WcsAlertConfig): HTMLWcsAlertElement {\n const alertElement = document.createElement('wcs-alert') as HTMLWcsAlertElement;\n alertElement.setAttribute('intent', alert.intent);\n\n // Uses the alert config if defined, otherwise falls back to the drawer default\n // as the showProgressBar is a boolean attribute, we need to set it to an empty string only if true\n if ((alert.showProgressBar ?? this.showProgressBar)) {\n alertElement.setAttribute('show-progress-bar', '');\n }\n \n // Uses the alert config if defined, otherwise falls back to the drawer default\n alertElement.setAttribute('timeout', String(alert.timeout ?? this.timeout));\n\n const listener = () => this.close(alertElement);\n this.alertEventListeners.set(alertElement, listener);\n alertElement.addEventListener(\"wcsAlertDismiss\", listener);\n \n const title = document.createElement('span') as HTMLSpanElement;\n title.setAttribute('slot', 'title');\n title.textContent = alert.title;\n alertElement.appendChild(title);\n\n const subtitle = document.createElement('span') as HTMLSpanElement;\n subtitle.setAttribute('slot', 'subtitle');\n subtitle.textContent = alert.subtitle;\n alertElement.appendChild(subtitle);\n\n return alertElement;\n }\n\n render() {\n // https://www.clever-cloud.com/doc/clever-components/?path=/docs/%F0%9F%9B%A0-toast-cc-toaster--docs#about-accessibility\n return (\n <Host role=\"region\" aria-label=\"Informations\" aria-live=\"polite\" aria-atomic=\"true\">\n <div ref={(el) => this.alertsContainer = el} id=\"alerts-container\">\n </div>\n </Host>\n );\n }\n\n disconnectedCallback() {\n this.alertEventListeners = new WeakMap(); // Clear the event listeners, weakmap is not iterable\n clearTimeout(this.timeoutId);\n }\n}\n"]}
1	+ {"version":3,"file":"alert-drawer.js","sourceRoot":"","sources":["../../../src/components/alert-drawer/alert-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { parseCssTimeValueToMilliseconds } from '../../utils/helpers';\nimport { WcsAlertDrawerPosition } from \"./alert-drawer-interface\";\nimport { WcsAlertConfig } from \"../alert/alert-interface\";\n\n/*\n Serve as a container for displaying `wcs-alert` components. Directly use this component to display alerts in your applications.\n * \n * ## Usage\n * \n * You can place the `wcs-alert-drawer` component anywhere in your application. It will be used to display alerts.\n * You need to set `position` property to define where the alert drawer will be displayed on the screen.\n * \n * About alerts order:\n * - alerts are ordered up-bottom if the position is `top` and bottom-up if the position is `bottom`\n * \n * ## Accessibility guidelines 💡\n * \n * - The component has `aria-live=\"polite\"` and `aria-atomic=\"true\"` attributes to announce the new alerts to screen readers\n * \n * ## Configuration (on the web component)\n \n Per default, the `wcs-alert-drawer` is configured with:\n * - `position: 'top-right'`\n * - `showProgressBar: false`\n * - `timeout: 5000`\n \n When using the `WcsAlertDrawer::show(alert: WcsAlertConfig)` method, you can override the default configuration by \n * overriding it through the argument.\n * You can also set them in the `wcs-alert-drawer` component directly as attributes\n * \n * ```html\n * <wcs-alert-drawer position=\"top-right\" show-progress-bar timeout=\"10000\">\n * ```\n * With this configuration, all alerts will be displayed with a progress bar and a timeout of 10 seconds.\n * \n * @slot - the alert drawer content, where alerts you put as children will be displayed\n * \n * @cssprop --wcs-alert-drawer-gap - Gap between alerts\n * @cssprop --wcs-alert-drawer-margin-horizontal - Margin horizontal of the alert drawer\n * @cssprop --wcs-alert-drawer-margin-vertical - Margin vertical of the alert drawer\n * @cssprop --wcs-alert-drawer-hide-alert-animation-duration - Duration of the hide alert animation\n * @cssprop --wcs-alert-drawer-min-width - Minimum width of the alert drawer => define the width of the alerts\n /\n@Component({\n tag: 'wcs-alert-drawer',\n styleUrl: 'alert-drawer.scss',\n shadow: true,\n})\nexport class AlertDrawer {\n @Element()\n private el!: HTMLWcsAlertDrawerElement;\n\n /\n Position of the alert drawer on the screen\n /\n @Prop({ reflect: true }) position: WcsAlertDrawerPosition = 'bottom-right';\n\n /\n Timeout for the alert to be dismissed automatically\n /\n @Prop() timeout: number = 5000;\n /\n Whether to show the progress bar or not\n /\n @Prop() showProgressBar: boolean = false;\n\n /\n https://www.reddit.com/r/Frontend/comments/1ato11w/comment/kqz4gt8/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button\n https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef\n /\n private alertEventListeners = new WeakMap<HTMLElement, (evt: AnimationEvent) => void>();\n private timeoutId = undefined;\n\n private userPrefersReducedMotion: boolean = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n private alertsContainer: HTMLDivElement;\n\n /\n Handles the dismissal of an alert\n * @param alert The alert element\n /\n private close = (alert: HTMLWcsAlertElement): void => {\n if (!this.userPrefersReducedMotion) {\n this.timeoutId = setTimeout(() => {\n alert.remove();\n // Cleanup the event listener reference\n this.alertEventListeners.delete(alert);\n }, parseCssTimeValueToMilliseconds(window.getComputedStyle(this.el).getPropertyValue(\"--wcs-alert-drawer-hide-alert-animation-duration\")) \|\| 300);\n } else {\n // If the user has reduced motion preference, remove the alert immediately\n alert.remove();\n // Cleanup the event listener reference\n this.alertEventListeners.delete(alert);\n }\n };\n\n /\n Method exposed on `wcs-alert-drawer` to show an alert programmatically via the JS API\n * @example\n * Plain javascript (example inside a script tag):\n * ```javascript\n * document.querySelector('wcs-alert-drawer').show({\n * title: 'Alert title',\n * subtitle: 'Alert subtitle',\n * intent: 'info',\n * showProgressBar: true,\n * timeout: 5000\n * });\n * ```\n * @param alert The alert to show\n /\n @Method()\n async show(alert: WcsAlertConfig): Promise<void> {\n this.alertsContainer.appendChild(this.renderToast(alert));\n }\n\n /\n Method exposed on `wcs-alert-drawer` to clear all `wcs-alert` which are inside, via the JS API\n * @example\n * Plain javascript (example inside a script tag):\n * ```javascript\n * document.querySelector('wcs-alert-drawer').clear();\n * ```\n */\n @Method()\n async clear(): Promise<void> {\n this.alertsContainer.replaceChildren();\n }\n\n private renderToast(alert: WcsAlertConfig): HTMLWcsAlertElement {\n const alertElement = document.createElement('wcs-alert') as HTMLWcsAlertElement;\n alertElement.setAttribute('intent', alert.intent);\n\n // Uses the alert config if defined, otherwise falls back to the drawer default\n // as the showProgressBar is a boolean attribute, we need to set it to an empty string only if true\n if ((alert.showProgressBar ?? this.showProgressBar)) {\n alertElement.setAttribute('show-progress-bar', '');\n }\n \n // Uses the alert config if defined, otherwise falls back to the drawer default\n alertElement.setAttribute('timeout', String(alert.timeout ?? this.timeout));\n\n const listener = () => this.close(alertElement);\n this.alertEventListeners.set(alertElement, listener);\n alertElement.addEventListener(\"wcsAlertDismiss\", listener);\n \n const title = document.createElement('span') as HTMLSpanElement;\n title.setAttribute('slot', 'title');\n title.textContent = alert.title;\n alertElement.appendChild(title);\n\n const subtitle = document.createElement('span') as HTMLSpanElement;\n subtitle.setAttribute('slot', 'subtitle');\n subtitle.textContent = alert.subtitle;\n alertElement.appendChild(subtitle);\n\n return alertElement;\n }\n\n render() {\n // https://www.clever-cloud.com/doc/clever-components/?path=/docs/%F0%9F%9B%A0-toast-cc-toaster--docs#about-accessibility\n return (\n <Host role=\"region\" aria-label=\"Informations\" aria-live=\"polite\" aria-atomic=\"true\">\n <div ref={(el) => this.alertsContainer = el} id=\"alerts-container\">\n </div>\n </Host>\n );\n }\n\n disconnectedCallback() {\n this.alertEventListeners = new WeakMap(); // Clear the event listeners, weakmap is not iterable\n clearTimeout(this.timeoutId);\n }\n}\n"]}

package/dist/collection/components/app/app.js CHANGED Viewed

@@ -2,9 +2,9 @@ import { h } from "@stencil/core";
 export class App {
     render() {
         return [
-            h("slot", { key: '615427e4b1e7219b1b78fbca36f8385f64119314', name: "header" }),
-            h("slot", { key: 'da5fbe3b8d0eb3963d9e42a9e3396f9bf3d49c0d', name: "sidebar" }),
-            h("slot", { key: '3227284afd347f4af0c47ad0f9b46712502df225', name: "content" })
+            h("slot", { key: '3238c405d5fbe3ff12228c573d8bc3e9752fbde0', name: "header" }),
+            h("slot", { key: '7a77769a0554d193169427f2acf14afae4ebd929', name: "sidebar" }),
+            h("slot", { key: '52a5516e1a554263ce6bd203b73701af7e7e5cc3', name: "content" })
         ];
     }
     static get is() { return "wcs-app"; }

package/dist/collection/components/badge/badge.js CHANGED Viewed

@@ -30,7 +30,7 @@ export class Badge {
         this.size = 'm';
     }
     render() {
-        return (h("slot", { key: '6d9646b28344f4d1f05a3efaf798a6273252a8bf' }));
+        return (h("slot", { key: 'd7154c1a24abfa3084a6915857734f9b63ad70da' }));
     }
     static get is() { return "wcs-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb.js CHANGED Viewed

@@ -131,7 +131,7 @@ export class Breadcrumb {
     }
     render() {
         const showExpandBtn = this.shouldCollapseItems() && !this.showHiddenItems;
-        return (h(Host, { key: '1707e6c3ee0cc621c75f85f927b543dea1af4342' }, h("nav", Object.assign({ key: 'b326c58b86feed5092f8a6c5d46c3cf2dd06a783', class: `wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`, "aria-label": NAV_ARIA_LABEL_DEFAULT }, this.inheritedAttributes, { ref: (el) => this.navEl = el }), h("div", { key: '9a4395f63e0895bca1918d7236a01dd9d0437f26', role: "list" }, h("slot", { key: 'b74aa1fc77ddfc892f0ba79bceffceab10e49c1f', onSlotchange: this.handleSlotChange.bind(this) }), h("slot", { key: 'c616f6281282a7088073ceb131f12f93d1126c8b', name: "non-collapsed" }), h("slot", { key: '0db22f440bc3956219c343e4dac60bfe09581d73', name: "items-before-expand-btn" }), h("slot", { key: 'a29809c5122d539d11c1e53e591ed4342c338810', name: "hidden-items" }), showExpandBtn && this.renderExpandAllButton(), h("slot", { key: 'aa906ec3b5805f78136b39e5d56937cdca7a7f38', name: "items-after-expand-btn" })))));
+        return (h(Host, { key: '7af7766cd0a98654c8bb3d33e16507896e90da69' }, h("nav", Object.assign({ key: '764a9ffbbd04fba9de39ce5ce053d417358f3f70', class: `wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`, "aria-label": NAV_ARIA_LABEL_DEFAULT }, this.inheritedAttributes, { ref: (el) => this.navEl = el }), h("div", { key: 'e8a41248aaca6d882d9c3e081fb51fcea0aed41f', role: "list" }, h("slot", { key: 'e4dc24b03a604346866db1a8e998b700731465a5', onSlotchange: this.handleSlotChange.bind(this) }), h("slot", { key: 'fef25754be0c6dc6bb0b8669117d9233065264ce', name: "non-collapsed" }), h("slot", { key: '1c4d24bd0003042f39c99749370a1a5b8aa965db', name: "items-before-expand-btn" }), h("slot", { key: 'c3f2bceb5a667fbefcc07715b44f2d9026ed7e47', name: "hidden-items" }), showExpandBtn && this.renderExpandAllButton(), h("slot", { key: '64b7751d6b1889f369ba0dbad2e27aaf38283004', name: "items-after-expand-btn" })))));
     }
     static get is() { return "wcs-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb-item/breadcrumb-item.js CHANGED Viewed

@@ -27,7 +27,7 @@ export class BreadcrumbItem {
         this.last = false;
     }
     render() {
-        return (h(Host, { key: '56e9780cd4ef4603b3a7364384222ffbc69bd4a5', role: "listitem" }, h("slot", { key: 'd3b484440c71efc646b2de9cb5f6ff8154887207' }), !this.last && (h("span", { key: '47eb0cbd394d31e46b0d919ab77d2f61d1d0aeef', class: "item-icon", "aria-hidden": "true" }, ICONS_FONT_CHEVRON_UNICODE))));
+        return (h(Host, { key: '4df249e147039831b67e3a4eccd868bcf83754e4', role: "listitem" }, h("slot", { key: 'bcba22a4050eba17cd46feff2d3a37b68c63f5a6' }), !this.last && (h("span", { key: 'beab86c3589bd6288cc061eca1e27a288f74c612', class: "item-icon", "aria-hidden": "true" }, ICONS_FONT_CHEVRON_UNICODE))));
     }
     static get is() { return "wcs-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }