@limetech/lime-elements 37.68.0 → 37.69.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-action-bar-item_2.cjs.entry.js +122 -0
- package/dist/cjs/limel-action-bar-item_2.cjs.entry.js.map +1 -0
- package/dist/cjs/{limel-action-bar_4.cjs.entry.js → limel-action-bar_2.cjs.entry.js} +1 -115
- package/dist/cjs/limel-action-bar_2.cjs.entry.js.map +1 -0
- package/dist/cjs/{limel-breadcrumbs_5.cjs.entry.js → limel-breadcrumbs_7.cjs.entry.js} +3344 -407
- package/dist/cjs/limel-breadcrumbs_7.cjs.entry.js.map +1 -0
- package/dist/cjs/limel-card.cjs.entry.js +85 -0
- package/dist/cjs/limel-card.cjs.entry.js.map +1 -0
- package/dist/cjs/limel-dynamic-label_2.cjs.entry.js +91 -0
- package/dist/cjs/limel-dynamic-label_2.cjs.entry.js.map +1 -0
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js +12 -4
- package/dist/cjs/limel-prosemirror-adapter.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/card/card.css +202 -0
- package/dist/collection/components/card/card.js +282 -0
- package/dist/collection/components/card/card.js.map +1 -0
- package/dist/collection/components/text-editor/prosemirror-adapter/plugins/trigger/factory.js +12 -4
- package/dist/collection/components/text-editor/prosemirror-adapter/plugins/trigger/factory.js.map +1 -1
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-action-bar-item_2.entry.js +117 -0
- package/dist/esm/limel-action-bar-item_2.entry.js.map +1 -0
- package/dist/esm/{limel-action-bar_4.entry.js → limel-action-bar_2.entry.js} +2 -114
- package/dist/esm/limel-action-bar_2.entry.js.map +1 -0
- package/dist/esm/{limel-breadcrumbs_5.entry.js → limel-breadcrumbs_7.entry.js} +3333 -398
- package/dist/esm/limel-breadcrumbs_7.entry.js.map +1 -0
- package/dist/esm/limel-card.entry.js +81 -0
- package/dist/esm/limel-card.entry.js.map +1 -0
- package/dist/esm/limel-dynamic-label_2.entry.js +86 -0
- package/dist/esm/limel-dynamic-label_2.entry.js.map +1 -0
- package/dist/esm/limel-prosemirror-adapter.entry.js +12 -4
- package/dist/esm/limel-prosemirror-adapter.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-18b068c9.entry.js +2 -0
- package/dist/lime-elements/p-18b068c9.entry.js.map +1 -0
- package/dist/lime-elements/{p-9d2f6454.entry.js → p-617cfacf.entry.js} +2 -2
- package/dist/lime-elements/p-617cfacf.entry.js.map +1 -0
- package/dist/lime-elements/p-7f9e0f52.entry.js +2 -0
- package/dist/lime-elements/p-7f9e0f52.entry.js.map +1 -0
- package/dist/lime-elements/p-97ae94e0.entry.js +266 -0
- package/dist/lime-elements/p-97ae94e0.entry.js.map +1 -0
- package/dist/lime-elements/p-9f8aa8e7.entry.js +2 -0
- package/dist/lime-elements/p-9f8aa8e7.entry.js.map +1 -0
- package/dist/lime-elements/p-a8e24972.entry.js +2 -0
- package/dist/lime-elements/p-a8e24972.entry.js.map +1 -0
- package/dist/types/components/card/card.d.ts +75 -0
- package/dist/types/components.d.ts +143 -4
- package/package.json +1 -1
- package/dist/cjs/component-864afce0.js +0 -2447
- package/dist/cjs/component-864afce0.js.map +0 -1
- package/dist/cjs/limel-action-bar_4.cjs.entry.js.map +0 -1
- package/dist/cjs/limel-breadcrumbs_5.cjs.entry.js.map +0 -1
- package/dist/cjs/limel-dynamic-label_4.cjs.entry.js +0 -600
- package/dist/cjs/limel-dynamic-label_4.cjs.entry.js.map +0 -1
- package/dist/esm/component-5e233629.js +0 -2439
- package/dist/esm/component-5e233629.js.map +0 -1
- package/dist/esm/limel-action-bar_4.entry.js.map +0 -1
- package/dist/esm/limel-breadcrumbs_5.entry.js.map +0 -1
- package/dist/esm/limel-dynamic-label_4.entry.js +0 -593
- package/dist/esm/limel-dynamic-label_4.entry.js.map +0 -1
- package/dist/lime-elements/p-589ba37a.entry.js +0 -2
- package/dist/lime-elements/p-589ba37a.entry.js.map +0 -1
- package/dist/lime-elements/p-9d2f6454.entry.js.map +0 -1
- package/dist/lime-elements/p-b9b0853b.entry.js +0 -68
- package/dist/lime-elements/p-b9b0853b.entry.js.map +0 -1
- package/dist/lime-elements/p-bd261424.entry.js +0 -2
- package/dist/lime-elements/p-bd261424.entry.js.map +0 -1
- package/dist/lime-elements/p-d528606a.js +0 -200
- package/dist/lime-elements/p-d528606a.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\",[[1,\"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-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],\"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],\"readonly\":[516],\"isOpen\":[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-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"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],\"actions\":[16]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[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]}]]],[\"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]}]]],[\"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-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-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"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\",[[1,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"customElements\":[16],\"triggerCharacters\":[16],\"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\"],\"required\":[516]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"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-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-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-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16]}]]],[\"limel-portal.cjs\",[[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-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-badge_3.cjs\",[[1,\"limel-badge\",{\"label\":[520]}],[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]}]]],[\"limel-dynamic-label_4.cjs\",[[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"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],\"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-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]}]]],[\"limel-breadcrumbs_5.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\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[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-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}]]],[\"limel-action-bar_4.cjs\",[[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}],[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]]]"), options);
|
|
17
|
+
return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[1,\"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-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[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],\"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],\"readonly\":[516],\"isOpen\":[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-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"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],\"actions\":[16]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[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]}]]],[\"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]}]]],[\"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-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-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"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\",[[1,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"customElements\":[16],\"triggerCharacters\":[16],\"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\"],\"required\":[516]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"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-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-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-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16]}]]],[\"limel-portal.cjs\",[[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-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-dynamic-label_2.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-badge_3.cjs\",[[1,\"limel-badge\",{\"label\":[520]}],[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]}]]],[\"limel-breadcrumbs_7.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\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[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-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\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}]]],[\"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],\"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-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"]}],[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],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}]]],[\"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
|
|
|
@@ -0,0 +1,202 @@
|
|
|
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
|
+
* @prop --card-heading-color: color of the heading. Defaults to `--contrast-1100`;
|
|
62
|
+
* @prop --card-subheading-color: color of the sub heading. Defaults to `--contrast-1000`;
|
|
63
|
+
* @prop --card-border-radius: border radius of the card. Defaults to `0.95rem`;
|
|
64
|
+
* @prop --card-background-color: background color of the card.
|
|
65
|
+
*/
|
|
66
|
+
* {
|
|
67
|
+
box-sizing: border-box;
|
|
68
|
+
min-width: 0;
|
|
69
|
+
min-height: 0;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
:host(limel-card) {
|
|
73
|
+
display: flex;
|
|
74
|
+
border-radius: var(--card-border-radius, 0.95rem);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
section {
|
|
78
|
+
box-sizing: border-box;
|
|
79
|
+
display: flex;
|
|
80
|
+
gap: 0.5rem;
|
|
81
|
+
flex-direction: column;
|
|
82
|
+
border-radius: var(--card-border-radius, 0.95rem);
|
|
83
|
+
border: 1px solid rgb(var(--contrast-500));
|
|
84
|
+
padding: 0.25rem;
|
|
85
|
+
background-color: var(--card-background-color, var(--lime-elevated-surface-background-color));
|
|
86
|
+
}
|
|
87
|
+
section:focus {
|
|
88
|
+
outline: none;
|
|
89
|
+
}
|
|
90
|
+
section:focus-visible {
|
|
91
|
+
outline: none;
|
|
92
|
+
box-shadow: var(--shadow-depth-8-focused);
|
|
93
|
+
}
|
|
94
|
+
:host(limel-card[orientation=landscape]) section {
|
|
95
|
+
flex-direction: row;
|
|
96
|
+
}
|
|
97
|
+
:host(limel-card[clickable]:not([disabled=true]):not([disabled])) section {
|
|
98
|
+
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);
|
|
99
|
+
cursor: pointer;
|
|
100
|
+
color: var(--mdc-theme-on-surface);
|
|
101
|
+
background-color: var(--card-background-color, var(--lime-elevated-surface-background-color));
|
|
102
|
+
}
|
|
103
|
+
:host(limel-card[clickable]:not([disabled=true]):not([disabled])) section:hover, :host(limel-card[clickable]:not([disabled=true]):not([disabled])) section:focus, :host(limel-card[clickable]:not([disabled=true]):not([disabled])) section:focus-visible {
|
|
104
|
+
will-change: color, background-color, box-shadow, transform;
|
|
105
|
+
}
|
|
106
|
+
:host(limel-card[clickable]:not([disabled=true]):not([disabled])) section:hover {
|
|
107
|
+
transform: translate3d(0, 0.01rem, 0);
|
|
108
|
+
color: var(--mdc-theme-on-surface);
|
|
109
|
+
background-color: var(--card-background-color, var(--lime-elevated-surface-background-color));
|
|
110
|
+
box-shadow: var(--button-shadow-hovered);
|
|
111
|
+
}
|
|
112
|
+
:host(limel-card[clickable]:not([disabled=true]):not([disabled])) section:active {
|
|
113
|
+
--limel-clickable-transform-timing-function: cubic-bezier(
|
|
114
|
+
0.83,
|
|
115
|
+
-0.15,
|
|
116
|
+
0.49,
|
|
117
|
+
1.16
|
|
118
|
+
);
|
|
119
|
+
transform: translate3d(0, 0.05rem, 0);
|
|
120
|
+
box-shadow: var(--button-shadow-pressed);
|
|
121
|
+
}
|
|
122
|
+
:host(limel-card[clickable]:not([disabled=true]):not([disabled])) section:hover, :host(limel-card[clickable]:not([disabled=true]):not([disabled])) section:active {
|
|
123
|
+
--limel-clickable-transition-speed: 0.2s;
|
|
124
|
+
--limel-clickable-transform-speed: 0.16s;
|
|
125
|
+
}
|
|
126
|
+
:host(limel-card[clickable]:hover) section {
|
|
127
|
+
border-color: transparent;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.body {
|
|
131
|
+
flex-grow: 1;
|
|
132
|
+
display: flex;
|
|
133
|
+
flex-direction: column;
|
|
134
|
+
gap: 0.5rem;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
img {
|
|
138
|
+
transition: filter 0.6s ease;
|
|
139
|
+
object-fit: cover;
|
|
140
|
+
border-radius: calc(var(--card-border-radius, 0.95rem) / 1.4);
|
|
141
|
+
}
|
|
142
|
+
:host(limel-card[orientation=portrait]) img {
|
|
143
|
+
width: 100%;
|
|
144
|
+
}
|
|
145
|
+
:host(limel-card[orientation=landscape]) img {
|
|
146
|
+
max-width: 40%;
|
|
147
|
+
height: 100%;
|
|
148
|
+
}
|
|
149
|
+
:host(limel-card:hover) img {
|
|
150
|
+
transition-duration: 0.2s;
|
|
151
|
+
filter: saturate(1.3);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
limel-markdown {
|
|
155
|
+
padding: 0.5rem 0.75rem;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
header {
|
|
159
|
+
display: flex;
|
|
160
|
+
justify-content: center;
|
|
161
|
+
gap: 0.5rem;
|
|
162
|
+
padding: 0.25rem 0.75rem;
|
|
163
|
+
}
|
|
164
|
+
:host(limel-card[orientation=landscape]) header {
|
|
165
|
+
padding-top: 0.5rem;
|
|
166
|
+
}
|
|
167
|
+
header:has(limel-icon) {
|
|
168
|
+
padding-left: 0.25rem;
|
|
169
|
+
}
|
|
170
|
+
header .headings {
|
|
171
|
+
flex-grow: 1;
|
|
172
|
+
display: flex;
|
|
173
|
+
flex-direction: column;
|
|
174
|
+
gap: 0.125rem;
|
|
175
|
+
}
|
|
176
|
+
header limel-icon {
|
|
177
|
+
flex-shrink: 0;
|
|
178
|
+
width: 2rem;
|
|
179
|
+
}
|
|
180
|
+
header h1 {
|
|
181
|
+
font-size: 1.125rem;
|
|
182
|
+
font-weight: 500;
|
|
183
|
+
color: var(--card-heading-color, rgb(var(--contrast-1100)));
|
|
184
|
+
letter-spacing: -0.03125rem;
|
|
185
|
+
}
|
|
186
|
+
header h2 {
|
|
187
|
+
font-size: 0.875rem;
|
|
188
|
+
font-weight: 400;
|
|
189
|
+
color: var(--card-subheading-color, rgb(var(--contrast-1000)));
|
|
190
|
+
}
|
|
191
|
+
header h1,
|
|
192
|
+
header h2 {
|
|
193
|
+
word-break: break-word;
|
|
194
|
+
hyphens: auto;
|
|
195
|
+
-webkit-hyphens: auto;
|
|
196
|
+
margin: 0;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
limel-action-bar {
|
|
200
|
+
padding: 0.5rem;
|
|
201
|
+
margin-left: auto;
|
|
202
|
+
}
|
|
@@ -0,0 +1,282 @@
|
|
|
1
|
+
import { h } from '@stencil/core';
|
|
2
|
+
import { isItem } from '../action-bar/isItem';
|
|
3
|
+
import { getIconName } from '../icon/get-icon-props';
|
|
4
|
+
/**
|
|
5
|
+
* Card is a component that displays content about a single topic,
|
|
6
|
+
* in a structured way. It can contain a header, and some supporting media such
|
|
7
|
+
* as an image or an icon, a body of text, or optional actions.
|
|
8
|
+
*
|
|
9
|
+
* @exampleComponent limel-example-card-basic
|
|
10
|
+
* @exampleComponent limel-example-card-image
|
|
11
|
+
* @exampleComponent limel-example-card-actions
|
|
12
|
+
* @exampleComponent limel-example-card-clickable
|
|
13
|
+
* @exampleComponent limel-example-card-orientation
|
|
14
|
+
* @exampleComponent limel-example-card-slot
|
|
15
|
+
* @exampleComponent limel-example-card-styling
|
|
16
|
+
* @beta
|
|
17
|
+
*/
|
|
18
|
+
export class Card {
|
|
19
|
+
constructor() {
|
|
20
|
+
this.handleActionSelect = (event) => {
|
|
21
|
+
event.stopPropagation();
|
|
22
|
+
if (isItem(event.detail)) {
|
|
23
|
+
this.actionSelected.emit(event.detail);
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
this.heading = undefined;
|
|
27
|
+
this.subheading = undefined;
|
|
28
|
+
this.image = undefined;
|
|
29
|
+
this.icon = undefined;
|
|
30
|
+
this.value = undefined;
|
|
31
|
+
this.actions = [];
|
|
32
|
+
this.clickable = false;
|
|
33
|
+
this.orientation = 'portrait';
|
|
34
|
+
}
|
|
35
|
+
render() {
|
|
36
|
+
return (h("section", { tabindex: this.clickable ? 0 : '' }, this.renderImage(), h("div", { class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar())));
|
|
37
|
+
}
|
|
38
|
+
renderImage() {
|
|
39
|
+
if (!this.image) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
return h("img", { src: this.image.src, alt: this.image.alt, loading: "lazy" });
|
|
43
|
+
}
|
|
44
|
+
renderHeader() {
|
|
45
|
+
if (!this.heading && !this.subheading && !this.icon) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
return (h("header", null, this.renderIcon(), h("div", { class: "headings" }, this.renderHeading(), this.renderSubheading())));
|
|
49
|
+
}
|
|
50
|
+
renderIcon() {
|
|
51
|
+
var _a;
|
|
52
|
+
const icon = getIconName(this.icon);
|
|
53
|
+
const color = typeof this.icon !== 'string' ? (_a = this.icon) === null || _a === void 0 ? void 0 : _a.color : undefined;
|
|
54
|
+
if (!icon) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
return (h("limel-icon", { style: {
|
|
58
|
+
color: `${color}`,
|
|
59
|
+
}, badge: true, name: icon }));
|
|
60
|
+
}
|
|
61
|
+
renderHeading() {
|
|
62
|
+
if (!this.heading) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
return h("h1", null, this.heading);
|
|
66
|
+
}
|
|
67
|
+
renderSubheading() {
|
|
68
|
+
if (!this.subheading) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
return h("h2", null, this.subheading);
|
|
72
|
+
}
|
|
73
|
+
renderSlot() {
|
|
74
|
+
return h("slot", { name: "component" });
|
|
75
|
+
}
|
|
76
|
+
renderValue() {
|
|
77
|
+
return h("limel-markdown", { value: this.value });
|
|
78
|
+
}
|
|
79
|
+
renderActionBar() {
|
|
80
|
+
if (!this.actions.length) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
return (h("limel-action-bar", { actions: this.actions, onItemSelected: this.handleActionSelect }));
|
|
84
|
+
}
|
|
85
|
+
static get is() { return "limel-card"; }
|
|
86
|
+
static get encapsulation() { return "shadow"; }
|
|
87
|
+
static get originalStyleUrls() {
|
|
88
|
+
return {
|
|
89
|
+
"$": ["card.scss"]
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
static get styleUrls() {
|
|
93
|
+
return {
|
|
94
|
+
"$": ["card.css"]
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
static get properties() {
|
|
98
|
+
return {
|
|
99
|
+
"heading": {
|
|
100
|
+
"type": "string",
|
|
101
|
+
"mutable": false,
|
|
102
|
+
"complexType": {
|
|
103
|
+
"original": "string",
|
|
104
|
+
"resolved": "string",
|
|
105
|
+
"references": {}
|
|
106
|
+
},
|
|
107
|
+
"required": false,
|
|
108
|
+
"optional": true,
|
|
109
|
+
"docs": {
|
|
110
|
+
"tags": [],
|
|
111
|
+
"text": "Heading of the card,\nto provide a short title about the context."
|
|
112
|
+
},
|
|
113
|
+
"attribute": "heading",
|
|
114
|
+
"reflect": true
|
|
115
|
+
},
|
|
116
|
+
"subheading": {
|
|
117
|
+
"type": "string",
|
|
118
|
+
"mutable": false,
|
|
119
|
+
"complexType": {
|
|
120
|
+
"original": "string",
|
|
121
|
+
"resolved": "string",
|
|
122
|
+
"references": {}
|
|
123
|
+
},
|
|
124
|
+
"required": false,
|
|
125
|
+
"optional": true,
|
|
126
|
+
"docs": {
|
|
127
|
+
"tags": [],
|
|
128
|
+
"text": "Subheading of the card\nto provide a short description of the context."
|
|
129
|
+
},
|
|
130
|
+
"attribute": "subheading",
|
|
131
|
+
"reflect": true
|
|
132
|
+
},
|
|
133
|
+
"image": {
|
|
134
|
+
"type": "unknown",
|
|
135
|
+
"mutable": false,
|
|
136
|
+
"complexType": {
|
|
137
|
+
"original": "Image",
|
|
138
|
+
"resolved": "Image",
|
|
139
|
+
"references": {
|
|
140
|
+
"Image": {
|
|
141
|
+
"location": "import",
|
|
142
|
+
"path": "../../global/shared-types/image.types"
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
"required": false,
|
|
147
|
+
"optional": true,
|
|
148
|
+
"docs": {
|
|
149
|
+
"tags": [],
|
|
150
|
+
"text": "A hero image to display in the card,\nto enrich the content with visual information."
|
|
151
|
+
}
|
|
152
|
+
},
|
|
153
|
+
"icon": {
|
|
154
|
+
"type": "string",
|
|
155
|
+
"mutable": false,
|
|
156
|
+
"complexType": {
|
|
157
|
+
"original": "string | Icon",
|
|
158
|
+
"resolved": "Icon | string",
|
|
159
|
+
"references": {
|
|
160
|
+
"Icon": {
|
|
161
|
+
"location": "import",
|
|
162
|
+
"path": "../../global/shared-types/icon.types"
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
"required": false,
|
|
167
|
+
"optional": true,
|
|
168
|
+
"docs": {
|
|
169
|
+
"tags": [],
|
|
170
|
+
"text": "An icon, to display along with the heading and subheading."
|
|
171
|
+
},
|
|
172
|
+
"attribute": "icon",
|
|
173
|
+
"reflect": true
|
|
174
|
+
},
|
|
175
|
+
"value": {
|
|
176
|
+
"type": "string",
|
|
177
|
+
"mutable": false,
|
|
178
|
+
"complexType": {
|
|
179
|
+
"original": "string",
|
|
180
|
+
"resolved": "string",
|
|
181
|
+
"references": {}
|
|
182
|
+
},
|
|
183
|
+
"required": false,
|
|
184
|
+
"optional": true,
|
|
185
|
+
"docs": {
|
|
186
|
+
"tags": [],
|
|
187
|
+
"text": "The content of the card.\nSupports markdown, to provide a rich text experience."
|
|
188
|
+
},
|
|
189
|
+
"attribute": "value",
|
|
190
|
+
"reflect": false
|
|
191
|
+
},
|
|
192
|
+
"actions": {
|
|
193
|
+
"type": "unknown",
|
|
194
|
+
"mutable": false,
|
|
195
|
+
"complexType": {
|
|
196
|
+
"original": "Array<ActionBarItem | ListSeparator>",
|
|
197
|
+
"resolved": "(ListSeparator | ActionBarItem)[]",
|
|
198
|
+
"references": {
|
|
199
|
+
"Array": {
|
|
200
|
+
"location": "global"
|
|
201
|
+
},
|
|
202
|
+
"ActionBarItem": {
|
|
203
|
+
"location": "import",
|
|
204
|
+
"path": "../action-bar/action-bar.types"
|
|
205
|
+
},
|
|
206
|
+
"ListSeparator": {
|
|
207
|
+
"location": "import",
|
|
208
|
+
"path": "../../global/shared-types/separator.types"
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
"required": false,
|
|
213
|
+
"optional": true,
|
|
214
|
+
"docs": {
|
|
215
|
+
"tags": [],
|
|
216
|
+
"text": "Actions to display in the card,\nto provide the user with options to interact with the content."
|
|
217
|
+
},
|
|
218
|
+
"defaultValue": "[]"
|
|
219
|
+
},
|
|
220
|
+
"clickable": {
|
|
221
|
+
"type": "boolean",
|
|
222
|
+
"mutable": false,
|
|
223
|
+
"complexType": {
|
|
224
|
+
"original": "boolean",
|
|
225
|
+
"resolved": "boolean",
|
|
226
|
+
"references": {}
|
|
227
|
+
},
|
|
228
|
+
"required": false,
|
|
229
|
+
"optional": false,
|
|
230
|
+
"docs": {
|
|
231
|
+
"tags": [],
|
|
232
|
+
"text": "When true, improve the accessibility of the component and hints the user\nthat the card can be interacted width."
|
|
233
|
+
},
|
|
234
|
+
"attribute": "clickable",
|
|
235
|
+
"reflect": true,
|
|
236
|
+
"defaultValue": "false"
|
|
237
|
+
},
|
|
238
|
+
"orientation": {
|
|
239
|
+
"type": "string",
|
|
240
|
+
"mutable": false,
|
|
241
|
+
"complexType": {
|
|
242
|
+
"original": "'landscape' | 'portrait'",
|
|
243
|
+
"resolved": "\"landscape\" | \"portrait\"",
|
|
244
|
+
"references": {}
|
|
245
|
+
},
|
|
246
|
+
"required": false,
|
|
247
|
+
"optional": false,
|
|
248
|
+
"docs": {
|
|
249
|
+
"tags": [],
|
|
250
|
+
"text": "The orientation of the card,\nspecially useful when the card has an image."
|
|
251
|
+
},
|
|
252
|
+
"attribute": "orientation",
|
|
253
|
+
"reflect": true,
|
|
254
|
+
"defaultValue": "'portrait'"
|
|
255
|
+
}
|
|
256
|
+
};
|
|
257
|
+
}
|
|
258
|
+
static get events() {
|
|
259
|
+
return [{
|
|
260
|
+
"method": "actionSelected",
|
|
261
|
+
"name": "actionSelected",
|
|
262
|
+
"bubbles": true,
|
|
263
|
+
"cancelable": true,
|
|
264
|
+
"composed": true,
|
|
265
|
+
"docs": {
|
|
266
|
+
"tags": [],
|
|
267
|
+
"text": "Fired when a action bar item has been clicked."
|
|
268
|
+
},
|
|
269
|
+
"complexType": {
|
|
270
|
+
"original": "ActionBarItem",
|
|
271
|
+
"resolved": "ActionBarItemOnlyIcon<any> | ActionBarItemWithLabel<any>",
|
|
272
|
+
"references": {
|
|
273
|
+
"ActionBarItem": {
|
|
274
|
+
"location": "import",
|
|
275
|
+
"path": "../action-bar/action-bar.types"
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
}];
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
//# sourceMappingURL=card.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAGxE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD;;;;;;;;;;;;;GAaG;AAMH,MAAM,OAAO,IAAI;;IAgJL,uBAAkB,GAAG,CACzB,KAAiD,EACnD,EAAE;MACA,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;QACtB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;OAC1C;IACL,CAAC,CAAC;;;;;;mBA/GsD,EAAE;qBAO9B,KAAK;uBAOc,UAAU;;EAQlD,MAAM;IACT,OAAO,CACH,eAAS,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;MACrC,IAAI,CAAC,WAAW,EAAE;MACnB,WAAK,KAAK,EAAC,MAAM;QACZ,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,WAAW,EAAE;QAClB,IAAI,CAAC,eAAe,EAAE,CACrB,CACA,CACb,CAAC;EACN,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,WAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,OAAO,EAAC,MAAM,GAAG,CAAC;EAC5E,CAAC;EAEO,YAAY;IAChB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjD,OAAO;KACV;IAED,OAAO,CACH;MACK,IAAI,CAAC,UAAU,EAAE;MAClB,WAAK,KAAK,EAAC,UAAU;QAChB,IAAI,CAAC,aAAa,EAAE;QACpB,IAAI,CAAC,gBAAgB,EAAE,CACtB,CACD,CACZ,CAAC;EACN,CAAC;EAEO,UAAU;;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,KAAK,GACP,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAEjE,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,CACH,kBACI,KAAK,EAAE;QACH,KAAK,EAAE,GAAG,KAAK,EAAE;OACpB,EACD,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,IAAI,GACZ,CACL,CAAC;EACN,CAAC;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACf,OAAO;KACV;IAED,OAAO,cAAK,IAAI,CAAC,OAAO,CAAM,CAAC;EACnC,CAAC;EAEO,gBAAgB;IACpB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MAClB,OAAO;KACV;IAED,OAAO,cAAK,IAAI,CAAC,UAAU,CAAM,CAAC;EACtC,CAAC;EAEO,UAAU;IACd,OAAO,YAAM,IAAI,EAAC,WAAW,GAAG,CAAC;EACrC,CAAC;EAEO,WAAW;IACf,OAAO,sBAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;EACjD,CAAC;EAWO,eAAe;IACnB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;MACtB,OAAO;KACV;IAED,OAAO,CACH,wBACI,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,kBAAkB,GACzC,CACL,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { isItem } from '../action-bar/isItem';\nimport { getIconName } from '../icon/get-icon-props';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { ActionBarItem } from '../action-bar/action-bar.types';\n\n/**\n * Card is a component that displays content about a single topic,\n * in a structured way. It can contain a header, and some supporting media such\n * as an image or an icon, a body of text, or optional actions.\n *\n * @exampleComponent limel-example-card-basic\n * @exampleComponent limel-example-card-image\n * @exampleComponent limel-example-card-actions\n * @exampleComponent limel-example-card-clickable\n * @exampleComponent limel-example-card-orientation\n * @exampleComponent limel-example-card-slot\n * @exampleComponent limel-example-card-styling\n * @beta\n */\n@Component({\n tag: 'limel-card',\n shadow: true,\n styleUrl: 'card.scss',\n})\nexport class Card {\n /**\n * Heading of the card,\n * to provide a short title about the context.\n */\n @Prop({ reflect: true })\n public heading?: string;\n\n /**\n * Subheading of the card\n * to provide a short description of the context.\n */\n @Prop({ reflect: true })\n public subheading?: string;\n\n /**\n * A hero image to display in the card,\n * to enrich the content with visual information.\n */\n @Prop()\n public image?: Image;\n\n /**\n * An icon, to display along with the heading and subheading.\n */\n @Prop({ reflect: true })\n public icon?: string | Icon;\n\n /**\n * The content of the card.\n * Supports markdown, to provide a rich text experience.\n */\n @Prop()\n public value?: string;\n\n /**\n * Actions to display in the card,\n * to provide the user with options to interact with the content.\n */\n @Prop()\n public actions?: Array<ActionBarItem | ListSeparator> = [];\n\n /**\n * When true, improve the accessibility of the component and hints the user\n * that the card can be interacted width.\n */\n @Prop({ reflect: true })\n public clickable: boolean = false;\n\n /**\n * The orientation of the card,\n * specially useful when the card has an image.\n */\n @Prop({ reflect: true })\n public orientation: 'landscape' | 'portrait' = 'portrait';\n\n /**\n * Fired when a action bar item has been clicked.\n */\n @Event()\n public actionSelected: EventEmitter<ActionBarItem>;\n\n public render() {\n return (\n <section tabindex={this.clickable ? 0 : ''}>\n {this.renderImage()}\n <div class=\"body\">\n {this.renderHeader()}\n {this.renderSlot()}\n {this.renderValue()}\n {this.renderActionBar()}\n </div>\n </section>\n );\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 renderHeader() {\n if (!this.heading && !this.subheading && !this.icon) {\n return;\n }\n\n return (\n <header>\n {this.renderIcon()}\n <div class=\"headings\">\n {this.renderHeading()}\n {this.renderSubheading()}\n </div>\n </header>\n );\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n const color =\n typeof this.icon !== 'string' ? this.icon?.color : undefined;\n\n if (!icon) {\n return;\n }\n\n return (\n <limel-icon\n style={{\n color: `${color}`,\n }}\n badge={true}\n name={icon}\n />\n );\n }\n\n private renderHeading() {\n if (!this.heading) {\n return;\n }\n\n return <h1>{this.heading}</h1>;\n }\n\n private renderSubheading() {\n if (!this.subheading) {\n return;\n }\n\n return <h2>{this.subheading}</h2>;\n }\n\n private renderSlot() {\n return <slot name=\"component\" />;\n }\n\n private renderValue() {\n return <limel-markdown value={this.value} />;\n }\n\n private handleActionSelect = (\n event: CustomEvent<ActionBarItem | ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.actionSelected.emit(event.detail);\n }\n };\n\n private renderActionBar() {\n if (!this.actions.length) {\n return;\n }\n\n return (\n <limel-action-bar\n actions={this.actions}\n onItemSelected={this.handleActionSelect}\n />\n );\n }\n}\n"]}
|
package/dist/collection/components/text-editor/prosemirror-adapter/plugins/trigger/factory.js
CHANGED
|
@@ -88,14 +88,19 @@ export const createTriggerPlugin = (triggerCharacters) => {
|
|
|
88
88
|
triggerPosition = null;
|
|
89
89
|
activeTrigger = null;
|
|
90
90
|
};
|
|
91
|
-
const handleKeyDown = (
|
|
92
|
-
const { state } = view;
|
|
91
|
+
const handleKeyDown = (_, event) => {
|
|
93
92
|
if (event.key === 'Escape') {
|
|
94
93
|
stopTrigger();
|
|
95
94
|
return true;
|
|
96
95
|
}
|
|
97
|
-
|
|
98
|
-
|
|
96
|
+
return false;
|
|
97
|
+
};
|
|
98
|
+
const handleInput = (view, event) => {
|
|
99
|
+
const { state } = view;
|
|
100
|
+
if (event.inputType === 'insertText' &&
|
|
101
|
+
isTrigger(event.data, triggerCharacters) &&
|
|
102
|
+
shouldTrigger(state)) {
|
|
103
|
+
activeTrigger = event.data;
|
|
99
104
|
triggerText = '';
|
|
100
105
|
triggerPosition = state.selection.$from.pos - triggerText.length;
|
|
101
106
|
sendTriggerEvent('triggerStart', view, activeTrigger, triggerText);
|
|
@@ -135,6 +140,9 @@ export const createTriggerPlugin = (triggerCharacters) => {
|
|
|
135
140
|
},
|
|
136
141
|
props: {
|
|
137
142
|
handleKeyDown: handleKeyDown,
|
|
143
|
+
handleDOMEvents: {
|
|
144
|
+
input: handleInput,
|
|
145
|
+
},
|
|
138
146
|
},
|
|
139
147
|
appendTransaction: appendTransactions,
|
|
140
148
|
});
|