@limetech/lime-elements 36.3.0-next.17 → 36.3.0-next.18
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/README.md +1 -1
- package/dist/cjs/limel-info-tile.cjs.entry.js +3 -0
- package/dist/collection/components/info-tile/info-tile.js +3 -0
- package/dist/esm/limel-info-tile.entry.js +3 -0
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-81df4a1f.entry.js → p-e479f165.entry.js} +1 -1
- package/package.json +9 -10
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ This package includes basic components like buttons, loading-spinners, etcetera.
|
|
|
4
4
|
|
|
5
5
|
To install, run `npm install @limetech/lime-elements`
|
|
6
6
|
|
|
7
|
-
[](https://www.npmjs.com/package/@limetech/lime-elements) [](https://github.com/semantic-release/semantic-release)
|
|
7
|
+
[](https://www.npmjs.com/package/@limetech/lime-elements) [](https://github.com/semantic-release/semantic-release)
|
|
8
8
|
|
|
9
9
|
## Requirements
|
|
10
10
|
|
|
@@ -17,6 +17,9 @@ const InfoTile = class {
|
|
|
17
17
|
this.renderValue = () => {
|
|
18
18
|
var _a;
|
|
19
19
|
const characterCount = ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString().length;
|
|
20
|
+
if (!this.value && this.loading) {
|
|
21
|
+
return index.h("span", { class: "value" }, "\u00B7\u00B7\u00B7");
|
|
22
|
+
}
|
|
20
23
|
if (this.value) {
|
|
21
24
|
return (index.h("span", { class: {
|
|
22
25
|
value: true,
|
|
@@ -24,6 +24,9 @@ export class InfoTile {
|
|
|
24
24
|
this.renderValue = () => {
|
|
25
25
|
var _a;
|
|
26
26
|
const characterCount = ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString().length;
|
|
27
|
+
if (!this.value && this.loading) {
|
|
28
|
+
return h("span", { class: "value" }, "\u00B7\u00B7\u00B7");
|
|
29
|
+
}
|
|
27
30
|
if (this.value) {
|
|
28
31
|
return (h("span", { class: {
|
|
29
32
|
value: true,
|
|
@@ -13,6 +13,9 @@ const InfoTile = class {
|
|
|
13
13
|
this.renderValue = () => {
|
|
14
14
|
var _a;
|
|
15
15
|
const characterCount = ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString().length;
|
|
16
|
+
if (!this.value && this.loading) {
|
|
17
|
+
return h("span", { class: "value" }, "\u00B7\u00B7\u00B7");
|
|
18
|
+
}
|
|
16
19
|
if (this.value) {
|
|
17
20
|
return (h("span", { class: {
|
|
18
21
|
value: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-d4e788e1.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),e(i)})().then((e=>l([["p-0bf916a0",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-cc9f89a9",[[1,"limel-dock",{dockItems:[16],dockFooterItems:[16],accessibleLabel:[513,"accessible-label"],expanded:[516],allowResize:[516,"allow-resize"],mobileBreakPoint:[514,"mobile-break-point"],useMobileLayout:[32]}]]],["p-cad7cda1",[[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]}]]],["p-3a7b55ce",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-7fb5f651",[[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]}]]],["p-52e18d94",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-
|
|
1
|
+
import{p as e,b as l}from"./p-d4e788e1.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),e(i)})().then((e=>l([["p-0bf916a0",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-cc9f89a9",[[1,"limel-dock",{dockItems:[16],dockFooterItems:[16],accessibleLabel:[513,"accessible-label"],expanded:[516],allowResize:[516,"allow-resize"],mobileBreakPoint:[514,"mobile-break-point"],useMobileLayout:[32]}]]],["p-cad7cda1",[[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]}]]],["p-3a7b55ce",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-7fb5f651",[[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]}]]],["p-52e18d94",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-e479f165",[[1,"limel-info-tile",{value:[520],icon:[1],label:[513],prefix:[513],suffix:[513],disabled:[516],badge:[520],loading:[516],link:[16],progress:[16]}]]],["p-c234a991",[[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]}]]],["p-a0c78744",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[1],show:[64]}]]],["p-3fda3473",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-d1187867",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-5393213b",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[513],actions:[16]}]]],["p-b079fc71",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-35a6ab13",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-2f2ea041",[[1,"limel-shortcut",{icon:[513],label:[513],disabled:[516],badge:[520],link:[16]}]]],["p-6784c5c3",[[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]}]]],["p-bf3d6097",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-405207fa",[[1,"limel-code-editor",{value:[1],language:[1],readonly:[4],lineNumbers:[4,"line-numbers"],fold:[4],lint:[4],colorScheme:[1,"color-scheme"],random:[32]}]]],["p-6c38b505",[[1,"limel-config",{config:[16]}]]],["p-5338663b",[[1,"limel-flex-container",{direction:[513],justify:[513],align:[513],reverse:[516]}]]],["p-dcf88b3e",[[1,"limel-form",{schema:[16],value:[16],disabled:[4],propsFactory:[16],transformErrors:[16],errors:[16]}]]],["p-82cd7bb6",[[1,"limel-grid"]]],["p-8c4e3b46",[[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]}]]],["p-c6e913a4",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],value:[516],fieldId:[32]}]]],["p-61b3352f",[[0,"limel-dock-button",{item:[16],expanded:[516],useMobileLayout:[516,"use-mobile-layout"],isOpen:[32]}]]],["p-5409b92f",[[1,"limel-color-picker-palette",{value:[513],label:[513],helperText:[513,"helper-text"],required:[516]}]]],["p-95fd48d0",[[1,"limel-menu-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}]]],["p-f9958763",[[1,"limel-menu",{items:[16],disabled:[516],openDirection:[513,"open-direction"],open:[1540],badgeIcons:[516,"badge-icons"],gridLayout:[516,"grid-layout"]}]]],["p-55c8cb64",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-95cefb5f",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"]}]]],["p-cfaa685f",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4]}]]],["p-eed2a202",[[1,"limel-checkbox",{disabled:[516],readonly:[516],label:[513],helperText:[513,"helper-text"],checked:[516],indeterminate:[516],required:[516],modified:[32]}]]],["p-aec225e5",[[1,"limel-flatpickr-adapter",{value:[16],type:[1],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[1]}]]],["p-004aad18",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516],loadingFailed:[516,"loading-failed"],justLoaded:[32]}]]],["p-ff340a70",[[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]}]]],["p-05d88196",[[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]}]]],["p-15c3ec8e",[[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]}]]],["p-934456bc",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516]}]]],["p-a8d38277",[[1,"limel-spinner",{size:[513],limeBranded:[4,"lime-branded"]}]]],["p-91604294",[[1,"limel-badge",{label:[520]}]]],["p-90961075",[[1,"limel-portal",{openDirection:[1,"open-direction"],position:[1],containerId:[1,"container-id"],containerStyle:[16],parent:[16],inheritParentWidth:[4,"inherit-parent-width"],visible:[4]}]]],["p-93ad8b90",[[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]}]]],["p-029360c8",[[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]}]]],["p-75d01713",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]]],e)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as n,h as e}from"./p-d4e788e1.js";const r=class{constructor(r){n(this,r),this.renderPrefix=()=>{if(this.prefix)return e("span",{class:"prefix"},this.prefix)},this.renderValue=()=>{var n;const r=(null!==(n=this.value)&&void 0!==n?n:"").toString().length;if(this.value)return e("span",{class:{value:!0,[`ch-${r}`]:!0}},this.value)},this.renderSuffix=()=>{if(this.suffix)return e("span",{class:"suffix"},this.suffix)},this.renderIcon=()=>{if(this.icon)return e("limel-icon",{class:"icon",name:this.icon})},this.renderProgress=()=>{var n,r;if((null===(n=this.progress)||void 0===n?void 0:n.value)||0===(null===(r=this.progress)||void 0===r?void 0:r.value))return e("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})},this.renderLabel=()=>{if(this.label)return e("span",{class:"label"},this.label)},this.renderNotification=()=>{if(this.badge)return e("limel-badge",{label:this.badge})},this.renderSpinner=()=>{if(this.loading)return e("limel-linear-progress",{indeterminate:!0})},this.value=void 0,this.icon=void 0,this.label=null,this.prefix=void 0,this.suffix=void 0,this.disabled=!1,this.badge=void 0,this.loading=!1,this.link=void 0,this.progress=void 0}render(){var n,r,i,o,t,s,l,a,c,f;const d=this.checkProps(null==this?void 0:this.prefix)+this.value+" "+this.checkProps(null==this?void 0:this.suffix)+this.checkProps(null==this?void 0:this.label)+". "+this.checkProps(null===(n=null==this?void 0:this.progress)||void 0===n?void 0:n.prefix)+this.checkProps(null===(r=null==this?void 0:this.progress)||void 0===r?void 0:r.value)+this.checkProps(null===(i=null==this?void 0:this.progress)||void 0===i?void 0:i.suffix)+this.checkProps(null===(o=null==this?void 0:this.link)||void 0===o?void 0:o.title),u=this.disabled?"#":null===(t=this.link)||void 0===t?void 0:t.href;return[e("a",{title:null===(s=this.link)||void 0===s?void 0:s.title,href:u,target:null===(l=this.link)||void 0===l?void 0:l.target,tabindex:"0","aria-label":d,"aria-disabled":this.disabled,class:{"is-clickable":!!(null===(a=this.link)||void 0===a?void 0:a.href)&&!this.disabled,"has-circular-progress":!!(null===(c=this.progress)||void 0===c?void 0:c.value)||0===(null===(f=this.progress)||void 0===f?void 0:f.value)}},this.renderIcon(),this.renderProgress(),e("div",{class:"value-group"},this.renderPrefix(),e("div",{class:"value-and-suffix"},this.renderValue(),this.renderSuffix()),this.renderSpinner()),this.renderLabel()),this.renderNotification()]}checkProps(n){return n?n+" ":""}};r.style="/*\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, var(--lime-elevated-surface-background-color));\n}\na.is-clickable {\n transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;\n color: var(--mdc-theme-on-surface);\n background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n box-shadow: var(--button-shadow-normal);\n cursor: pointer;\n}\na.is-clickable:hover {\n color: var(--mdc-theme-on-surface);\n background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\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 z-index: 1;\n position: absolute;\n top: 0.5rem;\n right: 0.75rem;\n padding: 0.25rem;\n aspect-ratio: 1/1;\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 width: max(10%, 3rem);\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@supports not (container-type: size) {\n .progress {\n --circular-progress-size: initial;\n }\n}\n\n.label {\n z-index: 1;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n line-height: 1.2;\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: 1.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}";export{r as limel_info_tile}
|
|
1
|
+
import{r as n,h as e}from"./p-d4e788e1.js";const r=class{constructor(r){n(this,r),this.renderPrefix=()=>{if(this.prefix)return e("span",{class:"prefix"},this.prefix)},this.renderValue=()=>{var n;const r=(null!==(n=this.value)&&void 0!==n?n:"").toString().length;return!this.value&&this.loading?e("span",{class:"value"},"···"):this.value?e("span",{class:{value:!0,[`ch-${r}`]:!0}},this.value):void 0},this.renderSuffix=()=>{if(this.suffix)return e("span",{class:"suffix"},this.suffix)},this.renderIcon=()=>{if(this.icon)return e("limel-icon",{class:"icon",name:this.icon})},this.renderProgress=()=>{var n,r;if((null===(n=this.progress)||void 0===n?void 0:n.value)||0===(null===(r=this.progress)||void 0===r?void 0:r.value))return e("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})},this.renderLabel=()=>{if(this.label)return e("span",{class:"label"},this.label)},this.renderNotification=()=>{if(this.badge)return e("limel-badge",{label:this.badge})},this.renderSpinner=()=>{if(this.loading)return e("limel-linear-progress",{indeterminate:!0})},this.value=void 0,this.icon=void 0,this.label=null,this.prefix=void 0,this.suffix=void 0,this.disabled=!1,this.badge=void 0,this.loading=!1,this.link=void 0,this.progress=void 0}render(){var n,r,i,o,t,s,l,a,c,f;const d=this.checkProps(null==this?void 0:this.prefix)+this.value+" "+this.checkProps(null==this?void 0:this.suffix)+this.checkProps(null==this?void 0:this.label)+". "+this.checkProps(null===(n=null==this?void 0:this.progress)||void 0===n?void 0:n.prefix)+this.checkProps(null===(r=null==this?void 0:this.progress)||void 0===r?void 0:r.value)+this.checkProps(null===(i=null==this?void 0:this.progress)||void 0===i?void 0:i.suffix)+this.checkProps(null===(o=null==this?void 0:this.link)||void 0===o?void 0:o.title),u=this.disabled?"#":null===(t=this.link)||void 0===t?void 0:t.href;return[e("a",{title:null===(s=this.link)||void 0===s?void 0:s.title,href:u,target:null===(l=this.link)||void 0===l?void 0:l.target,tabindex:"0","aria-label":d,"aria-disabled":this.disabled,class:{"is-clickable":!!(null===(a=this.link)||void 0===a?void 0:a.href)&&!this.disabled,"has-circular-progress":!!(null===(c=this.progress)||void 0===c?void 0:c.value)||0===(null===(f=this.progress)||void 0===f?void 0:f.value)}},this.renderIcon(),this.renderProgress(),e("div",{class:"value-group"},this.renderPrefix(),e("div",{class:"value-and-suffix"},this.renderValue(),this.renderSuffix()),this.renderSpinner()),this.renderLabel()),this.renderNotification()]}checkProps(n){return n?n+" ":""}};r.style="/*\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, var(--lime-elevated-surface-background-color));\n}\na.is-clickable {\n transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;\n color: var(--mdc-theme-on-surface);\n background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n box-shadow: var(--button-shadow-normal);\n cursor: pointer;\n}\na.is-clickable:hover {\n color: var(--mdc-theme-on-surface);\n background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\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 z-index: 1;\n position: absolute;\n top: 0.5rem;\n right: 0.75rem;\n padding: 0.25rem;\n aspect-ratio: 1/1;\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 width: max(10%, 3rem);\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@supports not (container-type: size) {\n .progress {\n --circular-progress-size: initial;\n }\n}\n\n.label {\n z-index: 1;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n line-height: 1.2;\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: 1.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}";export{r as limel_info_tile}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@limetech/lime-elements",
|
|
3
|
-
"version": "36.3.0-next.
|
|
3
|
+
"version": "36.3.0-next.18",
|
|
4
4
|
"description": "Lime Elements",
|
|
5
5
|
"author": "Lime Technologies",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"generate": "stencil generate"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@commitlint/config-conventional": "^17.4.
|
|
43
|
+
"@commitlint/config-conventional": "^17.4.3",
|
|
44
44
|
"@popperjs/core": "^2.11.6",
|
|
45
45
|
"@rjsf/core": "^2.4.2",
|
|
46
46
|
"@stencil/core": "^2.19.2",
|
|
@@ -50,20 +50,19 @@
|
|
|
50
50
|
"@types/jest": "^27.4.0",
|
|
51
51
|
"@types/lodash-es": "^4.17.4",
|
|
52
52
|
"@types/puppeteer": "^7.0.4",
|
|
53
|
-
"@types/react": "^18.0.
|
|
53
|
+
"@types/react": "^18.0.28",
|
|
54
54
|
"@types/tabulator-tables": "^4.9.4",
|
|
55
|
-
"@typescript-eslint/eslint-plugin": "^5.
|
|
56
|
-
"@typescript-eslint/parser": "^5.
|
|
55
|
+
"@typescript-eslint/eslint-plugin": "^5.52.0",
|
|
56
|
+
"@typescript-eslint/parser": "^5.52.0",
|
|
57
57
|
"ajv": "^6.12.6",
|
|
58
58
|
"awesome-debounce-promise": "^2.1.0",
|
|
59
59
|
"codemirror": "^5.65.9",
|
|
60
60
|
"cross-env": "^7.0.3",
|
|
61
|
-
"cz-conventional-changelog": "^3.3.0",
|
|
62
61
|
"dayjs": "^1.11.7",
|
|
63
|
-
"eslint": "^8.
|
|
62
|
+
"eslint": "^8.34.0",
|
|
64
63
|
"eslint-config-prettier": "^8.6.0",
|
|
65
64
|
"eslint-plugin-ban": "^1.6.0",
|
|
66
|
-
"eslint-plugin-jsdoc": "^
|
|
65
|
+
"eslint-plugin-jsdoc": "^40.0.0",
|
|
67
66
|
"eslint-plugin-prefer-arrow": "^1.2.3",
|
|
68
67
|
"eslint-plugin-prettier": "^4.2.1",
|
|
69
68
|
"eslint-plugin-react": "^7.32.2",
|
|
@@ -79,8 +78,8 @@
|
|
|
79
78
|
"material-components-web": "^13.0.0",
|
|
80
79
|
"moment": "^2.29.4",
|
|
81
80
|
"number-abbreviate": "^2.0.0",
|
|
82
|
-
"prettier": "^2.8.
|
|
83
|
-
"puppeteer": "^19.
|
|
81
|
+
"prettier": "^2.8.4",
|
|
82
|
+
"puppeteer": "^19.7.0",
|
|
84
83
|
"react": "^18.2.0",
|
|
85
84
|
"react-dom": "^18.2.0",
|
|
86
85
|
"react-shadow-dom-retarget-events": "^1.1.0",
|