@rededor/cura 0.4.6 → 0.5.0-alpha.0

package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js

@@ -1,308 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class CuraButtonTransparent {
-  constructor() {
-    this.size = 'large';
-    this.disabled = false;
-    this.isLoading = false;
-    this.iconName = undefined;
-    this.iconset = 'default';
-    this.iconPosition = 'left';
-    this.iconOnly = undefined;
-    this.href = undefined;
-    this.target = "_self";
-    this.color = 'accent';
-    this.fontColor = 'dark';
-    this.textAlign = 'left';
-    this.styles = {};
-  }
-  handleChangeColor() {
-    this.setColors();
-  }
-  connectedCallback() {
-    this.weights = window.CuraAPI.theme.fonts.getWeights();
-    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
-    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
-    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
-    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
-    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
-    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
-    this.styles['--font-weight-medium'] = this.weights.medium;
-    this.styles['--text-align'] = this.textAlign;
-    this.setColors();
-  }
-  getClasses() {
-    const classes = {};
-    classes[`${this.size.toLowerCase()}`] = true;
-    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
-    classes[`icon-only`] = this.iconOnly;
-    classes['inverted'] = this.fontColor === 'light';
-    classes['disabled'] = this.disabled;
-    classes['isLoading'] = this.isLoading;
-    return classes;
-  }
-  setColors() {
-    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`), '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`), '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`) });
-  }
-  getIcon() {
-    if (!this.iconName)
-      return '';
-    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
-    const color = this.getSymbolColor();
-    return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
-  }
-  getSymbolColor() {
-    return this.disabled
-      ? 'neutral-dark'
-      : this.fontColor === 'light'
-        ? 'neutral-white'
-        : `${this.color}-base`;
-  }
-  handleClick(e) {
-    if (this.disabled || this.isLoading)
-      e.preventDefault();
-  }
-  render() {
-    return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e) }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e) }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
-  }
-  static get is() { return "cura-button-transparent"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cura-button-transparent.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cura-button-transparent.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'small' | 'medium' | 'large'",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Button size: small | medium | large (default)"
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'large'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disabled state. Boolean."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "isLoading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Loading state. Boolean."
-        },
-        "attribute": "is-loading",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "iconName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name of the icon to be used from iconset."
-        },
-        "attribute": "icon-name",
-        "reflect": true
-      },
-      "iconset": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Custom iconset if needed."
-        },
-        "attribute": "iconset",
-        "reflect": true,
-        "defaultValue": "'default'"
-      },
-      "iconPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'left' | 'right'",
-          "resolved": "\"left\" | \"right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Icon position: left (default) | right."
-        },
-        "attribute": "icon-position",
-        "reflect": true,
-        "defaultValue": "'left'"
-      },
-      "iconOnly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "false",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set button to FAB/icon only."
-        },
-        "attribute": "icon-only",
-        "reflect": true
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Property href switch button to link."
-        },
-        "attribute": "href",
-        "reflect": true
-      },
-      "target": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set target if link."
-        },
-        "attribute": "target",
-        "reflect": true,
-        "defaultValue": "\"_self\""
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Color base from color scheme. Default: accent."
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'accent'"
-      },
-      "fontColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'dark' | 'light'",
-          "resolved": "\"dark\" | \"light\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set the font color to dark or light."
-        },
-        "attribute": "font-color",
-        "reflect": true,
-        "defaultValue": "'dark'"
-      },
-      "textAlign": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'left' | 'center' | 'right'",
-          "resolved": "\"center\" | \"left\" | \"right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set text aligment for the button label.\nVales: left (default) | center | right."
-        },
-        "attribute": "text-align",
-        "reflect": true,
-        "defaultValue": "'left'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "styles": {}
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "color",
-        "methodName": "handleChangeColor"
-      }];
-  }
-}
-//# sourceMappingURL=cura-button-transparent.js.map

package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cura-button-transparent.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-transparent',\n  styleUrl: 'cura-button-transparent.scss',\n  shadow: true,\n})\nexport class CuraButtonTransparent {\n\n   /**\n    * Button size: small | medium | large (default)\n    */\n   @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'large';\n \n   /**\n    * Disabled state. Boolean.\n    */\n   @Prop({reflect: true}) disabled = false;\n   /**\n    * Loading state. Boolean.\n    */\n   @Prop({reflect: true}) isLoading = false;\n   \n   /**\n    * Name of the icon to be used from iconset.\n    */\n   @Prop({reflect: true}) iconName: string;\n   /**\n    * Custom iconset if needed.\n    */\n   @Prop({reflect: true}) iconset = 'default';\n   /**\n    * Icon position: left (default) | right.\n    */\n   @Prop({reflect: true}) iconPosition: 'left' | 'right' = 'left';\n   /**\n    * Set button to FAB/icon only.\n    */\n   @Prop({reflect: true}) iconOnly: false;\n \n   /**\n    * Property href switch button to link.\n    */\n   @Prop({reflect: true}) href: string;\n   /**\n    * Set target if link.\n    */\n   @Prop({reflect: true}) target = \"_self\";\n \n   /**\n    * Color base from color scheme. Default: accent.\n    */\n   @Prop() color = 'accent';\n   @Watch('color')\n   handleChangeColor() {\n     this.setColors();\n   }\n   /**\n    * Set the font color to dark or light.\n    */\n   @Prop({reflect: true}) fontColor: 'dark' | 'light' = 'dark';\n   /**\n    * Set text aligment for the button label.\n    * Vales: left (default) | center | right.\n    */\n   @Prop({reflect: true}) textAlign: 'left' | 'center' | 'right' = 'left';\n \n \n   @State() styles = {};\n \n   weights;\n \n   connectedCallback() {\n     this.weights = window.CuraAPI.theme.fonts.getWeights();\n     this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n     this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n     this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n     this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n     this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n     this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n     this.styles['--font-weight-medium'] = this.weights.medium;\n     this.styles['--text-align'] = this.textAlign;\n     this.setColors();\n   }\n   \n   getClasses() {\n     const classes = {};\n     classes[`${this.size.toLowerCase()}`] = true;\n     classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n     classes[`icon-only`] = this.iconOnly;\n     classes['inverted'] = this.fontColor === 'light';\n     classes['disabled'] = this.disabled;\n     classes['isLoading'] = this.isLoading;\n     return classes;\n   }\n \n   setColors() {\n     this.styles = {\n       ...this.styles,\n       '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n       '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n       '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n       '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n     };\n   }\n \n   getIcon() {\n     if (!this.iconName) return '';\n     const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n     const color = this.getSymbolColor();\n     return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n   }\n \n   getSymbolColor() {\n     return this.disabled \n       ? 'neutral-dark' \n       : this.fontColor === 'light' \n         ? 'neutral-white' \n         : `${this.color}-base`;\n   }\n \n   handleClick(e: Event) {\n     if (this.disabled || this.isLoading) e.preventDefault();\n   }\n \n   render() {\n     return (\n       <Host>\n       { this.href ? (\n         <a href={this.disabled ? '' : this.href} \n           target={this.target}\n           class={this.getClasses()}\n           style={this.styles}\n           onClick={(e) => this.handleClick(e)}>\n           <span class=\"button-container\">\n             { this.getIcon() }\n             <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n           </span>\n           <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n         </a>\n       ) : (\n         <button class={this.getClasses()}\n           style={this.styles} \n           disabled={this.disabled || null}\n           onClick={(e) => this.handleClick(e)}>\n           <span class=\"button-container\">\n             { this.getIcon() }\n             <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n           </span>\n           <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n         </button>\n       )}\n       </Host>\n     );\n   }\n\n}\n"]}

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

@@ -1,12 +0,0 @@
-:host {
-  width: var(--size);
-  height: var(--size);
-}
-:host svg {
-  display: inline-block;
-  stroke: var(--color);
-  width: var(--size);
-  height: var(--size);
-  stroke-width: var(--stroke);
-  fill: none;
-}

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

@@ -1,162 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class CuraIcon {
-  constructor() {
-    this.sizes = {
-      "128": { size: 128, stroke: 5.25 },
-      "72": { size: 72, stroke: 3.5 },
-      "64": { size: 64, stroke: 3.25 },
-      "48": { size: 48, stroke: 2.75 },
-      "40": { size: 40, stroke: 2.5 },
-      "32": { size: 32, stroke: 2.25 },
-      "24": { size: 24, stroke: 2 },
-      "20": { size: 20, stroke: 1.75 },
-      "16": { size: 16, stroke: 1.5 },
-      "default": { size: 24, stroke: 2 }
-    };
-    this.name = '';
-    this.color = 'neutral-base';
-    this.size = undefined;
-    this.iconset = 'default';
-    this.disabled = false;
-  }
-  sizeHandler(size) {
-    const scaledStroke = (iconSize) => {
-      return `${this.sizes[iconSize].stroke * (this.sizes.default.size / this.sizes[iconSize].size)}px`;
-    };
-    this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);
-    this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke("default"));
-  }
-  colorHandler() {
-    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color));
-  }
-  connectedCallback() {
-    this.assetsPath = window.CuraAPI.localAssetsPath;
-    this.sizeHandler(this.size);
-    this.colorHandler();
-  }
-  setHostProperty(prop, value) {
-    this.host.style.setProperty(prop, value);
-  }
-  render() {
-    return (h(Host, null, h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
-  }
-  static get is() { return "cura-icon"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cura-icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cura-icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'neutral-base'"
-      },
-      "size": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "string | number",
-          "resolved": "number | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "size",
-        "reflect": false
-      },
-      "iconset": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "iconset",
-        "reflect": true,
-        "defaultValue": "'default'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "size",
-        "methodName": "sizeHandler"
-      }, {
-        "propName": "color",
-        "methodName": "colorHandler"
-      }, {
-        "propName": "disabled",
-        "methodName": "colorHandler"
-      }];
-  }
-}
-//# sourceMappingURL=cura-icon.js.map

package/dist/collection/components/cura-icon/cura-icon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cura-icon.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,QAAQ;;IAUnB,UAAK,GAAG;MACN,KAAK,EAAE,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAC;MAChC,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;MAC7B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;MAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;MAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;MAC7B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;MAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAC;MAC3B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC;MAC9B,IAAI,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAC;MAC7B,SAAS,EAAE,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAC;KACjC,CAAC;gBAnB4B,EAAE;iBAChB,cAAc;;mBAEG,SAAS;oBACvB,KAAK;;EAkBxB,WAAW,CAAC,IAAqB;IAC/B,MAAM,YAAY,GAAG,CAAC,QAAyB,EAAE,EAAE;MACjD,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACpG,CAAC,CAAA;IACD,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC;IACtH,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;EACzG,CAAC;EAID,YAAY;IACV,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;EACtH,CAAC;EAID,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;IACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;EACtB,CAAC;EAED,eAAe,CAAC,IAAY,EAAE,KAAa;IACzC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;EAC3C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,eAAe,EACnC,KAAK,EAAC,4BAA4B;QAClC,WACE,SAAS,EAAE,GAAG,IAAI,CAAC,UAAU,kBAAkB,IAAI,CAAC,OAAO,QAAQ,IAAI,CAAC,IAAI,EAAE,GAC1E,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-icon',\n  styleUrl: 'cura-icon.scss',\n  shadow: true\n})\nexport class CuraIcon {\n\n  @Prop({reflect: true}) name = '';\n  @Prop() color = 'neutral-base';\n  @Prop() size: string | number;\n  @Prop({reflect: true}) iconset = 'default';\n  @Prop() disabled = false;\n\n  @Element() host: HTMLElement;\n\n  sizes = {\n    \"128\": {size: 128, stroke: 5.25},\n    \"72\": {size: 72, stroke: 3.5},\n    \"64\": {size: 64, stroke: 3.25},\n    \"48\": {size: 48, stroke: 2.75},\n    \"40\": {size: 40, stroke: 2.5},\n    \"32\": {size: 32, stroke: 2.25},\n    \"24\": {size: 24, stroke: 2},\n    \"20\": {size: 20, stroke: 1.75},\n    \"16\": {size: 16, stroke: 1.5},\n    \"default\": {size: 24, stroke: 2}\n  };\n\n  @Watch('size')\n  sizeHandler(size: string | number) {\n    const scaledStroke = (iconSize: string | number) => {\n      return `${this.sizes[iconSize].stroke * (this.sizes.default.size / this.sizes[iconSize].size)}px`;\n    }\n    this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);\n    this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke(\"default\"));\n  }\n\n  @Watch('color')\n  @Watch('disabled')\n  colorHandler() {\n    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color));\n  }\n\n  assetsPath: string;\n\n  connectedCallback() {\n    this.assetsPath = window.CuraAPI.localAssetsPath;\n    this.sizeHandler(this.size);\n    this.colorHandler();\n  }\n\n  setHostProperty(prop: string, value: string) {\n    this.host.style.setProperty(prop, value);\n  }\n\n  render() {\n    return (\n      <Host>\n        <svg\n          version=\"1.1\"\n          viewBox=\"0 0 24 24\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <use\n            xlinkHref={`${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}`}>\n          </use>\n        </svg>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/cura-icons-view/cura-icons-view.css

@@ -1,68 +0,0 @@
-:host {
-  display: block;
-  padding: 24px;
-  font-family: "Roboto", Arial, Helvetica, sans-serif;
-}
-
-.iconDetail {
-  display: block;
-}
-
-.iconSizes {
-  display: flex;
-  align-items: center;
-}
-.iconSizes .size {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  margin-right: 9px;
-  padding: 8px;
-}
-.iconSizes .size:last-child {
-  margin-right: 0;
-}
-.iconSizes .size span {
-  font-size: 10px;
-}
-.iconSizes.invert {
-  margin-top: 12px;
-}
-.iconSizes.invert .size {
-  background-color: #262626;
-  color: #F6F6F6;
-  border-radius: 3px;
-}
-
-.icons {
-  margin-top: 28px;
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-}
-.icons .icon {
-  position: relative;
-  padding: 4px;
-  cursor: pointer;
-  opacity: 0.6;
-  transition: opacity 0.2s linear;
-}
-.icons .icon span {
-  font-size: 12px;
-  padding: 6px;
-  box-sizing: border-box;
-  background: #000;
-  color: #FFF;
-  border-radius: 2px;
-  position: absolute;
-  top: -2px;
-  left: 50%;
-  transform: translateX(-50%) translateY(-100%);
-  display: none;
-}
-.icons .icon:hover {
-  opacity: 1;
-}
-.icons .icon:hover span {
-  display: block;
-}

package/dist/collection/components/cura-icons-view/cura-icons-view.js

@@ -1,33 +0,0 @@
-import { Host, h } from '@stencil/core';
-import iconsetdefaulticons from '../../assets/icons/iconset-default-list';
-export class CuraIconsView {
-  constructor() {
-    this.sizes = [16, 20, 24, 32, 40, 48, 64, 72, 128];
-    this.colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];
-    this.setSelected = (icon) => {
-      this.selected = icon;
-    };
-    this.selected = '360';
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "iconDetail" }, h("h4", null, this.selected), h("div", { class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size)))), h("div", { class: "iconSizes" }, this.colors.map(color => h("div", { class: "size" }, h("cura-icon", { name: this.selected, color: color }), h("span", null, color))), h("div", { class: "size" }, h("cura-icon", { name: this.selected, disabled: true }), h("span", null, "Disabled")))), h("div", { class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: "icon", onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon }), h("span", null, icon))))));
-  }
-  static get is() { return "cura-icons-view"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cura-icons-view.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cura-icons-view.css"]
-    };
-  }
-  static get states() {
-    return {
-      "selected": {}
-    };
-  }
-}
-//# sourceMappingURL=cura-icons-view.js.map

package/dist/collection/components/cura-icons-view/cura-icons-view.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cura-icons-view.js","sourceRoot":"","sources":["../../../src/components/cura-icons-view/cura-icons-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAO1E,MAAM,OAAO,aAAa;;IAExB,UAAK,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;IAC9C,WAAM,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;IAG9F,gBAAW,GAAG,CAAC,IAAI,EAAE,EAAE;MACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC,CAAA;oBAJmB,KAAK;;EAMzB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,YAAY;QACrB,cAAM,IAAI,CAAC,QAAQ,CAAO;QAC1B,WAAK,KAAK,EAAC,WAAW,IAClB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,CAAC,EAAE,CAEvB,WAAK,KAAK,EAAC,MAAM;UACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,GAAc;UACxD,gBAAQ,IAAI,CAAS,CACjB,CACP,CACG;QACN,WAAK,KAAK,EAAC,kBAAkB,IACzB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,CAAC,EAAE,CAEvB,WAAK,KAAK,EAAC,MAAM;UACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,eAAe,GAAa;UAC9E,gBAAQ,IAAI,CAAS,CACjB,CACP,CACG;QACN,WAAK,KAAK,EAAC,WAAW;UAClB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAE,KAAK,CAAC,EAAE,CACzB,WAAK,KAAK,EAAC,MAAM;YACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAc;YAC1D,gBAAQ,KAAK,CAAS,CAClB,CACP;UACD,WAAK,KAAK,EAAC,MAAM;YACf,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,SAAa;YACrD,2BAAqB,CACjB,CACF,CACF;MACN,WAAK,KAAK,EAAC,OAAO,IACd,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAC/B,WAAK,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACrD,iBAAW,IAAI,EAAE,IAAI,GAAc;QACnC,gBAAO,IAAI,CAAQ,CACf,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\n\n@Component({\n  tag: 'cura-icons-view',\n  styleUrl: 'cura-icons-view.scss',\n  shadow: true,\n})\nexport class CuraIconsView {\n\n  sizes = [16, 20, 24, 32, 40, 48, 64, 72, 128];\n  colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n  @State() selected = '360';\n\n  setSelected = (icon) => {\n    this.selected = icon;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"iconDetail\">\n          <h4>{ this.selected }</h4>\n          <div class=\"iconSizes\">\n            { this.sizes.map( size =>\n\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size}></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes invert\">\n            { this.sizes.map( size =>\n\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes\">\n            { this.colors.map( color =>\n              <div class=\"size\">\n                <cura-icon name={this.selected} color={color}></cura-icon>\n                <span>{ color }</span>\n              </div>\n            )}\n            <div class=\"size\">\n              <cura-icon name={this.selected} disabled></cura-icon>\n              <span>Disabled</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"icons\">\n          { iconsetdefaulticons.map(icon =>\n            <div class=\"icon\" onClick={() => this.setSelected(icon)}>\n              <cura-icon name={icon}></cura-icon>\n              <span>{icon}</span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}