@haiilo/catalyst 0.1.0 → 0.1.1

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

@@ -1,568 +0,0 @@
-import { Component, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';
-import log from 'loglevel';
-import { Breakpoints, isBreakpoint } from '../../utils/breakpoints';
-import { MediaMatcher } from '../../utils/media-matcher';
-/**
- * Buttons are used for interface actions.
- *
- * @part button - The native anchor or button element.
- * @part content - The textual content of the button.
- * @part prefix - The prefix icon.
- * @part suffix - The suffix icon.
- */
-export class CatButton {
-  constructor() {
-    this._iconOnly = true;
-    /**
-     * The rendering style of the button.
-     */
-    this.variant = 'filled';
-    /**
-     * The color palette of the button.
-     */
-    this.color = 'primary';
-    /**
-     * The size of the button.
-     */
-    this.size = 'm';
-    /**
-     * Specifies that the button should be disabled. A disabled button is unusable
-     * and un-clickable. Corresponds with the native HTML disabled attribute.
-     */
-    this.disabled = false;
-    /**
-     * Displays the button in a loading state with a spinner. Just like a disabled
-     * button, an inactive button is unusable and un-clickable. However, it
-     * retains the current focus state.
-     */
-    this.loading = false;
-    /**
-     * Allows the button to submit a form.
-     */
-    this.submit = false;
-    /**
-     * Ellipse overflowing button content.
-     */
-    this.ellipsed = true;
-    /**
-     * Use round button edges.
-     */
-    this.round = false;
-    /**
-     * Hide the actual button content and only display the icon.
-     */
-    this.iconOnly = false;
-    /**
-     * Display the icon as a suffix.
-     */
-    this.iconSuffix = false;
-  }
-  onIconOnlyChanged(value) {
-    var _a, _b;
-    // teardown
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    (_a = this.mediaQueryList) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.mediaQueryListener);
-    this.mediaQueryList = undefined;
-    this.mediaQueryListener = undefined;
-    // setup
-    if (isBreakpoint(value)) {
-      (_b = this.mediaMatcher) !== null && _b !== void 0 ? _b : (this.mediaMatcher = new MediaMatcher());
-      this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);
-      this.mediaQueryListener = (event) => (this._iconOnly = event.matches);
-      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);
-      this._iconOnly = this.mediaQueryList.matches;
-    }
-    else {
-      this._iconOnly = value;
-    }
-  }
-  componentWillLoad() {
-    this.onIconOnlyChanged(this.iconOnly);
-  }
-  componentWillRender() {
-    if (this.isIconButton && !this.a11yLabel) {
-      log.warn('[A11y] Missing ARIA label on icon button', this);
-    }
-  }
-  haltDisabledEvents(event) {
-    if (this.disabled || this.loading) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  }
-  /**
-   * Sets focus on the button. Use this method instead of `button.focus()`.
-   *
-   * @param options An optional object providing options to control aspects of
-   * the focusing process.
-   */
-  async setFocus(options) {
-    this.button.focus(options);
-  }
-  render() {
-    var _a;
-    if (this.url) {
-      return (h("a", { ref: el => (this.button = el), href: this.disabled ? undefined : this.url, target: this.urlTarget, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, id: this.buttonId, part: "button", class: {
-          'cat-button': true,
-          'cat-button-icon': this.isIconButton,
-          'cat-button-round': this.round,
-          'cat-button-loading': this.loading,
-          'cat-button-disabled': this.disabled,
-          'cat-button-ellipsed': this.ellipsed && !this.isIconButton,
-          [`cat-button-${this.variant}`]: Boolean(this.variant),
-          [`cat-button-${this.color}`]: Boolean(this.color),
-          [`cat-button-${this.size}`]: Boolean(this.size)
-        }, onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
-    }
-    else {
-      return (h("button", { ref: el => (this.button = el), type: this.submit ? 'submit' : 'button', name: this.name, value: this.value, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, id: this.buttonId, part: "button", class: {
-          'cat-button': true,
-          'cat-button-icon': this.isIconButton,
-          'cat-button-round': (_a = this.round) !== null && _a !== void 0 ? _a : this.isIconButton,
-          'cat-button-loading': this.loading,
-          'cat-button-disabled': this.disabled,
-          'cat-button-ellipsed': this.ellipsed && !this.isIconButton,
-          [`cat-button-${this.variant}`]: Boolean(this.variant),
-          [`cat-button-${this.color}`]: Boolean(this.color),
-          [`cat-button-${this.size}`]: Boolean(this.size)
-        }, onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
-    }
-  }
-  get iconSize() {
-    switch (this.size) {
-      case 'xs':
-        return 's';
-      default:
-        return 'l';
-    }
-  }
-  get spinnerSize() {
-    switch (this.size) {
-      case 'xs':
-        return 'xs';
-      default:
-        return 'm';
-    }
-  }
-  get isIconButton() {
-    return Boolean(this.icon) && this._iconOnly;
-  }
-  get hasPrefixIcon() {
-    return Boolean(this.icon) && !this._iconOnly && !this.iconSuffix;
-  }
-  get hasSuffixIcon() {
-    return Boolean(this.icon) && !this._iconOnly && this.iconSuffix;
-  }
-  get content() {
-    return [
-      this.hasPrefixIcon ? (h("cat-icon", { icon: this.icon, size: this.iconSize, class: "cat-button-prefix", part: "prefix" })) : null,
-      this.isIconButton ? (h("cat-icon", { icon: this.icon, size: this.iconSize })) : (h("span", { class: "cat-button-content", part: "content" },
-        h("slot", null))),
-      this.hasSuffixIcon ? (h("cat-icon", { icon: this.icon, size: this.iconSize, class: "cat-button-suffix", part: "suffix" })) : null,
-      this.loading ? h("cat-spinner", { size: this.spinnerSize }) : null
-    ];
-  }
-  onFocus(event) {
-    this.catFocus.emit(event);
-  }
-  onBlur(event) {
-    this.catBlur.emit(event);
-  }
-  static get is() { return "cat-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cat-button.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cat-button.css"]
-  }; }
-  static get properties() { return {
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'filled' | 'outlined' | 'text'",
-        "resolved": "\"filled\" | \"outlined\" | \"text\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The rendering style of the button."
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "'filled'"
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'primary' | 'secondary' | 'danger' | 'success' | 'warning'",
-        "resolved": "\"danger\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The color palette of the button."
-      },
-      "attribute": "color",
-      "reflect": false,
-      "defaultValue": "'primary'"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'xs' | 's' | 'm' | 'l' | 'xl'",
-        "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The size of the button."
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'m'"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The name of the button, which gets paired with the button's value when\nsubmitted as part of a form. Corresponds with the native HTML name\nattribute."
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The value of the button, which gets paired with the button's name when\nsubmitted as part of a form. Corresponds with the native HTML value\nattribute."
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies that the button should be disabled. A disabled button is unusable\nand un-clickable. Corresponds with the native HTML disabled attribute."
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Displays the button in a loading state with a spinner. Just like a disabled\nbutton, an inactive button is unusable and un-clickable. However, it\nretains the current focus state."
-      },
-      "attribute": "loading",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "submit": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Allows the button to submit a form."
-      },
-      "attribute": "submit",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "ellipsed": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Ellipse overflowing button content."
-      },
-      "attribute": "ellipsed",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "round": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use round button edges."
-      },
-      "attribute": "round",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "url": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "A destination to link to, rendered in the href attribute of a link."
-      },
-      "attribute": "url",
-      "reflect": false
-    },
-    "urlTarget": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'_blank' | '_self'",
-        "resolved": "\"_blank\" | \"_self\" | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies where to open the linked document."
-      },
-      "attribute": "url-target",
-      "reflect": false
-    },
-    "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 button."
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "iconOnly": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean | Breakpoint",
-        "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\" | boolean",
-        "references": {
-          "Breakpoint": {
-            "location": "import",
-            "path": "../../utils/breakpoints"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Hide the actual button content and only display the icon."
-      },
-      "attribute": "icon-only",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "iconSuffix": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Display the icon as a suffix."
-      },
-      "attribute": "icon-suffix",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "buttonId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Adds a unique identifier for the button. Please note that with this\nparticular component this ID is added inside the web component. If you need\nan ID on the HTML element, use the regular `id` attribute instead."
-      },
-      "attribute": "button-id",
-      "reflect": false
-    },
-    "a11yLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Adds accessible label for the button that is only shown for screen\nreaders. Typically, this label text replaces the visible text on the\nbutton for users who use assistive technology."
-      },
-      "attribute": "a11y-label",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "_iconOnly": {}
-  }; }
-  static get events() { return [{
-      "method": "catFocus",
-      "name": "catFocus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the button 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 button 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 button. Use this method instead of `button.focus()`.",
-        "tags": [{
-            "name": "param",
-            "text": "options An optional object providing options to control aspects of\nthe focusing process."
-          }]
-      }
-    }
-  }; }
-  static get watchers() { return [{
-      "propName": "iconOnly",
-      "methodName": "onIconOnlyChanged"
-    }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "haltDisabledEvents",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}

package/dist/collection/components/cat-icon/cat-icon-registry.js

@@ -1,41 +0,0 @@
-export class CatIconRegistry {
-  constructor() {
-    this.icons = new Map();
-    // hide constructor
-  }
-  static getInstance() {
-    if (!CatIconRegistry.instance) {
-      CatIconRegistry.instance = new CatIconRegistry();
-    }
-    return CatIconRegistry.instance;
-  }
-  getIcon(name, setName) {
-    return this.icons.get(this.buildName(name, setName));
-  }
-  addIcon(name, data, setName) {
-    this.icons.set(this.buildName(name, setName), data);
-    window.dispatchEvent(this.buildEvent('cat-icon-added', { name, setName }));
-  }
-  addIcons(icons, setName) {
-    Object.entries(icons).forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));
-    window.dispatchEvent(this.buildEvent('cat-icons-added', { names: Object.keys(icons), setName }));
-  }
-  removeIcon(name, setName) {
-    this.icons.delete(this.buildName(name, setName));
-    window.dispatchEvent(this.buildEvent('cat-icon-removed', { name, setName }));
-  }
-  removeIcons(names, setName) {
-    names.forEach(name => this.icons.delete(this.buildName(name, setName)));
-    window.dispatchEvent(this.buildEvent('cat-icons-removed', { names, setName }));
-  }
-  buildName(name, setName) {
-    return setName ? `${setName}:name` : name;
-  }
-  buildEvent(name, detail) {
-    return new CustomEvent(name, {
-      bubbles: true,
-      composed: true,
-      detail
-    });
-  }
-}

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

@@ -1,49 +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: currentColor;
-  stroke: none;
-  transform-origin: center center;
-  width: 1em;
-  height: 1em;
-}
-
-.cat-icon-xs svg {
-  font-size: 0.75rem;
-}
-
-.cat-icon-s svg {
-  font-size: 1rem;
-}
-
-.cat-icon-m svg {
-  font-size: 1.25rem;
-}
-
-.cat-icon-l svg {
-  font-size: 1.5rem;
-}
-
-.cat-icon-xl svg {
-  font-size: 1.75rem;
-}