wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/upload-item/vds-upload-item.js

@@ -0,0 +1,196 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+import { generateInformativeIcon, generateLabel } from "../base-item/base-item";
+export class VdsUploadItem {
+    constructor() {
+        /** Sets the item text value */
+        this.value = '';
+        /** Sets the item size */
+        this.size = 'medium';
+        /** Sets the item informative icon */
+        this.informativeIcon = 'link-closed';
+        /** Sets the item state */
+        this.status = 'default';
+        /** Sets the percentage filled value from 0 to 100 */
+        this.loadingValue = 75;
+        /**
+         * Sets the loop duration time for the indeterminate loop progress in miliseconds.
+         * Determinate and indeterminate state will be defined by adding or not the duration.
+         */
+        this.loadingDuration = 500;
+    }
+    renderInformativeIcon() {
+        if (this.status === 'loading') {
+            return (h("div", { class: "vds-upload-item__loading-indicator" }, h("vds-progress-circular", { value: this.loadingValue, duration: this.loadingDuration, scale: this.size === 'medium' ? 0.286 : 0.3575 })));
+        }
+        return generateInformativeIcon(this.informativeIcon, this.value, this.size, false, false, this.status === 'error');
+    }
+    generateLabel() {
+        return generateLabel(this.value, this.size, false, false, this.status === 'error');
+    }
+    handleIconButtonClick(event) {
+        event.stopPropagation();
+        this.actionIconClick.emit();
+    }
+    renderRemoveButton() {
+        return (h("div", { class: "vds-upload-item__remove-icon" }, h("vds-icon-button", { icon: this.status === 'loading' ? 'close' : 'trash', size: this.size === 'medium' ? 'small' : 'medium', variant: "secondary", setAriaLabel: "Remove item", onClick: (event => this.handleIconButtonClick(event)) })));
+    }
+    render() {
+        return (h(Host, { key: 'ab0650e6312bfe5faee20377f4325fd7467c5bb2' }, h("div", { key: 'fe0779f9529d0ad9e796ea1f1139c606a74ae908', class: combineClasses('vds-upload-item', `vds-upload-item--size-${this.size}`, `vds-upload-item--${this.status}`) }, h("div", { key: '690ea9fe83c861bc6dc7713c2625c731206c5e51', class: "vds-upload-item__content" }, this.renderInformativeIcon(), this.generateLabel(), this.renderRemoveButton()))));
+    }
+    static get is() { return "vds-upload-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-upload-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-upload-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the item text value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'medium'",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the item size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "informativeIcon": {
+                "type": "string",
+                "attribute": "informative-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the item informative icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'link-closed'"
+            },
+            "status": {
+                "type": "string",
+                "attribute": "status",
+                "mutable": false,
+                "complexType": {
+                    "original": "'loading' | 'error' | 'default'",
+                    "resolved": "\"default\" | \"error\" | \"loading\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the item state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "loadingValue": {
+                "type": "number",
+                "attribute": "loading-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the percentage filled value from 0 to 100"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "75"
+            },
+            "loadingDuration": {
+                "type": "number",
+                "attribute": "loading-duration",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the loop duration time for the indeterminate loop progress in miliseconds.\nDeterminate and indeterminate state will be defined by adding or not the duration."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "500"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "actionIconClick",
+                "name": "actionIconClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the icon button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=vds-upload-item.js.map

package/dist/collection/components/upload-item/vds-upload-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-upload-item.js","sourceRoot":"","sources":["../../../src/components/upload-item/vds-upload-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAOhF,MAAM,OAAO,aAAa;IAL1B;QAME,+BAA+B;QACvB,UAAK,GAAW,EAAE,CAAC;QAC3B,yBAAyB;QACjB,SAAI,GAAuB,QAAQ,CAAC;QAC5C,qCAAqC;QAC7B,oBAAe,GAAW,aAAa,CAAC;QAChD,0BAA0B;QAClB,WAAM,GAAoC,SAAS,CAAC;QAC5D,qDAAqD;QAC7C,iBAAY,GAAW,EAAE,CAAC;QAClC;;;WAGG;QACK,oBAAe,GAAW,GAAG,CAAC;KA4DvC;IAvDS,qBAAqB;QAC3B,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;YAC9B,OAAO,CACL,WAAK,KAAK,EAAC,oCAAoC;gBAC7C,6BACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,QAAQ,EAAE,IAAI,CAAC,eAAe,EAC9B,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,GAC9C,CACE,CACP,CAAC;QACJ,CAAC;QACD,OAAO,uBAAuB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC;IACrH,CAAC;IAEO,aAAa;QACnB,OAAO,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC;IACrF,CAAC;IAEO,qBAAqB,CAAC,KAAY;QACxC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC;IAEO,kBAAkB;QACxB,OAAO,CACL,WAAK,KAAK,EAAC,8BAA8B;YACvC,uBACE,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EACjD,OAAO,EAAC,WAAW,EACnB,YAAY,EAAC,aAAa,EAC1B,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GACrD,CACE,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,cAAc,CACxB,iBAAiB,EACjB,yBAAyB,IAAI,CAAC,IAAI,EAAE,EACpC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAClC;gBACC,4DAAK,KAAK,EAAC,0BAA0B;oBAClC,IAAI,CAAC,qBAAqB,EAAE;oBAC5B,IAAI,CAAC,aAAa,EAAE;oBACpB,IAAI,CAAC,kBAAkB,EAAE,CACtB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event } from '@stencil/core';\nimport { EventEmitter, HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { generateInformativeIcon, generateLabel } from '../base-item/base-item';\n\n@Component({\n  tag: 'vds-upload-item',\n  styleUrl: 'vds-upload-item.scss',\n  shadow: true,\n})\nexport class VdsUploadItem {\n  /** Sets the item text value */\n  @Prop() value: string = '';\n  /** Sets the item size */\n  @Prop() size: 'large' | 'medium' = 'medium';\n  /** Sets the item informative icon */\n  @Prop() informativeIcon: string = 'link-closed';\n  /** Sets the item state */\n  @Prop() status: 'loading' | 'error' | 'default' = 'default';\n  /** Sets the percentage filled value from 0 to 100 */\n  @Prop() loadingValue: number = 75;\n  /**\n   * Sets the loop duration time for the indeterminate loop progress in miliseconds.\n   * Determinate and indeterminate state will be defined by adding or not the duration.\n   */\n  @Prop() loadingDuration: number = 500;\n\n  /** Event emitted when the icon button is clicked */\n  @Event() actionIconClick: EventEmitter<void>;\n\n  private renderInformativeIcon() {\n    if (this.status === 'loading') {\n      return (\n        <div class=\"vds-upload-item__loading-indicator\">\n          <vds-progress-circular\n            value={this.loadingValue}\n            duration={this.loadingDuration}\n            scale={this.size === 'medium' ? 0.286 : 0.3575}\n          />\n        </div>\n      );\n    }\n    return generateInformativeIcon(this.informativeIcon, this.value, this.size, false, false, this.status === 'error');\n  }\n\n  private generateLabel() {\n    return generateLabel(this.value, this.size, false, false, this.status === 'error');\n  }\n\n  private handleIconButtonClick(event: Event) {\n    event.stopPropagation();\n    this.actionIconClick.emit();\n  }\n\n  private renderRemoveButton() {\n    return (\n      <div class=\"vds-upload-item__remove-icon\">\n        <vds-icon-button\n          icon={this.status === 'loading' ? 'close' : 'trash'}\n          size={this.size === 'medium' ? 'small' : 'medium'}\n          variant=\"secondary\"\n          setAriaLabel=\"Remove item\"\n          onClick={(event => this.handleIconButtonClick(event))}\n        />\n      </div>\n    );\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <div class={combineClasses(\n          'vds-upload-item',\n          `vds-upload-item--size-${this.size}`,\n          `vds-upload-item--${this.status}`\n        )}>\n          <div class=\"vds-upload-item__content\">\n            {this.renderInformativeIcon()}\n            {this.generateLabel()}\n            {this.renderRemoveButton()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}