@limetech/lime-elements 37.2.8 → 37.4.0

package/dist/lime-elements/p-68cb9574.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["collapsibleSectionCss","CollapsibleSection","this","bodyId","createRandomString","onClick","handleInteraction","isOpen","open","emit","waitForUiToRender","setTimeout","dispatchResizeEvent","close","renderActions","actions","h","class","map","renderActionButton","action","icon","label","disabled","handleActionClick","event","stopPropagation","componentDidRender","button","host","shadowRoot","querySelector","makeEnterClickable","disconnectedCallback","removeEnterClickable","render","header","String","id"],"sources":["./src/components/collapsible-section/collapsible-section.scss?tag=limel-collapsible-section&encapsulation=shadow","./src/components/collapsible-section/collapsible-section.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n\n/**\n * @prop --closed-header-background-color: background color for header when closed\n * @prop --open-header-background-color: background color for header when open\n * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers\n * @prop --body-background-color: background color for body\n * @prop --body-padding: space around content of the body\n */\n\n:host(limel-collapsible-section) {\n    --border-radius-of-header: 0.75rem;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.open-close-toggle {\n    all: unset;\n    position: absolute;\n    inset: 0;\n    width: 100%; // for Firefox\n    @include mixins.visualize-keyboard-focus;\n    transition:\n        background-color 0.4s ease,\n        border-radius 0.1s ease;\n    cursor: pointer;\n    z-index: -1;\n\n    background-color: var(\n        --closed-header-background-color,\n        rgb(var(--contrast-200))\n    );\n    border-radius: var(--border-radius-of-header);\n\n    &:hover {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-300))\n        );\n    }\n\n    section.open & {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-100))\n        );\n        border-radius: var(--border-radius-of-header)\n            var(--border-radius-of-header) 0 0;\n        &:hover {\n            background-color: var(\n                --open-header-background-color,\n                rgb(var(--contrast-300))\n            );\n        }\n    }\n}\n\n.title,\n.divider-line,\n.expand-icon {\n    pointer-events: none;\n}\n\nheader {\n    isolation: isolate;\n    position: relative;\n\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n\n    padding-left: 0.5rem;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n}\n\n.title {\n    font-size: 1rem;\n    font-weight: 300;\n    color: var(--mdc-theme-on-surface);\n\n    justify-self: flex-start;\n\n    user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n    padding-right: 0.5rem;\n\n    // Below tries to render text in two lines,\n    // and then truncate if there is no more space\n    height: auto;\n    max-height: 3rem;\n    line-height: 1.2rem;\n    white-space: normal;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.divider-line {\n    transition: opacity 0.3s ease 0.3s;\n    flex-grow: 1;\n    height: 0.125rem;\n    border-radius: 1rem;\n    background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n    margin-right: 0.5rem;\n\n    opacity: 0;\n\n    section.open & {\n        opacity: 0.16;\n    }\n}\n\n.actions {\n    justify-self: flex-end;\n    flex-shrink: 0;\n}\n\n.body {\n    background-color: var(--body-background-color, var(--contrast-100));\n    padding-left: var(--body-padding, 1.25rem);\n    padding-right: var(--body-padding, 1.25rem);\n    border-radius: 0 0 var(--border-radius-of-header)\n        var(--border-radius-of-header);\n}\n\n// This animates height of the body,\n// from `0` to `auto`\n.body {\n    // All below vars are for internal use only!\n    --limel-cs-opacity-transition-speed: 0.1s;\n    --limel-cs-opacity-transition-delay: 0s;\n    --limel-cs-grid-template-rows-transition-speed: 0.3s;\n    transition: grid-template-rows\n        var(--limel-cs-grid-template-rows-transition-speed)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    display: grid;\n    grid-template-rows: 0fr;\n\n    slot {\n        transition: opacity var(--limel-cs-opacity-transition-speed) ease\n            var(--limel-cs-opacity-transition-delay);\n        display: block;\n        overflow: hidden;\n        opacity: 0;\n    }\n}\n\nsection.open {\n    .body {\n        --limel-cs-opacity-transition-speed: 0.4s;\n        --limel-cs-opacity-transition-delay: 0.3s;\n        --limel-cs-grid-template-rows-transition-speed: 0.46s;\n        grid-template-rows: 1fr;\n\n        slot {\n            opacity: 1;\n        }\n    }\n}\n\nheader:hover {\n    + .body {\n        will-change: grid-template-rows;\n\n        slot {\n            will-change: opacity;\n        }\n    }\n}\n\n// End: animating height\n\n@import './partial-styles/expand-icon.scss';\n","import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { createRandomString } from 'src/util/random-string';\n\n/**\n * @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private bodyId = createRandomString();\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section class={`${this.isOpen ? 'open' : ''}`}>\n                <header>\n                    <button\n                        class=\"open-close-toggle\"\n                        onClick={this.onClick}\n                        aria-controls={this.bodyId}\n                    />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    <h2 class=\"title mdc-typography mdc-typography--headline2\">\n                        {this.header}\n                    </h2>\n                    <div class=\"divider-line\" />\n                    {this.renderActions()}\n                </header>\n                <div\n                    class=\"body\"\n                    aria-hidden={String(!this.isOpen)}\n                    id={this.bodyId}\n                >\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"],"mappings":"4KAAA,MAAMA,EAAwB,mnM,MC6BjBC,EAAkB,M,gHAwCnBC,KAAAC,OAASC,IAkDTF,KAAAG,QAAU,KACdH,KAAKI,mBAAmB,EAGpBJ,KAAAI,kBAAoB,KACxBJ,KAAKK,QAAUL,KAAKK,OAEpB,GAAIL,KAAKK,OAAQ,CACbL,KAAKM,KAAKC,OACV,MAAMC,EAAoB,IAC1BC,WAAWC,EAAqBF,E,KAC7B,CACHR,KAAKW,MAAMJ,M,GAIXP,KAAAY,cAAgB,KACpB,IAAKZ,KAAKa,QAAS,CACf,M,CAGJ,OACIC,EAAA,OAAKC,MAAM,WACNf,KAAKa,QAAQG,IAAIhB,KAAKiB,oBACrB,EAINjB,KAAAiB,mBAAsBC,GAEtBJ,EAAA,qBACIK,KAAMD,EAAOC,KACbC,MAAOF,EAAOE,MACdC,SAAUH,EAAOG,SACjBlB,QAASH,KAAKsB,kBAAkBJ,KAKpClB,KAAAsB,kBAAqBJ,GAAoBK,IAC7CA,EAAMC,kBACNxB,KAAKkB,OAAOX,KAAKW,EAAO,E,YA9HH,M,6CAqClBO,qBACH,MAAMC,EAAS1B,KAAK2B,KAAKC,WAAWC,cAChC,sBAGJC,EAAmBJ,E,CAGhBK,uBACH,MAAML,EAAS1B,KAAK2B,KAAKC,WAAWC,cAChC,sBAGJG,EAAqBN,E,CAGlBO,SACH,OACInB,EAAA,WAASC,MAAO,GAAGf,KAAKK,OAAS,OAAS,MACtCS,EAAA,cACIA,EAAA,UACIC,MAAM,oBACNZ,QAASH,KAAKG,QAAO,gBACNH,KAAKC,SAExBa,EAAA,OAAKC,MAAM,eACPD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,UAEfD,EAAA,MAAIC,MAAM,kDACLf,KAAKkC,QAEVpB,EAAA,OAAKC,MAAM,iBACVf,KAAKY,iBAEVE,EAAA,OACIC,MAAM,OAAM,cACCoB,QAAQnC,KAAKK,QAC1B+B,GAAIpC,KAAKC,QAETa,EAAA,c"}

package/dist/lime-elements/{p-af53d049.entry.js → p-71282352.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as r}from"./p-3075aa67.js";import{g as i}from"./p-4d92b6fb.js";const a='@charset "UTF-8";:host(limel-header){display:flex;align-items:center;box-sizing:border-box;width:100%;background-color:var(--header-background-color, rgb(var(--contrast-300)));border-top-left-radius:var(--header-top-right-left-border-radius, 0.75rem);border-top-right-radius:var(--header-top-right-left-border-radius, 0.75rem);padding:0.25rem}.information{display:flex;flex-grow:1;align-items:center;min-width:0}.icon{--limel-icon-svg-margin:0.25rem;flex-shrink:0;color:var(--header-icon-color, rgb(var(--contrast-1100)));background-color:var(--header-icon-background-color, transparent);width:2.25rem;border-radius:0.56rem}.headings{min-width:0;margin-left:0.25rem}.heading,.subheading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;padding:0}.heading{color:var(--header-heading-color, rgb(var(--contrast-1100)));font-size:1rem;font-weight:500}.subheading{color:var(--header-subheading-color, rgb(var(--contrast-900)));font-size:0.8125rem;font-weight:400}.subheading__supporting-text{color:var(--header-supporting-text-color, var(--header-subheading-color))}.subheading__supporting-text span{margin:0 0.125rem}slot[name=actions]{flex-shrink:0}:host(limel-header.is-narrow){padding:0.125rem 0.25rem}:host(limel-header.is-narrow) .icon{--limel-icon-svg-margin:0;width:1.25rem}:host(limel-header.is-narrow) .heading{font-size:0.9375rem}:host(limel-header.has-responsive-layout){display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(50%, var(--header-responsive-breakpoint, 22rem), 100%), 1fr))}:host(limel-header.has-responsive-layout) .headings{padding-right:0.5rem}:host(limel-header.has-responsive-layout) slot[name=actions]{display:flex;justify-content:flex-end}';const t=class{constructor(r){e(this,r);this.icon=undefined;this.heading=undefined;this.subheading=undefined;this.supportingText=undefined;this.subheadingDivider="·"}render(){return[r("div",{class:"information"},this.renderIcon(),r("div",{class:"headings"},r("h1",{class:"heading",title:this.heading},this.heading),r("h2",{class:"subheading",title:this.subheading},this.subheading,this.renderSupportingText()))),r("slot",{name:"actions"},r("slot",null))]}renderIcon(){const e=i(this.icon);if(!e){return}return r("limel-icon",{class:"icon",badge:true,name:e})}renderSupportingText(){if(!this.supportingText){return}return r("span",{class:"subheading__supporting-text"},this.renderSubheadingDivider(),this.supportingText)}renderSubheadingDivider(){if(!this.subheadingDivider){return}return r("span",null,this.subheadingDivider)}};t.style=a;export{t as limel_header};
-//# sourceMappingURL=p-af53d049.entry.js.map
+import{r as e,h as r}from"./p-3075aa67.js";import{g as i}from"./p-2f777fdb.js";const a='@charset "UTF-8";:host(limel-header){display:flex;align-items:center;box-sizing:border-box;width:100%;background-color:var(--header-background-color, rgb(var(--contrast-300)));border-top-left-radius:var(--header-top-right-left-border-radius, 0.75rem);border-top-right-radius:var(--header-top-right-left-border-radius, 0.75rem);padding:0.25rem}.information{display:flex;flex-grow:1;align-items:center;min-width:0}.icon{--limel-icon-svg-margin:0.25rem;flex-shrink:0;color:var(--header-icon-color, rgb(var(--contrast-1100)));background-color:var(--header-icon-background-color, transparent);width:2.25rem;border-radius:0.56rem}.headings{min-width:0;margin-left:0.25rem}.heading,.subheading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;padding:0}.heading{color:var(--header-heading-color, rgb(var(--contrast-1100)));font-size:1rem;font-weight:500}.subheading{color:var(--header-subheading-color, rgb(var(--contrast-900)));font-size:0.8125rem;font-weight:400}.subheading__supporting-text{color:var(--header-supporting-text-color, var(--header-subheading-color))}.subheading__supporting-text span{margin:0 0.125rem}slot[name=actions]{flex-shrink:0}:host(limel-header.is-narrow){padding:0.125rem 0.25rem}:host(limel-header.is-narrow) .icon{--limel-icon-svg-margin:0;width:1.25rem}:host(limel-header.is-narrow) .heading{font-size:0.9375rem}:host(limel-header.has-responsive-layout){display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(50%, var(--header-responsive-breakpoint, 22rem), 100%), 1fr))}:host(limel-header.has-responsive-layout) .headings{padding-right:0.5rem}:host(limel-header.has-responsive-layout) slot[name=actions]{display:flex;justify-content:flex-end}';const t=class{constructor(r){e(this,r);this.icon=undefined;this.heading=undefined;this.subheading=undefined;this.supportingText=undefined;this.subheadingDivider="·"}render(){return[r("div",{class:"information"},this.renderIcon(),r("div",{class:"headings"},r("h1",{class:"heading",title:this.heading},this.heading),r("h2",{class:"subheading",title:this.subheading},this.subheading,this.renderSupportingText()))),r("slot",{name:"actions"},r("slot",null))]}renderIcon(){const e=i(this.icon);if(!e){return}return r("limel-icon",{class:"icon",badge:true,name:e})}renderSupportingText(){if(!this.supportingText){return}return r("span",{class:"subheading__supporting-text"},this.renderSubheadingDivider(),this.supportingText)}renderSubheadingDivider(){if(!this.subheadingDivider){return}return r("span",null,this.subheadingDivider)}};t.style=a;export{t as limel_header};
+//# sourceMappingURL=p-71282352.entry.js.map

package/dist/lime-elements/{p-af53d049.entry.js.map → p-71282352.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["headerCss","Header","render","h","class","this","renderIcon","title","heading","subheading","renderSupportingText","name","icon","getIconName","badge","supportingText","renderSubheadingDivider","subheadingDivider"],"sources":["./src/components/header/header.scss?tag=limel-header&encapsulation=shadow","./src/components/header/header.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n@use '../../style/functions.scss';\n\n/**\n * @prop --header-background-color: Background color of header, defaults to `--contrast-300`.\n * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.\n * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.\n * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.\n * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.\n * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.\n * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.\n * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.\n */\n\n:host(limel-header) {\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    width: 100%;\n    background-color: var(--header-background-color, rgb(var(--contrast-300)));\n    border-top-left-radius: var(--header-top-right-left-border-radius, 0.75rem);\n    border-top-right-radius: var(\n        --header-top-right-left-border-radius,\n        0.75rem\n    );\n    padding: 0.25rem;\n}\n\n.information {\n    display: flex;\n    flex-grow: 1;\n    align-items: center;\n    min-width: 0;\n}\n\n.icon {\n    --limel-icon-svg-margin: 0.25rem;\n    flex-shrink: 0;\n    color: var(--header-icon-color, rgb(var(--contrast-1100)));\n    background-color: var(--header-icon-background-color, transparent);\n    width: 2.25rem;\n    border-radius: 0.56rem;\n}\n\n.headings {\n    min-width: 0;\n    margin-left: 0.25rem;\n}\n\n.heading,\n.subheading {\n    @include mixins.truncate-text;\n    margin: 0;\n    padding: 0;\n}\n\n.heading {\n    color: var(--header-heading-color, rgb(var(--contrast-1100)));\n    font-size: 1rem;\n    font-weight: 500;\n}\n\n.subheading {\n    color: var(--header-subheading-color, rgb(var(--contrast-900)));\n    font-size: functions.pxToRem(13);\n    font-weight: 400;\n}\n\n.subheading__supporting-text {\n    color: var(--header-supporting-text-color, var(--header-subheading-color));\n    span {\n        margin: 0 0.125rem;\n    }\n}\n\nslot[name='actions'] {\n    flex-shrink: 0;\n}\n\n:host(limel-header.is-narrow) {\n    padding: 0.125rem 0.25rem;\n\n    .icon {\n        --limel-icon-svg-margin: 0;\n        width: 1.25rem;\n    }\n\n    .heading {\n        font-size: functions.pxToRem(15);\n    }\n}\n\n:host(limel-header.has-responsive-layout) {\n    display: grid;\n    grid-template-columns: repeat(\n        auto-fit,\n        minmax(\n            clamp(\n                50%,\n                var(--header-responsive-breakpoint, functions.pxToRem(352)),\n                100%\n            ),\n            1fr\n        )\n    );\n    .headings {\n        padding-right: 0.5rem;\n    }\n    slot[name='actions'] {\n        display: flex;\n        justify-content: flex-end;\n    }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/**\n * A header is the top most visual element in a component, page, card, or a view.\n *\n * ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n *\n * For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n *\n *\n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n *\n * :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n *\n *\n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n *\n * @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n */\n@Component({\n    tag: 'limel-header',\n    shadow: true,\n    styleUrl: 'header.scss',\n})\nexport class Header {\n    /**\n     * Icon to display\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * Title to display\n     */\n    @Prop()\n    public heading?: string;\n\n    /**\n     * Subheading to display\n     */\n    @Prop()\n    public subheading?: string;\n\n    /**\n     * An extra string of text to display along with with the Subheading\n     */\n    @Prop()\n    public supportingText?: string;\n\n    /**\n     * The visual divider that separates the `subheading` and the `supportingText`.\n     * It must be a single character such as `-` or `,`.\n     */\n    @Prop()\n    public subheadingDivider?: string = '·';\n\n    public render() {\n        return [\n            <div class=\"information\">\n                {this.renderIcon()}\n                <div class=\"headings\">\n                    <h1 class=\"heading\" title={this.heading}>\n                        {this.heading}\n                    </h1>\n                    <h2 class=\"subheading\" title={this.subheading}>\n                        {this.subheading}\n                        {this.renderSupportingText()}\n                    </h2>\n                </div>\n            </div>,\n            <slot name=\"actions\">\n                <slot />\n            </slot>,\n        ];\n    }\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n\n        if (!icon) {\n            return;\n        }\n\n        return <limel-icon class=\"icon\" badge={true} name={icon} />;\n    }\n\n    private renderSupportingText() {\n        if (!this.supportingText) {\n            return;\n        }\n\n        return (\n            <span class=\"subheading__supporting-text\">\n                {this.renderSubheadingDivider()}\n                {this.supportingText}\n            </span>\n        );\n    }\n\n    private renderSubheadingDivider() {\n        if (!this.subheadingDivider) {\n            return;\n        }\n\n        return <span>{this.subheadingDivider}</span>;\n    }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,kqD,MC4DLC,EAAM,M,mJA8BqB,G,CAE7BC,SACH,MAAO,CACHC,EAAA,OAAKC,MAAM,eACNC,KAAKC,aACNH,EAAA,OAAKC,MAAM,YACPD,EAAA,MAAIC,MAAM,UAAUG,MAAOF,KAAKG,SAC3BH,KAAKG,SAEVL,EAAA,MAAIC,MAAM,aAAaG,MAAOF,KAAKI,YAC9BJ,KAAKI,WACLJ,KAAKK,0BAIlBP,EAAA,QAAMQ,KAAK,WACPR,EAAA,c,CAKJG,aACJ,MAAMM,EAAOC,EAAYR,KAAKO,MAE9B,IAAKA,EAAM,CACP,M,CAGJ,OAAOT,EAAA,cAAYC,MAAM,OAAOU,MAAO,KAAMH,KAAMC,G,CAG/CF,uBACJ,IAAKL,KAAKU,eAAgB,CACtB,M,CAGJ,OACIZ,EAAA,QAAMC,MAAM,+BACPC,KAAKW,0BACLX,KAAKU,e,CAKVC,0BACJ,IAAKX,KAAKY,kBAAmB,CACzB,M,CAGJ,OAAOd,EAAA,YAAOE,KAAKY,kB"}
+{"version":3,"names":["headerCss","Header","render","h","class","this","renderIcon","title","heading","subheading","renderSupportingText","name","icon","getIconName","badge","supportingText","renderSubheadingDivider","subheadingDivider"],"sources":["./src/components/header/header.scss?tag=limel-header&encapsulation=shadow","./src/components/header/header.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n@use '../../style/functions.scss';\n\n/**\n * @prop --header-background-color: Background color of header, defaults to `--contrast-300`.\n * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.\n * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.\n * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.\n * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.\n * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.\n * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.\n * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.\n */\n\n:host(limel-header) {\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    width: 100%;\n    background-color: var(--header-background-color, rgb(var(--contrast-300)));\n    border-top-left-radius: var(--header-top-right-left-border-radius, 0.75rem);\n    border-top-right-radius: var(\n        --header-top-right-left-border-radius,\n        0.75rem\n    );\n    padding: 0.25rem;\n}\n\n.information {\n    display: flex;\n    flex-grow: 1;\n    align-items: center;\n    min-width: 0;\n}\n\n.icon {\n    --limel-icon-svg-margin: 0.25rem;\n    flex-shrink: 0;\n    color: var(--header-icon-color, rgb(var(--contrast-1100)));\n    background-color: var(--header-icon-background-color, transparent);\n    width: 2.25rem;\n    border-radius: 0.56rem;\n}\n\n.headings {\n    min-width: 0;\n    margin-left: 0.25rem;\n}\n\n.heading,\n.subheading {\n    @include mixins.truncate-text;\n    margin: 0;\n    padding: 0;\n}\n\n.heading {\n    color: var(--header-heading-color, rgb(var(--contrast-1100)));\n    font-size: 1rem;\n    font-weight: 500;\n}\n\n.subheading {\n    color: var(--header-subheading-color, rgb(var(--contrast-900)));\n    font-size: functions.pxToRem(13);\n    font-weight: 400;\n}\n\n.subheading__supporting-text {\n    color: var(--header-supporting-text-color, var(--header-subheading-color));\n    span {\n        margin: 0 0.125rem;\n    }\n}\n\nslot[name='actions'] {\n    flex-shrink: 0;\n}\n\n:host(limel-header.is-narrow) {\n    padding: 0.125rem 0.25rem;\n\n    .icon {\n        --limel-icon-svg-margin: 0;\n        width: 1.25rem;\n    }\n\n    .heading {\n        font-size: functions.pxToRem(15);\n    }\n}\n\n:host(limel-header.has-responsive-layout) {\n    display: grid;\n    grid-template-columns: repeat(\n        auto-fit,\n        minmax(\n            clamp(\n                50%,\n                var(--header-responsive-breakpoint, functions.pxToRem(352)),\n                100%\n            ),\n            1fr\n        )\n    );\n    .headings {\n        padding-right: 0.5rem;\n    }\n    slot[name='actions'] {\n        display: flex;\n        justify-content: flex-end;\n    }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/**\n * A header is the top most visual element in a component, page, card, or a view.\n *\n * ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n *\n * For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n *\n *\n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n *\n * :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n *\n *\n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n *\n * @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-slot-actions\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n */\n@Component({\n    tag: 'limel-header',\n    shadow: true,\n    styleUrl: 'header.scss',\n})\nexport class Header {\n    /**\n     * Icon to display\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * Title to display\n     */\n    @Prop()\n    public heading?: string;\n\n    /**\n     * Subheading to display\n     */\n    @Prop()\n    public subheading?: string;\n\n    /**\n     * An extra string of text to display along with with the Subheading\n     */\n    @Prop()\n    public supportingText?: string;\n\n    /**\n     * The visual divider that separates the `subheading` and the `supportingText`.\n     * It must be a single character such as `-` or `,`.\n     */\n    @Prop()\n    public subheadingDivider?: string = '·';\n\n    public render() {\n        return [\n            <div class=\"information\">\n                {this.renderIcon()}\n                <div class=\"headings\">\n                    <h1 class=\"heading\" title={this.heading}>\n                        {this.heading}\n                    </h1>\n                    <h2 class=\"subheading\" title={this.subheading}>\n                        {this.subheading}\n                        {this.renderSupportingText()}\n                    </h2>\n                </div>\n            </div>,\n            <slot name=\"actions\">\n                <slot />\n            </slot>,\n        ];\n    }\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n\n        if (!icon) {\n            return;\n        }\n\n        return <limel-icon class=\"icon\" badge={true} name={icon} />;\n    }\n\n    private renderSupportingText() {\n        if (!this.supportingText) {\n            return;\n        }\n\n        return (\n            <span class=\"subheading__supporting-text\">\n                {this.renderSubheadingDivider()}\n                {this.supportingText}\n            </span>\n        );\n    }\n\n    private renderSubheadingDivider() {\n        if (!this.subheadingDivider) {\n            return;\n        }\n\n        return <span>{this.subheadingDivider}</span>;\n    }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,kqD,MC6DLC,EAAM,M,mJA8BqB,G,CAE7BC,SACH,MAAO,CACHC,EAAA,OAAKC,MAAM,eACNC,KAAKC,aACNH,EAAA,OAAKC,MAAM,YACPD,EAAA,MAAIC,MAAM,UAAUG,MAAOF,KAAKG,SAC3BH,KAAKG,SAEVL,EAAA,MAAIC,MAAM,aAAaG,MAAOF,KAAKI,YAC9BJ,KAAKI,WACLJ,KAAKK,0BAIlBP,EAAA,QAAMQ,KAAK,WACPR,EAAA,c,CAKJG,aACJ,MAAMM,EAAOC,EAAYR,KAAKO,MAE9B,IAAKA,EAAM,CACP,M,CAGJ,OAAOT,EAAA,cAAYC,MAAM,OAAOU,MAAO,KAAMH,KAAMC,G,CAG/CF,uBACJ,IAAKL,KAAKU,eAAgB,CACtB,M,CAGJ,OACIZ,EAAA,QAAMC,MAAM,+BACPC,KAAKW,0BACLX,KAAKU,e,CAKVC,0BACJ,IAAKX,KAAKY,kBAAmB,CACzB,M,CAGJ,OAAOd,EAAA,YAAOE,KAAKY,kB"}