@six-group/ui-library 3.0.0-beta.1.7

package/dist/collection/components/six-file-upload/six-file-upload.js

@@ -0,0 +1,272 @@
+import { Component, Element, Event, h, Listen, Prop, State } from '@stencil/core';
+/**
+ * @since 2.0.0
+ * @status experimental
+ *
+ */
+export class SixFileUpload {
+  constructor() {
+    this.isOver = false;
+    /** Set to true if file control should be small. */
+    this.compact = false;
+    /** Set when button is disabled. */
+    this.disabled = false;
+    /** Allowed max file size in bytes. */
+    this.maxFileSize = undefined;
+    this.handleFiles = (files) => {
+      if (this.disabled) {
+        return;
+      }
+      const file = files.item(0);
+      if (!file) {
+        return;
+      }
+      if (this.accept && this.accept !== file.type) {
+        return this.fileUploadFailureEvent.emit({ reason: 'File has invalid MIME type.' });
+      }
+      if (this.maxFileSize && file.size > this.maxFileSize) {
+        return this.fileUploadFailureEvent.emit({ reason: 'File is too big.' });
+      }
+      this.fileUploadSuccessEvent.emit({ file });
+    };
+    this.onChange = () => {
+      var _a;
+      if ((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files) {
+        const files = this.fileInput.files;
+        this.handleFiles(files);
+        this.fileInput.value = '';
+      }
+    };
+  }
+  dragenterHandler() {
+    if (!this.disabled) {
+      this.isOver = true;
+    }
+  }
+  dragoverHandler() {
+    if (!this.disabled) {
+      this.isOver = true;
+    }
+  }
+  dragleaveHandler() {
+    if (!this.disabled) {
+      this.isOver = false;
+    }
+  }
+  dropHandler({ dataTransfer }) {
+    if (!this.disabled) {
+      this.isOver = false;
+      if (dataTransfer) {
+        this.handleFiles(dataTransfer.files);
+      }
+    }
+  }
+  componentDidLoad() {
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+      this.host.addEventListener(eventName, this.preventDefaults, false);
+      document.body.addEventListener(eventName, this.preventDefaults, false);
+    });
+  }
+  disconnectedCallback() {
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+      this.host.removeEventListener(eventName, this.preventDefaults, false);
+      document.body.removeEventListener(eventName, this.preventDefaults, false);
+    });
+  }
+  preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  renderLabel() {
+    return (this.label ||
+      (this.compact ? ('Upload') : (h("span", null,
+        "Drop files to upload, or ",
+        h("span", { class: "six-file-upload__label--highlighted" }, "browse")))));
+  }
+  render() {
+    const Container = this.compact ? 'six-button' : 'six-card';
+    return (h("div", { class: {
+        'six-file-upload': true,
+        'six-file-upload--disabled': this.disabled,
+      } },
+      h(Container, { class: {
+          'six-file-upload__container--compact': this.compact,
+          'six-file-upload__container--full': !this.compact,
+        } },
+        this.compact && (h("span", { slot: "prefix" },
+          h("six-icon", { class: "six-file-upload__label-icon" }, "arrow_circle_up"))),
+        h("div", { class: {
+            'six-file-upload__drop-zone': true,
+            'six-file-upload__drop-zone--hover': this.isOver,
+            'six-file-upload__drop-zone--compact': this.compact,
+          } },
+          h("span", null, this.renderLabel()),
+          h("input", { class: "six-file-upload__input", type: "file", name: "resume", disabled: this.disabled, accept: this.accept, onChange: this.onChange, ref: (el) => (this.fileInput = el) })))));
+  }
+  static get is() { return "six-file-upload"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-file-upload.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-file-upload.css"]
+  }; }
+  static get properties() { return {
+    "compact": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true if file control should be small."
+      },
+      "attribute": "compact",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label of the drop area."
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set when button is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "accept": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Accepted MIME-Types."
+      },
+      "attribute": "accept",
+      "reflect": false
+    },
+    "maxFileSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number | undefined",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Allowed max file size in bytes."
+      },
+      "attribute": "max-file-size",
+      "reflect": false,
+      "defaultValue": "undefined"
+    }
+  }; }
+  static get states() { return {
+    "isOver": {}
+  }; }
+  static get events() { return [{
+      "method": "fileUploadSuccessEvent",
+      "name": "six-file-upload-success",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Triggers when a file is added."
+      },
+      "complexType": {
+        "original": "SixFileUploadSuccessPayload",
+        "resolved": "SixFileUploadSuccessPayload",
+        "references": {
+          "SixFileUploadSuccessPayload": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "fileUploadFailureEvent",
+      "name": "six-file-upload-failure",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Triggers when an uploaded file doesn't match MIME type or max file size."
+      },
+      "complexType": {
+        "original": "SixFileUploadFailurePayload",
+        "resolved": "SixFileUploadFailurePayload",
+        "references": {
+          "SixFileUploadFailurePayload": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get listeners() { return [{
+      "name": "dragenter",
+      "method": "dragenterHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "dragover",
+      "method": "dragoverHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "dragleave",
+      "method": "dragleaveHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "drop",
+      "method": "dropHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }]; }
+}

package/dist/collection/components/six-footer/six-footer.css

@@ -0,0 +1,20 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+:host {
+  display: block;
+}
+
+.six-footer {
+  color: var(--six-color-web-rock-900);
+  padding: var(--six-spacing-x-small) 0;
+  text-align: center;
+  width: 100%;
+  background-color: var(--six-footer-background-color);
+  box-shadow: var(--six-shadow-x-large-top);
+}

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

@@ -0,0 +1,21 @@
+import { Component, h } from '@stencil/core';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the content of the footer.
+ */
+export class SixFooter {
+  render() {
+    return (h("footer", { class: "six-footer" },
+      h("slot", null)));
+  }
+  static get is() { return "six-footer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-footer.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-footer.css"]
+  }; }
+}

package/dist/collection/components/six-form/six-form.css

@@ -0,0 +1,11 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+:host {
+  display: block;
+}