@limetech/lime-elements 38.33.4 → 38.33.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.33.4",
+  "version": "38.33.6",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-130c6997.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["infoTileCss","InfoTile","this","renderPrefix","prefix","h","class","renderValue","characterCount","_a","value","toString","length","loading","renderSuffix","suffix","renderIcon","icon","name","updateHasPrimarySlotContent","e","slot","target","host","shadowRoot","querySelector","hasPrimarySlot","assignedElements","renderProgress","progress","_b","maxValue","displayPercentageColors","renderLabel","label","renderNotification","badge","renderSpinner","indeterminate","componentWillLoad","handleMouseEnter","handleMouseLeave","getMouseEventHandlers","render","extendedAriaLabel","checkProps","_c","_d","link","title","disabled","_e","href","rel","getRel","_f","_g","Host","onMouseEnter","onMouseLeave","_h","_j","tabindex","_k","onSlotchange","propValue"],"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:host ::slotted([slot='primary']) {\n    width: 100%;\n    height: 100%;\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    opacity: 0.9;\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    :host(.has-primary-slot-content) &,\n    a:has(limel-circular-progress) & {\n        top: unset;\n        bottom: 0.5rem;\n        --icon-min-size: 1.5rem;\n        --icon-preferred-size: 20cqh;\n    }\n}\n\nslot[name='primary'] {\n    display: block;\n    aspect-ratio: 1;\n    width: min(var(--icon-preferred-size), var(--icon-max-size));\n}\n\n.progress,\nslot[name='primary'] {\n    position: absolute;\n    top: 0.75rem;\n    right: 0.75rem;\n}\n\n.progress {\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    opacity: 0.8;\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: var(--limel-theme-default-font-size);\n    }\n\n    @include mixins.truncate-text-on-line(2);\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    slot[name='primary'] {\n        top: 0.25rem;\n        right: 0.25rem;\n    }\n    a {\n        padding: 0.375rem;\n        gap: 0.125rem;\n    }\n\n    .icon {\n        opacity: 0.7;\n        top: 0.125rem;\n        right: 0.125rem;\n        padding: 0.125rem;\n        --icon-preferred-size: 18cqw;\n        --icon-max-size: 2rem;\n    }\n\n    .value-group {\n        gap: 0.125rem;\n    }\n\n    .value-and-suffix,\n    .label {\n        text-shadow:\n            0 0 1rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n            0 0 0.5rem\n                var(--info-tile-background-color, rgb(var(--contrast-100)));\n    }\n\n    .value {\n        --value-min-size: 0.7rem;\n        --value-preferred-size: 12cqw;\n        --value-max-size: 1rem;\n    }\n\n    .prefix,\n    .suffix {\n        --suffix-prefix-min-size: 0.6rem;\n        --suffix-prefix-preferred-size: 6cqw;\n        --suffix-prefix-max-size: 0.875rem;\n    }\n}\n\n@container (width < #{$s}) {\n    .progress,\n    slot[name='primary'] {\n        top: 0.5rem;\n        right: 0.5rem;\n    }\n    .icon {\n        top: 0.25rem;\n        right: 0.5rem;\n\n        :host(.has-primary-slot-content) &,\n        a:has(limel-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    slot[name='primary'],\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\n    :host(.has-primary-slot-content),\n    a:has(limel-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, State } 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';\nimport { getRel } from '../../util/link-helper';\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-primary-slot\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    /**\n     * `true` when something is assigned to the `primary` slot\n     */\n    @State()\n    private hasPrimarySlot = false;\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        this.updateHasPrimarySlotContent();\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        const rel = getRel(this.link?.target, this.link?.rel);\n\n        return (\n            <Host\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n                class={{ 'has-primary-slot-content': this.hasPrimarySlot }}\n            >\n                <a\n                    title={this.link?.title}\n                    href={link}\n                    target={this.link?.target}\n                    rel={rel}\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                    }}\n                >\n                    {this.renderIcon()}\n                    {this.renderProgress()}\n                    <slot\n                        name=\"primary\"\n                        onSlotchange={this.updateHasPrimarySlotContent}\n                    />\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 updateHasPrimarySlotContent = (e?: Event) => {\n        const slot =\n            (e?.target as HTMLSlotElement) ??\n            this.host.shadowRoot.querySelector('slot[name=\"primary\"]');\n        this.hasPrimarySlot = slot && slot.assignedElements().length > 0;\n    };\n\n    private renderProgress = () => {\n        if (this.hasPrimarySlot) {\n            return;\n        }\n\n        if (!this.progress?.value && this.progress?.value !== 0) {\n            return;\n        }\n\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={this.progress.displayPercentageColors}\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"],"mappings":"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"}

package/dist/lime-elements/p-18a3c28a.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as i,H as r}from"./p-288f0842.js";import{a as t}from"./p-b6a372c9.js";import"./p-4e9b4087.js";const s='@charset "UTF-8";:host([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:var(--badge-max-width, 2.75rem);padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}';const a=class{constructor(i){e(this,i);this.label=undefined}render(){return i(r,{title:this.labelIsLarge()?this.label:"",class:{"has-large-label":this.labelIsLarge()}},i("span",null,this.renderLabel()))}renderLabel(){if(typeof this.label==="number"){return t(this.label)}return this.label}labelIsLarge(){const e=999;const i=6;if(typeof this.label==="number"&&this.label>e||typeof this.label==="string"&&this.label.length>i){return true}}};a.style=s;export{a as limel_badge};
-//# sourceMappingURL=p-18a3c28a.entry.js.map

package/dist/lime-elements/p-18a3c28a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["badgeCss","Badge","render","h","Host","title","this","labelIsLarge","label","class","renderLabel","abbreviate","largeNumericLabel","largeStringLabel","length"],"sources":["./src/components/badge/badge.scss?tag=limel-badge&encapsulation=shadow","./src/components/badge/badge.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n\n/**\n * @prop --badge-background-color: badge background color\n * @prop --badge-text-color: badge text color\n * @prop --badge-max-width: maximum width of the badge, before its text gets truncated\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host(limel-badge) {\n    --limel-min-badge-size: 1rem;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    min-height: var(--limel-min-badge-size);\n    min-width: var(--limel-min-badge-size);\n}\n\nspan {\n    cursor: default;\n    box-sizing: border-box;\n\n    @include mixins.truncate-text;\n    text-align: center;\n    font-size: functions.pxToRem(11);\n    line-height: var(--limel-min-badge-size);\n\n    color: var(--badge-text-color, rgb(var(--contrast-1200)));\n\n    border-radius: var(--limel-min-badge-size);\n    max-height: var(--limel-min-badge-size);\n    min-width: 0.5rem;\n    min-height: 0.5rem;\n\n    background-color: var(--badge-background-color, rgb(var(--contrast-500)));\n\n    &:not(:empty) {\n        min-width: var(\n            --limel-min-badge-size\n        ); // ensures that a badge with only one character rendered as perfect circle\n        max-width: var(--badge-max-width, 2.75rem);\n        padding: 0 functions.pxToRem(4.5);\n    }\n}\n\n:host(.has-large-label) {\n    span {\n        cursor: help;\n    }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { abbreviate } from './format';\n\n/**\n * The Badge component can be used to display a notification badge,\n * optionally with a number or a text label.\n *\n * @exampleComponent limel-example-badge\n * @exampleComponent limel-example-badge-number\n * @exampleComponent limel-example-badge-string\n */\n@Component({\n    tag: 'limel-badge',\n    styleUrl: 'badge.scss',\n    shadow: true,\n})\nexport class Badge {\n    /**\n     * Label to display in the badge.\n     * Numeric labels larger than 999 will be rounded and abbreviated.\n     * String labels get truncated if their length is longer than\n     * six characters.\n     */\n    @Prop({ reflect: true })\n    public label?: number | string;\n\n    public render() {\n        return (\n            <Host\n                title={this.labelIsLarge() ? this.label : ''}\n                class={{\n                    'has-large-label': this.labelIsLarge(),\n                }}\n            >\n                <span>{this.renderLabel()}</span>\n            </Host>\n        );\n    }\n\n    private renderLabel() {\n        if (typeof this.label === 'number') {\n            return abbreviate(this.label);\n        }\n\n        return this.label;\n    }\n\n    private labelIsLarge() {\n        const largeNumericLabel = 999;\n        const largeStringLabel = 6;\n        if (\n            (typeof this.label === 'number' &&\n                this.label > largeNumericLabel) ||\n            (typeof this.label === 'string' &&\n                this.label.length > largeStringLabel)\n        ) {\n            return true;\n        }\n    }\n}\n"],"mappings":"8GAAA,MAAMA,EAAW,g0B,MCgBJC,EAAK,M,8CAUPC,SACH,OACIC,EAACC,EAAI,CACDC,MAAOC,KAAKC,eAAiBD,KAAKE,MAAQ,GAC1CC,MAAO,CACH,kBAAmBH,KAAKC,iBAG5BJ,EAAA,YAAOG,KAAKI,e,CAKhBA,cACJ,UAAWJ,KAAKE,QAAU,SAAU,CAChC,OAAOG,EAAWL,KAAKE,M,CAG3B,OAAOF,KAAKE,K,CAGRD,eACJ,MAAMK,EAAoB,IAC1B,MAAMC,EAAmB,EACzB,UACYP,KAAKE,QAAU,UACnBF,KAAKE,MAAQI,UACTN,KAAKE,QAAU,UACnBF,KAAKE,MAAMM,OAASD,EAC1B,CACE,OAAO,I"}