@expressivecss/expressive 0.9.1 → 0.10.0

package/dist/js/chunks/chunk-PIIAEYAJ.mjs

@@ -0,0 +1,85 @@
+import {
+  Component
+} from "./chunk-QSQ24FYT.mjs";
+
+// src/ts/components/characterCounter.ts
+var _defaults = Object.freeze({});
+var CharacterCounter = class _CharacterCounter extends Component {
+  constructor(el, options) {
+    super(el, {}, _CharacterCounter);
+    this.updateCounter = () => {
+      const maxLength = parseInt(this.el.getAttribute("maxlength")), actualLength = this.el.value.length;
+      this.isValidLength = actualLength <= maxLength;
+      let counterString = actualLength.toString();
+      if (maxLength) {
+        counterString += "/" + maxLength;
+        this._validateInput();
+      }
+      this.counterEl.textContent = counterString;
+    };
+    this.el["Expressive_CharacterCounter"] = this;
+    this.options = {
+      ..._CharacterCounter.defaults,
+      ...options
+    };
+    this.isInvalid = false;
+    this.isValidLength = false;
+    this._setupCounter();
+    this._setupEventHandlers();
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  /**
+   * Initializes instances of CharacterCounter.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(els, options = {}) {
+    return super.init(els, options, _CharacterCounter);
+  }
+  static getInstance(el) {
+    return el["Expressive_CharacterCounter"];
+  }
+  destroy() {
+    this._removeEventHandlers();
+    this.el["Expressive_CharacterCounter"] = void 0;
+    this._removeCounter();
+  }
+  _setupEventHandlers() {
+    this.el.addEventListener("focus", this.updateCounter, true);
+    this.el.addEventListener("input", this.updateCounter, true);
+  }
+  _removeEventHandlers() {
+    this.el.removeEventListener("focus", this.updateCounter, true);
+    this.el.removeEventListener("input", this.updateCounter, true);
+  }
+  _setupCounter() {
+    this.counterEl = document.createElement("span");
+    this.counterEl.classList.add("character-counter");
+    this.counterEl.setAttribute("aria-live", "polite");
+    this.counterEl.setAttribute("aria-atomic", "true");
+    this.counterEl.style.float = "right";
+    this.counterEl.style.fontSize = "12px";
+    this.counterEl.style.height = "1";
+    this.el.parentElement.appendChild(this.counterEl);
+  }
+  _removeCounter() {
+    this.counterEl.remove();
+  }
+  _validateInput() {
+    if (this.isValidLength && this.isInvalid) {
+      this.isInvalid = false;
+      this.el.classList.remove("invalid");
+    } else if (!this.isValidLength && !this.isInvalid) {
+      this.isInvalid = true;
+      this.el.classList.remove("valid");
+      this.el.classList.add("invalid");
+    }
+  }
+};
+
+export {
+  CharacterCounter
+};
+//# sourceMappingURL=chunk-PIIAEYAJ.mjs.map

package/dist/js/chunks/chunk-PIIAEYAJ.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/characterCounter.ts"],
+  "sourcesContent": ["import { Component, BaseOptions, InitElements, InitElement } from '../core/component';\n\nconst _defaults = Object.freeze({});\n\ntype InputElement = HTMLInputElement | HTMLTextAreaElement;\n\nexport class CharacterCounter extends Component<BaseOptions> {\n  declare el: InputElement;\n  /** Stores the reference to the counter HTML element. */\n  counterEl: HTMLSpanElement;\n  /** Specifies whether the input is valid or not. */\n  isInvalid: boolean;\n  /** Specifies whether the input text has valid length or not. */\n  isValidLength: boolean;\n\n  constructor(el: HTMLInputElement | HTMLTextAreaElement, options: Partial<BaseOptions>) {\n    super(el, {}, CharacterCounter);\n    this.el['Expressive_CharacterCounter'] = this;\n\n    this.options = {\n      ...CharacterCounter.defaults,\n      ...options\n    };\n\n    this.isInvalid = false;\n    this.isValidLength = false;\n\n    this._setupCounter();\n    this._setupEventHandlers();\n  }\n\n  static get defaults(): BaseOptions {\n    return _defaults;\n  }\n\n  /**\n   * Initializes instance of CharacterCounter.\n   * @param el HTML element.\n   * @param options Component options.\n   */\n  static init(el: InputElement, options?: Partial<BaseOptions>): CharacterCounter;\n  /**\n   * Initializes instances of CharacterCounter.\n   * @param els HTML elements.\n   * @param options Component options.\n   */\n  static init(\n    els: InitElements<InputElement | InitElement>,\n    options?: Partial<BaseOptions>\n  ): CharacterCounter[];\n  /**\n   * Initializes instances of CharacterCounter.\n   * @param els HTML elements.\n   * @param options Component options.\n   */\n  static init(\n    els: InputElement | InitElements<InputElement | InitElement>,\n    options: Partial<BaseOptions> = {}\n  ): CharacterCounter | CharacterCounter[] {\n    return super.init(els, options, CharacterCounter);\n  }\n\n  static getInstance(el: InputElement): CharacterCounter {\n    return el['Expressive_CharacterCounter'];\n  }\n\n  destroy() {\n    this._removeEventHandlers();\n    this.el['Expressive_CharacterCounter'] = undefined;\n    this._removeCounter();\n  }\n\n  _setupEventHandlers() {\n    this.el.addEventListener('focus', this.updateCounter, true);\n    this.el.addEventListener('input', this.updateCounter, true);\n  }\n\n  _removeEventHandlers() {\n    this.el.removeEventListener('focus', this.updateCounter, true);\n    this.el.removeEventListener('input', this.updateCounter, true);\n  }\n\n  _setupCounter() {\n    this.counterEl = document.createElement('span');\n    this.counterEl.classList.add('character-counter');\n    // The count is the whole point of the component and it changes as the\n    // user types, so it has to be a live region - otherwise a screen reader\n    // user reaches the limit without ever being told one existed. Polite so\n    // it waits for a pause instead of interrupting every keystroke, and\n    // atomic so \"18/20\" is read as one figure rather than a changed digit.\n    this.counterEl.setAttribute('aria-live', 'polite');\n    this.counterEl.setAttribute('aria-atomic', 'true');\n    this.counterEl.style.float = 'right';\n    this.counterEl.style.fontSize = '12px';\n    this.counterEl.style.height = '1';\n    this.el.parentElement.appendChild(this.counterEl);\n  }\n\n  _removeCounter() {\n    this.counterEl.remove();\n  }\n\n  updateCounter = () => {\n    const maxLength = parseInt(this.el.getAttribute('maxlength')),\n      actualLength = (this.el as HTMLInputElement).value.length;\n\n    this.isValidLength = actualLength <= maxLength;\n    let counterString = actualLength.toString();\n    if (maxLength) {\n      counterString += '/' + maxLength;\n      this._validateInput();\n    }\n    this.counterEl.textContent = counterString;\n  };\n\n  _validateInput() {\n    if (this.isValidLength && this.isInvalid) {\n      this.isInvalid = false;\n      this.el.classList.remove('invalid');\n    } else if (!this.isValidLength && !this.isInvalid) {\n      this.isInvalid = true;\n      this.el.classList.remove('valid');\n      this.el.classList.add('invalid');\n    }\n  }\n}\n"],
+  "mappings": ";;;;;AAEA,IAAM,YAAY,OAAO,OAAO,CAAC,CAAC;AAI3B,IAAM,mBAAN,MAAM,0BAAyB,UAAuB;AAAA,EAS3D,YAAY,IAA4C,SAA+B;AACrF,UAAM,IAAI,CAAC,GAAG,iBAAgB;AAsFhC,yBAAgB,MAAM;AACpB,YAAM,YAAY,SAAS,KAAK,GAAG,aAAa,WAAW,CAAC,GAC1D,eAAgB,KAAK,GAAwB,MAAM;AAErD,WAAK,gBAAgB,gBAAgB;AACrC,UAAI,gBAAgB,aAAa,SAAS;AAC1C,UAAI,WAAW;AACb,yBAAiB,MAAM;AACvB,aAAK,eAAe;AAAA,MACtB;AACA,WAAK,UAAU,cAAc;AAAA,IAC/B;AAhGE,SAAK,GAAG,6BAA6B,IAAI;AAEzC,SAAK,UAAU;AAAA,MACb,GAAG,kBAAiB;AAAA,MACpB,GAAG;AAAA,IACL;AAEA,SAAK,YAAY;AACjB,SAAK,gBAAgB;AAErB,SAAK,cAAc;AACnB,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,WAAW,WAAwB;AACjC,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBA,OAAO,KACL,KACA,UAAgC,CAAC,GACM;AACvC,WAAO,MAAM,KAAK,KAAK,SAAS,iBAAgB;AAAA,EAClD;AAAA,EAEA,OAAO,YAAY,IAAoC;AACrD,WAAO,GAAG,6BAA6B;AAAA,EACzC;AAAA,EAEA,UAAU;AACR,SAAK,qBAAqB;AAC1B,SAAK,GAAG,6BAA6B,IAAI;AACzC,SAAK,eAAe;AAAA,EACtB;AAAA,EAEA,sBAAsB;AACpB,SAAK,GAAG,iBAAiB,SAAS,KAAK,eAAe,IAAI;AAC1D,SAAK,GAAG,iBAAiB,SAAS,KAAK,eAAe,IAAI;AAAA,EAC5D;AAAA,EAEA,uBAAuB;AACrB,SAAK,GAAG,oBAAoB,SAAS,KAAK,eAAe,IAAI;AAC7D,SAAK,GAAG,oBAAoB,SAAS,KAAK,eAAe,IAAI;AAAA,EAC/D;AAAA,EAEA,gBAAgB;AACd,SAAK,YAAY,SAAS,cAAc,MAAM;AAC9C,SAAK,UAAU,UAAU,IAAI,mBAAmB;AAMhD,SAAK,UAAU,aAAa,aAAa,QAAQ;AACjD,SAAK,UAAU,aAAa,eAAe,MAAM;AACjD,SAAK,UAAU,MAAM,QAAQ;AAC7B,SAAK,UAAU,MAAM,WAAW;AAChC,SAAK,UAAU,MAAM,SAAS;AAC9B,SAAK,GAAG,cAAc,YAAY,KAAK,SAAS;AAAA,EAClD;AAAA,EAEA,iBAAiB;AACf,SAAK,UAAU,OAAO;AAAA,EACxB;AAAA,EAeA,iBAAiB;AACf,QAAI,KAAK,iBAAiB,KAAK,WAAW;AACxC,WAAK,YAAY;AACjB,WAAK,GAAG,UAAU,OAAO,SAAS;AAAA,IACpC,WAAW,CAAC,KAAK,iBAAiB,CAAC,KAAK,WAAW;AACjD,WAAK,YAAY;AACjB,WAAK,GAAG,UAAU,OAAO,OAAO;AAChC,WAAK,GAAG,UAAU,IAAI,SAAS;AAAA,IACjC;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/js/chunks/chunk-QSQ24FYT.mjs

@@ -0,0 +1,59 @@
+// src/ts/core/component.ts
+var Component = class {
+  /**
+   * Constructs component instance and set everything up.
+   */
+  constructor(el, options, classDef) {
+    if (!(el instanceof HTMLElement)) {
+      console.error(Error(el + " is not an HTML Element"));
+    }
+    const ins = classDef.getInstance(el);
+    if (!!ins) {
+      ins.destroy();
+    }
+    this.el = el;
+  }
+  /**
+   * Initializes component instances.
+   * @param els HTML elements.
+   * @param options Component options.
+   * @param classDef Class definition.
+   */
+  static init(els, options, classDef) {
+    let instances = null;
+    if (els instanceof Element) {
+      instances = new classDef(els, options);
+    } else if (!!els && els.length) {
+      instances = [];
+      for (let i = 0; i < els.length; i++) {
+        instances.push(new classDef(els[i], options));
+      }
+    }
+    return instances;
+  }
+  /**
+   * @returns default options for component instance.
+   */
+  static get defaults() {
+    return {};
+  }
+  /**
+   * Retrieves component instance for the given element.
+   * @param el Associated HTML Element.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  static getInstance(el) {
+    throw new Error("This method must be implemented.");
+  }
+  /**
+   * Destroy plugin instance and teardown.
+   */
+  destroy() {
+    throw new Error("This method must be implemented.");
+  }
+};
+
+export {
+  Component
+};
+//# sourceMappingURL=chunk-QSQ24FYT.mjs.map

package/dist/js/chunks/chunk-QSQ24FYT.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/core/component.ts"],
+  "sourcesContent": ["/**\n * Base options for component initialization.\n */\nexport interface BaseOptions {}\n\nexport type InitElement = HTMLElement | Element;\nexport type InitElements<T extends InitElement> = NodeListOf<T> | HTMLCollectionOf<T>;\ntype ComponentConstructor<T extends Component<O>, O extends BaseOptions> = {\n  new (el: HTMLElement, options: Partial<O>): T;\n};\ntype ComponentType<C extends Component<O>, O extends BaseOptions> = ComponentConstructor<C, O> &\n  typeof Component<O>;\n\nexport interface I18nOptions {\n  cancel: string;\n  clear: string;\n  done: string;\n}\n\nexport interface Openable {\n  isOpen: boolean;\n  open(): void;\n  close(): void;\n}\n\n/**\n * Base class implementation for Expressive components.\n */\nexport class Component<O extends BaseOptions> {\n  /**\n   * The DOM element the plugin was initialized with.\n   */\n  el: HTMLElement;\n  /**\n   * The options the instance was initialized with.\n   */\n  options: O;\n\n  /**\n   * Constructs component instance and set everything up.\n   */\n  constructor(el: HTMLElement, options: Partial<O>, classDef: ComponentType<Component<O>, O>) {\n    // Display error if el is not a valid HTML Element\n    if (!(el instanceof HTMLElement)) {\n      console.error(Error(el + ' is not an HTML Element'));\n    }\n    // If exists, destroy and reinitialize in child\n    const ins = classDef.getInstance(el);\n    if (!!ins) {\n      ins.destroy();\n    }\n    this.el = el;\n  }\n\n  /**\n   * Initializes component instance.\n   * @param el HTML element.\n   * @param options Component options.\n   * @param classDef Class definition.\n   */\n  protected static init<I extends HTMLElement, O extends BaseOptions, C extends Component<O>>(\n    el: I,\n    options: O,\n    classDef: ComponentType<C, O>\n  ): C;\n  /**\n   * Initializes component instances.\n   * @param els HTML elements.\n   * @param options Component options.\n   * @param classDef Class definition.\n   */\n  protected static init<I extends InitElement, O extends BaseOptions, C extends Component<O>>(\n    els: InitElements<I>,\n    options: Partial<O>,\n    classDef: ComponentType<C, O>\n  ): C[];\n  /**\n   * Initializes component instances.\n   * @param els HTML elements.\n   * @param options Component options.\n   * @param classDef Class definition.\n   */\n  protected static init<I extends InitElement, O extends BaseOptions, C extends Component<O>>(\n    els: I | InitElements<I>,\n    options: Partial<O>,\n    classDef: ComponentType<C, O>\n  ): C | C[];\n  /**\n   * Initializes component instances.\n   * @param els HTML elements.\n   * @param options Component options.\n   * @param classDef Class definition.\n   */\n  protected static init<I extends InitElement, O extends BaseOptions, C extends Component<O>>(\n    els: I | InitElements<I>,\n    options: Partial<O>,\n    classDef: ComponentType<C, O>\n  ): C | C[] {\n    let instances = null;\n    if (els instanceof Element) {\n      instances = new classDef(<HTMLElement>els, options);\n    } else if (!!els && els.length) {\n      instances = [];\n      for (let i = 0; i < els.length; i++) {\n        instances.push(new classDef(<HTMLElement>els[i], options));\n      }\n    }\n    return instances;\n  }\n\n  /**\n   * @returns default options for component instance.\n   */\n  static get defaults(): BaseOptions {\n    return {};\n  }\n\n  /**\n   * Retrieves component instance for the given element.\n   * @param el Associated HTML Element.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  static getInstance(el: HTMLElement): Component<BaseOptions> {\n    throw new Error('This method must be implemented.');\n  }\n\n  /**\n   * Destroy plugin instance and teardown.\n   */\n  destroy(): void {\n    throw new Error('This method must be implemented.');\n  }\n}\n"],
+  "mappings": ";AA4BO,IAAM,YAAN,MAAuC;AAAA;AAAA;AAAA;AAAA,EAa5C,YAAY,IAAiB,SAAqB,UAA0C;AAE1F,QAAI,EAAE,cAAc,cAAc;AAChC,cAAQ,MAAM,MAAM,KAAK,yBAAyB,CAAC;AAAA,IACrD;AAEA,UAAM,MAAM,SAAS,YAAY,EAAE;AACnC,QAAI,CAAC,CAAC,KAAK;AACT,UAAI,QAAQ;AAAA,IACd;AACA,SAAK,KAAK;AAAA,EACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyCA,OAAiB,KACf,KACA,SACA,UACS;AACT,QAAI,YAAY;AAChB,QAAI,eAAe,SAAS;AAC1B,kBAAY,IAAI,SAAsB,KAAK,OAAO;AAAA,IACpD,WAAW,CAAC,CAAC,OAAO,IAAI,QAAQ;AAC9B,kBAAY,CAAC;AACb,eAAS,IAAI,GAAG,IAAI,IAAI,QAAQ,KAAK;AACnC,kBAAU,KAAK,IAAI,SAAsB,IAAI,CAAC,GAAG,OAAO,CAAC;AAAA,MAC3D;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW,WAAwB;AACjC,WAAO,CAAC;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,YAAY,IAAyC;AAC1D,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA,EAKA,UAAgB;AACd,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACpD;AACF;",
+  "names": []
+}