@limetech/lime-elements 37.7.0 → 37.7.1

package/dist/lime-elements/lime-elements.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as l}from"./p-3075aa67.js";export{s as setNonce}from"./p-3075aa67.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l([["p-019675bd",[[1,"limel-action-bar",{actions:[16],accessibleLabel:[513,"accessible-label"],layout:[513],openDirection:[513,"open-direction"],overflowCutoff:[32]}]]],["p-d3f9a2f1",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-c0543a74",[[1,"limel-file-viewer",{url:[513],filename:[513],alt:[513],allowFullscreen:[516,"allow-fullscreen"],allowOpenInNewTab:[516,"allow-open-in-new-tab"],allowDownload:[516,"allow-download"],language:[1],officeViewer:[513,"office-viewer"],actions:[16],isFullscreen:[32],fileType:[32],loading:[32],fileUrl:[32]}]]],["p-a1d841db",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-8d13a44f",[[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],invalid:[516],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-5d140ffb",[[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-8b79a71e",[[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-030dba13",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[1],show:[64]}]]],["p-095e03af",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-b106a23e",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],invalid:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-9928ba36",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-68cb9574",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[513],actions:[16]}]]],["p-1ca94bcf",[[1,"limel-help",{value:[1],trigger:[1],readMoreLink:[16],openDirection:[513,"open-direction"],isOpen:[32]}]]],["p-d9ad1ebe",[[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-3985cb80",[[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-1c67a941",[[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-82077942",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-027b500e",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-dd034867",[[1,"limel-shortcut",{icon:[513],label:[513],disabled:[516],badge:[520],link:[16]}]]],["p-ce3cf1a1",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-235c7556",[[1,"limel-callout",{heading:[513],icon:[513],type:[513],language:[1]}]]],["p-0345e5c9",[[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-386d1c5a",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],invalid:[516],value:[516],helperText:[513,"helper-text"],fieldId:[32]}]]],["p-7ecb6224",[[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-04996e4f",[[1,"limel-config",{config:[16]}]]],["p-bd62071d",[[1,"limel-flex-container",{direction:[513],justify:[513],align:[513],reverse:[516]}]]],["p-64e352ec",[[1,"limel-form",{schema:[16],value:[16],disabled:[4],propsFactory:[16],transformErrors:[16],errors:[16]}]]],["p-4a04ede1",[[1,"limel-grid"]]],["p-89a75b1e",[[0,"limel-dock-button",{item:[16],expanded:[516],useMobileLayout:[516,"use-mobile-layout"],isOpen:[32]}]]],["p-5903e050",[[1,"limel-color-picker-palette",{value:[513],label:[513],helperText:[513,"helper-text"],required:[516]}]]],["p-b51fd0c7",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-27330d1d",[[1,"limel-helper-line",{helperText:[513,"helper-text"],length:[514],maxLength:[514,"max-length"],invalid:[516],helperTextId:[513,"helper-text-id"]}]]],["p-e5ca6c0c",[[1,"limel-checkbox",{disabled:[516],readonly:[516],invalid:[516],label:[513],helperText:[513,"helper-text"],checked:[516],indeterminate:[516],required:[516],modified:[32]}]]],["p-71282352",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"],subheadingDivider:[1,"subheading-divider"]}]]],["p-86550ce4",[[1,"limel-help-content",{value:[1],readMoreLink:[16]}]]],["p-6a83064c",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]],["p-27d64a5a",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4],currentStep:[4,"current-step"]}]]],["p-8f4d4900",[[1,"limel-circular-progress",{value:[2],maxValue:[2,"max-value"],prefix:[513],suffix:[1],displayPercentageColors:[4,"display-percentage-colors"],size:[513]}]]],["p-f081f064",[[1,"limel-flatpickr-adapter",{value:[16],type:[1],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[1],formatter:[16]}]]],["p-00064897",[[1,"limel-menu",{items:[16],disabled:[516],openDirection:[513,"open-direction"],surfaceWidth:[513,"surface-width"],open:[1540],badgeIcons:[516,"badge-icons"],gridLayout:[516,"grid-layout"],loading:[516],currentSubMenu:[1040],searcher:[16],emptyResultMessage:[1,"empty-result-message"],loadingSubItems:[32],menuBreadCrumb:[32],searchValue:[32],searchResults:[32]}],[1,"limel-breadcrumbs",{items:[16],divider:[1]}],[1,"limel-menu-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}]]],["p-b03c1b71",[[0,"limel-action-bar-overflow-menu",{items:[16],openDirection:[513,"open-direction"]}],[0,"limel-action-bar-item",{item:[16],isVisible:[516,"is-visible"]}]]],["p-8be76471",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516],loadingFailed:[516,"loading-failed"],justLoaded:[32]}]]],["p-920d88db",[[1,"limel-markdown",{value:[1]}]]],["p-b9922526",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516]}]]],["p-67426b7b",[[1,"limel-linear-progress",{value:[514],indeterminate:[516]}]]],["p-953ce801",[[1,"limel-chip-set",{value:[16],type:[513],label:[513],helperText:[513,"helper-text"],disabled:[516],readonly:[516],invalid:[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],selectedChipIds:[32],getEditMode:[64],setFocus:[64],emptyInput:[64]}],[1,"limel-chip",{language:[513],text:[513],icon:[1],link:[16],badge:[520],disabled:[516],readonly:[516],selected:[516],invalid:[516],removable:[516],type:[513],loading:[516],progress:[514],identifier:[520]}]]],["p-b89d2cc3",[[1,"limel-popover",{open:[4],openDirection:[513,"open-direction"]}],[1,"limel-popover-surface",{contentCollection:[16]}]]],["p-552fd521",[[1,"limel-spinner",{size:[513],limeBranded:[4,"lime-branded"]}]]],["p-774ec512",[[1,"limel-badge",{label:[520]}]]],["p-e39732b4",[[1,"limel-tooltip",{elementId:[513,"element-id"],label:[513],helperLabel:[513,"helper-label"],maxlength:[514],openDirection:[513,"open-direction"],open:[32]}],[1,"limel-tooltip-content",{label:[513],helperLabel:[513,"helper-label"],maxlength:[514]}],[1,"limel-portal",{openDirection:[513,"open-direction"],position:[513],containerId:[513,"container-id"],containerStyle:[16],parent:[16],inheritParentWidth:[516,"inherit-parent-width"],visible:[516],anchor:[16]}]]],["p-dfa06174",[[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"],locale:[513],isFocused:[32],isModified:[32],showCompletions:[32]}],[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]}]]]],e)));
+import{p as e,b as l}from"./p-3075aa67.js";export{s as setNonce}from"./p-3075aa67.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l([["p-019675bd",[[1,"limel-action-bar",{actions:[16],accessibleLabel:[513,"accessible-label"],layout:[513],openDirection:[513,"open-direction"],overflowCutoff:[32]}]]],["p-d3f9a2f1",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-c0543a74",[[1,"limel-file-viewer",{url:[513],filename:[513],alt:[513],allowFullscreen:[516,"allow-fullscreen"],allowOpenInNewTab:[516,"allow-open-in-new-tab"],allowDownload:[516,"allow-download"],language:[1],officeViewer:[513,"office-viewer"],actions:[16],isFullscreen:[32],fileType:[32],loading:[32],fileUrl:[32]}]]],["p-a1d841db",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-8d13a44f",[[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],invalid:[516],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-5d140ffb",[[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-8b79a71e",[[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-030dba13",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[1],show:[64]}]]],["p-095e03af",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-b106a23e",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],invalid:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-9928ba36",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-68cb9574",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[513],actions:[16]}]]],["p-1ca94bcf",[[1,"limel-help",{value:[1],trigger:[1],readMoreLink:[16],openDirection:[513,"open-direction"],isOpen:[32]}]]],["p-d9ad1ebe",[[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-3985cb80",[[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-1c67a941",[[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-82077942",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-027b500e",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-dd034867",[[1,"limel-shortcut",{icon:[513],label:[513],disabled:[516],badge:[520],link:[16]}]]],["p-ce3cf1a1",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-235c7556",[[1,"limel-callout",{heading:[513],icon:[513],type:[513],language:[1]}]]],["p-0345e5c9",[[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-386d1c5a",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],invalid:[516],value:[516],helperText:[513,"helper-text"],fieldId:[32]}]]],["p-7ecb6224",[[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-04996e4f",[[1,"limel-config",{config:[16]}]]],["p-bd62071d",[[1,"limel-flex-container",{direction:[513],justify:[513],align:[513],reverse:[516]}]]],["p-64e352ec",[[1,"limel-form",{schema:[16],value:[16],disabled:[4],propsFactory:[16],transformErrors:[16],errors:[16]}]]],["p-4a04ede1",[[1,"limel-grid"]]],["p-89a75b1e",[[0,"limel-dock-button",{item:[16],expanded:[516],useMobileLayout:[516,"use-mobile-layout"],isOpen:[32]}]]],["p-5903e050",[[1,"limel-color-picker-palette",{value:[513],label:[513],helperText:[513,"helper-text"],required:[516]}]]],["p-b51fd0c7",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-27330d1d",[[1,"limel-helper-line",{helperText:[513,"helper-text"],length:[514],maxLength:[514,"max-length"],invalid:[516],helperTextId:[513,"helper-text-id"]}]]],["p-e5ca6c0c",[[1,"limel-checkbox",{disabled:[516],readonly:[516],invalid:[516],label:[513],helperText:[513,"helper-text"],checked:[516],indeterminate:[516],required:[516],modified:[32]}]]],["p-71282352",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"],subheadingDivider:[1,"subheading-divider"]}]]],["p-86550ce4",[[1,"limel-help-content",{value:[1],readMoreLink:[16]}]]],["p-6a83064c",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]],["p-27d64a5a",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4],currentStep:[4,"current-step"]}]]],["p-8f4d4900",[[1,"limel-circular-progress",{value:[2],maxValue:[2,"max-value"],prefix:[513],suffix:[1],displayPercentageColors:[4,"display-percentage-colors"],size:[513]}]]],["p-f081f064",[[1,"limel-flatpickr-adapter",{value:[16],type:[1],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[1],formatter:[16]}]]],["p-00064897",[[1,"limel-menu",{items:[16],disabled:[516],openDirection:[513,"open-direction"],surfaceWidth:[513,"surface-width"],open:[1540],badgeIcons:[516,"badge-icons"],gridLayout:[516,"grid-layout"],loading:[516],currentSubMenu:[1040],searcher:[16],emptyResultMessage:[1,"empty-result-message"],loadingSubItems:[32],menuBreadCrumb:[32],searchValue:[32],searchResults:[32]}],[1,"limel-breadcrumbs",{items:[16],divider:[1]}],[1,"limel-menu-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}]]],["p-b03c1b71",[[0,"limel-action-bar-overflow-menu",{items:[16],openDirection:[513,"open-direction"]}],[0,"limel-action-bar-item",{item:[16],isVisible:[516,"is-visible"]}]]],["p-8be76471",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516],loadingFailed:[516,"loading-failed"],justLoaded:[32]}]]],["p-920d88db",[[1,"limel-markdown",{value:[1]}]]],["p-b9922526",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516]}]]],["p-67426b7b",[[1,"limel-linear-progress",{value:[514],indeterminate:[516]}]]],["p-fb54539a",[[1,"limel-chip-set",{value:[16],type:[513],label:[513],helperText:[513,"helper-text"],disabled:[516],readonly:[516],invalid:[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],selectedChipIds:[32],getEditMode:[64],setFocus:[64],emptyInput:[64]}],[1,"limel-chip",{language:[513],text:[513],icon:[1],link:[16],badge:[520],disabled:[516],readonly:[516],selected:[516],invalid:[516],removable:[516],type:[513],loading:[516],progress:[514],identifier:[520]}]]],["p-b89d2cc3",[[1,"limel-popover",{open:[4],openDirection:[513,"open-direction"]}],[1,"limel-popover-surface",{contentCollection:[16]}]]],["p-552fd521",[[1,"limel-spinner",{size:[513],limeBranded:[4,"lime-branded"]}]]],["p-774ec512",[[1,"limel-badge",{label:[520]}]]],["p-e39732b4",[[1,"limel-tooltip",{elementId:[513,"element-id"],label:[513],helperLabel:[513,"helper-label"],maxlength:[514],openDirection:[513,"open-direction"],open:[32]}],[1,"limel-tooltip-content",{label:[513],helperLabel:[513,"helper-label"],maxlength:[514]}],[1,"limel-portal",{openDirection:[513,"open-direction"],position:[513],containerId:[513,"container-id"],containerStyle:[16],parent:[16],inheritParentWidth:[516,"inherit-parent-width"],visible:[516],anchor:[16]}]]],["p-dfa06174",[[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"],locale:[513],isFocused:[32],isModified:[32],showCompletions:[32]}],[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]}]]]],e)));
 //# sourceMappingURL=lime-elements.esm.js.map

package/dist/lime-elements/p-1ca94bcf.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["helpCss","HelpComponent","this","openPopover","event","stopPropagation","isOpen","onPopoverClose","render","h","open","onClose","openDirection","slot","onClick","class","trigger","value","readMoreLink"],"sources":["./src/components/help/help.scss?tag=limel-help&encapsulation=shadow","./src/components/help/help.tsx"],"sourcesContent":["@use '../../style/mixins';\n\nlimel-popover {\n    display: flex;\n    --popover-surface-width: min(calc(100vw - 4rem), 22rem);\n}\n\nbutton[slot='trigger'] {\n    all: unset;\n\n    @include mixins.is-flat-clickable(\n        $color--hovered: rgb(var(--color-sky-dark)),\n        $background-color: var(--lime-elevated-surface-background-color)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: rgb(var(--color-sky-default));\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px rgb(var(--color-sky-lighter), 0.7);\n    width: 0.875rem;\n    height: 0.875rem;\n    font-size: 0.75rem;\n\n    &.is-open {\n        color: rgb(var(--color-white));\n        background-color: rgb(var(--color-sky-default));\n        box-shadow: var(--button-shadow-inset);\n    }\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Help, Link } from '../../interface';\n\n/**\n * A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n *\n * In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n *\n * Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n *\n * @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n */\n@Component({\n    tag: 'limel-help',\n    shadow: true,\n    styleUrl: 'help.scss',\n})\nexport class HelpComponent implements Help {\n    /**\n     * {@inheritdoc Help.value}\n     */\n    @Prop()\n    public value: string;\n\n    /**\n     * {@inheritdoc Help.trigger}\n     */\n    @Prop()\n    public trigger: string = '?';\n\n    /**\n     * {@inheritdoc Help.readMoreLink}\n     */\n    @Prop()\n    public readMoreLink?: Link;\n\n    /**\n     * {@inheritdoc Help.openDirection}\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'top-start';\n\n    @State()\n    private isOpen = false;\n\n    public render() {\n        return [\n            <limel-popover\n                open={this.isOpen}\n                onClose={this.onPopoverClose}\n                openDirection={this.openDirection}\n            >\n                <button\n                    slot=\"trigger\"\n                    onClick={this.openPopover}\n                    class={{\n                        'is-open': this.isOpen,\n                    }}\n                >\n                    {this.trigger}\n                </button>\n                <limel-help-content\n                    value={this.value}\n                    readMoreLink={this.readMoreLink}\n                />\n            </limel-popover>,\n        ];\n    }\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n}\n"],"mappings":"2CAAA,MAAMA,EAAU,omC,MC8BHC,EAAa,M,yBAoDdC,KAAAC,YAAeC,IACnBA,EAAMC,kBACNH,KAAKI,OAAS,IAAI,EAGdJ,KAAAK,eAAkBH,IACtBA,EAAMC,kBACNH,KAAKI,OAAS,KAAK,E,kCAhDE,I,+CAYa,Y,YAGrB,K,CAEVE,SACH,MAAO,CACHC,EAAA,iBACIC,KAAMR,KAAKI,OACXK,QAAST,KAAKK,eACdK,cAAeV,KAAKU,eAEpBH,EAAA,UACII,KAAK,UACLC,QAASZ,KAAKC,YACdY,MAAO,CACH,UAAWb,KAAKI,SAGnBJ,KAAKc,SAEVP,EAAA,sBACIQ,MAAOf,KAAKe,MACZC,aAAchB,KAAKgB,gB"}
+{"version":3,"names":["helpCss","HelpComponent","this","openPopover","event","stopPropagation","isOpen","onPopoverClose","render","h","open","onClose","openDirection","slot","onClick","class","trigger","value","readMoreLink"],"sources":["./src/components/help/help.scss?tag=limel-help&encapsulation=shadow","./src/components/help/help.tsx"],"sourcesContent":["@use '../../style/mixins';\n\nlimel-popover {\n    display: flex;\n    --popover-surface-width: min(calc(100vw - 4rem), 22rem);\n}\n\nbutton[slot='trigger'] {\n    all: unset;\n\n    @include mixins.is-flat-clickable(\n        $color--hovered: rgb(var(--color-sky-dark)),\n        $background-color: var(--lime-elevated-surface-background-color)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: rgb(var(--color-sky-default));\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px rgb(var(--color-sky-lighter), 0.7);\n    width: 0.875rem;\n    height: 0.875rem;\n    font-size: 0.75rem;\n\n    &.is-open {\n        color: rgb(var(--color-white));\n        background-color: rgb(var(--color-sky-default));\n        box-shadow: var(--button-shadow-inset);\n    }\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Help } from '../help/help.types';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n *\n * In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n *\n * Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n *\n * @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n */\n@Component({\n    tag: 'limel-help',\n    shadow: true,\n    styleUrl: 'help.scss',\n})\nexport class HelpComponent implements Help {\n    /**\n     * {@inheritdoc Help.value}\n     */\n    @Prop()\n    public value: string;\n\n    /**\n     * {@inheritdoc Help.trigger}\n     */\n    @Prop()\n    public trigger: string = '?';\n\n    /**\n     * {@inheritdoc Help.readMoreLink}\n     */\n    @Prop()\n    public readMoreLink?: Link;\n\n    /**\n     * {@inheritdoc Help.openDirection}\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'top-start';\n\n    @State()\n    private isOpen = false;\n\n    public render() {\n        return [\n            <limel-popover\n                open={this.isOpen}\n                onClose={this.onPopoverClose}\n                openDirection={this.openDirection}\n            >\n                <button\n                    slot=\"trigger\"\n                    onClick={this.openPopover}\n                    class={{\n                        'is-open': this.isOpen,\n                    }}\n                >\n                    {this.trigger}\n                </button>\n                <limel-help-content\n                    value={this.value}\n                    readMoreLink={this.readMoreLink}\n                />\n            </limel-popover>,\n        ];\n    }\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n}\n"],"mappings":"2CAAA,MAAMA,EAAU,omC,MC+BHC,EAAa,M,yBAoDdC,KAAAC,YAAeC,IACnBA,EAAMC,kBACNH,KAAKI,OAAS,IAAI,EAGdJ,KAAAK,eAAkBH,IACtBA,EAAMC,kBACNH,KAAKI,OAAS,KAAK,E,kCAhDE,I,+CAYa,Y,YAGrB,K,CAEVE,SACH,MAAO,CACHC,EAAA,iBACIC,KAAMR,KAAKI,OACXK,QAAST,KAAKK,eACdK,cAAeV,KAAKU,eAEpBH,EAAA,UACII,KAAK,UACLC,QAASZ,KAAKC,YACdY,MAAO,CACH,UAAWb,KAAKI,SAGnBJ,KAAKc,SAEVP,EAAA,sBACIQ,MAAOf,KAAKe,MACZC,aAAchB,KAAKgB,gB"}

package/dist/lime-elements/p-27d64a5a.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["progressFlowItemCss","ProgressFlowItem","this","handleClick","interact","emit","render","item","h","tabindex","title","getToolTipText","type","class","step","selected","_a","disabled","isDisabled","readonly","onClick","currentStep","renderIcon","text","renderDivider","renderSecondaryText","secondaryText","join","icon","name","getIconName","size","isOffProgress"],"sources":["./src/components/progress-flow/progress-flow-item/progress-flow-item.scss?tag=limel-progress-flow-item","./src/components/progress-flow/progress-flow-item/progress-flow-item.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n$limel-progress-flow-step-content: 2;\n$limel-progress-flow-divider: 1;\n\n.flow-item {\n    --step-background: var(\n        --progress-flow-step-background-color,\n        rgb(var(--contrast-600))\n    );\n    --step-background--selected: var(\n        --progress-flow-step-background-color--selected,\n        var(--mdc-theme-primary)\n    );\n    --step-background--passed: var(\n        --progress-flow-step-background-color--passed,\n        var(--step-background--selected)\n    );\n\n    --step-text: var(\n        --progress-flow-step-text-color,\n        rgb(var(--contrast-1200))\n    );\n    --step-text--selected: var(\n        --progress-flow-step-text-color--selected,\n        var(--mdc-theme-on-primary)\n    );\n    --step-text--passed: var(\n        --progress-flow-step-text-color--passed,\n        var(--step-text--selected)\n    );\n\n    --step-divider-color: var(\n        --progress-flow-step-divider-color,\n        rgb(var(--contrast-100))\n    );\n\n    position: relative;\n    width: 100%;\n\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n\n    &:not(.off-progress-item, .last) {\n        .divider {\n            &:after {\n                content: '';\n            }\n        }\n    }\n\n    &.off-progress-item {\n        padding-left: functions.pxToRem(8);\n    }\n\n    &.first-off-progress-item {\n        padding-left: functions.pxToRem(16);\n    }\n}\n\n.step {\n    transition:\n        background-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    width: 100%;\n    height: var(--step-height);\n    border: none;\n    font-size: functions.pxToRem(14);\n\n    &.disabled {\n        cursor: not-allowed;\n\n        &.readonly {\n            opacity: 1;\n            cursor: default;\n        }\n    }\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        box-shadow: var(--shadow-depth-8-focused);\n    }\n\n    .flow-item:not(.off-progress-item, .first) & {\n        padding-left: calc(var(--step-height) / 2);\n    }\n\n    .flow-item:not(.selected) & {\n        &:not(.disabled) {\n            cursor: pointer;\n            &:hover {\n                box-shadow: var(--button-shadow-normal);\n            }\n            &:active {\n                box-shadow: var(--button-shadow-pressed);\n            }\n        }\n    }\n\n    .off-progress-item & {\n        border-radius: functions.pxToRem(4);\n        padding: 0 functions.pxToRem(12);\n\n        .icon {\n            margin-left: 0;\n        }\n    }\n    .flow-item.first & {\n        border-top-left-radius: var(--step-height);\n        border-bottom-left-radius: var(--step-height);\n        padding-left: functions.pxToRem(20);\n    }\n    .flow-item.last & {\n        border-top-right-radius: var(--step-height);\n        border-bottom-right-radius: var(--step-height);\n        padding-right: functions.pxToRem(20);\n    }\n}\n\n.divider {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--step-height);\n    height: var(--step-height);\n\n    position: absolute;\n    z-index: $limel-progress-flow-divider;\n    right: calc(var(--step-height) / 2 * -1);\n    overflow: hidden;\n\n    &:after {\n        position: absolute;\n        display: block;\n\n        box-sizing: border-box;\n        transition: background-color 0.2s ease;\n\n        width: 100%;\n        height: 100%;\n        right: calc(var(--step-height) / 5);\n        transform: rotate(45deg);\n        border: {\n            style: solid;\n            width: functions.pxToRem(2) functions.pxToRem(2) 0 0;\n            radius: 0 functions.pxToRem(8) 0 0;\n            color: var(--step-divider-color);\n        }\n    }\n    .flow-item.last & {\n        width: 0;\n    }\n}\n\n.text,\n.secondary-text {\n    @include mixins.truncate-text();\n    max-width: var(--max-text-width);\n    z-index: $limel-progress-flow-step-content;\n}\n\n.secondary-text {\n    font-size: functions.pxToRem(12);\n    margin: auto;\n    padding-left: calc(var(--step-height) / 2);\n}\n\n.icon {\n    margin: 0 functions.pxToRem(8) 0 functions.pxToRem(4);\n    z-index: $limel-progress-flow-step-content;\n}\n\n@import './partial-styles/_selected-indicator';\n@import './partial-styles/_colors';\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { FlowItem } from '../progress-flow.types';\nimport { getIconName } from 'src/components/icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-progress-flow-item',\n    shadow: false,\n    styleUrl: 'progress-flow-item.scss',\n})\nexport class ProgressFlowItem {\n    @Element()\n    public element: HTMLLimelProgressFlowItemElement;\n\n    /**\n     * The flow item that should be rendered\n     */\n    @Prop()\n    public item: FlowItem = null;\n\n    /**\n     * True if the flow item should be disabled\n     */\n    @Prop()\n    public disabled = false;\n\n    /**\n     * True if the flow item should be readonly\n     */\n    @Prop()\n    public readonly = false;\n\n    /**\n     * True for current step\n     */\n    @Prop()\n    public currentStep: boolean = false;\n\n    /**\n     * Fired when clicking on the flow item\n     */\n    @Event()\n    public interact: EventEmitter<void>;\n\n    public render() {\n        if (!this.item) {\n            return;\n        }\n\n        return [\n            <button\n                tabindex=\"0\"\n                title={this.getToolTipText()}\n                type=\"button\"\n                class={{\n                    step: true,\n                    selected: this.item?.selected,\n                    disabled: this.isDisabled(),\n                    readonly: this.readonly,\n                }}\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n                aria-current={this.currentStep ? 'step' : null}\n            >\n                {this.renderIcon()}\n                <span class=\"text\">{this.item.text}</span>\n                {this.renderDivider()}\n            </button>,\n            this.renderSecondaryText(),\n        ];\n    }\n\n    private isDisabled() {\n        return this.item?.disabled || this.readonly || this.disabled;\n    }\n\n    private getToolTipText() {\n        if (!this.item.secondaryText) {\n            return this.item.text;\n        }\n\n        return [this.item.text, this.item.secondaryText].join(' · ');\n    }\n\n    private handleClick = () => {\n        this.interact.emit();\n    };\n\n    private renderSecondaryText() {\n        if (!this.item?.secondaryText) {\n            return;\n        }\n\n        return <div class=\"secondary-text\">{this.item.secondaryText}</div>;\n    }\n\n    private renderIcon() {\n        if (!this.item.icon) {\n            return;\n        }\n\n        const name = getIconName(this.item.icon);\n\n        return <limel-icon name={name} size=\"small\" class=\"icon\" />;\n    }\n\n    private renderDivider() {\n        if (this.item.isOffProgress) {\n            return;\n        }\n\n        return <div class=\"divider\" />;\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAsB,k/J,MCmBfC,EAAgB,M,4DA0EjBC,KAAAC,YAAc,KAClBD,KAAKE,SAASC,MAAM,E,UAnEA,K,cAMN,M,cAMA,M,iBAMY,K,CAQvBC,S,MACH,IAAKJ,KAAKK,KAAM,CACZ,M,CAGJ,MAAO,CACHC,EAAA,UACIC,SAAS,IACTC,MAAOR,KAAKS,iBACZC,KAAK,SACLC,MAAO,CACHC,KAAM,KACNC,UAAUC,EAAAd,KAAKK,QAAI,MAAAS,SAAA,SAAAA,EAAED,SACrBE,SAAUf,KAAKgB,aACfC,SAAUjB,KAAKiB,UAEnBC,QAASlB,KAAKC,YACdc,SAAUf,KAAKgB,aAAY,eACbhB,KAAKmB,YAAc,OAAS,MAEzCnB,KAAKoB,aACNd,EAAA,QAAMK,MAAM,QAAQX,KAAKK,KAAKgB,MAC7BrB,KAAKsB,iBAEVtB,KAAKuB,sB,CAILP,a,MACJ,QAAOF,EAAAd,KAAKK,QAAI,MAAAS,SAAA,SAAAA,EAAEC,WAAYf,KAAKiB,UAAYjB,KAAKe,Q,CAGhDN,iBACJ,IAAKT,KAAKK,KAAKmB,cAAe,CAC1B,OAAOxB,KAAKK,KAAKgB,I,CAGrB,MAAO,CAACrB,KAAKK,KAAKgB,KAAMrB,KAAKK,KAAKmB,eAAeC,KAAK,M,CAOlDF,sB,MACJ,MAAKT,EAAAd,KAAKK,QAAI,MAAAS,SAAA,SAAAA,EAAEU,eAAe,CAC3B,M,CAGJ,OAAOlB,EAAA,OAAKK,MAAM,kBAAkBX,KAAKK,KAAKmB,c,CAG1CJ,aACJ,IAAKpB,KAAKK,KAAKqB,KAAM,CACjB,M,CAGJ,MAAMC,EAAOC,EAAY5B,KAAKK,KAAKqB,MAEnC,OAAOpB,EAAA,cAAYqB,KAAMA,EAAME,KAAK,QAAQlB,MAAM,Q,CAG9CW,gBACJ,GAAItB,KAAKK,KAAKyB,cAAe,CACzB,M,CAGJ,OAAOxB,EAAA,OAAKK,MAAM,W"}
+{"version":3,"names":["progressFlowItemCss","ProgressFlowItem","this","handleClick","interact","emit","render","item","h","tabindex","title","getToolTipText","type","class","step","selected","_a","disabled","isDisabled","readonly","onClick","currentStep","renderIcon","text","renderDivider","renderSecondaryText","secondaryText","join","icon","name","getIconName","size","isOffProgress"],"sources":["./src/components/progress-flow/progress-flow-item/progress-flow-item.scss?tag=limel-progress-flow-item","./src/components/progress-flow/progress-flow-item/progress-flow-item.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n$limel-progress-flow-step-content: 2;\n$limel-progress-flow-divider: 1;\n\n.flow-item {\n    --step-background: var(\n        --progress-flow-step-background-color,\n        rgb(var(--contrast-600))\n    );\n    --step-background--selected: var(\n        --progress-flow-step-background-color--selected,\n        var(--mdc-theme-primary)\n    );\n    --step-background--passed: var(\n        --progress-flow-step-background-color--passed,\n        var(--step-background--selected)\n    );\n\n    --step-text: var(\n        --progress-flow-step-text-color,\n        rgb(var(--contrast-1200))\n    );\n    --step-text--selected: var(\n        --progress-flow-step-text-color--selected,\n        var(--mdc-theme-on-primary)\n    );\n    --step-text--passed: var(\n        --progress-flow-step-text-color--passed,\n        var(--step-text--selected)\n    );\n\n    --step-divider-color: var(\n        --progress-flow-step-divider-color,\n        rgb(var(--contrast-100))\n    );\n\n    position: relative;\n    width: 100%;\n\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n\n    &:not(.off-progress-item, .last) {\n        .divider {\n            &:after {\n                content: '';\n            }\n        }\n    }\n\n    &.off-progress-item {\n        padding-left: functions.pxToRem(8);\n    }\n\n    &.first-off-progress-item {\n        padding-left: functions.pxToRem(16);\n    }\n}\n\n.step {\n    transition:\n        background-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    width: 100%;\n    height: var(--step-height);\n    border: none;\n    font-size: functions.pxToRem(14);\n\n    &.disabled {\n        cursor: not-allowed;\n\n        &.readonly {\n            opacity: 1;\n            cursor: default;\n        }\n    }\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        box-shadow: var(--shadow-depth-8-focused);\n    }\n\n    .flow-item:not(.off-progress-item, .first) & {\n        padding-left: calc(var(--step-height) / 2);\n    }\n\n    .flow-item:not(.selected) & {\n        &:not(.disabled) {\n            cursor: pointer;\n            &:hover {\n                box-shadow: var(--button-shadow-normal);\n            }\n            &:active {\n                box-shadow: var(--button-shadow-pressed);\n            }\n        }\n    }\n\n    .off-progress-item & {\n        border-radius: functions.pxToRem(4);\n        padding: 0 functions.pxToRem(12);\n\n        .icon {\n            margin-left: 0;\n        }\n    }\n    .flow-item.first & {\n        border-top-left-radius: var(--step-height);\n        border-bottom-left-radius: var(--step-height);\n        padding-left: functions.pxToRem(20);\n    }\n    .flow-item.last & {\n        border-top-right-radius: var(--step-height);\n        border-bottom-right-radius: var(--step-height);\n        padding-right: functions.pxToRem(20);\n    }\n}\n\n.divider {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--step-height);\n    height: var(--step-height);\n\n    position: absolute;\n    z-index: $limel-progress-flow-divider;\n    right: calc(var(--step-height) / 2 * -1);\n    overflow: hidden;\n\n    &:after {\n        position: absolute;\n        display: block;\n\n        box-sizing: border-box;\n        transition: background-color 0.2s ease;\n\n        width: 100%;\n        height: 100%;\n        right: calc(var(--step-height) / 5);\n        transform: rotate(45deg);\n        border: {\n            style: solid;\n            width: functions.pxToRem(2) functions.pxToRem(2) 0 0;\n            radius: 0 functions.pxToRem(8) 0 0;\n            color: var(--step-divider-color);\n        }\n    }\n    .flow-item.last & {\n        width: 0;\n    }\n}\n\n.text,\n.secondary-text {\n    @include mixins.truncate-text();\n    max-width: var(--max-text-width);\n    z-index: $limel-progress-flow-step-content;\n}\n\n.secondary-text {\n    font-size: functions.pxToRem(12);\n    margin: auto;\n    padding-left: calc(var(--step-height) / 2);\n}\n\n.icon {\n    margin: 0 functions.pxToRem(8) 0 functions.pxToRem(4);\n    z-index: $limel-progress-flow-step-content;\n}\n\n@import './partial-styles/_selected-indicator';\n@import './partial-styles/_colors';\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { FlowItem } from '../progress-flow.types';\nimport { getIconName } from '../../icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-progress-flow-item',\n    shadow: false,\n    styleUrl: 'progress-flow-item.scss',\n})\nexport class ProgressFlowItem {\n    @Element()\n    public element: HTMLLimelProgressFlowItemElement;\n\n    /**\n     * The flow item that should be rendered\n     */\n    @Prop()\n    public item: FlowItem = null;\n\n    /**\n     * True if the flow item should be disabled\n     */\n    @Prop()\n    public disabled = false;\n\n    /**\n     * True if the flow item should be readonly\n     */\n    @Prop()\n    public readonly = false;\n\n    /**\n     * True for current step\n     */\n    @Prop()\n    public currentStep: boolean = false;\n\n    /**\n     * Fired when clicking on the flow item\n     */\n    @Event()\n    public interact: EventEmitter<void>;\n\n    public render() {\n        if (!this.item) {\n            return;\n        }\n\n        return [\n            <button\n                tabindex=\"0\"\n                title={this.getToolTipText()}\n                type=\"button\"\n                class={{\n                    step: true,\n                    selected: this.item?.selected,\n                    disabled: this.isDisabled(),\n                    readonly: this.readonly,\n                }}\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n                aria-current={this.currentStep ? 'step' : null}\n            >\n                {this.renderIcon()}\n                <span class=\"text\">{this.item.text}</span>\n                {this.renderDivider()}\n            </button>,\n            this.renderSecondaryText(),\n        ];\n    }\n\n    private isDisabled() {\n        return this.item?.disabled || this.readonly || this.disabled;\n    }\n\n    private getToolTipText() {\n        if (!this.item.secondaryText) {\n            return this.item.text;\n        }\n\n        return [this.item.text, this.item.secondaryText].join(' · ');\n    }\n\n    private handleClick = () => {\n        this.interact.emit();\n    };\n\n    private renderSecondaryText() {\n        if (!this.item?.secondaryText) {\n            return;\n        }\n\n        return <div class=\"secondary-text\">{this.item.secondaryText}</div>;\n    }\n\n    private renderIcon() {\n        if (!this.item.icon) {\n            return;\n        }\n\n        const name = getIconName(this.item.icon);\n\n        return <limel-icon name={name} size=\"small\" class=\"icon\" />;\n    }\n\n    private renderDivider() {\n        if (this.item.isOffProgress) {\n            return;\n        }\n\n        return <div class=\"divider\" />;\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAsB,k/J,MCmBfC,EAAgB,M,4DA0EjBC,KAAAC,YAAc,KAClBD,KAAKE,SAASC,MAAM,E,UAnEA,K,cAMN,M,cAMA,M,iBAMY,K,CAQvBC,S,MACH,IAAKJ,KAAKK,KAAM,CACZ,M,CAGJ,MAAO,CACHC,EAAA,UACIC,SAAS,IACTC,MAAOR,KAAKS,iBACZC,KAAK,SACLC,MAAO,CACHC,KAAM,KACNC,UAAUC,EAAAd,KAAKK,QAAI,MAAAS,SAAA,SAAAA,EAAED,SACrBE,SAAUf,KAAKgB,aACfC,SAAUjB,KAAKiB,UAEnBC,QAASlB,KAAKC,YACdc,SAAUf,KAAKgB,aAAY,eACbhB,KAAKmB,YAAc,OAAS,MAEzCnB,KAAKoB,aACNd,EAAA,QAAMK,MAAM,QAAQX,KAAKK,KAAKgB,MAC7BrB,KAAKsB,iBAEVtB,KAAKuB,sB,CAILP,a,MACJ,QAAOF,EAAAd,KAAKK,QAAI,MAAAS,SAAA,SAAAA,EAAEC,WAAYf,KAAKiB,UAAYjB,KAAKe,Q,CAGhDN,iBACJ,IAAKT,KAAKK,KAAKmB,cAAe,CAC1B,OAAOxB,KAAKK,KAAKgB,I,CAGrB,MAAO,CAACrB,KAAKK,KAAKgB,KAAMrB,KAAKK,KAAKmB,eAAeC,KAAK,M,CAOlDF,sB,MACJ,MAAKT,EAAAd,KAAKK,QAAI,MAAAS,SAAA,SAAAA,EAAEU,eAAe,CAC3B,M,CAGJ,OAAOlB,EAAA,OAAKK,MAAM,kBAAkBX,KAAKK,KAAKmB,c,CAG1CJ,aACJ,IAAKpB,KAAKK,KAAKqB,KAAM,CACjB,M,CAGJ,MAAMC,EAAOC,EAAY5B,KAAKK,KAAKqB,MAEnC,OAAOpB,EAAA,cAAYqB,KAAMA,EAAME,KAAK,QAAQlB,MAAM,Q,CAG9CW,gBACJ,GAAItB,KAAKK,KAAKyB,cAAe,CACzB,M,CAGJ,OAAOxB,EAAA,OAAKK,MAAM,W"}

package/dist/lime-elements/p-2f777fdb.js.map

@@ -1 +1 @@
-{"version":3,"names":["getIconName","icon","name","undefined","getIconColor","iconColor","color","getIconFillColor","iconFillColor","getIconBackgroundColor","iconBackgroundColor","backgroundColor"],"sources":["./src/components/icon/get-icon-props.ts"],"sourcesContent":["import { Icon } from '../../interface';\n\n/**\n * Get the icon name.\n * This helps in setting the right icon, both if the consumer only types `icon: string`,\n * and if they use the `Icon` interface for writing the icon name.\n *\n * @param icon - The icon to retrieve the name from.\n * @returns - The icon name or the provided string, or `undefined` if `icon` is falsy.\n */\nexport function getIconName(\n    icon: string | Icon | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'name' in icon) {\n        return icon.name;\n    }\n\n    if (typeof icon === 'string') {\n        return icon;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconColor`\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconColor: string`.\n *\n * @param icon - The icon to retrieve the color from.\n * @param iconColor - The color to use when the deprecated `iconColor` is used.\n * @returns - The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconColor(\n    icon: string | Icon | undefined,\n    iconColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconFillColor` is\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconFillColor: string`.\n *\n * @param icon - The icon to retrieve the color from.\n * @param iconFillColor - The color to use when `iconFillColor` is used.\n * @returns - The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconFillColor(\n    icon: string | Icon | undefined,\n    iconFillColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconFillColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon background color.\n * This function is used to retrieve the background color associated with an icon,\n * whether provided as a string or using the `Icon` interface.\n *\n * @param icon - The icon to retrieve the background color from.\n * @param iconBackgroundColor - The background color to use when provided explicitly.\n * @returns - The icon background color or the provided background color string, or `undefined` if `iconBackgroundColor` is falsy.\n */\nexport function getIconBackgroundColor(\n    icon: string | Icon | undefined,\n    iconBackgroundColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'backgroundColor' in icon) {\n        return icon.backgroundColor;\n    }\n\n    if (typeof icon === 'string') {\n        return iconBackgroundColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon title.\n * This function is used to retrieve the title associated with an icon, whether provided as a string or using the `Icon` interface.\n *\n * @param icon - The icon to retrieve the title from.\n * @param iconTitle - The title to use when provided explicitly.\n * @returns - The icon title or the provided title string, or `undefined` if `iconTitle` is falsy.\n */\nexport function getIconTitle(\n    icon: string | Icon | undefined,\n    iconTitle?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'title' in icon) {\n        return icon.title;\n    }\n\n    if (typeof icon === 'string') {\n        return iconTitle;\n    }\n\n    return undefined;\n}\n"],"mappings":"SAUgBA,EACZC,GAEA,KAAMA,UAAeA,IAAS,UAAY,SAAUA,EAAM,CACtD,OAAOA,EAAKC,I,CAGhB,UAAWD,IAAS,SAAU,CAC1B,OAAOA,C,CAGX,OAAOE,SACX,C,SAagBC,EACZH,EACAI,GAEA,KAAMJ,UAAeA,IAAS,UAAY,UAAWA,EAAM,CACvD,OAAOA,EAAKK,K,CAGhB,UAAWL,IAAS,SAAU,CAC1B,OAAOI,C,CAGX,OAAOF,SACX,C,SAagBI,EACZN,EACAO,GAEA,KAAMP,UAAeA,IAAS,UAAY,UAAWA,EAAM,CACvD,OAAOA,EAAKK,K,CAGhB,UAAWL,IAAS,SAAU,CAC1B,OAAOO,C,CAGX,OAAOL,SACX,C,SAWgBM,EACZR,EACAS,GAEA,KAAMT,UAAeA,IAAS,UAAY,oBAAqBA,EAAM,CACjE,OAAOA,EAAKU,e,CAGhB,UAAWV,IAAS,SAAU,CAC1B,OAAOS,C,CAGX,OAAOP,SACX,Q"}
+{"version":3,"names":["getIconName","icon","name","undefined","getIconColor","iconColor","color","getIconFillColor","iconFillColor","getIconBackgroundColor","iconBackgroundColor","backgroundColor"],"sources":["./src/components/icon/get-icon-props.ts"],"sourcesContent":["import { Icon } from '../../global/shared-types/icon.types';\n\n/**\n * Get the icon name.\n * This helps in setting the right icon, both if the consumer only types `icon: string`,\n * and if they use the `Icon` interface for writing the icon name.\n *\n * @param icon - The icon to retrieve the name from.\n * @returns - The icon name or the provided string, or `undefined` if `icon` is falsy.\n */\nexport function getIconName(\n    icon: string | Icon | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'name' in icon) {\n        return icon.name;\n    }\n\n    if (typeof icon === 'string') {\n        return icon;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconColor`\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconColor: string`.\n *\n * @param icon - The icon to retrieve the color from.\n * @param iconColor - The color to use when the deprecated `iconColor` is used.\n * @returns - The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconColor(\n    icon: string | Icon | undefined,\n    iconColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconFillColor` is\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconFillColor: string`.\n *\n * @param icon - The icon to retrieve the color from.\n * @param iconFillColor - The color to use when `iconFillColor` is used.\n * @returns - The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconFillColor(\n    icon: string | Icon | undefined,\n    iconFillColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconFillColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon background color.\n * This function is used to retrieve the background color associated with an icon,\n * whether provided as a string or using the `Icon` interface.\n *\n * @param icon - The icon to retrieve the background color from.\n * @param iconBackgroundColor - The background color to use when provided explicitly.\n * @returns - The icon background color or the provided background color string, or `undefined` if `iconBackgroundColor` is falsy.\n */\nexport function getIconBackgroundColor(\n    icon: string | Icon | undefined,\n    iconBackgroundColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'backgroundColor' in icon) {\n        return icon.backgroundColor;\n    }\n\n    if (typeof icon === 'string') {\n        return iconBackgroundColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon title.\n * This function is used to retrieve the title associated with an icon, whether provided as a string or using the `Icon` interface.\n *\n * @param icon - The icon to retrieve the title from.\n * @param iconTitle - The title to use when provided explicitly.\n * @returns - The icon title or the provided title string, or `undefined` if `iconTitle` is falsy.\n */\nexport function getIconTitle(\n    icon: string | Icon | undefined,\n    iconTitle?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'title' in icon) {\n        return icon.title;\n    }\n\n    if (typeof icon === 'string') {\n        return iconTitle;\n    }\n\n    return undefined;\n}\n"],"mappings":"SAUgBA,EACZC,GAEA,KAAMA,UAAeA,IAAS,UAAY,SAAUA,EAAM,CACtD,OAAOA,EAAKC,I,CAGhB,UAAWD,IAAS,SAAU,CAC1B,OAAOA,C,CAGX,OAAOE,SACX,C,SAagBC,EACZH,EACAI,GAEA,KAAMJ,UAAeA,IAAS,UAAY,UAAWA,EAAM,CACvD,OAAOA,EAAKK,K,CAGhB,UAAWL,IAAS,SAAU,CAC1B,OAAOI,C,CAGX,OAAOF,SACX,C,SAagBI,EACZN,EACAO,GAEA,KAAMP,UAAeA,IAAS,UAAY,UAAWA,EAAM,CACvD,OAAOA,EAAKK,K,CAGhB,UAAWL,IAAS,SAAU,CAC1B,OAAOO,C,CAGX,OAAOL,SACX,C,SAWgBM,EACZR,EACAS,GAEA,KAAMT,UAAeA,IAAS,UAAY,oBAAqBA,EAAM,CACjE,OAAOA,EAAKU,e,CAGhB,UAAWV,IAAS,SAAU,CAC1B,OAAOS,C,CAGX,OAAOP,SACX,Q"}

package/dist/lime-elements/p-386d1c5a.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["CssClasses","Selectors","observeProperty","target","property","observer","targetObservers","installObserver","observers","getObservers","push","splice","indexOf","allTargetObservers","WeakMap","observersMap","Map","has","set","isEnabled","key","get","installedProperties","Set","descriptor","getDescriptor","configurable","enumerable","value","writable","observedDescriptor","__assign","descGet","descSet","value_1","newValue","call","this","e_4","_a","previous","_b","__values","_c","next","done","e_4_1","error","return","add","Object","defineProperty","descriptorTarget","getOwnPropertyDescriptor","getPrototypeOf","setObserversEnabled","enabled","MDCObserverFoundation","_super","__extends","adapter","_this","unobserves","prototype","destroy","unobserve","observe","e_1","cleanup","keys","bind","e_1_1","e_2","cleanup_1","cleanup_1_1","cleanupFn","e_2_1","delete","e_3","__spreadArray","__read","e_3_1","MDCFoundation","MDCSwitchFoundation","handleClick","init","state","disabled","stopProcessingIfDisabled","processing","selected","MDCSwitchRenderFoundation","apply","arguments","onDisabledChange","onProcessingChange","onSelectedChange","initFromDOM","hasClass","SELECTED","isDisabled","PROCESSING","setDisabled","toggleClass","setAriaChecked","String","UNSELECTED","addClass","className","removeClass","MDCSwitch","root","foundation","attachTo","initialize","ripple","MDCRipple","createRippleFoundation","initialSyncWithDOM","rippleElement","querySelector","RIPPLE","Error","addEventListener","removeEventListener","getDefaultFoundation","createAdapter","classList","contains","remove","ariaChecked","setAttribute","MDCRippleFoundation","createRippleAdapter","computeBoundingRect","getBoundingClientRect","isUnbounded","MDCComponent","switchCss","Switch","helperTextId","createRandomString","renderHelperLine","hasHelperText","h","helperText","invalid","undefined","event","stopPropagation","change","emit","connectedCallback","componentWillLoad","makeEnterClickable","host","componentDidLoad","element","shadowRoot","mdcSwitch","disconnectedCallback","removeEnterClickable","render","Host","id","fieldId","class","readonly","type","role","onClick","viewBox","d","htmlFor","label","valueWatcher"],"sources":["./node_modules/@material/switch/constants.js","./node_modules/@material/base/observer.js","./node_modules/@material/base/observer-foundation.js","./node_modules/@material/switch/foundation.js","./node_modules/@material/switch/component.js","./src/components/switch/switch.scss?tag=limel-switch&encapsulation=shadow","./src/components/switch/switch.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n/**\n * CSS classes used for switch.\n */\nexport var CssClasses;\n(function (CssClasses) {\n    CssClasses[\"PROCESSING\"] = \"mdc-switch--processing\";\n    CssClasses[\"SELECTED\"] = \"mdc-switch--selected\";\n    CssClasses[\"UNSELECTED\"] = \"mdc-switch--unselected\";\n})(CssClasses || (CssClasses = {}));\n/**\n * Query selectors used for switch.\n */\nexport var Selectors;\n(function (Selectors) {\n    Selectors[\"RIPPLE\"] = \".mdc-switch__ripple\";\n})(Selectors || (Selectors = {}));\n//# sourceMappingURL=constants.js.map","/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nimport { __assign, __extends, __read, __spreadArray, __values } from \"tslib\";\n/**\n * Mixin to add `MDCObserver` functionality to an optional base class.\n *\n * @deprecated Prefer MDCObserverFoundation for stricter closure compliance.\n * @template C Optional base class constructor type.\n * @param baseClass - Optional base class.\n * @return A class that extends the optional base class with `MDCObserver`\n *     functionality.\n */\nexport function mdcObserver(baseClass) {\n    if (baseClass === void 0) { baseClass = /** @class */ (function () {\n        function class_1() {\n        }\n        return class_1;\n    }()); }\n    // Mixin classes cannot use private members and Symbol() cannot be used in 3P\n    // for IE11.\n    var unobserveMap = new WeakMap();\n    return /** @class */ (function (_super) {\n        __extends(MDCObserver, _super);\n        function MDCObserver() {\n            return _super !== null && _super.apply(this, arguments) || this;\n        }\n        MDCObserver.prototype.observe = function (target, observers) {\n            var e_1, _a;\n            var _this = this;\n            var cleanup = [];\n            try {\n                for (var _b = __values(Object.keys(observers)), _c = _b.next(); !_c.done; _c = _b.next()) {\n                    var property = _c.value;\n                    var observer = observers[property].bind(this);\n                    cleanup.push(observeProperty(target, property, observer));\n                }\n            }\n            catch (e_1_1) { e_1 = { error: e_1_1 }; }\n            finally {\n                try {\n                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);\n                }\n                finally { if (e_1) throw e_1.error; }\n            }\n            var unobserve = function () {\n                var e_2, _a;\n                try {\n                    for (var cleanup_1 = __values(cleanup), cleanup_1_1 = cleanup_1.next(); !cleanup_1_1.done; cleanup_1_1 = cleanup_1.next()) {\n                        var cleanupFn = cleanup_1_1.value;\n                        cleanupFn();\n                    }\n                }\n                catch (e_2_1) { e_2 = { error: e_2_1 }; }\n                finally {\n                    try {\n                        if (cleanup_1_1 && !cleanup_1_1.done && (_a = cleanup_1.return)) _a.call(cleanup_1);\n                    }\n                    finally { if (e_2) throw e_2.error; }\n                }\n                var unobserves = unobserveMap.get(_this) || [];\n                var index = unobserves.indexOf(unobserve);\n                if (index > -1) {\n                    unobserves.splice(index, 1);\n                }\n            };\n            var unobserves = unobserveMap.get(this);\n            if (!unobserves) {\n                unobserves = [];\n                unobserveMap.set(this, unobserves);\n            }\n            unobserves.push(unobserve);\n            return unobserve;\n        };\n        MDCObserver.prototype.setObserversEnabled = function (target, enabled) {\n            setObserversEnabled(target, enabled);\n        };\n        MDCObserver.prototype.unobserve = function () {\n            var e_3, _a;\n            // Iterate over a copy since unobserve() will remove themselves from the\n            // array\n            var unobserves = unobserveMap.get(this) || [];\n            try {\n                for (var _b = __values(__spreadArray([], __read(unobserves))), _c = _b.next(); !_c.done; _c = _b.next()) {\n                    var unobserve = _c.value;\n                    unobserve();\n                }\n            }\n            catch (e_3_1) { e_3 = { error: e_3_1 }; }\n            finally {\n                try {\n                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);\n                }\n                finally { if (e_3) throw e_3.error; }\n            }\n        };\n        return MDCObserver;\n    }(baseClass));\n}\n/**\n * Observe a target's property for changes. When a property changes, the\n * provided `Observer` function will be invoked with the properties current and\n * previous values.\n *\n * The returned cleanup function will stop listening to changes for the\n * provided `Observer`.\n *\n * @template T The observed target type.\n * @template K The observed property.\n * @param target - The target to observe.\n * @param property - The property of the target to observe.\n * @param observer - An observer function to invoke each time the property\n *     changes.\n * @return A cleanup function that will stop observing changes for the provided\n *     `Observer`.\n */\nexport function observeProperty(target, property, observer) {\n    var targetObservers = installObserver(target, property);\n    var observers = targetObservers.getObservers(property);\n    observers.push(observer);\n    return function () {\n        observers.splice(observers.indexOf(observer), 1);\n    };\n}\n/**\n * A Map of all `TargetObservers` that have been installed.\n */\nvar allTargetObservers = new WeakMap();\n/**\n * Installs a `TargetObservers` for the provided target (if not already\n * installed), and replaces the given property with a getter and setter that\n * will respond to changes and call `TargetObservers`.\n *\n * Subsequent calls to `installObserver()` with the same target and property\n * will not override the property's previously installed getter/setter.\n *\n * @template T The observed target type.\n * @template K The observed property to create a getter/setter for.\n * @param target - The target to observe.\n * @param property - The property to create a getter/setter for, if needed.\n * @return The installed `TargetObservers` for the provided target.\n */\nfunction installObserver(target, property) {\n    var observersMap = new Map();\n    if (!allTargetObservers.has(target)) {\n        allTargetObservers.set(target, {\n            isEnabled: true,\n            getObservers: function (key) {\n                var observers = observersMap.get(key) || [];\n                if (!observersMap.has(key)) {\n                    observersMap.set(key, observers);\n                }\n                return observers;\n            },\n            installedProperties: new Set()\n        });\n    }\n    var targetObservers = allTargetObservers.get(target);\n    if (targetObservers.installedProperties.has(property)) {\n        // The getter/setter has already been replaced for this property\n        return targetObservers;\n    }\n    // Retrieve (or create if it's a plain property) the original descriptor from\n    // the target...\n    var descriptor = getDescriptor(target, property) || {\n        configurable: true,\n        enumerable: true,\n        value: target[property],\n        writable: true\n    };\n    // ...and create a copy that will be used for the observer.\n    var observedDescriptor = __assign({}, descriptor);\n    var descGet = descriptor.get, descSet = descriptor.set;\n    if ('value' in descriptor) {\n        // The descriptor is a simple value (not a getter/setter).\n        // For our observer descriptor that we copied, delete the value/writable\n        // properties, since they are incompatible with the get/set properties\n        // for descriptors.\n        delete observedDescriptor.value;\n        delete observedDescriptor.writable;\n        // Set up a simple getter...\n        var value_1 = descriptor.value;\n        descGet = function () { return value_1; };\n        // ...and setter (if the original property was writable).\n        if (descriptor.writable) {\n            descSet = function (newValue) {\n                value_1 = newValue;\n            };\n        }\n    }\n    if (descGet) {\n        observedDescriptor.get = function () {\n            // `this as T` needed for closure conformance\n            return descGet.call(this);\n        };\n    }\n    if (descSet) {\n        observedDescriptor.set = function (newValue) {\n            var e_4, _a;\n            // `thus as T` needed for closure conformance\n            var previous = descGet ? descGet.call(this) : newValue;\n            descSet.call(this, newValue);\n            if (targetObservers.isEnabled && (!descGet || newValue !== previous)) {\n                try {\n                    for (var _b = __values(targetObservers.getObservers(property)), _c = _b.next(); !_c.done; _c = _b.next()) {\n                        var observer = _c.value;\n                        observer(newValue, previous);\n                    }\n                }\n                catch (e_4_1) { e_4 = { error: e_4_1 }; }\n                finally {\n                    try {\n                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);\n                    }\n                    finally { if (e_4) throw e_4.error; }\n                }\n            }\n        };\n    }\n    targetObservers.installedProperties.add(property);\n    Object.defineProperty(target, property, observedDescriptor);\n    return targetObservers;\n}\n/**\n * Retrieves the descriptor for a property from the provided target. This\n * function will walk up the target's prototype chain to search for the\n * descriptor.\n *\n * @template T The target type.\n * @template K The property type.\n * @param target - The target to retrieve a descriptor from.\n * @param property - The name of the property to retrieve a descriptor for.\n * @return the descriptor, or undefined if it does not exist. Keep in mind that\n *     plain properties may not have a descriptor defined.\n */\nexport function getDescriptor(target, property) {\n    var descriptorTarget = target;\n    var descriptor;\n    while (descriptorTarget) {\n        descriptor = Object.getOwnPropertyDescriptor(descriptorTarget, property);\n        if (descriptor) {\n            break;\n        }\n        // Walk up the instance's prototype chain in case the property is declared\n        // on a superclass.\n        descriptorTarget = Object.getPrototypeOf(descriptorTarget);\n    }\n    return descriptor;\n}\n/**\n * Enables or disables all observers for a provided target. Changes to observed\n * properties will not call any observers when disabled.\n *\n * @template T The observed target type.\n * @param target - The target to enable or disable observers for.\n * @param enabled - True to enable or false to disable observers.\n */\nexport function setObserversEnabled(target, enabled) {\n    var targetObservers = allTargetObservers.get(target);\n    if (targetObservers) {\n        targetObservers.isEnabled = enabled;\n    }\n}\n//# sourceMappingURL=observer.js.map","/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nimport { __extends, __read, __spreadArray, __values } from \"tslib\";\nimport { MDCFoundation } from './foundation';\nimport { observeProperty, setObserversEnabled } from './observer';\nvar MDCObserverFoundation = /** @class */ (function (_super) {\n    __extends(MDCObserverFoundation, _super);\n    function MDCObserverFoundation(adapter) {\n        var _this = _super.call(this, adapter) || this;\n        /** A set of cleanup functions to unobserve changes. */\n        _this.unobserves = new Set();\n        return _this;\n    }\n    MDCObserverFoundation.prototype.destroy = function () {\n        _super.prototype.destroy.call(this);\n        this.unobserve();\n    };\n    /**\n     * Observe a target's properties for changes using the provided map of\n     * property names and observer functions.\n     *\n     * @template T The target type.\n     * @param target - The target to observe.\n     * @param observers - An object whose keys are target properties and values\n     *     are observer functions that are called when the associated property\n     *     changes.\n     * @return A cleanup function that can be called to unobserve the\n     *     target.\n     */\n    MDCObserverFoundation.prototype.observe = function (target, observers) {\n        var e_1, _a;\n        var _this = this;\n        var cleanup = [];\n        try {\n            for (var _b = __values(Object.keys(observers)), _c = _b.next(); !_c.done; _c = _b.next()) {\n                var property = _c.value;\n                var observer = observers[property].bind(this);\n                cleanup.push(this.observeProperty(target, property, observer));\n            }\n        }\n        catch (e_1_1) { e_1 = { error: e_1_1 }; }\n        finally {\n            try {\n                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);\n            }\n            finally { if (e_1) throw e_1.error; }\n        }\n        var unobserve = function () {\n            var e_2, _a;\n            try {\n                for (var cleanup_1 = __values(cleanup), cleanup_1_1 = cleanup_1.next(); !cleanup_1_1.done; cleanup_1_1 = cleanup_1.next()) {\n                    var cleanupFn = cleanup_1_1.value;\n                    cleanupFn();\n                }\n            }\n            catch (e_2_1) { e_2 = { error: e_2_1 }; }\n            finally {\n                try {\n                    if (cleanup_1_1 && !cleanup_1_1.done && (_a = cleanup_1.return)) _a.call(cleanup_1);\n                }\n                finally { if (e_2) throw e_2.error; }\n            }\n            _this.unobserves.delete(unobserve);\n        };\n        this.unobserves.add(unobserve);\n        return unobserve;\n    };\n    /**\n     * Observe a target's property for changes. When a property changes, the\n     * provided `Observer` function will be invoked with the properties current\n     * and previous values.\n     *\n     * The returned cleanup function will stop listening to changes for the\n     * provided `Observer`.\n     *\n     * @template T The observed target type.\n     * @template K The observed property.\n     * @param target - The target to observe.\n     * @param property - The property of the target to observe.\n     * @param observer - An observer function to invoke each time the property\n     *     changes.\n     * @return A cleanup function that will stop observing changes for the\n     *     provided `Observer`.\n     */\n    MDCObserverFoundation.prototype.observeProperty = function (target, property, observer) {\n        return observeProperty(target, property, observer);\n    };\n    /**\n     * Enables or disables all observers for the provided target. Disabling\n     * observers will prevent them from being called until they are re-enabled.\n     *\n     * @param target - The target to enable or disable observers for.\n     * @param enabled - Whether or not observers should be called.\n     */\n    MDCObserverFoundation.prototype.setObserversEnabled = function (target, enabled) {\n        setObserversEnabled(target, enabled);\n    };\n    /**\n     * Clean up all observers and stop listening for property changes.\n     */\n    MDCObserverFoundation.prototype.unobserve = function () {\n        var e_3, _a;\n        try {\n            // Iterate over a copy since unobserve() will remove themselves from the set\n            for (var _b = __values(__spreadArray([], __read(this.unobserves))), _c = _b.next(); !_c.done; _c = _b.next()) {\n                var unobserve = _c.value;\n                unobserve();\n            }\n        }\n        catch (e_3_1) { e_3 = { error: e_3_1 }; }\n        finally {\n            try {\n                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);\n            }\n            finally { if (e_3) throw e_3.error; }\n        }\n    };\n    return MDCObserverFoundation;\n}(MDCFoundation));\nexport { MDCObserverFoundation };\n//# sourceMappingURL=observer-foundation.js.map","/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nimport { __extends } from \"tslib\";\nimport { MDCObserverFoundation } from '@material/base/observer-foundation';\nimport { CssClasses } from './constants';\n/**\n * `MDCSwitchFoundation` provides a state-only foundation for a switch\n * component.\n *\n * State observers and event handler entrypoints update a component's adapter's\n * state with the logic needed for switch to function.\n */\nvar MDCSwitchFoundation = /** @class */ (function (_super) {\n    __extends(MDCSwitchFoundation, _super);\n    function MDCSwitchFoundation(adapter) {\n        var _this = _super.call(this, adapter) || this;\n        _this.handleClick = _this.handleClick.bind(_this);\n        return _this;\n    }\n    /**\n     * Initializes the foundation and starts observing state changes.\n     */\n    MDCSwitchFoundation.prototype.init = function () {\n        this.observe(this.adapter.state, {\n            disabled: this.stopProcessingIfDisabled,\n            processing: this.stopProcessingIfDisabled,\n        });\n    };\n    /**\n     * Event handler for switch click events. Clicking on a switch will toggle its\n     * selected state.\n     */\n    MDCSwitchFoundation.prototype.handleClick = function () {\n        if (this.adapter.state.disabled) {\n            return;\n        }\n        this.adapter.state.selected = !this.adapter.state.selected;\n    };\n    MDCSwitchFoundation.prototype.stopProcessingIfDisabled = function () {\n        if (this.adapter.state.disabled) {\n            this.adapter.state.processing = false;\n        }\n    };\n    return MDCSwitchFoundation;\n}(MDCObserverFoundation));\nexport { MDCSwitchFoundation };\n/**\n * `MDCSwitchRenderFoundation` provides a state and rendering foundation for a\n * switch component.\n *\n * State observers and event handler entrypoints update a component's\n * adapter's state with the logic needed for switch to function.\n *\n * In response to state changes, the rendering foundation uses the component's\n * render adapter to keep the component's DOM updated with the state.\n */\nvar MDCSwitchRenderFoundation = /** @class */ (function (_super) {\n    __extends(MDCSwitchRenderFoundation, _super);\n    function MDCSwitchRenderFoundation() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    /**\n     * Initializes the foundation and starts observing state changes.\n     */\n    MDCSwitchRenderFoundation.prototype.init = function () {\n        _super.prototype.init.call(this);\n        this.observe(this.adapter.state, {\n            disabled: this.onDisabledChange,\n            processing: this.onProcessingChange,\n            selected: this.onSelectedChange,\n        });\n    };\n    /**\n     * Initializes the foundation from a server side rendered (SSR) component.\n     * This will sync the adapter's state with the current state of the DOM.\n     *\n     * This method should be called after `init()`.\n     */\n    MDCSwitchRenderFoundation.prototype.initFromDOM = function () {\n        // Turn off observers while setting state\n        this.setObserversEnabled(this.adapter.state, false);\n        this.adapter.state.selected = this.adapter.hasClass(CssClasses.SELECTED);\n        // Ensure aria-checked is set if attribute is not present\n        this.onSelectedChange();\n        this.adapter.state.disabled = this.adapter.isDisabled();\n        this.adapter.state.processing =\n            this.adapter.hasClass(CssClasses.PROCESSING);\n        // Re-observe state\n        this.setObserversEnabled(this.adapter.state, true);\n        this.stopProcessingIfDisabled();\n    };\n    MDCSwitchRenderFoundation.prototype.onDisabledChange = function () {\n        this.adapter.setDisabled(this.adapter.state.disabled);\n    };\n    MDCSwitchRenderFoundation.prototype.onProcessingChange = function () {\n        this.toggleClass(this.adapter.state.processing, CssClasses.PROCESSING);\n    };\n    MDCSwitchRenderFoundation.prototype.onSelectedChange = function () {\n        this.adapter.setAriaChecked(String(this.adapter.state.selected));\n        this.toggleClass(this.adapter.state.selected, CssClasses.SELECTED);\n        this.toggleClass(!this.adapter.state.selected, CssClasses.UNSELECTED);\n    };\n    MDCSwitchRenderFoundation.prototype.toggleClass = function (addClass, className) {\n        if (addClass) {\n            this.adapter.addClass(className);\n        }\n        else {\n            this.adapter.removeClass(className);\n        }\n    };\n    return MDCSwitchRenderFoundation;\n}(MDCSwitchFoundation));\nexport { MDCSwitchRenderFoundation };\n//# sourceMappingURL=foundation.js.map","/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nimport { __assign, __extends } from \"tslib\";\nimport { MDCComponent } from '@material/base/component';\nimport { MDCRipple } from '@material/ripple/component';\nimport { MDCRippleFoundation } from '@material/ripple/foundation';\nimport { Selectors } from './constants';\nimport { MDCSwitchRenderFoundation } from './foundation';\n/**\n * `MDCSwitch` provides a component implementation of a Material Design switch.\n */\nvar MDCSwitch = /** @class */ (function (_super) {\n    __extends(MDCSwitch, _super);\n    function MDCSwitch(root, foundation) {\n        var _this = _super.call(this, root, foundation) || this;\n        _this.root = root;\n        return _this;\n    }\n    /**\n     * Creates a new `MDCSwitch` and attaches it to the given root element.\n     * @param root The root to attach to.\n     * @return the new component instance.\n     */\n    MDCSwitch.attachTo = function (root) {\n        return new MDCSwitch(root);\n    };\n    MDCSwitch.prototype.initialize = function () {\n        this.ripple = new MDCRipple(this.root, this.createRippleFoundation());\n    };\n    MDCSwitch.prototype.initialSyncWithDOM = function () {\n        var rippleElement = this.root.querySelector(Selectors.RIPPLE);\n        if (!rippleElement) {\n            throw new Error(\"Switch \" + Selectors.RIPPLE + \" element is required.\");\n        }\n        this.rippleElement = rippleElement;\n        this.root.addEventListener('click', this.foundation.handleClick);\n        this.foundation.initFromDOM();\n    };\n    MDCSwitch.prototype.destroy = function () {\n        _super.prototype.destroy.call(this);\n        this.ripple.destroy();\n        this.root.removeEventListener('click', this.foundation.handleClick);\n    };\n    MDCSwitch.prototype.getDefaultFoundation = function () {\n        return new MDCSwitchRenderFoundation(this.createAdapter());\n    };\n    MDCSwitch.prototype.createAdapter = function () {\n        var _this = this;\n        return {\n            addClass: function (className) {\n                _this.root.classList.add(className);\n            },\n            hasClass: function (className) { return _this.root.classList.contains(className); },\n            isDisabled: function () { return _this.root.disabled; },\n            removeClass: function (className) {\n                _this.root.classList.remove(className);\n            },\n            setAriaChecked: function (ariaChecked) {\n                return _this.root.setAttribute('aria-checked', ariaChecked);\n            },\n            setDisabled: function (disabled) {\n                _this.root.disabled = disabled;\n            },\n            state: this,\n        };\n    };\n    MDCSwitch.prototype.createRippleFoundation = function () {\n        return new MDCRippleFoundation(this.createRippleAdapter());\n    };\n    MDCSwitch.prototype.createRippleAdapter = function () {\n        var _this = this;\n        return __assign(__assign({}, MDCRipple.createAdapter(this)), { computeBoundingRect: function () { return _this.rippleElement.getBoundingClientRect(); }, isUnbounded: function () { return true; } });\n    };\n    return MDCSwitch;\n}(MDCComponent));\nexport { MDCSwitch };\n//# sourceMappingURL=component.js.map","@use '../../style/functions';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/internal/lime-theme';\n@use '../../style/internal/lime-typography';\n\n@use '@material/switch/styles';\n\n$scale-factor: 0.8;\n\n:host(limel-switch) {\n    isolation: isolate;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    --mdc-switch-selected-icon-color: transparent;\n    --mdc-switch-unselected-icon-color: transparent;\n\n    --mdc-switch-disabled-selected-icon-opacity: 1;\n    --mdc-switch-disabled-unselected-icon-opacity: 1;\n\n    --mdc-switch-selected-icon-size: 0.75rem;\n    --mdc-switch-unselected-icon-size: 0.75rem;\n\n    --mdc-switch-track-height: 1.25rem;\n    --mdc-switch-track-shape: var(--mdc-switch-track-height);\n\n    --mdc-switch-unselected-focus-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n    --mdc-switch-selected-focus-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n    --mdc-switch-unselected-pressed-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n    --mdc-switch-selected-pressed-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n    --mdc-switch-unselected-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n    --mdc-switch-unselected-hover-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n    --mdc-switch-selected-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n    --mdc-switch-selected-hover-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n\n    --mdc-switch-unselected-track-color: rgb(var(--contrast-700));\n    --mdc-switch-unselected-focus-track-color: rgb(var(--contrast-800));\n    --mdc-switch-unselected-pressed-track-color: rgb(var(--contrast-800));\n    --mdc-switch-unselected-hover-track-color: rgb(var(--contrast-800));\n    --mdc-switch-selected-focus-track-color: var(--mdc-theme-primary);\n    --mdc-switch-selected-pressed-track-color: var(--mdc-theme-primary);\n    --mdc-switch-selected-track-color: var(--mdc-theme-primary);\n    --mdc-switch-selected-hover-track-color: var(--mdc-theme-primary);\n\n    --mdc-switch-handle-elevation: var(--button-shadow-normal);\n    --mdc-switch-disabled-track-opacity: 0.4;\n\n    --mdc-switch-disabled-selected-handle-color: rgb(var(--contrast-1000));\n    --mdc-switch-disabled-unselected-handle-color: rgb(var(--contrast-1000));\n}\n\n.mdc-switch {\n    margin-right: functions.pxToRem(8);\n    &:hover {\n        --mdc-switch-handle-elevation: var(--button-shadow-hovered);\n    }\n}\n\nlabel {\n    @include lime-typography.typography(body2);\n    color: var(--mdc-theme-on-surface);\n\n    &:not(.disabled) {\n        cursor: pointer;\n    }\n}\n\nlabel {\n    // As long as this component is depended on MDC,\n    // we need to force it to be font-agnostic.\n    // When MDC-dependency is removed, this block can also be removed.\n    // However, on removal of MDC-dependency, we should also make sure to check\n    // other font-related styles that might be set by MDC,\n    // such as `letter-spacing` or `font-size`.\n    font-family: inherit;\n}\n\n.mdc-switch {\n    &.mdc-switch--selected,\n    &.mdc-switch.mdc-switch--unselected {\n        .mdc-switch__handle {\n            &:after,\n            &:before {\n                transform: scale($scale-factor);\n            }\n        }\n    }\n    .mdc-switch__shadow {\n        transform: scale($scale-factor);\n    }\n}\n\n@import './partial-styles/_readonly.scss';\n@import './partial-styles/_helper-text.scss';\n","import { MDCSwitch } from '@material/switch';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    Host,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n *\n * The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-switch\n * @exampleComponent limel-example-switch-helper-text\n */\n@Component({\n    tag: 'limel-switch',\n    shadow: true,\n    styleUrl: 'switch.scss',\n})\nexport class Switch {\n    /**\n     * Label to display next to the switch\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Disables the switch when `true`,\n     * and visually shows that the switch is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the switch may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the switch when `true`. This visualizes the switch slightly differently.\n     * But shows no visual sign indicating that the switch is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The value of the switch\n     */\n    @Prop({ reflect: true })\n    public value = false;\n\n    /**\n     * Optional helper text to display below the switch\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Emitted when the value has changed\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private host: HTMLLimelSwitchElement;\n    private helperTextId: string = createRandomString();\n\n    @State()\n    private fieldId = createRandomString();\n\n    private mdcSwitch: MDCSwitch;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector(\n            '.mdc-switch',\n        ) as HTMLButtonElement;\n        if (!element) {\n            return;\n        }\n\n        this.mdcSwitch = new MDCSwitch(element);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n        this.mdcSwitch?.destroy();\n    }\n\n    public render() {\n        return (\n            <Host>\n                <button\n                    id={this.fieldId}\n                    class={{\n                        'mdc-switch': true,\n                        'lime-switch--readonly': this.readonly,\n                        'mdc-switch--unselected': !this.value,\n                        'mdc-switch--selected': this.value,\n                    }}\n                    type=\"button\"\n                    role=\"switch\"\n                    aria-checked={this.value}\n                    disabled={this.disabled || this.readonly}\n                    onClick={this.handleClick}\n                    aria-controls={this.helperTextId}\n                >\n                    <div class=\"mdc-switch__track\" />\n                    <div class=\"mdc-switch__handle-track\">\n                        <div class=\"mdc-switch__handle\">\n                            <div class=\"mdc-switch__shadow\">\n                                <div class=\"mdc-elevation-overlay\"></div>\n                            </div>\n                            <div class=\"mdc-switch__ripple\"></div>\n                            <div class=\"mdc-switch__icons\">\n                                <svg\n                                    class=\"mdc-switch__icon mdc-switch__icon--on\"\n                                    viewBox=\"0 0 24 24\"\n                                >\n                                    <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n                                </svg>\n                                <svg\n                                    class=\"mdc-switch__icon mdc-switch__icon--off\"\n                                    viewBox=\"0 0 24 24\"\n                                >\n                                    <path d=\"M20 13H4v-2h16v2z\" />\n                                </svg>\n                            </div>\n                        </div>\n                    </div>\n                </button>\n                <label\n                    class={`${\n                        this.disabled || this.readonly ? 'disabled' : ''\n                    }`}\n                    htmlFor={this.fieldId}\n                >\n                    {this.label}\n                </label>\n                {this.renderHelperLine()}\n            </Host>\n        );\n    }\n\n    @Watch('value')\n    protected valueWatcher(newValue: boolean) {\n        if (!this.mdcSwitch) {\n            return;\n        }\n\n        this.mdcSwitch.selected = newValue;\n    }\n\n    private renderHelperLine = () => {\n        if (!this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperTextId={this.helperTextId}\n                helperText={this.helperText}\n                invalid={this.invalid}\n            />\n        );\n    };\n\n    private hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.change.emit(!this.value);\n    };\n}\n"],"mappings":"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"}
+{"version":3,"names":["CssClasses","Selectors","observeProperty","target","property","observer","targetObservers","installObserver","observers","getObservers","push","splice","indexOf","allTargetObservers","WeakMap","observersMap","Map","has","set","isEnabled","key","get","installedProperties","Set","descriptor","getDescriptor","configurable","enumerable","value","writable","observedDescriptor","__assign","descGet","descSet","value_1","newValue","call","this","e_4","_a","previous","_b","__values","_c","next","done","e_4_1","error","return","add","Object","defineProperty","descriptorTarget","getOwnPropertyDescriptor","getPrototypeOf","setObserversEnabled","enabled","MDCObserverFoundation","_super","__extends","adapter","_this","unobserves","prototype","destroy","unobserve","observe","e_1","cleanup","keys","bind","e_1_1","e_2","cleanup_1","cleanup_1_1","cleanupFn","e_2_1","delete","e_3","__spreadArray","__read","e_3_1","MDCFoundation","MDCSwitchFoundation","handleClick","init","state","disabled","stopProcessingIfDisabled","processing","selected","MDCSwitchRenderFoundation","apply","arguments","onDisabledChange","onProcessingChange","onSelectedChange","initFromDOM","hasClass","SELECTED","isDisabled","PROCESSING","setDisabled","toggleClass","setAriaChecked","String","UNSELECTED","addClass","className","removeClass","MDCSwitch","root","foundation","attachTo","initialize","ripple","MDCRipple","createRippleFoundation","initialSyncWithDOM","rippleElement","querySelector","RIPPLE","Error","addEventListener","removeEventListener","getDefaultFoundation","createAdapter","classList","contains","remove","ariaChecked","setAttribute","MDCRippleFoundation","createRippleAdapter","computeBoundingRect","getBoundingClientRect","isUnbounded","MDCComponent","switchCss","Switch","helperTextId","createRandomString","renderHelperLine","hasHelperText","h","helperText","invalid","undefined","event","stopPropagation","change","emit","connectedCallback","componentWillLoad","makeEnterClickable","host","componentDidLoad","element","shadowRoot","mdcSwitch","disconnectedCallback","removeEnterClickable","render","Host","id","fieldId","class","readonly","type","role","onClick","viewBox","d","htmlFor","label","valueWatcher"],"sources":["./node_modules/@material/switch/constants.js","./node_modules/@material/base/observer.js","./node_modules/@material/base/observer-foundation.js","./node_modules/@material/switch/foundation.js","./node_modules/@material/switch/component.js","./src/components/switch/switch.scss?tag=limel-switch&encapsulation=shadow","./src/components/switch/switch.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n/**\n * CSS classes used for switch.\n */\nexport var CssClasses;\n(function (CssClasses) {\n    CssClasses[\"PROCESSING\"] = \"mdc-switch--processing\";\n    CssClasses[\"SELECTED\"] = \"mdc-switch--selected\";\n    CssClasses[\"UNSELECTED\"] = \"mdc-switch--unselected\";\n})(CssClasses || (CssClasses = {}));\n/**\n * Query selectors used for switch.\n */\nexport var Selectors;\n(function (Selectors) {\n    Selectors[\"RIPPLE\"] = \".mdc-switch__ripple\";\n})(Selectors || (Selectors = {}));\n//# sourceMappingURL=constants.js.map","/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nimport { __assign, __extends, __read, __spreadArray, __values } from \"tslib\";\n/**\n * Mixin to add `MDCObserver` functionality to an optional base class.\n *\n * @deprecated Prefer MDCObserverFoundation for stricter closure compliance.\n * @template C Optional base class constructor type.\n * @param baseClass - Optional base class.\n * @return A class that extends the optional base class with `MDCObserver`\n *     functionality.\n */\nexport function mdcObserver(baseClass) {\n    if (baseClass === void 0) { baseClass = /** @class */ (function () {\n        function class_1() {\n        }\n        return class_1;\n    }()); }\n    // Mixin classes cannot use private members and Symbol() cannot be used in 3P\n    // for IE11.\n    var unobserveMap = new WeakMap();\n    return /** @class */ (function (_super) {\n        __extends(MDCObserver, _super);\n        function MDCObserver() {\n            return _super !== null && _super.apply(this, arguments) || this;\n        }\n        MDCObserver.prototype.observe = function (target, observers) {\n            var e_1, _a;\n            var _this = this;\n            var cleanup = [];\n            try {\n                for (var _b = __values(Object.keys(observers)), _c = _b.next(); !_c.done; _c = _b.next()) {\n                    var property = _c.value;\n                    var observer = observers[property].bind(this);\n                    cleanup.push(observeProperty(target, property, observer));\n                }\n            }\n            catch (e_1_1) { e_1 = { error: e_1_1 }; }\n            finally {\n                try {\n                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);\n                }\n                finally { if (e_1) throw e_1.error; }\n            }\n            var unobserve = function () {\n                var e_2, _a;\n                try {\n                    for (var cleanup_1 = __values(cleanup), cleanup_1_1 = cleanup_1.next(); !cleanup_1_1.done; cleanup_1_1 = cleanup_1.next()) {\n                        var cleanupFn = cleanup_1_1.value;\n                        cleanupFn();\n                    }\n                }\n                catch (e_2_1) { e_2 = { error: e_2_1 }; }\n                finally {\n                    try {\n                        if (cleanup_1_1 && !cleanup_1_1.done && (_a = cleanup_1.return)) _a.call(cleanup_1);\n                    }\n                    finally { if (e_2) throw e_2.error; }\n                }\n                var unobserves = unobserveMap.get(_this) || [];\n                var index = unobserves.indexOf(unobserve);\n                if (index > -1) {\n                    unobserves.splice(index, 1);\n                }\n            };\n            var unobserves = unobserveMap.get(this);\n            if (!unobserves) {\n                unobserves = [];\n                unobserveMap.set(this, unobserves);\n            }\n            unobserves.push(unobserve);\n            return unobserve;\n        };\n        MDCObserver.prototype.setObserversEnabled = function (target, enabled) {\n            setObserversEnabled(target, enabled);\n        };\n        MDCObserver.prototype.unobserve = function () {\n            var e_3, _a;\n            // Iterate over a copy since unobserve() will remove themselves from the\n            // array\n            var unobserves = unobserveMap.get(this) || [];\n            try {\n                for (var _b = __values(__spreadArray([], __read(unobserves))), _c = _b.next(); !_c.done; _c = _b.next()) {\n                    var unobserve = _c.value;\n                    unobserve();\n                }\n            }\n            catch (e_3_1) { e_3 = { error: e_3_1 }; }\n            finally {\n                try {\n                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);\n                }\n                finally { if (e_3) throw e_3.error; }\n            }\n        };\n        return MDCObserver;\n    }(baseClass));\n}\n/**\n * Observe a target's property for changes. When a property changes, the\n * provided `Observer` function will be invoked with the properties current and\n * previous values.\n *\n * The returned cleanup function will stop listening to changes for the\n * provided `Observer`.\n *\n * @template T The observed target type.\n * @template K The observed property.\n * @param target - The target to observe.\n * @param property - The property of the target to observe.\n * @param observer - An observer function to invoke each time the property\n *     changes.\n * @return A cleanup function that will stop observing changes for the provided\n *     `Observer`.\n */\nexport function observeProperty(target, property, observer) {\n    var targetObservers = installObserver(target, property);\n    var observers = targetObservers.getObservers(property);\n    observers.push(observer);\n    return function () {\n        observers.splice(observers.indexOf(observer), 1);\n    };\n}\n/**\n * A Map of all `TargetObservers` that have been installed.\n */\nvar allTargetObservers = new WeakMap();\n/**\n * Installs a `TargetObservers` for the provided target (if not already\n * installed), and replaces the given property with a getter and setter that\n * will respond to changes and call `TargetObservers`.\n *\n * Subsequent calls to `installObserver()` with the same target and property\n * will not override the property's previously installed getter/setter.\n *\n * @template T The observed target type.\n * @template K The observed property to create a getter/setter for.\n * @param target - The target to observe.\n * @param property - The property to create a getter/setter for, if needed.\n * @return The installed `TargetObservers` for the provided target.\n */\nfunction installObserver(target, property) {\n    var observersMap = new Map();\n    if (!allTargetObservers.has(target)) {\n        allTargetObservers.set(target, {\n            isEnabled: true,\n            getObservers: function (key) {\n                var observers = observersMap.get(key) || [];\n                if (!observersMap.has(key)) {\n                    observersMap.set(key, observers);\n                }\n                return observers;\n            },\n            installedProperties: new Set()\n        });\n    }\n    var targetObservers = allTargetObservers.get(target);\n    if (targetObservers.installedProperties.has(property)) {\n        // The getter/setter has already been replaced for this property\n        return targetObservers;\n    }\n    // Retrieve (or create if it's a plain property) the original descriptor from\n    // the target...\n    var descriptor = getDescriptor(target, property) || {\n        configurable: true,\n        enumerable: true,\n        value: target[property],\n        writable: true\n    };\n    // ...and create a copy that will be used for the observer.\n    var observedDescriptor = __assign({}, descriptor);\n    var descGet = descriptor.get, descSet = descriptor.set;\n    if ('value' in descriptor) {\n        // The descriptor is a simple value (not a getter/setter).\n        // For our observer descriptor that we copied, delete the value/writable\n        // properties, since they are incompatible with the get/set properties\n        // for descriptors.\n        delete observedDescriptor.value;\n        delete observedDescriptor.writable;\n        // Set up a simple getter...\n        var value_1 = descriptor.value;\n        descGet = function () { return value_1; };\n        // ...and setter (if the original property was writable).\n        if (descriptor.writable) {\n            descSet = function (newValue) {\n                value_1 = newValue;\n            };\n        }\n    }\n    if (descGet) {\n        observedDescriptor.get = function () {\n            // `this as T` needed for closure conformance\n            return descGet.call(this);\n        };\n    }\n    if (descSet) {\n        observedDescriptor.set = function (newValue) {\n            var e_4, _a;\n            // `thus as T` needed for closure conformance\n            var previous = descGet ? descGet.call(this) : newValue;\n            descSet.call(this, newValue);\n            if (targetObservers.isEnabled && (!descGet || newValue !== previous)) {\n                try {\n                    for (var _b = __values(targetObservers.getObservers(property)), _c = _b.next(); !_c.done; _c = _b.next()) {\n                        var observer = _c.value;\n                        observer(newValue, previous);\n                    }\n                }\n                catch (e_4_1) { e_4 = { error: e_4_1 }; }\n                finally {\n                    try {\n                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);\n                    }\n                    finally { if (e_4) throw e_4.error; }\n                }\n            }\n        };\n    }\n    targetObservers.installedProperties.add(property);\n    Object.defineProperty(target, property, observedDescriptor);\n    return targetObservers;\n}\n/**\n * Retrieves the descriptor for a property from the provided target. This\n * function will walk up the target's prototype chain to search for the\n * descriptor.\n *\n * @template T The target type.\n * @template K The property type.\n * @param target - The target to retrieve a descriptor from.\n * @param property - The name of the property to retrieve a descriptor for.\n * @return the descriptor, or undefined if it does not exist. Keep in mind that\n *     plain properties may not have a descriptor defined.\n */\nexport function getDescriptor(target, property) {\n    var descriptorTarget = target;\n    var descriptor;\n    while (descriptorTarget) {\n        descriptor = Object.getOwnPropertyDescriptor(descriptorTarget, property);\n        if (descriptor) {\n            break;\n        }\n        // Walk up the instance's prototype chain in case the property is declared\n        // on a superclass.\n        descriptorTarget = Object.getPrototypeOf(descriptorTarget);\n    }\n    return descriptor;\n}\n/**\n * Enables or disables all observers for a provided target. Changes to observed\n * properties will not call any observers when disabled.\n *\n * @template T The observed target type.\n * @param target - The target to enable or disable observers for.\n * @param enabled - True to enable or false to disable observers.\n */\nexport function setObserversEnabled(target, enabled) {\n    var targetObservers = allTargetObservers.get(target);\n    if (targetObservers) {\n        targetObservers.isEnabled = enabled;\n    }\n}\n//# sourceMappingURL=observer.js.map","/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nimport { __extends, __read, __spreadArray, __values } from \"tslib\";\nimport { MDCFoundation } from './foundation';\nimport { observeProperty, setObserversEnabled } from './observer';\nvar MDCObserverFoundation = /** @class */ (function (_super) {\n    __extends(MDCObserverFoundation, _super);\n    function MDCObserverFoundation(adapter) {\n        var _this = _super.call(this, adapter) || this;\n        /** A set of cleanup functions to unobserve changes. */\n        _this.unobserves = new Set();\n        return _this;\n    }\n    MDCObserverFoundation.prototype.destroy = function () {\n        _super.prototype.destroy.call(this);\n        this.unobserve();\n    };\n    /**\n     * Observe a target's properties for changes using the provided map of\n     * property names and observer functions.\n     *\n     * @template T The target type.\n     * @param target - The target to observe.\n     * @param observers - An object whose keys are target properties and values\n     *     are observer functions that are called when the associated property\n     *     changes.\n     * @return A cleanup function that can be called to unobserve the\n     *     target.\n     */\n    MDCObserverFoundation.prototype.observe = function (target, observers) {\n        var e_1, _a;\n        var _this = this;\n        var cleanup = [];\n        try {\n            for (var _b = __values(Object.keys(observers)), _c = _b.next(); !_c.done; _c = _b.next()) {\n                var property = _c.value;\n                var observer = observers[property].bind(this);\n                cleanup.push(this.observeProperty(target, property, observer));\n            }\n        }\n        catch (e_1_1) { e_1 = { error: e_1_1 }; }\n        finally {\n            try {\n                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);\n            }\n            finally { if (e_1) throw e_1.error; }\n        }\n        var unobserve = function () {\n            var e_2, _a;\n            try {\n                for (var cleanup_1 = __values(cleanup), cleanup_1_1 = cleanup_1.next(); !cleanup_1_1.done; cleanup_1_1 = cleanup_1.next()) {\n                    var cleanupFn = cleanup_1_1.value;\n                    cleanupFn();\n                }\n            }\n            catch (e_2_1) { e_2 = { error: e_2_1 }; }\n            finally {\n                try {\n                    if (cleanup_1_1 && !cleanup_1_1.done && (_a = cleanup_1.return)) _a.call(cleanup_1);\n                }\n                finally { if (e_2) throw e_2.error; }\n            }\n            _this.unobserves.delete(unobserve);\n        };\n        this.unobserves.add(unobserve);\n        return unobserve;\n    };\n    /**\n     * Observe a target's property for changes. When a property changes, the\n     * provided `Observer` function will be invoked with the properties current\n     * and previous values.\n     *\n     * The returned cleanup function will stop listening to changes for the\n     * provided `Observer`.\n     *\n     * @template T The observed target type.\n     * @template K The observed property.\n     * @param target - The target to observe.\n     * @param property - The property of the target to observe.\n     * @param observer - An observer function to invoke each time the property\n     *     changes.\n     * @return A cleanup function that will stop observing changes for the\n     *     provided `Observer`.\n     */\n    MDCObserverFoundation.prototype.observeProperty = function (target, property, observer) {\n        return observeProperty(target, property, observer);\n    };\n    /**\n     * Enables or disables all observers for the provided target. Disabling\n     * observers will prevent them from being called until they are re-enabled.\n     *\n     * @param target - The target to enable or disable observers for.\n     * @param enabled - Whether or not observers should be called.\n     */\n    MDCObserverFoundation.prototype.setObserversEnabled = function (target, enabled) {\n        setObserversEnabled(target, enabled);\n    };\n    /**\n     * Clean up all observers and stop listening for property changes.\n     */\n    MDCObserverFoundation.prototype.unobserve = function () {\n        var e_3, _a;\n        try {\n            // Iterate over a copy since unobserve() will remove themselves from the set\n            for (var _b = __values(__spreadArray([], __read(this.unobserves))), _c = _b.next(); !_c.done; _c = _b.next()) {\n                var unobserve = _c.value;\n                unobserve();\n            }\n        }\n        catch (e_3_1) { e_3 = { error: e_3_1 }; }\n        finally {\n            try {\n                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);\n            }\n            finally { if (e_3) throw e_3.error; }\n        }\n    };\n    return MDCObserverFoundation;\n}(MDCFoundation));\nexport { MDCObserverFoundation };\n//# sourceMappingURL=observer-foundation.js.map","/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nimport { __extends } from \"tslib\";\nimport { MDCObserverFoundation } from '@material/base/observer-foundation';\nimport { CssClasses } from './constants';\n/**\n * `MDCSwitchFoundation` provides a state-only foundation for a switch\n * component.\n *\n * State observers and event handler entrypoints update a component's adapter's\n * state with the logic needed for switch to function.\n */\nvar MDCSwitchFoundation = /** @class */ (function (_super) {\n    __extends(MDCSwitchFoundation, _super);\n    function MDCSwitchFoundation(adapter) {\n        var _this = _super.call(this, adapter) || this;\n        _this.handleClick = _this.handleClick.bind(_this);\n        return _this;\n    }\n    /**\n     * Initializes the foundation and starts observing state changes.\n     */\n    MDCSwitchFoundation.prototype.init = function () {\n        this.observe(this.adapter.state, {\n            disabled: this.stopProcessingIfDisabled,\n            processing: this.stopProcessingIfDisabled,\n        });\n    };\n    /**\n     * Event handler for switch click events. Clicking on a switch will toggle its\n     * selected state.\n     */\n    MDCSwitchFoundation.prototype.handleClick = function () {\n        if (this.adapter.state.disabled) {\n            return;\n        }\n        this.adapter.state.selected = !this.adapter.state.selected;\n    };\n    MDCSwitchFoundation.prototype.stopProcessingIfDisabled = function () {\n        if (this.adapter.state.disabled) {\n            this.adapter.state.processing = false;\n        }\n    };\n    return MDCSwitchFoundation;\n}(MDCObserverFoundation));\nexport { MDCSwitchFoundation };\n/**\n * `MDCSwitchRenderFoundation` provides a state and rendering foundation for a\n * switch component.\n *\n * State observers and event handler entrypoints update a component's\n * adapter's state with the logic needed for switch to function.\n *\n * In response to state changes, the rendering foundation uses the component's\n * render adapter to keep the component's DOM updated with the state.\n */\nvar MDCSwitchRenderFoundation = /** @class */ (function (_super) {\n    __extends(MDCSwitchRenderFoundation, _super);\n    function MDCSwitchRenderFoundation() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    /**\n     * Initializes the foundation and starts observing state changes.\n     */\n    MDCSwitchRenderFoundation.prototype.init = function () {\n        _super.prototype.init.call(this);\n        this.observe(this.adapter.state, {\n            disabled: this.onDisabledChange,\n            processing: this.onProcessingChange,\n            selected: this.onSelectedChange,\n        });\n    };\n    /**\n     * Initializes the foundation from a server side rendered (SSR) component.\n     * This will sync the adapter's state with the current state of the DOM.\n     *\n     * This method should be called after `init()`.\n     */\n    MDCSwitchRenderFoundation.prototype.initFromDOM = function () {\n        // Turn off observers while setting state\n        this.setObserversEnabled(this.adapter.state, false);\n        this.adapter.state.selected = this.adapter.hasClass(CssClasses.SELECTED);\n        // Ensure aria-checked is set if attribute is not present\n        this.onSelectedChange();\n        this.adapter.state.disabled = this.adapter.isDisabled();\n        this.adapter.state.processing =\n            this.adapter.hasClass(CssClasses.PROCESSING);\n        // Re-observe state\n        this.setObserversEnabled(this.adapter.state, true);\n        this.stopProcessingIfDisabled();\n    };\n    MDCSwitchRenderFoundation.prototype.onDisabledChange = function () {\n        this.adapter.setDisabled(this.adapter.state.disabled);\n    };\n    MDCSwitchRenderFoundation.prototype.onProcessingChange = function () {\n        this.toggleClass(this.adapter.state.processing, CssClasses.PROCESSING);\n    };\n    MDCSwitchRenderFoundation.prototype.onSelectedChange = function () {\n        this.adapter.setAriaChecked(String(this.adapter.state.selected));\n        this.toggleClass(this.adapter.state.selected, CssClasses.SELECTED);\n        this.toggleClass(!this.adapter.state.selected, CssClasses.UNSELECTED);\n    };\n    MDCSwitchRenderFoundation.prototype.toggleClass = function (addClass, className) {\n        if (addClass) {\n            this.adapter.addClass(className);\n        }\n        else {\n            this.adapter.removeClass(className);\n        }\n    };\n    return MDCSwitchRenderFoundation;\n}(MDCSwitchFoundation));\nexport { MDCSwitchRenderFoundation };\n//# sourceMappingURL=foundation.js.map","/**\n * @license\n * Copyright 2021 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\nimport { __assign, __extends } from \"tslib\";\nimport { MDCComponent } from '@material/base/component';\nimport { MDCRipple } from '@material/ripple/component';\nimport { MDCRippleFoundation } from '@material/ripple/foundation';\nimport { Selectors } from './constants';\nimport { MDCSwitchRenderFoundation } from './foundation';\n/**\n * `MDCSwitch` provides a component implementation of a Material Design switch.\n */\nvar MDCSwitch = /** @class */ (function (_super) {\n    __extends(MDCSwitch, _super);\n    function MDCSwitch(root, foundation) {\n        var _this = _super.call(this, root, foundation) || this;\n        _this.root = root;\n        return _this;\n    }\n    /**\n     * Creates a new `MDCSwitch` and attaches it to the given root element.\n     * @param root The root to attach to.\n     * @return the new component instance.\n     */\n    MDCSwitch.attachTo = function (root) {\n        return new MDCSwitch(root);\n    };\n    MDCSwitch.prototype.initialize = function () {\n        this.ripple = new MDCRipple(this.root, this.createRippleFoundation());\n    };\n    MDCSwitch.prototype.initialSyncWithDOM = function () {\n        var rippleElement = this.root.querySelector(Selectors.RIPPLE);\n        if (!rippleElement) {\n            throw new Error(\"Switch \" + Selectors.RIPPLE + \" element is required.\");\n        }\n        this.rippleElement = rippleElement;\n        this.root.addEventListener('click', this.foundation.handleClick);\n        this.foundation.initFromDOM();\n    };\n    MDCSwitch.prototype.destroy = function () {\n        _super.prototype.destroy.call(this);\n        this.ripple.destroy();\n        this.root.removeEventListener('click', this.foundation.handleClick);\n    };\n    MDCSwitch.prototype.getDefaultFoundation = function () {\n        return new MDCSwitchRenderFoundation(this.createAdapter());\n    };\n    MDCSwitch.prototype.createAdapter = function () {\n        var _this = this;\n        return {\n            addClass: function (className) {\n                _this.root.classList.add(className);\n            },\n            hasClass: function (className) { return _this.root.classList.contains(className); },\n            isDisabled: function () { return _this.root.disabled; },\n            removeClass: function (className) {\n                _this.root.classList.remove(className);\n            },\n            setAriaChecked: function (ariaChecked) {\n                return _this.root.setAttribute('aria-checked', ariaChecked);\n            },\n            setDisabled: function (disabled) {\n                _this.root.disabled = disabled;\n            },\n            state: this,\n        };\n    };\n    MDCSwitch.prototype.createRippleFoundation = function () {\n        return new MDCRippleFoundation(this.createRippleAdapter());\n    };\n    MDCSwitch.prototype.createRippleAdapter = function () {\n        var _this = this;\n        return __assign(__assign({}, MDCRipple.createAdapter(this)), { computeBoundingRect: function () { return _this.rippleElement.getBoundingClientRect(); }, isUnbounded: function () { return true; } });\n    };\n    return MDCSwitch;\n}(MDCComponent));\nexport { MDCSwitch };\n//# sourceMappingURL=component.js.map","@use '../../style/functions';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/internal/lime-theme';\n@use '../../style/internal/lime-typography';\n\n@use '@material/switch/styles';\n\n$scale-factor: 0.8;\n\n:host(limel-switch) {\n    isolation: isolate;\n\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n\n    --mdc-switch-selected-icon-color: transparent;\n    --mdc-switch-unselected-icon-color: transparent;\n\n    --mdc-switch-disabled-selected-icon-opacity: 1;\n    --mdc-switch-disabled-unselected-icon-opacity: 1;\n\n    --mdc-switch-selected-icon-size: 0.75rem;\n    --mdc-switch-unselected-icon-size: 0.75rem;\n\n    --mdc-switch-track-height: 1.25rem;\n    --mdc-switch-track-shape: var(--mdc-switch-track-height);\n\n    --mdc-switch-unselected-focus-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n    --mdc-switch-selected-focus-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n    --mdc-switch-unselected-pressed-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n    --mdc-switch-selected-pressed-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n    --mdc-switch-unselected-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n    --mdc-switch-unselected-hover-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n    --mdc-switch-selected-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n    --mdc-switch-selected-hover-handle-color: var(\n        --lime-elevated-surface-background-color\n    );\n\n    --mdc-switch-unselected-track-color: rgb(var(--contrast-700));\n    --mdc-switch-unselected-focus-track-color: rgb(var(--contrast-800));\n    --mdc-switch-unselected-pressed-track-color: rgb(var(--contrast-800));\n    --mdc-switch-unselected-hover-track-color: rgb(var(--contrast-800));\n    --mdc-switch-selected-focus-track-color: var(--mdc-theme-primary);\n    --mdc-switch-selected-pressed-track-color: var(--mdc-theme-primary);\n    --mdc-switch-selected-track-color: var(--mdc-theme-primary);\n    --mdc-switch-selected-hover-track-color: var(--mdc-theme-primary);\n\n    --mdc-switch-handle-elevation: var(--button-shadow-normal);\n    --mdc-switch-disabled-track-opacity: 0.4;\n\n    --mdc-switch-disabled-selected-handle-color: rgb(var(--contrast-1000));\n    --mdc-switch-disabled-unselected-handle-color: rgb(var(--contrast-1000));\n}\n\n.mdc-switch {\n    margin-right: functions.pxToRem(8);\n    &:hover {\n        --mdc-switch-handle-elevation: var(--button-shadow-hovered);\n    }\n}\n\nlabel {\n    @include lime-typography.typography(body2);\n    color: var(--mdc-theme-on-surface);\n\n    &:not(.disabled) {\n        cursor: pointer;\n    }\n}\n\nlabel {\n    // As long as this component is depended on MDC,\n    // we need to force it to be font-agnostic.\n    // When MDC-dependency is removed, this block can also be removed.\n    // However, on removal of MDC-dependency, we should also make sure to check\n    // other font-related styles that might be set by MDC,\n    // such as `letter-spacing` or `font-size`.\n    font-family: inherit;\n}\n\n.mdc-switch {\n    &.mdc-switch--selected,\n    &.mdc-switch.mdc-switch--unselected {\n        .mdc-switch__handle {\n            &:after,\n            &:before {\n                transform: scale($scale-factor);\n            }\n        }\n    }\n    .mdc-switch__shadow {\n        transform: scale($scale-factor);\n    }\n}\n\n@import './partial-styles/_readonly.scss';\n@import './partial-styles/_helper-text.scss';\n","import { MDCSwitch } from '@material/switch';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    Host,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\n\n/**\n * The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n *\n * The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-switch\n * @exampleComponent limel-example-switch-helper-text\n */\n@Component({\n    tag: 'limel-switch',\n    shadow: true,\n    styleUrl: 'switch.scss',\n})\nexport class Switch {\n    /**\n     * Label to display next to the switch\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Disables the switch when `true`,\n     * and visually shows that the switch is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the switch may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the switch when `true`. This visualizes the switch slightly differently.\n     * But shows no visual sign indicating that the switch is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The value of the switch\n     */\n    @Prop({ reflect: true })\n    public value = false;\n\n    /**\n     * Optional helper text to display below the switch\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Emitted when the value has changed\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private host: HTMLLimelSwitchElement;\n    private helperTextId: string = createRandomString();\n\n    @State()\n    private fieldId = createRandomString();\n\n    private mdcSwitch: MDCSwitch;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector(\n            '.mdc-switch',\n        ) as HTMLButtonElement;\n        if (!element) {\n            return;\n        }\n\n        this.mdcSwitch = new MDCSwitch(element);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n        this.mdcSwitch?.destroy();\n    }\n\n    public render() {\n        return (\n            <Host>\n                <button\n                    id={this.fieldId}\n                    class={{\n                        'mdc-switch': true,\n                        'lime-switch--readonly': this.readonly,\n                        'mdc-switch--unselected': !this.value,\n                        'mdc-switch--selected': this.value,\n                    }}\n                    type=\"button\"\n                    role=\"switch\"\n                    aria-checked={this.value}\n                    disabled={this.disabled || this.readonly}\n                    onClick={this.handleClick}\n                    aria-controls={this.helperTextId}\n                >\n                    <div class=\"mdc-switch__track\" />\n                    <div class=\"mdc-switch__handle-track\">\n                        <div class=\"mdc-switch__handle\">\n                            <div class=\"mdc-switch__shadow\">\n                                <div class=\"mdc-elevation-overlay\"></div>\n                            </div>\n                            <div class=\"mdc-switch__ripple\"></div>\n                            <div class=\"mdc-switch__icons\">\n                                <svg\n                                    class=\"mdc-switch__icon mdc-switch__icon--on\"\n                                    viewBox=\"0 0 24 24\"\n                                >\n                                    <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n                                </svg>\n                                <svg\n                                    class=\"mdc-switch__icon mdc-switch__icon--off\"\n                                    viewBox=\"0 0 24 24\"\n                                >\n                                    <path d=\"M20 13H4v-2h16v2z\" />\n                                </svg>\n                            </div>\n                        </div>\n                    </div>\n                </button>\n                <label\n                    class={`${\n                        this.disabled || this.readonly ? 'disabled' : ''\n                    }`}\n                    htmlFor={this.fieldId}\n                >\n                    {this.label}\n                </label>\n                {this.renderHelperLine()}\n            </Host>\n        );\n    }\n\n    @Watch('value')\n    protected valueWatcher(newValue: boolean) {\n        if (!this.mdcSwitch) {\n            return;\n        }\n\n        this.mdcSwitch.selected = newValue;\n    }\n\n    private renderHelperLine = () => {\n        if (!this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperTextId={this.helperTextId}\n                helperText={this.helperText}\n                invalid={this.invalid}\n            />\n        );\n    };\n\n    private hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.change.emit(!this.value);\n    };\n}\n"],"mappings":"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"}

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

@@ -1 +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"}
+{"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 '../../util/make-enter-clickable';\nimport { createRandomString } from '../../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-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-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"}
+{"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 '../../global/shared-types/icon.types';\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"}

package/dist/lime-elements/p-86550ce4.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["limelHelpContentCss","HelpContent","this","renderReadMoreLink","readMoreLink","h","href","_a","target","_b","title","_c","tabindex","_d","text","render","value"],"sources":["./src/components/help/limel-help-content.scss?tag=limel-help-content&encapsulation=shadow","./src/components/help/help-content.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n:host(limel-help-content) {\n    display: flex;\n    box-sizing: border-box;\n    flex-direction: column;\n    gap: 0.5rem;\n\n    max-height: 30rem;\n    height: 100%;\n}\n\nlimel-markdown {\n    @include mixins.fade-out-overflowed-content-on-edges(vertically);\n\n    padding-right: 1rem;\n    padding-left: 1rem;\n    min-height: 0;\n    min-width: 0;\n    overflow: hidden auto;\n}\n\na {\n    @include mixins.truncate-text;\n    @include mixins.hyperlink;\n\n    position: sticky;\n    bottom: 0;\n\n    text-decoration: none;\n    font-size: 0.875rem;\n    padding-bottom: 0.125rem;\n}\n\nspan {\n    padding: 0 1rem 0.5rem 1rem;\n    min-width: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../interface';\n\n/**\n * Help content\n * This is scrollable content that is placed in the popover of the Help component.\n * Moved here mostly to avoid having inlined styles in the parent component.\n * Since you cannot send styles to the Portal component, we need to have this\n * child component.\n *\n * @private\n */\n@Component({\n    tag: 'limel-help-content',\n    shadow: true,\n    styleUrl: 'limel-help-content.scss',\n})\nexport class HelpContent {\n    @Prop()\n    public value: string;\n\n    @Prop()\n    public readMoreLink?: Link;\n\n    public render() {\n        return [\n            <limel-markdown value={this.value} />,\n            this.renderReadMoreLink(),\n        ];\n    }\n\n    private renderReadMoreLink = () => {\n        if (!this.readMoreLink) {\n            return;\n        }\n\n        return (\n            <span>\n                <a\n                    href={this.readMoreLink?.href}\n                    target={this.readMoreLink?.target}\n                    title={this.readMoreLink?.title}\n                    tabindex=\"0\"\n                >\n                    {this.readMoreLink?.text}\n                </a>\n            </span>\n        );\n    };\n}\n"],"mappings":"2CAAA,MAAMA,EAAsB,kzC,MCiBfC,EAAW,M,yBAcZC,KAAAC,mBAAqB,K,YACzB,IAAKD,KAAKE,aAAc,CACpB,M,CAGJ,OACIC,EAAA,YACIA,EAAA,KACIC,MAAMC,EAAAL,KAAKE,gBAAY,MAAAG,SAAA,SAAAA,EAAED,KACzBE,QAAQC,EAAAP,KAAKE,gBAAY,MAAAK,SAAA,SAAAA,EAAED,OAC3BE,OAAOC,EAAAT,KAAKE,gBAAY,MAAAO,SAAA,SAAAA,EAAED,MAC1BE,SAAS,MAERC,EAAAX,KAAKE,gBAAY,MAAAS,SAAA,SAAAA,EAAEC,MAErB,E,iDAtBRC,SACH,MAAO,CACHV,EAAA,kBAAgBW,MAAOd,KAAKc,QAC5Bd,KAAKC,qB"}
+{"version":3,"names":["limelHelpContentCss","HelpContent","this","renderReadMoreLink","readMoreLink","h","href","_a","target","_b","title","_c","tabindex","_d","text","render","value"],"sources":["./src/components/help/limel-help-content.scss?tag=limel-help-content&encapsulation=shadow","./src/components/help/help-content.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n:host(limel-help-content) {\n    display: flex;\n    box-sizing: border-box;\n    flex-direction: column;\n    gap: 0.5rem;\n\n    max-height: 30rem;\n    height: 100%;\n}\n\nlimel-markdown {\n    @include mixins.fade-out-overflowed-content-on-edges(vertically);\n\n    padding-right: 1rem;\n    padding-left: 1rem;\n    min-height: 0;\n    min-width: 0;\n    overflow: hidden auto;\n}\n\na {\n    @include mixins.truncate-text;\n    @include mixins.hyperlink;\n\n    position: sticky;\n    bottom: 0;\n\n    text-decoration: none;\n    font-size: 0.875rem;\n    padding-bottom: 0.125rem;\n}\n\nspan {\n    padding: 0 1rem 0.5rem 1rem;\n    min-width: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * Help content\n * This is scrollable content that is placed in the popover of the Help component.\n * Moved here mostly to avoid having inlined styles in the parent component.\n * Since you cannot send styles to the Portal component, we need to have this\n * child component.\n *\n * @private\n */\n@Component({\n    tag: 'limel-help-content',\n    shadow: true,\n    styleUrl: 'limel-help-content.scss',\n})\nexport class HelpContent {\n    @Prop()\n    public value: string;\n\n    @Prop()\n    public readMoreLink?: Link;\n\n    public render() {\n        return [\n            <limel-markdown value={this.value} />,\n            this.renderReadMoreLink(),\n        ];\n    }\n\n    private renderReadMoreLink = () => {\n        if (!this.readMoreLink) {\n            return;\n        }\n\n        return (\n            <span>\n                <a\n                    href={this.readMoreLink?.href}\n                    target={this.readMoreLink?.target}\n                    title={this.readMoreLink?.title}\n                    tabindex=\"0\"\n                >\n                    {this.readMoreLink?.text}\n                </a>\n            </span>\n        );\n    };\n}\n"],"mappings":"2CAAA,MAAMA,EAAsB,kzC,MCiBfC,EAAW,M,yBAcZC,KAAAC,mBAAqB,K,YACzB,IAAKD,KAAKE,aAAc,CACpB,M,CAGJ,OACIC,EAAA,YACIA,EAAA,KACIC,MAAMC,EAAAL,KAAKE,gBAAY,MAAAG,SAAA,SAAAA,EAAED,KACzBE,QAAQC,EAAAP,KAAKE,gBAAY,MAAAK,SAAA,SAAAA,EAAED,OAC3BE,OAAOC,EAAAT,KAAKE,gBAAY,MAAAO,SAAA,SAAAA,EAAED,MAC1BE,SAAS,MAERC,EAAAX,KAAKE,gBAAY,MAAAS,SAAA,SAAAA,EAAEC,MAErB,E,iDAtBRC,SACH,MAAO,CACHV,EAAA,kBAAgBW,MAAOd,KAAKc,QAC5Bd,KAAKC,qB"}