@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

package/dist/cjs/{event-listeners-4a8d66d5.js → event-listeners-74715e62.js}

@@ -1,43 +1,45 @@
 'use strict';
 
-const equals = (a) => (b) => Object.keys(a).every((key) => a[key] === b[key]);
-class EventListeners {
-  constructor() {
-    this.eventListeners = [];
-    this.add = (el, name, listener, identifier = null) => {
-      this.eventListeners.push({ el, name, listener, identifier });
-      el.addEventListener(name, listener);
-    };
-    this.remove = (el, name, listener) => {
-      const sameItem = equals({ el, name, listener });
-      this.eventListeners = this.getFilteredEventListeners(sameItem);
-    };
-    this.removeByIdentifier = (identifier) => {
-      const sameItem = (el) => el.identifier === identifier;
-      const foundListener = this.eventListeners.find(sameItem) !== undefined;
-      if (!foundListener) {
-        return;
-      }
-      this.eventListeners = this.getFilteredEventListeners(sameItem);
-    };
-    this.removeAll = () => {
-      while (this.eventListeners.length) {
-        const { el, name, listener } = this.eventListeners.pop();
-        el.removeEventListener(name, listener);
-      }
-    };
-  }
-  getFilteredEventListeners(sameItem) {
-    return this.eventListeners.filter((item) => {
-      if (sameItem(item)) {
-        item.el.removeEventListener(item.name, item.listener);
-        return false;
-      }
-      else {
-        return true;
-      }
-    });
-  }
+const equals = (a) => (b) => Object.keys(a).every((key) => a[key] === b[key]);
+class EventListeners {
+  constructor() {
+    this.eventListeners = [];
+    this.add = (el, name, listener, identifier = null) => {
+      this.eventListeners.push({ el, name, listener, identifier });
+      el.addEventListener(name, listener);
+    };
+    this.remove = (el, name, listener) => {
+      const sameItem = equals({ el, name, listener });
+      this.eventListeners = this.getFilteredEventListeners(sameItem);
+    };
+    this.removeByIdentifier = (identifier) => {
+      const sameItem = (el) => el.identifier === identifier;
+      const foundListener = this.eventListeners.find(sameItem) !== undefined;
+      if (!foundListener) {
+        return;
+      }
+      this.eventListeners = this.getFilteredEventListeners(sameItem);
+    };
+    this.removeAll = () => {
+      while (this.eventListeners.length) {
+        const { el, name, listener } = this.eventListeners.pop();
+        el.removeEventListener(name, listener);
+      }
+    };
+  }
+  getFilteredEventListeners(sameItem) {
+    return this.eventListeners.filter((item) => {
+      if (sameItem(item)) {
+        item.el.removeEventListener(item.name, item.listener);
+        return false;
+      }
+      else {
+        return true;
+      }
+    });
+  }
 }
 
 exports.EventListeners = EventListeners;
+
+//# sourceMappingURL=event-listeners-74715e62.js.map

package/dist/cjs/event-listeners-74715e62.js.map

@@ -0,0 +1 @@
+{"file":"event-listeners-74715e62.js","mappings":";;AAOA,MAAM,MAAM,GACV,CAAmB,CAAI,KACvB,CAAmB,CAAI,KACrB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;MAExC,cAAc;EAA3B;IACE,mBAAc,GAAoB,EAAE,CAAC;IAErC,QAAG,GAAG,CACJ,EAAK,EACL,IAAY,EACZ,QAA4C,EAC5C,UAAU,GAAG,IAAI;MAEjB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC;MAC7D,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KACrC,CAAC;IAEF,WAAM,GAAG,CACP,EAAK,EACL,IAAY,EACZ,QAA4C;MAE5C,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;MAChD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAC;KAChE,CAAC;IAEF,uBAAkB,GAAG,CAAC,UAAkB;MACtC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,UAAU,KAAK,UAAU,CAAC;MACtD,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,SAAS,CAAC;MAEvE,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO;OACR;MAED,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAC;KAChE,CAAC;IAaF,cAAS,GAAG;MACV,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;QACjC,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC;QACzD,EAAE,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;OACxC;KACF,CAAC;GACH;EAjBS,yBAAyB,CAAC,QAAyB;IACzD,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,IAAI;MACrC,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE;QAClB,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACtD,OAAO,KAAK,CAAC;OACd;WAAM;QACL,OAAO,IAAI,CAAC;OACb;KACF,CAAC,CAAC;GACJ;;;;;","names":[],"sources":["./src/utils/event-listeners.ts"],"sourcesContent":["interface EventListener {\n  el: DocumentAndElementEventHandlers;\n  name: string;\n  listener: EventListenerOrEventListenerObject;\n  identifier?: string | null;\n}\n\nconst equals =\n  <A extends Object>(a: A) =>\n  <B extends Object>(b: B) =>\n    Object.keys(a).every((key) => a[key] === b[key]);\n\nexport class EventListeners {\n  eventListeners: EventListener[] = [];\n\n  add = <T extends DocumentAndElementEventHandlers>(\n    el: T,\n    name: string,\n    listener: EventListenerOrEventListenerObject,\n    identifier = null\n  ) => {\n    this.eventListeners.push({ el, name, listener, identifier });\n    el.addEventListener(name, listener);\n  };\n\n  remove = <T extends DocumentAndElementEventHandlers>(\n    el: T,\n    name: string,\n    listener: EventListenerOrEventListenerObject\n  ) => {\n    const sameItem = equals({ el, name, listener });\n    this.eventListeners = this.getFilteredEventListeners(sameItem);\n  };\n\n  removeByIdentifier = (identifier: string) => {\n    const sameItem = (el) => el.identifier === identifier;\n    const foundListener = this.eventListeners.find(sameItem) !== undefined;\n\n    if (!foundListener) {\n      return;\n    }\n\n    this.eventListeners = this.getFilteredEventListeners(sameItem);\n  };\n\n  private getFilteredEventListeners(sameItem: (el) => boolean) {\n    return this.eventListeners.filter((item) => {\n      if (sameItem(item)) {\n        item.el.removeEventListener(item.name, item.listener);\n        return false;\n      } else {\n        return true;\n      }\n    });\n  }\n\n  removeAll = () => {\n    while (this.eventListeners.length) {\n      const { el, name, listener } = this.eventListeners.pop();\n      el.removeEventListener(name, listener);\n    }\n  };\n}\n"],"version":3}

package/dist/cjs/{execution-control-3bc9c7c4.js → execution-control-46f388e0.js}

@@ -1,43 +1,45 @@
 'use strict';
 
-const DEFAULT_DEBOUNCE_INSANELY_FAST = 35;
-const DEFAULT_DEBOUNCE_FAST = 300;
-/**
- * Debounce function to implement a timeframe to wait for no new changes before executing a callback
-
- *  example usages:
- *    debounce(() => saveInput());
- *    debounce(() => saveInput(), 750);
- *    this.searchInput.addEventListener('six-input-input', debounce((event) => this.searchInputChange(event)));
- *
- *  regarding default timeout check https://lawsofux.com/doherty-threshold/
- *
- * @param callback
- * @param timeout
- */
-const debounce = (callback, timeout = DEFAULT_DEBOUNCE_FAST) => {
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => callback.apply(undefined, args), timeout);
-  };
-};
-/**
- * Debounce an event
- *
- * @param event
- * @param timeout
- */
-const debounceEvent = (event, timeout) => {
-  const original = event._original || event;
-  const emit = debounce(original.emit.bind(original), timeout);
-  return {
-    _original: event,
-    emit: emit,
-  };
+const DEFAULT_DEBOUNCE_INSANELY_FAST = 35;
+const DEFAULT_DEBOUNCE_FAST = 300;
+/**
+ * Debounce function to implement a timeframe to wait for no new changes before executing a callback
+
+ *  example usages:
+ *    debounce(() => saveInput());
+ *    debounce(() => saveInput(), 750);
+ *    this.searchInput.addEventListener('six-input-input', debounce((event) => this.searchInputChange(event)));
+ *
+ *  regarding default timeout check https://lawsofux.com/doherty-threshold/
+ *
+ * @param callback
+ * @param timeout
+ */
+const debounce = (callback, timeout = DEFAULT_DEBOUNCE_FAST) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => callback.apply(undefined, args), timeout);
+  };
+};
+/**
+ * Debounce an event
+ *
+ * @param event
+ * @param timeout
+ */
+const debounceEvent = (event, timeout) => {
+  const original = event._original || event;
+  const emit = debounce(original.emit.bind(original), timeout);
+  return {
+    _original: event,
+    emit: emit,
+  };
 };
 
 exports.DEFAULT_DEBOUNCE_FAST = DEFAULT_DEBOUNCE_FAST;
 exports.DEFAULT_DEBOUNCE_INSANELY_FAST = DEFAULT_DEBOUNCE_INSANELY_FAST;
 exports.debounce = debounce;
 exports.debounceEvent = debounceEvent;
+
+//# sourceMappingURL=execution-control-46f388e0.js.map

package/dist/cjs/execution-control-46f388e0.js.map

@@ -0,0 +1 @@
+{"file":"execution-control-46f388e0.js","mappings":";;MAEa,8BAA8B,GAAG,GAAG;MAEpC,qBAAqB,GAAG,IAAI;AAGzC;;;;;;;;;;;;;MAaa,QAAQ,GAAG,CAAC,QAAkB,EAAE,OAAO,GAAG,qBAAqB;EAC1E,IAAI,KAAqB,CAAC;EAC1B,OAAO,CAAI,GAAG,IAAS;IACrB,YAAY,CAAC,KAAK,CAAC,CAAC;IACpB,KAAK,GAAG,UAAU,CAAC,MAAM,QAAQ,CAAC,KAAK,CAACA,SAAI,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;GAC/D,CAAC;AACJ,EAAE;AAEF;;;;;;MAMa,aAAa,GAAG,CAAC,KAAmB,EAAE,OAAe;EAChE,MAAM,QAAQ,GAAI,KAAa,CAAC,SAAS,IAAI,KAAK,CAAC;EACnD,MAAM,IAAI,GAAG,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAyB,CAAC;EACrF,OAAO;IACL,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,IAAI;GACK,CAAC;AACpB;;;;;;;","names":["this"],"sources":["./src/utils/execution-control.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport const DEFAULT_DEBOUNCE_INSANELY_FAST = 35;\nexport const DEFAULT_DEBOUNCE_VERY_FAST = 100;\nexport const DEFAULT_DEBOUNCE_FAST = 300;\nexport const DEFAULT_DEBOUNCE_SLOW = 600;\n\n/**\n * Debounce function to implement a timeframe to wait for no new changes before executing a callback\n\n *  example usages:\n *    debounce(() => saveInput());\n *    debounce(() => saveInput(), 750);\n *    this.searchInput.addEventListener('six-input-input', debounce((event) => this.searchInputChange(event)));\n *\n *  regarding default timeout check https://lawsofux.com/doherty-threshold/\n *\n * @param callback\n * @param timeout\n */\nexport const debounce = (callback: Function, timeout = DEFAULT_DEBOUNCE_FAST) => {\n  let timer: NodeJS.Timeout;\n  return <T>(...args: T[]) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => callback.apply(this, args), timeout);\n  };\n};\n\n/**\n * Debounce an event\n *\n * @param event\n * @param timeout\n */\nexport const debounceEvent = (event: EventEmitter, timeout: number): EventEmitter => {\n  const original = (event as any)._original || event;\n  const emit = debounce(original.emit.bind(original), timeout) as (any) => CustomEvent;\n  return {\n    _original: event,\n    emit: emit,\n  } as EventEmitter;\n};\n"],"version":3}

package/dist/cjs/{focus-visible-b08d956f.js → focus-visible-0b352c74.js}

@@ -1,45 +1,47 @@
 'use strict';
 
-//
-// Simulates :focus-visible behavior on an element by watching for certain keyboard and mouse heuristics and toggling a
-// `focus-visible` class. Works at the component level so no global polyfill is necessary.
-//
-// This will eventually be removed pending better :focus-visible support: https://caniuse.com/#search=focus-visible
-//
-const listeners = new WeakMap();
-function observe(el) {
-  if (!el)
-    return;
-  const keys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp'];
-  const is = (event) => {
-    if (keys.includes(event.key)) {
-      el.classList.add('focus-visible');
-    }
-  };
-  const isNot = () => el.classList.remove('focus-visible');
-  listeners.set(el, { is, isNot });
-  el.addEventListener('keydown', is);
-  el.addEventListener('keyup', is);
-  el.addEventListener('mousedown', isNot);
-  el.addEventListener('mousedown', isNot);
-}
-function unobserve(el) {
-  if (!el)
-    return;
-  const listener = listeners.get(el);
-  if (!listener) {
-    return;
-  }
-  const { is, isNot } = listener;
-  el.classList.remove('focus-visible');
-  el.removeEventListener('keydown', is);
-  el.removeEventListener('keyup', is);
-  el.removeEventListener('mousedown', isNot);
-  el.removeEventListener('mousedown', isNot);
-}
-const focusVisible = {
-  observe,
-  unobserve,
+//
+// Simulates :focus-visible behavior on an element by watching for certain keyboard and mouse heuristics and toggling a
+// `focus-visible` class. Works at the component level so no global polyfill is necessary.
+//
+// This will eventually be removed pending better :focus-visible support: https://caniuse.com/#search=focus-visible
+//
+const listeners = new WeakMap();
+function observe(el) {
+  if (!el)
+    return;
+  const keys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp'];
+  const is = (event) => {
+    if (keys.includes(event.key)) {
+      el.classList.add('focus-visible');
+    }
+  };
+  const isNot = () => el.classList.remove('focus-visible');
+  listeners.set(el, { is, isNot });
+  el.addEventListener('keydown', is);
+  el.addEventListener('keyup', is);
+  el.addEventListener('mousedown', isNot);
+  el.addEventListener('mousedown', isNot);
+}
+function unobserve(el) {
+  if (!el)
+    return;
+  const listener = listeners.get(el);
+  if (!listener) {
+    return;
+  }
+  const { is, isNot } = listener;
+  el.classList.remove('focus-visible');
+  el.removeEventListener('keydown', is);
+  el.removeEventListener('keyup', is);
+  el.removeEventListener('mousedown', isNot);
+  el.removeEventListener('mousedown', isNot);
+}
+const focusVisible = {
+  observe,
+  unobserve,
 };
 
 exports.focusVisible = focusVisible;
+
+//# sourceMappingURL=focus-visible-0b352c74.js.map

package/dist/cjs/focus-visible-0b352c74.js.map

@@ -0,0 +1 @@
+{"file":"focus-visible-0b352c74.js","mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,SAAS,GAAG,IAAI,OAAO,EAAE,CAAC;SAEhB,OAAO,CAAC,EAAe;EACrC,IAAI,CAAC,EAAE;IAAE,OAAO;EAEhB,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;EAC7G,MAAM,EAAE,GAAG,CAAC,KAAoB;IAC9B,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;MAC5B,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;KACnC;GACF,CAAC;EACF,MAAM,KAAK,GAAG,MAAM,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;EACzD,SAAS,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;EAEjC,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EACnC,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;EACjC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;EACxC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC1C,CAAC;SAEe,SAAS,CAAC,EAAe;EACvC,IAAI,CAAC,EAAE;IAAE,OAAO;EAEhB,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;EAEnC,IAAI,CAAC,QAAQ,EAAE;IACb,OAAO;GACR;EAED,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC;EAE/B,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;EACrC,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EACtC,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;EACpC,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;EAC3C,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC7C,CAAC;MAEY,YAAY,GAAG;EAC1B,OAAO;EACP,SAAS;;;;;","names":[],"sources":["./src/utils/focus-visible.ts"],"sourcesContent":["//\n// Simulates :focus-visible behavior on an element by watching for certain keyboard and mouse heuristics and toggling a\n// `focus-visible` class. Works at the component level so no global polyfill is necessary.\n//\n// This will eventually be removed pending better :focus-visible support: https://caniuse.com/#search=focus-visible\n//\nconst listeners = new WeakMap();\n\nexport function observe(el: HTMLElement) {\n  if (!el) return;\n\n  const keys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp'];\n  const is = (event: KeyboardEvent) => {\n    if (keys.includes(event.key)) {\n      el.classList.add('focus-visible');\n    }\n  };\n  const isNot = () => el.classList.remove('focus-visible');\n  listeners.set(el, { is, isNot });\n\n  el.addEventListener('keydown', is);\n  el.addEventListener('keyup', is);\n  el.addEventListener('mousedown', isNot);\n  el.addEventListener('mousedown', isNot);\n}\n\nexport function unobserve(el: HTMLElement) {\n  if (!el) return;\n\n  const listener = listeners.get(el);\n\n  if (!listener) {\n    return;\n  }\n\n  const { is, isNot } = listener;\n\n  el.classList.remove('focus-visible');\n  el.removeEventListener('keydown', is);\n  el.removeEventListener('keyup', is);\n  el.removeEventListener('mousedown', isNot);\n  el.removeEventListener('mousedown', isNot);\n}\n\nexport const focusVisible = {\n  observe,\n  unobserve,\n};\n"],"version":3}

package/dist/cjs/{form-control-9e4dffd1.js → form-control-8e2ae807.js}

@@ -1,32 +1,34 @@
 'use strict';
 
-const index = require('./index-341df120.js');
+const index = require('./index-b3257a77.js');
 
-const FormControl = (props, children) => {
-  const hasLabel = props.label ? true : props.hasLabelSlot;
-  const hasHelpText = props.helpText ? true : props.hasHelpTextSlot;
-  /** ErrorTextAttribute has precedence if non empty value is provided or if slot is not set */
-  const useErrorTextAttribute = (props.errorText && props.errorText !== '') || !props.hasErrorTextSlot;
-  return (index.h("div", { part: "form-control", class: {
-      'form-control': true,
-      'form-control--small': props.size === 'small',
-      'form-control--medium': props.size === 'medium',
-      'form-control--large': props.size === 'large',
-      'form-control--has-label': hasLabel,
-      'form-control--has-help-text': hasHelpText,
-      'form-control--has-error-text': props.displayError,
-      'form-control--disabled': props.disabled,
-      'form-control--invalid': props.displayError && !props.disabled,
-    } },
-    index.h("label", { part: "label", id: props.labelId, class: {
-        'form-control__label': true,
-        'form-control__label__required': props.required,
-      }, htmlFor: props.inputId, "aria-hidden": hasLabel ? 'false' : 'true', onClick: props.onLabelClick },
-      index.h("slot", { name: "label" }, props.label)),
-    index.h("div", { class: "form-control__input" }, children),
-    index.h("div", { part: "error-text", id: props.errorTextId, class: "form-control__error-text", "aria-hidden": props.displayError ? 'false' : 'true' }, useErrorTextAttribute ? props.errorText : index.h("slot", { name: "error-text" })),
-    index.h("div", { part: "help-text", id: props.helpTextId, class: "form-control__help-text", "aria-hidden": hasHelpText ? 'false' : 'true' },
-      index.h("slot", { name: "help-text" }, props.helpText))));
+const FormControl = (props, children) => {
+  const hasLabel = props.label ? true : props.hasLabelSlot;
+  const hasHelpText = props.helpText ? true : props.hasHelpTextSlot;
+  /** ErrorTextAttribute has precedence if non empty value is provided or if slot is not set */
+  const useErrorTextAttribute = (props.errorText && props.errorText !== '') || !props.hasErrorTextSlot;
+  return (index.h("div", { part: "form-control", class: {
+      'form-control': true,
+      'form-control--small': props.size === 'small',
+      'form-control--medium': props.size === 'medium',
+      'form-control--large': props.size === 'large',
+      'form-control--has-label': hasLabel,
+      'form-control--has-help-text': hasHelpText,
+      'form-control--has-error-text': props.displayError,
+      'form-control--disabled': props.disabled,
+      'form-control--invalid': props.displayError && !props.disabled,
+    } },
+    index.h("label", { part: "label", id: props.labelId, class: {
+        'form-control__label': true,
+        'form-control__label__required': props.required,
+      }, htmlFor: props.inputId, "aria-hidden": hasLabel ? 'false' : 'true', onClick: props.onLabelClick },
+      index.h("slot", { name: "label" }, props.label)),
+    index.h("div", { class: "form-control__input" }, children),
+    index.h("div", { part: "error-text", id: props.errorTextId, class: "form-control__error-text", "aria-hidden": props.displayError ? 'false' : 'true' }, useErrorTextAttribute ? props.errorText : index.h("slot", { name: "error-text" })),
+    index.h("div", { part: "help-text", id: props.helpTextId, class: "form-control__help-text", "aria-hidden": hasHelpText ? 'false' : 'true' },
+      index.h("slot", { name: "help-text" }, props.helpText))));
 };
 
 exports.FormControl = FormControl;
+
+//# sourceMappingURL=form-control-8e2ae807.js.map

package/dist/cjs/form-control-8e2ae807.js.map

@@ -0,0 +1 @@
+{"file":"form-control-8e2ae807.js","mappings":";;;;MAiDM,WAAW,GAAG,CAAC,KAAuB,EAAE,QAAQ;EACpD,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC;EACzD,MAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAC,eAAe,CAAC;;EAElE,MAAM,qBAAqB,GAAG,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC;EAErG,QACEA,iBACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE;MACL,cAAc,EAAE,IAAI;MACpB,qBAAqB,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;MAC7C,sBAAsB,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ;MAC/C,qBAAqB,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;MAC7C,yBAAyB,EAAE,QAAQ;MACnC,6BAA6B,EAAE,WAAW;MAC1C,8BAA8B,EAAE,KAAK,CAAC,YAAY;MAClD,wBAAwB,EAAE,KAAK,CAAC,QAAQ;MACxC,uBAAuB,EAAE,KAAK,CAAC,YAAY,IAAI,CAAC,KAAK,CAAC,QAAQ;KAC/D;IAEDA,mBACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,KAAK,CAAC,OAAO,EACjB,KAAK,EAAE;QACL,qBAAqB,EAAE,IAAI;QAC3B,+BAA+B,EAAE,KAAK,CAAC,QAAQ;OAChD,EACD,OAAO,EAAE,KAAK,CAAC,OAAO,iBACT,QAAQ,GAAG,OAAO,GAAG,MAAM,EACxC,OAAO,EAAE,KAAK,CAAC,YAAY;MAE3BA,kBAAM,IAAI,EAAC,OAAO,IAAE,KAAK,CAAC,KAAK,CAAQ,CACjC;IAERA,iBAAK,KAAK,EAAC,qBAAqB,IAAE,QAAQ,CAAO;IAEjDA,iBACE,IAAI,EAAC,YAAY,EACjB,EAAE,EAAE,KAAK,CAAC,WAAW,EACrB,KAAK,EAAC,0BAA0B,iBACnB,KAAK,CAAC,YAAY,GAAG,OAAO,GAAG,MAAM,IAEjD,qBAAqB,GAAG,KAAK,CAAC,SAAS,GAAGA,kBAAM,IAAI,EAAC,YAAY,GAAG,CACjE;IAENA,iBACE,IAAI,EAAC,WAAW,EAChB,EAAE,EAAE,KAAK,CAAC,UAAU,EACpB,KAAK,EAAC,yBAAyB,iBAClB,WAAW,GAAG,OAAO,GAAG,MAAM;MAE3CA,kBAAM,IAAI,EAAC,WAAW,IAAE,KAAK,CAAC,QAAQ,CAAQ,CAC1C,CACF,EACN;AACJ;;;;","names":["h"],"sources":["./src/functional-components/form-control/form-control.tsx"],"sourcesContent":["import { h } from '@stencil/core';\n\nexport interface FormControlProps {\n  /** The input id, used to map the input to the label */\n  inputId: string;\n\n  /** The size of the form control */\n  size: 'small' | 'medium' | 'large';\n\n  /** The label id, used to map the label to the input */\n  labelId?: string;\n\n  /** The label text (if the label slot isn't used) */\n  label?: string;\n\n  /** Whether or not a label slot has been provided. */\n  hasLabelSlot?: boolean;\n\n  /** The help text id, used to map the input to the help text */\n  helpTextId?: string;\n\n  /** The help text (if the help-text slot isn't used) */\n  helpText?: string;\n\n  /** Whether or not a help text slot has been provided. */\n  hasHelpTextSlot?: boolean;\n\n  /** The error text id, used to map the input to the help text */\n  errorTextId?: string;\n\n  /** The error text (if the error-text slot isn't used) */\n  errorText?: string;\n\n  /** Whether or not a error text slot has been provided. */\n  hasErrorTextSlot?: boolean;\n\n  /** Set to true to disable the input. */\n  disabled?: boolean;\n\n  /** Set if the value is required. */\n  required?: boolean;\n\n  /** Set if the error text is displayed. */\n  displayError?: boolean;\n\n  /** A function that gets called when the label is clicked. */\n  onLabelClick?: (event: MouseEvent) => void;\n}\n\nconst FormControl = (props: FormControlProps, children) => {\n  const hasLabel = props.label ? true : props.hasLabelSlot;\n  const hasHelpText = props.helpText ? true : props.hasHelpTextSlot;\n  /** ErrorTextAttribute has precedence if non empty value is provided or if slot is not set */\n  const useErrorTextAttribute = (props.errorText && props.errorText !== '') || !props.hasErrorTextSlot;\n\n  return (\n    <div\n      part=\"form-control\"\n      class={{\n        'form-control': true,\n        'form-control--small': props.size === 'small',\n        'form-control--medium': props.size === 'medium',\n        'form-control--large': props.size === 'large',\n        'form-control--has-label': hasLabel,\n        'form-control--has-help-text': hasHelpText,\n        'form-control--has-error-text': props.displayError,\n        'form-control--disabled': props.disabled,\n        'form-control--invalid': props.displayError && !props.disabled,\n      }}\n    >\n      <label\n        part=\"label\"\n        id={props.labelId}\n        class={{\n          'form-control__label': true,\n          'form-control__label__required': props.required,\n        }}\n        htmlFor={props.inputId}\n        aria-hidden={hasLabel ? 'false' : 'true'}\n        onClick={props.onLabelClick}\n      >\n        <slot name=\"label\">{props.label}</slot>\n      </label>\n\n      <div class=\"form-control__input\">{children}</div>\n\n      <div\n        part=\"error-text\"\n        id={props.errorTextId}\n        class=\"form-control__error-text\"\n        aria-hidden={props.displayError ? 'false' : 'true'}\n      >\n        {useErrorTextAttribute ? props.errorText : <slot name=\"error-text\" />}\n      </div>\n\n      <div\n        part=\"help-text\"\n        id={props.helpTextId}\n        class=\"form-control__help-text\"\n        aria-hidden={hasHelpText ? 'false' : 'true'}\n      >\n        <slot name=\"help-text\">{props.helpText}</slot>\n      </div>\n    </div>\n  );\n};\n\nexport default FormControl;\n"],"version":3}