@limetech/lime-elements 38.22.2 → 38.23.1

package/dist/types/components/icon-button/icon-button.d.ts

@@ -1,15 +1,17 @@
+import { Icon } from '../../global/shared-types/icon.types';
 /**
  * @exampleComponent limel-example-icon-button-basic
  * @exampleComponent limel-example-icon-button-disabled
  * @exampleComponent limel-example-icon-button-elevated
  * @exampleComponent limel-example-icon-button-toggle-state
+ * @exampleComponent limel-example-icon-button-icon
  * @exampleComponent limel-example-icon-button-composite
  */
 export declare class IconButton {
   /**
    * The icon to display.
    */
-  icon: string;
+  icon: string | Icon;
   /**
    * Set to `true` to give the button our standard "elevated" look, lifting
    * it off the flat layout.
@@ -31,6 +33,7 @@ export declare class IconButton {
   private tooltipId;
   private initialize;
   render(): any;
+  private renderIcon;
   private renderTooltip;
   private filterClickWhenDisabled;
 }

package/dist/types/components.d.ts

@@ -1661,6 +1661,7 @@ export namespace Components {
      * @exampleComponent limel-example-icon-button-disabled
      * @exampleComponent limel-example-icon-button-elevated
      * @exampleComponent limel-example-icon-button-toggle-state
+     * @exampleComponent limel-example-icon-button-icon
      * @exampleComponent limel-example-icon-button-composite
      */
     interface LimelIconButton {
@@ -1675,7 +1676,7 @@ export namespace Components {
         /**
           * The icon to display.
          */
-        "icon": string;
+        "icon": string | Icon;
         /**
           * The text to show to screenreaders and other assistive tech.
          */
@@ -4088,6 +4089,7 @@ declare global {
      * @exampleComponent limel-example-icon-button-disabled
      * @exampleComponent limel-example-icon-button-elevated
      * @exampleComponent limel-example-icon-button-toggle-state
+     * @exampleComponent limel-example-icon-button-icon
      * @exampleComponent limel-example-icon-button-composite
      */
     interface HTMLLimelIconButtonElement extends Components.LimelIconButton, HTMLStencilElement {
@@ -6507,6 +6509,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-icon-button-disabled
      * @exampleComponent limel-example-icon-button-elevated
      * @exampleComponent limel-example-icon-button-toggle-state
+     * @exampleComponent limel-example-icon-button-icon
      * @exampleComponent limel-example-icon-button-composite
      */
     interface LimelIconButton {
@@ -6521,7 +6524,7 @@ declare namespace LocalJSX {
         /**
           * The icon to display.
          */
-        "icon"?: string;
+        "icon"?: string | Icon;
         /**
           * The text to show to screenreaders and other assistive tech.
          */
@@ -8825,6 +8828,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-icon-button-disabled
              * @exampleComponent limel-example-icon-button-elevated
              * @exampleComponent limel-example-icon-button-toggle-state
+             * @exampleComponent limel-example-icon-button-icon
              * @exampleComponent limel-example-icon-button-composite
              */
             "limel-icon-button": LocalJSX.LimelIconButton & JSXBase.HTMLAttributes<HTMLLimelIconButtonElement>;

package/package.json

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

package/dist/cjs/checkbox.template-f624966b.js.map

@@ -1 +0,0 @@
-{"file":"checkbox.template-f624966b.js","mappings":";;;;MAmBa,gBAAgB,GAA+C,CACxE,KAAK;EAEL,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,QAAQ,EAAE;IAChB,IAAI,IAAI,GAAkB,OAAO,CAAC;IAClC,IAAI,KAAK,CAAC,OAAO,EAAE;MACf,IAAI,GAAG;QACH,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,6DAA6D;OACvE,CAAC;KACL;IAED,OAAO;MACHA,iCACI,KAAK,EAAE,KAAK,CAAC,OAAO,mBACL,KAAK,CAAC,YAAY,EACjC,YAAY,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAC/C,MAAM,EAAE,KAAK,CAAC,cAAc,GAC9B;MACFA,QAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB;KACL,CAAC;GACL;EAED,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;IAC1C,UAAU,CAAC,cAAc,CAAC,GAAG,OAAO,CAAC;GACxC;OAAM;IACH,UAAU,CAAC,oBAAoB,CAAC,GAAG,OAAO,CAAC;IAC3C,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,SAAS,EAAE;MACpC,UAAU,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KACtD;GACJ;EAED,OAAO;IACHA,iBACI,KAAK,EAAE;QACH,eAAe,EAAE,IAAI;QACrB,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,aAAa,EAAE,KAAK,CAAC,aAAa;QAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ;OAC3B;MAEDA,iCACI,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,mBACT,KAAK,CAAC,YAAY,sBACf,KAAK,CAAC,YAAY,IAChC,UAAU,EAChB;MACFA,iBAAK,KAAK,EAAC,KAAK;QACZA,iBACI,KAAK,EAAC,YAAY,EAClB,OAAO,EAAC,WAAW,iBACP,MAAM,EAClB,SAAS,EAAC,OAAO;UAEjBA,kBAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,kCAAkC,GAAG,CACvD,CACJ;MACNA,mBAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,IAC/C,KAAK,CAAC,KAAK,CACR,CACN;IACNA,QAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB;GACL,CAAC;AACN,EAAE;AAEF,MAAM,UAAU,GAIX,CAAC,KAAK;EACP,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,QACIA,+BACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB,EACJ;AACN,CAAC;;;;","names":["h"],"sources":["./src/components/checkbox/checkbox.template.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { Label } from '../dynamic-label/label.types';\nimport { Icon } from '../../interface';\n\ninterface CheckboxTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    readonly?: boolean;\n    indeterminate?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n    helperText?: string;\n    helperTextId?: string;\n    readonlyLabels?: Array<Label<boolean>>;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n    props\n) => {\n    const inputProps = {};\n    if (props.readonly) {\n        let icon: string | Icon = 'minus';\n        if (props.checked) {\n            icon = {\n                name: 'ok',\n                color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',\n            };\n        }\n\n        return [\n            <limel-dynamic-label\n                value={props.checked}\n                aria-controls={props.helperTextId}\n                defaultLabel={{ text: props.label, icon: icon }}\n                labels={props.readonlyLabels}\n            />,\n            <HelperText\n                text={props.helperText}\n                helperTextId={props.helperTextId}\n                invalid={props.invalid}\n            />,\n        ];\n    }\n\n    if (props.indeterminate) {\n        inputProps['data-indeterminate'] = 'true';\n        inputProps['aria-checked'] = 'mixed';\n    } else {\n        inputProps['data-indeterminate'] = 'false';\n        if (typeof props.checked === 'boolean') {\n            inputProps['aria-checked'] = String(props.checked);\n        }\n    }\n\n    return [\n        <div\n            class={{\n                'boolean-input': true,\n                checkbox: true,\n                checked: props.checked,\n                invalid: props.invalid,\n                disabled: props.disabled,\n                required: props.required,\n                indeterminate: props.indeterminate,\n                readonly: props.readonly,\n            }}\n        >\n            <input\n                type=\"checkbox\"\n                id={props.id}\n                checked={props.checked}\n                disabled={props.disabled || props.readonly}\n                required={props.required}\n                onChange={props.onChange}\n                aria-controls={props.helperTextId}\n                aria-describedby={props.helperTextId}\n                {...inputProps}\n            />\n            <div class=\"box\">\n                <svg\n                    class=\"check-mark\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                >\n                    <path fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                </svg>\n            </div>\n            <label class=\"boolean-input-label\" htmlFor={props.id}>\n                {props.label}\n            </label>\n        </div>,\n        <HelperText\n            text={props.helperText}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{\n    helperTextId: string;\n    text: string;\n    invalid?: boolean;\n}> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return (\n        <limel-helper-line\n            helperText={props.text.trim()}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />\n    );\n};\n"],"version":3}

package/dist/esm/checkbox.template-890a59d7.js.map

@@ -1 +0,0 @@
-{"file":"checkbox.template-890a59d7.js","mappings":";;MAmBa,gBAAgB,GAA+C,CACxE,KAAK;EAEL,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,QAAQ,EAAE;IAChB,IAAI,IAAI,GAAkB,OAAO,CAAC;IAClC,IAAI,KAAK,CAAC,OAAO,EAAE;MACf,IAAI,GAAG;QACH,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,6DAA6D;OACvE,CAAC;KACL;IAED,OAAO;MACH,2BACI,KAAK,EAAE,KAAK,CAAC,OAAO,mBACL,KAAK,CAAC,YAAY,EACjC,YAAY,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAC/C,MAAM,EAAE,KAAK,CAAC,cAAc,GAC9B;MACF,EAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB;KACL,CAAC;GACL;EAED,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;IAC1C,UAAU,CAAC,cAAc,CAAC,GAAG,OAAO,CAAC;GACxC;OAAM;IACH,UAAU,CAAC,oBAAoB,CAAC,GAAG,OAAO,CAAC;IAC3C,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,SAAS,EAAE;MACpC,UAAU,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KACtD;GACJ;EAED,OAAO;IACH,WACI,KAAK,EAAE;QACH,eAAe,EAAE,IAAI;QACrB,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,aAAa,EAAE,KAAK,CAAC,aAAa;QAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ;OAC3B;MAED,2BACI,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,mBACT,KAAK,CAAC,YAAY,sBACf,KAAK,CAAC,YAAY,IAChC,UAAU,EAChB;MACF,WAAK,KAAK,EAAC,KAAK;QACZ,WACI,KAAK,EAAC,YAAY,EAClB,OAAO,EAAC,WAAW,iBACP,MAAM,EAClB,SAAS,EAAC,OAAO;UAEjB,YAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,kCAAkC,GAAG,CACvD,CACJ;MACN,aAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,IAC/C,KAAK,CAAC,KAAK,CACR,CACN;IACN,EAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB;GACL,CAAC;AACN,EAAE;AAEF,MAAM,UAAU,GAIX,CAAC,KAAK;EACP,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,QACI,yBACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB,EACJ;AACN,CAAC;;;;","names":[],"sources":["./src/components/checkbox/checkbox.template.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { Label } from '../dynamic-label/label.types';\nimport { Icon } from '../../interface';\n\ninterface CheckboxTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    readonly?: boolean;\n    indeterminate?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n    helperText?: string;\n    helperTextId?: string;\n    readonlyLabels?: Array<Label<boolean>>;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n    props\n) => {\n    const inputProps = {};\n    if (props.readonly) {\n        let icon: string | Icon = 'minus';\n        if (props.checked) {\n            icon = {\n                name: 'ok',\n                color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',\n            };\n        }\n\n        return [\n            <limel-dynamic-label\n                value={props.checked}\n                aria-controls={props.helperTextId}\n                defaultLabel={{ text: props.label, icon: icon }}\n                labels={props.readonlyLabels}\n            />,\n            <HelperText\n                text={props.helperText}\n                helperTextId={props.helperTextId}\n                invalid={props.invalid}\n            />,\n        ];\n    }\n\n    if (props.indeterminate) {\n        inputProps['data-indeterminate'] = 'true';\n        inputProps['aria-checked'] = 'mixed';\n    } else {\n        inputProps['data-indeterminate'] = 'false';\n        if (typeof props.checked === 'boolean') {\n            inputProps['aria-checked'] = String(props.checked);\n        }\n    }\n\n    return [\n        <div\n            class={{\n                'boolean-input': true,\n                checkbox: true,\n                checked: props.checked,\n                invalid: props.invalid,\n                disabled: props.disabled,\n                required: props.required,\n                indeterminate: props.indeterminate,\n                readonly: props.readonly,\n            }}\n        >\n            <input\n                type=\"checkbox\"\n                id={props.id}\n                checked={props.checked}\n                disabled={props.disabled || props.readonly}\n                required={props.required}\n                onChange={props.onChange}\n                aria-controls={props.helperTextId}\n                aria-describedby={props.helperTextId}\n                {...inputProps}\n            />\n            <div class=\"box\">\n                <svg\n                    class=\"check-mark\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                >\n                    <path fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                </svg>\n            </div>\n            <label class=\"boolean-input-label\" htmlFor={props.id}>\n                {props.label}\n            </label>\n        </div>,\n        <HelperText\n            text={props.helperText}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{\n    helperTextId: string;\n    text: string;\n    invalid?: boolean;\n}> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return (\n        <limel-helper-line\n            helperText={props.text.trim()}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />\n    );\n};\n"],"version":3}

package/dist/lime-elements/p-2c69d13e.js

@@ -1,2 +0,0 @@
-import{h as e}from"./p-288f0842.js";const l=l=>{const r={};if(l.readonly){let r="minus";if(l.checked){r={name:"ok",color:"var(--lime-primary-color, var(--limel-theme-primary-color))"}}return[e("limel-dynamic-label",{value:l.checked,"aria-controls":l.helperTextId,defaultLabel:{text:l.label,icon:r},labels:l.readonlyLabels}),e(i,{text:l.helperText,helperTextId:l.helperTextId,invalid:l.invalid})]}if(l.indeterminate){r["data-indeterminate"]="true";r["aria-checked"]="mixed"}else{r["data-indeterminate"]="false";if(typeof l.checked==="boolean"){r["aria-checked"]=String(l.checked)}}return[e("div",{class:{"boolean-input":true,checkbox:true,checked:l.checked,invalid:l.invalid,disabled:l.disabled,required:l.required,indeterminate:l.indeterminate,readonly:l.readonly}},e("input",Object.assign({type:"checkbox",id:l.id,checked:l.checked,disabled:l.disabled||l.readonly,required:l.required,onChange:l.onChange,"aria-controls":l.helperTextId,"aria-describedby":l.helperTextId},r)),e("div",{class:"box"},e("svg",{class:"check-mark",viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false"},e("path",{fill:"none",d:"M1.73,12.91 8.1,19.28 22.79,4.59"}))),e("label",{class:"boolean-input-label",htmlFor:l.id},l.label)),e(i,{text:l.helperText,helperTextId:l.helperTextId,invalid:l.invalid})]};const i=l=>{if(typeof l.text!=="string"){return}return e("limel-helper-line",{helperText:l.text.trim(),helperTextId:l.helperTextId,invalid:l.invalid})};export{l as C};
-//# sourceMappingURL=p-2c69d13e.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["CheckboxTemplate","props","inputProps","readonly","icon","checked","name","color","h","value","helperTextId","defaultLabel","text","label","labels","readonlyLabels","HelperText","helperText","invalid","indeterminate","String","class","checkbox","disabled","required","Object","assign","type","id","onChange","viewBox","focusable","fill","d","htmlFor","trim"],"sources":["./src/components/checkbox/checkbox.template.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { Label } from '../dynamic-label/label.types';\nimport { Icon } from '../../interface';\n\ninterface CheckboxTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    readonly?: boolean;\n    indeterminate?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n    helperText?: string;\n    helperTextId?: string;\n    readonlyLabels?: Array<Label<boolean>>;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n    props\n) => {\n    const inputProps = {};\n    if (props.readonly) {\n        let icon: string | Icon = 'minus';\n        if (props.checked) {\n            icon = {\n                name: 'ok',\n                color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',\n            };\n        }\n\n        return [\n            <limel-dynamic-label\n                value={props.checked}\n                aria-controls={props.helperTextId}\n                defaultLabel={{ text: props.label, icon: icon }}\n                labels={props.readonlyLabels}\n            />,\n            <HelperText\n                text={props.helperText}\n                helperTextId={props.helperTextId}\n                invalid={props.invalid}\n            />,\n        ];\n    }\n\n    if (props.indeterminate) {\n        inputProps['data-indeterminate'] = 'true';\n        inputProps['aria-checked'] = 'mixed';\n    } else {\n        inputProps['data-indeterminate'] = 'false';\n        if (typeof props.checked === 'boolean') {\n            inputProps['aria-checked'] = String(props.checked);\n        }\n    }\n\n    return [\n        <div\n            class={{\n                'boolean-input': true,\n                checkbox: true,\n                checked: props.checked,\n                invalid: props.invalid,\n                disabled: props.disabled,\n                required: props.required,\n                indeterminate: props.indeterminate,\n                readonly: props.readonly,\n            }}\n        >\n            <input\n                type=\"checkbox\"\n                id={props.id}\n                checked={props.checked}\n                disabled={props.disabled || props.readonly}\n                required={props.required}\n                onChange={props.onChange}\n                aria-controls={props.helperTextId}\n                aria-describedby={props.helperTextId}\n                {...inputProps}\n            />\n            <div class=\"box\">\n                <svg\n                    class=\"check-mark\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                >\n                    <path fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                </svg>\n            </div>\n            <label class=\"boolean-input-label\" htmlFor={props.id}>\n                {props.label}\n            </label>\n        </div>,\n        <HelperText\n            text={props.helperText}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{\n    helperTextId: string;\n    text: string;\n    invalid?: boolean;\n}> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return (\n        <limel-helper-line\n            helperText={props.text.trim()}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />\n    );\n};\n"],"mappings":"0CAmBaA,EACTC,IAEA,MAAMC,EAAa,GACnB,GAAID,EAAME,SAAU,CAChB,IAAIC,EAAsB,QAC1B,GAAIH,EAAMI,QAAS,CACfD,EAAO,CACHE,KAAM,KACNC,MAAO,8D,CAIf,MAAO,CACHC,EAAA,uBACIC,MAAOR,EAAMI,QAAO,gBACLJ,EAAMS,aACrBC,aAAc,CAAEC,KAAMX,EAAMY,MAAOT,KAAMA,GACzCU,OAAQb,EAAMc,iBAElBP,EAACQ,EAAU,CACPJ,KAAMX,EAAMgB,WACZP,aAAcT,EAAMS,aACpBQ,QAASjB,EAAMiB,U,CAK3B,GAAIjB,EAAMkB,cAAe,CACrBjB,EAAW,sBAAwB,OACnCA,EAAW,gBAAkB,O,KAC1B,CACHA,EAAW,sBAAwB,QACnC,UAAWD,EAAMI,UAAY,UAAW,CACpCH,EAAW,gBAAkBkB,OAAOnB,EAAMI,Q,EAIlD,MAAO,CACHG,EAAA,OACIa,MAAO,CACH,gBAAiB,KACjBC,SAAU,KACVjB,QAASJ,EAAMI,QACfa,QAASjB,EAAMiB,QACfK,SAAUtB,EAAMsB,SAChBC,SAAUvB,EAAMuB,SAChBL,cAAelB,EAAMkB,cACrBhB,SAAUF,EAAME,WAGpBK,EAAA,QAAAiB,OAAAC,OAAA,CACIC,KAAK,WACLC,GAAI3B,EAAM2B,GACVvB,QAASJ,EAAMI,QACfkB,SAAUtB,EAAMsB,UAAYtB,EAAME,SAClCqB,SAAUvB,EAAMuB,SAChBK,SAAU5B,EAAM4B,SAAQ,gBACT5B,EAAMS,aAAY,mBACfT,EAAMS,cACpBR,IAERM,EAAA,OAAKa,MAAM,OACPb,EAAA,OACIa,MAAM,aACNS,QAAQ,YAAW,cACP,OACZC,UAAU,SAEVvB,EAAA,QAAMwB,KAAK,OAAOC,EAAE,uCAG5BzB,EAAA,SAAOa,MAAM,sBAAsBa,QAASjC,EAAM2B,IAC7C3B,EAAMY,QAGfL,EAACQ,EAAU,CACPJ,KAAMX,EAAMgB,WACZP,aAAcT,EAAMS,aACpBQ,QAASjB,EAAMiB,UAEtB,EAGL,MAAMF,EAIAf,IACF,UAAWA,EAAMW,OAAS,SAAU,CAChC,M,CAGJ,OACIJ,EAAA,qBACIS,WAAYhB,EAAMW,KAAKuB,OACvBzB,aAAcT,EAAMS,aACpBQ,QAASjB,EAAMiB,SACjB,S"}

package/dist/lime-elements/p-45b6d10e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["textEditorCss","TextEditor","constructor","hostRef","this","renderHelperLine","helperText","h","helperTextId","invalid","isInvalid","readonly","handleChange","event","stopPropagation","change","emit","detail","handleImagePasted","imagePasted","handleMetadataChange","metadataChange","handleImageRemoved","imageRemoved","createRandomString","editorId","render","Host","labelId","label","required","disabled","hasValue","value","hasFloatingLabel","renderEditor","renderPlaceholder","slot","id","placeholder","contentType","onChange","onImagePasted","onImageRemoved","onMetadataChange","customElements","language","triggerCharacters","triggers","ui","class"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n/**\n * @prop --text-editor-max-height: the tallest height the text editor can become when auto-resizing itself. Defaults to `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem)`.\n * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).\n */\n\n* {\n    box-sizing: border-box;\n}\n\n$min-height: 5rem;\n$min-height-condensed: calc($min-height / 2);\n\n:host(limel-text-editor) {\n    --limel-notched-outline-z-index: 2; // since `div.toolbar` has `z-index: 1;`\n    --limel-prosemirror-adapter-toolbar-opacity: 0.6;\n    --limel-text-editor-padding: 0.25rem 1rem 0.75rem 1rem;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows: 1fr;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration: 0.3s;\n    --limel-prosemirror-adapter-toolbar-transition-timing-function: cubic-bezier(\n        0.19,\n        0.23,\n        0.26,\n        0.89\n    );\n\n    position: relative;\n    isolation: isolate;\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n    min-width: 5rem;\n    min-height: $min-height;\n    height: 100%;\n    max-height: var(\n        --text-editor-max-height,\n        calc(\n            100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) -\n                4rem\n        )\n    );\n    padding: 1px; // prevents visual defects that can appear due to the backdrop-filter and closeness to borders\n\n    limel-notched-outline {\n        height: 100%; // overrides the default `height: fit-content;`\n    }\n}\n\n:host(limel-text-editor:focus-within),\n:host(limel-text-editor:not([ui='minimal']):hover) {\n    --limel-prosemirror-adapter-toolbar-opacity: 1;\n}\n\n:host(limel-text-editor[ui='minimal']:not(:focus-within)) {\n    --limel-prosemirror-adapter-toolbar-grid-template-rows: 0fr;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration: 0.46s;\n    --limel-prosemirror-adapter-action-bar-padding-top-bottom: 0;\n    --limel-prosemirror-adapter-toolbar-opacity: 0;\n}\n\n:host(limel-text-editor[ui='minimal']:not(:focus-within)),\n:host(limel-text-editor[ui='no-toolbar']) {\n    --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\n    --limel-text-editor-placeholder-top: 0;\n\n    min-height: $min-height-condensed;\n    limel-prosemirror-adapter {\n        min-height: $min-height-condensed;\n    }\n}\n\n:host(limel-text-editor:focus-within),\n:host(limel-text-editor:focus) {\n    .placeholder {\n        opacity: 0;\n    }\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n    limel-prosemirror-adapter {\n        @include shared_input-select-picker.looks-disabled;\n        pointer-events: none;\n    }\n}\n\n:host(limel-text-editor[readonly]:not([readonly='false'])) {\n    --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\n    --limel-text-editor-placeholder-top: 0;\n\n    limel-markdown {\n        // displayed when `readonly` instead of the adapter\n        display: block;\n        padding: var(--limel-text-editor-padding);\n\n        overflow-y: auto;\n        -webkit-overflow-scrolling: touch;\n        height: 100%;\n\n        &:before,\n        &:after {\n            z-index: 1;\n            pointer-events: none;\n            content: '';\n            display: block;\n            position: absolute;\n            width: 100%;\n        }\n        &:after {\n            height: 1.75rem;\n            top: 0;\n            background: linear-gradient(\n                var(\n                    --text-editor-fade-out-background-color,\n                    rgb(var(--contrast-100))\n                ),\n                transparent\n            );\n        }\n\n        &:before {\n            height: 2rem;\n            bottom: -0.25rem;\n            background: linear-gradient(\n                transparent,\n                var(\n                    --text-editor-fade-out-background-color,\n                    rgb(var(--contrast-100))\n                )\n            );\n        }\n    }\n}\n\n.placeholder {\n    transition-property: top;\n    transition-duration: var(\n        --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration\n    );\n    transition-timing-function: var(\n        --limel-prosemirror-adapter-toolbar-transition-timing-function\n    );\n    @include mixins.truncate-text;\n    pointer-events: none;\n    position: absolute;\n    top: var(--limel-text-editor-placeholder-top, 2.25rem);\n    left: 0;\n    right: 0;\n\n    padding: var(--limel-text-editor-padding);\n    font-style: italic;\n    font-size: var(--limel-theme-default-font-size);\n    color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n    flex-grow: 1;\n\n    min-width: 0;\n    min-height: $min-height;\n    height: 100%; // this can be overwritten by user's manual resizing\n    max-height: 100%;\n    overflow: hidden auto;\n    -webkit-overflow-scrolling: touch;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n\n:host(limel-text-editor[allow-resize]) {\n    limel-prosemirror-adapter {\n        resize: vertical;\n    }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { Languages } from '../date-picker/date.types';\nimport { createRandomString } from '../../util/random-string';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport {\n    TriggerCharacter,\n    TriggerEventDetail,\n    ImageInserter,\n    EditorImage,\n    EditorMetadata,\n} from './text-editor.types';\nimport { EditorUiType } from './types';\n\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-with-tables\n * @exampleComponent limel-example-text-editor-with-inline-images-file-storage\n * @exampleComponent limel-example-text-editor-with-inline-images-base64\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-ui\n * @exampleComponent limel-example-text-editor-custom-element\n * @exampleComponent limel-example-text-editor-triggers\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n */\n@Component({\n    tag: 'limel-text-editor',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n    /**\n     * The type of content that the editor should handle and emit, defaults to `markdown`\n     *\n     * Assumed to be set only once, so not reactive to changes\n     */\n    @Prop()\n    public contentType: 'markdown' | 'html' = 'markdown';\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\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?: boolean = false;\n\n    /**\n     * Set to `true` to make the component 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     * :::note\n     * Consider that it might be better to use `limel-markdown`\n     * instead of `limel-text-editor` when the goal is visualizing data.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public readonly?: boolean = false;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder?: string;\n\n    /**\n     * The label of the editor\n     */\n    @Prop({ reflect: true })\n    public label?: string;\n\n    /**\n     * Set to `true` to indicate that the current value of the editor is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Description of the text inside the editor as markdown\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * A list of custom elements\n     *\n     * Any `CustomElement` that should be used inside the text editor needs\n     * to be defined here.\n     *\n     * @private\n     * @alpha\n     */\n    @Prop()\n    public customElements: CustomElementDefinition[] = [];\n\n    /**\n     * A set of trigger characters\n     *\n     * Defining a character here will enable trigger events to be sent if the\n     * character is detected in the editor.\n     *\n     * @private\n     * @alpha\n     */\n    @Prop()\n    public triggers: TriggerCharacter[] = [];\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     *\n     * :::important\n     * An empty but required field is not automatically considered invalid.\n     * You must make sure to check the validity of the field on your own,\n     * and properly handle the `invalid` state.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public required?: boolean = false;\n\n    /**\n     * Set to `true` to allow the user to vertically resize the editor.\n     * Set to `false` to disable the resize functionality.\n     */\n    @Prop({ reflect: true })\n    public allowResize: boolean = true;\n\n    /**\n     * Specifies the visual appearance of the editor.\n     *\n     * - `standard`: The default editor appearance with a full toolbar and\n     *    standard layout.\n     * - `minimal`: A compact editor appearance, ideal for limited space\n     *    scenarios such as mobile devices. In this mode, the toolbar is hidden\n     *    until the editor is focused.\n     * - `no-toolbar`: A basic textarea appearance without any text styling toolbar.\n     *    This mode is suitable for scenarios where you want to provide a simple\n     *    text input without any visible formatting options; but still provide\n     *    support for markdown syntax and rich text, using hotkeys or when pasting.\n     */\n    @Prop({ reflect: true })\n    public ui?: EditorUiType = 'standard';\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    /**\n     * Dispatched when a image is pasted into the editor\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    private readonly imagePasted: EventEmitter<ImageInserter>;\n\n    /**\n     * Dispatched when a image is removed from the editor\n     *\n     * @private\n     * @alpha\n     * @deprecated - This event is deprecated and will be removed in a future version.\n     * Use the `metadataChange` event instead to track image removals.\n     */\n    @Event()\n    private readonly imageRemoved: EventEmitter<EditorImage>;\n\n    /**\n     * Dispatched when the metadata of the editor changes\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    private readonly metadataChange: EventEmitter<EditorMetadata>;\n\n    /**\n     * Dispatched if a trigger character is detected.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerStart: EventEmitter<TriggerEventDetail>;\n\n    /**\n     * Dispatched if a trigger session is ended. That is if the selection\n     * goes outside the trigger input or if something is inserted using the\n     * supplied `TextEditor` insert function.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerStop: EventEmitter<TriggerEventDetail>;\n\n    /**\n     * Dispatched if a input is changed during an active trigger.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerChange: EventEmitter<TriggerEventDetail>;\n\n    private readonly helperTextId: string;\n    private readonly editorId: string;\n\n    public constructor() {\n        this.helperTextId = createRandomString();\n        this.editorId = createRandomString();\n    }\n\n    public render() {\n        return (\n            <Host>\n                <limel-notched-outline\n                    labelId={this.editorId}\n                    label={this.label}\n                    required={this.required}\n                    invalid={this.invalid}\n                    disabled={this.disabled}\n                    readonly={this.readonly}\n                    hasValue={!!this.value}\n                    hasFloatingLabel={true}\n                >\n                    {this.renderEditor()}\n                    {this.renderPlaceholder()}\n                </limel-notched-outline>\n                {this.renderHelperLine()}\n            </Host>\n        );\n    }\n\n    private renderEditor() {\n        if (this.readonly) {\n            return (\n                <limel-markdown\n                    slot=\"content\"\n                    value={this.value}\n                    aria-controls={this.helperTextId}\n                    id={this.editorId}\n                />\n            );\n        }\n\n        return (\n            <limel-prosemirror-adapter\n                slot=\"content\"\n                aria-placeholder={this.placeholder}\n                contentType={this.contentType}\n                onChange={this.handleChange}\n                onImagePasted={this.handleImagePasted}\n                onImageRemoved={this.handleImageRemoved}\n                onMetadataChange={this.handleMetadataChange}\n                customElements={this.customElements}\n                value={this.value}\n                aria-controls={this.helperTextId}\n                id={this.editorId}\n                aria-disabled={this.disabled}\n                aria-invalid={this.invalid}\n                aria-required={this.required}\n                language={this.language}\n                triggerCharacters={this.triggers}\n                disabled={this.disabled}\n                ui={this.ui}\n            />\n        );\n    }\n\n    private renderPlaceholder() {\n        if (!this.placeholder || this.value) {\n            return;\n        }\n\n        return (\n            <span class=\"placeholder\" aria-hidden=\"true\" slot=\"content\">\n                {this.placeholder}\n            </span>\n        );\n    }\n\n    private renderHelperLine = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private isInvalid = () => {\n        if (this.readonly) {\n            // A readonly field can never be invalid.\n            return false;\n        }\n\n        if (this.invalid) {\n            return true;\n        }\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n\n    private handleImagePasted = (event: CustomEvent<ImageInserter>) => {\n        event.stopPropagation();\n        this.imagePasted.emit(event.detail);\n    };\n\n    private handleMetadataChange = (event: CustomEvent<EditorMetadata>) => {\n        event.stopPropagation();\n        this.metadataChange.emit(event.detail);\n    };\n\n    private handleImageRemoved = (event: CustomEvent<EditorImage>) => {\n        event.stopPropagation();\n\n        this.imageRemoved.emit(event.detail);\n    };\n}\n"],"mappings":"6FAAA,MAAMA,EAAgB,kkI,MC2CTC,EAAU,MAkMnBC,YAAAC,G,6SA0EQC,KAAAC,iBAAmB,KACvB,IAAKD,KAAKE,WAAY,CAClB,M,CAGJ,OACIC,EAAA,qBACID,WAAYF,KAAKE,WACjBE,aAAcJ,KAAKI,aACnBC,QAASL,KAAKM,aAChB,EAIFN,KAAAM,UAAY,KAChB,GAAIN,KAAKO,SAAU,CAEf,OAAO,K,CAGX,GAAIP,KAAKK,QAAS,CACd,OAAO,I,GAIPL,KAAAQ,aAAgBC,IACpBA,EAAMC,kBACNV,KAAKW,OAAOC,KAAKH,EAAMI,OAAO,EAG1Bb,KAAAc,kBAAqBL,IACzBA,EAAMC,kBACNV,KAAKe,YAAYH,KAAKH,EAAMI,OAAO,EAG/Bb,KAAAgB,qBAAwBP,IAC5BA,EAAMC,kBACNV,KAAKiB,eAAeL,KAAKH,EAAMI,OAAO,EAGlCb,KAAAkB,mBAAsBT,IAC1BA,EAAMC,kBAENV,KAAKmB,aAAaP,KAAKH,EAAMI,OAAO,E,iBAhTE,W,cAMb,K,cASD,M,cAYA,M,uFA0BD,M,yCAkBwB,G,cAYb,G,cAYV,M,iBAOE,K,QAgBH,WAsEvBb,KAAKI,aAAegB,IACpBpB,KAAKqB,SAAWD,G,CAGbE,SACH,OACInB,EAACoB,EAAI,KACDpB,EAAA,yBACIqB,QAASxB,KAAKqB,SACdI,MAAOzB,KAAKyB,MACZC,SAAU1B,KAAK0B,SACfrB,QAASL,KAAKK,QACdsB,SAAU3B,KAAK2B,SACfpB,SAAUP,KAAKO,SACfqB,WAAY5B,KAAK6B,MACjBC,iBAAkB,MAEjB9B,KAAK+B,eACL/B,KAAKgC,qBAEThC,KAAKC,mB,CAKV8B,eACJ,GAAI/B,KAAKO,SAAU,CACf,OACIJ,EAAA,kBACI8B,KAAK,UACLJ,MAAO7B,KAAK6B,MAAK,gBACF7B,KAAKI,aACpB8B,GAAIlC,KAAKqB,U,CAKrB,OACIlB,EAAA,6BACI8B,KAAK,UAAS,mBACIjC,KAAKmC,YACvBC,YAAapC,KAAKoC,YAClBC,SAAUrC,KAAKQ,aACf8B,cAAetC,KAAKc,kBACpByB,eAAgBvC,KAAKkB,mBACrBsB,iBAAkBxC,KAAKgB,qBACvByB,eAAgBzC,KAAKyC,eACrBZ,MAAO7B,KAAK6B,MAAK,gBACF7B,KAAKI,aACpB8B,GAAIlC,KAAKqB,SAAQ,gBACFrB,KAAK2B,SAAQ,eACd3B,KAAKK,QAAO,gBACXL,KAAK0B,SACpBgB,SAAU1C,KAAK0C,SACfC,kBAAmB3C,KAAK4C,SACxBjB,SAAU3B,KAAK2B,SACfkB,GAAI7C,KAAK6C,I,CAKbb,oBACJ,IAAKhC,KAAKmC,aAAenC,KAAK6B,MAAO,CACjC,M,CAGJ,OACI1B,EAAA,QAAM2C,MAAM,cAAa,cAAa,OAAOb,KAAK,WAC7CjC,KAAKmC,Y"}

package/dist/lime-elements/p-a8fe6abf.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o,H as e,g as n}from"./p-288f0842.js";import{m as a,r as s}from"./p-e127eaaa.js";import{c as i}from"./p-ad52787a.js";const r='@charset "UTF-8";:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button{all:unset;display:inline-flex;align-items:center;justify-content:center;height:2.25rem;width:2.25rem;border-radius:50%}button:not(:disabled){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--icon-background-color, transparent)}button:not(:disabled):hover,button:not(:disabled):focus,button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}button:not(:disabled):hover,button:not(:disabled):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button:not(:disabled):hover{box-shadow:var(--button-shadow-hovered)}button:not(:disabled):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button:not(:disabled):hover,button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:disabled{cursor:not-allowed;color:var(--limel-theme-text-disabled-on-background-color)}:host([elevated]) button{box-shadow:var(--button-shadow-normal)}:host([elevated]) button:disabled{box-shadow:var(--button-shadow-normal)}limel-icon{width:1.25rem}';const l=class{constructor(o){t(this,o);this.tooltipId=i();this.filterClickWhenDisabled=t=>{if(this.disabled){t.preventDefault()}};this.icon=undefined;this.elevated=false;this.label=undefined;this.disabled=false}connectedCallback(){this.initialize()}componentWillLoad(){a(this.host)}disconnectedCallback(){s(this.host)}componentDidLoad(){this.initialize()}initialize(){const t=this.host.shadowRoot.querySelector(".mdc-icon-button");if(!t){return}}render(){const t={};if(this.host.hasAttribute("tabindex")){t.tabindex=this.host.getAttribute("tabindex")}return o(e,{onClick:this.filterClickWhenDisabled},o("button",Object.assign({disabled:this.disabled,id:this.tooltipId},t),o("limel-icon",{name:this.icon,badge:true}),this.renderTooltip(this.tooltipId)))}renderTooltip(t){if(this.label){return o("limel-tooltip",{elementId:t,label:this.label})}}static get delegatesFocus(){return true}get host(){return n(this)}};l.style=r;export{l as limel_icon_button};
-//# sourceMappingURL=p-a8fe6abf.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["iconButtonCss","IconButton","this","tooltipId","createRandomString","filterClickWhenDisabled","e","disabled","preventDefault","connectedCallback","initialize","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","componentDidLoad","element","shadowRoot","querySelector","render","buttonAttributes","hasAttribute","tabindex","getAttribute","h","Host","onClick","Object","assign","id","name","icon","badge","renderTooltip","label","elementId"],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n * @prop --icon-background-color: Background color of the button.\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n@include mixins.visualize-aria-expanded('button');\n\nbutton {\n    all: unset;\n    &:not(:disabled) {\n        @include mixins.is-flat-clickable(\n            $background-color: var(--icon-background-color, transparent)\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 2.25rem;\n    width: 2.25rem;\n    border-radius: 50%;\n\n    &:disabled {\n        cursor: not-allowed;\n\n        color: var(--limel-theme-text-disabled-on-background-color);\n    }\n}\n\n:host([elevated]) {\n    button {\n        box-shadow: var(--button-shadow-normal);\n        &:disabled {\n            box-shadow: var(--button-shadow-normal);\n        }\n    }\n}\n\nlimel-icon {\n    width: 1.25rem;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private tooltipId = createRandomString();\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                <button\n                    disabled={this.disabled}\n                    id={this.tooltipId}\n                    {...buttonAttributes}\n                >\n                    <limel-icon name={this.icon} badge={true} />\n                    {this.renderTooltip(this.tooltipId)}\n                </button>\n            </Host>\n        );\n    }\n    private renderTooltip(tooltipId) {\n        if (this.label) {\n            return <limel-tooltip elementId={tooltipId} label={this.label} />;\n        }\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled) {\n            e.preventDefault();\n        }\n    };\n}\n"],"mappings":"wIAAA,MAAMA,EAAgB,s5D,MCmBTC,EAAU,M,yBA6CXC,KAAAC,UAAYC,IAmCZF,KAAAG,wBAA2BC,IAC/B,GAAIJ,KAAKK,SAAU,CACfD,EAAEE,gB,qCAtEQ,M,mCAYA,K,CAKXC,oBACHP,KAAKQ,Y,CAGFC,oBACHC,EAAmBV,KAAKW,K,CAGrBC,uBACHC,EAAqBb,KAAKW,K,CAGvBG,mBACHd,KAAKQ,Y,CAKDA,aACJ,MAAMO,EAAUf,KAAKW,KAAKK,WAAWC,cAAc,oBACnD,IAAKF,EAAS,CACV,M,EAIDG,SACH,MAAMC,EAA0C,GAEhD,GAAInB,KAAKW,KAAKS,aAAa,YAAa,CACpCD,EAAiBE,SAAWrB,KAAKW,KAAKW,aAAa,W,CAGvD,OACIC,EAACC,EAAI,CAACC,QAASzB,KAAKG,yBAChBoB,EAAA,SAAAG,OAAAC,OAAA,CACItB,SAAUL,KAAKK,SACfuB,GAAI5B,KAAKC,WACLkB,GAEJI,EAAA,cAAYM,KAAM7B,KAAK8B,KAAMC,MAAO,OACnC/B,KAAKgC,cAAchC,KAAKC,Y,CAKjC+B,cAAc/B,GAClB,GAAID,KAAKiC,MAAO,CACZ,OAAOV,EAAA,iBAAeW,UAAWjC,EAAWgC,MAAOjC,KAAKiC,O"}