npm - @limetech/lime-elements - Versions diffs - 37.0.0-next.1 → 37.1.0-dev.1 - Mend

@limetech/lime-elements 37.0.0-next.1 → 37.1.0-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (334) hide show

package/dist/collection/components/color-picker/color-picker-palette.css CHANGED Viewed

@@ -582,6 +582,14 @@
   grid-template-columns: repeat(20, 1fr) auto;
 }
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /**
  * Note! This file is exported to `dist/scss/` in the published
  * node module, for consumer projects to import.
@@ -638,6 +646,35 @@
   grid-template-columns: auto 1fr;
 }
+.picker-trigger {
+  all: unset;
+  border-radius: 0.5rem;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-normal);
+}
+.picker-trigger:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-hovered);
+}
+.picker-trigger:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.picker-trigger:focus {
+  outline: none;
+}
+.picker-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.picker-trigger:after {
+  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
+}
 .chosen-color-preview,
 .picker-trigger {
   box-sizing: border-box;
@@ -666,27 +703,6 @@
   z-index: 1;
 }
-.picker-trigger {
-  border-radius: 0.5rem;
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
-  cursor: pointer;
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--lime-elevated-surface-background-color);
-  box-shadow: var(--button-shadow-normal);
-}
-.picker-trigger:hover {
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--lime-elevated-surface-background-color);
-  box-shadow: var(--button-shadow-hovered);
-}
-.picker-trigger:active {
-  box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
-}
-.picker-trigger:after {
-  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
-}
 :host([readonly]) .picker-trigger:hover, :host([readonly]) .picker-trigger:active {
   cursor: default;
   box-shadow: var(--button-shadow-normal);
@@ -725,9 +741,18 @@
 }
 .swatch:not(.hue) {
+  border: none;
+  aspect-ratio: 1;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
   cursor: pointer;
 }
+.swatch:not(.hue):focus {
+  outline: none;
+}
+.swatch:not(.hue):focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 .swatch:not(.hue):hover {
   box-shadow: var(--button-shadow-hovered);
 }

package/dist/collection/components/color-picker/color-picker-palette.js CHANGED Viewed

@@ -17,7 +17,7 @@ export class Palette {
         [colorName]: true,
         'swatch--selected': this.value === getCssColor(color, brightness),
       };
-      return (h("div", { class: classList, onClick: this.handleClick(color, brightness), tabindex: "0" }));
+      return (h("button", { class: classList, onClick: this.handleClick(color, brightness) }));
     };
     this.handleChange = (event) => {
       event.stopPropagation();

package/dist/collection/components/color-picker/color-picker-palette.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-picker-palette.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker-palette.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE7E;;GAEG;AAMH,MAAM,OAAO,OAAO;;IAiDR,mBAAc,GAAG,GAAG,EAAE;MAC1B,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACxB,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;MACtD,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,UAAkB,EAAE,EAAE;MAC7D,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAClD,MAAM,SAAS,GAAG;QACd,MAAM,EAAE,IAAI;QACZ,CAAC,SAAS,CAAC,EAAE,IAAI;QACjB,kBAAkB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;OACpE,CAAC;MAEF,OAAO,CACH,~~WACI~~,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,~~EAC5C~~,~~QAAQ~~,~~EAAC,GAAG,GACT,CACV,~~CAAC;IACN,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;IAEM,gBAAW,GACf,CAAC,KAAa,EAAE,UAAkB,EAAE,EAAE,CAAC,CAAC,KAAiB,EAAE,EAAE;MACzD,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;;;;;;~~EAnDC~~,MAAM;IACT,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,OAAO;MACH,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,cAAc,EAAE,CAAO;MAC/D,WAAK,KAAK,EAAC,mBAAmB;QAC1B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB;QACF,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAoCJ~~","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: true,\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /\n Color value that is manually typed by the user\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n 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 Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n <div class=\"chosen-color-name\">\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 />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return colors.map((color) => {\n return brightnesses.map(this.renderSwatch(color));\n });\n };\n\n private renderSwatch = (color: string) => (brightness: string) => {\n const colorName = getColorName(color, brightness);\n const classList = {\n swatch: true,\n [colorName]: true,\n 'swatch--selected': this.value === getCssColor(color, brightness),\n };\n\n return (\n <~~div~~\n class={classList}\n onClick={this.handleClick(color, brightness)}\n ~~tabindex=\"0\"\n~~ ~~></div>\~~n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleClick =\n (color: string, brightness: string) => (event: MouseEvent) => {\n const value = getCssColor(color, brightness);\n event.stopPropagation();\n this.change.emit(value);\n };\n}\n"]}
1	+ {"version":3,"file":"color-picker-palette.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker-palette.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE7E;;GAEG;AAMH,MAAM,OAAO,OAAO;;IAiDR,mBAAc,GAAG,GAAG,EAAE;MAC1B,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACxB,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;MACtD,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,UAAkB,EAAE,EAAE;MAC7D,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAClD,MAAM,SAAS,GAAG;QACd,MAAM,EAAE,IAAI;QACZ,CAAC,SAAS,CAAC,EAAE,IAAI;QACjB,kBAAkB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;OACpE,CAAC;MAEF,OAAO,CACH,cACI,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,GAC9C,CACL,CAAC;IACN,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;IAEM,gBAAW,GACf,CAAC,KAAa,EAAE,UAAkB,EAAE,EAAE,CAAC,CAAC,KAAiB,EAAE,EAAE;MACzD,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;;;;;;EAlDC,MAAM;IACT,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,OAAO;MACH,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,cAAc,EAAE,CAAO;MAC/D,WAAK,KAAK,EAAC,mBAAmB;QAC1B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB;QACF,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCJ","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: true,\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /\n Color value that is manually typed by the user\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n 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 Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n <div class=\"chosen-color-name\">\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 />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return colors.map((color) => {\n return brightnesses.map(this.renderSwatch(color));\n });\n };\n\n private renderSwatch = (color: string) => (brightness: string) => {\n const colorName = getColorName(color, brightness);\n const classList = {\n swatch: true,\n [colorName]: true,\n 'swatch--selected': this.value === getCssColor(color, brightness),\n };\n\n return (\n <button\n class={classList}\n onClick={this.handleClick(color, brightness)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleClick =\n (color: string, brightness: string) => (event: MouseEvent) => {\n const value = getCssColor(color, brightness);\n event.stopPropagation();\n this.change.emit(value);\n };\n}\n"]}

package/dist/collection/components/color-picker/color-picker.css CHANGED Viewed

@@ -54,6 +54,35 @@
   grid-template-columns: auto 1fr;
 }
+.picker-trigger {
+  all: unset;
+  border-radius: 0.5rem;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-normal);
+}
+.picker-trigger:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-hovered);
+}
+.picker-trigger:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.picker-trigger:focus {
+  outline: none;
+}
+.picker-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.picker-trigger:after {
+  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
+}
 .chosen-color-preview,
 .picker-trigger {
   box-sizing: border-box;
@@ -82,27 +111,6 @@
   z-index: 1;
 }
-.picker-trigger {
-  border-radius: 0.5rem;
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
-  cursor: pointer;
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--lime-elevated-surface-background-color);
-  box-shadow: var(--button-shadow-normal);
-}
-.picker-trigger:hover {
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--lime-elevated-surface-background-color);
-  box-shadow: var(--button-shadow-hovered);
-}
-.picker-trigger:active {
-  box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
-}
-.picker-trigger:after {
-  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
-}
 :host([readonly]) .picker-trigger:hover, :host([readonly]) .picker-trigger:active {
   cursor: default;
   box-shadow: var(--button-shadow-normal);

package/dist/collection/components/color-picker/color-picker.js CHANGED Viewed

@@ -28,7 +28,7 @@ export class ColorPicker {
     };
     this.renderPickerTrigger = () => {
       const background = this.value ? { '--background': this.value } : {};
-      return (h("div", { class: "picker-trigger", slot: "trigger", style: background, role: "button", tabindex: "0", onClick: this.openPopover, id: "tooltip-button" }));
+      return (h("button", { class: "picker-trigger", slot: "trigger", style: background, role: "button", onClick: this.openPopover, id: "tooltip-button" }));
     };
     this.openPopover = (event) => {
       event.stopPropagation();

package/dist/collection/components/color-picker/color-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAG/E;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,WAAW;;IAgEZ,kBAAa,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;QACrC,OAAO,CACH,qBACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAC,gBAAgB,GAC5B,CACL,CAAC;OACL;IACL,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;OACrC;MAED,OAAO,CACH,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,aAAa,EAAC,cAAc,EAC5B,OAAO,EAAE,IAAI,CAAC,cAAc;QAE3B,IAAI,CAAC,mBAAmB,EAAE;QAC3B,kCACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACU,CACnB,CAAC;IACN,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;MAEpE,OAAO,CACH,~~WACI~~,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,QAAQ,EACb,~~QAAQ,EAAC,GAAG,EACZ,~~OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,EAAE,EAAC,gBAAgB,GACrB,CACL,CAAC;IACN,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB,EAAE,EAAE;MAC5C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;;;;;;~~kBAnFe~~,KAAK;;EAEf,MAAM;IACT,OAAO;MACH,IAAI,CAAC,aAAa,EAAE;MACpB,WAAK,KAAK,EAAC,cAAc;QACpB,IAAI,CAAC,mBAAmB,EAAE;QAE3B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,oBAAoB,GAC5B,CACA;KACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAiEJ~~","sourcesContent":["/* eslint-disable multiline-ternary /\nimport { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.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 * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\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` if a value is readonly. This makes the component un-interactive.\n /\n @Prop({ reflect: true })\n public readonly: boolean;\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 render() {\n return [\n this.renderTooltip(),\n <div class=\"color-picker\">\n {this.renderPickerPalette()}\n\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 class=\"chosen-color-input\"\n />\n </div>,\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 value={this.value}\n label={this.label}\n helperText={this.helperText}\n onChange={this.handleChange}\n required={this.required}\n />\n </limel-popover>\n );\n };\n\n private renderPickerTrigger = () => {\n const background = this.value ? { '--background': this.value } : {};\n\n return (\n <~~div~~\n class=\"picker-trigger\"\n slot=\"trigger\"\n style={background}\n role=\"button\"\n ~~tabindex=\"0\"\n~~ onClick={this.openPopover}\n id=\"tooltip-button\"\n />\n );\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"]}
1	+ {"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAG/E;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,WAAW;;IAgEZ,kBAAa,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;QACrC,OAAO,CACH,qBACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAC,gBAAgB,GAC5B,CACL,CAAC;OACL;IACL,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;OACrC;MAED,OAAO,CACH,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,aAAa,EAAC,cAAc,EAC5B,OAAO,EAAE,IAAI,CAAC,cAAc;QAE3B,IAAI,CAAC,mBAAmB,EAAE;QAC3B,kCACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACU,CACnB,CAAC;IACN,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;MAEpE,OAAO,CACH,cACI,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,EAAE,EAAC,gBAAgB,GACrB,CACL,CAAC;IACN,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB,EAAE,EAAE;MAC5C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;;;;;;kBAlFe,KAAK;;EAEf,MAAM;IACT,OAAO;MACH,IAAI,CAAC,aAAa,EAAE;MACpB,WAAK,KAAK,EAAC,cAAc;QACpB,IAAI,CAAC,mBAAmB,EAAE;QAE3B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,oBAAoB,GAC5B,CACA;KACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEJ","sourcesContent":["/* eslint-disable multiline-ternary /\nimport { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.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 * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\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` if a value is readonly. This makes the component un-interactive.\n /\n @Prop({ reflect: true })\n public readonly: boolean;\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 render() {\n return [\n this.renderTooltip(),\n <div class=\"color-picker\">\n {this.renderPickerPalette()}\n\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 class=\"chosen-color-input\"\n />\n </div>,\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 value={this.value}\n label={this.label}\n helperText={this.helperText}\n onChange={this.handleChange}\n required={this.required}\n />\n </limel-popover>\n );\n };\n\n private renderPickerTrigger = () => {\n const background = this.value ? { '--background': this.value } : {};\n\n return (\n <button\n class=\"picker-trigger\"\n slot=\"trigger\"\n style={background}\n role=\"button\"\n onClick={this.openPopover}\n id=\"tooltip-button\"\n />\n );\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"]}

package/dist/collection/components/form/fields/schema-field.js CHANGED Viewed

@@ -32,7 +32,19 @@ const shouldChangeToUndefined = (value, schema) => {
 };
 const hasCustomComponent = (schema) => {
   var _a, _b;
-  return Boolean((_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.name);
+  const name = (_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.name;
+  if (!name) {
+    return false;
+  }
+  try {
+    verifyCustomComponentIsDefined(name);
+  }
+  catch (_c) {
+    // eslint-disable-next-line no-console
+    console.warn(`Custom component ${name} not defined`);
+    return false;
+  }
+  return true;
 };
 const verifyCustomComponentIsDefined = (elementName) => {
   const supportsCustomElements = 'customElements' in window;

package/dist/collection/components/form/fields/schema-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"schema-field.js","sourceRoot":"","sources":["../../../../src/components/form/fields/schema-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { LimeElementsAdapter } from '../adapters';\nimport JSONSchemaField from '@rjsf/core/lib/components/fields/SchemaField';\nimport React from 'react';\nimport { FieldProps } from './types';\nimport { isEmpty, capitalize } from 'lodash-es';\nimport { resetDependentFields } from './field-helpers';\nimport { FieldTemplate } from '../templates';\n\n/*\n If given a value and schema, check if the value should be translated\n * from null to undefined to avoid issues with validation\n \n This function needs to be used for several reasons:\n * 1. CustomEvent does not allow `detail` to equal `undefined`, but we can call onChange with `undefined` in React\n * 2. `null` is treated as a valid value in a jsonschema and with marshmallow and it has its own type (null)\n * 3. Without changing `null` to `undefined` there would be no way to remove a field from\n * from the submitted form data once it had any data. (when POSTing, undefined is not posted since its not valid json)\n * 4. The only applies to custom web components since widgets handle transforming null/'' to undefined depending on the widget\n * and its purpose.\n \n Example:\n * If I have an object { name?: string, email?: string } that I am using a custom web component for `name`,\n * then initially, the formData will be {} which is fine because neither name or email are required. Then if i input a\n * value for name the formData will be { name: 'some_value' } which is also fine. But then if I want to remove name\n * from the form data I would delete all the text from the name input field. Web components would emit this empty value\n * as '' or null. If the web component tries to emit `undefined`, null would be emitted instead because CustomEvent has\n * a default `detail` value of null\n * @param {any} value the value associated with the schema\n * @param {any} schema the schema for the value\n * @returns {boolean} whether or not null should be changed to undefined\n /\nconst shouldChangeToUndefined = (value, schema): boolean => {\n return value === null && !schema.type.includes('null');\n};\n\nconst hasCustomComponent = (schema): boolean => {\n return Boolean(schema.lime?.component?.name);\n};\n\nconst verifyCustomComponentIsDefined = (elementName): void => {\n const supportsCustomElements = 'customElements' in window;\n\n if (!supportsCustomElements) {\n throw new Error(\n 'Custom form elements are not supported by this browser!'\n );\n }\n\n if (!customElements.get(elementName)) {\n throw new Error(`Custom form element '${elementName}' is not defined!`);\n }\n};\n\nconst getCustomComponent = (\n schema\n): { name: string; props: { [key: string]: any } } => {\n const name = schema.lime?.component?.name;\n const props = schema.lime?.component?.props \|\| {};\n\n return { name: name, props: props };\n};\n\n/\n Create properties from the factory that is set on `limel-form`\n * @param {} formContext the form context\n @param {} schema the schema for the current field\n @returns {object} the properties created by the factory\n /\nexport function getFactoryProps(\n formContext: any,\n schema: any\n): Record<string, any> {\n const factory: (schema: any) => Record<string, any> =\n formContext.propsFactory;\n if (typeof factory !== 'function') {\n return {};\n }\n\n const props = factory(schema);\n if (!props) {\n return {};\n }\n\n return props;\n}\n\nexport class SchemaField extends React.Component<FieldProps> {\n state = {\n modified: false,\n };\n\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.handleCustomComponentChange =\n this.handleCustomComponentChange.bind(this);\n this.initState();\n }\n\n private initState() {\n if (this.hasValue()) {\n this.state.modified = true;\n }\n }\n\n private hasValue() {\n const value = this.getValue();\n if (!value) {\n return false;\n }\n\n if (Array.isArray(value)) {\n return !!value.length;\n }\n\n if (typeof value === 'object') {\n return !isEmpty(value);\n }\n\n return true;\n }\n\n private getLabel() {\n const { schema } = this.props;\n\n return schema.title;\n }\n\n private isInvalid() {\n const { modified } = this.state;\n const { errorSchema } = this.props;\n\n if (!modified) {\n return false;\n }\n\n return !isEmpty(errorSchema);\n }\n\n private isRequired() {\n const { required, schema } = this.props;\n\n return required \|\| schema.minItems > 0;\n }\n\n private getHelperText() {\n const { errorSchema, schema } = this.props;\n\n if (!this.isInvalid()) {\n const helperText = schema.lime?.component?.props?.helperText;\n\n return helperText \|\| schema.description;\n }\n\n if (!isEmpty(errorSchema) && '__errors' in errorSchema) {\n return capitalize(errorSchema.__errors[0]); // eslint-disable-line no-underscore-dangle\n }\n\n return schema.description;\n }\n\n private getValue() {\n const { formData } = this.props;\n\n return formData;\n }\n\n private handleCustomComponentChange(event) {\n const { schema } = this.props;\n event.stopPropagation();\n\n let value = event.detail;\n\n if (shouldChangeToUndefined(value, schema)) {\n value = undefined;\n }\n\n this.handleChange(value);\n }\n\n private handleChange(data) {\n const { formData, schema } = this.props;\n const { rootSchema } = this.props.registry;\n\n this.setState({ modified: true });\n\n const newData = resetDependentFields(\n formData,\n data,\n schema,\n rootSchema\n );\n\n this.props.onChange(newData);\n }\n\n private buildCustomComponentProps() {\n const {\n disabled,\n readonly,\n name,\n registry,\n schema,\n errorSchema,\n idSchema,\n } = this.props;\n const factoryProps = getFactoryProps(registry.formContext, schema);\n\n return {\n ...factoryProps,\n value: this.getValue(),\n required: this.isRequired(),\n readonly: readonly \|\| schema.readOnly,\n disabled: disabled,\n invalid: this.isInvalid(),\n label: this.getLabel(),\n helperText: this.getHelperText(),\n formInfo: {\n schema: schema,\n rootSchema: registry.formContext.schema,\n errorSchema: errorSchema,\n rootValue: registry.formContext.rootValue,\n name: name,\n schemaPath: this.getSchemaPath(idSchema?.$id),\n },\n };\n }\n\n private renderCustomComponent(props: FieldProps) {\n const { name, props: userDefinedComponentProps } = getCustomComponent(\n props.schema\n );\n\n verifyCustomComponentIsDefined(name);\n\n const component = React.createElement(LimeElementsAdapter, {\n name: name,\n elementProps: {\n ...userDefinedComponentProps,\n ...this.buildCustomComponentProps(),\n },\n events: {\n change: this.handleCustomComponentChange,\n },\n });\n\n return React.createElement(\n FieldTemplate,\n {\n ...this.props,\n classNames: 'form-group field field-custom',\n },\n component\n );\n }\n\n render() {\n if (hasCustomComponent(this.props.schema)) {\n return this.renderCustomComponent(this.props);\n }\n\n const fieldProps = {\n ...this.props,\n onChange: this.handleChange,\n };\n\n return React.createElement(JSONSchemaField, fieldProps);\n }\n\n /\n Gets the path to the current property within the schema\n * @param {string} schemaId the id of the schema\n * @returns {string[]} an array with the schema path for the current property\n * @example\n * const schemaId = 'root_sections_0_controls_0_name';\n * const schemaPath = getSchemaPath(schemaId);\n * // => ['sections', '0', 'controls', '0', 'name']\n */\n private getSchemaPath(schemaId: string): string[] {\n if (schemaId === undefined) {\n return undefined;\n }\n\n return schemaId.replace('root_', '').split('_');\n }\n}\n"]}
1	+ {"version":3,"file":"schema-field.js","sourceRoot":"","sources":["../../../../src/components/form/fields/schema-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { LimeElementsAdapter } from '../adapters';\nimport JSONSchemaField from '@rjsf/core/lib/components/fields/SchemaField';\nimport React from 'react';\nimport { FieldProps } from './types';\nimport { isEmpty, capitalize } from 'lodash-es';\nimport { resetDependentFields } from './field-helpers';\nimport { FieldTemplate } from '../templates';\n\n/*\n If given a value and schema, check if the value should be translated\n * from null to undefined to avoid issues with validation\n \n This function needs to be used for several reasons:\n * 1. CustomEvent does not allow `detail` to equal `undefined`, but we can call onChange with `undefined` in React\n * 2. `null` is treated as a valid value in a jsonschema and with marshmallow and it has its own type (null)\n * 3. Without changing `null` to `undefined` there would be no way to remove a field from\n * from the submitted form data once it had any data. (when POSTing, undefined is not posted since its not valid json)\n * 4. The only applies to custom web components since widgets handle transforming null/'' to undefined depending on the widget\n * and its purpose.\n \n Example:\n * If I have an object { name?: string, email?: string } that I am using a custom web component for `name`,\n * then initially, the formData will be {} which is fine because neither name or email are required. Then if i input a\n * value for name the formData will be { name: 'some_value' } which is also fine. But then if I want to remove name\n * from the form data I would delete all the text from the name input field. Web components would emit this empty value\n * as '' or null. If the web component tries to emit `undefined`, null would be emitted instead because CustomEvent has\n * a default `detail` value of null\n * @param {any} value the value associated with the schema\n * @param {any} schema the schema for the value\n * @returns {boolean} whether or not null should be changed to undefined\n /\nconst shouldChangeToUndefined = (value, schema): boolean => {\n return value === null && !schema.type.includes('null');\n};\n\nconst hasCustomComponent = (schema): boolean => {\n const name = schema.lime?.component?.name;\n if (!name) {\n return false;\n }\n\n try {\n verifyCustomComponentIsDefined(name);\n } catch {\n // eslint-disable-next-line no-console\n console.warn(`Custom component ${name} not defined`);\n\n return false;\n }\n\n return true;\n};\n\nconst verifyCustomComponentIsDefined = (elementName): void => {\n const supportsCustomElements = 'customElements' in window;\n\n if (!supportsCustomElements) {\n throw new Error(\n 'Custom form elements are not supported by this browser!'\n );\n }\n\n if (!customElements.get(elementName)) {\n throw new Error(`Custom form element '${elementName}' is not defined!`);\n }\n};\n\nconst getCustomComponent = (\n schema\n): { name: string; props: { [key: string]: any } } => {\n const name = schema.lime?.component?.name;\n const props = schema.lime?.component?.props \|\| {};\n\n return { name: name, props: props };\n};\n\n/\n Create properties from the factory that is set on `limel-form`\n * @param {} formContext the form context\n @param {} schema the schema for the current field\n @returns {object} the properties created by the factory\n /\nexport function getFactoryProps(\n formContext: any,\n schema: any\n): Record<string, any> {\n const factory: (schema: any) => Record<string, any> =\n formContext.propsFactory;\n if (typeof factory !== 'function') {\n return {};\n }\n\n const props = factory(schema);\n if (!props) {\n return {};\n }\n\n return props;\n}\n\nexport class SchemaField extends React.Component<FieldProps> {\n state = {\n modified: false,\n };\n\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.handleCustomComponentChange =\n this.handleCustomComponentChange.bind(this);\n this.initState();\n }\n\n private initState() {\n if (this.hasValue()) {\n this.state.modified = true;\n }\n }\n\n private hasValue() {\n const value = this.getValue();\n if (!value) {\n return false;\n }\n\n if (Array.isArray(value)) {\n return !!value.length;\n }\n\n if (typeof value === 'object') {\n return !isEmpty(value);\n }\n\n return true;\n }\n\n private getLabel() {\n const { schema } = this.props;\n\n return schema.title;\n }\n\n private isInvalid() {\n const { modified } = this.state;\n const { errorSchema } = this.props;\n\n if (!modified) {\n return false;\n }\n\n return !isEmpty(errorSchema);\n }\n\n private isRequired() {\n const { required, schema } = this.props;\n\n return required \|\| schema.minItems > 0;\n }\n\n private getHelperText() {\n const { errorSchema, schema } = this.props;\n\n if (!this.isInvalid()) {\n const helperText = schema.lime?.component?.props?.helperText;\n\n return helperText \|\| schema.description;\n }\n\n if (!isEmpty(errorSchema) && '__errors' in errorSchema) {\n return capitalize(errorSchema.__errors[0]); // eslint-disable-line no-underscore-dangle\n }\n\n return schema.description;\n }\n\n private getValue() {\n const { formData } = this.props;\n\n return formData;\n }\n\n private handleCustomComponentChange(event) {\n const { schema } = this.props;\n event.stopPropagation();\n\n let value = event.detail;\n\n if (shouldChangeToUndefined(value, schema)) {\n value = undefined;\n }\n\n this.handleChange(value);\n }\n\n private handleChange(data) {\n const { formData, schema } = this.props;\n const { rootSchema } = this.props.registry;\n\n this.setState({ modified: true });\n\n const newData = resetDependentFields(\n formData,\n data,\n schema,\n rootSchema\n );\n\n this.props.onChange(newData);\n }\n\n private buildCustomComponentProps() {\n const {\n disabled,\n readonly,\n name,\n registry,\n schema,\n errorSchema,\n idSchema,\n } = this.props;\n const factoryProps = getFactoryProps(registry.formContext, schema);\n\n return {\n ...factoryProps,\n value: this.getValue(),\n required: this.isRequired(),\n readonly: readonly \|\| schema.readOnly,\n disabled: disabled,\n invalid: this.isInvalid(),\n label: this.getLabel(),\n helperText: this.getHelperText(),\n formInfo: {\n schema: schema,\n rootSchema: registry.formContext.schema,\n errorSchema: errorSchema,\n rootValue: registry.formContext.rootValue,\n name: name,\n schemaPath: this.getSchemaPath(idSchema?.$id),\n },\n };\n }\n\n private renderCustomComponent(props: FieldProps) {\n const { name, props: userDefinedComponentProps } = getCustomComponent(\n props.schema\n );\n\n verifyCustomComponentIsDefined(name);\n\n const component = React.createElement(LimeElementsAdapter, {\n name: name,\n elementProps: {\n ...userDefinedComponentProps,\n ...this.buildCustomComponentProps(),\n },\n events: {\n change: this.handleCustomComponentChange,\n },\n });\n\n return React.createElement(\n FieldTemplate,\n {\n ...this.props,\n classNames: 'form-group field field-custom',\n },\n component\n );\n }\n\n render() {\n if (hasCustomComponent(this.props.schema)) {\n return this.renderCustomComponent(this.props);\n }\n\n const fieldProps = {\n ...this.props,\n onChange: this.handleChange,\n };\n\n return React.createElement(JSONSchemaField, fieldProps);\n }\n\n /\n Gets the path to the current property within the schema\n * @param {string} schemaId the id of the schema\n * @returns {string[]} an array with the schema path for the current property\n * @example\n * const schemaId = 'root_sections_0_controls_0_name';\n * const schemaPath = getSchemaPath(schemaId);\n * // => ['sections', '0', 'controls', '0', 'name']\n */\n private getSchemaPath(schemaId: string): string[] {\n if (schemaId === undefined) {\n return undefined;\n }\n\n return schemaId.replace('root_', '').split('_');\n }\n}\n"]}

package/dist/collection/components/icon/icon.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { h } from '@stencil/core';
 import config from '../../global/config';
-import iconCache from '../../global/icon-cache';
+import iconCache from '../../global/icon-cache/factory';
 /**
  * The recommended icon library for use with Lime Elements is the Windows 10 set
  * from Icons8 (https://icons8.com/icons/windows). This set is included in the

package/dist/collection/components/icon/icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,SAAS,MAAM,~~yBAAyB~~,CAAC;~~AAGhD~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AAMH,MAAM,OAAO,IAAI;;;;;;EAuBN,gBAAgB;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAEM,MAAM;IACT,OAAO,WAAK,KAAK,EAAC,WAAW,GAAG,CAAC;EACrC,CAAC;EAGS,KAAK,CAAC,QAAQ,CAAC,IAAY;IACjC,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,EAAE,EAAE;MACnC,OAAO;KACV;IAED,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED;;;;KAIG;EACK,OAAO,CAAC,IAAY;IACxB,OAAO,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;EAChD,CAAC;EAED;;;;;KAKG;EACK,SAAS,CAAC,OAAe;IAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACtE,IAAI,SAAS,EAAE;MACX,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;KACjC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache';\nimport { IconSize } from './icon.types';\n\n/*\n The recommended icon library for use with Lime Elements is the Windows 10 set\n * from Icons8 (https://icons8.com/icons/windows). This set is included in the\n * relevant Lime products. If you are using Lime Elements in a non-Lime product,\n * you will have to supply your own icons.\n \n The size and color of the icon is set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n \n ### Setup\n * To use @lundalogik/lime-icons8, the `/assets` folder from\n * __@lundalogik/lime-icons8__ must be made available on the webserver.\n * To use a different icon set, the icons must be placed in a folder structure\n * that looks like this: `assets/icons/<name-of-icon>.svg`\n \n If `assets` is placed in the root, no other setup is needed. The icons will\n * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.\n \n If `assets` is placed in a sub-folder somewhere, the easiest way to make the\n * icons available is to use the HTML `base` element:\n \n ```\n * <base href=\"/my/parent/path/\">\n * ```\n \n If this is not enough, or if the `base` element is already in use for\n * something else, a global icon path can be configured with the `limel-config`\n * element:\n * ```\n * <limel-config config={{iconPath: '/my/parent/path/'}} />\n * ```\n \n ### Lime icons\n * There are icons included in the @lundalogik/lime-icons8 package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n * :::note\n * Some of the `-lime-` icons have multiple colors and use our own CSS variables\n * instead of HEX or RGB values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n \n ### Icon Finder\n \n Search for an icon and click on it to copy its name to clipboard.\n \n <limel-example-icon-finder />\n * @exampleComponent limel-example-icon\n * @exampleComponent limel-example-icon-background\n /\n@Component({\n tag: 'limel-icon',\n shadow: true,\n styleUrl: 'icon.scss',\n})\nexport class Icon {\n /\n Size of the icon\n /\n @Prop({ reflect: true })\n public size: IconSize;\n\n /\n Name of the icon\n /\n @Prop({ reflect: true })\n public name: string;\n\n /\n Set to `true` to give the icon a round background with some padding.\n * Only works when the `size` attribute is also set.\n /\n @Prop({ reflect: true })\n public badge: boolean;\n\n @Element()\n private host: HTMLLimelIconElement;\n\n public componentDidLoad() {\n this.loadIcon(this.name);\n }\n\n public render() {\n return <div class=\"container\" />;\n }\n\n @Watch('name')\n protected async loadIcon(name: string) {\n if (name === undefined \|\| name === '') {\n return;\n }\n\n const svgData = await this.loadSvg(name);\n this.renderSvg(svgData);\n }\n\n /\n Load the SVG data for the icon from the icon cache\n * @param {string} name name of the icon\n * @returns {string} the icon SVG data\n /\n private loadSvg(name: string) {\n return iconCache.get(name, config.iconPath);\n }\n\n /\n * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n * will remain the way they look in the file.\n * Therefore we inject the svg as inline markup instead.\n */\n private renderSvg(svgData: string) {\n const container = this.host.shadowRoot.querySelector('div.container');\n if (container) {\n container.innerHTML = svgData;\n }\n }\n}\n"]}
1	+ {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,SAAS,MAAM,iCAAiC,CAAC;AAGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AAMH,MAAM,OAAO,IAAI;;;;;;EAuBN,gBAAgB;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAEM,MAAM;IACT,OAAO,WAAK,KAAK,EAAC,WAAW,GAAG,CAAC;EACrC,CAAC;EAGS,KAAK,CAAC,QAAQ,CAAC,IAAY;IACjC,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,EAAE,EAAE;MACnC,OAAO;KACV;IAED,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED;;;;KAIG;EACK,OAAO,CAAC,IAAY;IACxB,OAAO,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;EAChD,CAAC;EAED;;;;;KAKG;EACK,SAAS,CAAC,OAAe;IAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACtE,IAAI,SAAS,EAAE;MACX,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;KACjC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from './icon.types';\n\n/*\n The recommended icon library for use with Lime Elements is the Windows 10 set\n * from Icons8 (https://icons8.com/icons/windows). This set is included in the\n * relevant Lime products. If you are using Lime Elements in a non-Lime product,\n * you will have to supply your own icons.\n \n The size and color of the icon is set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n \n ### Setup\n * To use @lundalogik/lime-icons8, the `/assets` folder from\n * __@lundalogik/lime-icons8__ must be made available on the webserver.\n * To use a different icon set, the icons must be placed in a folder structure\n * that looks like this: `assets/icons/<name-of-icon>.svg`\n \n If `assets` is placed in the root, no other setup is needed. The icons will\n * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.\n \n If `assets` is placed in a sub-folder somewhere, the easiest way to make the\n * icons available is to use the HTML `base` element:\n \n ```\n * <base href=\"/my/parent/path/\">\n * ```\n \n If this is not enough, or if the `base` element is already in use for\n * something else, a global icon path can be configured with the `limel-config`\n * element:\n * ```\n * <limel-config config={{iconPath: '/my/parent/path/'}} />\n * ```\n \n ### Lime icons\n * There are icons included in the @lundalogik/lime-icons8 package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n * :::note\n * Some of the `-lime-` icons have multiple colors and use our own CSS variables\n * instead of HEX or RGB values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n \n ### Icon Finder\n \n Search for an icon and click on it to copy its name to clipboard.\n \n <limel-example-icon-finder />\n * @exampleComponent limel-example-icon\n * @exampleComponent limel-example-icon-background\n /\n@Component({\n tag: 'limel-icon',\n shadow: true,\n styleUrl: 'icon.scss',\n})\nexport class Icon {\n /\n Size of the icon\n /\n @Prop({ reflect: true })\n public size: IconSize;\n\n /\n Name of the icon\n /\n @Prop({ reflect: true })\n public name: string;\n\n /\n Set to `true` to give the icon a round background with some padding.\n * Only works when the `size` attribute is also set.\n /\n @Prop({ reflect: true })\n public badge: boolean;\n\n @Element()\n private host: HTMLLimelIconElement;\n\n public componentDidLoad() {\n this.loadIcon(this.name);\n }\n\n public render() {\n return <div class=\"container\" />;\n }\n\n @Watch('name')\n protected async loadIcon(name: string) {\n if (name === undefined \|\| name === '') {\n return;\n }\n\n const svgData = await this.loadSvg(name);\n this.renderSvg(svgData);\n }\n\n /\n Load the SVG data for the icon from the icon cache\n * @param {string} name name of the icon\n * @returns {string} the icon SVG data\n /\n private loadSvg(name: string) {\n return iconCache.get(name, config.iconPath);\n }\n\n /\n * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n * will remain the way they look in the file.\n * Therefore we inject the svg as inline markup instead.\n */\n private renderSvg(svgData: string) {\n const container = this.host.shadowRoot.querySelector('div.container');\n if (container) {\n container.innerHTML = svgData;\n }\n }\n}\n"]}

package/dist/collection/components/icon-button/icon-button.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { makeEnterClickable, removeEnterClickable, } from 'src/util/makeEnterClickable';
 /**
  * @exampleComponent limel-example-icon-button-basic
  * @exampleComponent limel-example-icon-button-disabled
@@ -16,6 +17,12 @@ export class IconButton {
   connectedCallback() {
     this.initialize();
   }
+  componentWillLoad() {
+    makeEnterClickable(this.host);
+  }
+  disconnectedCallback() {
+    removeEnterClickable(this.host);
+  }
   componentDidLoad() {
     this.initialize();
   }

package/dist/collection/components/icon-button/icon-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AAE5D~~;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;EACL,CAAC;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IACnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,OAAO,CACH,4BACI,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,gBAAgB;MAEpB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,CACvC,CACZ,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\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: 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 componentDidLoad() {\n this.initialize();\n }\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 if (this.host.hasAttribute('tabindex')) {\n buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n }\n\n return (\n <button\n class=\"mdc-icon-button\"\n disabled={this.disabled}\n aria-label={this.label}\n title={this.label}\n {...buttonAttributes}\n >\n <limel-icon name={this.icon} badge={true} />\n </button>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,6BAA6B,CAAC;AAErC;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpC,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;EACL,CAAC;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IACnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,OAAO,CACH,4BACI,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,gBAAgB;MAEpB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,CACvC,CACZ,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/makeEnterClickable';\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: 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 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 if (this.host.hasAttribute('tabindex')) {\n buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n }\n\n return (\n <button\n class=\"mdc-icon-button\"\n disabled={this.disabled}\n aria-label={this.label}\n title={this.label}\n {...buttonAttributes}\n >\n <limel-icon name={this.icon} badge={true} />\n </button>\n );\n }\n}\n"]}

package/dist/collection/components/input-field/input-field.js CHANGED Viewed

@@ -4,7 +4,6 @@ import { debounce } from 'lodash-es';
 import { ARROW_DOWN, ARROW_DOWN_KEY_CODE, ARROW_UP, ARROW_UP_KEY_CODE, ENTER, ENTER_KEY_CODE, ESCAPE, ESCAPE_KEY_CODE, SPACE, SPACE_KEY_CODE, TAB, TAB_KEY_CODE, } from '../../util/keycodes';
 import { getHref, getTarget } from '../../util/link-helper';
 import { createRandomString } from '../../util/random-string';
-const helperTextId = 'tf-helper-text';
 /**
  * @exampleComponent limel-example-input-field-text
  * @exampleComponent limel-example-input-field-placeholder
@@ -116,7 +115,7 @@ export class InputField {
       if (!this.maxlength && !this.hasHelperText()) {
         return;
       }
-      return (h("limel-helper-line", { helperTextId: helperTextId, helperText: this.helperText, length: length, maxLength: this.maxlength, invalid: this.isInvalid() }));
+      return (h("limel-helper-line", { helperTextId: this.helperTextId, helperText: this.helperText, length: length, maxLength: this.maxlength, invalid: this.isInvalid() }));
     };
     this.renderEmptyValueForReadonly = () => {
       if (this.readonly && !this.value) {
@@ -177,7 +176,7 @@ export class InputField {
       }
       return this.limelInputField.shadowRoot.querySelector(elementName);
     };
-    this.renderLabel = (labelId) => {
+    this.renderLabel = () => {
       const labelClassList = {
         'mdc-floating-label': true,
         'mdc-floating-label--float-above': !!this.value || this.isFocused || this.readonly,
@@ -185,7 +184,7 @@ export class InputField {
       if (!this.label) {
         return;
       }
-      return (h("span", { class: "mdc-notched-outline__notch" }, h("span", { class: labelClassList, id: labelId }, this.label)));
+      return (h("span", { class: "mdc-notched-outline__notch" }, h("span", { class: labelClassList, id: this.labelId }, this.label)));
     };
     this.renderLeadingIcon = () => {
       if (this.type === 'textarea') {
@@ -437,6 +436,8 @@ export class InputField {
     const debounceTimeout = 300;
     this.changeEmitter = debounce(this.changeEmitter, debounceTimeout);
     this.portalId = createRandomString();
+    this.helperTextId = createRandomString();
+    this.labelId = createRandomString();
   }
   connectedCallback() {
     this.initialize();
@@ -457,9 +458,8 @@ export class InputField {
     }
   }
   render() {
-    const labelId = 'tf-input-label';
     const properties = this.getAdditionalProps();
-    properties['aria-labelledby'] = labelId;
+    properties['aria-labelledby'] = this.labelId;
     properties.class = 'mdc-text-field__input';
     properties.onInput = this.handleChange;
     properties.onFocus = this.onFocus;
@@ -468,11 +468,11 @@ export class InputField {
     properties.readonly = this.readonly;
     properties.disabled = this.disabled || this.readonly;
     if (this.hasHelperText()) {
-      properties['aria-controls'] = helperTextId;
-      properties['aria-describedby'] = helperTextId;
+      properties['aria-controls'] = this.helperTextId;
+      properties['aria-describedby'] = this.helperTextId;
     }
     return [
-      h("label", { class: this.getContainerClassList() }, h("span", { class: "mdc-notched-outline", tabindex: "-1" }, h("span", { class: "mdc-notched-outline__leading" }), this.renderLabel(labelId), h("span", { class: "mdc-notched-outline__trailing" })), this.renderLeadingIcon(), this.renderEmptyValueForReadonly(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton()),
+      h("label", { class: this.getContainerClassList() }, h("span", { class: "mdc-notched-outline", tabindex: "-1" }, h("span", { class: "mdc-notched-outline__leading" }), this.renderLabel(), h("span", { class: "mdc-notched-outline__trailing" })), this.renderLeadingIcon(), this.renderEmptyValueForReadonly(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton()),
       this.renderHelperLine(),
       this.renderAutocompleteList(),
     ];