wcs-core 7.2.1 → 7.3.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.
- package/dist/cjs/accessibility-5f681a74.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/wcs-accordion-panel.cjs.entry.js +1 -1
- package/dist/cjs/wcs-accordion-panel.cjs.entry.js.map +1 -1
- package/dist/cjs/wcs-accordion.cjs.entry.js +2 -1
- package/dist/cjs/wcs-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/wcs-checkbox.cjs.entry.js +3 -2
- package/dist/cjs/wcs-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/wcs-chip.cjs.entry.js +102 -0
- package/dist/cjs/wcs-chip.cjs.entry.js.map +1 -0
- package/dist/cjs/wcs-select_2.cjs.entry.js +8 -6
- package/dist/cjs/wcs-select_2.cjs.entry.js.map +1 -1
- package/dist/cjs/wcs.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/accordion/accordion.e2e.js +187 -0
- package/dist/collection/components/accordion/accordion.e2e.js.map +1 -0
- package/dist/collection/components/accordion/accordion.js +2 -1
- package/dist/collection/components/accordion/accordion.js.map +1 -1
- package/dist/collection/components/accordion-panel/accordion-panel.js +2 -2
- package/dist/collection/components/accordion-panel/accordion-panel.js.map +1 -1
- package/dist/collection/components/checkbox/checkbox.css +3 -0
- package/dist/collection/components/checkbox/checkbox.js +20 -1
- package/dist/collection/components/checkbox/checkbox.js.map +1 -1
- package/dist/collection/components/chip/chip-interface.js +2 -0
- package/dist/collection/components/chip/chip-interface.js.map +1 -0
- package/dist/collection/components/chip/chip.css +220 -0
- package/dist/collection/components/chip/chip.e2e.js +209 -0
- package/dist/collection/components/chip/chip.e2e.js.map +1 -0
- package/dist/collection/components/chip/chip.js +341 -0
- package/dist/collection/components/chip/chip.js.map +1 -0
- package/dist/collection/components/select/select.e2e.js +52 -0
- package/dist/collection/components/select/select.e2e.js.map +1 -1
- package/dist/collection/components/select/select.js +8 -6
- package/dist/collection/components/select/select.js.map +1 -1
- package/dist/collection/utils/accessibility.js +16 -0
- package/dist/collection/utils/accessibility.js.map +1 -1
- package/dist/esm/accessibility-069640cf.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/wcs-accordion-panel.entry.js +1 -1
- package/dist/esm/wcs-accordion-panel.entry.js.map +1 -1
- package/dist/esm/wcs-accordion.entry.js +2 -1
- package/dist/esm/wcs-accordion.entry.js.map +1 -1
- package/dist/esm/wcs-checkbox.entry.js +3 -2
- package/dist/esm/wcs-checkbox.entry.js.map +1 -1
- package/dist/esm/wcs-chip.entry.js +98 -0
- package/dist/esm/wcs-chip.entry.js.map +1 -0
- package/dist/esm/wcs-select_2.entry.js +8 -6
- package/dist/esm/wcs-select_2.entry.js.map +1 -1
- package/dist/esm/wcs.js +1 -1
- package/dist/types/components/accordion-panel/accordion-panel.d.ts +5 -0
- package/dist/types/components/checkbox/checkbox.d.ts +4 -0
- package/dist/types/components/chip/chip-interface.d.ts +4 -0
- package/dist/types/components/chip/chip.d.ts +132 -0
- package/dist/types/components/select/select.d.ts +1 -0
- package/dist/types/components.d.ts +342 -0
- package/dist/types/utils/accessibility.d.ts +7 -0
- package/dist/wcs/p-828b45b4.entry.js +2 -0
- package/dist/wcs/p-828b45b4.entry.js.map +1 -0
- package/dist/wcs/p-990698a7.entry.js +2 -0
- package/dist/wcs/p-990698a7.entry.js.map +1 -0
- package/dist/wcs/{p-d27d4a53.entry.js → p-b94a09b6.entry.js} +2 -2
- package/dist/wcs/p-b94a09b6.entry.js.map +1 -0
- package/dist/wcs/p-ed3b0709.entry.js +2 -0
- package/dist/wcs/p-ed3b0709.entry.js.map +1 -0
- package/dist/wcs/{p-6c6079ee.entry.js → p-f2eeb249.entry.js} +2 -2
- package/dist/wcs/{p-6c6079ee.entry.js.map → p-f2eeb249.entry.js.map} +1 -1
- package/dist/wcs/p-fb2751c2.js.map +1 -1
- package/dist/wcs/wcs.esm.js +1 -1
- package/dist/wcs/wcs.esm.js.map +1 -1
- package/package.json +1 -1
- package/dist/wcs/p-02f31010.entry.js +0 -2
- package/dist/wcs/p-02f31010.entry.js.map +0 -1
- package/dist/wcs/p-4fb2d985.entry.js +0 -2
- package/dist/wcs/p-4fb2d985.entry.js.map +0 -1
- package/dist/wcs/p-d27d4a53.entry.js.map +0 -1
package/dist/cjs/wcs.cjs.js
CHANGED
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
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\"]},[[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-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-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-checkbox.cjs\",[[17,\"wcs-checkbox\",{\"name\":[1],\"indeterminate\":[1540],\"checked\":[1540],\"labelAlignment\":[1537,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"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);
|
|
22
|
+
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\"]},[[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);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
"components/card-header/card-header.js",
|
|
20
20
|
"components/card-media/card-media.js",
|
|
21
21
|
"components/checkbox/checkbox.js",
|
|
22
|
+
"components/chip/chip.js",
|
|
22
23
|
"components/com-nav/com-nav.js",
|
|
23
24
|
"components/com-nav-submenu/com-nav-submenu.js",
|
|
24
25
|
"components/com-nav-category/com-nav-category.js",
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
import { newE2EPage } from "@stencil/core/testing";
|
|
2
|
+
import { setWcsContent } from "../../utils/tests";
|
|
3
|
+
describe('accordion', () => {
|
|
4
|
+
it('should open and close accordion panels', async () => {
|
|
5
|
+
// Given
|
|
6
|
+
const page = await newE2EPage();
|
|
7
|
+
await setWcsContent(page, `
|
|
8
|
+
<wcs-accordion>
|
|
9
|
+
<wcs-accordion-panel>
|
|
10
|
+
<wcs-accordion-header>Panel 1</wcs-accordion-header>
|
|
11
|
+
<wcs-accordion-content>Content 1</wcs-accordion-content>
|
|
12
|
+
</wcs-accordion-panel>
|
|
13
|
+
<wcs-accordion-panel>
|
|
14
|
+
<wcs-accordion-header>Panel 2</wcs-accordion-header>
|
|
15
|
+
<wcs-accordion-content>Content 2</wcs-accordion-content>
|
|
16
|
+
</wcs-accordion-panel>
|
|
17
|
+
</wcs-accordion>
|
|
18
|
+
`);
|
|
19
|
+
const panels = await page.findAll('wcs-accordion-panel');
|
|
20
|
+
// When
|
|
21
|
+
await panels[0].click();
|
|
22
|
+
await page.waitForChanges();
|
|
23
|
+
// Then
|
|
24
|
+
expect(await panels[0].getProperty('open')).toBe(true);
|
|
25
|
+
expect(await panels[1].getProperty('open')).toBe(false);
|
|
26
|
+
});
|
|
27
|
+
it('should close other panels when opening a new one at the same level', async () => {
|
|
28
|
+
// Given
|
|
29
|
+
const page = await newE2EPage();
|
|
30
|
+
await setWcsContent(page, `
|
|
31
|
+
<wcs-accordion>
|
|
32
|
+
<wcs-accordion-panel>
|
|
33
|
+
<wcs-accordion-header>Panel 1</wcs-accordion-header>
|
|
34
|
+
<wcs-accordion-content>Content 1</wcs-accordion-content>
|
|
35
|
+
</wcs-accordion-panel>
|
|
36
|
+
<wcs-accordion-panel>
|
|
37
|
+
<wcs-accordion-header>Panel 2</wcs-accordion-header>
|
|
38
|
+
<wcs-accordion-content>Content 2</wcs-accordion-content>
|
|
39
|
+
</wcs-accordion-panel>
|
|
40
|
+
</wcs-accordion>
|
|
41
|
+
`);
|
|
42
|
+
const panels = await page.findAll('wcs-accordion-panel');
|
|
43
|
+
// When - Open first panel
|
|
44
|
+
await panels[0].click();
|
|
45
|
+
await page.waitForChanges();
|
|
46
|
+
// Then
|
|
47
|
+
expect(await panels[0].getProperty('open')).toBe(true);
|
|
48
|
+
expect(await panels[1].getProperty('open')).toBe(false);
|
|
49
|
+
// When - Open second panel
|
|
50
|
+
await panels[1].click();
|
|
51
|
+
await page.waitForChanges();
|
|
52
|
+
// Then - First panel should be closed
|
|
53
|
+
expect(await panels[0].getProperty('open')).toBe(false);
|
|
54
|
+
expect(await panels[1].getProperty('open')).toBe(true);
|
|
55
|
+
});
|
|
56
|
+
it('should not close parent accordion when opening nested accordion', async () => {
|
|
57
|
+
// Given
|
|
58
|
+
const page = await newE2EPage();
|
|
59
|
+
await setWcsContent(page, `
|
|
60
|
+
<wcs-accordion>
|
|
61
|
+
<wcs-accordion-panel>
|
|
62
|
+
<wcs-accordion-header>Parent Panel 1</wcs-accordion-header>
|
|
63
|
+
<wcs-accordion-content>
|
|
64
|
+
<p>Parent content</p>
|
|
65
|
+
<wcs-accordion>
|
|
66
|
+
<wcs-accordion-panel>
|
|
67
|
+
<wcs-accordion-header>Child Panel 1</wcs-accordion-header>
|
|
68
|
+
<wcs-accordion-content>Child content 1</wcs-accordion-content>
|
|
69
|
+
</wcs-accordion-panel>
|
|
70
|
+
<wcs-accordion-panel>
|
|
71
|
+
<wcs-accordion-header>Child Panel 2</wcs-accordion-header>
|
|
72
|
+
<wcs-accordion-content>Child content 2</wcs-accordion-content>
|
|
73
|
+
</wcs-accordion-panel>
|
|
74
|
+
</wcs-accordion>
|
|
75
|
+
</wcs-accordion-content>
|
|
76
|
+
</wcs-accordion-panel>
|
|
77
|
+
<wcs-accordion-panel>
|
|
78
|
+
<wcs-accordion-header>Parent Panel 2</wcs-accordion-header>
|
|
79
|
+
<wcs-accordion-content>Parent content 2</wcs-accordion-content>
|
|
80
|
+
</wcs-accordion-panel>
|
|
81
|
+
</wcs-accordion>
|
|
82
|
+
`);
|
|
83
|
+
const parentPanels = await page.findAll('wcs-accordion > wcs-accordion-panel');
|
|
84
|
+
// When - Open parent panel first
|
|
85
|
+
await parentPanels[0].click();
|
|
86
|
+
await page.waitForChanges();
|
|
87
|
+
// Then
|
|
88
|
+
expect(await parentPanels[0].getProperty('open')).toBe(true);
|
|
89
|
+
// When - Open nested accordion panel
|
|
90
|
+
const nestedPanels = await page.findAll('wcs-accordion wcs-accordion wcs-accordion-panel');
|
|
91
|
+
await nestedPanels[0].click();
|
|
92
|
+
await page.waitForChanges();
|
|
93
|
+
// Then - Parent should remain open, nested panel should be open
|
|
94
|
+
expect(await parentPanels[0].getProperty('open')).toBe(true);
|
|
95
|
+
expect(await nestedPanels[0].getProperty('open')).toBe(true);
|
|
96
|
+
});
|
|
97
|
+
it('should not close nested accordions when opening another parent panel', async () => {
|
|
98
|
+
// Given
|
|
99
|
+
const page = await newE2EPage();
|
|
100
|
+
await setWcsContent(page, `
|
|
101
|
+
<wcs-accordion id="parent-accordion">
|
|
102
|
+
<wcs-accordion-panel>
|
|
103
|
+
<wcs-accordion-header>Parent Panel 1</wcs-accordion-header>
|
|
104
|
+
<wcs-accordion-content>
|
|
105
|
+
<wcs-accordion>
|
|
106
|
+
<wcs-accordion-panel>
|
|
107
|
+
<wcs-accordion-header>Child Panel 1</wcs-accordion-header>
|
|
108
|
+
<wcs-accordion-content>Child content 1</wcs-accordion-content>
|
|
109
|
+
</wcs-accordion-panel>
|
|
110
|
+
</wcs-accordion>
|
|
111
|
+
</wcs-accordion-content>
|
|
112
|
+
</wcs-accordion-panel>
|
|
113
|
+
<wcs-accordion-panel>
|
|
114
|
+
<wcs-accordion-header>Parent Panel 2</wcs-accordion-header>
|
|
115
|
+
<wcs-accordion-content>
|
|
116
|
+
<wcs-accordion>
|
|
117
|
+
<wcs-accordion-panel>
|
|
118
|
+
<wcs-accordion-header>Child Panel 2</wcs-accordion-header>
|
|
119
|
+
<wcs-accordion-content>Child content 2</wcs-accordion-content>
|
|
120
|
+
</wcs-accordion-panel>
|
|
121
|
+
</wcs-accordion>
|
|
122
|
+
</wcs-accordion-content>
|
|
123
|
+
</wcs-accordion-panel>
|
|
124
|
+
</wcs-accordion>
|
|
125
|
+
`);
|
|
126
|
+
const parentPanels = await page.findAll('#parent-accordion > wcs-accordion-panel');
|
|
127
|
+
// When - Open first parent and its nested panel
|
|
128
|
+
await parentPanels[0].click();
|
|
129
|
+
await page.waitForChanges();
|
|
130
|
+
const firstNestedPanel = await page.find('wcs-accordion > wcs-accordion-panel:first-child wcs-accordion-panel');
|
|
131
|
+
await firstNestedPanel.click();
|
|
132
|
+
await page.waitForChanges();
|
|
133
|
+
// Then
|
|
134
|
+
expect(await parentPanels[0].getProperty('open')).toBe(true);
|
|
135
|
+
expect(await firstNestedPanel.getProperty('open')).toBe(true);
|
|
136
|
+
// When - Open second parent
|
|
137
|
+
await parentPanels[1].click();
|
|
138
|
+
await page.waitForChanges();
|
|
139
|
+
const secondNestedPanel = await page.find('wcs-accordion > wcs-accordion-panel:nth-child(2) wcs-accordion-panel');
|
|
140
|
+
// Then - First parent should close but nested panel state should be preserved
|
|
141
|
+
expect(await parentPanels[0].getProperty('open')).toBe(false);
|
|
142
|
+
expect(await parentPanels[1].getProperty('open')).toBe(true);
|
|
143
|
+
expect(await firstNestedPanel.getProperty('open')).toBe(true); // Nested panel keeps its state
|
|
144
|
+
expect(await secondNestedPanel.getProperty('open')).toBe(false);
|
|
145
|
+
});
|
|
146
|
+
it('should handle deeply nested accordions independently', async () => {
|
|
147
|
+
// Given
|
|
148
|
+
const page = await newE2EPage();
|
|
149
|
+
await setWcsContent(page, `
|
|
150
|
+
<wcs-accordion>
|
|
151
|
+
<wcs-accordion-panel>
|
|
152
|
+
<wcs-accordion-header>Level 1</wcs-accordion-header>
|
|
153
|
+
<wcs-accordion-content>
|
|
154
|
+
<wcs-accordion>
|
|
155
|
+
<wcs-accordion-panel>
|
|
156
|
+
<wcs-accordion-header>Level 2</wcs-accordion-header>
|
|
157
|
+
<wcs-accordion-content>
|
|
158
|
+
<wcs-accordion>
|
|
159
|
+
<wcs-accordion-panel>
|
|
160
|
+
<wcs-accordion-header>Level 3</wcs-accordion-header>
|
|
161
|
+
<wcs-accordion-content>Deep content</wcs-accordion-content>
|
|
162
|
+
</wcs-accordion-panel>
|
|
163
|
+
</wcs-accordion>
|
|
164
|
+
</wcs-accordion-content>
|
|
165
|
+
</wcs-accordion-panel>
|
|
166
|
+
</wcs-accordion>
|
|
167
|
+
</wcs-accordion-content>
|
|
168
|
+
</wcs-accordion-panel>
|
|
169
|
+
</wcs-accordion>
|
|
170
|
+
`);
|
|
171
|
+
// When - Open all levels progressively
|
|
172
|
+
const level1Panel = await page.find('wcs-accordion > wcs-accordion-panel');
|
|
173
|
+
await level1Panel.click();
|
|
174
|
+
await page.waitForChanges();
|
|
175
|
+
const level2Panel = await page.find('wcs-accordion wcs-accordion > wcs-accordion-panel');
|
|
176
|
+
await level2Panel.click();
|
|
177
|
+
await page.waitForChanges();
|
|
178
|
+
const level3Panel = await page.find('wcs-accordion wcs-accordion wcs-accordion > wcs-accordion-panel');
|
|
179
|
+
await level3Panel.click();
|
|
180
|
+
await page.waitForChanges();
|
|
181
|
+
// Then - All levels should be open
|
|
182
|
+
expect(await level1Panel.getProperty('open')).toBe(true);
|
|
183
|
+
expect(await level2Panel.getProperty('open')).toBe(true);
|
|
184
|
+
expect(await level3Panel.getProperty('open')).toBe(true);
|
|
185
|
+
});
|
|
186
|
+
});
|
|
187
|
+
//# sourceMappingURL=accordion.e2e.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.e2e.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\nimport { setWcsContent } from '../../utils/tests';\n\ndescribe('accordion', () => {\n it('should open and close accordion panels', async () => {\n // Given\n const page = await newE2EPage();\n await setWcsContent(page, `\n <wcs-accordion>\n <wcs-accordion-panel>\n <wcs-accordion-header>Panel 1</wcs-accordion-header>\n <wcs-accordion-content>Content 1</wcs-accordion-content>\n </wcs-accordion-panel>\n <wcs-accordion-panel>\n <wcs-accordion-header>Panel 2</wcs-accordion-header>\n <wcs-accordion-content>Content 2</wcs-accordion-content>\n </wcs-accordion-panel>\n </wcs-accordion>\n `);\n\n const panels = await page.findAll('wcs-accordion-panel');\n\n // When\n await panels[0].click();\n await page.waitForChanges();\n\n // Then\n expect(await panels[0].getProperty('open')).toBe(true);\n expect(await panels[1].getProperty('open')).toBe(false);\n });\n\n it('should close other panels when opening a new one at the same level', async () => {\n // Given\n const page = await newE2EPage();\n await setWcsContent(page, `\n <wcs-accordion>\n <wcs-accordion-panel>\n <wcs-accordion-header>Panel 1</wcs-accordion-header>\n <wcs-accordion-content>Content 1</wcs-accordion-content>\n </wcs-accordion-panel>\n <wcs-accordion-panel>\n <wcs-accordion-header>Panel 2</wcs-accordion-header>\n <wcs-accordion-content>Content 2</wcs-accordion-content>\n </wcs-accordion-panel>\n </wcs-accordion>\n `);\n\n const panels = await page.findAll('wcs-accordion-panel');\n\n // When - Open first panel\n await panels[0].click();\n await page.waitForChanges();\n\n // Then\n expect(await panels[0].getProperty('open')).toBe(true);\n expect(await panels[1].getProperty('open')).toBe(false);\n\n // When - Open second panel\n await panels[1].click();\n await page.waitForChanges();\n\n // Then - First panel should be closed\n expect(await panels[0].getProperty('open')).toBe(false);\n expect(await panels[1].getProperty('open')).toBe(true);\n });\n\n it('should not close parent accordion when opening nested accordion', async () => {\n // Given\n const page = await newE2EPage();\n await setWcsContent(page, `\n <wcs-accordion>\n <wcs-accordion-panel>\n <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>\n <wcs-accordion-content>\n <p>Parent content</p>\n <wcs-accordion>\n <wcs-accordion-panel>\n <wcs-accordion-header>Child Panel 1</wcs-accordion-header>\n <wcs-accordion-content>Child content 1</wcs-accordion-content>\n </wcs-accordion-panel>\n <wcs-accordion-panel>\n <wcs-accordion-header>Child Panel 2</wcs-accordion-header>\n <wcs-accordion-content>Child content 2</wcs-accordion-content>\n </wcs-accordion-panel>\n </wcs-accordion>\n </wcs-accordion-content>\n </wcs-accordion-panel>\n <wcs-accordion-panel>\n <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>\n <wcs-accordion-content>Parent content 2</wcs-accordion-content>\n </wcs-accordion-panel>\n </wcs-accordion>\n `);\n\n const parentPanels = await page.findAll('wcs-accordion > wcs-accordion-panel');\n\n // When - Open parent panel first\n await parentPanels[0].click();\n await page.waitForChanges();\n\n // Then\n expect(await parentPanels[0].getProperty('open')).toBe(true);\n\n // When - Open nested accordion panel\n const nestedPanels = await page.findAll('wcs-accordion wcs-accordion wcs-accordion-panel');\n await nestedPanels[0].click();\n await page.waitForChanges();\n\n // Then - Parent should remain open, nested panel should be open\n expect(await parentPanels[0].getProperty('open')).toBe(true);\n expect(await nestedPanels[0].getProperty('open')).toBe(true);\n });\n\n it('should not close nested accordions when opening another parent panel', async () => {\n // Given\n const page = await newE2EPage();\n await setWcsContent(page, `\n <wcs-accordion id=\"parent-accordion\">\n <wcs-accordion-panel>\n <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>\n <wcs-accordion-content>\n <wcs-accordion>\n <wcs-accordion-panel>\n <wcs-accordion-header>Child Panel 1</wcs-accordion-header>\n <wcs-accordion-content>Child content 1</wcs-accordion-content>\n </wcs-accordion-panel>\n </wcs-accordion>\n </wcs-accordion-content>\n </wcs-accordion-panel>\n <wcs-accordion-panel>\n <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>\n <wcs-accordion-content>\n <wcs-accordion>\n <wcs-accordion-panel>\n <wcs-accordion-header>Child Panel 2</wcs-accordion-header>\n <wcs-accordion-content>Child content 2</wcs-accordion-content>\n </wcs-accordion-panel>\n </wcs-accordion>\n </wcs-accordion-content>\n </wcs-accordion-panel>\n </wcs-accordion>\n `);\n\n const parentPanels = await page.findAll('#parent-accordion > wcs-accordion-panel');\n\n // When - Open first parent and its nested panel\n await parentPanels[0].click();\n await page.waitForChanges();\n\n const firstNestedPanel = await page.find('wcs-accordion > wcs-accordion-panel:first-child wcs-accordion-panel');\n await firstNestedPanel.click();\n await page.waitForChanges();\n\n // Then\n expect(await parentPanels[0].getProperty('open')).toBe(true);\n expect(await firstNestedPanel.getProperty('open')).toBe(true);\n\n // When - Open second parent\n await parentPanels[1].click();\n await page.waitForChanges();\n\n const secondNestedPanel = await page.find('wcs-accordion > wcs-accordion-panel:nth-child(2) wcs-accordion-panel');\n\n // Then - First parent should close but nested panel state should be preserved\n expect(await parentPanels[0].getProperty('open')).toBe(false);\n expect(await parentPanels[1].getProperty('open')).toBe(true);\n expect(await firstNestedPanel.getProperty('open')).toBe(true); // Nested panel keeps its state\n expect(await secondNestedPanel.getProperty('open')).toBe(false);\n });\n\n it('should handle deeply nested accordions independently', async () => {\n // Given\n const page = await newE2EPage();\n await setWcsContent(page, `\n <wcs-accordion>\n <wcs-accordion-panel>\n <wcs-accordion-header>Level 1</wcs-accordion-header>\n <wcs-accordion-content>\n <wcs-accordion>\n <wcs-accordion-panel>\n <wcs-accordion-header>Level 2</wcs-accordion-header>\n <wcs-accordion-content>\n <wcs-accordion>\n <wcs-accordion-panel>\n <wcs-accordion-header>Level 3</wcs-accordion-header>\n <wcs-accordion-content>Deep content</wcs-accordion-content>\n </wcs-accordion-panel>\n </wcs-accordion>\n </wcs-accordion-content>\n </wcs-accordion-panel>\n </wcs-accordion>\n </wcs-accordion-content>\n </wcs-accordion-panel>\n </wcs-accordion>\n `);\n\n // When - Open all levels progressively\n const level1Panel = await page.find('wcs-accordion > wcs-accordion-panel');\n await level1Panel.click();\n await page.waitForChanges();\n\n const level2Panel = await page.find('wcs-accordion wcs-accordion > wcs-accordion-panel');\n await level2Panel.click();\n await page.waitForChanges();\n\n const level3Panel = await page.find('wcs-accordion wcs-accordion wcs-accordion > wcs-accordion-panel');\n await level3Panel.click();\n await page.waitForChanges();\n\n // Then - All levels should be open\n expect(await level1Panel.getProperty('open')).toBe(true);\n expect(await level2Panel.getProperty('open')).toBe(true);\n expect(await level3Panel.getProperty('open')).toBe(true);\n });\n});\n\n"]}
|
|
@@ -18,6 +18,7 @@ export class Accordion {
|
|
|
18
18
|
this.updateGroupContentWithHeader();
|
|
19
19
|
}
|
|
20
20
|
wcsOpenChangeHandler(event) {
|
|
21
|
+
event.stopImmediatePropagation();
|
|
21
22
|
if (event.detail) {
|
|
22
23
|
this.closeAllAccordionsExcept(event.target);
|
|
23
24
|
}
|
|
@@ -38,7 +39,7 @@ export class Accordion {
|
|
|
38
39
|
});
|
|
39
40
|
}
|
|
40
41
|
render() {
|
|
41
|
-
return (h(Host, { key: '
|
|
42
|
+
return (h(Host, { key: '0f1933aeff3cc2d73e6fc5051bac74656e418a02' }, h("slot", { key: 'effc61fd6ac1edcb598d9bc4053363030a1fc2e9' })));
|
|
42
43
|
}
|
|
43
44
|
getAllAccordionPanelsFromHostElement() {
|
|
44
45
|
return Array.from(this.el.children)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEjF;;;;GAIG;AAMH,MAAM,OAAO,SAAS;;QAEV,oBAAe,GAAmC,EAAE,CAAC;8BAMZ,IAAI;yBAOT,KAAK;sCASQ,KAAK;;IAE9D,iBAAiB;QACb,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,oCAAoC,EAAE,CAAC;QAEnE,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACnC,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,4BAA4B,EAAE,CAAC;IACxC,CAAC;IAGD,oBAAoB,CAAC,KAA2B;QAC5C,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACf,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAChD,CAAC;IACL,CAAC;IAGO,2BAA2B;QAC/B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC7C,CAAC,CAAC,CAAA;IACN,CAAC;IAGO,sBAAsB;QAC1B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACnC,CAAC,CAAC,CAAA;IACN,CAAC;IAEO,4BAA4B;QAChC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC;QAC7D,CAAC,CAAC,CAAA;IACN,CAAC;IAGD,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,8DAAO,CACJ,CACV,CAAC;IACN,CAAC;IAEO,oCAAoC;QACxC,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;aAC9B,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAmC,CAAC;IAC9F,CAAC;IAED;;OAEG;IACK,wBAAwB,CAAC,WAAwB;QACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;IAChF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * The accordion component is a vertical stack of interactive headings used to toggle the display of further information.\n * \n * @cssprop --wcs-accordion-gap - Gap between accordion panels\n */\n@Component({\n tag: 'wcs-accordion',\n styleUrl: 'accordion.scss',\n shadow: true\n})\nexport class Accordion {\n @Element() private el!: HTMLWcsAccordionElement;\n private accordionPanels: HTMLWcsAccordionPanelElement[] = [];\n\n /**\n * Specifies whether accordion-panel components should display the open/close text.\n * if false, it won't show the open/close text in all accordion-panel.\n */\n @Prop({reflect: true}) hideActionText: boolean = true;\n\n /**\n * Specifies whether accordion-panel components should highlight when open with primary color.\n * if true, the background color of the accordion-panel will be the primary color.\n * if false, the background color of the accordion-panel will be wcs-light.\n */\n @Prop({reflect: true}) highlight: boolean = false;\n\n /**\n * @deprecated **The content is now always grouped with the panel header**\n * \n * ~~Specifies whether accordion-panel components should group the content with header in one card~~\n * ~~if true, there will be only one card with the header and the content~~\n * ~~Nothing change when the panel is close~~\n */\n @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n componentWillLoad(): Promise<void> | void {\n this.accordionPanels = this.getAllAccordionPanelsFromHostElement();\n\n this.updateHideActiontextOnPanel();\n this.updateHighlightOnPanel();\n this.updateGroupContentWithHeader();\n }\n\n @Listen('wcsOpenChange')\n wcsOpenChangeHandler(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.closeAllAccordionsExcept(event.target);\n }\n }\n\n @Watch('hideActionText')\n private updateHideActiontextOnPanel() {\n this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n opt.hideActionText = this.hideActionText;\n })\n }\n\n @Watch('highlight')\n private updateHighlightOnPanel() {\n this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n opt.highlight = this.highlight;\n })\n }\n @Watch('groupContentWithHeader')\n private updateGroupContentWithHeader() {\n this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n opt.groupContentWithHeader = this.groupContentWithHeader;\n })\n }\n\n\n render() {\n return (\n <Host>\n <slot/>\n </Host>\n );\n }\n\n private getAllAccordionPanelsFromHostElement(): HTMLWcsAccordionPanelElement[] {\n return Array.from(this.el.children)\n .filter(el => el.tagName === 'WCS-ACCORDION-PANEL') as HTMLWcsAccordionPanelElement[];\n }\n\n /**\n * Close all accordion panels except the one that match the eventTarget reference\n */\n private closeAllAccordionsExcept(eventTarget: EventTarget): void {\n this.accordionPanels.filter(a => a !== eventTarget).forEach(a => a.close());\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEjF;;;;GAIG;AAMH,MAAM,OAAO,SAAS;;QAEV,oBAAe,GAAmC,EAAE,CAAC;8BAMZ,IAAI;yBAOT,KAAK;sCASQ,KAAK;;IAE9D,iBAAiB;QACb,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,oCAAoC,EAAE,CAAC;QAEnE,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACnC,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,4BAA4B,EAAE,CAAC;IACxC,CAAC;IAGD,oBAAoB,CAAC,KAA2B;QAC5C,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACjC,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACf,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAChD,CAAC;IACL,CAAC;IAGO,2BAA2B;QAC/B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC7C,CAAC,CAAC,CAAA;IACN,CAAC;IAGO,sBAAsB;QAC1B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACnC,CAAC,CAAC,CAAA;IACN,CAAC;IAEO,4BAA4B;QAChC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC;QAC7D,CAAC,CAAC,CAAA;IACN,CAAC;IAGD,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,8DAAO,CACJ,CACV,CAAC;IACN,CAAC;IAEO,oCAAoC;QACxC,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;aAC9B,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAmC,CAAC;IAC9F,CAAC;IAED;;OAEG;IACK,wBAAwB,CAAC,WAAwB;QACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;IAChF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * The accordion component is a vertical stack of interactive headings used to toggle the display of further information.\n * \n * @cssprop --wcs-accordion-gap - Gap between accordion panels\n */\n@Component({\n tag: 'wcs-accordion',\n styleUrl: 'accordion.scss',\n shadow: true\n})\nexport class Accordion {\n @Element() private el!: HTMLWcsAccordionElement;\n private accordionPanels: HTMLWcsAccordionPanelElement[] = [];\n\n /**\n * Specifies whether accordion-panel components should display the open/close text.\n * if false, it won't show the open/close text in all accordion-panel.\n */\n @Prop({reflect: true}) hideActionText: boolean = true;\n\n /**\n * Specifies whether accordion-panel components should highlight when open with primary color.\n * if true, the background color of the accordion-panel will be the primary color.\n * if false, the background color of the accordion-panel will be wcs-light.\n */\n @Prop({reflect: true}) highlight: boolean = false;\n\n /**\n * @deprecated **The content is now always grouped with the panel header**\n * \n * ~~Specifies whether accordion-panel components should group the content with header in one card~~\n * ~~if true, there will be only one card with the header and the content~~\n * ~~Nothing change when the panel is close~~\n */\n @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n componentWillLoad(): Promise<void> | void {\n this.accordionPanels = this.getAllAccordionPanelsFromHostElement();\n\n this.updateHideActiontextOnPanel();\n this.updateHighlightOnPanel();\n this.updateGroupContentWithHeader();\n }\n\n @Listen('wcsOpenChange')\n wcsOpenChangeHandler(event: CustomEvent<boolean>) {\n event.stopImmediatePropagation();\n if (event.detail) {\n this.closeAllAccordionsExcept(event.target);\n }\n }\n\n @Watch('hideActionText')\n private updateHideActiontextOnPanel() {\n this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n opt.hideActionText = this.hideActionText;\n })\n }\n\n @Watch('highlight')\n private updateHighlightOnPanel() {\n this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n opt.highlight = this.highlight;\n })\n }\n @Watch('groupContentWithHeader')\n private updateGroupContentWithHeader() {\n this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n opt.groupContentWithHeader = this.groupContentWithHeader;\n })\n }\n\n\n render() {\n return (\n <Host>\n <slot/>\n </Host>\n );\n }\n\n private getAllAccordionPanelsFromHostElement(): HTMLWcsAccordionPanelElement[] {\n return Array.from(this.el.children)\n .filter(el => el.tagName === 'WCS-ACCORDION-PANEL') as HTMLWcsAccordionPanelElement[];\n }\n\n /**\n * Close all accordion panels except the one that match the eventTarget reference\n */\n private closeAllAccordionsExcept(eventTarget: EventTarget): void {\n this.accordionPanels.filter(a => a !== eventTarget).forEach(a => a.close());\n }\n}\n"]}
|
|
@@ -53,7 +53,7 @@ export class AccordionPanel {
|
|
|
53
53
|
this.open = false;
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
|
-
return (h(Host, { key: '
|
|
56
|
+
return (h(Host, { key: 'bcd77b8240481d974555978566472aa28fd374d4' }, h("button", Object.assign({ key: '5fde3c3d7fe95a9a685ef3b9f03b0344fdf7d1be', "aria-expanded": this.open ? "true" : "false", "aria-controls": "content", class: "header", ref: (el) => this.nativeButton = el, onClick: () => this.open = !this.open }, this.inheritedAttributes), h("slot", { key: '05bd17435fa8821e26d7df49305f2dd331783fb4', name: "header" }), h("span", { key: 'a25b3acc00d4c00675fadfdbabb3c6173d0b9efa', class: "header-action" }, !this.hideActionText && (h("span", { key: '5979042236883a5181471bad831dbe90d7518047' }, this.open ? 'Fermez' : 'Ouvrez')), h(SelectArrow, { key: '8f918ddaef3b7d01c271ce39e0ffe614af33fe8e', up: this.open }))), h("div", { key: '594f012cfe62aa5eb1d8cd2184af7a87ff9f3adb', class: "content", id: "content" }, h("slot", { key: '040d3ba0ec7d879341fc3c7a563f1b3b84659564', name: "content" }))));
|
|
57
57
|
}
|
|
58
58
|
static get is() { return "wcs-accordion-panel"; }
|
|
59
59
|
static get encapsulation() { return "shadow"; }
|
|
@@ -152,7 +152,7 @@ export class AccordionPanel {
|
|
|
152
152
|
"composed": true,
|
|
153
153
|
"docs": {
|
|
154
154
|
"tags": [],
|
|
155
|
-
"text": ""
|
|
155
|
+
"text": "Emitted when the open property changes. \nNote that this event is stopped from propagating when using the component inside a wcs-accordion as the \naccordion handles the open state of its accordion-panel children."
|
|
156
156
|
},
|
|
157
157
|
"complexType": {
|
|
158
158
|
"original": "boolean",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion-panel.js","sourceRoot":"","sources":["../../../src/components/accordion-panel/accordion-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAErG,MAAM,yBAAyB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAMH,MAAM,OAAO,cAAc;;QAGf,wBAAmB,GAAyB,EAAE,CAAC;oBAED,KAAK;8BAMV,KAAK;yBAOV,KAAK;sCAOQ,KAAK;;
|
|
1
|
+
{"version":3,"file":"accordion-panel.js","sourceRoot":"","sources":["../../../src/components/accordion-panel/accordion-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAErG,MAAM,yBAAyB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAMH,MAAM,OAAO,cAAc;;QAGf,wBAAmB,GAAyB,EAAE,CAAC;oBAED,KAAK;8BAMV,KAAK;yBAOV,KAAK;sCAOQ,KAAK;;IAU9D,UAAU,CAAC,QAAiB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,yBAAyB,CAAC,CAC3D,CAAC;IACN,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC;IAGD,KAAK,CAAC,KAAK;QACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,MAAM;QAIF,OAAO,CACH,EAAC,IAAI;YACD,8FAAuB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAA,CAAC,CAAC,OAAO,mBAC5B,SAAS,EACvB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IACjC,IAAI,CAAC,mBAAmB;gBAChC,6DAAM,IAAI,EAAC,QAAQ,GAAE;gBACrB,6DAAM,KAAK,EAAC,eAAe;oBACtB,CAAC,IAAI,CAAC,cAAc,IAAI,CACrB,+DAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAQ,CAAC;oBAEnD,EAAC,WAAW,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAC1B,CACF;YACT,4DAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS;gBAC7B,6DAAM,IAAI,EAAC,SAAS,GAAE,CACpB,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ACCORDION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The accordion-panel is a subcomponent of `wcs-accordion`. It represents every panel of the accordion that can be expanded.\n * \n *\n * @cssprop --wcs-accordion-panel-color-default - Default color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-highlight - Highlight color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-hover - Hover color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-press - Press color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-default - Default action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-highlight - Highlight action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-hover - Hovered action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-press - Pressed action color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-default - Default background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-highlight - Highlight background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-hover - Hover background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-press - Press background color of the accordion panel\n * @cssprop --wcs-accordion-panel-header-font-size - Font size of the accordion panel header\n * @cssprop --wcs-accordion-panel-header-font-weight - Font weight of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-radius - Border radius of the accordion panel\n * @cssprop --wcs-accordion-panel-border-radius-open - Border radius of the open accordion panel\n * @cssprop --wcs-accordion-panel-padding-vertical - Vertical padding of the accordion panel\n * @cssprop --wcs-accordion-panel-padding-horizontal - Horizontal padding of the accordion panel\n * @cssprop --wcs-accordion-panel-header-border-width - Border width of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-width - Border width of the accordion panel\n * @cssprop --wcs-accordion-panel-border-width-focus - Border width of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-color - Border color of the accordion panel\n * @cssprop --wcs-accordion-panel-border-color-focus - Border color of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-style-focus - Border style of the accordion panel when focused\n * @cssprop --wcs-accordion-transition-duration - Transition duration of the accordion panel\n */\n@Component({\n tag: 'wcs-accordion-panel',\n styleUrl: 'accordion-panel.scss',\n shadow: true\n})\nexport class AccordionPanel implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeButton?: HTMLButtonElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n @Prop({reflect: true, mutable: true}) open: boolean = false;\n\n /**\n * Specifies whether the component should display the open/close text.\n * if false, it won't show the open/close text.\n */\n @Prop({reflect: true}) hideActionText: boolean = false;\n\n /**\n * Specifies whether the component should highlight when open with primary color.\n * if true, the background color will be the primary color.\n * if false, the background color will be wcs-light.\n */\n @Prop({reflect: true}) highlight: boolean = false;\n\n /**\n * Specifies wether the component should group the content with header in one card\n * if true, there will be only one card with the header and the content\n * Nothing change when the panel is close\n */\n @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n /**\n * Emitted when the open property changes. \n * Note that this event is stopped from propagating when using the component inside a wcs-accordion as the \n * accordion handles the open state of its accordion-panel children.\n */\n @Event() wcsOpenChange!: EventEmitter<boolean>;\n\n @Watch('open')\n openChange(newValue: boolean) {\n this.wcsOpenChange.emit(newValue);\n }\n\n componentWillLoad(): Promise<void> | void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n setOrRemoveAttribute(this.nativeButton, attr, value);\n }\n\n @Method()\n async close() {\n this.open = false;\n }\n\n render() {\n \n \n \n return (\n <Host>\n <button aria-expanded={this.open ? \"true\": \"false\"}\n aria-controls=\"content\"\n class=\"header\"\n ref={(el) => this.nativeButton = el}\n onClick={() => this.open = !this.open}\n {...this.inheritedAttributes}>\n <slot name=\"header\"/>\n <span class=\"header-action\">\n {!this.hideActionText && (\n <span>{this.open ? 'Fermez' : 'Ouvrez'}</span>)\n }\n <SelectArrow up={this.open}/>\n </span>\n </button>\n <div class=\"content\" id=\"content\">\n <slot name=\"content\"/>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -53,6 +53,7 @@ export class Checkbox {
|
|
|
53
53
|
this.name = this.checkboxId;
|
|
54
54
|
this.indeterminate = false;
|
|
55
55
|
this.checked = false;
|
|
56
|
+
this.required = false;
|
|
56
57
|
this.labelAlignment = 'center';
|
|
57
58
|
this.disabled = false;
|
|
58
59
|
}
|
|
@@ -117,7 +118,7 @@ export class Checkbox {
|
|
|
117
118
|
}
|
|
118
119
|
}
|
|
119
120
|
render() {
|
|
120
|
-
return (h(Host, { key: '
|
|
121
|
+
return (h(Host, { key: '84af94b1e903c4a7a44d7c216b122faa1d67c125' }, h("label", { key: 'df9cd51e804a3d07dcd9698b98492f868747a5ef', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, h("input", Object.assign({ key: '68d52bb45b20bd37dfab4845e7a664b0a5e65e49', onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), onFocus: this.handleFocus.bind(this), onClick: this.handleInputClick.bind(this), checked: this.checked, class: "wcs-checkbox", type: "checkbox", ref: (el) => (this.nativeInput = el), name: this.name, disabled: this.disabled, id: this.name }, this.inheritedAttributes)), h("span", { key: '506c869a0bcbf742422e7b2029e8862687cbf286', class: "wcs-checkmark" }), h("span", { key: '81e8130a3f3eed1d02d0bf075f5793b0e12a64ae', class: "text" }, h("slot", { key: '97387419d47b55af6c4911df5aeaa2bcd89f750c', onSlotchange: (_) => this.onSlotChange() })))));
|
|
121
122
|
}
|
|
122
123
|
static get is() { return "wcs-checkbox"; }
|
|
123
124
|
static get encapsulation() { return "shadow"; }
|
|
@@ -188,6 +189,24 @@ export class Checkbox {
|
|
|
188
189
|
"reflect": true,
|
|
189
190
|
"defaultValue": "false"
|
|
190
191
|
},
|
|
192
|
+
"required": {
|
|
193
|
+
"type": "boolean",
|
|
194
|
+
"mutable": false,
|
|
195
|
+
"complexType": {
|
|
196
|
+
"original": "boolean",
|
|
197
|
+
"resolved": "boolean",
|
|
198
|
+
"references": {}
|
|
199
|
+
},
|
|
200
|
+
"required": false,
|
|
201
|
+
"optional": false,
|
|
202
|
+
"docs": {
|
|
203
|
+
"tags": [],
|
|
204
|
+
"text": "If `true`, the user must fill in a value before submitting a form."
|
|
205
|
+
},
|
|
206
|
+
"attribute": "required",
|
|
207
|
+
"reflect": false,
|
|
208
|
+
"defaultValue": "false"
|
|
209
|
+
},
|
|
191
210
|
"labelAlignment": {
|
|
192
211
|
"type": "string",
|
|
193
212
|
"mutable": true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Event,\n EventEmitter,\n ComponentInterface,\n h,\n Host,\n Method,\n Element,\n Listen\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.\n * \n * @cssprop --wcs-checkbox-border-color-default - Default color of the border\n * @cssprop --wcs-checkbox-border-color-hover - Color of the border when hovered\n * @cssprop --wcs-checkbox-border-color-disabled - Color of the border when disabled\n * @cssprop --wcs-checkbox-border-color-selected - Color of the border when selected\n * @cssprop --wcs-checkbox-border-color-indeterminate - Color of the border when indeterminate\n * \n * @cssprop --wcs-checkbox-border-radius - Border radius of the checkbox\n * @cssprop --wcs-checkbox-border-width - Width of the border of the checkbox\n * \n * @cssprop --wcs-checkbox-size - Size of the checkbox\n * \n * @cssprop --wcs-checkbox-text-color-default - Color of the text when the checkbox is not selected\n * @cssprop --wcs-checkbox-text-color-disabled - Color of the text when the checkbox is disabled\n * @cssprop --wcs-checkbox-text-color-hover - Color of the text when the checkbox is hovered\n * @cssprop --wcs-checkbox-text-color-selected - Color of the text when the checkbox is selected\n * \n * @cssprop --wcs-checkbox-text-font-size - Font size of the text\n * @cssprop --wcs-checkbox-text-font-weight - Font weight of the text\n * \n * @cssprop --wcs-checkbox-background-color-default - Default background color of the checkbox\n * @cssprop --wcs-checkbox-background-color-hover - Background color of the checkbox when hovered\n * @cssprop --wcs-checkbox-background-color-disabled - Background color of the checkbox when disabled\n * @cssprop --wcs-checkbox-background-color-selected - Background color of the checkbox when selected\n * @cssprop --wcs-checkbox-background-color-indeterminate - Background color of the checkbox when indeterminate\n * \n * @cssprop --wcs-checkbox-outline-radius-focus - Border radius of the focus outline\n * @cssprop --wcs-checkbox-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-checkbox-gap - Gap between the checkbox and the label\n * @cssprop --wcs-checkmark-color - Color of the checkmark\n * @cssprop --wcs-checkmark-height - Height of the checkmark (From the bottom left to the top right of the checkmark)\n * @cssprop --wcs-checkmark-width - Width of the checkmark (From the bottom right to the top left of the checkmark)\n * @cssprop --wcs-checkmark-border-width - Width of the border of the checkmark\n *\n * @cssprop --wcs-indeterminate-bar-width - Width of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-height - Height of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-border-radius - Border-radius of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-background-color - Color of the indeterminate bar\n * \n * @cssprop --wcs-checkbox-transition-duration - Duration of the transition\n */\n@Component({\n tag: 'wcs-checkbox',\n styleUrl: 'checkbox.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Checkbox implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n @Element() private el!: HTMLElement;\n private nativeInput!: HTMLInputElement;\n private inheritedAttributes: { [k: string]: any } = {};\n private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n\n @Prop() name = this.checkboxId;\n /**\n * If `true` the checkbox is in indeterminate state.\n */\n @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n\n /**\n * If `true`, the checkbox is selected.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n /**\n * Specifie the alignment of the checkbox with the label content\n */\n @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n /**\n * Specify whether the checkbox is disabled or not.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Emitted when the checked property has changed.\n */\n @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n /**\n * Emitted when the checkbox has focus.\n */\n @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the checkbox loses focus.\n */\n @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): Promise<void> | void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, CHECKBOX_INHERITED_ATTRS),\n };\n }\n\n componentDidLoad() {\n this.onSlotChange();\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n setOrRemoveAttribute(this.nativeInput, attr, value);\n }\n\n @Method()\n async getLabel(): Promise<string> {\n return getSlottedContentText(this.el);\n }\n\n handleChange(e: Event) {\n e.stopImmediatePropagation();\n e.preventDefault();\n this.toggleCheckboxState();\n }\n \n @Listen('click')\n async handleHostClick(e: Event){\n e.preventDefault();\n e.stopPropagation();\n \n this.toggleCheckboxState();\n }\n\n handleInputClick(ev: PointerEvent) {\n // If the click event is coming from the mouse we ignore it.\n // We only want to handle the keyboard interactions as it is the only purpose of this native input\n if (ev.detail) {\n ev.stopImmediatePropagation()\n ev.preventDefault();\n }\n }\n\n toggleCheckboxState() {\n if (this.disabled) return;\n \n this.indeterminate = false;\n this.checked = !this.checked;\n this.wcsChange.emit({\n checked: this.checked,\n });\n }\n \n handleFocus(event: FocusEvent) {\n this.wcsFocus.emit(event);\n }\n\n handleBlur(event: FocusEvent) {\n this.wcsBlur.emit(event);\n }\n\n onSlotChange() { \n const slot = this.el.shadowRoot.querySelector('slot');\n if (slot) {\n // TODO: remove when pseudo-class that indicate a slot has content is supported in all major browsers \n // (https://github.com/w3c/csswg-drafts/issues/6867)\n // https://developer.mozilla.org/en-US/docs/Web/CSS/:empty\n const assignedNodes = slot.assignedNodes();\n if (assignedNodes.length > 0) {\n this.el.shadowRoot.querySelector('.text').classList.remove('hidden');\n } else {\n this.el.shadowRoot.querySelector('.text').classList.add('hidden');\n }\n }\n }\n \n render() {\n return (\n <Host>\n <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n <input\n onBlur={this.handleBlur.bind(this)}\n onChange={this.handleChange.bind(this)}\n onFocus={this.handleFocus.bind(this)}\n onClick={this.handleInputClick.bind(this)}\n checked={this.checked}\n class=\"wcs-checkbox\"\n type=\"checkbox\"\n ref={(el) => (this.nativeInput = el)}\n name={this.name}\n disabled={this.disabled}\n id={this.name}\n {...this.inheritedAttributes}\n ></input>\n <span class=\"wcs-checkmark\"></span>\n <span class=\"text\">\n <slot onSlotchange={(_) => this.onSlotChange()} />\n </span>\n </label>\n </Host>\n );\n }\n}\n\nlet checkboxIds = 0;\n"]}
|
|
1
|
+
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Event,\n EventEmitter,\n ComponentInterface,\n h,\n Host,\n Method,\n Element,\n Listen\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.\n * \n * @cssprop --wcs-checkbox-border-color-default - Default color of the border\n * @cssprop --wcs-checkbox-border-color-hover - Color of the border when hovered\n * @cssprop --wcs-checkbox-border-color-disabled - Color of the border when disabled\n * @cssprop --wcs-checkbox-border-color-selected - Color of the border when selected\n * @cssprop --wcs-checkbox-border-color-indeterminate - Color of the border when indeterminate\n * \n * @cssprop --wcs-checkbox-border-radius - Border radius of the checkbox\n * @cssprop --wcs-checkbox-border-width - Width of the border of the checkbox\n * \n * @cssprop --wcs-checkbox-size - Size of the checkbox\n * \n * @cssprop --wcs-checkbox-text-color-default - Color of the text when the checkbox is not selected\n * @cssprop --wcs-checkbox-text-color-disabled - Color of the text when the checkbox is disabled\n * @cssprop --wcs-checkbox-text-color-hover - Color of the text when the checkbox is hovered\n * @cssprop --wcs-checkbox-text-color-selected - Color of the text when the checkbox is selected\n * \n * @cssprop --wcs-checkbox-text-font-size - Font size of the text\n * @cssprop --wcs-checkbox-text-font-weight - Font weight of the text\n * \n * @cssprop --wcs-checkbox-background-color-default - Default background color of the checkbox\n * @cssprop --wcs-checkbox-background-color-hover - Background color of the checkbox when hovered\n * @cssprop --wcs-checkbox-background-color-disabled - Background color of the checkbox when disabled\n * @cssprop --wcs-checkbox-background-color-selected - Background color of the checkbox when selected\n * @cssprop --wcs-checkbox-background-color-indeterminate - Background color of the checkbox when indeterminate\n * \n * @cssprop --wcs-checkbox-outline-radius-focus - Border radius of the focus outline\n * @cssprop --wcs-checkbox-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-checkbox-gap - Gap between the checkbox and the label\n * @cssprop --wcs-checkmark-color - Color of the checkmark\n * @cssprop --wcs-checkmark-height - Height of the checkmark (From the bottom left to the top right of the checkmark)\n * @cssprop --wcs-checkmark-width - Width of the checkmark (From the bottom right to the top left of the checkmark)\n * @cssprop --wcs-checkmark-border-width - Width of the border of the checkmark\n *\n * @cssprop --wcs-indeterminate-bar-width - Width of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-height - Height of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-border-radius - Border-radius of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-background-color - Color of the indeterminate bar\n * \n * @cssprop --wcs-checkbox-transition-duration - Duration of the transition\n */\n@Component({\n tag: 'wcs-checkbox',\n styleUrl: 'checkbox.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Checkbox implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n @Element() private el!: HTMLElement;\n private nativeInput!: HTMLInputElement;\n private inheritedAttributes: { [k: string]: any } = {};\n private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n\n @Prop() name = this.checkboxId;\n /**\n * If `true` the checkbox is in indeterminate state.\n */\n @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n\n /**\n * If `true`, the checkbox is selected.\n */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false\n\n /**\n * Specifie the alignment of the checkbox with the label content\n */\n @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n /**\n * Specify whether the checkbox is disabled or not.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Emitted when the checked property has changed.\n */\n @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n /**\n * Emitted when the checkbox has focus.\n */\n @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the checkbox loses focus.\n */\n @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): Promise<void> | void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, CHECKBOX_INHERITED_ATTRS),\n };\n }\n\n componentDidLoad() {\n this.onSlotChange();\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n setOrRemoveAttribute(this.nativeInput, attr, value);\n }\n\n @Method()\n async getLabel(): Promise<string> {\n return getSlottedContentText(this.el);\n }\n\n handleChange(e: Event) {\n e.stopImmediatePropagation();\n e.preventDefault();\n this.toggleCheckboxState();\n }\n \n @Listen('click')\n async handleHostClick(e: Event){\n e.preventDefault();\n e.stopPropagation();\n \n this.toggleCheckboxState();\n }\n\n handleInputClick(ev: PointerEvent) {\n // If the click event is coming from the mouse we ignore it.\n // We only want to handle the keyboard interactions as it is the only purpose of this native input\n if (ev.detail) {\n ev.stopImmediatePropagation()\n ev.preventDefault();\n }\n }\n\n toggleCheckboxState() {\n if (this.disabled) return;\n \n this.indeterminate = false;\n this.checked = !this.checked;\n this.wcsChange.emit({\n checked: this.checked,\n });\n }\n \n handleFocus(event: FocusEvent) {\n this.wcsFocus.emit(event);\n }\n\n handleBlur(event: FocusEvent) {\n this.wcsBlur.emit(event);\n }\n\n onSlotChange() { \n const slot = this.el.shadowRoot.querySelector('slot');\n if (slot) {\n // TODO: remove when pseudo-class that indicate a slot has content is supported in all major browsers \n // (https://github.com/w3c/csswg-drafts/issues/6867)\n // https://developer.mozilla.org/en-US/docs/Web/CSS/:empty\n const assignedNodes = slot.assignedNodes();\n if (assignedNodes.length > 0) {\n this.el.shadowRoot.querySelector('.text').classList.remove('hidden');\n } else {\n this.el.shadowRoot.querySelector('.text').classList.add('hidden');\n }\n }\n }\n \n render() {\n return (\n <Host>\n <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n <input\n onBlur={this.handleBlur.bind(this)}\n onChange={this.handleChange.bind(this)}\n onFocus={this.handleFocus.bind(this)}\n onClick={this.handleInputClick.bind(this)}\n checked={this.checked}\n class=\"wcs-checkbox\"\n type=\"checkbox\"\n ref={(el) => (this.nativeInput = el)}\n name={this.name}\n disabled={this.disabled}\n id={this.name}\n {...this.inheritedAttributes}\n ></input>\n <span class=\"wcs-checkmark\"></span>\n <span class=\"text\">\n <slot onSlotchange={(_) => this.onSlotChange()} />\n </span>\n </label>\n </Host>\n );\n }\n}\n\nlet checkboxIds = 0;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chip-interface.js","sourceRoot":"","sources":["../../../src/components/chip/chip-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type WcsChipMode = 'selectable' | 'dismissible';\nexport type WcsChipSize = Extract<WcsSize, 's'>;\nexport type WcsChipVariant = 'primary' | 'secondary';\n"]}
|