npm - @limetech/lime-elements - Versions diffs - 38.3.1 → 38.3.3 - Mend

@limetech/lime-elements 38.3.1 → 38.3.3

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.

Files changed (67) hide show

package/dist/cjs/limel-info-tile.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-info-tile.entry.cjs.js","mappings":"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","names":["h","getMouseEventHandlers","Host"],"sources":["./src/components/info-tile/info-tile.scss?tag=limel-info-tile&encapsulation=shadow","./src/components/info-tile/info-tile.tsx"],"sourcesContent":["/*\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\n@use '../../style/mixins';\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\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\n --label-min-size: 0.75rem;\n --label-preferred-size: 6cqw;\n --label-max-size: 1rem;\n\n --value-min-size: 1rem;\n --value-preferred-size: 20cqw;\n --value-max-size: 4rem;\n\n --suffix-prefix-min-size: 0.75rem;\n --suffix-prefix-preferred-size: 8cqw;\n --suffix-prefix-max-size: 1.5rem;\n\n --icon-min-size: 2rem;\n --icon-preferred-size: 60cqh;\n --icon-max-size: calc(100cqw - 0.5rem);\n\n container-type: size;\n position: relative;\n display: flex;\n\n width: 100%;\n height: 100%;\n\n {\n box-sizing: border-box;\n }\n}\n\n:host(limel-info-tile[disabled]) {\n a {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\na {\n all: unset;\n overflow: hidden;\n\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n\n height: 100%;\n width: 100%;\n flex-grow: 1;\n\n padding: 0.25rem 1rem 0.5rem 1rem;\n border-radius: var(--info-tile-border-radius, 1rem);\n background-color: var(\n --info-tile-background-color,\n var(--lime-elevated-surface-background-color)\n );\n}\n\n.icon {\n z-index: 1;\n position: absolute;\n top: 0.5rem;\n right: 0.75rem;\n padding: 0.25rem;\n\n aspect-ratio: 1/1;\n\n color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n\n border-radius: 0;\n height: clamp(\n var(--icon-min-size),\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n\n @supports not (container-type: size) {\n width: max(10%, 3rem);\n }\n\n .has-circular-progress & {\n top: unset;\n bottom: 0.5rem;\n --icon-min-size: 1.5rem;\n --icon-preferred-size: 20cqh;\n }\n}\n\n.progress {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n\n --circular-progress-size: min(\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n @supports not (container-type: size) {\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\n line-height: 1.2;\n font-size: clamp(\n var(--label-min-size),\n var(--label-preferred-size),\n var(--label-max-size)\n );\n @supports not (container-type: size) {\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}\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:\n 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n 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(\n var(--suffix-prefix-min-size),\n var(--suffix-prefix-preferred-size),\n var(--suffix-prefix-max-size)\n );\n opacity: 0.7;\n\n @supports not (container-type: size) {\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:\n opacity 0.2s ease,\n 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\n @include mixins.truncate-text;\n font-weight: bold;\n line-height: normal;\n\n font-size: clamp(\n var(--value-min-size),\n var(--value-preferred-size),\n var(--value-max-size)\n );\n @supports not (container-type: size) {\n font-size: 1.5rem;\n }\n\n :host(limel-info-tile[loading]) & {\n opacity: 0.3;\n transform: translate3d(0, 0, 0) scale(0.9);\n }\n}\n\n.suffix {\n transform: translateY(10%);\n}\n\n$xs: 8rem; //128px:\n$s: 18.75rem; //300px\n$m: 40.5rem; //648px\n$l: 62.5rem; //1000px\n\n@container (width < #{$xs}) {\n .progress {\n top: 0.25rem;\n right: 0.25rem;\n }\n a {\n padding: 0.375rem;\n gap: 0.125rem;\n }\n}\n\n@container (width < #{$s}) {\n .progress {\n top: 0.5rem;\n right: 0.5rem;\n }\n .icon {\n top: 0.25rem;\n right: 0.5rem;\n .has-circular-progress & {\n right: 0.25rem;\n bottom: 0.25rem;\n }\n }\n}\n\n@container (width < #{$m}) {\n .value {\n &.ch-1,\n &.ch-2,\n &.ch-3,\n &.ch-4 {\n --value-preferred-size: 20cqw;\n }\n &.ch-5 {\n --value-preferred-size: 18cqw;\n }\n &.ch-6 {\n --value-preferred-size: 17cqw;\n }\n &.ch-7 {\n --value-preferred-size: 16cqw;\n }\n &.ch-8 {\n --value-preferred-size: 15cqw;\n }\n &.ch-9 {\n --value-preferred-size: 14cqw;\n }\n --value-preferred-size: 13cqw;\n }\n}\n\n@container (height > #{$xs}) {\n a {\n padding-top: 0.75rem;\n padding-bottom: 1rem;\n }\n}\n\n@container (height < #{$xs}) and (width > #{$xs}) {\n .value {\n --value-preferred-size: 32cqh !important;\n }\n .suffix,\n .prefix {\n --suffix-prefix-preferred-size: 16cqh !important;\n }\n}\n\n@container (height > #{$s}) {\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 // -webkit-line-clamp: 3;\n }\n .has-circular-progress {\n .icon {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n --icon-max-size: 3rem;\n }\n }\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n @include mixins.parent-of-the-3d-element;\n}\n\na {\n @include mixins.the-3d-element;\n\n &.is-clickable {\n @include mixins.the-3d-element--clickable;\n }\n}\n","import { Component, Prop, h, Element, Host } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/*\n This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n \n If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n \n @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n /\n@Component({\n tag: 'limel-info-tile',\n shadow: true,\n styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n /\n A piece of text or number that is the main piece of information\n * which the component is intended to visualize.\n /\n @Prop({ reflect: true })\n public value: number \| string;\n\n /\n Name of icon for the info tile.\n /\n @Prop()\n public icon?: string;\n\n /\n The text to show below the info tile. Long labels will be truncated.\n /\n @Prop({ reflect: true })\n public label?: string = null;\n\n /\n A string of text that is visually placed before the value.\n /\n @Prop({ reflect: true })\n public prefix?: string;\n\n /\n A string of text that is visually placed after the value.\n /\n @Prop({ reflect: true })\n public suffix?: string;\n\n /\n Set to `true` if info tile is disabled.\n /\n @Prop({ reflect: true })\n public disabled? = false;\n\n /\n If supplied, the info tile will display a notification badge.\n /\n @Prop({ reflect: true })\n public badge?: number \| string;\n\n /\n Set to `true` to put the component in the `loading` state.\n * This does _not_ disable the link. To do so, the\n * `disabled` property should be set to `true` as well.\n /\n @Prop({ reflect: true })\n public loading? = false;\n\n /\n If supplied, the info tile will be a clickable link.\n \n Supplying a value also adds an elevated effect using a shadow,\n * as well as `cursor: pointer`, which appears on hover.\n * While we strongly recommend supplying a link whenever the\n * component should act as a link, if this is not possible, and\n * you need to provide interaction through a click handler,\n * you can still get the correct styling by supplying a `Link`\n * object with the `href` property set to `'#'`.\n /\n @Prop()\n public link?: Link;\n\n /\n Properties of the optional circular progress bar.\n \n Defaults:\n * - `maxValue`: 100\n * - `suffix`: %\n * - `displayPercentageColors`: false\n \n Colors change with intervals of 10 %.\n */\n @Prop()\n public progress?: InfoTileProgress;\n\n @Element()\n private host: HTMLElement;\n\n private handleMouseEnter: () => void;\n private handleMouseLeave: () => void;\n\n public componentWillLoad() {\n const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n this.host,\n );\n this.handleMouseEnter = handleMouseEnter;\n this.handleMouseLeave = handleMouseLeave;\n }\n\n public render() {\n const extendedAriaLabel =\n this.checkProps(this?.prefix) +\n this.value +\n ' ' +\n this.checkProps(this?.suffix) +\n this.checkProps(this?.label) +\n '. ' +\n this.checkProps(this?.progress?.prefix) +\n this.checkProps(this?.progress?.value) +\n this.checkProps(this?.progress?.suffix) +\n this.checkProps(this?.link?.title);\n\n const link = !this.disabled ? this.link?.href : '#';\n\n return (\n <Host\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <a\n title={this.link?.title}\n href={link}\n target={this.link?.target}\n tabindex=\"0\"\n aria-label={extendedAriaLabel}\n aria-disabled={this.disabled}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n class={{\n 'is-clickable': !!this.link?.href && !this.disabled,\n 'has-circular-progress':\n !!this.progress?.value \|\|\n this.progress?.value === 0,\n }}\n >\n {this.renderIcon()}\n {this.renderProgress()}\n <div class=\"value-group\">\n {this.renderPrefix()}\n <div class=\"value-and-suffix\">\n {this.renderValue()}\n {this.renderSuffix()}\n </div>\n {this.renderSpinner()}\n </div>\n {this.renderLabel()}\n <limel-3d-hover-effect-glow />\n </a>\n {this.renderNotification()}\n </Host>\n );\n }\n\n private checkProps(propValue) {\n return !propValue ? '' : propValue + ' ';\n }\n\n private renderPrefix = () => {\n if (this.prefix) {\n return <span class=\"prefix\">{this.prefix}</span>;\n }\n };\n\n private renderValue = () => {\n const characterCount = (this.value ?? '').toString().length;\n\n if (!this.value && this.loading) {\n return <span class=\"value\">···</span>;\n }\n\n if (this.value) {\n return (\n <span\n class={{\n value: true,\n [`ch-${characterCount}`]: true,\n }}\n >\n {this.value}\n </span>\n );\n }\n };\n\n private renderSuffix = () => {\n if (this.suffix) {\n return <span class=\"suffix\">{this.suffix}</span>;\n }\n };\n\n private renderIcon = () => {\n if (this.icon) {\n return <limel-icon class=\"icon\" name={this.icon} />;\n }\n };\n\n private renderProgress = () => {\n if (this.progress?.value \|\| this.progress?.value === 0) {\n return (\n <limel-circular-progress\n class=\"progress\"\n prefix={this.progress.prefix}\n value={this.progress.value}\n suffix={this.progress.suffix}\n maxValue={this.progress.maxValue}\n displayPercentageColors={\n this.progress.displayPercentageColors\n }\n />\n );\n }\n };\n\n private renderLabel = () => {\n if (this.label) {\n return <span class=\"label\">{this.label}</span>;\n }\n };\n\n private renderNotification = () => {\n if (this.badge) {\n return <limel-badge label={this.badge} />;\n }\n };\n\n private renderSpinner = () => {\n if (this.loading) {\n return <limel-linear-progress indeterminate={true} />;\n }\n };\n}\n"],"version":3}
1	+ {"file":"limel-info-tile.entry.cjs.js","mappings":"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","names":["h","getMouseEventHandlers","Host"],"sources":["./src/components/info-tile/info-tile.scss?tag=limel-info-tile&encapsulation=shadow","./src/components/info-tile/info-tile.tsx"],"sourcesContent":["/*\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\n@use '../../style/mixins';\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\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\n --label-min-size: 0.75rem;\n --label-preferred-size: 6cqw;\n --label-max-size: 1rem;\n\n --value-min-size: 1rem;\n --value-preferred-size: 20cqw;\n --value-max-size: 4rem;\n\n --suffix-prefix-min-size: 0.75rem;\n --suffix-prefix-preferred-size: 8cqw;\n --suffix-prefix-max-size: 1.5rem;\n\n --icon-min-size: 2rem;\n --icon-preferred-size: 60cqh;\n --icon-max-size: calc(100cqw - 0.5rem);\n\n container-type: size;\n position: relative;\n display: flex;\n\n width: 100%;\n height: 100%;\n\n {\n box-sizing: border-box;\n }\n}\n\n:host(limel-info-tile[disabled]) {\n a {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\na {\n all: unset;\n overflow: hidden;\n\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n\n height: 100%;\n width: 100%;\n flex-grow: 1;\n\n padding: 0.25rem 1rem 0.5rem 1rem;\n border-radius: var(--info-tile-border-radius, 1rem);\n background-color: var(\n --info-tile-background-color,\n var(--lime-elevated-surface-background-color)\n );\n}\n\n.icon {\n z-index: 1;\n position: absolute;\n top: 0.5rem;\n right: 0.75rem;\n padding: 0.25rem;\n\n aspect-ratio: 1/1;\n\n color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n\n border-radius: 0;\n height: clamp(\n var(--icon-min-size),\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n\n @supports not (container-type: size) {\n width: max(10%, 3rem);\n }\n\n .has-circular-progress & {\n top: unset;\n bottom: 0.5rem;\n --icon-min-size: 1.5rem;\n --icon-preferred-size: 20cqh;\n }\n}\n\n.progress {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n\n --circular-progress-size: min(\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n @supports not (container-type: size) {\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\n line-height: 1.2;\n font-size: clamp(\n var(--label-min-size),\n var(--label-preferred-size),\n var(--label-max-size)\n );\n @supports not (container-type: size) {\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}\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:\n 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n 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(\n var(--suffix-prefix-min-size),\n var(--suffix-prefix-preferred-size),\n var(--suffix-prefix-max-size)\n );\n opacity: 0.7;\n\n @supports not (container-type: size) {\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:\n opacity 0.2s ease,\n 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\n @include mixins.truncate-text;\n font-weight: bold;\n line-height: normal;\n\n font-size: clamp(\n var(--value-min-size),\n var(--value-preferred-size),\n var(--value-max-size)\n );\n @supports not (container-type: size) {\n font-size: 1.5rem;\n }\n\n :host(limel-info-tile[loading]) & {\n opacity: 0.3;\n transform: translate3d(0, 0, 0) scale(0.9);\n }\n}\n\n.suffix {\n transform: translateY(10%);\n}\n\n$xs: 8rem; //128px:\n$s: 18.75rem; //300px\n$m: 40.5rem; //648px\n$l: 62.5rem; //1000px\n\n@container (width < #{$xs}) {\n .progress {\n top: 0.25rem;\n right: 0.25rem;\n }\n a {\n padding: 0.375rem;\n gap: 0.125rem;\n }\n}\n\n@container (width < #{$s}) {\n .progress {\n top: 0.5rem;\n right: 0.5rem;\n }\n .icon {\n top: 0.25rem;\n right: 0.5rem;\n .has-circular-progress & {\n right: 0.25rem;\n bottom: 0.25rem;\n }\n }\n}\n\n@container (width < #{$m}) {\n .value {\n &.ch-1,\n &.ch-2,\n &.ch-3,\n &.ch-4 {\n --value-preferred-size: 20cqw;\n }\n &.ch-5 {\n --value-preferred-size: 18cqw;\n }\n &.ch-6 {\n --value-preferred-size: 17cqw;\n }\n &.ch-7 {\n --value-preferred-size: 16cqw;\n }\n &.ch-8 {\n --value-preferred-size: 15cqw;\n }\n &.ch-9 {\n --value-preferred-size: 14cqw;\n }\n --value-preferred-size: 13cqw;\n }\n}\n\n@container (height > #{$xs}) {\n a {\n padding-top: 0.75rem;\n padding-bottom: 1rem;\n }\n}\n\n@container (height < #{$xs}) and (width > #{$xs}) {\n .value {\n --value-preferred-size: 32cqh !important;\n }\n .suffix,\n .prefix {\n --suffix-prefix-preferred-size: 16cqh !important;\n }\n}\n\n@container (height > #{$s}) {\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 // -webkit-line-clamp: 3;\n }\n .has-circular-progress {\n .icon {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n --icon-max-size: 3rem;\n }\n }\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n @include mixins.parent-of-the-3d-element;\n}\n\na {\n @include mixins.the-3d-element;\n\n &.is-clickable {\n @include mixins.the-3d-element--clickable;\n }\n}\n","import { Component, Prop, h, Element, Host } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/*\n This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n \n If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n \n @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n /\n@Component({\n tag: 'limel-info-tile',\n shadow: true,\n styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n /\n A piece of text or number that is the main piece of information\n * which the component is intended to visualize.\n /\n @Prop({ reflect: true })\n public value: number \| string;\n\n /\n Name of icon for the info tile.\n /\n @Prop()\n public icon?: string;\n\n /\n The text to show below the info tile. Long labels will be truncated.\n /\n @Prop({ reflect: true })\n public label?: string = null;\n\n /\n A string of text that is visually placed before the value.\n /\n @Prop({ reflect: true })\n public prefix?: string;\n\n /\n A string of text that is visually placed after the value.\n /\n @Prop({ reflect: true })\n public suffix?: string;\n\n /\n Set to `true` if info tile is disabled.\n /\n @Prop({ reflect: true })\n public disabled? = false;\n\n /\n If supplied, the info tile will display a notification badge.\n /\n @Prop({ reflect: true })\n public badge?: number \| string;\n\n /\n Set to `true` to put the component in the `loading` state.\n * This does _not_ disable the link. To do so, the\n * `disabled` property should be set to `true` as well.\n /\n @Prop({ reflect: true })\n public loading? = false;\n\n /\n If supplied, the info tile will be a clickable link.\n \n Supplying a value also adds an elevated effect using a shadow,\n * as well as `cursor: pointer`, which appears on hover.\n * While we strongly recommend supplying a link whenever the\n * component should act as a link, if this is not possible, and\n * you need to provide interaction through a click handler,\n * you can still get the correct styling by supplying a `Link`\n * object with the `href` property set to `'#'`.\n /\n @Prop()\n public link?: Link;\n\n /\n Properties of the optional circular progress bar.\n \n Defaults:\n * - `maxValue`: 100\n * - `suffix`: %\n * - `displayPercentageColors`: false\n \n Colors change with intervals of 10 %.\n */\n @Prop()\n public progress?: InfoTileProgress;\n\n @Element()\n private host: HTMLElement;\n\n private handleMouseEnter: () => void;\n private handleMouseLeave: () => void;\n\n public componentWillLoad() {\n const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n this.host,\n );\n this.handleMouseEnter = handleMouseEnter;\n this.handleMouseLeave = handleMouseLeave;\n }\n\n public render() {\n const extendedAriaLabel =\n this.checkProps(this?.prefix) +\n this.value +\n ' ' +\n this.checkProps(this?.suffix) +\n this.checkProps(this?.label) +\n '. ' +\n this.checkProps(this?.progress?.prefix) +\n this.checkProps(this?.progress?.value) +\n this.checkProps(this?.progress?.suffix) +\n this.checkProps(this?.link?.title);\n\n const link = !this.disabled ? this.link?.href : '#';\n\n return (\n <Host\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <a\n title={this.link?.title}\n href={link}\n target={this.link?.target}\n tabindex=\"0\"\n aria-label={extendedAriaLabel}\n aria-disabled={this.disabled}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n class={{\n 'is-clickable': !!this.link?.href && !this.disabled,\n 'has-circular-progress':\n !!this.progress?.value \|\|\n this.progress?.value === 0,\n }}\n >\n {this.renderIcon()}\n {this.renderProgress()}\n <div class=\"value-group\">\n {this.renderPrefix()}\n <div class=\"value-and-suffix\">\n {this.renderValue()}\n {this.renderSuffix()}\n </div>\n {this.renderSpinner()}\n </div>\n {this.renderLabel()}\n <limel-3d-hover-effect-glow />\n </a>\n {this.renderNotification()}\n </Host>\n );\n }\n\n private checkProps(propValue) {\n return !propValue ? '' : propValue + ' ';\n }\n\n private renderPrefix = () => {\n if (this.prefix) {\n return <span class=\"prefix\">{this.prefix}</span>;\n }\n };\n\n private renderValue = () => {\n const characterCount = (this.value ?? '').toString().length;\n\n if (!this.value && this.loading) {\n return <span class=\"value\">···</span>;\n }\n\n if (this.value) {\n return (\n <span\n class={{\n value: true,\n [`ch-${characterCount}`]: true,\n }}\n >\n {this.value}\n </span>\n );\n }\n };\n\n private renderSuffix = () => {\n if (this.suffix) {\n return <span class=\"suffix\">{this.suffix}</span>;\n }\n };\n\n private renderIcon = () => {\n if (this.icon) {\n return <limel-icon class=\"icon\" name={this.icon} />;\n }\n };\n\n private renderProgress = () => {\n if (this.progress?.value \|\| this.progress?.value === 0) {\n return (\n <limel-circular-progress\n class=\"progress\"\n prefix={this.progress.prefix}\n value={this.progress.value}\n suffix={this.progress.suffix}\n maxValue={this.progress.maxValue}\n displayPercentageColors={\n this.progress.displayPercentageColors\n }\n />\n );\n }\n };\n\n private renderLabel = () => {\n if (this.label) {\n return <span class=\"label\">{this.label}</span>;\n }\n };\n\n private renderNotification = () => {\n if (this.badge) {\n return <limel-badge label={this.badge} />;\n }\n };\n\n private renderSpinner = () => {\n if (this.loading) {\n return <limel-linear-progress indeterminate={true} />;\n }\n };\n}\n"],"version":3}

package/dist/cjs/limel-table.cjs.entry.js CHANGED Viewed

@@ -24312,6 +24312,7 @@ const Table = class {
     this.changeColumns = index.createEvent(this, "changeColumns", 7);
     this.select = index.createEvent(this, "select", 7);
     this.selectAll = index.createEvent(this, "selectAll", 7);
+    this.shouldSort = false;
     this.getActiveRows = () => {
       if (!this.tabulator) {
         return [];
@@ -24369,6 +24370,7 @@ const Table = class {
     this.selection = undefined;
     this.handleDataSorting = this.handleDataSorting.bind(this);
     this.handlePageLoaded = this.handlePageLoaded.bind(this);
+    this.handleRenderComplete = this.handleRenderComplete.bind(this);
     this.handleAjaxRequesting = this.handleAjaxRequesting.bind(this);
     this.requestData = this.requestData.bind(this);
     this.onClickRow = this.onClickRow.bind(this);
@@ -24441,9 +24443,8 @@ const Table = class {
     if (this.areSameColumns(newColumns, oldColumnsInTable)) {
       return;
     }
-    // Updating columns requires a reinitialization otherwise sorting will not work
-    // afterwards
-    this.init();
+    this.tabulator.setColumns(this.getColumnDefinitions());
+    this.shouldSort = true;
   }
   updateAggregates(newAggregates, oldAggregates) {
     if (!this.tabulator) {
@@ -24560,7 +24561,7 @@ const Table = class {
     const ajaxOptions = this.getAjaxOptions();
     const paginationOptions = this.getPaginationOptions();
     const columnOptions = this.getColumnOptions();
-    return Object.assign(Object.assign(Object.assign(Object.assign({ data: this.data, layout: mapLayout(this.layout), columns: this.getColumnDefinitions(), dataSorting: this.handleDataSorting, pageLoaded: this.handlePageLoaded }, ajaxOptions), paginationOptions), { rowClick: this.onClickRow, rowFormatter: this.formatRow, initialSort: this.getInitialSorting(), nestedFieldSeparator: false }), columnOptions);
+    return Object.assign(Object.assign(Object.assign(Object.assign({ data: this.data, layout: mapLayout(this.layout), columns: this.getColumnDefinitions(), dataSorting: this.handleDataSorting, pageLoaded: this.handlePageLoaded, renderComplete: this.handleRenderComplete }, ajaxOptions), paginationOptions), { rowClick: this.onClickRow, rowFormatter: this.formatRow, initialSort: this.getInitialSorting(), nestedFieldSeparator: false }), columnOptions);
   }
   getInitialSorting() {
     if (this.currentSorting && this.currentSorting.length) {
@@ -24706,6 +24707,12 @@ const Table = class {
     }
     this.changePage.emit(page);
   }
+  handleRenderComplete() {
+    if (this.tabulator && this.shouldSort) {
+      this.shouldSort = false;
+      this.tabulator.setSort(this.getColumnSorter(this.sorting));
+    }
+  }
   onClickRow(_ev, row) {
     if (typeof row.getPosition === 'undefined') {
       // Not a data row, probably a CalcComponent