npm - @haiilo/catalyst - Versions diffs - 0.13.0 → 0.14.2 - Mend

@haiilo/catalyst 0.13.0 → 0.14.2

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

Files changed (79) hide show

package/dist/collection/components/cat-alert/cat-alert.js CHANGED Viewed

@@ -7,10 +7,21 @@ import { Component, h, Host, Prop } from '@stencil/core';
  */
 export class CatAlert {
   constructor() {
+    this.mapIcon = new Map([
+      ['primary', 'star-circle-filled'],
+      ['secondary', 'clock-filled'],
+      ['success', 'check-circle-filled'],
+      ['warning', 'danger-filled'],
+      ['danger', 'cross-circle-filled']
+    ]);
     /**
      * The color palette of the alert.
      */
     this.color = 'primary';
+    /**
+     * Whether the icon of the alert is deactivated.
+     */
+    this.noIcon = false;
   }
   render() {
     return (h(Host, { tabindex: "0", role: this.role },
@@ -18,7 +29,9 @@ export class CatAlert {
           alert: true,
           [`alert-${this.color}`]: Boolean(this.color)
         } },
-        h("slot", null))));
+        !this.noIcon && h("cat-icon", { size: "l", icon: this.icon ? this.icon : this.mapIcon.get(this.color) }),
+        h("div", { class: "content" },
+          h("slot", null)))));
   }
   get role() {
     switch (this.color) {
@@ -55,6 +68,41 @@ export class CatAlert {
       "attribute": "color",
       "reflect": false,
       "defaultValue": "'primary'"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The name of an icon to be displayed in the alert."
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "noIcon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the icon of the alert is deactivated."
+      },
+      "attribute": "no-icon",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
 }

package/dist/collection/components/cat-alert/cat-alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-alert.js","sourceRoot":"","sources":["../../../src/components/cat-alert/cat-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;GAKG;AAMH,MAAM,OAAO,QAAQ;EALrB;~~IAME~~;;OAEG;IACK,UAAK,GAA+D,SAAS,CAAC;~~GA2BvF~~;~~EAzBC~~,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI;MAChC,WACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;UACL,KAAK,EAAE,IAAI;UACX,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;SAC7C;~~QAED~~,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;EAED,IAAY,IAAI;IACd,QAAQ,IAAI,CAAC,KAAK,EAAE;MAClB,KAAK,QAAQ,CAAC;MACd,KAAK,SAAS;QACZ,OAAO,OAAO,CAAC;MACjB;QACE,OAAO,QAAQ,CAAC;KACnB;EACH,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/*\n Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n \n @part alert - The alert element.\n /\n@Component({\n tag: 'cat-alert',\n styleUrl: 'cat-alert.scss',\n shadow: true\n})\nexport class CatAlert {\n /\n The color palette of the alert.\n */\n @Prop() color: 'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' = 'primary';\n\n render() {\n return (\n <Host tabindex=\"0\" role={this.role}>\n <div\n part=\"alert\"\n class={{\n alert: true,\n [`alert-${this.color}`]: Boolean(this.color)\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n\n private get role() {\n switch (this.color) {\n case 'danger':\n case 'warning':\n return 'alert';\n default:\n return 'status';\n }\n }\n}\n"]}
1	+ {"version":3,"file":"cat-alert.js","sourceRoot":"","sources":["../../../src/components/cat-alert/cat-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;GAKG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAMmB,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,WAAW,EAAE,cAAc,CAAC;MAC7B,CAAC,SAAS,EAAE,qBAAqB,CAAC;MAClC,CAAC,SAAS,EAAE,eAAe,CAAC;MAC5B,CAAC,QAAQ,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IAEH;;OAEG;IACK,UAAK,GAA+D,SAAS,CAAC;IAOtF;;OAEG;IACK,WAAM,GAAG,KAAK,CAAC;GA8BxB;EA5BC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI;MAChC,WACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;UACL,KAAK,EAAE,IAAI;UACX,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;SAC7C;QAEA,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa;QAC3G,WAAK,KAAK,EAAC,SAAS;UAClB,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;EAED,IAAY,IAAI;IACd,QAAQ,IAAI,CAAC,KAAK,EAAE;MAClB,KAAK,QAAQ,CAAC;MACd,KAAK,SAAS;QACZ,OAAO,OAAO,CAAC;MACjB;QACE,OAAO,QAAQ,CAAC;KACnB;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/*\n Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n \n @part alert - The alert element.\n /\n@Component({\n tag: 'cat-alert',\n styleUrl: 'cat-alert.scss',\n shadow: true\n})\nexport class CatAlert {\n private readonly mapIcon: Map<string, string> = new Map([\n ['primary', 'star-circle-filled'],\n ['secondary', 'clock-filled'],\n ['success', 'check-circle-filled'],\n ['warning', 'danger-filled'],\n ['danger', 'cross-circle-filled']\n ]);\n\n /\n The color palette of the alert.\n /\n @Prop() color: 'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' = 'primary';\n\n /\n The name of an icon to be displayed in the alert.\n /\n @Prop() icon?: string;\n\n /\n Whether the icon of the alert is deactivated.\n */\n @Prop() noIcon = false;\n\n render() {\n return (\n <Host tabindex=\"0\" role={this.role}>\n <div\n part=\"alert\"\n class={{\n alert: true,\n [`alert-${this.color}`]: Boolean(this.color)\n }}\n >\n {!this.noIcon && <cat-icon size=\"l\" icon={this.icon ? this.icon : this.mapIcon.get(this.color)}></cat-icon>}\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n private get role() {\n switch (this.color) {\n case 'danger':\n case 'warning':\n return 'alert';\n default:\n return 'status';\n }\n }\n}\n"]}

package/dist/collection/components/cat-checkbox/cat-checkbox.js CHANGED Viewed

@@ -67,7 +67,7 @@ export class CatCheckbox {
   render() {
     return (h(Host, null,
       h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } },
-        h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }),
+        h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.value) : this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }),
         h("span", { class: "box", "aria-hidden": "true", part: "checkbox" },
           h("svg", { class: "check", viewBox: "0 0 12 10" },
             h("polyline", { points: "1.5 6 4.5 9 10.5 1" })),
@@ -81,7 +81,10 @@ export class CatCheckbox {
     return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
   onInput(event) {
-    this.value = this.input.value;
+    this.checked = this.input.checked;
+    if (!this.value || typeof this.value === 'boolean') {
+      this.value = this.checked;
+    }
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -101,7 +104,7 @@ export class CatCheckbox {
   static get properties() { return {
     "checked": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -225,11 +228,11 @@ export class CatCheckbox {
       "defaultValue": "false"
     },
     "value": {
-      "type": "string",
+      "type": "any",
       "mutable": true,
       "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
+        "original": "string | boolean",
+        "resolved": "boolean | string | undefined",
         "references": {}
       },
       "required": false,

package/dist/collection/components/cat-checkbox/cat-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-checkbox.js","sourceRoot":"","sources":["../../../src/components/cat-checkbox/cat-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;;;;;;GAQG;AAMH,MAAM,OAAO,WAAW;EALxB;IAMmB,OAAE,GAAG,gBAAgB,YAAY,EAAE,EAAE,CAAC;IAK9C,oBAAe,GAAG,KAAK,CAAC;IAEjC;;OAEG;~~IACK~~,YAAO,GAAG,KAAK,CAAC;~~IAExB~~;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAEzB;;OAEG;IACK,kBAAa,GAAG,KAAK,CAAC;IAE9B;;OAEG;IACK,UAAK,GAAG,EAAE,CAAC;IAEnB;;OAEG;IACK,gBAAW,GAAG,KAAK,CAAC;IAO5B;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAYzB;;OAEG;IACK,cAAS,GAAG,KAAK,CAAC;~~GAmG3B~~;~~EAlFC~~,gBAAgB;IACd,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,aAAa,EAAE;MACpC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;KACjC;EACH,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC1E,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACxC,GAAG,CAAC,KAAK,CAAC,uCAAuC,EAAE,IAAI,CAAC,CAAC;KAC1D;EACH,CAAC;EAED;;;;;KAKG;EAEH,KAAK,CAAC,QAAQ,CAAC,OAAsB;IACnC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,aACE,OAAO,EAAE,IAAI,CAAC,EAAE,EAChB,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;QAEpG,aACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,~~EACjB~~,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAC9B;QACF,YAAM,KAAK,EAAC,KAAK,iBAAa,MAAM,EAAC,IAAI,EAAC,UAAU;UAClD,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAC,WAAW;YACpC,gBAAU,MAAM,EAAC,oBAAoB,GAAY,CAC7C;UACN,WAAK,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW;YACnC,gBAAU,MAAM,EAAC,cAAc,GAAY,CACvC,CACD;QACP,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,CAAC,IAAI,CAAC,eAAe,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CAAC,IAAI,IAAI,CAAC,KAAK,CAC9D,CACD;MACP,IAAI,CAAC,WAAW,CACZ,CACR,CAAC;EACJ,CAAC;EAED,IAAY,WAAW;IACrB,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACzE,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAC/B,EAAC,WAAW,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,GAAI,CAC3F,CACF,CAAC;EACJ,CAAC;EAEO,OAAO,CAAC,KAAY;IAC1B,IAAI,CAAC,~~KAAK~~,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;~~IAC9B~~,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC7B,CAAC;EAEO,OAAO,CAAC,KAAiB;IAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAEO,MAAM,CAAC,KAAiB;IAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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';\n\nlet nextUniqueId = 0;\n\n/*\n Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n \n @slot hint - Optional hint element to be displayed with the checkbox.\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 checkbox - The checkbox element.\n * @part label - The label content.\n /\n@Component({\n tag: 'cat-checkbox',\n styleUrls: ['cat-checkbox.scss'],\n shadow: true\n})\nexport class CatCheckbox {\n private readonly id = `cat-checkbox-${nextUniqueId++}`;\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n /\n Checked state of the checkbox\n /\n @Prop() checked = false;\n\n /\n Disabled state of the checkbox\n /\n @Prop() disabled = false;\n\n /\n Indeterminate state of the checkbox\n /\n @Prop() indeterminate = false;\n\n /\n Label of the checkbox which is presented in the UI\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 The name of the input\n /\n @Prop() name?: string;\n\n /\n Required state of the checkbox\n /\n @Prop() required = false;\n\n /\n The value of the checkbox\n /\n @Prop({ mutable: true }) value?: string;\n\n /\n Optional hint text(s) to be displayed with the checkbox.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the checkbox.\n /\n @Prop() labelLeft = false;\n\n /\n Emitted when the checked status of the checkbox is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the checkbox received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the checkbox loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentDidLoad() {\n if (this.input && this.indeterminate) {\n this.input.indeterminate = true;\n }\n }\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 checkbox', this);\n }\n }\n\n /\n Sets focus on the checkbox. Use this method instead of `checkbox.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 render() {\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n >\n <input\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n />\n <span class=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n <svg class=\"check\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n </svg>\n <svg class=\"dash\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 5 10.5 5\"></polyline>\n </svg>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\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"]}
1	+ {"version":3,"file":"cat-checkbox.js","sourceRoot":"","sources":["../../../src/components/cat-checkbox/cat-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["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';\n\nlet nextUniqueId = 0;\n\n/*\n Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n \n @slot hint - Optional hint element to be displayed with the checkbox.\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 checkbox - The checkbox element.\n * @part label - The label content.\n /\n@Component({\n tag: 'cat-checkbox',\n styleUrls: ['cat-checkbox.scss'],\n shadow: true\n})\nexport class CatCheckbox {\n private readonly id = `cat-checkbox-${nextUniqueId++}`;\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n /\n Checked state of the checkbox\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Disabled state of the checkbox\n /\n @Prop() disabled = false;\n\n /\n Indeterminate state of the checkbox\n /\n @Prop() indeterminate = false;\n\n /\n Label of the checkbox which is presented in the UI\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 The name of the input\n /\n @Prop() name?: string;\n\n /\n Required state of the checkbox\n /\n @Prop() required = false;\n\n /\n The value of the checkbox\n /\n @Prop({ mutable: true }) value?: string \| boolean;\n\n /\n Optional hint text(s) to be displayed with the checkbox.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the checkbox.\n /\n @Prop() labelLeft = false;\n\n /\n Emitted when the checked status of the checkbox is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the checkbox received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the checkbox loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentDidLoad() {\n if (this.input && this.indeterminate) {\n this.input.indeterminate = true;\n }\n }\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 checkbox', this);\n }\n }\n\n /\n Sets focus on the checkbox. Use this method instead of `checkbox.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 render() {\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n >\n <input\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n type=\"checkbox\"\n name={this.name}\n value={this.value !== undefined ? String(this.value) : this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n />\n <span class=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n <svg class=\"check\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n </svg>\n <svg class=\"dash\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 5 10.5 5\"></polyline>\n </svg>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\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.checked = this.input.checked;\n\n if (!this.value \|\| typeof this.value === 'boolean') {\n this.value = this.checked;\n }\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"]}

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

@@ -100,7 +100,7 @@ export class CatInput {
         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) }),
+            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, 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))),
@@ -271,18 +271,18 @@ export class CatInput {
       "defaultValue": "false"
     },
     "max": {
-      "type": "number",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "number",
-        "resolved": "number | undefined",
+        "original": "number | string",
+        "resolved": "number | string | undefined",
         "references": {}
       },
       "required": false,
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "A maximum value for numeric values."
+        "text": "A maximum value for date, time and numeric values."
       },
       "attribute": "max",
       "reflect": false
@@ -305,18 +305,18 @@ export class CatInput {
       "reflect": false
     },
     "min": {
-      "type": "number",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "number",
-        "resolved": "number | undefined",
+        "original": "number | string",
+        "resolved": "number | string | undefined",
         "references": {}
       },
       "required": false,
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "A minimum value for numeric values."
+        "text": "A minimum value for date, time and numeric values."
       },
       "attribute": "min",
       "reflect": false
@@ -465,9 +465,14 @@ export class CatInput {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number'",
-        "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
-        "references": {}
+        "original": "InputType",
+        "resolved": "\"button\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"month\" | \"number\" | \"password\" | \"range\" | \"reset\" | \"search\" | \"submit\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
+        "references": {
+          "InputType": {
+            "location": "import",
+            "path": "./input-type"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/cat-input/cat-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.tsx"],"names":[],"mappings":"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","sourcesContent":["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 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"]}
1	+ {"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.tsx"],"names":[],"mappings":"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","sourcesContent":["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';\nimport { InputType } from './input-type';\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 date, time and numeric values.\n /\n @Prop() max?: number \| string;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum value for date, time and numeric values.\n /\n @Prop() min?: number \| string;\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: InputType = 'text';\n\n /\n The 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.min}\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"]}

package/dist/collection/components/cat-input/input-type.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=input-type.js.map

package/dist/collection/components/cat-input/input-type.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"input-type.js","sourceRoot":"","sources":["../../../src/components/cat-input/input-type.ts"],"names":[],"mappings":"","sourcesContent":["export type InputType =\n | 'button'\n | 'color'\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'file'\n | 'month'\n | 'number'\n | 'password'\n | 'range'\n | 'reset'\n | 'search'\n | 'submit'\n | 'tel'\n | 'text'\n | 'time'\n | 'url'\n | 'week';\n"]}

package/dist/collection/components/cat-notification/cat-notification.js CHANGED Viewed

@@ -2,8 +2,10 @@ import Toastify from 'toastify-js';
 export var TypeIcons;
 (function (TypeIcons) {
   TypeIcons["success"] = "check-circle-filled";
-  TypeIcons["error"] = "sparkle-filled";
-  TypeIcons["info"] = "sparkle-filled";
+  TypeIcons["error"] = "cross-circle-filled";
+  TypeIcons["info"] = "danger-filled";
+  TypeIcons["primary"] = "star-circle-filled";
+  TypeIcons["secondary"] = "info-circle-filled";
 })(TypeIcons || (TypeIcons = {}));
 export const ToastPositions = {
   'top-left': {
@@ -32,16 +34,36 @@ export const ToastPositions = {
   }
 };
 class CatNotificationService {
+  error(title, message = ' ', options) {
+    const toastOptions = this.extractOptions(title, message, options);
+    Toastify(toastOptions).showToast();
+  }
+  success(title, message = ' ', options) {
+    const toastOptions = this.extractOptions(title, message, options);
+    Toastify(toastOptions).showToast();
+  }
+  info(title, message = ' ', options) {
+    const toastOptions = this.extractOptions(title, message, options);
+    Toastify(toastOptions).showToast();
+  }
+  primary(title, message = ' ', options) {
+    const toastOptions = this.extractOptions(title, message, options);
+    Toastify(toastOptions).showToast();
+  }
+  secondary(title, message = ' ', options) {
+    const toastOptions = this.extractOptions(title, message, options);
+    Toastify(toastOptions).showToast();
+  }
   toastHTMLTemplate(title, message = ' ', options) {
     var _a;
     const template = document.createElement('template');
-    const typeIcon = (options === null || options === void 0 ? void 0 : options.type) ? TypeIcons[options.type] : TypeIcons.info;
+    const typeIcon = (options === null || options === void 0 ? void 0 : options.type) ? TypeIcons[options.type] : TypeIcons.secondary;
     title = title.trim();
     message = message.trim();
     const hasMessage = message && message !== '';
     const hasMessageClass = hasMessage ? 'has-message' : '';
     template.innerHTML = `<div class="cat-toastify-wrapper">
-        <div class="cat-toastify-icon-wrapper ${(_a = options === null || options === void 0 ? void 0 : options.type) !== null && _a !== void 0 ? _a : 'info'}">
+        <div class="cat-toastify-icon-wrapper ${(_a = options === null || options === void 0 ? void 0 : options.type) !== null && _a !== void 0 ? _a : 'secondary'}">
              <cat-icon icon="${typeIcon}"></cat-icon>
         </div>
         <div class="cat-toastify-title-wrapper ${hasMessageClass}">
@@ -50,57 +72,34 @@ class CatNotificationService {
       </div>`;
     return template.content.firstChild;
   }
-  error(title, message = ' ', options) {
-    const position = this.getPosition(options);
-    const toastOptions = {
-      node: (options === null || options === void 0 ? void 0 : options.content) ? options.content : this.toastHTMLTemplate(title, message, options),
-      duration: CatNotificationService.DURATION,
-      close: true,
-      className: 'cat-toastify',
-      gravity: position.gravity,
-      position: position.position,
-      stopOnFocus: true
-    };
-    Toastify(toastOptions).showToast();
-  }
-  success(title, message = ' ', options) {
-    const position = this.getPosition(options);
-    const toastOptions = {
-      node: (options === null || options === void 0 ? void 0 : options.content) ? options.content : this.toastHTMLTemplate(title, message, options),
-      duration: CatNotificationService.DURATION,
-      close: true,
-      className: 'cat-toastify',
-      gravity: position.gravity,
-      position: position.position,
-      stopOnFocus: true
+  getPosition(options) {
+    const position = {
+      gravity: 'bottom',
+      position: 'left'
     };
-    Toastify(toastOptions).showToast();
+    if ((options === null || options === void 0 ? void 0 : options.position) && ToastPositions[options.position]) {
+      position.position = ToastPositions[options.position].position;
+      position.gravity = ToastPositions[options.position].gravity;
+    }
+    return position;
   }
-  info(title, message = ' ', options) {
+  extractOptions(title, message = ' ', options) {
     const position = this.getPosition(options);
-    const toastOptions = {
+    return {
       node: (options === null || options === void 0 ? void 0 : options.content) ? options.content : this.toastHTMLTemplate(title, message, options),
       duration: CatNotificationService.DURATION,
       close: true,
       className: 'cat-toastify',
       gravity: position.gravity,
       position: position.position,
-      stopOnFocus: true
+      stopOnFocus: true,
+      offset: {
+        x: '1.5rem',
+        y: '1.5rem'
+      }
     };
-    Toastify(toastOptions).showToast();
-  }
-  getPosition(options) {
-    const position = {
-      gravity: 'bottom',
-      position: 'right'
-    };
-    if ((options === null || options === void 0 ? void 0 : options.position) && ToastPositions[options.position]) {
-      position.position = ToastPositions[options.position].position;
-      position.gravity = ToastPositions[options.position].gravity;
-    }
-    return position;
   }
 }
-CatNotificationService.DURATION = 8000;
+CatNotificationService.DURATION = 80000;
 export const NotificationsService = new CatNotificationService();
 //# sourceMappingURL=cat-notification.js.map

package/dist/collection/components/cat-notification/cat-notification.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-notification.js","sourceRoot":"","sources":["../../../src/components/cat-notification/cat-notification.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAqB,MAAM,aAAa,CAAC;AAEhD,MAAM,CAAN,IAAY,~~SAIX~~;~~AAJD~~,WAAY,SAAS;EACnB,4CAAiC,CAAA;EACjC,~~qCAA0B~~,CAAA;~~EAC1B~~,~~oCAAyB~~,CAAA;~~AAC3B~~,CAAC,~~EAJW~~,SAAS,KAAT,SAAS,~~QAIpB~~;AAED,MAAM,CAAC,MAAM,cAAc,GAA4F;EACrH,UAAU,EAAE;IACV,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,MAAM;GACjB;EACD,YAAY,EAAE;IACZ,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,QAAQ;GACnB;EACD,WAAW,EAAE;IACX,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,OAAO;GAClB;EACD,aAAa,EAAE;IACb,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,MAAM;GACjB;EACD,eAAe,EAAE;IACf,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,QAAQ;GACnB;EACD,cAAc,EAAE;IACd,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,OAAO;GAClB;CACF,CAAC;AAkCF,MAAM,sBAAsB;EAG1B,~~iBAAiB~~,CAAC,KAAa,EAAE,OAAO,GAAG,GAAG,EAAE,OAA+B~~;;IAC7E~~,MAAM,~~QAAQ~~,~~GAAG~~,~~QAAQ~~,CAAC,~~aAAa~~,CAAC,~~UAAU~~,CAAC,CAAC;~~IACpD~~,~~MAAM,~~QAAQ,~~GAAG~~,~~CAAA~~,~~OAAO~~,~~aAAP~~,OAAO,~~uBAAP~~,OAAO,~~CAAE~~,~~IAAI~~,~~EAAC~~,~~CAAC~~,CAAC,~~SAAS~~,CAAC,OAAO,~~CAAC~~,~~IAAI~~,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC~~;IAC1E~~,~~KAAK~~,GAAG,~~KAAK~~,~~CAAC~~,IAAI,~~EAAE~~,CAAC~~;IACrB~~,OAAO,~~GAAG~~,OAAO,CAAC,~~IAAI~~,EAAE,CAAC;~~IACzB~~,~~MAAM~~,~~UAAU~~,~~GAAG~~,~~OAAO~~,~~IAAI~~,OAAO,~~KAAK~~,EAAE,~~CAAC~~;~~IAC7C~~,MAAM,~~eAAe~~,~~GAAG~~,~~UAAU~~,CAAC,CAAC,CAAC,~~aAAa~~,CAAC,CAAC,CAAC,EAAE,CAAC;~~IACxD~~,~~QAAQ,~~CAAC,SAAS,~~GAAG;gDACuB~~,~~MAAA~~,~~OAAO~~,~~aAAP,~~OAAO,~~uBAAP~~,~~OAAO~~,~~CAAE~~,~~IAAI~~,~~mCAAI,~~MAAM~~;+BACxC~~,~~QAAQ;;iDAEU~~,~~eAAe;8CAClB~~,~~KAAK;UACzC~~,~~UAAU,~~CAAC,~~CAAC~~,CAAC,~~qCAAqC~~,OAAO,~~QAAQ~~,~~CAAC~~,CAAC,CAAC~~,EAAE~~;~~aACnE~~,CAAC~~;IACV~~,~~OAAO~~,~~QAAQ~~,CAAC,~~OAAO~~,~~CAAC~~,~~UAAyB,~~CAAC;~~EACpD~~,CAAC;~~EAED~~,~~KAAK~~,CAAC,KAAa,EAAE,OAAO,GAAG,GAAG,EAAE,OAA+B~~;IACjE~~,MAAM,QAAQ,~~GAAkB~~,~~IAAI~~,CAAC,~~WAAW~~,CAAC,~~OAAO~~,CAAC,CAAC;~~IAC1D~~,MAAM,~~YAAY~~,~~GAAY;MAC5B~~,~~IAAI,EAAE,~~CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,~~OAAO~~,EAAC,CAAC,CAAC,~~OAAO~~,CAAC,OAAO,CAAC,CAAC,CAAC,~~IAAI~~,CAAC,~~iBAAiB~~,CAAC,KAAK,EAAE,OAAO,~~EAAE~~,OAAO,CAAC~~;MAC1F~~,~~QAAQ~~,EAAE,~~sBAAsB,~~CAAC~~,QAAQ~~;~~MACzC~~,~~KAAK~~,~~EAAE~~,IAAI~~;MACX~~,~~SAAS~~,EAAE,~~cAAc~~;~~MACzB~~,~~OAAO~~,~~EAAE~~,~~QAAQ~~,CAAC,~~OAAO;MACzB~~,~~QAAQ~~,EAAE,QAAQ,CAAC,~~QAAQ~~;~~MAC3B~~,WAAW,~~EAAE~~,~~IAAI~~;~~KAClB~~,~~CAAC~~;~~IACF~~,~~QAAQ~~,CAAC,~~YAAY~~,CAAC,CAAC,~~SAAS~~,EAAE,CAAC;~~EACrC~~,CAAC~~;EAED~~,OAAO,CAAC,~~KAAa~~,~~EAAE~~,~~OAAO~~,~~GAAG~~,~~GAAG~~,~~EAAE,~~OAA+B;~~IACnE~~,MAAM,QAAQ,GAAkB,~~IAAI~~,~~CAAC~~,~~WAAW~~,~~CAAC~~,~~OAAO~~,~~CAAC~~,CAAC;~~IAC1D~~,~~MAAM,YAAY,GAAY;MAC5B,~~IAAI,~~EAAE,~~CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,~~OAAO~~,~~EAAC~~,~~CAAC~~,CAAC,OAAO,CAAC,~~OAAO~~,CAAC,~~CAAC~~,CAAC,~~IAAI~~,~~CAAC~~,~~iBAAiB~~,CAAC,~~KAAK,EAAE,~~OAAO,~~EAAE,OAAO,~~CAAC~~;MAC1F~~,QAAQ,~~EAAE~~,~~sBAAsB,~~CAAC,QAAQ~~;MACzC~~,~~KAAK,EAAE,IAAI~~;~~MACX~~,~~SAAS~~,~~EAAE~~,~~cAAc;MACzB,~~OAAO,~~EAAE~~,~~QAAQ~~,CAAC,OAAO~~;MACzB~~,~~QAAQ,EAAE,QAAQ,~~CAAC,QAAQ~~;MAC3B~~,~~WAAW,EAAE,IAAI;KAClB,~~CAAC~~;IACF~~,~~QAAQ,~~CAAC,~~YAAY~~,CAAC,~~CAAC~~,~~SAAS~~,~~EAAE,~~CAAC;~~EACrC~~,CAAC;~~EAED~~,~~IAAI~~,CAAC,KAAa,EAAE,OAAO,GAAG,GAAG,EAAE,OAA+B;~~IAChE~~,MAAM,QAAQ,GAAkB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC1D,~~MAAM,YAAY,GAAY~~;~~MAC5B~~,IAAI,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,EAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC;MAC1F,QAAQ,EAAE,sBAAsB,CAAC,QAAQ;MACzC,KAAK,EAAE,IAAI;MACX,SAAS,EAAE,cAAc;MACzB,OAAO,EAAE,QAAQ,CAAC,OAAO;MACzB,QAAQ,EAAE,QAAQ,CAAC,QAAQ;MAC3B,WAAW,EAAE,IAAI;~~KAClB~~,~~CAAC;IACF~~,~~QAAQ,CAAC,YAAY,CAAC,CAAC,SAAS,~~EAAE~~,CAAC~~;~~EACrC~~,CAAC~~;EAEO~~,~~WAAW,CAAC,OAA+B;IACjD,MAAM,QAAQ,GAAkB;MAC9B,OAAO,~~EAAE,QAAQ;~~MACjB~~,~~QAAQ,EAAE,OAAO;KAClB,~~CAAC~~;IACF~~,~~IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,KAAI,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,~~EAAE~~;MACzD~~,QAAQ~~,CAAC,QAAQ,GAAG,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC~~;~~MAC9D,QAAQ,CAAC,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC~~;~~KAC7D;IACD~~,~~OAAO,QAAQ,~~CAAC;~~EAClB~~,CAAC;;AAxEc,+BAAQ,GAAG,~~IAAI~~,CAAC;~~AA2EjC~~,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,sBAAsB,EAAE,CAAC","sourcesContent":["import Toastify, { Options } from 'toastify-js';\n\nexport enum TypeIcons {\n 'success' = 'check-circle-filled',\n 'error' = '~~sparkle~~-filled',\n 'info' = '~~sparkle~~-filled'\n}\n\nexport const ToastPositions: { [key: string]: { gravity: 'top' \| 'bottom'; position: 'left' \| 'center' \| 'right' } } = {\n 'top-left': {\n gravity: 'top',\n position: 'left'\n },\n 'top-center': {\n gravity: 'top',\n position: 'center'\n },\n 'top-right': {\n gravity: 'top',\n position: 'right'\n },\n 'bottom-left': {\n gravity: 'bottom',\n position: 'left'\n },\n 'bottom-center': {\n gravity: 'bottom',\n position: 'center'\n },\n 'bottom-right': {\n gravity: 'bottom',\n position: 'right'\n }\n};\n\nexport interface ToastPosition {\n gravity: 'top' \| 'bottom';\n position: 'left' \| 'center' \| 'right';\n}\n\nexport interface ToastOptions {\n /*\n HTML content of the toast\n /\n content: Node;\n /\n Show close button\n /\n close: boolean;\n /\n Toast position\n /\n position: 'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right';\n /\n Type of toast\n /\n type: 'success' \| 'info' \| 'error';\n /\n Invoked when the toast is clicked\n /\n onClick: () => void;\n /\n Toggle the default behavior of escaping HTML markup\n */\n escapeMarkup: boolean;\n}\n\nclass CatNotificationService {\n private static DURATION = ~~8000~~;\n\n toastHTMLTemplate(title: string, message = ' ', options?: Partial<ToastOptions>): HTMLElement {\n const template = document.createElement('template');\n const typeIcon = options?.type ? TypeIcons[options.type] : TypeIcons.~~info~~;\n title = title.trim();\n message = message.trim();\n const hasMessage = message && message !== '';\n const hasMessageClass = hasMessage ? 'has-message' : '';\n template.innerHTML = `<div class=\"cat-toastify-wrapper\">\n <div class=\"cat-toastify-icon-wrapper ${options?.type ?? '~~info~~'}\">\n <cat-icon icon=\"${typeIcon}\"></cat-icon>\n </div>\n <div class=\"cat-toastify-title-wrapper ${hasMessageClass}\">\n <div class=\"cat-toastify-title\">${title}</div></div>\n ${hasMessage ? `<div class=\"cat-toastify-message\">${message}</div>` : ''}\n </div>`;\n return template.content.firstChild as HTMLElement;\n }\n\n ~~error~~(~~title: string, message = ' ',~~ options?: Partial<ToastOptions>): ~~void~~ {\n const position: ToastPosition = ~~this.getPosition(options);\n const toastOptions: Options =~~ {\n ~~node~~: ~~options?.content ? options.content : this.toastHTMLTemplate(title, message, options),\n duration: CatNotificationService.DURATION,\n close: true,\n className:~~ '~~cat-toastify~~',\n ~~gravity:~~ position~~.gravity,\n position~~: ~~position.position,\n stopOnFocus: true~~\n };\n ~~Toastify~~(~~toastOptions).showToast();\n }\n\n success(title:~~ ~~string,~~ ~~message = ' ',~~ options~~?: Partial<ToastOptions>~~): ~~void~~ {\n ~~const~~ position: ~~ToastPosition~~ = ~~this~~.~~getPosition(options)~~;\n ~~const toastOptions: Options = {\n~~ ~~node: options?.content ? options~~.~~content~~ : ~~this.toastHTMLTemplate(title, message,~~ options~~),\n duration: CatNotificationService~~.~~DURATION,\n close: true,\n className: 'cat-toastify',\n gravity:~~ position.gravity,\n ~~position: position.position,\n stopOnFocus: true\n~~ };\n ~~Toastify(toastOptions).showToast()~~;\n }\n\n ~~info~~(title: string, message = ' ', options?: Partial<ToastOptions>): ~~void~~ {\n const position: ToastPosition = this.getPosition(options);\n ~~const~~ ~~toastOptions: Options =~~ {\n node: options?.content ? options.content : this.toastHTMLTemplate(title, message, options),\n duration: CatNotificationService.DURATION,\n close: true,\n className: 'cat-toastify',\n gravity: position.gravity,\n position: position.position,\n stopOnFocus: true\n ~~};\n Toastify(toastOptions).showToast();\n }\n\n private getPosition(options?: Partial<ToastOptions>)~~: ~~ToastPosition~~ {\n ~~const position~~: ~~ToastPosition = {\n gravity:~~ '~~bottom~~',\n ~~position~~: '~~right~~'\n }~~;\n if (options?.position && ToastPositions[options.position]) {~~\n ~~position.position = ToastPositions[options.position].position;\n position.gravity = ToastPositions[options.position].gravity;\n~~ }~~\n return position~~;\n }\n}\n\nexport const NotificationsService = new CatNotificationService();\n"]}
1	+ {"version":3,"file":"cat-notification.js","sourceRoot":"","sources":["../../../src/components/cat-notification/cat-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import Toastify, { Options } from 'toastify-js';\n\nexport enum TypeIcons {\n 'success' = 'check-circle-filled',\n 'error' = 'cross-circle-filled',\n 'info' = 'danger-filled',\n 'primary' = 'star-circle-filled',\n 'secondary' = 'info-circle-filled'\n}\n\nexport const ToastPositions: { [key: string]: { gravity: 'top' \| 'bottom'; position: 'left' \| 'center' \| 'right' } } = {\n 'top-left': {\n gravity: 'top',\n position: 'left'\n },\n 'top-center': {\n gravity: 'top',\n position: 'center'\n },\n 'top-right': {\n gravity: 'top',\n position: 'right'\n },\n 'bottom-left': {\n gravity: 'bottom',\n position: 'left'\n },\n 'bottom-center': {\n gravity: 'bottom',\n position: 'center'\n },\n 'bottom-right': {\n gravity: 'bottom',\n position: 'right'\n }\n};\n\nexport interface ToastPosition {\n gravity: 'top' \| 'bottom';\n position: 'left' \| 'center' \| 'right';\n}\n\nexport interface ToastOptions {\n /*\n HTML content of the toast\n /\n content: Node;\n /\n Show close button\n /\n close: boolean;\n /\n Toast position\n /\n position: 'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right';\n /\n Type of toast\n /\n type: 'success' \| 'info' \| 'error' \| 'primary' \| 'secondary';\n /\n Invoked when the toast is clicked\n /\n onClick: () => void;\n /\n Toggle the default behavior of escaping HTML markup\n */\n escapeMarkup: boolean;\n}\n\nclass CatNotificationService {\n private static DURATION = 80000;\n\n error(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n const toastOptions: Options = this.extractOptions(title, message, options);\n Toastify(toastOptions).showToast();\n }\n\n success(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n const toastOptions: Options = this.extractOptions(title, message, options);\n Toastify(toastOptions).showToast();\n }\n\n info(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n const toastOptions: Options = this.extractOptions(title, message, options);\n Toastify(toastOptions).showToast();\n }\n\n primary(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n const toastOptions: Options = this.extractOptions(title, message, options);\n Toastify(toastOptions).showToast();\n }\n\n secondary(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n const toastOptions: Options = this.extractOptions(title, message, options);\n Toastify(toastOptions).showToast();\n }\n\n private toastHTMLTemplate(title: string, message = ' ', options?: Partial<ToastOptions>): HTMLElement {\n const template = document.createElement('template');\n const typeIcon = options?.type ? TypeIcons[options.type] : TypeIcons.secondary;\n title = title.trim();\n message = message.trim();\n const hasMessage = message && message !== '';\n const hasMessageClass = hasMessage ? 'has-message' : '';\n template.innerHTML = `<div class=\"cat-toastify-wrapper\">\n <div class=\"cat-toastify-icon-wrapper ${options?.type ?? 'secondary'}\">\n <cat-icon icon=\"${typeIcon}\"></cat-icon>\n </div>\n <div class=\"cat-toastify-title-wrapper ${hasMessageClass}\">\n <div class=\"cat-toastify-title\">${title}</div></div>\n ${hasMessage ? `<div class=\"cat-toastify-message\">${message}</div>` : ''}\n </div>`;\n return template.content.firstChild as HTMLElement;\n }\n\n private getPosition(options?: Partial<ToastOptions>): ToastPosition {\n const position: ToastPosition = {\n gravity: 'bottom',\n position: 'left'\n };\n if (options?.position && ToastPositions[options.position]) {\n position.position = ToastPositions[options.position].position;\n position.gravity = ToastPositions[options.position].gravity;\n }\n return position;\n }\n\n private extractOptions(title: string, message = ' ', options?: Partial<ToastOptions>): Options {\n const position: ToastPosition = this.getPosition(options);\n return {\n node: options?.content ? options.content : this.toastHTMLTemplate(title, message, options),\n duration: CatNotificationService.DURATION,\n close: true,\n className: 'cat-toastify',\n gravity: position.gravity,\n position: position.position,\n stopOnFocus: true,\n offset: {\n x: '1.5rem',\n y: '1.5rem'\n }\n };\n }\n}\n\nexport const NotificationsService = new CatNotificationService();\n"]}

package/dist/collection/components/cat-tab/cat-tab.js CHANGED Viewed

@@ -57,7 +57,7 @@ export class CatTab {
         "text": "The label of the tab."
       },
       "attribute": "label",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "''"
     },
     "icon": {
@@ -75,7 +75,7 @@ export class CatTab {
         "text": "The name of an icon to be displayed in the tab."
       },
       "attribute": "icon",
-      "reflect": false
+      "reflect": true
     },
     "iconOnly": {
       "type": "any",
@@ -97,7 +97,7 @@ export class CatTab {
         "text": "Hide the actual button content and only display the tab."
       },
       "attribute": "icon-only",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "iconRight": {
@@ -115,7 +115,7 @@ export class CatTab {
         "text": "Display the icon on the right."
       },
       "attribute": "icon-right",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "url": {
@@ -133,7 +133,7 @@ export class CatTab {
         "text": "A destination to link to, rendered in the href attribute of a link."
       },
       "attribute": "url",
-      "reflect": false
+      "reflect": true
     },
     "urlTarget": {
       "type": "string",
@@ -150,7 +150,7 @@ export class CatTab {
         "text": "Specifies where to open the linked document."
       },
       "attribute": "url-target",
-      "reflect": false
+      "reflect": true
     },
     "deactivated": {
       "type": "boolean",
@@ -167,7 +167,7 @@ export class CatTab {
         "text": "Specifies that the tab should be deactivated."
       },
       "attribute": "deactivated",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     }
   }; }

package/dist/collection/components/cat-tab/cat-tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-tab.js","sourceRoot":"","sources":["../../../src/components/cat-tab/cat-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAG/F,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;GAEG;AAMH,MAAM,OAAO,MAAM;EALnB;IAQE;;OAEG;~~IACK~~,UAAK,GAAG,EAAE,CAAC;~~IAOnB~~;;OAEG;~~IACK~~,aAAQ,GAAyB,KAAK,CAAC;~~IAE/C~~;;OAEG;~~IACK~~,cAAS,GAAG,KAAK,CAAC;~~IAY1B~~;;OAEG;~~IACK~~,gBAAW,GAAG,KAAK,CAAC;~~GAqB7B~~;EAdC,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE;MACxB,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,WAAW,YAAY,EAAE,EAAE,CAAC;KACnD;EACH,CAAC;EAGD,OAAO,CAAC,KAAiB;IACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Listen, Host, Element } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\n\nlet nextUniqueId = 0;\n\n/*\n A single tab inside a tabs component.\n /\n@Component({\n tag: 'cat-tab',\n styleUrl: 'cat-tab.scss',\n shadow: true\n})\nexport class CatTab {\n @Element() hostElement!: HTMLElement;\n\n /\n The label of the tab.\n /\n @Prop() label = '';\n\n /\n The name of an icon to be displayed in the tab.\n /\n @Prop() icon?: string;\n\n /\n Hide the actual button content and only display the tab.\n /\n @Prop() iconOnly: boolean \| Breakpoint = false;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\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 /\n Specifies that the tab should be deactivated.\n /\n @Prop() deactivated = false;\n\n /\n Emitted when tab is clicked.\n */\n @Event() tabClick!: EventEmitter<MouseEvent>;\n\n connectedCallback() {\n if (!this.hostElement.id) {\n this.hostElement.id = `cat-tab-${nextUniqueId++}`;\n }\n }\n\n @Listen('click')\n onClick(event: MouseEvent) {\n this.tabClick.emit(event);\n }\n\n render() {\n return <Host></Host>;\n }\n}\n"]}
1	+ {"version":3,"file":"cat-tab.js","sourceRoot":"","sources":["../../../src/components/cat-tab/cat-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAG/F,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;GAEG;AAMH,MAAM,OAAO,MAAM;EALnB;IAQE;;OAEG;IACsB,UAAK,GAAG,EAAE,CAAC;IAOpC;;OAEG;IACsB,aAAQ,GAAyB,KAAK,CAAC;IAEhE;;OAEG;IACsB,cAAS,GAAG,KAAK,CAAC;IAY3C;;OAEG;IACsB,gBAAW,GAAG,KAAK,CAAC;GAqB9C;EAdC,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE;MACxB,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,WAAW,YAAY,EAAE,EAAE,CAAC;KACnD;EACH,CAAC;EAGD,OAAO,CAAC,KAAiB;IACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Listen, Host, Element } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\n\nlet nextUniqueId = 0;\n\n/*\n A single tab inside a tabs component.\n /\n@Component({\n tag: 'cat-tab',\n styleUrl: 'cat-tab.scss',\n shadow: true\n})\nexport class CatTab {\n @Element() hostElement!: HTMLElement;\n\n /\n The label of the tab.\n /\n @Prop({ reflect: true }) label = '';\n\n /\n The name of an icon to be displayed in the tab.\n /\n @Prop({ reflect: true }) icon?: string;\n\n /\n Hide the actual button content and only display the tab.\n /\n @Prop({ reflect: true }) iconOnly: boolean \| Breakpoint = false;\n\n /\n Display the icon on the right.\n /\n @Prop({ reflect: true }) iconRight = false;\n\n /\n A destination to link to, rendered in the href attribute of a link.\n /\n @Prop({ reflect: true }) url?: string;\n\n /\n Specifies where to open the linked document.\n /\n @Prop({ reflect: true }) urlTarget?: '_blank' \| '_self';\n\n /\n Specifies that the tab should be deactivated.\n /\n @Prop({ reflect: true }) deactivated = false;\n\n /\n Emitted when tab is clicked.\n */\n @Event() tabClick!: EventEmitter<MouseEvent>;\n\n connectedCallback() {\n if (!this.hostElement.id) {\n this.hostElement.id = `cat-tab-${nextUniqueId++}`;\n }\n }\n\n @Listen('click')\n onClick(event: MouseEvent) {\n this.tabClick.emit(event);\n }\n\n render() {\n return <Host></Host>;\n }\n}\n"]}