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

wcs-core 7.5.1 → 7.6.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 (481) hide show

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

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   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-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\",[[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-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);
 };
 exports.setNonce = index.setNonce;

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

@@ -1161,7 +1161,7 @@ const Spinner = class {
         this.mode = 'border';
     }
     render() {
-        return (index.h("svg", { key: 'd953d95583147d9de0a9b9afdb4f31640ed62649', viewBox: "0 0 50 50" }, index.h("circle", { key: '475125d830b565ce8d7c09b7a30ff0aa7d42a243', class: "dashed-background-circle", cx: "25", cy: "25", r: "21", fill: "none" }), index.h("g", { key: 'd58556cea901fa24246d21354d29fea350bb70b9', class: "infinite-rotation-container" }, index.h("circle", { key: '604fef216b29cdaba777c8d9778f50de7dda7fcc', class: "dash-rotating-circle", cx: "25", cy: "25", r: "21", fill: "none" }))));
+        return (index.h("svg", { key: '166ed35ffcf46c317b2427e7ee0c3a960726f990', viewBox: "0 0 50 50" }, index.h("circle", { key: '642490f6a8186e12a9072173882767b84d5c2dbc', class: "dashed-background-circle", cx: "25", cy: "25", r: "21", fill: "none" }), index.h("g", { key: '0df7abf2426c8f04f0d1eb3867b91ce7c3faaceb', class: "infinite-rotation-container" }, index.h("circle", { key: 'd02aa1c02b2c732dd8bc1cd018f9b72bda28f7c4', class: "dash-rotating-circle", cx: "25", cy: "25", r: "21", fill: "none" }))));
     }
 };
 Spinner.style = WcsSpinnerStyle0;

package/dist/cjs/wcs-card-content.cjs.entry.js CHANGED Viewed

@@ -12,7 +12,7 @@ const CardContent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '970e45353d35495c5a4500e168f6b9fda970c7a0' }, index.h("slot", { key: '26f30084a71090b8894593f8c57f35a7e9f60f65' })));
+        return (index.h(index.Host, { key: 'c270d71ea05c98a0bb8acc01809d3d0e66b13152' }, index.h("slot", { key: 'caa336108533b717cf8ae3620382ffae05aabd9b' })));
     }
 };
 CardContent.style = WcsCardContentStyle0;

package/dist/cjs/wcs-card-content.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-card-content.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,+QAA+Q,CAAC;AACvS,6BAAe,cAAc;;~~MCiBhB~~,WAAW;;;;IAEtB,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/card-content/card-content.scss?tag=wcs-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":[":host {\n --wcs-card-content-color: var(--wcs-semantic-color-text-tertiary);\n --wcs-card-content-font-size: var(--wcs-semantic-font-size-body-3);\n\n display: block;\n overflow: hidden;\n}\n\n::slotted() {\n color: var(--wcs-card-content-color);\n font-size: var(--wcs-card-content-font-size);\n margin: 0;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/\n A content for a card inside card-body. Commonly used to provide ~~more~~ details about the card content~~. \~~n * The information provided should be concise and easy to read.\n * \n * By default, the margin is removed from the top and bottom of the card description.\n * \n * @slot - The content of the card description.\n * \n * @cssprop --wcs-card-content-color - The color of the card description.\n * @cssprop --wcs-card-content-font-size - The font size of the card description.\n */\n@Component({\n tag: 'wcs-card-content',\n styleUrl: 'card-content.scss',\n shadow: true,\n})\nexport class CardContent {\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"wcs-card-content.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,+QAA+Q,CAAC;AACvS,6BAAe,cAAc;;MCsBhB,WAAW;;;;IAEtB,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/card-content/card-content.scss?tag=wcs-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":[":host {\n --wcs-card-content-color: var(--wcs-semantic-color-text-tertiary);\n --wcs-card-content-font-size: var(--wcs-semantic-font-size-body-3);\n\n display: block;\n overflow: hidden;\n}\n\n::slotted() {\n color: var(--wcs-card-content-color);\n font-size: var(--wcs-card-content-font-size);\n margin: 0;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/\n A text content container for a card inside `wcs-card-body`.\n * Commonly used to provide additional details about the card content.\n * The information provided should be concise and easy to read.\n \n Use `wcs-card-content` for text only. It applies text-oriented layout rules and overflow behavior.\n * Forms and other rich interactive content should be placed directly inside `wcs-card-body`, not inside\n * `wcs-card-content`.\n \n By default, the margin is removed from the top and bottom of the card description.\n \n @slot - The textual content of the card description.\n \n @cssprop --wcs-card-content-color - The color of the card description.\n * @cssprop --wcs-card-content-font-size - The font size of the card description.\n */\n@Component({\n tag: 'wcs-card-content',\n styleUrl: 'card-content.scss',\n shadow: true,\n})\nexport class CardContent {\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n\n}\n"],"version":3}

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

@@ -37,7 +37,7 @@ const Card = class {
         return this.el.querySelector('wcs-card-body');
     }
     render() {
-        return (index.h("slot", { key: '20a57cf8fc64155e65a98bdb69618ec013ea5a7f', onSlotchange: () => this.onSlotChange() }));
+        return (index.h("slot", { key: '58153235717a53e0b2fc02a22a8656985059d292', onSlotchange: () => this.onSlotChange() }));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/wcs-card.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,m+BAAm+B,CAAC;AACp/B,sBAAe,OAAO;;~~MCuBT~~,IAAI;;;oBAGI,MAAM;2BAKQ,IAAI;;IAGnC,kBAAkB;QACd,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACxC;IAEO,YAAY;QAChB,IAAG,IAAI,CAAC,WAAW,EAAE;YACjB,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACpC,IAAI,CAAC,6BAA6B,EAAE,CAAC;SACxC;KACJ;IAEO,6BAA6B;;QACjC,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7D;IAEO,4BAA4B;;QAChC,MAAA,IAAI,CAAC,eAAe,EAAE,0CAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC5D;IAEO,gBAAgB;QACpB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;KAClD;IAEO,eAAe;QACnB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;KACjD;IAED,MAAM;QACF,QACIA,mEAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAG,EAClD;KACL;;;;;;;;;;","names":["h"],"sources":["src/components/card/card.scss?tag=wcs-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":[":host {\n --wcs-card-border-color: var(--wcs-semantic-color-border-secondary);\n --wcs-card-border-radius: var(--wcs-semantic-border-radius-base);\n --wcs-card-border-width: var(--wcs-semantic-border-width-default);\n --wcs-card-background-color: var(--wcs-semantic-color-background-surface-primary);\n --wcs-card-text-color: var(--wcs-semantic-color-text-primary);\n\n --wcs-card-horizontal-min-height: 160px;\n\n position: relative;\n display: flex;\n flex-direction: column;\n min-width: 0;\n word-wrap: break-word;\n background-clip: border-box;\n border-radius: var(--wcs-card-border-radius);\n background-color: var(--wcs-card-background-color);\n color: var(--wcs-card-text-color);\n}\n\n:host([mode=\"raised\"]) {\n /* Card mode raised is deprecated in the new design system /\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20)\n}\n\n:host([mode=\"flat\"]) {\n border: solid var(--wcs-card-border-width) var(--wcs-card-border-color);\n}\n\n:host([orientation=\"horizontal\"]) {\n flex-direction: row;\n min-height: var(--wcs-card-horizontal-height);\n}\n\n:host([orientation=\"vertical\"]) {\n flex-direction: column;\n}\n","import { Component, ComponentInterface, h, Prop, Element, Watch } from '@stencil/core';\nimport { CardMode, CardOrientation } from './card-interface';\n\n/\n The card component is a container that ~~display~~ content such as text, images, buttons, and lists~~. \~~n * A card can be a single component, but is often made up of a header, title, subtitle, and content.\n * \n * While ~~they're~~ ~~very~~ flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body~~`\n~~ * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to ~~make~~ ~~sure~~ the card is well-designed.\n \n @slot - Default slot for the card content\n * \n * @cssprop --wcs-card-border-color - Border color of the card\n * @cssprop --wcs-card-border-radius - Border radius of the card\n * @cssprop --wcs-card-border-width - Border width of the card\n * @cssprop --wcs-card-background-color - Background color of the card\n * @cssprop --wcs-card-text-color - Text color of the card\n * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal\n /\n@Component({\n tag: 'wcs-card',\n styleUrl: 'card.scss',\n shadow: true\n})\nexport class Card implements ComponentInterface {\n @Element() private el!: HTMLElement;\n @Prop({reflect: true, mutable: true})\n mode: CardMode = 'flat';\n /\n The orientation of the card, can be horizontal or vertical\n */\n @Prop({reflect: true})\n orientation: CardOrientation = null;\n\n @Watch('orientation')\n orientationChanged() {\n this.updateWcsCardImageOrientation();\n }\n\n private onSlotChange() {\n if(this.orientation) {\n this.updateWcsCardBodyOrientation();\n this.updateWcsCardImageOrientation();\n }\n }\n\n private updateWcsCardImageOrientation() {\n this.findWcsCardMedia()?.setOrientation(this.orientation);\n }\n\n private updateWcsCardBodyOrientation() {\n this.findWcsCardBody()?.setOrientation(this.orientation);\n }\n\n private findWcsCardMedia(): HTMLWcsCardMediaElement {\n return this.el.querySelector('wcs-card-media');\n }\n\n private findWcsCardBody(): HTMLWcsCardBodyElement {\n return this.el.querySelector('wcs-card-body');\n }\n\n render() {\n return (\n <slot onSlotchange={() => this.onSlotChange()}/>\n );\n }\n}\n"],"version":3}
1	+ {"file":"wcs-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,m+BAAm+B,CAAC;AACp/B,sBAAe,OAAO;;MC8BT,IAAI;;;oBAGI,MAAM;2BAKQ,IAAI;;IAGnC,kBAAkB;QACd,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACxC;IAEO,YAAY;QAChB,IAAG,IAAI,CAAC,WAAW,EAAE;YACjB,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACpC,IAAI,CAAC,6BAA6B,EAAE,CAAC;SACxC;KACJ;IAEO,6BAA6B;;QACjC,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7D;IAEO,4BAA4B;;QAChC,MAAA,IAAI,CAAC,eAAe,EAAE,0CAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC5D;IAEO,gBAAgB;QACpB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;KAClD;IAEO,eAAe;QACnB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;KACjD;IAED,MAAM;QACF,QACIA,mEAAM,YAAY,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAG,EAClD;KACL;;;;;;;;;;","names":["h"],"sources":["src/components/card/card.scss?tag=wcs-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":[":host {\n --wcs-card-border-color: var(--wcs-semantic-color-border-secondary);\n --wcs-card-border-radius: var(--wcs-semantic-border-radius-base);\n --wcs-card-border-width: var(--wcs-semantic-border-width-default);\n --wcs-card-background-color: var(--wcs-semantic-color-background-surface-primary);\n --wcs-card-text-color: var(--wcs-semantic-color-text-primary);\n\n --wcs-card-horizontal-min-height: 160px;\n\n position: relative;\n display: flex;\n flex-direction: column;\n min-width: 0;\n word-wrap: break-word;\n background-clip: border-box;\n border-radius: var(--wcs-card-border-radius);\n background-color: var(--wcs-card-background-color);\n color: var(--wcs-card-text-color);\n}\n\n:host([mode=\"raised\"]) {\n /* Card mode raised is deprecated in the new design system /\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20)\n}\n\n:host([mode=\"flat\"]) {\n border: solid var(--wcs-card-border-width) var(--wcs-card-border-color);\n}\n\n:host([orientation=\"horizontal\"]) {\n flex-direction: row;\n min-height: var(--wcs-card-horizontal-height);\n}\n\n:host([orientation=\"vertical\"]) {\n flex-direction: column;\n}\n","import { Component, ComponentInterface, h, Prop, Element, Watch } from '@stencil/core';\nimport { CardMode, CardOrientation } from './card-interface';\n\n/\n The card component is a container that displays content such as text, images, buttons, and lists.\n * A card can be a single component, but is often made up of a header, title, subtitle, and content.\n \n While cards are flexible, it is important to use them consistently. You may use `wcs-card-media` outside\n * `wcs-card-body`, and `wcs-card-header`, `wcs-card-content`, and `wcs-card-footer` within `wcs-card-body`\n * to keep the card structure clear and well-designed.\n \n `wcs-card-content` is intended for textual content only. If you need to display a form or other rich interactive\n * content inside a card, place it directly inside `wcs-card-body` instead of wrapping it in `wcs-card-content`.\n \n A card can also be used as a visual wrapper to get the card border, radius, and background. In that case, prefer a\n * direct child `wcs-card-body` when you need to host structured content.\n \n @slot - Default slot for the card content\n * \n * @cssprop --wcs-card-border-color - Border color of the card\n * @cssprop --wcs-card-border-radius - Border radius of the card\n * @cssprop --wcs-card-border-width - Border width of the card\n * @cssprop --wcs-card-background-color - Background color of the card\n * @cssprop --wcs-card-text-color - Text color of the card\n * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal\n /\n@Component({\n tag: 'wcs-card',\n styleUrl: 'card.scss',\n shadow: true\n})\nexport class Card implements ComponentInterface {\n @Element() private el!: HTMLElement;\n @Prop({reflect: true, mutable: true})\n mode: CardMode = 'flat';\n /\n The orientation of the card, can be horizontal or vertical\n */\n @Prop({reflect: true})\n orientation: CardOrientation = null;\n\n @Watch('orientation')\n orientationChanged() {\n this.updateWcsCardImageOrientation();\n }\n\n private onSlotChange() {\n if(this.orientation) {\n this.updateWcsCardBodyOrientation();\n this.updateWcsCardImageOrientation();\n }\n }\n\n private updateWcsCardImageOrientation() {\n this.findWcsCardMedia()?.setOrientation(this.orientation);\n }\n\n private updateWcsCardBodyOrientation() {\n this.findWcsCardBody()?.setOrientation(this.orientation);\n }\n\n private findWcsCardMedia(): HTMLWcsCardMediaElement {\n return this.el.querySelector('wcs-card-media');\n }\n\n private findWcsCardBody(): HTMLWcsCardBodyElement {\n return this.el.querySelector('wcs-card-body');\n }\n\n render() {\n return (\n <slot onSlotchange={() => this.onSlotChange()}/>\n );\n }\n}\n"],"version":3}

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

@@ -55,7 +55,7 @@ function getActionForKeyboardEvent(event, currentState) {
     return [];
 }
-const dropdownCss = ":host{display:flex;--wcs-dropdown-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-padding-empty:var(--wcs-semantic-spacing-large);--wcs-dropdown-plain-arrow-color:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-dropdown-stroked-arrow-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-dropdown-clear-arrow-color:var(--wcs-semantic-color-foreground-action-tertiary-default);--wcs-dropdown-arrow-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-dropdown-overlay-max-height:360px;--wcs-dropdown-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-dropdown-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-dropdown-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-dropdown-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-overlay-border-color:var(--wcs-semantic-color-border-secondary)}:host wcs-button{height:fit-content}:host svg{margin-right:-0.25rem}button{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;outline:0;outline-offset:0}button:focus-visible+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}@supports not selector(button:focus-visible + wcs-button){button:focus-within+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}}.wcs-button-content-wrapper{display:flex;align-items:center}.popover{display:none;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);border-radius:var(--wcs-dropdown-overlay-border-radius);background-color:var(--wcs-dropdown-overlay-background-color);z-index:9999}.show{display:block}.container{min-width:calc(10 * var(--wcs-semantic-size-base));border-radius:inherit;overflow:hidden;padding:var(--wcs-dropdown-overlay-padding);background-color:var(--wcs-dropdown-overlay-background-color)}:host([mode=clear]) .arrow{fill:var(--wcs-dropdown-clear-arrow-color)}:host([mode=stroked]) .arrow{fill:var(--wcs-dropdown-stroked-arrow-color)}:host([mode=plain]) .arrow{fill:var(--wcs-dropdown-plain-arrow-color)}:host([disabled]) .arrow{fill:var(--wcs-dropdown-arrow-color-disabled)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color)}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}#is-empty{display:block;width:20ch;padding:0 var(--wcs-dropdown-padding-empty)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}";
+const dropdownCss = ":host{display:flex;position:relative;--wcs-dropdown-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-padding-empty:var(--wcs-semantic-spacing-large);--wcs-dropdown-plain-arrow-color:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-dropdown-stroked-arrow-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-dropdown-clear-arrow-color:var(--wcs-semantic-color-foreground-action-tertiary-default);--wcs-dropdown-arrow-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-dropdown-overlay-max-height:360px;--wcs-dropdown-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-dropdown-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-dropdown-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-dropdown-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-overlay-border-color:var(--wcs-semantic-color-border-secondary)}:host wcs-button{height:fit-content}:host svg{margin-right:-0.25rem}button{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;outline:0;outline-offset:0}button:focus-visible+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}@supports not selector(button:focus-visible + wcs-button){button:focus-within+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}}.wcs-button-content-wrapper{display:flex;align-items:center}.popover{display:none;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);border-radius:var(--wcs-dropdown-overlay-border-radius);background-color:var(--wcs-dropdown-overlay-background-color);z-index:9999}.show{display:block}.container{min-width:calc(10 * var(--wcs-semantic-size-base));border-radius:inherit;overflow:hidden;padding:var(--wcs-dropdown-overlay-padding);background-color:var(--wcs-dropdown-overlay-background-color)}:host([mode=clear]) .arrow{fill:var(--wcs-dropdown-clear-arrow-color)}:host([mode=stroked]) .arrow{fill:var(--wcs-dropdown-stroked-arrow-color)}:host([mode=plain]) .arrow{fill:var(--wcs-dropdown-plain-arrow-color)}:host([disabled]) .arrow{fill:var(--wcs-dropdown-arrow-color-disabled)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color)}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}#is-empty{display:block;width:20ch;padding:0 var(--wcs-dropdown-padding-empty)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}";
 const WcsDropdownStyle0 = dropdownCss;
 const DROPDOWN_INHERITED_ATTRS = ['tabindex'];

package/dist/cjs/wcs-dropdown.cjs.entry.js.map CHANGED Viewed

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

package/dist/cjs/wcs-editable-field.cjs.entry.js CHANGED Viewed

@@ -218,6 +218,7 @@ const EditableField = class {
     }
     onValueChange() {
         this.currentState = EditableComponentState.DISPLAY;
+        this.currentValue = this.value;
     }
     onDisplayContainerClick() {
         if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {
@@ -240,19 +241,42 @@ const EditableField = class {
     getReadonlySvgIcon() {
         return index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "26", height: "24", viewBox: "0 0 27 25", class: "readonly-icon" }, index.h("path", { d: "M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z", transform: "translate(-0.5 -1.5)" }), index.h("path", { d: "M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z", transform: "translate(-0.5 -1.5)" }), index.h("path", { d: "M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z", transform: "translate(-0.5 -1.5)" }));
     }
-    formatValues() {
-        let formattedValue = this.value;
-        let formattedCurrentValue = this.currentValue;
+    getSelectElement() {
+        var _a;
+        return ((_a = this.spiedElement) !== null && _a !== void 0 ? _a : this.el.querySelector('wcs-select'));
+    }
+    computeSelectDisplayTextFromSlottedSelectOptions(value) {
+        var _a, _b, _c, _d;
+        const selectElement = this.getSelectElement();
+        // in server mode, selected options could be not found in the DOM so we could not find innerText of option
+        // so we fall back on the value
+        if (selectElement.serverMode) {
+            return value;
+        }
+        const options = Array.from((_a = selectElement === null || selectElement === void 0 ? void 0 : selectElement.querySelectorAll('wcs-select-option')) !== null && _a !== void 0 ? _a : []);
+        const compareWith = (_b = selectElement === null || selectElement === void 0 ? void 0 : selectElement.compareWith) !== null && _b !== void 0 ? _b : ((optionValue, selectedValue) => optionValue === selectedValue);
+        if (Array.isArray(value)) {
+            return value
+                .map(selectedValue => { var _a, _b; return (_b = (_a = options.find(option => compareWith(option.value, selectedValue))) === null || _a === void 0 ? void 0 : _a.innerText) !== null && _b !== void 0 ? _b : selectedValue; })
+                .join(', ');
+        }
+        return (_d = (_c = options.find(option => compareWith(option.value, value))) === null || _c === void 0 ? void 0 : _c.innerText) !== null && _d !== void 0 ? _d : value;
+    }
+    getDisplayValue(value) {
         if (this.formatFn) {
-            formattedValue = this.formatFn(this.value);
-            formattedCurrentValue = this.formatFn(this.currentValue);
+            return this.formatFn(value);
         }
-        if (Array.isArray(this.value)) {
-            formattedValue = this.value.join(', ');
+        if (this.type === 'select') {
+            return this.computeSelectDisplayTextFromSlottedSelectOptions(value);
         }
-        if (Array.isArray(this.currentValue)) {
-            formattedCurrentValue = this.currentValue.join(', ');
+        if (Array.isArray(value)) {
+            return value.join(', ');
         }
+        return value;
+    }
+    formatValues() {
+        const formattedValue = this.getDisplayValue(this.value);
+        const formattedCurrentValue = this.getDisplayValue(this.currentValue);
         return {
             formattedValue: (formattedValue ? (index.h("span", null, formattedValue)) : (index.h("span", null))),
             formattedValueText: formattedValue,
@@ -261,7 +285,7 @@ const EditableField = class {
     }
     render() {
         const { formattedValue, formattedValueText, formattedCurrentValue } = this.formatValues();
-        return (index.h(index.Host, { key: '81f6b6b92cd0a6f60a0eb4fbdb781a42863d4478' }, index.h("div", { key: '1278b7794e0127f1f2bc819d246712d55a139abd', class: "label" }, this.label), index.h("button", { key: '6049a936d198c5ee68db9a29466b82dc0ca55fa2', type: "button", class: 'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : ''), onClick: () => this.onDisplayContainerClick(), ref: (el) => this.editModeBtn = el, "aria-label": `${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}` }, formattedValue, index.h("wcs-mat-icon", { key: '97020f20f553553b1e3a866d6d2ad274504b1bc9', icon: "edit", size: "s" }), this.readonly ? this.getReadonlySvgIcon() : null), index.h("div", { key: '17c58773fdaa738eef36c20545815ff10c35c5eb', class: 'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '') }, formattedCurrentValue, index.h("wcs-spinner", { key: 'b2ef7dd52a95d0604cd74368a17cf26283a663a9' })), index.h("wcs-form-field", { key: '38891efe6c9c119ad7d261f31edba4b4e5e3ae71', "is-error": this.isError, class: 'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '') }, index.h("wcs-label", { key: '80ff051b722d175932c4cf56410f8c4081fe4cb8', class: "visually-hidden" }, this.label), index.h("slot", { key: '4e8592e8283ce75e629f61dafd609c59cd5fbbc0' }), this.isError && this.errorMsg
+        return (index.h(index.Host, { key: 'a1b692fad52bdb6a7309b70a04edfb68cf77f6d3' }, index.h("div", { key: 'dfc55ad386b993f0187040fa2d3cdcdc5c67dbd8', class: "label" }, this.label), index.h("button", { key: 'ec38bec07dd21b44c1e699b967d0d7aee9d51a1f', type: "button", class: 'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : ''), onClick: () => this.onDisplayContainerClick(), ref: (el) => this.editModeBtn = el, "aria-label": `${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}` }, formattedValue, index.h("wcs-mat-icon", { key: 'cc38a3416a563d4985311f73b7774496697f6685', icon: "edit", size: "s" }), this.readonly ? this.getReadonlySvgIcon() : null), index.h("div", { key: '0872aecf23dab9d4fdfee58b9ee13b51e682d48e', class: 'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '') }, formattedCurrentValue, index.h("wcs-spinner", { key: '89e19662f6c7429e18fb9e41e3c35450b0675b1d' })), index.h("wcs-form-field", { key: '8e90e1c7f78fc418ecb6299b19b5c93dad0d9d7a', "is-error": this.isError, class: 'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '') }, index.h("wcs-label", { key: '5919933cb037bd7e5c5fa87af68525d47006b6e3', class: "visually-hidden" }, this.label), index.h("slot", { key: '971ecbfe68bcd475d87fe3bcbf570b81a7be039e' }), this.isError && this.errorMsg
             ? index.h("wcs-error", null, this.errorMsg)
             : null)));
     }