@haiilo/catalyst 0.5.1 → 0.5.5

package/dist/collection/components/cat-spinner/cat-spinner.css

@@ -1,63 +0,0 @@
-/**
- * Auto-generated file. Do not edit directly.
- */
-/* stylelint-disable value-keyword-case */
-/* stylelint-enable value-keyword-case */
-:host {
-  display: inline-flex;
-  vertical-align: middle;
-  /* stylelint-disable property-no-vendor-prefix */
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  /* stylelint-enable property-no-vendor-prefix */
-}
-:host[hidden] {
-  display: none;
-}
-
-span {
-  display: inline-flex;
-}
-
-svg {
-  fill: none;
-  stroke: currentColor;
-  stroke-dasharray: 135px;
-  stroke-dashoffset: 95px;
-  stroke-linecap: round;
-  stroke-width: 5px;
-  transform-origin: center center;
-  animation: spin 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;
-  width: 1em;
-  height: 1em;
-}
-
-.spinner-xs svg {
-  font-size: 0.75rem;
-}
-
-.spinner-s svg {
-  font-size: 1rem;
-}
-
-.spinner-m svg {
-  font-size: 1.25rem;
-}
-
-.spinner-l svg {
-  font-size: 1.5rem;
-}
-
-.spinner-xl svg {
-  font-size: 1.75rem;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/dist/collection/components/cat-spinner/cat-spinner.js

@@ -1,65 +0,0 @@
-import { Component, h, Prop } from '@stencil/core';
-/**
- * Spinners are used to indicate users that their action is being processed.
- */
-export class CatSpinner {
-  constructor() {
-    /**
-     * The size of the spinner.
-     */
-    this.size = 'm';
-  }
-  render() {
-    return (h("span", { "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
-        [`spinner-${this.size}`]: this.size !== 'inline'
-      } },
-      h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" },
-        h("circle", { cx: "24", cy: "24", r: "21.5" }))));
-  }
-  static get is() { return "cat-spinner"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cat-spinner.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cat-spinner.css"]
-  }; }
-  static get properties() { return {
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'xs' | 's' | 'm' | 'l' | 'xl' | 'inline'",
-        "resolved": "\"inline\" | \"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The size of the spinner."
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'m'"
-    },
-    "a11yLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Adds accessible label for the spinner that is only shown for screen\nreaders. The `aria-hidden` attribute will be set if no label is present."
-      },
-      "attribute": "a11y-label",
-      "reflect": false
-    }
-  }; }
-}
-//# sourceMappingURL=cat-spinner.js.map

package/dist/collection/components/cat-spinner/cat-spinner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cat-spinner.js","sourceRoot":"","sources":["../../../src/components/cat-spinner/cat-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,UAAU;EALvB;IAME;;OAEG;IACK,SAAI,GAA6C,GAAG,CAAC;GAuB9D;EAfC,MAAM;IACJ,OAAO,CACL,0BACc,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAC3C,KAAK,EAAE;QACL,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;OACjD;MAED,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;QACzD,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,GAAU,CACtC,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Spinners are used to indicate users that their action is being processed.\n */\n@Component({\n  tag: 'cat-spinner',\n  styleUrl: 'cat-spinner.scss',\n  shadow: true\n})\nexport class CatSpinner {\n  /**\n   * The size of the spinner.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the spinner 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        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        class={{\n          [`spinner-${this.size}`]: this.size !== 'inline'\n        }}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\">\n          <circle cx=\"24\" cy=\"24\" r=\"21.5\"></circle>\n        </svg>\n      </span>\n    );\n  }\n}\n"]}

package/dist/collection/components/cat-textarea/cat-textarea.css

@@ -1,74 +0,0 @@
-/**
- * Auto-generated file. Do not edit directly.
- */
-/* stylelint-disable value-keyword-case */
-/* stylelint-enable value-keyword-case */
-:host {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  margin-bottom: 1rem;
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-label {
-  display: block;
-  align-self: flex-start;
-}
-label.hidden {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}
-
-.input-optional {
-  margin-left: 0.25rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  color: rgb(var(--cat-font-color-muted, 105, 118, 135));
-}
-
-textarea {
-  margin: 0;
-  padding: 0.625rem 0.75rem;
-  width: 100%;
-  min-height: 2.5rem;
-  font: inherit;
-  background: white;
-  border-radius: 0.25rem;
-  border: none;
-  box-shadow: 0 0 0 1px #d7dbe0;
-  transition: box-shadow 0.13s linear;
-}
-textarea:disabled {
-  background: #f8f8fb;
-  cursor: not-allowed;
-  color: rgb(var(--cat-font-color-muted, 105, 118, 135));
-  resize: none;
-}
-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 2px #d7dbe0;
-}
-textarea:focus {
-  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
-}
-textarea::placeholder {
-  color: rgb(var(--cat-font-color-muted, 105, 118, 135));
-}
-
-.input-hint {
-  font-size: 0.875rem;
-  line-height: 1rem;
-  margin: 0;
-}

package/dist/collection/components/cat-textarea/cat-textarea.js

@@ -1,393 +0,0 @@
-import { Component, Event, h, Host, Method, Prop } from '@stencil/core';
-import log from 'loglevel';
-import autosize from 'autosize';
-let nextUniqueId = 0;
-/**
- * Textarea specifies a control that allows user to write text over multiple
- * rows. Used when the expected user input is long. For shorter input, use the
- * input component.
- *
- * @part label - The label content.
- */
-export class CatTextarea {
-  constructor() {
-    this.id = `cat-textarea-${nextUniqueId++}`;
-    /**
-     * Whether the textarea is disabled.
-     */
-    this.disabled = false;
-    /**
-     * The label for the textarea.
-     */
-    this.label = '';
-    /**
-     * Visually hide the label, but still show it to assistive technologies like screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * The name of the form control. Submitted with the form as part of a name/value pair.
-     */
-    this.name = '';
-    /**
-     * The value is not editable.
-     */
-    this.readonly = false;
-    /**
-     * A value is required or must be check for the form to be submittable.
-     */
-    this.required = false;
-    /**
-     * Specifies the initial number of lines in the textarea.
-     */
-    this.rows = 3;
-  }
-  componentWillRender() {
-    if (!this.label) {
-      log.error('[A11y] Missing ARIA label on textarea', this);
-    }
-  }
-  componentDidLoad() {
-    autosize(this.textarea);
-  }
-  /**
-   * Sets focus on the textarea. Use this method instead of `textarea.focus()`.
-   *
-   * @param options An optional object providing options to control aspects of
-   * the focusing process.
-   */
-  async setFocus(options) {
-    this.textarea.focus(options);
-  }
-  // /**
-  //  * Clear the input.
-  //  */
-  // @Method()
-  // async clear(): Promise<void> {
-  //   this.inputValue = '';
-  // }
-  render() {
-    return (h(Host, null,
-      this.label && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } },
-        h("span", { part: "label" },
-          this.label,
-          !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(Optional)"))))),
-      h("textarea", { ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }),
-      this.hint && h("p", { class: "input-hint" }, this.hint)));
-  }
-  onInput(event) {
-    // this.inputValue = πthis.input.value;
-    this.catChange.emit(event);
-  }
-  onFocus(event) {
-    this.catFocus.emit(event);
-  }
-  onBlur(event) {
-    this.catBlur.emit(event);
-  }
-  static get is() { return "cat-textarea"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cat-textarea.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cat-textarea.css"]
-  }; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether the textarea is disabled."
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "hint": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Optional hint text to be displayed with the textarea."
-      },
-      "attribute": "hint",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The label for the textarea."
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "labelHidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
-      },
-      "attribute": "label-hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "maxLength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "A maximum length (number of characters) for textual values."
-      },
-      "attribute": "max-length",
-      "reflect": false
-    },
-    "minLength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "A minimum length (number of characters) for textual values."
-      },
-      "attribute": "min-length",
-      "reflect": false
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The name of the form control. Submitted with the form as part of a name/value pair."
-      },
-      "attribute": "name",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The placeholder text to display within the input."
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value is not editable."
-      },
-      "attribute": "readonly",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A value is required or must be check for the form to be submittable."
-      },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "rows": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the initial number of lines in the textarea."
-      },
-      "attribute": "rows",
-      "reflect": false,
-      "defaultValue": "3"
-    },
-    "value": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "string | number",
-        "resolved": "number | string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The initial value of the control."
-      },
-      "attribute": "value",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "catChange",
-      "name": "catChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the value is changed."
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "catFocus",
-      "name": "catFocus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the textarea received focus."
-      },
-      "complexType": {
-        "original": "FocusEvent",
-        "resolved": "FocusEvent",
-        "references": {
-          "FocusEvent": {
-            "location": "global"
-          }
-        }
-      }
-    }, {
-      "method": "catBlur",
-      "name": "catBlur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the textarea loses focus."
-      },
-      "complexType": {
-        "original": "FocusEvent",
-        "resolved": "FocusEvent",
-        "references": {
-          "FocusEvent": {
-            "location": "global"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "(options?: FocusOptions | undefined) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "options An optional object providing options to control aspects of\nthe focusing process."
-              }],
-            "text": "An optional object providing options to control aspects of\nthe focusing process."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "FocusOptions": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the textarea. Use this method instead of `textarea.focus()`.",
-        "tags": [{
-            "name": "param",
-            "text": "options An optional object providing options to control aspects of\nthe focusing process."
-          }]
-      }
-    }
-  }; }
-}
-//# sourceMappingURL=cat-textarea.js.map

package/dist/collection/components/cat-textarea/cat-textarea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cat-textarea.js","sourceRoot":"","sources":["../../../src/components/cat-textarea/cat-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport log from 'loglevel';\nimport autosize from 'autosize';\n\nlet nextUniqueId = 0;\n\n/**\n * Textarea specifies a control that allows user to write text over multiple\n * rows. Used when the expected user input is long. For shorter input, use the\n * input component.\n *\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-textarea',\n  styleUrl: 'cat-textarea.scss',\n  shadow: true\n})\nexport class CatTextarea {\n  private readonly id = `cat-textarea-${nextUniqueId++}`;\n  private textarea!: HTMLTextAreaElement;\n\n  /**\n   * Whether the textarea is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text to be displayed with the textarea.\n   */\n  @Prop() hint?: string;\n\n  /**\n   * The label for the textarea.\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 length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: 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   * 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   * Specifies the initial number of lines in the textarea.\n   */\n  @Prop() rows = 3;\n\n  /**\n   * The initial value of the control.\n   */\n  @Prop() value?: string | number;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the textarea received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    if (!this.label) {\n      log.error('[A11y] Missing ARIA label on textarea', this);\n    }\n  }\n\n  componentDidLoad(): void {\n    autosize(this.textarea);\n  }\n\n  /**\n   * Sets focus on the textarea. Use this method instead of `textarea.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.textarea.focus(options);\n  }\n\n  // /**\n  //  * Clear the input.\n  //  */\n  // @Method()\n  // async clear(): Promise<void> {\n  //   this.inputValue = '';\n  // }\n\n  render() {\n    return (\n      <Host>\n        {this.label && (\n          <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n            <span part=\"label\">\n              {this.label}\n              {!this.required && (\n                <span class=\"input-optional\" aria-hidden=\"true\">\n                  (Optional)\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <textarea\n          ref={el => (this.textarea = el as HTMLTextAreaElement)}\n          id={this.id}\n          disabled={this.disabled}\n          maxlength={this.maxLength}\n          minlength={this.minLength}\n          name={this.name}\n          placeholder={this.placeholder}\n          readonly={this.readonly}\n          required={this.required}\n          rows={this.rows}\n          value={this.value}\n          onInput={this.onInput.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        ></textarea>\n        {this.hint && <p class=\"input-hint\">{this.hint}</p>}\n      </Host>\n    );\n  }\n\n  private onInput(event: Event) {\n    // this.inputValue = π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"]}