@six-group/ui-library 3.0.0-beta.1.8 → 4.0.0-beta.1

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 /**
  * @since 1.0
  * @status stable
@@ -7,9 +7,7 @@ import { Component, h, Prop } from '@stencil/core';
  */
 export class SixIcon {
   constructor() {
-    /** The icon's size. */
     this.size = 'inherit';
-    /** If set to true the default material outlined icons are not used. */
     this.filled = false;
   }
   render() {
@@ -25,53 +23,59 @@ export class SixIcon {
         'icon--xxlarge': this.size === 'xxLarge',
         'icon--xxxlarge': this.size === 'xxxLarge',
         'icon--inherit': this.size === 'inherit',
-      } },
-      h("slot", null)));
+      } }, h("slot", null)));
   }
   static get is() { return "six-icon"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-icon.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-icon.css"]
-  }; }
-  static get properties() { return {
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "| 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge'",
-        "resolved": "\"inherit\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The icon's size."
-      },
-      "attribute": "size",
-      "reflect": true,
-      "defaultValue": "'inherit'"
-    },
-    "filled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If set to true the default material outlined icons are not used."
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "| 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge'",
+          "resolved": "\"inherit\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The icon's size."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'inherit'"
       },
-      "attribute": "filled",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
+      "filled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If set to true the default material outlined icons are not used."
+        },
+        "attribute": "filled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
 }
+//# sourceMappingURL=six-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-icon.js","sourceRoot":"","sources":["../../../src/components/six-icon/six-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,OAAO;;gBAUD,SAAS;kBAGT,KAAK;;EAEtB,MAAM;IACJ,OAAO,CACL,SACE,KAAK,EAAE;QACL,gBAAgB,EAAE,IAAI;QACtB,yBAAyB,EAAE,CAAC,IAAI,CAAC,MAAM;QACvC,uBAAuB,EAAE,IAAI,CAAC,MAAM;QACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;QAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;OACzC;MAED,eAAa,CACX,CACL,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the material icon name.\n */\n\n@Component({\n  tag: 'six-icon',\n  styleUrls: ['six-icon.scss'],\n  shadow: true,\n})\nexport class SixIcon {\n  /** The icon's size. */\n  @Prop({ reflect: true }) size:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** If set to true the default material outlined icons are not used. */\n  @Prop() filled = false;\n\n  render() {\n    return (\n      <i\n        class={{\n          'material-icons': true,\n          'material-icons-outlined': !this.filled,\n          'material-icons-filled': this.filled,\n          'icon--xsmall': this.size === 'xSmall',\n          'icon--small': this.size === 'small',\n          'icon--medium': this.size === 'medium',\n          'icon--large': this.size === 'large',\n          'icon--xlarge': this.size === 'xLarge',\n          'icon--xxlarge': this.size === 'xxLarge',\n          'icon--xxxlarge': this.size === 'xxxLarge',\n          'icon--inherit': this.size === 'inherit',\n        }}\n      >\n        <slot></slot>\n      </i>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-icon-button/six-icon-button.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 import { focusVisible } from '../../utils/focus-visible';
 /**
  * @since 1.0
@@ -10,16 +10,17 @@ import { focusVisible } from '../../utils/focus-visible';
  */
 export class SixIconButton {
   constructor() {
-    /** The icon's size. */
-    this.size = 'medium';
-    /** Set to true to disable the button. */
-    this.disabled = false;
     this.handleClickEvent = (event) => {
       if (this.disabled) {
         event.preventDefault();
         event.stopPropagation();
       }
     };
+    this.name = undefined;
+    this.size = 'medium';
+    this.label = undefined;
+    this.disabled = false;
+    this.html = undefined;
   }
   componentDidLoad() {
     if (this.button) {
@@ -33,110 +34,113 @@ export class SixIconButton {
   }
   render() {
     const html = this.html && h("span", { innerHTML: this.html });
-    return (h("div", { onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } },
-      h("button", { ref: (el) => (this.button = el), part: "base", disabled: this.disabled, class: {
-          'icon-button': true,
-          'icon-button--disabled': this.disabled,
-        }, type: "button", "aria-label": this.label },
-        h("six-icon", { "aria-hidden": "true", size: this.size }, this.name),
-        h("slot", null),
-        html)));
+    return (h("div", { onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h("button", { ref: (el) => (this.button = el), part: "base", disabled: this.disabled, class: {
+        'icon-button': true,
+        'icon-button--disabled': this.disabled,
+      }, type: "button", "aria-label": this.label }, h("six-icon", { "aria-hidden": "true", size: this.size }, this.name), h("slot", null), html)));
   }
   static get is() { return "six-icon-button"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-icon-button.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-icon-button.css"]
-  }; }
-  static get properties() { return {
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The name of the icon to draw."
-      },
-      "attribute": "name",
-      "reflect": true
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The icon's size."
-      },
-      "attribute": "size",
-      "reflect": true,
-      "defaultValue": "'medium'"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\nalways include a label that describes what the icon button does."
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-icon-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-icon-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the icon to draw."
+        },
+        "attribute": "name",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to disable the button."
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The icon's size."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'medium'"
       },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "html": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\nalways include a label that describes what the icon button does."
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "HTML symbol code or entity."
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to disable the button."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "html",
-      "reflect": true
-    }
-  }; }
+      "html": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "HTML symbol code or entity."
+        },
+        "attribute": "html",
+        "reflect": true
+      }
+    };
+  }
 }
+//# sourceMappingURL=six-icon-button.js.map

package/dist/collection/components/six-icon-button/six-icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-icon-button.js","sourceRoot":"","sources":["../../../src/components/six-icon-button/six-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD;;;;;;;GAOG;AAOH,MAAM,OAAO,aAAa;;IA2DhB,qBAAgB,GAAG,CAAC,KAAK,EAAE,EAAE;MACnC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;OACzB;IACH,CAAC,CAAC;;gBAzD2G,QAAQ;;oBASjF,KAAK;;;EAKzC,gBAAgB;IACd,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACnC;EACH,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrC;EACH,CAAC;EAED,MAAM;IACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,YAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAEzD,OAAO,CACL,WAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE;MAC5F,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;UACL,aAAa,EAAE,IAAI;UACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;SACvC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK;QAEtB,+BAAsB,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,IAAI,CACD;QACX,eAAQ;QACP,IAAI,CACE,CACL,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  button: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html: string;\n\n  componentDidLoad() {\n    if (this.button) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={this.disabled}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type=\"button\"\n          aria-label={this.label}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"]}