@haiilo/catalyst 0.7.4 → 0.8.2

package/dist/components/cat-avatar.js.map

@@ -1 +1 @@
-{"file":"cat-avatar.js","mappings":";;;;AAAA;;;;;;AAMA,MAAM,OAAO,GAAG,CAAC,GAAW;EAC1B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM;IACjC,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;IAC1B,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACxC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;GACjB,CAAC,CAAC;AACL,CAAC;;ACbD,MAAM,YAAY,GAAG,o5CAAo5C;;MCY55CA,WAAS;EALtB;;;;;;;IAWU,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,EAAE,CAAC;GA4FpB;EAhEC,YAAY,CAAC,KAAc;IACzB,IAAI,KAAK,EAAE;MACT,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CACjB,OAAO,IAAI,CAAC,eAAe,GAAG,OAAO,KAAK,GAAG,CAAC,EAC9C,OAAO,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC,CACzC,CAAC;KACH;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;KAClC;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC7B;EAED,mBAAmB;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACfC,QAAG,CAAC,IAAI,CAAC,qCAAqC,EAAE,IAAI,CAAC,CAAC;KACvD;GACF;EAED,MAAM;IACJ,IAAI,IAAI,CAAC,GAAG,EAAE;MACZ,QACE,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IAC1G,IAAI,CAAC,OAAO,CACX,EACJ;KACH;SAAM;MACL,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IACrE,IAAI,CAAC,OAAO,CACR,EACP;KACH;GACF;EAED,IAAY,OAAO;IACjB,OAAO,CAAC,IAAI,CAAC,eAAe;QACxB,CAAC,IAAI,CAAC,IAAI,GAAG,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC1F,EAAE,CAAC;GACR;EAED,IAAY,QAAQ;IAClB,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;GACrD;EAED,IAAY,QAAQ;IAClB,OAAO;MACL,MAAM,EAAE,IAAI;MACZ,cAAc,EAAE,IAAI,CAAC,KAAK;MAC1B,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;KAC5C,CAAC;GACH;EAEO,WAAW;;IACjB,QACE,MAAA,IAAI,CAAC,QAAQ,mCACb,IAAI,CAAC,KAAK;OACP,KAAK,CAAC,GAAG,CAAC;OACV,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;OACd,IAAI,CAAC,EAAE,CAAC,EACX;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAvatar","log"],"sources":["./src/utils/load-img.ts","./src/components/cat-avatar/cat-avatar.scss?tag=cat-avatar&encapsulation=shadow","./src/components/cat-avatar/cat-avatar.tsx"],"sourcesContent":["/**\n * Loads an image and wraps the result in a promise.\n *\n * @param src the image URL\n * @returns a promise\n */\nconst loadImg = (src: string): Promise<Event> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener('load', resolve);\n    image.addEventListener('error', reject);\n    image.src = src;\n  });\n};\n\nexport default loadImg;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  /**\n   * @prop --cat-avatar-bg: The background color of the avatar.\n   * @prop --cat-avatar-fill: The text color of the avatar.\n   * @prop --cat-avatar-size: The size of the avatar.\n   * @prop --cat-avatar-font-size: The font size of the avatar.\n   */\n  display: inline-block;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('m');\n  text-decoration: inherit;\n  color: var(--cat-avatar-fill, cat-token('color.ui.font.avatar'));\n  background-color: var(--cat-avatar-bg, cat-token('color.ui.background.avatar'));\n  background-size: cover;\n  background-position: center;\n  white-space: nowrap;\n  overflow: hidden;\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.avatar-round {\n  border-radius: 50%;\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .avatar-#{$size} {\n    width: var(--cat-avatar-size, cat-size($size));\n    height: var(--cat-avatar-size, cat-size($size));\n    line-height: var(--cat-avatar-size, cat-size($size));\n    font-size: var(--cat-avatar-font-size, cat-body-font-size($fontSize));\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 's');\n@include size('m', 'm');\n@include size('l', 'l');\n@include size('xl', 'xl');\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport loadImg from '../../utils/load-img';\n\n/**\n * Avatars are used to represent a person or object.\n */\n@Component({\n  tag: 'cat-avatar',\n  styleUrl: 'cat-avatar.scss',\n  shadow: true\n})\nexport class CatAvatar {\n  @State() backgroundImage?: string;\n\n  /**\n   * The size of the avatar.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round avatar edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The label of the avatar.\n   */\n  @Prop() label = '';\n\n  /**\n   * Custom initials for the avatar.\n   */\n  @Prop() initials?: string;\n\n  /**\n   * An optional avatar image.\n   */\n  @Prop() src?: string;\n\n  /**\n   * An icon to be used instead of the initials.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop() urlTarget?: '_blank' | '_self';\n\n  @Watch('src')\n  onSrcChanged(value?: string): void {\n    if (value) {\n      loadImg(value).then(\n        () => (this.backgroundImage = `url(${value})`),\n        () => (this.backgroundImage = undefined)\n      );\n    } else {\n      this.backgroundImage = undefined;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.onSrcChanged(this.src);\n  }\n\n  componentWillRender(): void {\n    if (!this.label) {\n      log.warn('[A11y] Missing ARIA label on avatar', this);\n    }\n  }\n\n  render() {\n    if (this.url) {\n      return (\n        <a href={this.url} target={this.urlTarget} style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <span style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </span>\n      );\n    }\n  }\n\n  private get content() {\n    return !this.backgroundImage\n      ? [this.icon ? <cat-icon icon={this.icon} size={this.size}></cat-icon> : this.getInitials()]\n      : [];\n  }\n\n  private get cssStyle() {\n    return { 'background-image': this.backgroundImage };\n  }\n\n  private get cssClass() {\n    return {\n      avatar: true,\n      'avatar-round': this.round,\n      [`avatar-${this.size}`]: Boolean(this.size)\n    };\n  }\n\n  private getInitials(): string {\n    return (\n      this.initials ??\n      this.label\n        .split(' ')\n        .map(n => n[0])\n        .join('')\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-avatar.js","mappings":";;;;AAAA;;;;;;AAMA,MAAM,OAAO,GAAG,CAAC,GAAW;EAC1B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM;IACjC,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;IAC1B,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACxC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;GACjB,CAAC,CAAC;AACL,CAAC;;ACbD,MAAM,YAAY,GAAG,o5CAAo5C;;MCY55CA,WAAS;EALtB;;;;;;;IAWU,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,EAAE,CAAC;GA4FpB;EAhEC,YAAY,CAAC,KAAc;IACzB,IAAI,KAAK,EAAE;MACT,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CACjB,OAAO,IAAI,CAAC,eAAe,GAAG,OAAO,KAAK,GAAG,CAAC,EAC9C,OAAO,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC,CACzC,CAAC;KACH;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;KAClC;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC7B;EAED,mBAAmB;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACfC,QAAG,CAAC,IAAI,CAAC,qCAAqC,EAAE,IAAI,CAAC,CAAC;KACvD;GACF;EAED,MAAM;IACJ,IAAI,IAAI,CAAC,GAAG,EAAE;MACZ,QACE,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IAC1G,IAAI,CAAC,OAAO,CACX,EACJ;KACH;SAAM;MACL,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IACrE,IAAI,CAAC,OAAO,CACR,EACP;KACH;GACF;EAED,IAAY,OAAO;IACjB,OAAO,CAAC,IAAI,CAAC,eAAe;QACxB,CAAC,IAAI,CAAC,IAAI,GAAG,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC1F,EAAE,CAAC;GACR;EAED,IAAY,QAAQ;IAClB,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;GACrD;EAED,IAAY,QAAQ;IAClB,OAAO;MACL,MAAM,EAAE,IAAI;MACZ,cAAc,EAAE,IAAI,CAAC,KAAK;MAC1B,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;KAC5C,CAAC;GACH;EAEO,WAAW;;IACjB,QACE,MAAA,IAAI,CAAC,QAAQ,mCACb,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE;OACd,KAAK,CAAC,GAAG,CAAC;OACV,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;OACd,IAAI,CAAC,EAAE,CAAC,EACX;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAvatar","log"],"sources":["./src/utils/load-img.ts","./src/components/cat-avatar/cat-avatar.scss?tag=cat-avatar&encapsulation=shadow","./src/components/cat-avatar/cat-avatar.tsx"],"sourcesContent":["/**\n * Loads an image and wraps the result in a promise.\n *\n * @param src the image URL\n * @returns a promise\n */\nconst loadImg = (src: string): Promise<Event> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener('load', resolve);\n    image.addEventListener('error', reject);\n    image.src = src;\n  });\n};\n\nexport default loadImg;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  /**\n   * @prop --cat-avatar-bg: The background color of the avatar.\n   * @prop --cat-avatar-fill: The text color of the avatar.\n   * @prop --cat-avatar-size: The size of the avatar.\n   * @prop --cat-avatar-font-size: The font size of the avatar.\n   */\n  display: inline-block;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('m');\n  text-decoration: inherit;\n  color: var(--cat-avatar-fill, cat-token('color.ui.font.avatar'));\n  background-color: var(--cat-avatar-bg, cat-token('color.ui.background.avatar'));\n  background-size: cover;\n  background-position: center;\n  white-space: nowrap;\n  overflow: hidden;\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.avatar-round {\n  border-radius: 50%;\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .avatar-#{$size} {\n    width: var(--cat-avatar-size, cat-size($size));\n    height: var(--cat-avatar-size, cat-size($size));\n    line-height: var(--cat-avatar-size, cat-size($size));\n    font-size: var(--cat-avatar-font-size, cat-body-font-size($fontSize));\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 's');\n@include size('m', 'm');\n@include size('l', 'l');\n@include size('xl', 'xl');\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport loadImg from '../../utils/load-img';\n\n/**\n * Avatars are used to represent a person or object.\n */\n@Component({\n  tag: 'cat-avatar',\n  styleUrl: 'cat-avatar.scss',\n  shadow: true\n})\nexport class CatAvatar {\n  @State() backgroundImage?: string;\n\n  /**\n   * The size of the avatar.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round avatar edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The label of the avatar.\n   */\n  @Prop() label = '';\n\n  /**\n   * Custom initials for the avatar.\n   */\n  @Prop() initials?: string;\n\n  /**\n   * An optional avatar image.\n   */\n  @Prop() src?: string;\n\n  /**\n   * An icon to be used instead of the initials.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop() urlTarget?: '_blank' | '_self';\n\n  @Watch('src')\n  onSrcChanged(value?: string): void {\n    if (value) {\n      loadImg(value).then(\n        () => (this.backgroundImage = `url(${value})`),\n        () => (this.backgroundImage = undefined)\n      );\n    } else {\n      this.backgroundImage = undefined;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.onSrcChanged(this.src);\n  }\n\n  componentWillRender(): void {\n    if (!this.label) {\n      log.warn('[A11y] Missing ARIA label on avatar', this);\n    }\n  }\n\n  render() {\n    if (this.url) {\n      return (\n        <a href={this.url} target={this.urlTarget} style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <span style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </span>\n      );\n    }\n  }\n\n  private get content() {\n    return !this.backgroundImage\n      ? [this.icon ? <cat-icon icon={this.icon} size={this.size}></cat-icon> : this.getInitials()]\n      : [];\n  }\n\n  private get cssStyle() {\n    return { 'background-image': this.backgroundImage };\n  }\n\n  private get cssClass() {\n    return {\n      avatar: true,\n      'avatar-round': this.round,\n      [`avatar-${this.size}`]: Boolean(this.size)\n    };\n  }\n\n  private getInitials(): string {\n    return (\n      this.initials ??\n      (this.label ?? '')\n        .split(' ')\n        .map(n => n[0])\n        .join('')\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-i18n-registry.js

@@ -2,8 +2,8 @@ import { l as loglevel } from './loglevel.js';
 
 class CatI18nRegistry {
   constructor() {
-    this.lang = 'en';
-    this.messages = new Map();
+    this._locale = 'en';
+    this._dicts = new Map();
     // hide constructor
   }
   static getInstance() {
@@ -12,45 +12,39 @@ class CatI18nRegistry {
     }
     return CatI18nRegistry.instance;
   }
-  getLanguage() {
-    return this.lang;
-  }
-  setLanguage(lang) {
-    this.lang = lang;
-  }
-  getMessage(key) {
-    var _a;
-    const message = (_a = this.messages.get(this.lang)) === null || _a === void 0 ? void 0 : _a.get(key);
-    if (!message) {
-      loglevel.error(`[CatI18nRegistry] Unknown message for lang ${this.lang}: ${key}`);
+  locale(locale) {
+    if (locale) {
+      this._locale = locale;
+      loglevel.info(`[CatI18nRegistry] Locale set to ${locale}`);
+      window.dispatchEvent(this.buildEvent('cat-i18n-locale', { locale }));
     }
-    return message;
-  }
-  addMessage(lang, key, message) {
-    this.getDict(lang).set(key, message);
-    loglevel.info(`[CatI18nRegistry] Added message for lang ${lang}: ${key}`);
-    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, key }));
-    return this;
+    return this._locale;
   }
-  addMessages(lang, i18n) {
-    const dict = this.getDict(lang);
+  register(locale, i18n) {
+    const dict = this.getDict(locale);
     Object.entries(i18n).forEach(([key, message]) => dict.set(key, message));
-    loglevel.info(`[CatI18nRegistry] Added message for lang ${lang}: ${Object.keys(i18n).concat(', ')}`);
-    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, keys: Object.keys(i18n) }));
-    return this;
+    loglevel.info(`[CatI18nRegistry] Registered messages for ${locale}`, i18n);
+    window.dispatchEvent(this.buildEvent('cat-i18n-register', { i18n }));
   }
-  removeMessage(lang, key) {
-    this.getDict(lang).delete(key);
-    loglevel.info(`[CatI18nRegistry] Removed message for lang ${lang}: ${key}`);
-    window.dispatchEvent(this.buildEvent('cat-i18n-removed', { lang, key }));
-    return this;
+  clear(locale) {
+    if (locale) {
+      this.getDict(locale).clear();
+      loglevel.info(`[CatI18nRegistry] Cleared messages for ${locale}`);
+      window.dispatchEvent(this.buildEvent('cat-i18n-clear', { locale }));
+    }
+    else {
+      this._dicts.clear();
+      loglevel.info(`[CatI18nRegistry] Cleared messages`);
+      window.dispatchEvent(this.buildEvent('cat-i18n-clear'));
+    }
   }
-  removeMessages(lang, keys) {
-    const dict = this.getDict(lang);
-    keys.forEach(key => dict.delete(key));
-    loglevel.info(`[CatI18nRegistry] Removed messages for lang ${lang}: ${keys.concat(', ')}`);
-    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, keys }));
-    return this;
+  t(key, params) {
+    var _a;
+    const message = (_a = this._dicts.get(this._locale)) === null || _a === void 0 ? void 0 : _a.get(key);
+    if (!message) {
+      loglevel.error(`[CatI18nRegistry] Unknown message for ${this._locale}: ${key}`);
+    }
+    return (message === null || message === void 0 ? void 0 : message.replace(/{{\s*([-a-zA-Z._]+)\s*}}/g, (_match, key) => { var _a; return `${(_a = params === null || params === void 0 ? void 0 : params[key]) !== null && _a !== void 0 ? _a : ''}`; })) || '';
   }
   buildEvent(name, detail) {
     return new CustomEvent(name, {
@@ -60,12 +54,12 @@ class CatI18nRegistry {
     });
   }
   getDict(lang) {
-    let messages = this.messages.get(lang);
-    if (!messages) {
-      messages = new Map();
-      this.messages.set(lang, messages);
+    let dict = this._dicts.get(lang);
+    if (!dict) {
+      dict = new Map();
+      this._dicts.set(lang, dict);
     }
-    return messages;
+    return dict;
   }
 }
 

package/dist/components/cat-i18n-registry.js.map

@@ -1 +1 @@
-{"file":"cat-i18n-registry.js","mappings":"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","names":["log"],"sources":["./src/components/cat-i18n/cat-i18n-registry.ts"],"sourcesContent":["import log from 'loglevel';\n\nexport class CatI18nRegistry {\n  private static instance: CatI18nRegistry;\n\n  private lang = 'en';\n  private readonly messages: Map<string, Map<string, string>> = new Map();\n\n  private constructor() {\n    // hide constructor\n  }\n\n  static getInstance(): CatI18nRegistry {\n    if (!CatI18nRegistry.instance) {\n      CatI18nRegistry.instance = new CatI18nRegistry();\n    }\n    return CatI18nRegistry.instance;\n  }\n\n  getLanguage(): string {\n    return this.lang;\n  }\n\n  setLanguage(lang: string): void {\n    this.lang = lang;\n  }\n\n  getMessage(key: string): string | undefined {\n    const message = this.messages.get(this.lang)?.get(key);\n    if (!message) {\n      log.error(`[CatI18nRegistry] Unknown message for lang ${this.lang}: ${key}`);\n    }\n    return message;\n  }\n\n  addMessage(lang: string, key: string, message: string): CatI18nRegistry {\n    this.getDict(lang).set(key, message);\n    log.info(`[CatI18nRegistry] Added message for lang ${lang}: ${key}`);\n    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, key }));\n    return this;\n  }\n\n  addMessages(lang: string, i18n: { [key: string]: string }): CatI18nRegistry {\n    const dict = this.getDict(lang);\n    Object.entries(i18n).forEach(([key, message]) => dict.set(key, message));\n    log.info(`[CatI18nRegistry] Added message for lang ${lang}: ${Object.keys(i18n).concat(', ')}`);\n    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, keys: Object.keys(i18n) }));\n    return this;\n  }\n\n  removeMessage(lang: string, key: string): CatI18nRegistry {\n    this.getDict(lang).delete(key);\n    log.info(`[CatI18nRegistry] Removed message for lang ${lang}: ${key}`);\n    window.dispatchEvent(this.buildEvent('cat-i18n-removed', { lang, key }));\n    return this;\n  }\n\n  removeMessages(lang: string, keys: string[]): CatI18nRegistry {\n    const dict = this.getDict(lang);\n    keys.forEach(key => dict.delete(key));\n    log.info(`[CatI18nRegistry] Removed messages for lang ${lang}: ${keys.concat(', ')}`);\n    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, keys }));\n    return this;\n  }\n\n  private buildEvent<T>(name: string, detail?: T) {\n    return new CustomEvent(name, {\n      bubbles: true,\n      composed: true,\n      detail\n    });\n  }\n\n  private getDict(lang: string) {\n    let messages = this.messages.get(lang);\n    if (!messages) {\n      messages = new Map();\n      this.messages.set(lang, messages);\n    }\n    return messages;\n  }\n}\n"],"version":3}
+{"file":"cat-i18n-registry.js","mappings":";;MAEa,eAAe;EAM1B;IAHQ,YAAO,GAAG,IAAI,CAAC;IACN,WAAM,GAAqC,IAAI,GAAG,EAAE,CAAC;;GAIrE;EAED,OAAO,WAAW;IAChB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE;MAC7B,eAAe,CAAC,QAAQ,GAAG,IAAI,eAAe,EAAE,CAAC;KAClD;IACD,OAAO,eAAe,CAAC,QAAQ,CAAC;GACjC;EAED,MAAM,CAAC,MAAe;IACpB,IAAI,MAAM,EAAE;MACV,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;MACtBA,QAAG,CAAC,IAAI,CAAC,mCAAmC,MAAM,EAAE,CAAC,CAAC;MACtD,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;KACtE;IACD,OAAO,IAAI,CAAC,OAAO,CAAC;GACrB;EAED,QAAQ,CAAC,MAAc,EAAE,IAA+B;IACtD,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAClC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IACzEA,QAAG,CAAC,IAAI,CAAC,6CAA6C,MAAM,EAAE,EAAE,IAAI,CAAC,CAAC;IACtE,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,mBAAmB,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;GACtE;EAED,KAAK,CAAC,MAAe;IACnB,IAAI,MAAM,EAAE;MACV,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;MAC7BA,QAAG,CAAC,IAAI,CAAC,0CAA0C,MAAM,EAAE,CAAC,CAAC;MAC7D,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;KACrE;SAAM;MACL,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;MACpBA,QAAG,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;MAC/C,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC;KACzD;GACF;EAED,CAAC,CAAC,GAAW,EAAE,MAA2C;;IACxD,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,0CAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACxD,IAAI,CAAC,OAAO,EAAE;MACZA,QAAG,CAAC,KAAK,CAAC,yCAAyC,IAAI,CAAC,OAAO,KAAK,GAAG,EAAE,CAAC,CAAC;KAC5E;IACD,OAAO,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,2BAA2B,EAAE,CAAC,MAAM,EAAE,GAAG,eAAK,OAAA,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,GAAG,CAAC,mCAAI,EAAE,EAAE,CAAA,EAAA,CAAC,KAAI,EAAE,CAAC;GACvG;EAEO,UAAU,CAAI,IAAY,EAAE,MAAU;IAC5C,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;MAC3B,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,IAAI;MACd,MAAM;KACP,CAAC,CAAC;GACJ;EAEO,OAAO,CAAC,IAAY;IAC1B,IAAI,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACjC,IAAI,CAAC,IAAI,EAAE;MACT,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;MACjB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KAC7B;IACD,OAAO,IAAI,CAAC;GACb;;;;;","names":["log"],"sources":["./src/components/cat-i18n/cat-i18n-registry.ts"],"sourcesContent":["import log from 'loglevel';\n\nexport class CatI18nRegistry {\n  private static instance: CatI18nRegistry;\n\n  private _locale = 'en';\n  private readonly _dicts: Map<string, Map<string, string>> = new Map();\n\n  private constructor() {\n    // hide constructor\n  }\n\n  static getInstance(): CatI18nRegistry {\n    if (!CatI18nRegistry.instance) {\n      CatI18nRegistry.instance = new CatI18nRegistry();\n    }\n    return CatI18nRegistry.instance;\n  }\n\n  locale(locale?: string): string {\n    if (locale) {\n      this._locale = locale;\n      log.info(`[CatI18nRegistry] Locale set to ${locale}`);\n      window.dispatchEvent(this.buildEvent('cat-i18n-locale', { locale }));\n    }\n    return this._locale;\n  }\n\n  register(locale: string, i18n: { [key: string]: string }): void {\n    const dict = this.getDict(locale);\n    Object.entries(i18n).forEach(([key, message]) => dict.set(key, message));\n    log.info(`[CatI18nRegistry] Registered messages for ${locale}`, i18n);\n    window.dispatchEvent(this.buildEvent('cat-i18n-register', { i18n }));\n  }\n\n  clear(locale?: string): void {\n    if (locale) {\n      this.getDict(locale).clear();\n      log.info(`[CatI18nRegistry] Cleared messages for ${locale}`);\n      window.dispatchEvent(this.buildEvent('cat-i18n-clear', { locale }));\n    } else {\n      this._dicts.clear();\n      log.info(`[CatI18nRegistry] Cleared messages`);\n      window.dispatchEvent(this.buildEvent('cat-i18n-clear'));\n    }\n  }\n\n  t(key: string, params?: { [key: string]: string | number }): string {\n    const message = this._dicts.get(this._locale)?.get(key);\n    if (!message) {\n      log.error(`[CatI18nRegistry] Unknown message for ${this._locale}: ${key}`);\n    }\n    return message?.replace(/{{\\s*([-a-zA-Z._]+)\\s*}}/g, (_match, key) => `${params?.[key] ?? ''}`) || '';\n  }\n\n  private buildEvent<T>(name: string, detail?: T) {\n    return new CustomEvent(name, {\n      bubbles: true,\n      composed: true,\n      detail\n    });\n  }\n\n  private getDict(lang: string) {\n    let dict = this._dicts.get(lang);\n    if (!dict) {\n      dict = new Map();\n      this._dicts.set(lang, dict);\n    }\n    return dict;\n  }\n}\n"],"version":3}

package/dist/components/cat-icon.js

@@ -1,4 +1,4 @@
-import { C as CatIcon$1, d as defineCustomElement$1 } from './cat-icon2.js';
+import { a as CatIcon$1, d as defineCustomElement$1 } from './cat-icon2.js';
 
 const CatIcon = CatIcon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/cat-icon2.js

@@ -1,5 +1,59 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { C as CatIconRegistry } from './cat-icon-registry.js';
+import { l as loglevel } from './loglevel.js';
+
+class CatIconRegistry {
+  constructor() {
+    this.icons = new Map();
+    // hide constructor
+  }
+  static getInstance() {
+    if (!CatIconRegistry.instance) {
+      CatIconRegistry.instance = new CatIconRegistry();
+    }
+    return CatIconRegistry.instance;
+  }
+  getIcon(name, setName) {
+    const icon = this.icons.get(this.buildName(name, setName));
+    if (!icon) {
+      loglevel.error(`[CatIconRegistry] Unknown icon${setName ? ` in set ${setName}` : ''}: ${name}`);
+    }
+    return icon;
+  }
+  addIcon(name, data, setName) {
+    this.icons.set(this.buildName(name, setName), data);
+    loglevel.info(`[CatIconRegistry] Added icon${setName ? ` to set ${setName}` : ''}: ${name}`);
+    window.dispatchEvent(this.buildEvent('cat-icon-added', { name, setName }));
+    return this;
+  }
+  addIcons(icons, setName) {
+    Object.entries(icons).forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));
+    loglevel.info(`[CatIconRegistry] Added icons${setName ? ` to set ${setName}` : ''}: ${Object.keys(icons).concat(', ')}`);
+    window.dispatchEvent(this.buildEvent('cat-icons-added', { names: Object.keys(icons), setName }));
+    return this;
+  }
+  removeIcon(name, setName) {
+    this.icons.delete(this.buildName(name, setName));
+    loglevel.info(`[CatIconRegistry] Removed icon${setName ? ` from set ${setName}` : ''}: ${name}`);
+    window.dispatchEvent(this.buildEvent('cat-icon-removed', { name, setName }));
+    return this;
+  }
+  removeIcons(names, setName) {
+    names.forEach(name => this.icons.delete(this.buildName(name, setName)));
+    loglevel.info(`[CatIconRegistry] Removed icons${setName ? ` from set ${setName}` : ''}: ${names.concat(', ')}`);
+    window.dispatchEvent(this.buildEvent('cat-icons-removed', { names, setName }));
+    return this;
+  }
+  buildName(name, setName) {
+    return setName ? `${setName}:name` : name;
+  }
+  buildEvent(name, detail) {
+    return new CustomEvent(name, {
+      bubbles: true,
+      composed: true,
+      detail
+    });
+  }
+}
 
 const catIconCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}span{display:inline-flex}svg{fill:currentColor;stroke:none;transform-origin:center center;height:1em;width:calc(var(--cat-icon-ratio, 1) * 1em)}.icon-xs svg{font-size:0.75rem}.icon-s svg{font-size:1rem}.icon-m svg{font-size:1.25rem}.icon-l svg{font-size:1.5rem}.icon-xl svg{font-size:1.75rem}";
 
@@ -44,6 +98,6 @@ function defineCustomElement() {
   } });
 }
 
-export { CatIcon as C, defineCustomElement as d };
+export { CatIconRegistry as C, CatIcon as a, defineCustomElement as d };
 
 //# sourceMappingURL=cat-icon2.js.map

package/dist/components/cat-icon2.js.map

@@ -1 +1 @@
-{"file":"cat-icon2.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,mbAAmb;;MCczb,OAAO;EALpB;;;;IAMmB,iBAAY,GAAG,eAAe,CAAC,WAAW,EAAE,CAAC;;;;IAKtD,SAAI,GAAG,EAAE,CAAC;;;;IAKV,SAAI,GAA6C,GAAG,CAAC;GAsB9D;EAdC,MAAM;IACJ,QACE,YACE,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,gBACnC,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,MAAM,EAC3C,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ;OAC9C,GACK,EACR;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/cat-icon/cat-icon.scss?tag=cat-icon&encapsulation=shadow","./src/components/cat-icon/cat-icon.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  /**\n   * @prop --cat-icon-ratio: The aspect ratio of the avatar.\n   */\n  display: inline-flex;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nspan {\n  display: inline-flex;\n}\n\nsvg {\n  fill: currentColor;\n  stroke: none;\n  transform-origin: center center;\n  height: 1em;\n  width: calc(var(--cat-icon-ratio, 1) * 1em);\n}\n\n// ----- size\n\n@mixin size($size) {\n  .icon-#{$size} svg {\n    font-size: cat-size($size) * 0.5;\n  }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n","import { Component, h, Prop } from '@stencil/core';\nimport { CatIconRegistry } from './cat-icon-registry';\n\n/**\n * Icons are used to provide additional meaning or in places where text label\n * doesn't fit.\n *\n * @part icon - The span element wrapping the SVG icon.\n */\n@Component({\n  tag: 'cat-icon',\n  styleUrl: 'cat-icon.scss',\n  shadow: true\n})\nexport class CatIcon {\n  private readonly iconRegistry = CatIconRegistry.getInstance();\n\n  /**\n   * The name of the icon.\n   */\n  @Prop() icon = '';\n\n  /**\n   * The size of the icon.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the icon that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <span\n        innerHTML={this.iconRegistry.getIcon(this.icon)}\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        part=\"icon\"\n        class={{\n          icon: true,\n          [`icon-${this.size}`]: this.size !== 'inline'\n        }}\n      ></span>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-icon2.js","mappings":"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","names":["log"],"sources":["./src/components/cat-icon/cat-icon-registry.ts","./src/components/cat-icon/cat-icon.scss?tag=cat-icon&encapsulation=shadow","./src/components/cat-icon/cat-icon.tsx"],"sourcesContent":["import log from 'loglevel';\n\nexport class CatIconRegistry {\n  private static instance: CatIconRegistry;\n\n  private readonly icons: Map<string, string> = new Map();\n\n  private constructor() {\n    // hide constructor\n  }\n\n  static getInstance(): CatIconRegistry {\n    if (!CatIconRegistry.instance) {\n      CatIconRegistry.instance = new CatIconRegistry();\n    }\n    return CatIconRegistry.instance;\n  }\n\n  getIcon(name: string, setName?: string): string | undefined {\n    const icon = this.icons.get(this.buildName(name, setName));\n    if (!icon) {\n      log.error(`[CatIconRegistry] Unknown icon${setName ? ` in set ${setName}` : ''}: ${name}`);\n    }\n    return icon;\n  }\n\n  addIcon(name: string, data: string, setName?: string): CatIconRegistry {\n    this.icons.set(this.buildName(name, setName), data);\n    log.info(`[CatIconRegistry] Added icon${setName ? ` to set ${setName}` : ''}: ${name}`);\n    window.dispatchEvent(this.buildEvent('cat-icon-added', { name, setName }));\n    return this;\n  }\n\n  addIcons(icons: { [name: string]: string }, setName?: string): CatIconRegistry {\n    Object.entries(icons).forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));\n    log.info(`[CatIconRegistry] Added icons${setName ? ` to set ${setName}` : ''}: ${Object.keys(icons).concat(', ')}`);\n    window.dispatchEvent(this.buildEvent('cat-icons-added', { names: Object.keys(icons), setName }));\n    return this;\n  }\n\n  removeIcon(name: string, setName?: string): CatIconRegistry {\n    this.icons.delete(this.buildName(name, setName));\n    log.info(`[CatIconRegistry] Removed icon${setName ? ` from set ${setName}` : ''}: ${name}`);\n    window.dispatchEvent(this.buildEvent('cat-icon-removed', { name, setName }));\n    return this;\n  }\n\n  removeIcons(names: string[], setName?: string): CatIconRegistry {\n    names.forEach(name => this.icons.delete(this.buildName(name, setName)));\n    log.info(`[CatIconRegistry] Removed icons${setName ? ` from set ${setName}` : ''}: ${names.concat(', ')}`);\n    window.dispatchEvent(this.buildEvent('cat-icons-removed', { names, setName }));\n    return this;\n  }\n\n  private buildName(name: string, setName?: string) {\n    return setName ? `${setName}:name` : name;\n  }\n\n  private buildEvent<T>(name: string, detail?: T) {\n    return new CustomEvent(name, {\n      bubbles: true,\n      composed: true,\n      detail\n    });\n  }\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  /**\n   * @prop --cat-icon-ratio: The aspect ratio of the avatar.\n   */\n  display: inline-flex;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nspan {\n  display: inline-flex;\n}\n\nsvg {\n  fill: currentColor;\n  stroke: none;\n  transform-origin: center center;\n  height: 1em;\n  width: calc(var(--cat-icon-ratio, 1) * 1em);\n}\n\n// ----- size\n\n@mixin size($size) {\n  .icon-#{$size} svg {\n    font-size: cat-size($size) * 0.5;\n  }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n","import { Component, h, Prop } from '@stencil/core';\nimport { CatIconRegistry } from './cat-icon-registry';\n\n/**\n * Icons are used to provide additional meaning or in places where text label\n * doesn't fit.\n *\n * @part icon - The span element wrapping the SVG icon.\n */\n@Component({\n  tag: 'cat-icon',\n  styleUrl: 'cat-icon.scss',\n  shadow: true\n})\nexport class CatIcon {\n  private readonly iconRegistry = CatIconRegistry.getInstance();\n\n  /**\n   * The name of the icon.\n   */\n  @Prop() icon = '';\n\n  /**\n   * The size of the icon.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the icon that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <span\n        innerHTML={this.iconRegistry.getIcon(this.icon)}\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        part=\"icon\"\n        class={{\n          icon: true,\n          [`icon-${this.size}`]: this.size !== 'inline'\n        }}\n      ></span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-input.js

@@ -83,13 +83,13 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.value = '';
   }
   render() {
-    return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.getMessage('input.optional'), ")"))))), h("div", { class: {
+    return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.t('input.optional'), ")"))))), h("div", { class: {
         'input-wrapper': true,
         'input-round': this.round,
         'input-disabled': this.disabled
       }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l" }), h("div", { class: "input-inner-wrapper" }, h("input", { ref: el => (this.input = el), id: this.id, class: {
         'has-clearable': this.clearable && !this.disabled
-      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.max, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": this.i18n.getMessage('input.clear'), onClick: this.clear.bind(this) }))), this.icon && this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hintSection));
+      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.max, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": this.i18n.t('input.clear'), onClick: this.clear.bind(this) }))), this.icon && this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');

package/dist/components/cat-input.js.map

@@ -1 +1 @@
-{"file":"cat-input.js","mappings":"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","names":["CatInput","log"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  @include cat-body('m');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.input-wrapper {\n  display: flex;\n  align-items: stretch;\n  gap: 0.75rem;\n  padding: 0 0.75rem;\n  height: cat-size('m');\n  overflow: hidden;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\n  box-shadow: 0 0 0 1px cat-token('color.ui.border.input');\n  transition: box-shadow cat-token('time.transition.s') linear;\n\n  &.input-round {\n    border-radius: 10rem;\n  }\n\n  &.input-disabled {\n    background: cat-token('color.ui.background.inputDisabled');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &:not(.input-disabled) {\n    &:hover {\n      box-shadow: 0 0 0 2px cat-token('color.ui.border.input');\n    }\n\n    &:focus-within {\n      outline: 2px solid cat-token('color.ui.border.focus');\n    }\n  }\n}\n\nlabel {\n  align-self: flex-start;\n\n  &.hidden {\n    @include cat-visually-hidden;\n  }\n}\n\n.input-optional {\n  margin-left: 0.25rem;\n  @include cat-body('xs');\n  color: cat-token('color.ui.font.muted');\n}\n\n.text-prefix,\n.text-suffix {\n  display: inline-flex;\n  align-items: center;\n  @include cat-select(none);\n}\n\n.text-prefix {\n  border-right: 1px solid cat-token('color.ui.border.input');\n  padding-right: 0.75rem;\n}\n\n.text-suffix {\n  border-left: 1px solid cat-token('color.ui.border.input');\n  padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n  align-self: center;\n}\n\n.input-inner-wrapper {\n  display: flex;\n  position: relative;\n  flex: 1 1 auto;\n}\n\ninput {\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  min-width: 0;\n  border: none;\n  outline: none;\n  background: none;\n\n  .input-disabled & {\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &.has-clearable {\n    padding-right: calc(cat-size('s') - 0.5rem);\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n}\n\n.clearable {\n  position: absolute;\n  top: calc(50% - cat-size('s') / 2);\n  right: -0.5rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n  tag: 'cat-input',\n  styleUrl: 'cat-input.scss',\n  shadow: true\n})\nexport class CatInput {\n  private readonly i18n = CatI18nRegistry.getInstance();\n  private readonly id = `cat-input-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum value for numeric values.\n   */\n  @Prop() max?: number;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum value for numeric values.\n   */\n  @Prop() min?: number;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name = '';\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Use round input edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Type of form control.\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' = 'text';\n\n  /**\n   * The initial value of the control.\n   */\n  @Prop({ mutable: true }) value?: string | number;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on input', this);\n    }\n  }\n\n  /**\n   * Sets focus on the input. Use this method instead of `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n  }\n\n  render() {\n    return (\n      <Host>\n        {(this.hasSlottedLabel || this.label) && (\n          <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n            <span part=\"label\">\n              {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n              {!this.required && (\n                <span class=\"input-optional\" aria-hidden=\"true\">\n                  ({this.i18n.getMessage('input.optional')})\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <div\n          class={{\n            'input-wrapper': true,\n            'input-round': this.round,\n            'input-disabled': this.disabled\n          }}\n          onClick={() => this.input.focus()}\n        >\n          {this.textPrefix && (\n            <span class=\"text-prefix\" part=\"prefix\">\n              {this.textPrefix}\n            </span>\n          )}\n          {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n          <div class=\"input-inner-wrapper\">\n            <input\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.id}\n              class={{\n                'has-clearable': this.clearable && !this.disabled\n              }}\n              autocomplete={this.autoComplete}\n              disabled={this.disabled}\n              max={this.max}\n              maxlength={this.maxLength}\n              min={this.max}\n              minlength={this.minLength}\n              name={this.name}\n              placeholder={this.placeholder}\n              readonly={this.readonly}\n              required={this.required}\n              type={this.type}\n              value={this.value}\n              onInput={this.onInput.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            ></input>\n            {this.clearable && !this.disabled && this.value && (\n              <cat-button\n                class=\"clearable\"\n                icon=\"cross-circle-outlined\"\n                icon-only=\"true\"\n                size=\"s\"\n                variant=\"text\"\n                a11y-label={this.i18n.getMessage('input.clear')}\n                onClick={this.clear.bind(this)}\n              ></cat-button>\n            )}\n          </div>\n          {this.icon && this.iconRight && <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>}\n          {this.textSuffix && (\n            <span class=\"text-suffix\" part=\"suffix\">\n              {this.textSuffix}\n            </span>\n          )}\n        </div>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.value = this.input.value;\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}
+{"file":"cat-input.js","mappings":"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","names":["CatInput","log"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  @include cat-body('m');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.input-wrapper {\n  display: flex;\n  align-items: stretch;\n  gap: 0.75rem;\n  padding: 0 0.75rem;\n  height: cat-size('m');\n  overflow: hidden;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\n  box-shadow: 0 0 0 1px cat-token('color.ui.border.input');\n  transition: box-shadow cat-token('time.transition.s') linear;\n\n  &.input-round {\n    border-radius: 10rem;\n  }\n\n  &.input-disabled {\n    background: cat-token('color.ui.background.inputDisabled');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &:not(.input-disabled) {\n    &:hover {\n      box-shadow: 0 0 0 2px cat-token('color.ui.border.input');\n    }\n\n    &:focus-within {\n      outline: 2px solid cat-token('color.ui.border.focus');\n    }\n  }\n}\n\nlabel {\n  align-self: flex-start;\n\n  &.hidden {\n    @include cat-visually-hidden;\n  }\n}\n\n.input-optional {\n  margin-left: 0.25rem;\n  @include cat-body('xs');\n  color: cat-token('color.ui.font.muted');\n}\n\n.text-prefix,\n.text-suffix {\n  display: inline-flex;\n  align-items: center;\n  @include cat-select(none);\n}\n\n.text-prefix {\n  border-right: 1px solid cat-token('color.ui.border.input');\n  padding-right: 0.75rem;\n}\n\n.text-suffix {\n  border-left: 1px solid cat-token('color.ui.border.input');\n  padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n  align-self: center;\n}\n\n.input-inner-wrapper {\n  display: flex;\n  position: relative;\n  flex: 1 1 auto;\n}\n\ninput {\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  min-width: 0;\n  border: none;\n  outline: none;\n  background: none;\n\n  .input-disabled & {\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &.has-clearable {\n    padding-right: calc(cat-size('s') - 0.5rem);\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n}\n\n.clearable {\n  position: absolute;\n  top: calc(50% - cat-size('s') / 2);\n  right: -0.5rem;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n  tag: 'cat-input',\n  styleUrl: 'cat-input.scss',\n  shadow: true\n})\nexport class CatInput {\n  private readonly i18n = CatI18nRegistry.getInstance();\n  private readonly id = `cat-input-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum value for numeric values.\n   */\n  @Prop() max?: number;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum value for numeric values.\n   */\n  @Prop() min?: number;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name = '';\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Use round input edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Type of form control.\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' = 'text';\n\n  /**\n   * The initial value of the control.\n   */\n  @Prop({ mutable: true }) value?: string | number;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on input', this);\n    }\n  }\n\n  /**\n   * Sets focus on the input. Use this method instead of `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n  }\n\n  render() {\n    return (\n      <Host>\n        {(this.hasSlottedLabel || this.label) && (\n          <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n            <span part=\"label\">\n              {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n              {!this.required && (\n                <span class=\"input-optional\" aria-hidden=\"true\">\n                  ({this.i18n.t('input.optional')})\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <div\n          class={{\n            'input-wrapper': true,\n            'input-round': this.round,\n            'input-disabled': this.disabled\n          }}\n          onClick={() => this.input.focus()}\n        >\n          {this.textPrefix && (\n            <span class=\"text-prefix\" part=\"prefix\">\n              {this.textPrefix}\n            </span>\n          )}\n          {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n          <div class=\"input-inner-wrapper\">\n            <input\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.id}\n              class={{\n                'has-clearable': this.clearable && !this.disabled\n              }}\n              autocomplete={this.autoComplete}\n              disabled={this.disabled}\n              max={this.max}\n              maxlength={this.maxLength}\n              min={this.max}\n              minlength={this.minLength}\n              name={this.name}\n              placeholder={this.placeholder}\n              readonly={this.readonly}\n              required={this.required}\n              type={this.type}\n              value={this.value}\n              onInput={this.onInput.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            ></input>\n            {this.clearable && !this.disabled && this.value && (\n              <cat-button\n                class=\"clearable\"\n                icon=\"cross-circle-outlined\"\n                icon-only=\"true\"\n                size=\"s\"\n                variant=\"text\"\n                a11y-label={this.i18n.t('input.clear')}\n                onClick={this.clear.bind(this)}\n              ></cat-button>\n            )}\n          </div>\n          {this.icon && this.iconRight && <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>}\n          {this.textSuffix && (\n            <span class=\"text-suffix\" part=\"suffix\">\n              {this.textSuffix}\n            </span>\n          )}\n        </div>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.value = this.input.value;\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}