@limetech/lime-elements 37.12.2 → 37.13.1

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [37.13.1](https://github.com/Lundalogik/lime-elements/compare/v37.13.0...v37.13.1) (2024-04-04)
+
+
+### Bug Fixes
+
+
+* **color-picker:** set focus on swatches when the palette popover is opened ([fe7d91a](https://github.com/Lundalogik/lime-elements/commit/fe7d91aa00befd5f18cad209b5b1ad527d7ddaa2))
+
+## [37.13.0](https://github.com/Lundalogik/lime-elements/compare/v37.12.2...v37.13.0) (2024-04-02)
+
+
+### Features
+
+
+* **checkbox:** allow customizing the visualization of `readonly` state ([0200110](https://github.com/Lundalogik/lime-elements/commit/02001102e739fc01dba0a9c52cfa847a641853ce))
+* **dynamic-label:** add new component ([226c536](https://github.com/Lundalogik/lime-elements/commit/226c53683838d08bbb09c2a42d85675c3c1eb3d7))
+* **switch:** allow customizing the visualization of `readonly` state ([de01a42](https://github.com/Lundalogik/lime-elements/commit/de01a429a85d1713d231b40860a235dc648a3c00))
+
+### Bug Fixes
+
+
+* **form:** allow additional properties for boolean fields ([6113e6e](https://github.com/Lundalogik/lime-elements/commit/6113e6ef160c4342166eae6a37273fd872a8115b))
+
 ## [37.12.2](https://github.com/Lundalogik/lime-elements/compare/v37.12.1...v37.12.2) (2024-03-20)
 
 

package/dist/cjs/{checkbox.template-e7aa89b5.js → checkbox.template-f86d05d4.js}

@@ -1,9 +1,22 @@
 'use strict';
 
-const index = require('./index-38eb64b5.js');
+const index = require('./index-d1052409.js');
 
 const CheckboxTemplate = (props) => {
   const inputProps = {};
+  if (props.readonly) {
+    let icon = 'minus';
+    if (props.checked) {
+      icon = {
+        name: 'ok',
+        color: 'var(--mdc-theme-primary)',
+      };
+    }
+    return [
+      index.h("limel-dynamic-label", { value: props.checked, "aria-controls": props.helperTextId, defaultLabel: { text: props.label, icon: icon }, labels: props.readonlyLabels }),
+      index.h(HelperText, { text: props.helperText, helperTextId: props.helperTextId, invalid: props.invalid }),
+    ];
+  }
   if (props.indeterminate) {
     inputProps['data-indeterminate'] = 'true';
   }
@@ -29,7 +42,7 @@ const CheckboxTemplate = (props) => {
           'mdc-checkbox--indeterminate': props.indeterminate,
           'lime-checkbox--readonly': props.readonly,
         }, htmlFor: props.id }, props.label)),
-    index.h(HelperText, { text: props.helperText, helperTextId: props.helperTextId }),
+    index.h(HelperText, { text: props.helperText, helperTextId: props.helperTextId, invalid: props.invalid }),
   ];
 };
 const HelperText = (props) => {
@@ -41,4 +54,4 @@ const HelperText = (props) => {
 
 exports.CheckboxTemplate = CheckboxTemplate;
 
-//# sourceMappingURL=checkbox.template-e7aa89b5.js.map
+//# sourceMappingURL=checkbox.template-f86d05d4.js.map

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

@@ -0,0 +1 @@
+{"file":"checkbox.template-f86d05d4.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,0BAA0B;OACpC,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,iBAAK,KAAK,EAAC,iBAAiB;MACxBA,iBACI,KAAK,EAAE;UACH,cAAc,EAAE,IAAI;UACpB,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C;QAEDA,iCACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,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;QACFA,iBAAK,KAAK,EAAC,0BAA0B;UACjCA,iBAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,WAAW;YACpDA,kBACI,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,kCAAkC,GACtC,CACA;UACNA,iBAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;MACNA,mBACI,KAAK,EAAE;UACH,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,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(--mdc-theme-primary)',\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 class=\"mdc-form-field \">\n            <div\n                class={{\n                    'mdc-checkbox': true,\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n            >\n                <input\n                    type=\"checkbox\"\n                    class=\"mdc-checkbox__native-control\"\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=\"mdc-checkbox__background\">\n                    <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                        <path\n                            class=\"mdc-checkbox__checkmark-path\"\n                            fill=\"none\"\n                            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n                        />\n                    </svg>\n                    <div class=\"mdc-checkbox__mixedmark\" />\n                </div>\n            </div>\n            <label\n                class={{\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n                htmlFor={props.id}\n            >\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/cjs/{index-38eb64b5.js → index-d1052409.js}

@@ -1628,7 +1628,10 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                         // adding the shadow root build conditionals to minimize runtime
                         {
                             {
-                                self.attachShadow({ mode: 'open' });
+                                self.attachShadow({
+                                    mode: 'open',
+                                    delegatesFocus: !!(cmpMeta.$flags$ & 16 /* CMP_FLAGS.shadowDelegatesFocus */),
+                                });
                             }
                         }
                     }
@@ -1844,4 +1847,4 @@ exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
 
-//# sourceMappingURL=index-38eb64b5.js.map
+//# sourceMappingURL=index-d1052409.js.map