@haiilo/catalyst 0.0.11 → 0.1.0

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

@@ -0,0 +1,89 @@
+import { Component, h, Prop } from '@stencil/core';
+import { CatIconRegistry } from './cat-icon-registry';
+/**
+ * Icons are used to provide additional meaning or in places where text label
+ * doesn't fit.
+ *
+ * @part icon - The native span element wrapping the SVG icon.
+ */
+export class CatIcon {
+  constructor() {
+    this.iconRegistry = CatIconRegistry.getInstance();
+    /**
+     * The name of the icon.
+     */
+    this.icon = '';
+    /**
+     * The size of the icon.
+     */
+    this.size = 'm';
+  }
+  render() {
+    return (h("span", { innerHTML: this.iconRegistry.getIcon(this.icon), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
+        [`cat-icon-${this.size}`]: this.size !== 'inline'
+      } }));
+  }
+  static get is() { return "cat-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-icon.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-icon.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the icon."
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "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 icon."
+      },
+      "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 icon that is only shown for screen\nreaders. The `aria-hidden` attribute will be set if no label is present."
+      },
+      "attribute": "a11y-label",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,63 @@
+/**
+ * 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: cat-spinner 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;
+  width: 1em;
+  height: 1em;
+}
+
+.cat-spinner-xs svg {
+  font-size: 0.75rem;
+}
+
+.cat-spinner-s svg {
+  font-size: 1rem;
+}
+
+.cat-spinner-m svg {
+  font-size: 1.25rem;
+}
+
+.cat-spinner-l svg {
+  font-size: 1.5rem;
+}
+
+.cat-spinner-xl svg {
+  font-size: 1.75rem;
+}
+
+@keyframes cat-spinner {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,64 @@
+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: {
+        [`cat-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
+    }
+  }; }
+}

package/dist/collection/index.cdn.js

@@ -0,0 +1,21 @@
+(function (doc) {
+  var scriptElm = doc.scripts[doc.scripts.length - 1];
+  var warn = ['Discouraged script use, please remove: ' + scriptElm.outerHTML];
+
+  warn.push('To improve performance it is recommended to set the script in the head as follows:');
+
+  var parts = scriptElm.src.split('/');
+  parts.pop();
+  // add subfolder(s) here
+  // parts.push('...');
+  var url = parts.join('/');
+
+  scriptElm = doc.createElement('script');
+  scriptElm.setAttribute('type', 'module');
+  scriptElm.src = url + '/catalyst.esm.js';
+  warn.push(scriptElm.outerHTML);
+  scriptElm.setAttribute('data-stencil-namespace', 'catalyst');
+  doc.head.appendChild(scriptElm);
+
+  console.warn(warn.join('\n'));
+})(document);

package/dist/collection/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/init.js

@@ -0,0 +1,8 @@
+import { CatIconRegistry } from './components/cat-icon/cat-icon-registry';
+import { ci } from '@haiilo/catalyst-icons';
+function registerIcons() {
+  CatIconRegistry.getInstance().addIcons(ci);
+}
+export default function () {
+  registerIcons();
+}

package/dist/collection/utils/breakpoints.js

@@ -0,0 +1,11 @@
+const _breakpoints = ['xs', 's', 'm', 'l', 'xl'];
+export const Breakpoints = {
+  xs: '(max-width: 539.98px)',
+  s: '(max-width: 767.98px)',
+  m: '(max-width: 991.98px)',
+  l: '(max-width: 1199.98px)',
+  xl: '(max-width: 1399.98px)'
+};
+export function isBreakpoint(value) {
+  return typeof value === 'string' && _breakpoints.includes(value);
+}

package/dist/collection/utils/media-matcher.js

@@ -0,0 +1,54 @@
+import log from 'loglevel';
+import { Platform } from './platform';
+// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts
+/** Global registry for all dynamically-created, injected media queries. */
+const mediaQueriesForWebkitCompatibility = new Set();
+/** Style tag that holds all of the dynamically-created media queries. */
+let mediaQueryStyleNode;
+/** A utility for calling matchMedia queries. */
+export class MediaMatcher {
+  constructor() {
+    this._platform = new Platform();
+    this._matchMedia = window.matchMedia.bind(window);
+  }
+  /**
+   * Evaluates the given media query and returns the native MediaQueryList from which results
+   * can be retrieved.
+   * Confirms the layout engine will trigger for the selector query provided and returns the
+   * MediaQueryList for the query provided.
+   */
+  matchMedia(query) {
+    if (this._platform.WEBKIT || this._platform.BLINK) {
+      createEmptyStyleRule(query);
+    }
+    return this._matchMedia(query);
+  }
+}
+/**
+ * Creates an empty stylesheet that is used to work around browser inconsistencies related to
+ * `matchMedia`. At the time of writing, it handles the following cases:
+ * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`
+ * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.
+ * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules
+ * inside the `@media` match existing elements on the page. We work around it by having one rule
+ * targeting the `body`. See https://github.com/angular/components/issues/23546.
+ */
+function createEmptyStyleRule(query) {
+  if (mediaQueriesForWebkitCompatibility.has(query)) {
+    return;
+  }
+  try {
+    if (!mediaQueryStyleNode) {
+      mediaQueryStyleNode = document.createElement('style');
+      mediaQueryStyleNode.setAttribute('type', 'text/css');
+      document.head.appendChild(mediaQueryStyleNode);
+    }
+    if (mediaQueryStyleNode.sheet) {
+      mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);
+      mediaQueriesForWebkitCompatibility.add(query);
+    }
+  }
+  catch (e) {
+    log.error(e);
+  }
+}

package/dist/collection/utils/platform.js

@@ -0,0 +1,49 @@
+// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts
+// Whether the current platform supports the V8 Break Iterator. The V8 check
+// is necessary to detect all Blink based browsers.
+let hasV8BreakIterator;
+// We need a try/catch around the reference to `Intl`, because accessing it in some cases can
+// cause IE to throw. These cases are tied to particular versions of Windows and can happen if
+// the consumer is providing a polyfilled `Map`. See:
+// https://github.com/Microsoft/ChakraCore/issues/3189
+// https://github.com/angular/components/issues/15687
+try {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  hasV8BreakIterator = typeof Intl !== 'undefined' && Intl.v8BreakIterator;
+}
+catch (_a) {
+  hasV8BreakIterator = false;
+}
+export class Platform {
+  constructor() {
+    /** Whether the current browser is Microsoft Edge. */
+    this.EDGE = /(edge)/i.test(navigator.userAgent);
+    /** Whether the current rendering engine is Microsoft Trident. */
+    this.TRIDENT = /(msie|trident)/i.test(navigator.userAgent);
+    // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.
+    /** Whether the current rendering engine is Blink. */
+    this.BLINK = 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    !!(window.chrome || hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;
+    // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to
+    // ensure that Webkit runs standalone and is not used as another engine's base.
+    /** Whether the current rendering engine is WebKit. */
+    this.WEBKIT = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;
+    /** Whether the current platform is Apple iOS. */
+    this.IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);
+    // It's difficult to detect the plain Gecko engine, because most of the browsers identify
+    // them self as Gecko-like browsers and modify the userAgent's according to that.
+    // Since we only cover one explicit Firefox case, we can simply check for Firefox
+    // instead of having an unstable check for Gecko.
+    /** Whether the current browser is Firefox. */
+    this.FIREFOX = /(firefox|minefield)/i.test(navigator.userAgent);
+    /** Whether the current platform is Android. */
+    // Trident on mobile adds the android platform to the userAgent to trick detections.
+    this.ANDROID = /android/i.test(navigator.userAgent) && !this.TRIDENT;
+    // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake
+    // this and just place the Safari keyword in the userAgent. To be more safe about Safari every
+    // Safari browser should also use Webkit as its layout engine.
+    /** Whether the current browser is Safari. */
+    this.SAFARI = /safari/i.test(navigator.userAgent) && this.WEBKIT;
+  }
+}

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}