@limetech/lime-elements 37.1.0-next.27 → 37.1.0-next.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-breadcrumbs.cjs.entry.js +89 -0
- package/dist/cjs/limel-breadcrumbs.cjs.entry.js.map +1 -0
- package/dist/cjs/limel-form.cjs.entry.js +1 -0
- package/dist/cjs/limel-form.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/breadcrumbs/breadcrumbs.css +154 -0
- package/dist/collection/components/breadcrumbs/breadcrumbs.js +178 -0
- package/dist/collection/components/breadcrumbs/breadcrumbs.js.map +1 -0
- package/dist/collection/components/breadcrumbs/breadcrumbs.types.js +2 -0
- package/dist/collection/components/breadcrumbs/breadcrumbs.types.js.map +1 -0
- package/dist/collection/components/form/form.js +1 -0
- package/dist/collection/components/form/form.js.map +1 -1
- package/dist/collection/global/shared-types/icon.types.js +2 -0
- package/dist/collection/global/shared-types/icon.types.js.map +1 -0
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-breadcrumbs.entry.js +85 -0
- package/dist/esm/limel-breadcrumbs.entry.js.map +1 -0
- package/dist/esm/limel-form.entry.js +1 -0
- package/dist/esm/limel-form.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-291abad1.entry.js +2 -0
- package/dist/lime-elements/p-291abad1.entry.js.map +1 -0
- package/dist/lime-elements/{p-f5b90af9.entry.js → p-9a6540ed.entry.js} +2 -2
- package/dist/lime-elements/{p-f5b90af9.entry.js.map → p-9a6540ed.entry.js.map} +1 -1
- package/dist/types/components/breadcrumbs/breadcrumbs.d.ts +60 -0
- package/dist/types/components/breadcrumbs/breadcrumbs.types.d.ts +21 -0
- package/dist/types/components.d.ts +127 -0
- package/dist/types/global/shared-types/icon.types.d.ts +22 -0
- package/dist/types/interface.d.ts +1 -0
- package/package.json +5 -5
|
@@ -20,7 +20,7 @@ const patchBrowser = () => {
|
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
patchBrowser().then(options => {
|
|
23
|
-
return index.bootstrapLazy([["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-action-bar.cjs",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[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-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],"value":[8],"searcher":[8],"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",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["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":[520],"format":[513],"language":[520],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[8],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[8],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[8],"isDraggingOverDropZone":[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":[8],"progress":[16]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[8],"show":[64]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["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-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[8],"fullscreen":[516],"open":[1540],"closingActions":[520,"closing-actions"]}]]],["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":[8]}]]],["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":[8]}]]],["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-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"helperText":[513,"helper-text"],"fieldId":[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":[520],"justify":[520],"align":[520],"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-
|
|
23
|
+
return index.bootstrapLazy([["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-action-bar.cjs",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[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-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],"value":[8],"searcher":[8],"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",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["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":[520],"format":[513],"language":[520],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[8],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-breadcrumbs.cjs",[[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[8],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[8],"isDraggingOverDropZone":[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":[8],"progress":[16]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[8],"show":[64]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["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-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[8],"fullscreen":[516],"open":[1540],"closingActions":[520,"closing-actions"]}]]],["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":[8]}]]],["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":[8]}]]],["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-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"helperText":[513,"helper-text"],"fieldId":[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":[520],"justify":[520],"align":[520],"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-dock-button.cjs",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["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],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[8],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[8],"formatter":[16]}]]],["limel-portal.cjs",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["limel-menu_2.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["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"]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[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],"language":[8],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[520],"limeBranded":[4,"lime-branded"]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-circular-progress_2.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[514],"indeterminate":[516]}]]],["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-input-field.cjs",[[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"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-popover_2.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-tooltip_2.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]}]]],["limel-list_2.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]]], options);
|
|
24
24
|
});
|
|
25
25
|
|
|
26
26
|
exports.setNonce = index.setNonce;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-38eb64b5.js');
|
|
6
|
+
const makeEnterClickable = require('./make-enter-clickable-59460fd6.js');
|
|
7
|
+
const randomString = require('./random-string-c8445652.js');
|
|
8
|
+
|
|
9
|
+
const breadcrumbsCss = ":host(limel-breadcrumbs){--limel-breadcrumbs-item-height:1.5rem;--limel-breadcrumbs-gap:0.75rem;--limel-breadcrumbs-gap:0.75rem;--limel-breadcrumbs-item-text-color:var(\n --breadcrumbs-item-text-color,\n rgb(var(--contrast-1500))\n );-webkit-mask-image:linear-gradient(to right, transparent 0%, black calc(0% + 0.5rem), black calc(100% - 0.5rem), transparent 100%);mask-image:linear-gradient(to right, transparent 0%, black calc(0% + 0.5rem), black calc(100% - 0.5rem), transparent 100%)}ol,li,.step{all:unset}*{box-sizing:border-box}ol{padding:0.5rem;gap:var(--limel-breadcrumbs-gap)}.step{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:var(--breadcrumbs-item-max-width, 10rem);height:var(--limel-breadcrumbs-item-height);color:var(--limel-breadcrumbs-item-text-color);border-radius:100vw;font-size:0.875rem;padding:0 0.25rem}.step:not(:has(.text)){padding:0 0.125rem}.step:not(.last):focus{outline:none}.step:not(.last):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.step:not(.last):after{content:var(--limel-breadcrumbs-divider);width:var(--limel-breadcrumbs-gap);position:absolute;top:0;right:calc(var(--limel-breadcrumbs-gap) * -1);bottom:0;left:auto;text-align:center}a.step{cursor:pointer;transition:color 0.2s ease}a.step:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.step:hover{--limel-breadcrumbs-item-text-color:rgb(var(--color-blue-default))}a.step:hover:before{opacity:0.3;transform:scale(1)}button.step:not(.last){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-breadcrumbs-item-text-color);background-color:transparent}button.step:not(.last):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.step:not(.last):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}limel-icon{flex-shrink:0;width:calc(var(--limel-breadcrumbs-item-height) - 0.25rem);height:calc(var(--limel-breadcrumbs-item-height) - 0.25rem)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}.last{opacity:0.7}:host(limel-breadcrumbs){box-sizing:border-box;display:flex;width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;direction:rtl}:host(limel-breadcrumbs)::-webkit-scrollbar{display:none}ol{display:flex;flex-direction:row-reverse;justify-content:flex-end;margin-right:auto}.step{direction:ltr}";
|
|
10
|
+
|
|
11
|
+
const Breadcrumbs = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
index.registerInstance(this, hostRef);
|
|
14
|
+
this.select = index.createEvent(this, "select", 7);
|
|
15
|
+
this.renderSteps = () => {
|
|
16
|
+
const allStepsWithoutLast = this.items.slice(0, -1);
|
|
17
|
+
if (this.areItemsLinks(this.items)) {
|
|
18
|
+
return allStepsWithoutLast.map(this.renderAsLink);
|
|
19
|
+
}
|
|
20
|
+
return allStepsWithoutLast.map(this.renderAsButton);
|
|
21
|
+
};
|
|
22
|
+
this.renderAsButton = (item) => {
|
|
23
|
+
const tooltipId = randomString.createRandomString();
|
|
24
|
+
return [
|
|
25
|
+
index.h("button", { role: "listitem", id: tooltipId, class: "step", onClick: this.handleClick(item) }, this.renderIcon(item), this.renderLabel(item)),
|
|
26
|
+
this.renderTooltip(item, tooltipId),
|
|
27
|
+
];
|
|
28
|
+
};
|
|
29
|
+
this.renderAsLink = (item) => {
|
|
30
|
+
const tooltipId = randomString.createRandomString();
|
|
31
|
+
return [
|
|
32
|
+
index.h("a", { role: "listitem", id: randomString.createRandomString(), class: "step", href: item.link.href, title: item.link.title }, this.renderIcon(item), this.renderLabel(item)),
|
|
33
|
+
this.renderTooltip(item, tooltipId),
|
|
34
|
+
];
|
|
35
|
+
};
|
|
36
|
+
this.renderLastStep = () => {
|
|
37
|
+
const lastItem = this.items.slice(-1);
|
|
38
|
+
return (index.h("li", { class: "last step", tabindex: "-1", "aria-current": this.areItemsLinks(this.items) ? 'page' : 'step' }, this.renderIcon(lastItem[0]), index.h("span", { class: "text" }, lastItem[0].text)));
|
|
39
|
+
};
|
|
40
|
+
this.renderIcon = (item) => {
|
|
41
|
+
if (!item.icon) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
return (index.h("limel-icon", { style: {
|
|
45
|
+
color: `${item.icon.color}`,
|
|
46
|
+
}, name: item.icon.name }));
|
|
47
|
+
};
|
|
48
|
+
this.renderLabel = (item) => {
|
|
49
|
+
if (item.type === 'icon-only') {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
return index.h("span", { class: "text" }, item.text);
|
|
53
|
+
};
|
|
54
|
+
this.renderTooltip = (item, tooltipId) => {
|
|
55
|
+
if (item.type === 'icon-only') {
|
|
56
|
+
return index.h("limel-tooltip", { elementId: tooltipId, label: item.text });
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
this.areItemsLinks = (items) => {
|
|
60
|
+
return items.some((item) => 'link' in item);
|
|
61
|
+
};
|
|
62
|
+
this.handleClick = (item) => (event) => {
|
|
63
|
+
event.stopPropagation();
|
|
64
|
+
this.select.emit(item);
|
|
65
|
+
};
|
|
66
|
+
this.items = undefined;
|
|
67
|
+
this.divider = '›';
|
|
68
|
+
}
|
|
69
|
+
render() {
|
|
70
|
+
return (index.h("ol", { role: "navigation", "aria-label": "Breadcrumb", style: { '--limel-breadcrumbs-divider': `'${this.divider}'` } }, this.renderSteps(), this.renderLastStep()));
|
|
71
|
+
}
|
|
72
|
+
componentWillLoad() {
|
|
73
|
+
makeEnterClickable.makeEnterClickable(this.host);
|
|
74
|
+
}
|
|
75
|
+
disconnectedCallback() {
|
|
76
|
+
this.removeEnterClickable();
|
|
77
|
+
}
|
|
78
|
+
removeEnterClickable() {
|
|
79
|
+
var _a;
|
|
80
|
+
const element = (_a = this.button) !== null && _a !== void 0 ? _a : this.anchor;
|
|
81
|
+
makeEnterClickable.removeEnterClickable(element);
|
|
82
|
+
}
|
|
83
|
+
get host() { return index.getElement(this); }
|
|
84
|
+
};
|
|
85
|
+
Breadcrumbs.style = breadcrumbsCss;
|
|
86
|
+
|
|
87
|
+
exports.limel_breadcrumbs = Breadcrumbs;
|
|
88
|
+
|
|
89
|
+
//# sourceMappingURL=limel-breadcrumbs.cjs.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"limel-breadcrumbs.entry.cjs.js","mappings":"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","names":["createRandomString","h","makeEnterClickable","removeEnterClickable"],"sources":["./src/components/breadcrumbs/breadcrumbs.scss?tag=limel-breadcrumbs&encapsulation=shadow","./src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n* @prop --breadcrumbs-item-text-color: Text color of breadcrumbs items, defaults to `--contrast-1100`.\n* @prop --breadcrumbs-item-max-width: Maximum width of a button in the breadcrumbs. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n*/\n\n$padding: 0.5rem;\n$mask: linear-gradient(\n to right,\n transparent 0%,\n black calc(0% + #{$padding}),\n black calc(100% - #{$padding}),\n transparent 100%\n);\n\n:host(limel-breadcrumbs) {\n --limel-breadcrumbs-item-height: 1.5rem; // for internal use\n --limel-breadcrumbs-gap: 0.75rem; // for internal use\n --limel-breadcrumbs-gap: 0.75rem; // for internal use\n --limel-breadcrumbs-item-text-color: var(\n --breadcrumbs-item-text-color,\n rgb(var(--contrast-1500))\n ); // for internal use\n -webkit-mask-image: $mask;\n mask-image: $mask;\n}\n\nol,\nli,\n.step {\n all: unset;\n}\n\n* {\n box-sizing: border-box;\n}\n\nol {\n padding: $padding; // needed for the focus and hover effects, since we are using overflow\n gap: var(--limel-breadcrumbs-gap);\n}\n\n.step {\n position: relative;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n max-width: var(--breadcrumbs-item-max-width, 10rem);\n height: var(--limel-breadcrumbs-item-height);\n\n color: var(--limel-breadcrumbs-item-text-color);\n border-radius: 100vw;\n font-size: 0.875rem;\n padding: 0 0.25rem;\n\n &:not(:has(.text)) {\n padding: 0 0.125rem;\n }\n\n &:not(.last) {\n @include mixins.visualize-keyboard-focus;\n\n &:after {\n content: var(--limel-breadcrumbs-divider);\n width: var(--limel-breadcrumbs-gap);\n\n position: absolute;\n top: 0;\n right: calc(var(--limel-breadcrumbs-gap) * -1);\n bottom: 0;\n left: auto;\n\n text-align: center;\n }\n }\n}\n\na.step {\n cursor: pointer;\n transition: color 0.2s ease;\n &:before {\n transition: opacity 0.2s ease, transform 0.3s ease-out;\n content: '';\n position: absolute;\n inset: auto 0 0 0;\n width: calc(100% - 0.5rem);\n margin: auto;\n height: 0.125rem;\n border-radius: 1rem;\n\n background-color: currentColor;\n opacity: 0;\n transform: scale(0.6);\n }\n\n &:hover {\n --limel-breadcrumbs-item-text-color: rgb(var(--color-blue-default));\n &:before {\n opacity: 0.3;\n transform: scale(1);\n }\n }\n}\n\nbutton.step {\n &:not(.last) {\n @include mixins.is-flat-clickable(\n $color: var(--limel-breadcrumbs-item-text-color)\n );\n }\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--limel-breadcrumbs-item-height) - 0.25rem);\n height: calc(var(--limel-breadcrumbs-item-height) - 0.25rem);\n}\n\n.text {\n @include mixins.truncate-text;\n padding: 0 0.25rem;\n}\n\n.last {\n opacity: 0.7;\n}\n\n// LAYOUT:\n// The code below makes sure that the last item is always visible,\n// and previous items overflow out of the container\n// while keeping the container scrollable.\n// All without any additional scripts in the component code.\n\n:host(limel-breadcrumbs) {\n box-sizing: border-box;\n\n display: flex;\n width: 100%;\n overflow-x: auto;\n scrollbar-width: none; // This hides the scrollbars appearing under in Firefox\n -ms-overflow-style: none; // Same as above for IE 11\n &::-webkit-scrollbar {\n display: none; // This hides the scrollbars appearing under in Chrome\n }\n\n direction: rtl;\n}\n\nol {\n display: flex;\n flex-direction: row-reverse;\n justify-content: flex-end;\n margin-right: auto;\n}\n\n.step {\n direction: ltr;\n}\n","import {\n Component,\n Element,\n h,\n Event,\n EventEmitter,\n Prop,\n} from '@stencil/core';\nimport { BreadcrumbsItem } from './breadcrumbs.types';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * A Breadcrumb consists of a list of distinct \"places\" that a user has gone through,\n * before ending up where they are right now, in a website or an application.\n *\n * These \"places\" can be for example _pages_ of a website, which are hierarchically\n * laid out before the current page that the user is looking at.\n * They could also be _steps_ which the user has gone through, which perhaps have no\n * hierarchical relation with each other, but has eventually led the user \"here\".\n *\n * :::note\n * - Where the user currently is, is always the last step of the breadcrumb.\n * - A breadcrumbs never shows where users can go after this place.\n * It only illustrates where user has been before ending up here.\n * If the path that a user can take is not changing and if next steps are clear,\n * you can use the [Progress flow component](#/component/limel-progress-flow) instead.\n * :::\n *\n * Breadcrumbs are often placed horizontally before the main content of the current screen.\n * @exampleComponent limel-example-breadcrumbs-links\n * @exampleComponent limel-example-breadcrumbs-buttons\n * @exampleComponent limel-example-breadcrumbs-icons\n * @exampleComponent limel-example-breadcrumbs-divider\n * @exampleComponent limel-example-breadcrumbs-icon-color\n * @exampleComponent limel-example-breadcrumbs-styling\n */\n\n@Component({\n tag: 'limel-breadcrumbs',\n shadow: true,\n styleUrl: 'breadcrumbs.scss',\n})\nexport class Breadcrumbs {\n /**\n * List of items in the breadcrumbs,\n * each representing a step or a page.\n */\n @Prop()\n public items: BreadcrumbsItem[];\n\n /**\n * The visual divider that separates items.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public divider: string = '›';\n\n /**\n * Fired when clicking on buttons (not links!)\n * inside the breadcrumbs.\n */\n @Event()\n public select: EventEmitter<BreadcrumbsItem>;\n\n @Element()\n private host: HTMLLimelBreadcrumbsElement;\n\n private button: HTMLButtonElement;\n private anchor: HTMLAnchorElement;\n\n public render() {\n return (\n <ol\n role=\"navigation\"\n aria-label=\"Breadcrumb\"\n style={{ '--limel-breadcrumbs-divider': `'${this.divider}'` }}\n >\n {this.renderSteps()}\n {this.renderLastStep()}\n </ol>\n );\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n this.removeEnterClickable();\n }\n\n private renderSteps = () => {\n const allStepsWithoutLast = this.items.slice(0, -1);\n\n if (this.areItemsLinks(this.items)) {\n return allStepsWithoutLast.map(this.renderAsLink);\n }\n\n return allStepsWithoutLast.map(this.renderAsButton);\n };\n\n private renderAsButton = (item: BreadcrumbsItem) => {\n const tooltipId = createRandomString();\n\n return [\n <button\n role=\"listitem\"\n id={tooltipId}\n class=\"step\"\n onClick={this.handleClick(item)}\n >\n {this.renderIcon(item)}\n {this.renderLabel(item)}\n </button>,\n this.renderTooltip(item, tooltipId),\n ];\n };\n\n private renderAsLink = (item: BreadcrumbsItem) => {\n const tooltipId = createRandomString();\n\n return [\n <a\n role=\"listitem\"\n id={createRandomString()}\n class=\"step\"\n href={item.link.href}\n title={item.link.title}\n >\n {this.renderIcon(item)}\n {this.renderLabel(item)}\n </a>,\n this.renderTooltip(item, tooltipId),\n ];\n };\n\n private renderLastStep = () => {\n const lastItem = this.items.slice(-1);\n\n return (\n <li\n class=\"last step\"\n tabindex=\"-1\"\n aria-current={this.areItemsLinks(this.items) ? 'page' : 'step'}\n >\n {this.renderIcon(lastItem[0])}\n <span class=\"text\">{lastItem[0].text}</span>\n </li>\n );\n };\n\n private renderIcon = (item: BreadcrumbsItem) => {\n if (!item.icon) {\n return;\n }\n\n return (\n <limel-icon\n style={{\n color: `${item.icon.color}`,\n }}\n name={item.icon.name}\n />\n );\n };\n\n private renderLabel = (item: BreadcrumbsItem) => {\n if (item.type === 'icon-only') {\n return;\n }\n\n return <span class=\"text\">{item.text}</span>;\n };\n\n private renderTooltip = (item: BreadcrumbsItem, tooltipId: string) => {\n if (item.type === 'icon-only') {\n return <limel-tooltip elementId={tooltipId} label={item.text} />;\n }\n };\n\n private areItemsLinks = (items: BreadcrumbsItem[]) => {\n return items.some((item) => 'link' in item);\n };\n\n private handleClick = (item: BreadcrumbsItem) => (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(item);\n };\n\n private removeEnterClickable() {\n const element = this.button ?? this.anchor;\n removeEnterClickable(element);\n }\n}\n"],"version":3}
|
|
@@ -35759,6 +35759,7 @@ const Form = class {
|
|
|
35759
35759
|
multipleOfPrecision: 2,
|
|
35760
35760
|
allowUnionTypes: true,
|
|
35761
35761
|
strict: 'log',
|
|
35762
|
+
validateSchema: 'log',
|
|
35762
35763
|
keywords: ['lime', 'many', 'inline'],
|
|
35763
35764
|
formats: {
|
|
35764
35765
|
integer: isInteger,
|