@limetech/lime-elements 38.28.2 → 38.29.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/CHANGELOG.md +16 -0
- package/README.md +17 -0
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-chip_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-chip_2.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-list-item.cjs.entry.js +2 -14
- package/dist/cjs/limel-list-item.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-markdown.cjs.entry.js +1 -1
- package/dist/cjs/limel-markdown.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-radio-button.cjs.entry.js +31 -0
- package/dist/cjs/limel-radio-button.cjs.entry.js.map +1 -0
- package/dist/cjs/limel-table.cjs.entry.js +17 -2
- package/dist/cjs/limel-table.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/chip/chip.css +5 -0
- package/dist/collection/components/list-item/list-item.css +6 -46
- package/dist/collection/components/list-item/list-item.js +1 -2
- package/dist/collection/components/list-item/list-item.js.map +1 -1
- package/dist/collection/components/markdown/markdown.css +4 -0
- package/dist/collection/components/radio-button-group/radio-button.css +279 -0
- package/dist/collection/components/radio-button-group/radio-button.js +151 -0
- package/dist/collection/components/radio-button-group/radio-button.js.map +1 -0
- package/dist/collection/components/table/table.css +35 -42
- package/dist/collection/components/table/table.js +36 -1
- package/dist/collection/components/table/table.js.map +1 -1
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-chip_2.entry.js +1 -1
- package/dist/esm/limel-chip_2.entry.js.map +1 -1
- package/dist/esm/limel-list-item.entry.js +3 -15
- package/dist/esm/limel-list-item.entry.js.map +1 -1
- package/dist/esm/limel-markdown.entry.js +1 -1
- package/dist/esm/limel-markdown.entry.js.map +1 -1
- package/dist/esm/limel-radio-button.entry.js +27 -0
- package/dist/esm/limel-radio-button.entry.js.map +1 -0
- package/dist/esm/limel-table.entry.js +17 -2
- package/dist/esm/limel-table.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js.map +1 -1
- package/dist/lime-elements/p-29c2cdc6.entry.js +2 -0
- package/dist/lime-elements/p-29c2cdc6.entry.js.map +1 -0
- package/dist/lime-elements/{p-68192519.entry.js → p-5b5be3bf.entry.js} +2 -2
- package/dist/lime-elements/p-5b5be3bf.entry.js.map +1 -0
- package/dist/lime-elements/{p-0592207d.entry.js → p-9fc23e05.entry.js} +2 -2
- package/dist/lime-elements/p-9fc23e05.entry.js.map +1 -0
- package/dist/lime-elements/p-aae161ef.entry.js +2 -0
- package/dist/lime-elements/p-aae161ef.entry.js.map +1 -0
- package/dist/lime-elements/p-ae507565.entry.js +2 -0
- package/dist/lime-elements/p-ae507565.entry.js.map +1 -0
- package/dist/types/components/radio-button-group/{radio-button.template.d.ts → radio-button.d.ts} +28 -13
- package/dist/types/components/table/table.d.ts +6 -0
- package/dist/types/components.d.ts +149 -0
- package/package.json +2 -1
- package/dist/collection/components/radio-button-group/radio-button.template.js +0 -10
- package/dist/collection/components/radio-button-group/radio-button.template.js.map +0 -1
- package/dist/lime-elements/p-048c0d8e.entry.js +0 -2
- package/dist/lime-elements/p-048c0d8e.entry.js.map +0 -1
- package/dist/lime-elements/p-0592207d.entry.js.map +0 -1
- package/dist/lime-elements/p-2bfb4b41.entry.js +0 -2
- package/dist/lime-elements/p-2bfb4b41.entry.js.map +0 -1
- package/dist/lime-elements/p-68192519.entry.js.map +0 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-list-item.cjs\",[[0,\"limel-list-item\",{\"language\":[513],\"value\":[8],\"text\":[513],\"secondaryText\":[513,\"secondary-text\"],\"disabled\":[516],\"icon\":[1],\"iconSize\":[513,\"icon-size\"],\"badgeIcon\":[516,\"badge-icon\"],\"selected\":[516],\"actions\":[16],\"primaryComponent\":[16],\"image\":[16],\"type\":[513]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"placeholder\":[513],\"manualInput\":[516,\"manual-input\"],\"palette\":[16],\"paletteColumnCount\":[514,\"palette-column-count\"],\"isOpen\":[32]}]]],[\"limel-profile-picture.cjs\",[[1,\"limel-profile-picture\",{\"language\":[513],\"label\":[513],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"invalid\":[516],\"loading\":[516],\"value\":[1],\"imageFit\":[513,\"image-fit\"],\"accept\":[513],\"resize\":[16],\"objectUrl\":[32],\"imageError\":[32],\"isErrorMessagePopoverOpen\":[32]}]]],[\"limel-date-picker.cjs\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart.cjs\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"icon\":[1],\"invalid\":[516],\"actions\":[16],\"language\":[513]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16],\"hasPrimarySlot\":[32]}]]],[\"limel-table.cjs\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16],\"language\":[513]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"invalid\":[516],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-menu-item-meta.cjs\",[[1,\"limel-menu-item-meta\",{\"commandText\":[1,\"command-text\"],\"badge\":[8],\"showChevron\":[4,\"show-chevron\"]}]]],[\"limel-radio-button-group.cjs\",[[0,\"limel-radio-button-group\",{\"items\":[16],\"selectedItem\":[16],\"disabled\":[516],\"badgeIcons\":[516,\"badge-icons\"],\"maxLinesSecondaryText\":[514,\"max-lines-secondary-text\"]}]]],[\"limel-ai-avatar.cjs\",[[1,\"limel-ai-avatar\",{\"isThinking\":[516,\"is-thinking\"],\"language\":[513]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-prosemirror-adapter.cjs\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"required\":[516],\"invalid\":[516],\"manualInput\":[516,\"manual-input\"],\"columnCount\":[514,\"column-count\"],\"palette\":[16]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[1],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-dynamic-label.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-badge.cjs\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-helper-line.cjs\",[[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-portal_3.cjs\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-breadcrumbs_8.cjs\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"size\":[513],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2.cjs\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
|
|
17
|
+
return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-list-item.cjs\",[[0,\"limel-list-item\",{\"language\":[513],\"value\":[8],\"text\":[513],\"secondaryText\":[513,\"secondary-text\"],\"disabled\":[516],\"icon\":[1],\"iconSize\":[513,\"icon-size\"],\"badgeIcon\":[516,\"badge-icon\"],\"selected\":[516],\"actions\":[16],\"primaryComponent\":[16],\"image\":[16],\"type\":[513]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"placeholder\":[513],\"manualInput\":[516,\"manual-input\"],\"palette\":[16],\"paletteColumnCount\":[514,\"palette-column-count\"],\"isOpen\":[32]}]]],[\"limel-profile-picture.cjs\",[[1,\"limel-profile-picture\",{\"language\":[513],\"label\":[513],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"invalid\":[516],\"loading\":[516],\"value\":[1],\"imageFit\":[513,\"image-fit\"],\"accept\":[513],\"resize\":[16],\"objectUrl\":[32],\"imageError\":[32],\"isErrorMessagePopoverOpen\":[32]}]]],[\"limel-date-picker.cjs\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart.cjs\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"icon\":[1],\"invalid\":[516],\"actions\":[16],\"language\":[513]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16],\"hasPrimarySlot\":[32]}]]],[\"limel-table.cjs\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"sortableColumns\":[4,\"sortable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16],\"language\":[513]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"invalid\":[516],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-menu-item-meta.cjs\",[[1,\"limel-menu-item-meta\",{\"commandText\":[1,\"command-text\"],\"badge\":[8],\"showChevron\":[4,\"show-chevron\"]}]]],[\"limel-radio-button-group.cjs\",[[0,\"limel-radio-button-group\",{\"items\":[16],\"selectedItem\":[16],\"disabled\":[516],\"badgeIcons\":[516,\"badge-icons\"],\"maxLinesSecondaryText\":[514,\"max-lines-secondary-text\"]}]]],[\"limel-ai-avatar.cjs\",[[1,\"limel-ai-avatar\",{\"isThinking\":[516,\"is-thinking\"],\"language\":[513]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-prosemirror-adapter.cjs\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"required\":[516],\"invalid\":[516],\"manualInput\":[516,\"manual-input\"],\"columnCount\":[514,\"column-count\"],\"palette\":[16]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-radio-button.cjs\",[[0,\"limel-radio-button\",{\"checked\":[516],\"disabled\":[516],\"id\":[1],\"label\":[1],\"onChange\":[16]}]]],[\"limel-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[1],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-dynamic-label.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-badge.cjs\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-helper-line.cjs\",[[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-portal_3.cjs\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-breadcrumbs_8.cjs\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"size\":[513],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2.cjs\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -60,6 +60,7 @@
|
|
|
60
60
|
"./components/progress-flow/progress-flow.js",
|
|
61
61
|
"./components/progress-flow/progress-flow-item/progress-flow-item.js",
|
|
62
62
|
"./components/radio-button-group/radio-button-group.js",
|
|
63
|
+
"./components/radio-button-group/radio-button.js",
|
|
63
64
|
"./components/select/select.js",
|
|
64
65
|
"./components/shortcut/shortcut.js",
|
|
65
66
|
"./components/slider/slider.js",
|
|
@@ -202,6 +202,11 @@
|
|
|
202
202
|
color: var(--lime-primary-color, var(--limel-theme-primary-color));
|
|
203
203
|
}
|
|
204
204
|
|
|
205
|
+
:host([aria-expanded=true]) .chip,
|
|
206
|
+
:host([aria-expanded]:not([aria-expanded=false])) .chip {
|
|
207
|
+
box-shadow: var(--button-shadow-inset-pressed) !important;
|
|
208
|
+
}
|
|
209
|
+
|
|
205
210
|
:host(limel-chip[type=filter]) .chip {
|
|
206
211
|
border-top-left-radius: 0.5rem;
|
|
207
212
|
border-bottom-left-radius: 0.5rem;
|
|
@@ -357,47 +357,6 @@ limel-dynamic-label {
|
|
|
357
357
|
will-change: grid-template-rows;
|
|
358
358
|
}
|
|
359
359
|
|
|
360
|
-
/**
|
|
361
|
-
* :::important
|
|
362
|
-
* The `RadioButtonTemplate` can be imported and used in the HTML of
|
|
363
|
-
* other components, to render a non-functional and decorative radio button in
|
|
364
|
-
* their UI. An example of this is the list component.
|
|
365
|
-
* This means the content of `RadioButtonTemplate` will become a part of the
|
|
366
|
-
* consumer's DOM structure.
|
|
367
|
-
*
|
|
368
|
-
* Additionally, the consumer components' also need to import the current `.scss`
|
|
369
|
-
* file into their own styles file, for the radio button to be rendered correctly!
|
|
370
|
-
* This means, if the styles in this file are not "specific" enough,
|
|
371
|
-
* there is a risk that the consumer component's styles are affected by
|
|
372
|
-
* our styles here.
|
|
373
|
-
*
|
|
374
|
-
* For instance if the consumer has a `<label>`,
|
|
375
|
-
* it might unintentionally inherit styles from the radio button; unless we
|
|
376
|
-
* make the such styles more specific here.
|
|
377
|
-
*
|
|
378
|
-
* Naturally, we cannot mitigate all sorts of potential styling problems.
|
|
379
|
-
* The consumer component should be aware of this issue too.
|
|
380
|
-
* But we can ensure that our styles here both make sense,
|
|
381
|
-
* are readable, and are as specific as possible to avoid unintended side effects.
|
|
382
|
-
* :::
|
|
383
|
-
*/
|
|
384
|
-
.radio-button {
|
|
385
|
-
--limel-boolean-input-box-border-radius: var(
|
|
386
|
-
--limel-boolean-input-box-size
|
|
387
|
-
);
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
.box:after {
|
|
391
|
-
width: 100%;
|
|
392
|
-
height: 100%;
|
|
393
|
-
border-radius: 50%;
|
|
394
|
-
}
|
|
395
|
-
.boolean-input:has(input[type=radio]:checked) .box:after {
|
|
396
|
-
opacity: 1;
|
|
397
|
-
transform: scale(0.6);
|
|
398
|
-
box-shadow: var(--shadow-depth-8);
|
|
399
|
-
}
|
|
400
|
-
|
|
401
360
|
/**
|
|
402
361
|
* @prop --notification-badge-text-color: (Publicly documented in `limel-menu` too) Defines the text color of notification badges. Defaults to `--color-white`.
|
|
403
362
|
* @prop --notification-badge-background-color: (Publicly documented in `limel-menu` too) Defines the background color of notification badges. Defaults to `--color-red-default`.
|
|
@@ -535,10 +494,12 @@ limel-list-item[role=menuitem] limel-list-item .label {
|
|
|
535
494
|
font-size: var(--limel-theme-default-small-font-size);
|
|
536
495
|
}
|
|
537
496
|
|
|
538
|
-
.boolean-input
|
|
539
|
-
|
|
540
|
-
|
|
497
|
+
.boolean-input,
|
|
498
|
+
limel-radio-button {
|
|
499
|
+
width: var(--limel-boolean-input-box-size) !important;
|
|
500
|
+
margin-left: -0.25rem !important;
|
|
541
501
|
}
|
|
502
|
+
|
|
542
503
|
.boolean-input.checkbox {
|
|
543
504
|
margin-right: 0.25rem;
|
|
544
505
|
}
|
|
@@ -547,8 +508,7 @@ limel-list-item:has(limel-icon) .boolean-input, limel-list-item:has(img) .boolea
|
|
|
547
508
|
margin-left: 0;
|
|
548
509
|
order: 2;
|
|
549
510
|
}
|
|
550
|
-
|
|
551
|
-
.boolean-input-label {
|
|
511
|
+
.boolean-input .boolean-input-label {
|
|
552
512
|
overflow: hidden;
|
|
553
513
|
white-space: nowrap;
|
|
554
514
|
text-overflow: ellipsis;
|
|
@@ -2,7 +2,6 @@ import { Host, h } from '@stencil/core';
|
|
|
2
2
|
import { getIconName } from '../icon/get-icon-props';
|
|
3
3
|
import { createRandomString } from '../../util/random-string';
|
|
4
4
|
import { CheckboxTemplate } from '../checkbox/checkbox.template';
|
|
5
|
-
import { RadioButtonTemplate } from '../radio-button-group/radio-button.template';
|
|
6
5
|
import translate from '../../global/translations';
|
|
7
6
|
/**
|
|
8
7
|
* This components displays the list item.
|
|
@@ -101,7 +100,7 @@ export class ListItemComponent {
|
|
|
101
100
|
if (this.type !== 'radio') {
|
|
102
101
|
return;
|
|
103
102
|
}
|
|
104
|
-
return (h(
|
|
103
|
+
return (h("limel-radio-button", { id: `radio_${this.labelId}`, checked: this.selected, disabled: this.disabled }));
|
|
105
104
|
};
|
|
106
105
|
this.renderCheckbox = () => {
|
|
107
106
|
if (this.type !== 'checkbox') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../../src/components/list-item/list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAClF,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAGlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAMH,MAAM,OAAO,iBAAiB;EAmG1B;IA6CQ,gBAAW,GAAG,GAAG,EAAE;MACvB,OAAO,CACH,YAAM,KAAK,EAAC,OAAO,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,IAC/B,IAAI,CAAC,IAAI,CACP,CACV,CAAC;IACN,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;QACrB,OAAO;OACV;MAED,OAAO,CACH,YAAM,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,CAAC,aAAa,IAC3C,IAAI,CAAC,aAAa,CAChB,CACV,CAAC;IACN,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACtB,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MACxC,IAAI,CAAC,QAAQ,EAAE;QACX,OAAO;OACV;MAED,IAAI,SAA6B,CAAC;MAClC,IAAI,mBAAuC,CAAC;MAC5C,IAAI,KAAyB,CAAC;MAE9B,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC/B,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5B,mBAAmB,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;QAChD,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC3B;MAED,MAAM,SAAS,GAAG;QACd,YAAY,EAAE,KAAK;QACnB,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM;QACpC,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE;UACH,KAAK,EAAE,SAAS;UAChB,kBAAkB,EAAE,mBAAmB;SAC1C;QACD,KAAK,EAAE,IAAI,CAAC,SAAS;QACrB,IAAI,EAAE,IAAI,CAAC,QAAQ;OACtB,CAAC;MAEF,OAAO,kCAAgB,SAAS,EAAI,CAAC;IACzC,CAAC,CAAC;IAEM,2BAAsB,GAAG,GAAG,EAAE;MAClC,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC;MACtC,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAA,EAAE;QAChB,OAAO;OACV;MAED,MAAM,gBAAgB,GAAQ,OAAO,CAAC,IAAI,CAAC;MAC3C,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC;MAElC,OAAO,EAAC,gBAAgB,oBAAK,KAAK,EAAI,CAAC;IAC3C,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACvB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;QACb,OAAO;OACV;MAED,OAAO,WAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,OAAO,EAAC,MAAM,GAAG,CAAC;IAC5E,CAAC,CAAC;IAEM,qBAAgB,GAAG,CAAC,OAAwC,EAAE,EAAE;MACpE,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QAClC,OAAO;OACV;MAED,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;MACrD,OAAO,CACH,kBACI,KAAK,EAAC,gCAAgC,EACtC,KAAK,EAAE,aAAa,EACpB,aAAa,EAAC,YAAY;QAE1B,yBACI,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,GAC/B,CACO,CAChB,CAAC;IACN,CAAC,CAAC;IAmBM,sBAAiB,GAAG,GAAG,EAAE;MAC7B,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;QACvB,OAAO;OACV;MAED,OAAO,CACH,EAAC,mBAAmB,IAChB,EAAE,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAC3B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACL,CAAC;IACN,CAAC,CAAC;IAEM,mBAAc,GAAG,GAAG,EAAE;MAC1B,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;QAC1B,OAAO;OACV;MAED,OAAO,CACH,EAAC,gBAAgB,IACb,EAAE,EAAE,YAAY,IAAI,CAAC,OAAO,EAAE,EAC9B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACL,CAAC;IACN,CAAC,CAAC;IAsBM,oBAAe,GAAG,GAAW,EAAE;MACnC,OAAO,SAAS,CAAC,GAAG,CAAC,0BAA0B,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpE,CAAC,CAAC;oBA1S2B,IAAI;;;;oBAwBf,KAAK;;oBAYK,OAAO;qBAMhB,KAAK;oBAMN,KAAK;;;;gBA8BnB,UAAU;IAgBV,IAAI,CAAC,OAAO,GAAG,kBAAkB,EAAE,CAAC;IACpC,IAAI,CAAC,aAAa,GAAG,kBAAkB,EAAE,CAAC;GAC7C;EAEM,MAAM;;IACT,MAAM,SAAS,GAAQ;MACnB,iBAAiB,EAAE,IAAI,CAAC,OAAO;MAC/B,kBAAkB,EAAE,IAAI,CAAC,aAAa;QAClC,CAAC,CAAC,IAAI,CAAC,aAAa;QACpB,CAAC,CAAC,SAAS;MACf,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;KACpD,CAAC;IAEF,wCAAwC;IACxC,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;MACnD,SAAS,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;KAChE;SAAM,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;MAC3D,qCAAqC;MACrC,wDAAwD;MACxD,SAAS,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;KACjE;IAED,OAAO,CACH,EAAC,IAAI,kBACD,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EACxB,KAAK,EAAE;QACH,uBAAuB,EAAE,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAA;OACzD,IACG,SAAS;MAEZ,IAAI,CAAC,iBAAiB,EAAE;MACxB,IAAI,CAAC,cAAc,EAAE;MACrB,IAAI,CAAC,UAAU,EAAE;MACjB,IAAI,CAAC,WAAW,EAAE;MAClB,IAAI,CAAC,sBAAsB,EAAE;MAC9B,WAAK,KAAK,EAAC,MAAM;QACZ,IAAI,CAAC,WAAW,EAAE;QAClB,IAAI,CAAC,iBAAiB,EAAE,CACvB;MACL,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CACjC,CACV,CAAC;EACN,CAAC;EA+FD;;;;;;KAMG;EACK,gBAAgB,CACpB,OAAwC;IAExC,IAAI,IAAI,CAAC,eAAe,KAAK,OAAO,EAAE;MAClC,OAAO,IAAI,CAAC,eAAe,CAAC;KAC/B;IACD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;IAC/B,OAAO,OAAO,CAAC;EACnB,CAAC;EA8BO,WAAW;IACf,QAAQ,IAAI,CAAC,IAAI,EAAE;MACf,KAAK,QAAQ,CAAC,CAAC;QACX,OAAO,QAAQ,CAAC;OACnB;MACD,KAAK,OAAO,CAAC,CAAC;QACV,OAAO,OAAO,CAAC;OAClB;MACD,KAAK,UAAU,CAAC,CAAC;QACb,OAAO,UAAU,CAAC;OACrB;MACD,KAAK,UAAU,CAAC,CAAC;QACb,OAAO,UAAU,CAAC;OACrB;MACD,OAAO,CAAC,CAAC;QACL,OAAO,UAAU,CAAC;OACrB;KACJ;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKJ","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { getIconName } from '../icon/get-icon-props';\nimport type { IconSize } from '../icon/icon.types';\nimport { createRandomString } from '../../util/random-string';\nimport { ListItem } from './list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { RadioButtonTemplate } from '../radio-button-group/radio-button.template';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * This components displays the list item.\n * This centralizes styles and functionality, and helps reduce redundant code\n * in consumer components such as `limel-list` and `limel-menu-list`.\n *\n * :::note\n * The component has `shadow: false`. There are a few reasons for it:\n * 1. This is to improve performance, and ensure that its internal elements are\n * considered as internal parts of the consumer's DOM.\n * 2. The consumer does not need to implement the interactive styles\n * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no\n * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\n * within the component's own styles.\n * 3. Most importantly, the MDCList checks the light DOM of each list item\n * to find native inputs to decide the list mode (checkbox/radio).\n * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\n * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\n * an array index (for the items).\n * With `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\n * would be visible to MDC.\n * :::\n * @exampleComponent limel-example-list-item-basic\n * @exampleComponent limel-example-list-item-icon\n * @exampleComponent limel-example-list-item-icon-size\n * @exampleComponent limel-example-list-item-pictures\n * @exampleComponent limel-example-list-item-multiple-lines\n * @exampleComponent limel-example-list-item-interactive\n * @exampleComponent limel-example-list-item-radio\n * @exampleComponent limel-example-list-item-checkbox\n * @exampleComponent limel-example-list-item-actions\n * @exampleComponent limel-example-list-item-primary-component\n * @exampleComponent limel-example-list-item-command-text\n * @private\n */\n@Component({\n tag: 'limel-list-item',\n shadow: false,\n styleUrl: 'list-item.scss',\n})\nexport class ListItemComponent implements ListItem {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * {@inheritdoc ListItem.value}\n */\n @Prop()\n public value?: any;\n\n /**\n * {@inheritdoc ListItem.text}\n */\n @Prop({ reflect: true })\n public text: string;\n\n /**\n * {@inheritdoc ListItem.secondaryText}\n */\n @Prop({ reflect: true })\n public secondaryText?: string;\n\n /**\n * {@inheritdoc ListItem.disabled}\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * {@inheritdoc ListItem.icon}\n */\n @Prop()\n public icon?: string | ListItem['icon'];\n\n /**\n * Size of the icon displayed for this item.\n */\n @Prop({ reflect: true })\n public iconSize: IconSize = 'small';\n\n /**\n * Set to `true` if the list should display larger icons with a background\n */\n @Prop({ reflect: true })\n public badgeIcon = false;\n\n /**\n * {@inheritdoc ListItem.selected}\n */\n @Prop({ reflect: true })\n public selected = false;\n\n /**\n * {@inheritdoc ListItem.selected}\n */\n @Prop()\n public actions?: ListItem['actions'];\n\n /**\n * {@inheritdoc ListItem.selected}\n */\n @Prop()\n public primaryComponent?: ListItem['primaryComponent'];\n\n /**\n * {@inheritdoc ListItem.image}\n */\n @Prop()\n public image?: ListItem['image'];\n\n /**\n * The semantic role of the list item. This affects the ARIA role\n * and the interaction behavior.\n *\n * - 'option' → selectable via click/Enter/Space, aria-selected\n * - 'radio'/'checkbox' → selectable, aria-checked\n * - 'menuitem'/'listitem' → activation only, no selection toggle\n */\n @Prop({ reflect: true })\n public type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox' =\n 'listitem';\n\n /**\n * Used to describe the list item for assistive technology.\n */\n private readonly descriptionId: string;\n\n /**\n * Used to label the list item for assistive technology.\n */\n private readonly labelId: string;\n\n // Memoized reference for the action items to avoid unnecessary updates\n private memoizedActions?: Array<MenuItem | ListSeparator>;\n\n constructor() {\n this.labelId = createRandomString();\n this.descriptionId = createRandomString();\n }\n\n public render() {\n const ariaProps: any = {\n 'aria-labelledby': this.labelId,\n 'aria-describedby': this.secondaryText\n ? this.descriptionId\n : undefined,\n 'aria-disabled': this.disabled ? 'true' : 'false',\n };\n\n // ARIA state depending on `role`/`type`\n if (this.type === 'radio' || this.type === 'checkbox') {\n ariaProps['aria-checked'] = this.selected ? 'true' : 'false';\n } else if (this.type === 'option' || this.type === 'menuitem') {\n // aria-selected for `option` (spec);\n // also keep for `menuitem` for visual state consistency\n ariaProps['aria-selected'] = this.selected ? 'true' : 'false';\n }\n\n return (\n <Host\n role={this.getHostRole()}\n class={{\n 'has-primary-component': !!this.primaryComponent?.name,\n }}\n {...ariaProps}\n >\n {this.renderRadioButton()}\n {this.renderCheckbox()}\n {this.renderIcon()}\n {this.renderImage()}\n {this.renderPrimaryComponent()}\n <div class=\"text\">\n {this.renderLabel()}\n {this.renderDescription()}\n </div>\n {this.renderActionMenu(this.actions)}\n </Host>\n );\n }\n\n private renderLabel = () => {\n return (\n <span class=\"label\" id={this.labelId}>\n {this.text}\n </span>\n );\n };\n\n private renderDescription = () => {\n if (!this.secondaryText) {\n return;\n }\n\n return (\n <span class=\"description\" id={this.descriptionId}>\n {this.secondaryText}\n </span>\n );\n };\n\n private renderIcon = () => {\n const iconName = getIconName(this.icon);\n if (!iconName) {\n return;\n }\n\n let iconColor: string | undefined;\n let iconBackgroundColor: string | undefined;\n let title: string | undefined;\n\n if (typeof this.icon === 'object') {\n iconColor = this.icon.color;\n iconBackgroundColor = this.icon.backgroundColor;\n title = this.icon.title;\n }\n\n const iconProps = {\n 'aria-label': title,\n 'aria-hidden': title ? null : 'true',\n name: iconName,\n style: {\n color: iconColor,\n 'background-color': iconBackgroundColor,\n },\n badge: this.badgeIcon,\n size: this.iconSize,\n };\n\n return <limel-icon {...iconProps} />;\n };\n\n private renderPrimaryComponent = () => {\n const primary = this.primaryComponent;\n if (!primary?.name) {\n return;\n }\n\n const PrimaryComponent: any = primary.name;\n const props = primary.props || {};\n\n return <PrimaryComponent {...props} />;\n };\n\n private renderImage = () => {\n if (!this.image) {\n return;\n }\n\n return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n };\n\n private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n if (!actions || actions.length === 0) {\n return;\n }\n\n const stableActions = this.getStableActions(actions);\n return (\n <limel-menu\n class=\"mdc-deprecated-list-item__meta\"\n items={stableActions}\n openDirection=\"left-start\"\n >\n <limel-icon-button\n class=\"action-menu-trigger\"\n slot=\"trigger\"\n icon=\"menu_2\"\n label={this.actionMenuLabel()}\n />\n </limel-menu>\n );\n };\n\n /**\n * Returns a stable reference for the provided actions array to avoid\n * unnecessary re-renders of the action menu when the reference is unchanged.\n *\n * @param actions The actions (and separators) to display in the menu\n * @returns The same array instance that was previously seen, if unchanged\n */\n private getStableActions(\n actions: Array<MenuItem | ListSeparator>\n ): Array<MenuItem | ListSeparator> {\n if (this.memoizedActions === actions) {\n return this.memoizedActions;\n }\n this.memoizedActions = actions;\n return actions;\n }\n\n private renderRadioButton = () => {\n if (this.type !== 'radio') {\n return;\n }\n\n return (\n <RadioButtonTemplate\n id={`radio_${this.labelId}`}\n checked={this.selected}\n disabled={this.disabled}\n />\n );\n };\n\n private renderCheckbox = () => {\n if (this.type !== 'checkbox') {\n return;\n }\n\n return (\n <CheckboxTemplate\n id={`checkbox_${this.labelId}`}\n checked={this.selected}\n disabled={this.disabled}\n />\n );\n };\n\n private getHostRole(): string {\n switch (this.type) {\n case 'option': {\n return 'option';\n }\n case 'radio': {\n return 'radio';\n }\n case 'checkbox': {\n return 'checkbox';\n }\n case 'menuitem': {\n return 'menuitem';\n }\n default: {\n return 'listitem';\n }\n }\n }\n\n private actionMenuLabel = (): string => {\n return translate.get('file-viewer.more-actions', this.language);\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../../src/components/list-item/list-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { getIconName } from '../icon/get-icon-props';\nimport type { IconSize } from '../icon/icon.types';\nimport { createRandomString } from '../../util/random-string';\nimport { ListItem } from './list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * This components displays the list item.\n * This centralizes styles and functionality, and helps reduce redundant code\n * in consumer components such as `limel-list` and `limel-menu-list`.\n *\n * :::note\n * The component has `shadow: false`. There are a few reasons for it:\n * 1. This is to improve performance, and ensure that its internal elements are\n * considered as internal parts of the consumer's DOM.\n * 2. The consumer does not need to implement the interactive styles\n * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no\n * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\n * within the component's own styles.\n * 3. Most importantly, the MDCList checks the light DOM of each list item\n * to find native inputs to decide the list mode (checkbox/radio).\n * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\n * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\n * an array index (for the items).\n * With `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\n * would be visible to MDC.\n * :::\n * @exampleComponent limel-example-list-item-basic\n * @exampleComponent limel-example-list-item-icon\n * @exampleComponent limel-example-list-item-icon-size\n * @exampleComponent limel-example-list-item-pictures\n * @exampleComponent limel-example-list-item-multiple-lines\n * @exampleComponent limel-example-list-item-interactive\n * @exampleComponent limel-example-list-item-radio\n * @exampleComponent limel-example-list-item-checkbox\n * @exampleComponent limel-example-list-item-actions\n * @exampleComponent limel-example-list-item-primary-component\n * @exampleComponent limel-example-list-item-command-text\n * @private\n */\n@Component({\n tag: 'limel-list-item',\n shadow: false,\n styleUrl: 'list-item.scss',\n})\nexport class ListItemComponent implements ListItem {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * {@inheritdoc ListItem.value}\n */\n @Prop()\n public value?: any;\n\n /**\n * {@inheritdoc ListItem.text}\n */\n @Prop({ reflect: true })\n public text: string;\n\n /**\n * {@inheritdoc ListItem.secondaryText}\n */\n @Prop({ reflect: true })\n public secondaryText?: string;\n\n /**\n * {@inheritdoc ListItem.disabled}\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * {@inheritdoc ListItem.icon}\n */\n @Prop()\n public icon?: string | ListItem['icon'];\n\n /**\n * Size of the icon displayed for this item.\n */\n @Prop({ reflect: true })\n public iconSize: IconSize = 'small';\n\n /**\n * Set to `true` if the list should display larger icons with a background\n */\n @Prop({ reflect: true })\n public badgeIcon = false;\n\n /**\n * {@inheritdoc ListItem.selected}\n */\n @Prop({ reflect: true })\n public selected = false;\n\n /**\n * {@inheritdoc ListItem.selected}\n */\n @Prop()\n public actions?: ListItem['actions'];\n\n /**\n * {@inheritdoc ListItem.selected}\n */\n @Prop()\n public primaryComponent?: ListItem['primaryComponent'];\n\n /**\n * {@inheritdoc ListItem.image}\n */\n @Prop()\n public image?: ListItem['image'];\n\n /**\n * The semantic role of the list item. This affects the ARIA role\n * and the interaction behavior.\n *\n * - 'option' → selectable via click/Enter/Space, aria-selected\n * - 'radio'/'checkbox' → selectable, aria-checked\n * - 'menuitem'/'listitem' → activation only, no selection toggle\n */\n @Prop({ reflect: true })\n public type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox' =\n 'listitem';\n\n /**\n * Used to describe the list item for assistive technology.\n */\n private readonly descriptionId: string;\n\n /**\n * Used to label the list item for assistive technology.\n */\n private readonly labelId: string;\n\n // Memoized reference for the action items to avoid unnecessary updates\n private memoizedActions?: Array<MenuItem | ListSeparator>;\n\n constructor() {\n this.labelId = createRandomString();\n this.descriptionId = createRandomString();\n }\n\n public render() {\n const ariaProps: any = {\n 'aria-labelledby': this.labelId,\n 'aria-describedby': this.secondaryText\n ? this.descriptionId\n : undefined,\n 'aria-disabled': this.disabled ? 'true' : 'false',\n };\n\n // ARIA state depending on `role`/`type`\n if (this.type === 'radio' || this.type === 'checkbox') {\n ariaProps['aria-checked'] = this.selected ? 'true' : 'false';\n } else if (this.type === 'option' || this.type === 'menuitem') {\n // aria-selected for `option` (spec);\n // also keep for `menuitem` for visual state consistency\n ariaProps['aria-selected'] = this.selected ? 'true' : 'false';\n }\n\n return (\n <Host\n role={this.getHostRole()}\n class={{\n 'has-primary-component': !!this.primaryComponent?.name,\n }}\n {...ariaProps}\n >\n {this.renderRadioButton()}\n {this.renderCheckbox()}\n {this.renderIcon()}\n {this.renderImage()}\n {this.renderPrimaryComponent()}\n <div class=\"text\">\n {this.renderLabel()}\n {this.renderDescription()}\n </div>\n {this.renderActionMenu(this.actions)}\n </Host>\n );\n }\n\n private renderLabel = () => {\n return (\n <span class=\"label\" id={this.labelId}>\n {this.text}\n </span>\n );\n };\n\n private renderDescription = () => {\n if (!this.secondaryText) {\n return;\n }\n\n return (\n <span class=\"description\" id={this.descriptionId}>\n {this.secondaryText}\n </span>\n );\n };\n\n private renderIcon = () => {\n const iconName = getIconName(this.icon);\n if (!iconName) {\n return;\n }\n\n let iconColor: string | undefined;\n let iconBackgroundColor: string | undefined;\n let title: string | undefined;\n\n if (typeof this.icon === 'object') {\n iconColor = this.icon.color;\n iconBackgroundColor = this.icon.backgroundColor;\n title = this.icon.title;\n }\n\n const iconProps = {\n 'aria-label': title,\n 'aria-hidden': title ? null : 'true',\n name: iconName,\n style: {\n color: iconColor,\n 'background-color': iconBackgroundColor,\n },\n badge: this.badgeIcon,\n size: this.iconSize,\n };\n\n return <limel-icon {...iconProps} />;\n };\n\n private renderPrimaryComponent = () => {\n const primary = this.primaryComponent;\n if (!primary?.name) {\n return;\n }\n\n const PrimaryComponent: any = primary.name;\n const props = primary.props || {};\n\n return <PrimaryComponent {...props} />;\n };\n\n private renderImage = () => {\n if (!this.image) {\n return;\n }\n\n return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n };\n\n private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n if (!actions || actions.length === 0) {\n return;\n }\n\n const stableActions = this.getStableActions(actions);\n return (\n <limel-menu\n class=\"mdc-deprecated-list-item__meta\"\n items={stableActions}\n openDirection=\"left-start\"\n >\n <limel-icon-button\n class=\"action-menu-trigger\"\n slot=\"trigger\"\n icon=\"menu_2\"\n label={this.actionMenuLabel()}\n />\n </limel-menu>\n );\n };\n\n /**\n * Returns a stable reference for the provided actions array to avoid\n * unnecessary re-renders of the action menu when the reference is unchanged.\n *\n * @param actions The actions (and separators) to display in the menu\n * @returns The same array instance that was previously seen, if unchanged\n */\n private getStableActions(\n actions: Array<MenuItem | ListSeparator>\n ): Array<MenuItem | ListSeparator> {\n if (this.memoizedActions === actions) {\n return this.memoizedActions;\n }\n this.memoizedActions = actions;\n return actions;\n }\n\n private renderRadioButton = () => {\n if (this.type !== 'radio') {\n return;\n }\n\n return (\n <limel-radio-button\n id={`radio_${this.labelId}`}\n checked={this.selected}\n disabled={this.disabled}\n />\n );\n };\n\n private renderCheckbox = () => {\n if (this.type !== 'checkbox') {\n return;\n }\n\n return (\n <CheckboxTemplate\n id={`checkbox_${this.labelId}`}\n checked={this.selected}\n disabled={this.disabled}\n />\n );\n };\n\n private getHostRole(): string {\n switch (this.type) {\n case 'option': {\n return 'option';\n }\n case 'radio': {\n return 'radio';\n }\n case 'checkbox': {\n return 'checkbox';\n }\n case 'menuitem': {\n return 'menuitem';\n }\n default: {\n return 'listitem';\n }\n }\n }\n\n private actionMenuLabel = (): string => {\n return translate.get('file-viewer.more-actions', this.language);\n };\n}\n"]}
|
|
@@ -0,0 +1,279 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
/**
|
|
3
|
+
* Note! This file is exported to `dist/scss/` in the published
|
|
4
|
+
* node module, for consumer projects to import.
|
|
5
|
+
* That means this file cannot import from any file that isn't
|
|
6
|
+
* also exported, keeping the same relative path.
|
|
7
|
+
*
|
|
8
|
+
* Or, just don't import anything, that works too.
|
|
9
|
+
*/
|
|
10
|
+
/**
|
|
11
|
+
* This can be used on a trigger element that opens a dropdown menu or a popover.
|
|
12
|
+
*/
|
|
13
|
+
/**
|
|
14
|
+
* This mixin will mask out the content that is close to
|
|
15
|
+
* the edges of a scrollable area.
|
|
16
|
+
* - If the scrollable content has `overflow-y`, use `vertically`
|
|
17
|
+
* as an argument for `$direction`.
|
|
18
|
+
- If the scrollable content has `overflow-x`, use `horizontally`
|
|
19
|
+
* as an argument for `$direction`.
|
|
20
|
+
*
|
|
21
|
+
* For the visual effect to work smoothly, we need to make sure that
|
|
22
|
+
* the size of the fade-out edge effect is the same as the
|
|
23
|
+
* internal paddings of the scrollable area. Otherwise, content of a
|
|
24
|
+
* scrollable area that does not have a padding will fade out before
|
|
25
|
+
* any scrolling has been done.
|
|
26
|
+
* This is why this mixin already adds paddings, which automatically
|
|
27
|
+
* default to the size of the fade-out effect.
|
|
28
|
+
* This size defaults to `1rem`, but to override the size use
|
|
29
|
+
* `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
|
|
30
|
+
* when `vertically` argument is set, and use
|
|
31
|
+
* `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
|
|
32
|
+
* when `horizontally` argument is set.
|
|
33
|
+
* Of course you can also programmatically increase and decrease the
|
|
34
|
+
* size of these variables for each edge, based on the amount of
|
|
35
|
+
* scrolling that has been done by the user. In this case, make sure
|
|
36
|
+
* to add a custom padding where the mixin is used, to override
|
|
37
|
+
* the paddings that are automatically added by the mixin in the
|
|
38
|
+
* compiled CSS code.
|
|
39
|
+
*/
|
|
40
|
+
/**
|
|
41
|
+
* This mixin will add an animated underline to the bottom of an `a` elements.
|
|
42
|
+
* Note that you may need to add `all: unset;` –depending on your use case–
|
|
43
|
+
* before using this mixin.
|
|
44
|
+
*/
|
|
45
|
+
/**
|
|
46
|
+
* This mixin creates a cross-browser font stack.
|
|
47
|
+
* - `sans-serif` can be used for the UI of the components.
|
|
48
|
+
* - `monospace` can be used for code.
|
|
49
|
+
*
|
|
50
|
+
* ⚠️ If we change the font stacks, we need to update
|
|
51
|
+
* 1. the consumer documentation in `README.md`, and
|
|
52
|
+
* 2. the CSS variables of `--kompendium-example-font-family`
|
|
53
|
+
* in the `<style>` tag of `index.html`.
|
|
54
|
+
*/
|
|
55
|
+
/**
|
|
56
|
+
* This mixin is a hack, using old CSS syntax
|
|
57
|
+
* to enable you to truncate a piece of text,
|
|
58
|
+
* after a certain number of lines.
|
|
59
|
+
*/
|
|
60
|
+
/**
|
|
61
|
+
* This mixin will add a chessboard background pattern,
|
|
62
|
+
* typically used to visualize transparency.
|
|
63
|
+
*/
|
|
64
|
+
/**
|
|
65
|
+
* Make a container resizable by the user.
|
|
66
|
+
* This is used in the documentations and examples
|
|
67
|
+
* of some components, to demonstrate how the component
|
|
68
|
+
* behaves in a resizable container.
|
|
69
|
+
*/
|
|
70
|
+
/**
|
|
71
|
+
* The breakpoints below are used to create responsive designs
|
|
72
|
+
* in Lime's products. Therefore, they are here to get distributed
|
|
73
|
+
* to all components in other private repos, which rely on this `mixins`
|
|
74
|
+
* file, to create consistent styles.
|
|
75
|
+
*
|
|
76
|
+
* :::important
|
|
77
|
+
* In very rare cases you should used media queries!
|
|
78
|
+
* Nowadays, there are many better ways of achieving responsive design
|
|
79
|
+
* without media queries. For example, using CSS Grid, Flexbox, and their features.
|
|
80
|
+
* :::
|
|
81
|
+
*/
|
|
82
|
+
/**
|
|
83
|
+
* Media query mixins for responsive design based on screen width.
|
|
84
|
+
* Note that these mixins do not detect the device type!
|
|
85
|
+
*/
|
|
86
|
+
*,
|
|
87
|
+
*:before,
|
|
88
|
+
*:after {
|
|
89
|
+
box-sizing: border-box;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.boolean-input {
|
|
93
|
+
--limel-boolean-input-box-size: 1.25rem;
|
|
94
|
+
--limel-boolean-input-gap-size: 0.5rem;
|
|
95
|
+
position: relative;
|
|
96
|
+
isolation: isolate;
|
|
97
|
+
display: flex;
|
|
98
|
+
align-items: center;
|
|
99
|
+
min-height: var(--limel-checkbox-min-height, 2.5rem);
|
|
100
|
+
width: 100%;
|
|
101
|
+
}
|
|
102
|
+
.boolean-input input[type=checkbox],
|
|
103
|
+
.boolean-input input[type=radio] {
|
|
104
|
+
position: absolute;
|
|
105
|
+
width: 0;
|
|
106
|
+
height: 0;
|
|
107
|
+
margin: -1px;
|
|
108
|
+
padding: 0;
|
|
109
|
+
border: 0;
|
|
110
|
+
overflow: hidden;
|
|
111
|
+
clip: rect(0, 0, 0, 0);
|
|
112
|
+
clip-path: inset(50%);
|
|
113
|
+
white-space: nowrap;
|
|
114
|
+
-webkit-appearance: none;
|
|
115
|
+
-moz-appearance: none;
|
|
116
|
+
appearance: none;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
label.boolean-input-label {
|
|
120
|
+
min-width: var(--limel-boolean-input-box-size);
|
|
121
|
+
min-height: var(--limel-boolean-input-box-size);
|
|
122
|
+
padding-top: 0.125rem;
|
|
123
|
+
cursor: pointer;
|
|
124
|
+
position: relative;
|
|
125
|
+
width: 100%;
|
|
126
|
+
font-size: var(--limel-theme-default-small-font-size);
|
|
127
|
+
color: var(--limel-theme-text-primary-on-background-color);
|
|
128
|
+
padding-left: calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size));
|
|
129
|
+
}
|
|
130
|
+
.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label {
|
|
131
|
+
cursor: not-allowed;
|
|
132
|
+
color: var(--limel-theme-text-disabled-color);
|
|
133
|
+
}
|
|
134
|
+
.required label.boolean-input-label:after {
|
|
135
|
+
margin-left: 0.0625rem;
|
|
136
|
+
content: "*";
|
|
137
|
+
}
|
|
138
|
+
.invalid:not(.readonly) label.boolean-input-label {
|
|
139
|
+
color: var(--limel-theme-error-text-color);
|
|
140
|
+
}
|
|
141
|
+
:host(limel-checkbox.hide-label) label.boolean-input-label, .hide-label label.boolean-input-label {
|
|
142
|
+
overflow: hidden;
|
|
143
|
+
white-space: nowrap;
|
|
144
|
+
text-overflow: ellipsis;
|
|
145
|
+
opacity: 0;
|
|
146
|
+
width: var(--limel-boolean-input-box-size);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.box {
|
|
150
|
+
position: absolute;
|
|
151
|
+
pointer-events: none;
|
|
152
|
+
transition: border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;
|
|
153
|
+
display: inline-block;
|
|
154
|
+
vertical-align: middle;
|
|
155
|
+
width: var(--limel-boolean-input-box-size);
|
|
156
|
+
height: var(--limel-boolean-input-box-size);
|
|
157
|
+
margin-right: var(--limel-boolean-input-gap-size);
|
|
158
|
+
border-radius: var(--limel-boolean-input-box-border-radius);
|
|
159
|
+
border: 0.125rem solid;
|
|
160
|
+
border-color: var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));
|
|
161
|
+
background-color: var(--limel-checkbox-background-color, rgb(var(--contrast-300)));
|
|
162
|
+
/*
|
|
163
|
+
* NOTE: Original selectors using `:has()` are commented out due to Safari
|
|
164
|
+
* rendering bugs where descendant transitions (e.g. SVG stroke animations)
|
|
165
|
+
* or box/background updates sometimes fail to animate or even repaint
|
|
166
|
+
* reliably when the state change is detected only via `:has()`.
|
|
167
|
+
*
|
|
168
|
+
* Original (kept for future re-implementation, or cleanup):
|
|
169
|
+
* .boolean-input:has(input[type='checkbox']:checked) &,
|
|
170
|
+
* .boolean-input:has(input[type='radio']:checked) & {
|
|
171
|
+
* ...
|
|
172
|
+
* }
|
|
173
|
+
*
|
|
174
|
+
* Replacement uses adjacency: the markup places the `<input>` immediately
|
|
175
|
+
* before .box, so we can select the checked state with
|
|
176
|
+
* input:checked + .box. We retain the explicit `.checked` class pathway in
|
|
177
|
+
* case some templates toggle that class manually.
|
|
178
|
+
*
|
|
179
|
+
* Using the `:has()` selector is more reliable, because it doesn't
|
|
180
|
+
* depend on the DOM structure (e.g. if the markup changes and the input is
|
|
181
|
+
* no longer adjacent to the box), but Safari support for `:has()` is still
|
|
182
|
+
* somewhat inconsistent.
|
|
183
|
+
*/
|
|
184
|
+
/*
|
|
185
|
+
* See previous comment about Safari rendering bugs ☝️.
|
|
186
|
+
*
|
|
187
|
+
* Original (kept for for future re-implementation, or cleanup):
|
|
188
|
+
* .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & { ... }
|
|
189
|
+
* .boolean-input:not(.disabled):has(label.boolean-input-label:active) & { ... }
|
|
190
|
+
*/
|
|
191
|
+
}
|
|
192
|
+
.checked .box, .boolean-input > input[type=checkbox]:checked + .box, .boolean-input > input[type=radio]:checked + .box {
|
|
193
|
+
background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
|
|
194
|
+
border-color: var(--lime-primary-color, var(--limel-theme-primary-color));
|
|
195
|
+
}
|
|
196
|
+
.disabled .box {
|
|
197
|
+
opacity: 0.4;
|
|
198
|
+
}
|
|
199
|
+
.boolean-input:not(.disabled):hover .box {
|
|
200
|
+
will-change: box-shadow;
|
|
201
|
+
box-shadow: var(--button-shadow-hovered);
|
|
202
|
+
}
|
|
203
|
+
.boolean-input:not(.disabled):active .box {
|
|
204
|
+
will-change: box-shadow;
|
|
205
|
+
box-shadow: var(--button-shadow-pressed);
|
|
206
|
+
}
|
|
207
|
+
.box:before {
|
|
208
|
+
transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
|
|
209
|
+
content: "";
|
|
210
|
+
position: absolute;
|
|
211
|
+
inset: -0.1875rem;
|
|
212
|
+
border-radius: inherit;
|
|
213
|
+
/*
|
|
214
|
+
* See previous comment about Safari rendering bugs ☝️.
|
|
215
|
+
*
|
|
216
|
+
* Original (kept for for future re-implementation, or cleanup):
|
|
217
|
+
* .boolean-input:has(input[type='checkbox']:focus-visible) &,
|
|
218
|
+
* .boolean-input:has(input[type='radio']:focus-visible) & { ...}
|
|
219
|
+
*/
|
|
220
|
+
}
|
|
221
|
+
.boolean-input > input[type=checkbox]:focus-visible + .box:before, .boolean-input > input[type=radio]:focus-visible + .box:before {
|
|
222
|
+
will-change: box-shadow;
|
|
223
|
+
box-shadow: var(--shadow-depth-8-focused);
|
|
224
|
+
}
|
|
225
|
+
.box:after {
|
|
226
|
+
transition: opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);
|
|
227
|
+
content: "";
|
|
228
|
+
position: absolute;
|
|
229
|
+
inset: 0;
|
|
230
|
+
margin: auto;
|
|
231
|
+
border-radius: 1rem;
|
|
232
|
+
opacity: 0;
|
|
233
|
+
background-color: rgb(var(--color-white));
|
|
234
|
+
/* Hover fallback for pseudo-element (see explanation above). */
|
|
235
|
+
}
|
|
236
|
+
.boolean-input:not(.disabled):hover .box:after {
|
|
237
|
+
will-change: opacity, box-shadow, transform, width;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
/**
|
|
241
|
+
* :::important
|
|
242
|
+
* The `limel-radio-button` component can be used inside the HTML of
|
|
243
|
+
* other components to render a decorative radio button in
|
|
244
|
+
* their UI. An example of this is the list component.
|
|
245
|
+
* This means the content of `limel-radio-button` will become a part of the
|
|
246
|
+
* consumer's DOM structure.
|
|
247
|
+
*
|
|
248
|
+
* Additionally, the consumer components also need to import the current `.scss`
|
|
249
|
+
* file into their own styles file for the radio button to be rendered correctly!
|
|
250
|
+
* This means, if the styles in this file are not "specific" enough,
|
|
251
|
+
* there is a risk that the consumer component's styles are affected by
|
|
252
|
+
* our styles here.
|
|
253
|
+
*
|
|
254
|
+
* For instance if the consumer has a `<label>`,
|
|
255
|
+
* it might unintentionally inherit styles from the radio button; unless we
|
|
256
|
+
* make the such styles more specific here.
|
|
257
|
+
*
|
|
258
|
+
* Naturally, we cannot mitigate all sorts of potential styling problems.
|
|
259
|
+
* The consumer component should be aware of this issue too.
|
|
260
|
+
* But we can ensure that our styles here both make sense,
|
|
261
|
+
* are readable, and are as specific as possible to avoid unintended side effects.
|
|
262
|
+
* :::
|
|
263
|
+
*/
|
|
264
|
+
.radio-button {
|
|
265
|
+
--limel-boolean-input-box-border-radius: var(
|
|
266
|
+
--limel-boolean-input-box-size
|
|
267
|
+
);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.box:after {
|
|
271
|
+
width: 100%;
|
|
272
|
+
height: 100%;
|
|
273
|
+
border-radius: 50%;
|
|
274
|
+
}
|
|
275
|
+
.boolean-input:has(input[type=radio]:checked) .box:after {
|
|
276
|
+
opacity: 1;
|
|
277
|
+
transform: scale(0.6);
|
|
278
|
+
box-shadow: var(--shadow-depth-8);
|
|
279
|
+
}
|