@limetech/lime-elements 36.1.0-next.24 → 36.1.0-next.25
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-linear-progress.cjs.entry.js → limel-circular-progress_2.cjs.entry.js} +33 -0
- package/dist/cjs/limel-info-tile.cjs.entry.js +95 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/info-tile/info-tile.css +310 -0
- package/dist/collection/components/info-tile/info-tile.js +294 -0
- package/dist/collection/components/info-tile/info-tile.types.js +1 -0
- package/dist/collection/global/shared-types/link.types.js +1 -0
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/{limel-linear-progress.entry.js → limel-circular-progress_2.entry.js} +33 -1
- package/dist/esm/limel-info-tile.entry.js +91 -0
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-0dbde06f.entry.js → p-21058db5.entry.js} +4 -3
- package/dist/lime-elements/p-9ea8dd5c.entry.js +1 -0
- package/dist/types/components/info-tile/info-tile.d.ts +87 -0
- package/dist/types/components/info-tile/info-tile.types.d.ts +23 -0
- package/dist/types/components.d.ts +95 -1
- package/dist/types/global/shared-types/link.types.d.ts +25 -0
- package/dist/types/interface.d.ts +2 -0
- package/package.json +3 -3
- package/dist/cjs/limel-circular-progress.cjs.entry.js +0 -39
- package/dist/esm/limel-circular-progress.entry.js +0 -35
- package/dist/lime-elements/p-ace4e596.entry.js +0 -1
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
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-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":[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",[[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":[513],"format":[513],"language":[513],"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":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["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],"linkTitle":[513,"link-title"],"disabled":[516],"href":[513],"target":[513],"badge":[520]}]]],["limel-
|
|
18
|
+
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-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":[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",[[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":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[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]}]]],["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-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["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],"linkTitle":[513,"link-title"],"disabled":[516],"href":[513],"target":[513],"badge":[520]}]]],["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-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["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-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-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["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-icon-button.cjs",[[1,"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-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-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-button_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-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["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":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["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":[2],"indeterminate":[4]}]]],["limel-menu-list.cjs",[[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-portal.cjs",[[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["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-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["limel-list_2.cjs",[[1,"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-popover_4.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-popover-surface",{"contentCollection":[16]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
|
|
19
19
|
});
|
package/dist/cjs/{limel-linear-progress.cjs.entry.js → limel-circular-progress_2.cjs.entry.js}
RENAMED
|
@@ -3,8 +3,40 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-287e25e0.js');
|
|
6
|
+
const format = require('./format-c0047dfb.js');
|
|
6
7
|
const component = require('./component-67144c1c.js');
|
|
7
8
|
const util = require('./util-b0f5741e.js');
|
|
9
|
+
require('./_commonjsHelpers-0c557e26.js');
|
|
10
|
+
|
|
11
|
+
const circularProgressCss = ":host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n var(--lime-text-primary-on-background-color)\n )}:host{display:block;box-sizing:border-box;isolation:isolate}:host([size=x-small]){--circular-progress-size:1.5rem;font-weight:bold}:host([size=small]){--circular-progress-size:2rem;font-weight:bold}:host([size=medium]){--circular-progress-size:3rem}:host([size=large]){--circular-progress-size:4rem}:host([size=x-large]){--circular-progress-size:5rem}.lime-circular-progress{--size:var(--circular-progress-size, 3rem);--fill-color:var(--circular-progress-fill-color, var(--mdc-theme-primary));--track-color:var(\n --circular-progress-track-color,\n rgb(var(--contrast-400))\n );position:relative;display:flex;align-items:center;justify-content:center;width:var(--size);height:var(--size);border-radius:50%;line-height:normal;box-shadow:0 0 0 0.125rem rgb(var(--contrast-100), 0.7);background:conic-gradient(var(--fill-color) 0% var(--percentage), var(--track-color) var(--percentage) 100%)}.lime-circular-progress:before{content:\"\";position:absolute;width:calc(var(--size) * 0.75 + 0.25rem);height:calc(var(--size) * 0.75 + 0.25rem);border-radius:50%;background-color:var(--circular-progress-background-color, rgb(var(--contrast-100)));box-shadow:var(--button-shadow-pressed)}.prefix{font-size:clamp(0.5rem, var(--size) * 0.16, 2.25rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;color:var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));width:45%;top:20%;position:absolute}.value{display:flex;font-size:clamp(0.5rem, var(--size) * 0.25, 4rem);color:var(--circular-progress-text-color, rgb(var(--contrast-1200)));z-index:1;cursor:default}.suffix{font-size:clamp(0.5rem, var(--size) * 0.18, 2.5rem);color:var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));padding-top:4%}.displays-percentage-colors[style^=\"--percentage:1\"]{--circular-progress-fill-color:var(--color-percent--10to20)}.displays-percentage-colors[style^=\"--percentage:2\"]{--circular-progress-fill-color:var(--color-percent--20to30)}.displays-percentage-colors[style^=\"--percentage:3\"]{--circular-progress-fill-color:var(--color-percent--30to40)}.displays-percentage-colors[style^=\"--percentage:4\"]{--circular-progress-fill-color:var(--color-percent--40to50)}.displays-percentage-colors[style^=\"--percentage:5\"]{--circular-progress-fill-color:var(--color-percent--50to60)}.displays-percentage-colors[style^=\"--percentage:6\"]{--circular-progress-fill-color:var(--color-percent--60to70)}.displays-percentage-colors[style^=\"--percentage:7\"]{--circular-progress-fill-color:var(--color-percent--70to80)}.displays-percentage-colors[style^=\"--percentage:8\"]{--circular-progress-fill-color:var(--color-percent--80to90)}.displays-percentage-colors[style^=\"--percentage:9\"],.displays-percentage-colors[style=\"--percentage:100%;\"]{--circular-progress-fill-color:var(--color-percent--90to100)}.displays-percentage-colors[style=\"--percentage:1%;\"],.displays-percentage-colors[style=\"--percentage:2%;\"],.displays-percentage-colors[style=\"--percentage:3%;\"],.displays-percentage-colors[style=\"--percentage:4%;\"],.displays-percentage-colors[style=\"--percentage:5%;\"],.displays-percentage-colors[style=\"--percentage:6%;\"],.displays-percentage-colors[style=\"--percentage:7%;\"],.displays-percentage-colors[style=\"--percentage:8%;\"],.displays-percentage-colors[style=\"--percentage:9%;\"]{--circular-progress-fill-color:var(--color-percent--0to10)}";
|
|
12
|
+
|
|
13
|
+
const PERCENT = 100;
|
|
14
|
+
const CircularProgress = class {
|
|
15
|
+
constructor(hostRef) {
|
|
16
|
+
index.registerInstance(this, hostRef);
|
|
17
|
+
this.renderPrefix = () => {
|
|
18
|
+
if (this.prefix) {
|
|
19
|
+
return index.h("span", { class: "prefix" }, this.prefix);
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
this.value = 0;
|
|
23
|
+
this.maxValue = PERCENT;
|
|
24
|
+
this.prefix = null;
|
|
25
|
+
this.suffix = '%';
|
|
26
|
+
this.displayPercentageColors = false;
|
|
27
|
+
this.size = undefined;
|
|
28
|
+
}
|
|
29
|
+
render() {
|
|
30
|
+
const classList = {
|
|
31
|
+
'lime-circular-progress': true,
|
|
32
|
+
'displays-percentage-colors': this.displayPercentageColors,
|
|
33
|
+
};
|
|
34
|
+
const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
|
|
35
|
+
const value = Math.round(this.value * 10) / 10; // eslint-disable-line no-magic-numbers
|
|
36
|
+
return (index.h("div", { role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, this.renderPrefix(), index.h("span", { class: "value" }, format.abbreviate(value), index.h("span", { class: "suffix" }, this.suffix))));
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
CircularProgress.style = circularProgressCss;
|
|
8
40
|
|
|
9
41
|
/*! *****************************************************************************
|
|
10
42
|
Copyright (c) Microsoft Corporation.
|
|
@@ -474,4 +506,5 @@ const LinearProgress = class {
|
|
|
474
506
|
};
|
|
475
507
|
LinearProgress.style = linearProgressCss;
|
|
476
508
|
|
|
509
|
+
exports.limel_circular_progress = CircularProgress;
|
|
477
510
|
exports.limel_linear_progress = LinearProgress;
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-287e25e0.js');
|
|
6
|
+
|
|
7
|
+
const infoTileCss = "/*\n * This file is imported into every component!\n *\n * Nothing in this file may output any CSS\n * without being explicitly called by outside code.\n */\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n --badge-text-color: var(\n --info-tile-badge-text-color,\n rgb(var(--color-white))\n );\n --badge-background-color: var(\n --info-tile-badge-background-color,\n rgb(var(--color-red-default))\n );\n --circular-progress-text-color: var(\n --info-tile-progress-text-color,\n var(--info-tile-text-color)\n );\n --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n --circular-progress-background-color: var(\n --info-tile-progress-background-color,\n var(--info-tile-background-color)\n );\n --label-min-size: 0.75rem;\n --label-preferred-size: 6cqw;\n --label-max-size: 1rem;\n --value-min-size: 1rem;\n --value-preferred-size: 20cqw;\n --value-max-size: 4rem;\n --suffix-prefix-min-size: 0.75rem;\n --suffix-prefix-preferred-size: 8cqw;\n --suffix-prefix-max-size: 1.5rem;\n --icon-min-size: 2rem;\n --icon-preferred-size: 60cqh;\n --icon-max-size: calc(100cqw - 0.5rem);\n isolation: isolate;\n container-type: size;\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n}\n:host(limel-info-tile) * {\n box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\na {\n all: unset;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n height: 100%;\n width: 100%;\n flex-grow: 1;\n padding: 0.25rem 1rem 0.5rem 1rem;\n border-radius: var(--info-tile-border-radius, 1rem);\n background-color: var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\na.is-clickable {\n transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;\n box-shadow: var(--button-shadow-normal);\n cursor: pointer;\n}\na.is-clickable:hover {\n box-shadow: var(--button-shadow-hovered);\n}\na.is-clickable:active {\n box-shadow: var(--button-shadow-pressed);\n transform: translate3d(0, 0.08rem, 0);\n}\na.is-clickable:focus {\n outline: none;\n}\na.is-clickable:focus-visible {\n outline: none;\n box-shadow: var(--shadow-depth-8-focused);\n}\n\n.icon {\n position: absolute;\n top: 0.5rem;\n right: 0.75rem;\n padding: 0.25rem;\n display: flex;\n justify-content: center;\n color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n border-radius: 0;\n height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n .icon {\n height: min(60%, var(--icon-max-size));\n }\n}\n.has-circular-progress .icon {\n top: unset;\n bottom: 0.5rem;\n --icon-min-size: 1.5rem;\n --icon-preferred-size: 20cqh;\n}\n\n.progress {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n --circular-progress-size: min(\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n}\n\n.label {\n z-index: 1;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n line-height: normal;\n font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n .label {\n font-size: 0.875rem;\n }\n}\n\nlimel-badge {\n position: absolute;\n top: -0.5rem;\n right: -0.5rem;\n}\n\nlimel-linear-progress {\n --lime-primary-color: var(--info-tile-text-color);\n position: absolute;\n inset: auto 0 0 0;\n border-radius: 1rem;\n overflow: hidden;\n}\n\n.value-group {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n display: flex;\n}\n\n.prefix,\n.suffix {\n font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n opacity: 0.7;\n}\n@supports not (container-type: size) {\n .prefix,\n.suffix {\n font-size: 0.75rem;\n }\n}\n\n.prefix {\n align-self: flex-start;\n line-height: normal;\n transform: translateY(40%);\n}\n\n.value {\n transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n transform-origin: left;\n transform: translate3d(0, 0, 0) scale(1);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: bold;\n line-height: normal;\n font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n .value {\n font-size: 2.5rem;\n }\n}\n:host(limel-info-tile[loading]) .value {\n opacity: 0.3;\n transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n .progress {\n top: 0.25rem;\n right: 0.25rem;\n }\n\n a {\n padding: 0.375rem;\n gap: 0.125rem;\n }\n}\n@container (width < 18.75rem) {\n .progress {\n top: 0.5rem;\n right: 0.5rem;\n }\n\n .icon {\n top: 0.25rem;\n right: 0.5rem;\n }\n .has-circular-progress .icon {\n right: 0.25rem;\n bottom: 0.25rem;\n }\n}\n@container (width < 40.5rem) {\n .value {\n --value-preferred-size: 13cqw;\n }\n .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n --value-preferred-size: 20cqw;\n }\n .value.ch-5 {\n --value-preferred-size: 18cqw;\n }\n .value.ch-6 {\n --value-preferred-size: 17cqw;\n }\n .value.ch-7 {\n --value-preferred-size: 16cqw;\n }\n .value.ch-8 {\n --value-preferred-size: 15cqw;\n }\n .value.ch-9 {\n --value-preferred-size: 14cqw;\n }\n}\n@container (height > 8rem) {\n a {\n padding-top: 0.75rem;\n padding-bottom: 1rem;\n }\n}\n@container (height < 8rem) and (width > 8rem) {\n .value {\n --value-preferred-size: 32cqh !important;\n }\n\n .suffix,\n.prefix {\n --suffix-prefix-preferred-size: 16cqh !important;\n }\n}\n@container (height > 18.75rem) {\n .progress,\n.icon {\n position: relative;\n top: unset;\n right: unset;\n }\n\n a {\n align-items: center;\n justify-content: center;\n }\n\n .label {\n text-align: center;\n }\n\n .has-circular-progress .icon {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n --icon-max-size: 3rem;\n }\n}";
|
|
8
|
+
|
|
9
|
+
const InfoTile = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
this.renderPrefix = () => {
|
|
13
|
+
if (this.prefix) {
|
|
14
|
+
return index.h("span", { class: "prefix" }, this.prefix);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
this.renderValue = () => {
|
|
18
|
+
const characterCount = this.value.toString().length;
|
|
19
|
+
if (this.value) {
|
|
20
|
+
return (index.h("span", { class: {
|
|
21
|
+
value: true,
|
|
22
|
+
[`ch-${characterCount}`]: true,
|
|
23
|
+
} }, this.value));
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
this.renderSuffix = () => {
|
|
27
|
+
if (this.suffix) {
|
|
28
|
+
return index.h("span", { class: "suffix" }, this.suffix);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
this.renderIcon = () => {
|
|
32
|
+
if (this.icon) {
|
|
33
|
+
return index.h("limel-icon", { class: "icon", name: this.icon });
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
this.renderProgress = () => {
|
|
37
|
+
var _a, _b;
|
|
38
|
+
if (((_a = this.progress) === null || _a === void 0 ? void 0 : _a.value) || ((_b = this.progress) === null || _b === void 0 ? void 0 : _b.value) === 0) {
|
|
39
|
+
return (index.h("limel-circular-progress", { class: "progress", prefix: this.progress.prefix, value: this.progress.value, suffix: this.progress.suffix, maxValue: this.progress.maxValue, displayPercentageColors: this.progress.displayPercentageColors }));
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
this.renderLabel = () => {
|
|
43
|
+
if (this.label) {
|
|
44
|
+
return index.h("span", { class: "label" }, this.label);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
this.renderNotification = () => {
|
|
48
|
+
if (this.badge) {
|
|
49
|
+
return index.h("limel-badge", { label: this.badge });
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
this.renderSpinner = () => {
|
|
53
|
+
if (this.loading) {
|
|
54
|
+
return index.h("limel-linear-progress", { indeterminate: true });
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
this.value = undefined;
|
|
58
|
+
this.icon = undefined;
|
|
59
|
+
this.label = null;
|
|
60
|
+
this.prefix = undefined;
|
|
61
|
+
this.suffix = undefined;
|
|
62
|
+
this.disabled = false;
|
|
63
|
+
this.badge = undefined;
|
|
64
|
+
this.loading = false;
|
|
65
|
+
this.link = undefined;
|
|
66
|
+
this.progress = undefined;
|
|
67
|
+
}
|
|
68
|
+
render() {
|
|
69
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
70
|
+
const extendedAriaLabel = this.checkProps(this === null || this === void 0 ? void 0 : this.prefix) +
|
|
71
|
+
this.value +
|
|
72
|
+
' ' +
|
|
73
|
+
this.checkProps(this === null || this === void 0 ? void 0 : this.suffix) +
|
|
74
|
+
this.checkProps(this === null || this === void 0 ? void 0 : this.label) +
|
|
75
|
+
'. ' +
|
|
76
|
+
this.checkProps((_a = this === null || this === void 0 ? void 0 : this.progress) === null || _a === void 0 ? void 0 : _a.prefix) +
|
|
77
|
+
this.checkProps((_b = this === null || this === void 0 ? void 0 : this.progress) === null || _b === void 0 ? void 0 : _b.value) +
|
|
78
|
+
this.checkProps((_c = this === null || this === void 0 ? void 0 : this.progress) === null || _c === void 0 ? void 0 : _c.suffix) +
|
|
79
|
+
this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
|
|
80
|
+
const link = !this.disabled ? (_e = this.link) === null || _e === void 0 ? void 0 : _e.href : '#';
|
|
81
|
+
return [
|
|
82
|
+
index.h("a", { title: (_f = this.link) === null || _f === void 0 ? void 0 : _f.title, href: link, target: (_g = this.link) === null || _g === void 0 ? void 0 : _g.target, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, class: {
|
|
83
|
+
'is-clickable': !!((_h = this.link) === null || _h === void 0 ? void 0 : _h.href) && !this.disabled,
|
|
84
|
+
'has-circular-progress': !!((_j = this.progress) === null || _j === void 0 ? void 0 : _j.value) || ((_k = this.progress) === null || _k === void 0 ? void 0 : _k.value) === 0,
|
|
85
|
+
} }, this.renderIcon(), this.renderProgress(), index.h("div", { class: "value-group" }, this.renderPrefix(), index.h("div", { class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel()),
|
|
86
|
+
this.renderNotification(),
|
|
87
|
+
];
|
|
88
|
+
}
|
|
89
|
+
checkProps(propValue) {
|
|
90
|
+
return !propValue ? '' : propValue + ' ';
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
InfoTile.style = infoTileCss;
|
|
94
|
+
|
|
95
|
+
exports.limel_info_tile = InfoTile;
|
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([["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-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":[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",[[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":[513],"format":[513],"language":[513],"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":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["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],"linkTitle":[513,"link-title"],"disabled":[516],"href":[513],"target":[513],"badge":[520]}]]],["limel-
|
|
17
|
+
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-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":[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",[[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":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[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]}]]],["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-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["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],"linkTitle":[513,"link-title"],"disabled":[516],"href":[513],"target":[513],"badge":[520]}]]],["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-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["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-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-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["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-icon-button.cjs",[[1,"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-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-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-button_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-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["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":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["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":[2],"indeterminate":[4]}]]],["limel-menu-list.cjs",[[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-portal.cjs",[[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["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-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["limel-list_2.cjs",[[1,"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-popover_4.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-popover-surface",{"contentCollection":[16]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
"./components/header/header.js",
|
|
25
25
|
"./components/icon/icon.js",
|
|
26
26
|
"./components/icon-button/icon-button.js",
|
|
27
|
+
"./components/info-tile/info-tile.js",
|
|
27
28
|
"./components/input-field/input-field.js",
|
|
28
29
|
"./components/linear-progress/linear-progress.js",
|
|
29
30
|
"./components/list/list.js",
|
|
@@ -0,0 +1,310 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* This file is imported into every component!
|
|
3
|
+
*
|
|
4
|
+
* Nothing in this file may output any CSS
|
|
5
|
+
* without being explicitly called by outside code.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`
|
|
9
|
+
* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`
|
|
10
|
+
* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`
|
|
11
|
+
* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`
|
|
12
|
+
* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`
|
|
13
|
+
* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`
|
|
14
|
+
* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.
|
|
15
|
+
* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.
|
|
16
|
+
* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.
|
|
17
|
+
* @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.
|
|
18
|
+
* @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.
|
|
19
|
+
*/
|
|
20
|
+
:host(limel-info-tile) {
|
|
21
|
+
--badge-text-color: var(
|
|
22
|
+
--info-tile-badge-text-color,
|
|
23
|
+
rgb(var(--color-white))
|
|
24
|
+
);
|
|
25
|
+
--badge-background-color: var(
|
|
26
|
+
--info-tile-badge-background-color,
|
|
27
|
+
rgb(var(--color-red-default))
|
|
28
|
+
);
|
|
29
|
+
--circular-progress-text-color: var(
|
|
30
|
+
--info-tile-progress-text-color,
|
|
31
|
+
var(--info-tile-text-color)
|
|
32
|
+
);
|
|
33
|
+
--circular-progress-suffix-color: var(--info-tile-progress-suffix-color);
|
|
34
|
+
--circular-progress-prefix-color: var(--info-tile-progress-prefix-color);
|
|
35
|
+
--circular-progress-track-color: rgb(var(--contrast-800), 0.3);
|
|
36
|
+
--circular-progress-fill-color: var(--info-tile-progress-fill-color);
|
|
37
|
+
--circular-progress-background-color: var(
|
|
38
|
+
--info-tile-progress-background-color,
|
|
39
|
+
var(--info-tile-background-color)
|
|
40
|
+
);
|
|
41
|
+
--label-min-size: 0.75rem;
|
|
42
|
+
--label-preferred-size: 6cqw;
|
|
43
|
+
--label-max-size: 1rem;
|
|
44
|
+
--value-min-size: 1rem;
|
|
45
|
+
--value-preferred-size: 20cqw;
|
|
46
|
+
--value-max-size: 4rem;
|
|
47
|
+
--suffix-prefix-min-size: 0.75rem;
|
|
48
|
+
--suffix-prefix-preferred-size: 8cqw;
|
|
49
|
+
--suffix-prefix-max-size: 1.5rem;
|
|
50
|
+
--icon-min-size: 2rem;
|
|
51
|
+
--icon-preferred-size: 60cqh;
|
|
52
|
+
--icon-max-size: calc(100cqw - 0.5rem);
|
|
53
|
+
isolation: isolate;
|
|
54
|
+
container-type: size;
|
|
55
|
+
position: relative;
|
|
56
|
+
display: flex;
|
|
57
|
+
width: 100%;
|
|
58
|
+
height: 100%;
|
|
59
|
+
}
|
|
60
|
+
:host(limel-info-tile) * {
|
|
61
|
+
box-sizing: border-box;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
:host(limel-info-tile[disabled]) a {
|
|
65
|
+
opacity: 0.5;
|
|
66
|
+
cursor: not-allowed;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
a {
|
|
70
|
+
all: unset;
|
|
71
|
+
overflow: hidden;
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
justify-content: flex-end;
|
|
75
|
+
align-items: flex-start;
|
|
76
|
+
height: 100%;
|
|
77
|
+
width: 100%;
|
|
78
|
+
flex-grow: 1;
|
|
79
|
+
padding: 0.25rem 1rem 0.5rem 1rem;
|
|
80
|
+
border-radius: var(--info-tile-border-radius, 1rem);
|
|
81
|
+
background-color: var(--info-tile-background-color, rgb(var(--contrast-100)));
|
|
82
|
+
}
|
|
83
|
+
a.is-clickable {
|
|
84
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
|
|
85
|
+
box-shadow: var(--button-shadow-normal);
|
|
86
|
+
cursor: pointer;
|
|
87
|
+
}
|
|
88
|
+
a.is-clickable:hover {
|
|
89
|
+
box-shadow: var(--button-shadow-hovered);
|
|
90
|
+
}
|
|
91
|
+
a.is-clickable:active {
|
|
92
|
+
box-shadow: var(--button-shadow-pressed);
|
|
93
|
+
transform: translate3d(0, 0.08rem, 0);
|
|
94
|
+
}
|
|
95
|
+
a.is-clickable:focus {
|
|
96
|
+
outline: none;
|
|
97
|
+
}
|
|
98
|
+
a.is-clickable:focus-visible {
|
|
99
|
+
outline: none;
|
|
100
|
+
box-shadow: var(--shadow-depth-8-focused);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.icon {
|
|
104
|
+
position: absolute;
|
|
105
|
+
top: 0.5rem;
|
|
106
|
+
right: 0.75rem;
|
|
107
|
+
padding: 0.25rem;
|
|
108
|
+
display: flex;
|
|
109
|
+
justify-content: center;
|
|
110
|
+
color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));
|
|
111
|
+
border-radius: 0;
|
|
112
|
+
height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));
|
|
113
|
+
}
|
|
114
|
+
@supports not (container-type: size) {
|
|
115
|
+
.icon {
|
|
116
|
+
height: min(60%, var(--icon-max-size));
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
.has-circular-progress .icon {
|
|
120
|
+
top: unset;
|
|
121
|
+
bottom: 0.5rem;
|
|
122
|
+
--icon-min-size: 1.5rem;
|
|
123
|
+
--icon-preferred-size: 20cqh;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.progress {
|
|
127
|
+
position: absolute;
|
|
128
|
+
top: 0.75rem;
|
|
129
|
+
right: 0.75rem;
|
|
130
|
+
--circular-progress-size: min(
|
|
131
|
+
var(--icon-preferred-size),
|
|
132
|
+
var(--icon-max-size)
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.label {
|
|
137
|
+
z-index: 1;
|
|
138
|
+
color: var(--info-tile-text-color, rgb(var(--contrast-1100)));
|
|
139
|
+
line-height: normal;
|
|
140
|
+
font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));
|
|
141
|
+
}
|
|
142
|
+
@supports not (container-type: size) {
|
|
143
|
+
.label {
|
|
144
|
+
font-size: 0.875rem;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
limel-badge {
|
|
149
|
+
position: absolute;
|
|
150
|
+
top: -0.5rem;
|
|
151
|
+
right: -0.5rem;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
limel-linear-progress {
|
|
155
|
+
--lime-primary-color: var(--info-tile-text-color);
|
|
156
|
+
position: absolute;
|
|
157
|
+
inset: auto 0 0 0;
|
|
158
|
+
border-radius: 1rem;
|
|
159
|
+
overflow: hidden;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.value-group {
|
|
163
|
+
position: relative;
|
|
164
|
+
z-index: 1;
|
|
165
|
+
display: flex;
|
|
166
|
+
flex-direction: column;
|
|
167
|
+
color: var(--info-tile-text-color, rgb(var(--contrast-1100)));
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.value-and-suffix,
|
|
171
|
+
.label {
|
|
172
|
+
text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.value-and-suffix {
|
|
176
|
+
display: flex;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.prefix,
|
|
180
|
+
.suffix {
|
|
181
|
+
font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));
|
|
182
|
+
opacity: 0.7;
|
|
183
|
+
}
|
|
184
|
+
@supports not (container-type: size) {
|
|
185
|
+
.prefix,
|
|
186
|
+
.suffix {
|
|
187
|
+
font-size: 0.75rem;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.prefix {
|
|
192
|
+
align-self: flex-start;
|
|
193
|
+
line-height: normal;
|
|
194
|
+
transform: translateY(40%);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.value {
|
|
198
|
+
transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);
|
|
199
|
+
transform-origin: left;
|
|
200
|
+
transform: translate3d(0, 0, 0) scale(1);
|
|
201
|
+
overflow: hidden;
|
|
202
|
+
white-space: nowrap;
|
|
203
|
+
text-overflow: ellipsis;
|
|
204
|
+
font-weight: bold;
|
|
205
|
+
line-height: normal;
|
|
206
|
+
font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));
|
|
207
|
+
}
|
|
208
|
+
@supports not (container-type: size) {
|
|
209
|
+
.value {
|
|
210
|
+
font-size: 2.5rem;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
:host(limel-info-tile[loading]) .value {
|
|
214
|
+
opacity: 0.3;
|
|
215
|
+
transform: translate3d(0, 0, 0) scale(0.9);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.suffix {
|
|
219
|
+
transform: translateY(10%);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
@container (width < 8rem) {
|
|
223
|
+
.progress {
|
|
224
|
+
top: 0.25rem;
|
|
225
|
+
right: 0.25rem;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
a {
|
|
229
|
+
padding: 0.375rem;
|
|
230
|
+
gap: 0.125rem;
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
@container (width < 18.75rem) {
|
|
234
|
+
.progress {
|
|
235
|
+
top: 0.5rem;
|
|
236
|
+
right: 0.5rem;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.icon {
|
|
240
|
+
top: 0.25rem;
|
|
241
|
+
right: 0.5rem;
|
|
242
|
+
}
|
|
243
|
+
.has-circular-progress .icon {
|
|
244
|
+
right: 0.25rem;
|
|
245
|
+
bottom: 0.25rem;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
@container (width < 40.5rem) {
|
|
249
|
+
.value {
|
|
250
|
+
--value-preferred-size: 13cqw;
|
|
251
|
+
}
|
|
252
|
+
.value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {
|
|
253
|
+
--value-preferred-size: 20cqw;
|
|
254
|
+
}
|
|
255
|
+
.value.ch-5 {
|
|
256
|
+
--value-preferred-size: 18cqw;
|
|
257
|
+
}
|
|
258
|
+
.value.ch-6 {
|
|
259
|
+
--value-preferred-size: 17cqw;
|
|
260
|
+
}
|
|
261
|
+
.value.ch-7 {
|
|
262
|
+
--value-preferred-size: 16cqw;
|
|
263
|
+
}
|
|
264
|
+
.value.ch-8 {
|
|
265
|
+
--value-preferred-size: 15cqw;
|
|
266
|
+
}
|
|
267
|
+
.value.ch-9 {
|
|
268
|
+
--value-preferred-size: 14cqw;
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
@container (height > 8rem) {
|
|
272
|
+
a {
|
|
273
|
+
padding-top: 0.75rem;
|
|
274
|
+
padding-bottom: 1rem;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
@container (height < 8rem) and (width > 8rem) {
|
|
278
|
+
.value {
|
|
279
|
+
--value-preferred-size: 32cqh !important;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.suffix,
|
|
283
|
+
.prefix {
|
|
284
|
+
--suffix-prefix-preferred-size: 16cqh !important;
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
@container (height > 18.75rem) {
|
|
288
|
+
.progress,
|
|
289
|
+
.icon {
|
|
290
|
+
position: relative;
|
|
291
|
+
top: unset;
|
|
292
|
+
right: unset;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
a {
|
|
296
|
+
align-items: center;
|
|
297
|
+
justify-content: center;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.label {
|
|
301
|
+
text-align: center;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.has-circular-progress .icon {
|
|
305
|
+
position: absolute;
|
|
306
|
+
top: 0.5rem;
|
|
307
|
+
right: 0.5rem;
|
|
308
|
+
--icon-max-size: 3rem;
|
|
309
|
+
}
|
|
310
|
+
}
|