@limetech/lime-elements 36.3.0-next.30 → 36.3.0-next.31
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/limel-info-tile.cjs.entry.js +1 -1
- package/dist/cjs/limel-shortcut.cjs.entry.js +1 -1
- package/dist/collection/components/info-tile/info-tile.css +2 -2
- package/dist/collection/components/shortcut/shortcut.css +2 -2
- package/dist/esm/limel-info-tile.entry.js +1 -1
- package/dist/esm/limel-shortcut.entry.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-2f2ea041.entry.js → p-c822e8e5.entry.js} +1 -1
- package/dist/lime-elements/{p-404aca86.entry.js → p-ebbca880.entry.js} +1 -1
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-287e25e0.js');
|
|
6
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, 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.
|
|
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, 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.25rem;\n right: -0.25rem;\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 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 .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 .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 a {\n align-items: center;\n justify-content: center;\n }\n .label {\n text-align: center;\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
8
|
|
|
9
9
|
const InfoTile = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-287e25e0.js');
|
|
6
6
|
|
|
7
|
-
const shortcutCss = ":host(limel-shortcut){--badge-text-color:var(\n --shortcut-badge-text-color,\n rgb(var(--color-white))\n );--badge-background-color:var(\n --shortcut-badge-background-color,\n rgb(var(--color-red-default))\n );position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:0.0625rem}:host(limel-shortcut) *{box-sizing:border-box}:host(limel-shortcut[disabled]) a{opacity:0.5;box-shadow:unset;cursor:not-allowed}a{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;color:var(--mdc-theme-on-surface);background-color:var(--shortcut-background-color, var(--lime-elevated-surface-background-color));box-shadow:var(--button-shadow-normal);cursor:pointer;text-align:center;height:calc(100% - 1rem);width:calc(100% - 1rem);padding:0.5rem;border-radius:var(--shortcut-border-radius, 1rem)}a:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}a:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}a:focus{outline:none}a:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-icon{display:flex;height:100%;width:100%;justify-content:center;color:var(--shortcut-icon-color, rgb(var(--contrast-1000)));border-radius:var(--shortcut-border-radius, 1rem)}span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;color:var(--shortcut-label-color, rgb(var(--contrast-1100)));font-size:0.75rem;text-align:center}limel-badge{position:absolute;top:-0.
|
|
7
|
+
const shortcutCss = ":host(limel-shortcut){--badge-text-color:var(\n --shortcut-badge-text-color,\n rgb(var(--color-white))\n );--badge-background-color:var(\n --shortcut-badge-background-color,\n rgb(var(--color-red-default))\n );position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:0.0625rem}:host(limel-shortcut) *{box-sizing:border-box}:host(limel-shortcut[disabled]) a{opacity:0.5;box-shadow:unset;cursor:not-allowed}a{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;color:var(--mdc-theme-on-surface);background-color:var(--shortcut-background-color, var(--lime-elevated-surface-background-color));box-shadow:var(--button-shadow-normal);cursor:pointer;text-align:center;height:calc(100% - 1rem);width:calc(100% - 1rem);padding:0.5rem;border-radius:var(--shortcut-border-radius, 1rem)}a:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}a:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}a:focus{outline:none}a:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-icon{display:flex;height:100%;width:100%;justify-content:center;color:var(--shortcut-icon-color, rgb(var(--contrast-1000)));border-radius:var(--shortcut-border-radius, 1rem)}span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;color:var(--shortcut-label-color, rgb(var(--contrast-1100)));font-size:0.75rem;text-align:center}limel-badge{position:absolute;top:-0.25rem;right:0.125rem}";
|
|
8
8
|
|
|
9
9
|
const Shortcut = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-cdfd351d.js';
|
|
2
2
|
|
|
3
|
-
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, 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.
|
|
3
|
+
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, 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.25rem;\n right: -0.25rem;\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 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 .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 .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 a {\n align-items: center;\n justify-content: center;\n }\n .label {\n text-align: center;\n }\n .has-circular-progress .icon {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n --icon-max-size: 3rem;\n }\n}";
|
|
4
4
|
|
|
5
5
|
const InfoTile = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-cdfd351d.js';
|
|
2
2
|
|
|
3
|
-
const shortcutCss = ":host(limel-shortcut){--badge-text-color:var(\n --shortcut-badge-text-color,\n rgb(var(--color-white))\n );--badge-background-color:var(\n --shortcut-badge-background-color,\n rgb(var(--color-red-default))\n );position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:0.0625rem}:host(limel-shortcut) *{box-sizing:border-box}:host(limel-shortcut[disabled]) a{opacity:0.5;box-shadow:unset;cursor:not-allowed}a{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;color:var(--mdc-theme-on-surface);background-color:var(--shortcut-background-color, var(--lime-elevated-surface-background-color));box-shadow:var(--button-shadow-normal);cursor:pointer;text-align:center;height:calc(100% - 1rem);width:calc(100% - 1rem);padding:0.5rem;border-radius:var(--shortcut-border-radius, 1rem)}a:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}a:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}a:focus{outline:none}a:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-icon{display:flex;height:100%;width:100%;justify-content:center;color:var(--shortcut-icon-color, rgb(var(--contrast-1000)));border-radius:var(--shortcut-border-radius, 1rem)}span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;color:var(--shortcut-label-color, rgb(var(--contrast-1100)));font-size:0.75rem;text-align:center}limel-badge{position:absolute;top:-0.
|
|
3
|
+
const shortcutCss = ":host(limel-shortcut){--badge-text-color:var(\n --shortcut-badge-text-color,\n rgb(var(--color-white))\n );--badge-background-color:var(\n --shortcut-badge-background-color,\n rgb(var(--color-red-default))\n );position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:0.0625rem}:host(limel-shortcut) *{box-sizing:border-box}:host(limel-shortcut[disabled]) a{opacity:0.5;box-shadow:unset;cursor:not-allowed}a{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;color:var(--mdc-theme-on-surface);background-color:var(--shortcut-background-color, var(--lime-elevated-surface-background-color));box-shadow:var(--button-shadow-normal);cursor:pointer;text-align:center;height:calc(100% - 1rem);width:calc(100% - 1rem);padding:0.5rem;border-radius:var(--shortcut-border-radius, 1rem)}a:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}a:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}a:focus{outline:none}a:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-icon{display:flex;height:100%;width:100%;justify-content:center;color:var(--shortcut-icon-color, rgb(var(--contrast-1000)));border-radius:var(--shortcut-border-radius, 1rem)}span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;color:var(--shortcut-label-color, rgb(var(--contrast-1100)));font-size:0.75rem;text-align:center}limel-badge{position:absolute;top:-0.25rem;right:0.125rem}";
|
|
4
4
|
|
|
5
5
|
const Shortcut = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -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-98caf010",[[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-3a7b55ce",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["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-b40f37d7",[[1,"limel-date-picker",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],required:[516],value:[16],type:[513],format:[513],language:[513],formatter:[16],formattedValue:[32],internalFormat:[32],showPortal:[32]}]]],["p-4620a38e",[[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-98caf010",[[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-3a7b55ce",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["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-b40f37d7",[[1,"limel-date-picker",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],required:[516],value:[16],type:[513],format:[513],language:[513],formatter:[16],formattedValue:[32],internalFormat:[32],showPortal:[32]}]]],["p-4620a38e",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-ebbca880",[[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-878b61cd",[[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-d3222d6c",[[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-cc3529bb",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-35a6ab13",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-c822e8e5",[[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-c6c0d63c",[[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-071e8438",[[1,"limel-menu-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}]]],["p-d16b27b9",[[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-2c9843fe",[[1,"limel-flatpickr-adapter",{value:[16],type:[1],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[1],formatter:[16]}]]],["p-34c12f6d",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516],loadingFailed:[516,"loading-failed"],justLoaded:[32]}]]],["p-88e60f06",[[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-f7875f4a",[[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-10e259de",[[1,"limel-spinner",{size:[513],limeBranded:[4,"lime-branded"]}]]],["p-2fd478df",[[1,"limel-badge",{label:[520]}]]],["p-3be2dfc7",[[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 o,h as r}from"./p-d4e788e1.js";const t=class{constructor(t){o(this,t),this.renderLabel=()=>{if(this.label)return r("span",{"aria-hidden":"true"},this.label)},this.getAriaLabel=()=>{var o,r;return this.label&&(null===(o=this.link)||void 0===o?void 0:o.title)?this.label+". "+this.link.title:this.label?this.label:(null===(r=this.link)||void 0===r?void 0:r.title)?this.link.title:void 0},this.renderNotification=()=>{if(this.badge)return r("limel-badge",{label:this.badge})},this.icon=void 0,this.label=null,this.disabled=!1,this.badge=void 0,this.link=void 0}render(){var o,t,e;return[r("a",{"aria-disabled":this.disabled,href:null===(o=this.link)||void 0===o?void 0:o.href,target:null===(t=this.link)||void 0===t?void 0:t.target,tabindex:"0","aria-label":this.getAriaLabel(),title:null===(e=this.link)||void 0===e?void 0:e.title},r("limel-icon",{name:this.icon})),this.renderLabel(),this.renderNotification()]}};t.style=":host(limel-shortcut){--badge-text-color:var(\n --shortcut-badge-text-color,\n rgb(var(--color-white))\n );--badge-background-color:var(\n --shortcut-badge-background-color,\n rgb(var(--color-red-default))\n );position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:0.0625rem}:host(limel-shortcut) *{box-sizing:border-box}:host(limel-shortcut[disabled]) a{opacity:0.5;box-shadow:unset;cursor:not-allowed}a{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;color:var(--mdc-theme-on-surface);background-color:var(--shortcut-background-color, var(--lime-elevated-surface-background-color));box-shadow:var(--button-shadow-normal);cursor:pointer;text-align:center;height:calc(100% - 1rem);width:calc(100% - 1rem);padding:0.5rem;border-radius:var(--shortcut-border-radius, 1rem)}a:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}a:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}a:focus{outline:none}a:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-icon{display:flex;height:100%;width:100%;justify-content:center;color:var(--shortcut-icon-color, rgb(var(--contrast-1000)));border-radius:var(--shortcut-border-radius, 1rem)}span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;color:var(--shortcut-label-color, rgb(var(--contrast-1100)));font-size:0.75rem;text-align:center}limel-badge{position:absolute;top:-0.
|
|
1
|
+
import{r as o,h as r}from"./p-d4e788e1.js";const t=class{constructor(t){o(this,t),this.renderLabel=()=>{if(this.label)return r("span",{"aria-hidden":"true"},this.label)},this.getAriaLabel=()=>{var o,r;return this.label&&(null===(o=this.link)||void 0===o?void 0:o.title)?this.label+". "+this.link.title:this.label?this.label:(null===(r=this.link)||void 0===r?void 0:r.title)?this.link.title:void 0},this.renderNotification=()=>{if(this.badge)return r("limel-badge",{label:this.badge})},this.icon=void 0,this.label=null,this.disabled=!1,this.badge=void 0,this.link=void 0}render(){var o,t,e;return[r("a",{"aria-disabled":this.disabled,href:null===(o=this.link)||void 0===o?void 0:o.href,target:null===(t=this.link)||void 0===t?void 0:t.target,tabindex:"0","aria-label":this.getAriaLabel(),title:null===(e=this.link)||void 0===e?void 0:e.title},r("limel-icon",{name:this.icon})),this.renderLabel(),this.renderNotification()]}};t.style=":host(limel-shortcut){--badge-text-color:var(\n --shortcut-badge-text-color,\n rgb(var(--color-white))\n );--badge-background-color:var(\n --shortcut-badge-background-color,\n rgb(var(--color-red-default))\n );position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:0.0625rem}:host(limel-shortcut) *{box-sizing:border-box}:host(limel-shortcut[disabled]) a{opacity:0.5;box-shadow:unset;cursor:not-allowed}a{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;color:var(--mdc-theme-on-surface);background-color:var(--shortcut-background-color, var(--lime-elevated-surface-background-color));box-shadow:var(--button-shadow-normal);cursor:pointer;text-align:center;height:calc(100% - 1rem);width:calc(100% - 1rem);padding:0.5rem;border-radius:var(--shortcut-border-radius, 1rem)}a:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}a:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}a:focus{outline:none}a:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-icon{display:flex;height:100%;width:100%;justify-content:center;color:var(--shortcut-icon-color, rgb(var(--contrast-1000)));border-radius:var(--shortcut-border-radius, 1rem)}span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;color:var(--shortcut-label-color, rgb(var(--contrast-1100)));font-size:0.75rem;text-align:center}limel-badge{position:absolute;top:-0.25rem;right:0.125rem}";export{t as limel_shortcut}
|
|
@@ -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;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 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 .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 .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 a {\n align-items: center;\n justify-content: center;\n }\n .label {\n text-align: center;\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.25rem;\n right: -0.25rem;\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 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 .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 .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 a {\n align-items: center;\n justify-content: center;\n }\n .label {\n text-align: center;\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}
|