@limetech/lime-elements 38.27.0 → 38.28.1

package/dist/lime-elements/p-e1213871.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["colorPickerCss","ColorPicker","this","shouldFocus","renderTooltip","readonly","tooltipLabel","h","label","elementId","renderPickerPalette","renderPickerTrigger","open","isOpen","openDirection","onClose","onPopoverClose","ref","setColorPickerPaletteElement","value","helperText","placeholder","invalid","onChange","handleChange","required","palette","columnCount","paletteColumnCount","background","slot","style","role","onClick","openPopover","id","disabled","element","contentElement","event","stopPropagation","change","emit","detail","componentDidRender","_a","focus","render","Host"],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker) {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\nbutton[slot='trigger'] {\n    all: unset;\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    border-radius: 0.5rem;\n\n    &:not([disabled]):not([disabled='true']) {\n        @include mixins.is-elevated-clickable();\n        @include mixins.visualize-keyboard-focus();\n    }\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        @include mixins.add-chessboard-background();\n        z-index: 0;\n    }\n\n    &:after {\n        z-index: 1;\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n        background: var(--background);\n    }\n}\n\n:host([readonly]:not([readonly='false'])) {\n    limel-input-field {\n        transform: translateX(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} /\n                        4 * -1\n                )\n            )\n            translateY(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} / 4\n                )\n            );\n    }\n}\n\n:host([readonly]:not([readonly='false'])),\n:host([disabled]:not([disabled='false'])) {\n    button[slot='trigger'] {\n        border: 1px solid rgba(var(--contrast-700), 0.65);\n    }\n}\n","import {\n    Component,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Host,\n} from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport type { CustomColorSwatch } from './color-picker.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n * @exampleComponent limel-example-color-picker-custom-palette\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is focused and empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder: string;\n\n    /**\n     * An array of either color value strings, or objects with a `name` and a `value`,\n     * which replaces the default palette. Any valid CSS color format is accepted as value\n     * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).\n     */\n    @Prop()\n    public palette?: Array<string | CustomColorSwatch>;\n\n    /**\n     * Defines the number of columns in the color swatch grid.\n     * If not provided, it will default to the number of colors in the palette;\n     * but stops at a maximum of 25 columns.\n     */\n    @Prop({ reflect: true })\n    public paletteColumnCount?: number;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return (\n            <Host>\n                {this.renderTooltip()}\n                {this.renderPickerPalette()}\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                    disabled={this.disabled}\n                    invalid={this.invalid}\n                    placeholder={this.placeholder}\n                />\n            </Host>\n        );\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    placeholder={this.placeholder}\n                    invalid={this.invalid}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    palette={this.palette as any}\n                    columnCount={this.paletteColumnCount}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n                disabled={this.readonly || this.disabled}\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,8uI,MCgCVC,EAAW,M,wDAgGZC,KAAAC,YAAc,MAqBdD,KAAAE,cAAgB,KACpB,IAAKF,KAAKG,UAAYH,KAAKI,aAAc,CACrC,OACIC,EAAA,iBACIC,MAAON,KAAKI,aACZG,UAAU,kB,GAMlBP,KAAAQ,oBAAsB,KAC1B,GAAIR,KAAKG,SAAU,CACf,OAAOH,KAAKS,qB,CAGhB,OACIJ,EAAA,iBACIK,KAAMV,KAAKW,OACXC,cAAc,eACdC,QAASb,KAAKc,gBAEbd,KAAKS,sBACNJ,EAAA,8BACIU,IAAKf,KAAKgB,6BACVC,MAAOjB,KAAKiB,MACZX,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBC,YAAanB,KAAKmB,YAClBC,QAASpB,KAAKoB,QACdC,SAAUrB,KAAKsB,aACfC,SAAUvB,KAAKuB,SACfC,QAASxB,KAAKwB,QACdC,YAAazB,KAAK0B,qBAEV,EAIhB1B,KAAAS,oBAAsB,KAC1B,MAAMkB,EAAa3B,KAAKiB,MAAQ,CAAE,eAAgBjB,KAAKiB,OAAU,GAEjE,OACIZ,EAAA,UACIuB,KAAK,UACLC,MAAOF,EACPG,KAAK,SACLC,QAAS/B,KAAKgC,YACdC,GAAG,iBACHC,SAAUlC,KAAKG,UAAYH,KAAKkC,UAClC,EAIFlC,KAAAgB,6BACJmB,IAEAnC,KAAKoC,eAAiBD,CAAO,EAGzBnC,KAAAgC,YAAeK,IACnBA,EAAMC,kBACNtC,KAAKW,OAAS,KAEdX,KAAKC,YAAcD,KAAKW,MAAM,EAG1BX,KAAAc,eAAkBuB,IACtBA,EAAMC,kBACNtC,KAAKW,OAAS,KAAK,EAGfX,KAAAsB,aAAgBe,IACpBA,EAAMC,kBACNtC,KAAKuC,OAAOC,KAAKH,EAAMI,OAAO,E,sIAzJhB,M,cAQA,M,aAOD,M,gGAgCA,K,CAEVC,qB,MACH,GAAI1C,KAAKC,aAAeD,KAAKW,OAAQ,CACjCX,KAAKC,YAAc,OACnB0C,EAAA3C,KAAKoC,kBAAc,MAAAO,SAAA,SAAAA,EAAEC,O,EAQtBC,SACH,OACIxC,EAACyC,EAAI,KACA9C,KAAKE,gBACLF,KAAKQ,sBACNH,EAAA,qBACIC,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBD,MAAOjB,KAAKiB,MACZI,SAAUrB,KAAKsB,aACfC,SAAUvB,KAAKuB,SACfpB,SAAUH,KAAKG,SACf+B,SAAUlC,KAAKkC,SACfd,QAASpB,KAAKoB,QACdD,YAAanB,KAAKmB,c"}