@rededor/cura 0.5.4 → 1.0.0-alpha.0

package/dist/collection/components/accordion/cura-accordion-item/cura-accordion-item.js

@@ -1,199 +1,199 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class CuraAccordionItem {
-  constructor() {
-    this.label = '';
-    this.iconSize = 32;
-    this.openIcon = 'down';
-    this.closeIcon = 'up';
-    this.iconColor = '';
-    this.iconActiveColor = '';
-    this.colorMode = 'dark';
-    this.opened = false;
-    this.styles = {};
-  }
-  getIconColor() {
-    const inverted = this.colorMode === 'light';
-    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;
-    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;
-    return this.opened ? iconActiveColor : iconColor;
-  }
-  getClasses() {
-    const classes = {};
-    classes['accordion-item'] = true;
-    classes['active'] = this.opened;
-    classes['inverted'] = this.colorMode === 'light';
-    return classes;
-  }
-  accordionItemClick(_) {
-    this.opened = !this.opened;
-  }
-  render() {
-    return (h(Host, { slot: "accordion-item" }, h("div", { class: this.getClasses(), style: this.styles }, h("div", { class: "label", onClick: e => this.accordionItemClick(e) }, h("div", { class: "label-container" }, h("span", null, this.label), h("cura-icon", { name: this.opened ? this.closeIcon : this.openIcon, size: this.iconSize, color: this.getIconColor() }))), h("div", { class: 'content' }, h("div", { class: "content-wrapper" }, h("slot", null))))));
-  }
-  static get is() { return "cura-accordion-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cura-accordion-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cura-accordion-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Text label for accordion item"
-        },
-        "attribute": "label",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "iconSize": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Accordion items icons"
-        },
-        "attribute": "icon-size",
-        "reflect": true,
-        "defaultValue": "32"
-      },
-      "openIcon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "open-icon",
-        "reflect": true,
-        "defaultValue": "'down'"
-      },
-      "closeIcon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "close-icon",
-        "reflect": true,
-        "defaultValue": "'up'"
-      },
-      "iconColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Color scheme base color\n(By default, the icon will use the same color of 'color' and 'activeColor')"
-        },
-        "attribute": "icon-color",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "iconActiveColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "icon-active-color",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "colorMode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'dark' | 'light'",
-          "resolved": "\"dark\" | \"light\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set the color mode to dark or light"
-        },
-        "attribute": "color-mode",
-        "reflect": false,
-        "defaultValue": "'dark'"
-      },
-      "opened": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "opened",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "styles": {}
-    };
-  }
+    constructor() {
+        this.label = '';
+        this.iconSize = 32;
+        this.openIcon = 'down';
+        this.closeIcon = 'up';
+        this.iconColor = '';
+        this.iconActiveColor = '';
+        this.colorMode = 'dark';
+        this.opened = false;
+        this.styles = {};
+    }
+    getIconColor() {
+        const inverted = this.colorMode === 'light';
+        const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;
+        const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;
+        return this.opened ? iconActiveColor : iconColor;
+    }
+    getClasses() {
+        const classes = {};
+        classes['accordion-item'] = true;
+        classes['active'] = this.opened;
+        classes['inverted'] = this.colorMode === 'light';
+        return classes;
+    }
+    accordionItemClick(_) {
+        this.opened = !this.opened;
+    }
+    render() {
+        return (h(Host, { key: '8d46e9fd7c698c049a9020375cd77b5ebb9d38fd', slot: "accordion-item" }, h("div", { key: 'fdc11f228f3051f2452b0beb56e232de836fa382', class: this.getClasses(), style: this.styles }, h("div", { key: '7507b6c72d3433550b1590530c8070fe07431389', class: "label", onClick: e => this.accordionItemClick(e) }, h("div", { key: '8f6d6deb3fc2e864ac81abb744c5d4a32ad6b974', class: "label-container" }, h("span", { key: '7b1a4e96fa8c3dfdfffa7890c17ed8afacf3032f' }, this.label), h("cura-icon", { key: '0f9c6f9dc664ad96a7b02c084700fd8f75fbc677', name: this.opened ? this.closeIcon : this.openIcon, size: this.iconSize, color: this.getIconColor() }))), h("div", { key: 'fb1860aa74170ff18edc03b8171356cd1a1fd271', class: 'content' }, h("div", { key: '4d3c9252658e9c30521353579f0b3ef9bc8a3087', class: "content-wrapper" }, h("slot", { key: '067f12a534860a5942d01d5945d1e4d272e5a541' }))))));
+    }
+    static get is() { return "cura-accordion-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-accordion-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-accordion-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text label for accordion item"
+                },
+                "attribute": "label",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "iconSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accordion items icons"
+                },
+                "attribute": "icon-size",
+                "reflect": true,
+                "defaultValue": "32"
+            },
+            "openIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "open-icon",
+                "reflect": true,
+                "defaultValue": "'down'"
+            },
+            "closeIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "close-icon",
+                "reflect": true,
+                "defaultValue": "'up'"
+            },
+            "iconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color scheme base color\n(By default, the icon will use the same color of 'color' and 'activeColor')"
+                },
+                "attribute": "icon-color",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "iconActiveColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-active-color",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "colorMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dark' | 'light'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the color mode to dark or light"
+                },
+                "attribute": "color-mode",
+                "reflect": false,
+                "defaultValue": "'dark'"
+            },
+            "opened": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "opened",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {}
+        };
+    }
 }
 //# sourceMappingURL=cura-accordion-item.js.map

package/dist/collection/components/accordion/cura-accordion-item/cura-accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-accordion-item.js","sourceRoot":"","sources":["../../../../src/components/accordion/cura-accordion-item/cura-accordion-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOjE,MAAM,OAAO,iBAAiB;;iBAKW,EAAE;oBAMP,EAAE;oBACF,MAAM;qBACL,IAAI;qBAMJ,EAAE;2BACI,EAAE;qBAKL,MAAM;kBAEc,KAAK;kBAE7C,EAAE;;EAEpB,YAAY;IACV,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IAC5C,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC;IAC1E,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,OAAO,CAAC;IACxF,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;EACnD,CAAC;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;IAChC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IACjD,OAAO,OAAO,CAAC;EACjB,CAAC;EAED,kBAAkB,CAAC,CAAQ;IACzB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;EAC7B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB;MACzB,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;QAC/C,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;UACzD,WAAK,KAAK,EAAC,iBAAiB;YAC1B,gBAAO,IAAI,CAAC,KAAK,CAAQ;YACzB,iBAAW,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAc,CACxH,CACF;QACN,WAAK,KAAK,EAAC,SAAS;UAClB,WAAK,KAAK,EAAC,iBAAiB;YAC1B,eAAa,CACT,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host,  Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-accordion-item',\n  styleUrl: 'cura-accordion-item.scss',\n  shadow: true,\n})\nexport class CuraAccordionItem {\n\n  /**\n   * Text label for accordion item\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /** ***Properties below are inherited from the cura-accordion*** */\n  /**\n   * Accordion items icons\n   */\n  @Prop({reflect: true}) iconSize = 32;\n  @Prop({reflect: true}) openIcon = 'down';\n  @Prop({reflect: true}) closeIcon = 'up';\n\n  /**\n   * Color scheme base color\n   * (By default, the icon will use the same color of 'color' and 'activeColor')\n   */\n  @Prop({reflect: true}) iconColor = '';\n  @Prop({reflect: true}) iconActiveColor = '';\n\n  /**\n   * Set the color mode to dark or light\n   */\n  @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n  @Prop({ reflect: true, mutable: true }) opened: boolean = false;\n\n  @State() styles = {};\n\n  getIconColor() {\n    const inverted = this.colorMode === 'light';\n    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;\n    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;\n    return this.opened ? iconActiveColor : iconColor;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['accordion-item'] = true;\n    classes['active'] = this.opened;\n    classes['inverted'] = this.colorMode === 'light';\n    return classes;\n  }\n\n  accordionItemClick(_: Event) {\n    this.opened = !this.opened;\n  }\n\n  render() {\n    return (\n      <Host slot=\"accordion-item\">\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"label\" onClick={e => this.accordionItemClick(e)}>\n            <div class=\"label-container\">\n              <span>{this.label}</span>\n              <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={this.getIconColor()}></cura-icon>\n            </div>\n          </div>\n          <div class='content'>\n            <div class=\"content-wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-accordion-item.js","sourceRoot":"","sources":["../../../../src/components/accordion/cura-accordion-item/cura-accordion-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOjE,MAAM,OAAO,iBAAiB;;qBAKW,EAAE;wBAMP,EAAE;wBACF,MAAM;yBACL,IAAI;yBAMJ,EAAE;+BACI,EAAE;yBAKL,MAAM;sBAEc,KAAK;sBAE7C,EAAE;;IAEpB,YAAY;QACV,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;QAC5C,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC;QAC1E,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,OAAO,CAAC;QACxF,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;IACnD,CAAC;IAED,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;QACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;QAChC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;QACjD,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,gBAAgB;YACzB,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;gBAC/C,4DAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;oBACzD,4DAAK,KAAK,EAAC,iBAAiB;wBAC1B,+DAAO,IAAI,CAAC,KAAK,CAAQ;wBACzB,kEAAW,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAc,CACxH,CACF;gBACN,4DAAK,KAAK,EAAC,SAAS;oBAClB,4DAAK,KAAK,EAAC,iBAAiB;wBAC1B,8DAAa,CACT,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host,  Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-accordion-item',\n  styleUrl: 'cura-accordion-item.scss',\n  shadow: true,\n})\nexport class CuraAccordionItem {\n\n  /**\n   * Text label for accordion item\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /** ***Properties below are inherited from the cura-accordion*** */\n  /**\n   * Accordion items icons\n   */\n  @Prop({reflect: true}) iconSize = 32;\n  @Prop({reflect: true}) openIcon = 'down';\n  @Prop({reflect: true}) closeIcon = 'up';\n\n  /**\n   * Color scheme base color\n   * (By default, the icon will use the same color of 'color' and 'activeColor')\n   */\n  @Prop({reflect: true}) iconColor = '';\n  @Prop({reflect: true}) iconActiveColor = '';\n\n  /**\n   * Set the color mode to dark or light\n   */\n  @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n  @Prop({ reflect: true, mutable: true }) opened: boolean = false;\n\n  @State() styles = {};\n\n  getIconColor() {\n    const inverted = this.colorMode === 'light';\n    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;\n    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;\n    return this.opened ? iconActiveColor : iconColor;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['accordion-item'] = true;\n    classes['active'] = this.opened;\n    classes['inverted'] = this.colorMode === 'light';\n    return classes;\n  }\n\n  accordionItemClick(_: Event) {\n    this.opened = !this.opened;\n  }\n\n  render() {\n    return (\n      <Host slot=\"accordion-item\">\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"label\" onClick={e => this.accordionItemClick(e)}>\n            <div class=\"label-container\">\n              <span>{this.label}</span>\n              <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={this.getIconColor()}></cura-icon>\n            </div>\n          </div>\n          <div class='content'>\n            <div class=\"content-wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}