@limetech/lime-elements 38.21.2 → 38.21.3

package/dist/lime-elements/style/internal/boolean-input.scss

@@ -0,0 +1,178 @@
+@use '../mixins';
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+.boolean-input {
+    --limel-boolean-input-box-size: 1.25rem;
+    --limel-boolean-input-gap-size: 0.5rem;
+    position: relative;
+    isolation: isolate;
+
+    display: flex;
+    align-items: center;
+
+    min-height: var(
+        --limel-checkbox-min-height,
+        2.5rem
+    ); // helps align with other fields in the form, or within table rows
+    width: 100%;
+
+    input[type='checkbox'],
+    input[type='radio'] {
+        // Hide the native checkbox
+        @include mixins.visually-hidden;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+    }
+}
+
+label.boolean-input-label {
+    // Ensure the label is always clickable, even when empty
+    min-width: var(--limel-boolean-input-box-size);
+    min-height: var(--limel-boolean-input-box-size);
+    padding-top: 0.125rem;
+    // ====
+
+    cursor: pointer;
+    position: relative;
+    width: 100%;
+
+    font-size: var(--limel-theme-default-small-font-size);
+    color: var(--limel-theme-text-primary-on-background-color);
+
+    padding-left: calc(
+        var(--limel-boolean-input-box-size) +
+            var(--limel-boolean-input-gap-size)
+    );
+
+    .disabled:not([readonly]):not([readonly='true']) & {
+        cursor: not-allowed;
+        color: var(--limel-theme-text-disabled-color);
+    }
+
+    .required & {
+        &:after {
+            margin-left: 0.0625rem;
+            content: '*';
+        }
+    }
+
+    .invalid:not(.readonly) & {
+        color: var(--limel-theme-error-text-color);
+    }
+
+    :host(limel-checkbox.hide-label) &,
+    .hide-label & {
+        // this helper class of `hide-label` can be added for example to the `host` element,
+        // or if the `CheckboxTemplate` is imported to other components, the class can be
+        // added to the `checkbox` element itself
+        // and be used internally by other components such as `limel-table`
+        // to hide the `<label>`, while still keeping the checkbox
+        // both clickable for the users, and accessible for screen readers
+        @include mixins.truncate-text();
+        opacity: 0;
+        width: var(--limel-boolean-input-box-size);
+    }
+}
+
+.box {
+    position: absolute; // since `label` is the clickable part,
+    // and thus needs to
+    // stretch below the checkbox
+    pointer-events: none;
+
+    transition:
+        border-color 0.4s ease 0.2s,
+        background-color 0.2s ease,
+        box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;
+
+    display: inline-block;
+    vertical-align: middle;
+
+    width: var(--limel-boolean-input-box-size);
+    height: var(--limel-boolean-input-box-size);
+
+    margin-right: var(--limel-boolean-input-gap-size);
+    border-radius: var(--limel-boolean-input-box-border-radius);
+    border: 0.125rem solid;
+
+    border-color: var(
+        --checkbox-unchecked-border-color,
+        rgb(var(--contrast-900))
+    );
+    background-color: var(
+        --limel-checkbox-background-color,
+        rgb(var(--contrast-300))
+    );
+
+    .checked &,
+    .boolean-input:has(input[type='checkbox']:checked) &,
+    .boolean-input:has(input[type='radio']:checked) & {
+        background-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
+        border-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
+    }
+
+    .disabled & {
+        opacity: 0.4;
+    }
+
+    .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & {
+        will-change: box-shadow;
+        box-shadow: var(--button-shadow-hovered);
+    }
+
+    .boolean-input:not(.disabled):has(label.boolean-input-label:active) & {
+        will-change: box-shadow;
+        box-shadow: var(--button-shadow-pressed);
+    }
+
+    &:before {
+        // For indicating the hover or focused state
+        transition: mixins.$clickable-normal-state-transitions;
+        content: '';
+        position: absolute;
+        inset: -0.1875rem; // 3px
+        border-radius: inherit;
+
+        .boolean-input:has(input[type='checkbox']:focus-visible) &,
+        .boolean-input:has(input[type='radio']:focus-visible) & {
+            will-change: box-shadow;
+
+            box-shadow: var(--shadow-depth-8-focused);
+        }
+    }
+
+    &:after {
+        // For indicating the indeterminate state in checkbox
+        // For indicating the the checked state in radio
+        transition:
+            opacity 0.2s ease,
+            width 0.4s ease,
+            box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87),
+            transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);
+        content: '';
+        position: absolute;
+        inset: 0;
+        margin: auto;
+
+        border-radius: 1rem;
+        opacity: 0;
+
+        background-color: rgb(var(--color-white));
+
+        .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & {
+            will-change: opacity, box-shadow, transform, width;
+        }
+    }
+}

package/dist/lime-elements/style/internal/shared_input-select-picker.scss

@@ -28,29 +28,12 @@ $input-text-color-disabled: rgba(var(--contrast-1400), 0.5);
 $helper-text-color: $label-color;
 
 $height-of-mdc-text-field: 2.5rem; //This is written directly in `rem`, becurse the variable used to calculate things elsewhere
-$height-of-mdc-helper-text-block: 0.9375rem;
-
-$mdc-chip-background-color: rgb(var(--contrast-100));
-
-$height-of-helper-text-pseudo-before: 0.75rem; // There is strange a pseudo before in MD's helper texts, which sets their distance to the element on top of it. Originally in MD, this value is 1rem. In Lime Elements, we need to make it less due to our layout needs.
-$cropped-label-hack--font-size: var(--limel-theme-default-font-size); //14px
 
 @mixin looks-disabled() {
     cursor: not-allowed;
     opacity: 0.4;
 }
 
-@mixin looks-like-input-label() {
-    line-height: functions.pxToRem(28);
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-
-    font-size: var(--limel-theme-default-font-size);
-    font-weight: 400;
-    letter-spacing: 0.009375em;
-    color: $label-color;
-}
-
 @mixin looks-like-input-value() {
     line-height: functions.pxToRem(28);
     -moz-osx-font-smoothing: grayscale;
@@ -59,157 +42,15 @@ $cropped-label-hack--font-size: var(--limel-theme-default-font-size); //14px
     color: $input-text-color;
     font-size: var(--limel-theme-default-font-size);
     font-weight: 400;
+    font-family: inherit;
     letter-spacing: 0.009375em;
 }
 
-@mixin cropped-label-hack {
-    // Some font size applied to `label--float-above` causes the labels to get cut off
-    // when an empty field gets focused
-    .mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-notched-outline--upgraded,
-    .mdc-text-field--outlined.mdc-text-field--with-leading-icon
-        .mdc-notched-outline--upgraded,
-    .mdc-text-field--outlined.mdc-text-field--textarea.mdc-notched-outline--upgraded,
-    .mdc-text-field--outlined.mdc-text-field--textarea
-        .mdc-notched-outline--upgraded,
-    .mdc-text-field--outlined.mdc-notched-outline--upgraded,
-    .mdc-text-field--outlined .mdc-notched-outline--upgraded {
-        .mdc-floating-label--float-above {
-            //font-size: 1rem; This is what we get from MD now, which causes the miscalculations
-            font-size: $cropped-label-hack--font-size;
-            // of course this is `14px` and the other one is `16px`.
-            // Unfortunately MD scales the floating label down, by applying a
-            // `transform` & `scale(0.75)` which is probably why they had to increase
-            // the font-size, to make it more readable.
-            // This is why I don't like this hack.
-        }
-    }
-}
-
 @mixin input-field-placeholder {
     &::placeholder {
         color: $input-placeholder-color !important;
-    }
-}
-
-@mixin floating-label-overrides {
-    .mdc-text-field__input,
-    .mdc-floating-label {
-        // As long as this component is depended on MDC,
-        // we need to force it to be font-agnostic.
-        // When MDC-dependency is removed, this block can also be removed.
-        // However, on removal of MDC-dependency, we should also make sure to check
-        // other font-related styles that might be set by MDC,
-        // such as `letter-spacing` or `font-size`.
-        font-family: inherit;
-    }
-
-    .mdc-text-field {
-        &:not(.mdc-text-field--disabled) {
-            .mdc-floating-label {
-                color: $label-color;
-            }
-            .mdc-text-field__input {
-                color: $input-text-color;
-            }
-        }
-        &.mdc-text-field--disabled {
-            .mdc-floating-label {
-                color: $label-color-disabled;
-            }
-            .mdc-text-field__input {
-                color: $input-text-color-disabled;
-            }
-        }
-    }
-
-    .mdc-floating-label--float-above {
-        transform: translateY(#{functions.pxToRem(-27)}) scale(0.75) !important;
-
-        .mdc-text-field--with-leading-icon & {
-            transform: translateY(#{functions.pxToRem(-25)})
-                translateX(#{functions.pxToRem(-20)}) scale(0.75) !important;
-        }
-    }
-}
-
-@mixin outlined-style-overrides {
-    .mdc-text-field.mdc-text-field--outlined {
-        transition: background-color 0.2s ease;
-        border-radius: functions.pxToRem(4);
-
-        .mdc-notched-outline__leading,
-        .mdc-notched-outline__notch,
-        .mdc-notched-outline__trailing {
-            transition: border-color 0.2s ease;
-        }
-
-        &:not(.mdc-text-field--disabled) {
-            background-color: $background-color-normal;
-
-            &:hover {
-                background-color: $background-color-hovered;
-            }
-        }
-
-        &.mdc-text-field--focused {
-            background-color: $background-color-focused;
-        }
-
-        &.mdc-text-field--disabled {
-            background-color: $background-color-disabled;
-        }
-
-        &:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(
-                .force-invalid
-            ) {
-            .mdc-notched-outline__leading,
-            .mdc-notched-outline__notch,
-            .mdc-notched-outline__trailing {
-                border-color: $lime-text-field-outline-color;
-            }
-
-            &:not(.mdc-text-field--focused):not(.mdc-text-field--invalid):not(
-                    .force-invalid
-                ) {
-                &:hover .mdc-notched-outline {
-                    .mdc-notched-outline__leading,
-                    .mdc-notched-outline__notch,
-                    .mdc-notched-outline__trailing {
-                        border-color: $lime-text-field-outline-color--hovered;
-                    }
-                }
-            }
-
-            &.mdc-text-field--focused {
-                .mdc-notched-outline__leading,
-                .mdc-notched-outline__notch,
-                .mdc-notched-outline__trailing {
-                    border-color: $lime-text-field-outline-color--focused;
-                }
-            }
-        }
-    }
-
-    .mdc-text-field,
-    .mdc-text-field.mdc-text-field--focused {
-        .mdc-notched-outline__leading,
-        .mdc-notched-outline__notch,
-        .mdc-notched-outline__trailing {
-            border-width: 1px;
-        }
-    }
-
-    .mdc-text-field.mdc-text-field--focused.mdc-text-field--outlined {
-        .mdc-notched-outline--notched {
-            .mdc-notched-outline__notch {
-                padding-top: 0;
-            }
-        }
-    }
-
-    .mdc-text-field__icon {
-        color: $input-text-leading-icon-color;
-        flex-shrink: 0;
+        font-size: var(--limel-theme-default-font-size) !important;
+        font-family: inherit !important;
     }
 }
 
@@ -345,12 +186,6 @@ $cropped-label-hack--font-size: var(--limel-theme-default-font-size); //14px
     }
 }
 
-@mixin disabled-overrides {
-    .mdc-text-field--disabled {
-        background-color: transparent;
-    }
-}
-
 @mixin lime-empty-value-for-readonly {
     .lime-empty-value-for-readonly {
         z-index: z-index.$input-field--formatted-value;

package/package.json

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

package/dist/cjs/checkbox.template-882253c2.js.map

@@ -1 +0,0 @@
-{"file":"checkbox.template-882253c2.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;GAC7C;EAED,OAAO;IACHA,iBACI,KAAK,EAAE;QACH,gBAAgB,EAAE,IAAI;QACtB,cAAc,EAAE,IAAI;QACpB,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,KAAK,EAAC,8BAA8B;UACpC,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,iBAAK,OAAO,EAAC,WAAW,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO;UACzDA,kBAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,kCAAkC,GAAG,CACvD,CACJ;MACNA,mBAAO,OAAO,EAAE,KAAK,CAAC,EAAE,IAAG,KAAK,CAAC,KAAK,CAAS,CAC7C;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    }\n\n    return [\n        <div\n            class={{\n                'mdc-form-field': true, // required by MDC to work\n                'mdc-checkbox': true, // required by MDC to work\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                class=\"mdc-checkbox__native-control\" // required by MDC to work\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 viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n                    <path fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                </svg>\n            </div>\n            <label htmlFor={props.id}>{props.label}</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-0a54ff6e.js.map

@@ -1 +0,0 @@
-{"file":"checkbox.template-0a54ff6e.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;GAC7C;EAED,OAAO;IACH,WACI,KAAK,EAAE;QACH,gBAAgB,EAAE,IAAI;QACtB,cAAc,EAAE,IAAI;QACpB,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,KAAK,EAAC,8BAA8B;UACpC,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,WAAK,OAAO,EAAC,WAAW,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO;UACzD,YAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,kCAAkC,GAAG,CACvD,CACJ;MACN,aAAO,OAAO,EAAE,KAAK,CAAC,EAAE,IAAG,KAAK,CAAC,KAAK,CAAS,CAC7C;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    }\n\n    return [\n        <div\n            class={{\n                'mdc-form-field': true, // required by MDC to work\n                'mdc-checkbox': true, // required by MDC to work\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                class=\"mdc-checkbox__native-control\" // required by MDC to work\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 viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n                    <path fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                </svg>\n            </div>\n            <label htmlFor={props.id}>{props.label}</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-6b746479.js

@@ -1,2 +0,0 @@
-import{h as e}from"./p-288f0842.js";const r=r=>{const i={};if(r.readonly){let i="minus";if(r.checked){i={name:"ok",color:"var(--lime-primary-color, var(--limel-theme-primary-color))"}}return[e("limel-dynamic-label",{value:r.checked,"aria-controls":r.helperTextId,defaultLabel:{text:r.label,icon:i},labels:r.readonlyLabels}),e(l,{text:r.helperText,helperTextId:r.helperTextId,invalid:r.invalid})]}if(r.indeterminate){i["data-indeterminate"]="true"}return[e("div",{class:{"mdc-form-field":true,"mdc-checkbox":true,checkbox:true,checked:r.checked,invalid:r.invalid,disabled:r.disabled,required:r.required,indeterminate:r.indeterminate,readonly:r.readonly}},e("input",Object.assign({type:"checkbox",class:"mdc-checkbox__native-control",id:r.id,checked:r.checked,disabled:r.disabled||r.readonly,required:r.required,onChange:r.onChange,"aria-controls":r.helperTextId,"aria-describedby":r.helperTextId},i)),e("div",{class:"box"},e("svg",{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",{htmlFor:r.id},r.label)),e(l,{text:r.helperText,helperTextId:r.helperTextId,invalid:r.invalid})]};const l=r=>{if(typeof r.text!=="string"){return}return e("limel-helper-line",{helperText:r.text.trim(),helperTextId:r.helperTextId,invalid:r.invalid})};export{r as C};
-//# sourceMappingURL=p-6b746479.js.map

package/dist/lime-elements/p-6b746479.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","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    }\n\n    return [\n        <div\n            class={{\n                'mdc-form-field': true, // required by MDC to work\n                'mdc-checkbox': true, // required by MDC to work\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                class=\"mdc-checkbox__native-control\" // required by MDC to work\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 viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n                    <path fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                </svg>\n            </div>\n            <label htmlFor={props.id}>{props.label}</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,M,CAGvC,MAAO,CACHM,EAAA,OACIY,MAAO,CACH,iBAAkB,KAClB,eAAgB,KAChBC,SAAU,KACVhB,QAASJ,EAAMI,QACfa,QAASjB,EAAMiB,QACfI,SAAUrB,EAAMqB,SAChBC,SAAUtB,EAAMsB,SAChBJ,cAAelB,EAAMkB,cACrBhB,SAAUF,EAAME,WAGpBK,EAAA,QAAAgB,OAAAC,OAAA,CACIC,KAAK,WACLN,MAAM,+BACNO,GAAI1B,EAAM0B,GACVtB,QAASJ,EAAMI,QACfiB,SAAUrB,EAAMqB,UAAYrB,EAAME,SAClCoB,SAAUtB,EAAMsB,SAChBK,SAAU3B,EAAM2B,SAAQ,gBACT3B,EAAMS,aAAY,mBACfT,EAAMS,cACpBR,IAERM,EAAA,OAAKY,MAAM,OACPZ,EAAA,OAAKqB,QAAQ,YAAW,cAAa,OAAOC,UAAU,SAClDtB,EAAA,QAAMuB,KAAK,OAAOC,EAAE,uCAG5BxB,EAAA,SAAOyB,QAAShC,EAAM0B,IAAK1B,EAAMY,QAErCL,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,KAAKsB,OACvBxB,aAAcT,EAAMS,aACpBQ,QAASjB,EAAMiB,SACjB,S"}