globuswebcomponents 1.9.9 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{gb-avatar_27.cjs.entry.js → gb-avatar_30.cjs.entry.js} +161 -7
- package/dist/cjs/gb-avatar_30.cjs.entry.js.map +1 -0
- package/dist/cjs/globuscomponents.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/gb-file-upload-item-base/gb-file-upload-item-base.js +17 -5
- package/dist/collection/components/gb-file-upload-item-base/gb-file-upload-item-base.js.map +1 -1
- package/dist/collection/components/gb-step-base/gb-step-base.js +28 -1
- package/dist/collection/components/gb-step-base/gb-step-base.js.map +1 -1
- package/dist/collection/components/gb-stepper-vertical-icons-with-text/gb-stepper-vertical-icons-with-text.js +57 -15
- package/dist/collection/components/gb-stepper-vertical-icons-with-text/gb-stepper-vertical-icons-with-text.js.map +1 -1
- package/dist/components/gb-file-upload-item-base.js +1 -1
- package/dist/components/gb-file-upload.js +1 -1
- package/dist/components/gb-step-base.js +1 -1
- package/dist/components/gb-stepper-horizontal-icons-centered.js +1 -1
- package/dist/components/gb-stepper-horizontal-line-with-text.js +1 -1
- package/dist/components/gb-stepper-vertical-icons-with-text.js +52 -16
- package/dist/components/gb-stepper-vertical-icons-with-text.js.map +1 -1
- package/dist/components/{p-FyJoYyy5.js → p-C-Nb1SEW.js} +19 -7
- package/dist/components/p-C-Nb1SEW.js.map +1 -0
- package/dist/components/{p-Bltqk_JB.js → p-Xgolh87B.js} +25 -4
- package/dist/components/p-Xgolh87B.js.map +1 -0
- package/dist/docs.json +2 -2
- package/dist/esm/{gb-avatar_27.entry.js → gb-avatar_30.entry.js} +159 -8
- package/dist/esm/gb-avatar_30.entry.js.map +1 -0
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-47e0cc01.entry.js → p-578fcdd9.entry.js} +2 -2
- package/dist/globuscomponents/p-578fcdd9.entry.js.map +1 -0
- package/dist/types/components/gb-file-upload-item-base/gb-file-upload-item-base.d.ts +4 -0
- package/dist/types/components/gb-step-base/gb-step-base.d.ts +5 -0
- package/dist/types/components/gb-stepper-vertical-icons-with-text/gb-stepper-vertical-icons-with-text.d.ts +7 -1
- package/package.json +1 -1
- package/dist/cjs/gb-avatar_27.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-featured-icon.gb-step-base.entry.cjs.js.map +0 -1
- package/dist/cjs/gb-featured-icon_2.cjs.entry.js +0 -70
- package/dist/cjs/gb-featured-icon_2.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-stepper-vertical-icons-with-text.cjs.entry.js +0 -40
- package/dist/cjs/gb-stepper-vertical-icons-with-text.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-stepper-vertical-icons-with-text.entry.cjs.js.map +0 -1
- package/dist/components/p-Bltqk_JB.js.map +0 -1
- package/dist/components/p-FyJoYyy5.js.map +0 -1
- package/dist/esm/gb-avatar_27.entry.js.map +0 -1
- package/dist/esm/gb-featured-icon.gb-step-base.entry.js.map +0 -1
- package/dist/esm/gb-featured-icon_2.entry.js +0 -67
- package/dist/esm/gb-featured-icon_2.entry.js.map +0 -1
- package/dist/esm/gb-stepper-vertical-icons-with-text.entry.js +0 -38
- package/dist/esm/gb-stepper-vertical-icons-with-text.entry.js.map +0 -1
- package/dist/globuscomponents/gb-featured-icon.gb-step-base.entry.esm.js.map +0 -1
- package/dist/globuscomponents/gb-stepper-vertical-icons-with-text.entry.esm.js.map +0 -1
- package/dist/globuscomponents/p-1238de2d.entry.js +0 -2
- package/dist/globuscomponents/p-1238de2d.entry.js.map +0 -1
- package/dist/globuscomponents/p-47e0cc01.entry.js.map +0 -1
- package/dist/globuscomponents/p-bf994403.entry.js +0 -2
- package/dist/globuscomponents/p-bf994403.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-file-upload-item-base.js","sourceRoot":"","sources":["../../../src/components/gb-file-upload-item-base/gb-file-upload-item-base.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Fragment, Event, EventEmitter, State, Watch } from '@stencil/core';\r\nimport { FileIconTypes, FileUploadIconType, FileUploadStates, GeneralSizes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-file-upload-item-base',\r\n styleUrl: 'gb-file-upload-item-base.css',\r\n shadow: true,\r\n})\r\nexport class GbFileUploadItemBase {\r\n @Prop() icon: FileUploadIconType;\r\n @Prop() label: string = '';\r\n @Prop() showLabel: boolean = false;\r\n @Prop() state: FileUploadStates;\r\n @Prop() heightSize: GeneralSizes = 'md';\r\n @Prop() fileType: FileIconTypes;\r\n @Prop() progress: number;\r\n @Prop() fileSize: number;\r\n @Prop() fileName: string;\r\n @State() internalState: FileUploadStates;\r\n @State() internalProgress: number;\r\n @Event() uploadButtonClicked: EventEmitter<void>;\r\n @Event() cancelUpload: EventEmitter<void>;\r\n @Event() deleteFileUpload: EventEmitter<void>;\r\n @Event() tryAgainClicked: EventEmitter<void>;\r\n\r\n @Watch('state')\r\n onStateChange(newValue: FileUploadStates, oldValue: FileUploadStates) {\r\n console.log('state changed from', oldValue, 'to', newValue);\r\n this.internalState = newValue;\r\n }\r\n\r\n @Watch('progress')\r\n onProgressChange(newValue: number, oldValue: number) {\r\n console.log('progress changed from', oldValue, 'to', newValue);\r\n this.internalProgress = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalState = this.state;\r\n this.internalProgress = this.progress;\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"overall_container\">\r\n {this.showLabel && <p class=\"label_text text-sm-semi-bold\">{this.label}</p>}\r\n <div class={`file_upload_item_base_container ${this.state} ${this.heightSize}`}>\r\n {this.state === 'default' && (\r\n <>\r\n {this.heightSize === 'md' && [\r\n <div class={`default ${this.heightSize}`}>\r\n <div class=\"file_upload_icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z\"\r\n fill=\"#4B5565\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"default_content\">\r\n <p class=\"upload_text text-sm-semi-bold\">Tap to upload</p>\r\n <p class=\"file_type_text text-xs-regular\">SVG, PNG, JPG or GIF (max. 800x400px)</p>\r\n </div>\r\n </div>,\r\n <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" class=\"upload_btn_md\" icon-leading={true} onClick={() => this.uploadButtonClicked.emit()}>\r\n <p>Upload</p>\r\n </gb-button>,\r\n ]}\r\n {this.heightSize === 'lg' && [\r\n <div class={`default ${this.heightSize}`}>\r\n <div class=\"file_upload_icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z\"\r\n fill=\"#4B5565\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"default_content\">\r\n <p class={`upload_text text-sm-regular ${this.heightSize}`}>\r\n <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" onClick={() => this.uploadButtonClicked.emit()}>\r\n <p>Click to upload</p>\r\n </gb-button>\r\n or drag and drop\r\n </p>\r\n <p class=\"file_type_text text-xs-regular\">SVG, PNG, JPG or GIF (max. 800x400px)</p>\r\n </div>\r\n </div>,\r\n ]}\r\n </>\r\n )}\r\n {this.state === 'in_progress' && (\r\n <div class={`in_progress_div ${this.heightSize}`}>\r\n <div class=\"file_icon\">\r\n <gb-file-type-icon file-style={this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null} file-type={this.fileType}></gb-file-type-icon>\r\n </div>\r\n <div class=\"in_progress_content\">\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>\r\n {this.fileName}.{this.fileType}\r\n </p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>{this.fileSize}</p>\r\n <gb-progress-bar progress={this.internalProgress} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\" onClick={() => this.cancelUpload.emit()}></gb-button-close>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>\r\n {this.fileName}.{this.fileType}\r\n </p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>{this.fileSize}</p>\r\n <gb-progress-bar progress={this.internalProgress} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\" onClick={() => this.cancelUpload.emit()}></gb-button-close>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.state === 'complete' && (\r\n <div class={`complete ${this.heightSize}`}>\r\n <div class=\"file_icon\">\r\n <gb-file-type-icon file-style={this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null} file-type={this.fileType}></gb-file-type-icon>\r\n </div>\r\n <div class={`complete_content ${this.heightSize}`}>\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>\r\n {this.fileName}.{this.fileType}\r\n </p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>\r\n {`${this.fileSize}`} – {`${this.internalProgress}`}% uploaded\r\n </p>\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/delete-02.svg\"\r\n class=\"delete_button\"\r\n onClick={() => this.deleteFileUpload.emit()}\r\n ></gb-button>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>\r\n {this.fileName}.{this.fileType}\r\n </p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>\r\n {this.fileSize} – {`${this.internalProgress}`} % uploaded\r\n </p>\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"default\"\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/delete-02.svg\"\r\n onClick={() => this.deleteFileUpload.emit()}\r\n >\r\n <p>Clear</p>\r\n </gb-button>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.state === 'error' && (\r\n <div class={`error ${this.heightSize}`}>\r\n <div class=\"file_icon\">\r\n <gb-file-type-icon file-style={this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null} file-type={this.fileType}></gb-file-type-icon>\r\n </div>\r\n <div class=\"error_content\">\r\n {this.heightSize === 'md' && (\r\n <>\r\n <div class=\"error_content_text\">\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>\r\n {this.fileName}.{this.fileType}\r\n </p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>Upload failed, please try again</p>\r\n </div>\r\n <div class=\"try_again_btn\">\r\n <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" destructive={true} onClick={() => this.tryAgainClicked.emit()}>\r\n <p>Try again</p>\r\n </gb-button>\r\n </div>\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n destructive={true}\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/delete-02.svg\"\r\n class=\"delete_button\"\r\n onClick={() => this.deleteFileUpload.emit()}\r\n ></gb-button>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>\r\n {this.fileName}.{this.fileType}\r\n </p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>\r\n {this.fileSize} – {`${this.internalProgress}`}% uploaded\r\n </p>\r\n <div class=\"btns\">\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"default\"\r\n destructive={true}\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/delete-02.svg\"\r\n onClick={() => this.deleteFileUpload.emit()}\r\n >\r\n <p>Clear</p>\r\n </gb-button>\r\n <div class=\"btn\">\r\n <gb-button size=\"sm\" hierarchy=\"link_color\" icon={StateEnum.Default} destructive={true} class=\"btn\" onClick={() => this.tryAgainClicked.emit()}>\r\n <p>Try again</p>\r\n </gb-button>\r\n </div>\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"gb-file-upload-item-base.js","sourceRoot":"","sources":["../../../src/components/gb-file-upload-item-base/gb-file-upload-item-base.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Fragment, Event, EventEmitter, State, Watch } from '@stencil/core';\r\nimport { FileIconTypes, FileUploadIconType, FileUploadStates, GeneralSizes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-file-upload-item-base',\r\n styleUrl: 'gb-file-upload-item-base.css',\r\n shadow: true,\r\n})\r\nexport class GbFileUploadItemBase {\r\n @Prop() icon: FileUploadIconType;\r\n @Prop() label: string = '';\r\n @Prop() showLabel: boolean = false;\r\n @Prop() state: FileUploadStates;\r\n @Prop() heightSize: GeneralSizes = 'md';\r\n @Prop() fileType: FileIconTypes;\r\n @Prop() progress: number;\r\n @Prop() fileSize: number;\r\n @Prop() fileName: string;\r\n @State() internalState: FileUploadStates;\r\n @State() internalProgress: number;\r\n @Event() uploadButtonClicked: EventEmitter<void>;\r\n @Event() cancelUpload: EventEmitter<void>;\r\n @Event() deleteFileUpload: EventEmitter<void>;\r\n @Event() tryAgainClicked: EventEmitter<void>;\r\n\r\n @Watch('state')\r\n onStateChange(newValue: FileUploadStates, oldValue: FileUploadStates) {\r\n console.log('state changed from', oldValue, 'to', newValue);\r\n this.internalState = newValue;\r\n }\r\n\r\n @Watch('progress')\r\n onProgressChange(newValue: number, oldValue: number) {\r\n console.log('progress changed from', oldValue, 'to', newValue);\r\n this.internalProgress = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalState = this.state;\r\n this.internalProgress = this.progress;\r\n }\r\n\r\n onUploadButtonClicked() {\r\n this.uploadButtonClicked.emit();\r\n }\r\n\r\n onCancelButtonClicked() {\r\n this.cancelUpload.emit();\r\n }\r\n\r\n onTryAgainClicked() {\r\n this.tryAgainClicked.emit();\r\n }\r\n\r\n onDeleteFileUploadClicked() {\r\n this.deleteFileUpload.emit();\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"overall_container\">\r\n {this.showLabel && <p class=\"label_text text-sm-semi-bold\">{this.label}</p>}\r\n <div class={`file_upload_item_base_container ${this.state} ${this.heightSize}`}>\r\n {this.state === 'default' && (\r\n <>\r\n {this.heightSize === 'md' && [\r\n <div class={`default ${this.heightSize}`}>\r\n <div class=\"file_upload_icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z\"\r\n fill=\"#4B5565\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"default_content\">\r\n <p class=\"upload_text text-sm-semi-bold\">Tap to upload</p>\r\n <p class=\"file_type_text text-xs-regular\">SVG, PNG, JPG or GIF (max. 800x400px)</p>\r\n </div>\r\n </div>,\r\n <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" class=\"upload_btn_md\" icon-leading={true} onClick={() => this.onUploadButtonClicked()}>\r\n <p>Upload</p>\r\n </gb-button>,\r\n ]}\r\n {this.heightSize === 'lg' && [\r\n <div class={`default ${this.heightSize}`}>\r\n <div class=\"file_upload_icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z\"\r\n fill=\"#4B5565\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"default_content\">\r\n <p class={`upload_text text-sm-regular ${this.heightSize}`}>\r\n <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" onClick={() => this.onUploadButtonClicked()}>\r\n <p>Click to upload</p>\r\n </gb-button>\r\n or drag and drop\r\n </p>\r\n <p class=\"file_type_text text-xs-regular\">SVG, PNG, JPG or GIF (max. 800x400px)</p>\r\n </div>\r\n </div>,\r\n ]}\r\n </>\r\n )}\r\n {this.state === 'in_progress' && (\r\n <div class={`in_progress_div ${this.heightSize}`}>\r\n <div class=\"file_icon\">\r\n <gb-file-type-icon file-style={this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null} file-type={this.fileType}></gb-file-type-icon>\r\n </div>\r\n <div class=\"in_progress_content\">\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>\r\n {this.fileName}.{this.fileType}\r\n </p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>{this.fileSize}</p>\r\n <gb-progress-bar progress={this.internalProgress} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\" onClick={() => this.onCancelButtonClicked()}></gb-button-close>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>\r\n {this.fileName}.{this.fileType}\r\n </p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>{this.fileSize}</p>\r\n <gb-progress-bar progress={this.internalProgress} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\" onClick={() => this.onCancelButtonClicked()}></gb-button-close>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.state === 'complete' && (\r\n <div class={`complete ${this.heightSize}`}>\r\n <div class=\"file_icon\">\r\n <gb-file-type-icon file-style={this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null} file-type={this.fileType}></gb-file-type-icon>\r\n </div>\r\n <div class={`complete_content ${this.heightSize}`}>\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>\r\n {this.fileName}.{this.fileType}\r\n </p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>\r\n {`${this.fileSize}`} – {`${this.internalProgress}`}% uploaded\r\n </p>\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/delete-02.svg\"\r\n class=\"delete_button\"\r\n onClick={() => this.onDeleteFileUploadClicked()}\r\n ></gb-button>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>\r\n {this.fileName}.{this.fileType}\r\n </p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>\r\n {this.fileSize} – {`${this.internalProgress}`} % uploaded\r\n </p>\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"default\"\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/delete-02.svg\"\r\n onClick={() => this.onDeleteFileUploadClicked()}\r\n >\r\n <p>Clear</p>\r\n </gb-button>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.state === 'error' && (\r\n <div class={`error ${this.heightSize}`}>\r\n <div class=\"file_icon\">\r\n <gb-file-type-icon file-style={this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null} file-type={this.fileType}></gb-file-type-icon>\r\n </div>\r\n <div class=\"error_content\">\r\n {this.heightSize === 'md' && (\r\n <>\r\n <div class=\"error_content_text\">\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>\r\n {this.fileName}.{this.fileType}\r\n </p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>Upload failed, please try again</p>\r\n </div>\r\n <div class=\"try_again_btn\">\r\n <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" destructive={true} onClick={() => this.onTryAgainClicked()}>\r\n <p>Try again</p>\r\n </gb-button>\r\n </div>\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"only\"\r\n destructive={true}\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/delete-02.svg\"\r\n class=\"delete_button\"\r\n onClick={() => this.onDeleteFileUploadClicked()}\r\n ></gb-button>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>\r\n {this.fileName}.{this.fileType}\r\n </p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>\r\n {this.fileSize} – {`${this.internalProgress}`}% uploaded\r\n </p>\r\n <div class=\"btns\">\r\n <gb-button\r\n size=\"sm\"\r\n hierarchy=\"tertiary_gray\"\r\n icon=\"default\"\r\n destructive={true}\r\n icon-leading={true}\r\n icon-leading-swap=\"assets/delete-02.svg\"\r\n onClick={() => this.onDeleteFileUploadClicked()}\r\n >\r\n <p>Clear</p>\r\n </gb-button>\r\n <div class=\"btn\">\r\n <gb-button size=\"sm\" hierarchy=\"link_color\" icon={StateEnum.Default} destructive={true} class=\"btn\" onClick={() => this.onTryAgainClicked()}>\r\n <p>Try again</p>\r\n </gb-button>\r\n </div>\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -27,8 +27,20 @@ export class GbStepBase {
|
|
|
27
27
|
return 'text-md-regular';
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
|
+
componentWillLoad() {
|
|
31
|
+
this.internalState = this.state;
|
|
32
|
+
this.internalStatus = this.status;
|
|
33
|
+
}
|
|
34
|
+
onStatusChange(newValue, oldValue) {
|
|
35
|
+
console.log('state changed from', oldValue, 'to', newValue);
|
|
36
|
+
this.internalStatus = newValue;
|
|
37
|
+
}
|
|
38
|
+
onStateChange(newValue, oldValue) {
|
|
39
|
+
console.log('state changed from', oldValue, 'to', newValue);
|
|
40
|
+
this.internalState = newValue;
|
|
41
|
+
}
|
|
30
42
|
render() {
|
|
31
|
-
return (h(Fragment, null, this.type === 'text_line' && (h(Fragment, null, h("div", { key: '
|
|
43
|
+
return (h(Fragment, null, this.type === 'text_line' && (h(Fragment, null, h("div", { key: '6f13cd838b474cfbf2b60121fb270ee8cbc9f5b5', class: `bar ${this.size} ${this.status} ${this.internalState}` }), this.showContent && (h("div", { key: '842ff25533245c21abd5cd4d04537cd44fc4bf1a', class: `text_line_div ${this.size} ${this.status} ${this.internalState}` }, h("div", { key: '35e8e407d20ecf983a014590a37371fd77e71a8b', class: `text_line_div_content` }, h("p", { key: '8d2ef5b2ca74f073789847ce7dbcd3f530027812', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), this.showSupportingText && h("p", { key: 'a9bc549a0632bed2716a91705643e3e34bfc6086', class: `text_line_text text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))))), this.type === 'icon_only' && (h("div", { key: '13123760c6b77d14baf7bc1c0dd3196cdf3a4d40', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && h("div", { key: '63a02db7bc9e475f15492a6141001bbedf722f06', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '4dc836247e160dee3c41aab565a0bbba7943eb3d', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, h("path", { key: '92a9a3b24f5c5762d4a166027ca4b8a91dc58b66', d: "M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1", stroke: "#075DB2", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.type === 'icon_left' && (h("div", { key: '092270367a30416d497951e2590062976bc46475', class: `icon_left_div ${this.size}` }, h("div", { key: '9e81f3b4215debed190058fecca359fa628ff394', class: "connector_wrap" }, h("div", { key: '877f3ba2fb3a1334b56c89c3e261b35741ca7ea8', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && h("div", { key: '8d49577e3663d8dd3706cda56e0c14f06374716f', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '2791998de79b9beeaea4247ef970957f15207e13', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, h("path", { key: 'b3145cab69680035d36b44ce7078e1a26317810f', d: "M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1", stroke: "#075DB2", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.connector && (h("div", { key: '1897f6b084722943fd92510b1ca490e0be03c313', class: "connector_div" }, h("div", { key: '7df1c36570f0c81cb16f4eb5f22985b4715bf214', class: `icon_left_connector ${this.internalState} ${this.status}` })))), h("div", { key: '495860550b2adc076f28fe818c027dbd95193c83', class: "icon_left_text" }, h("p", { key: '8ca556f04b99d8c537130797e9014e99bbaea576', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), h("p", { key: 'cba17371d903ef77fbd88cf1ffa16cf9486116e6', class: `text_line_text text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))), this.type === 'icon_top' && (h("div", { key: 'bd38d9744f69c66f4ac1315fbde53efeb5d2d000', class: `icon_top_div ${this.size}` }, h("div", { key: '6a6b5bcafa47ad8ef3194b2d7e97177547a8b3c1', class: "step_icon" }, h("div", { key: 'aa7e4adbd4ec4bc74cdb04f69d9c0784bee7ab6a', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && h("div", { key: 'db177ae0cd9ffd1901569c7215a99fd685db4e3a', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '7645adc249ed27aeb16a12a665f608cb8c4e63c8', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, h("path", { key: '6912eec9315bada742b602f1f2381e3dbaab3952', d: "M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1", stroke: "#075DB2", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.connector && (h("div", { key: '0a18bf8dff52eca5668ca96b94aece2ad8d77513', class: "connector_div" }, h("div", { key: '1b9a384aaa15014d2051e85bfbd8c336776d3f3a', class: `icon_top_connector ${this.internalState} ${this.status}` })))), h("div", { key: 'c43e29b445d6e72e8c781cb1484c99f6fa7a1c01', class: "icon_top_content" }, h("p", { key: '24f705e9f109bac32b7645f4ef60cbe256a0ddc0', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), h("p", { key: 'db4fcd622d5197dc759452434e093d84de71b051', class: `text_line_text text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))), this.type === 'featured_icon_left' && (h("div", { key: 'aebbf42d6d06cc16ae2511f33f91b45b564f0c9d', class: "featured_icon_left_div" }, h("div", { key: '5d288918fb1dcdbba008c155b723d2a6d0e5a5f2', class: "connector_wrap" }, h("gb-featured-icon", { key: '1bee0142f9a23c0b832e907939432c4ee76bfb7b', size: this.size, icon: "assets/user.svg", destructive: this.internalState === 'destructive' ? true : false }), h("div", { key: '6ce113067133ee7e3aee5fad5d0a34c32265f83e', class: "connector_div" }, h("div", { key: '0f3927e88fb64e9fb32a628fd57d1d7e310c19c5', class: `featured_icon_left_connector ${this.size} ${this.internalState} ${this.status}` }))), h("div", { key: '015b4ffbbbf12aec155d815fdccf88e9d5049c15', class: "featured_icon_left_content" }, h("p", { key: '559f907d50be2dab37a97d5da0ebdae567bbd3f7', class: `featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.internalState}` }, this.label), h("p", { key: '24dd7110dc2f72499a55d4db92adc3d880cb6cda', class: `featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.internalState}` }, this.supportingText))))));
|
|
32
44
|
}
|
|
33
45
|
static get is() { return "gb-step-base"; }
|
|
34
46
|
static get encapsulation() { return "shadow"; }
|
|
@@ -246,5 +258,20 @@ export class GbStepBase {
|
|
|
246
258
|
}
|
|
247
259
|
};
|
|
248
260
|
}
|
|
261
|
+
static get states() {
|
|
262
|
+
return {
|
|
263
|
+
"internalState": {},
|
|
264
|
+
"internalStatus": {}
|
|
265
|
+
};
|
|
266
|
+
}
|
|
267
|
+
static get watchers() {
|
|
268
|
+
return [{
|
|
269
|
+
"propName": "status",
|
|
270
|
+
"methodName": "onStatusChange"
|
|
271
|
+
}, {
|
|
272
|
+
"propName": "state",
|
|
273
|
+
"methodName": "onStateChange"
|
|
274
|
+
}];
|
|
275
|
+
}
|
|
249
276
|
}
|
|
250
277
|
//# sourceMappingURL=gb-step-base.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-step-base.js","sourceRoot":"","sources":["../../../src/components/gb-step-base/gb-step-base.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Fragment } from \"@stencil/core\";\r\nimport { GeneralSizes, ProgressStepStates, ProgressStepStatus, ProgressStepTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-step-base',\r\n styleUrl: 'gb-step-base.css',\r\n shadow: true,\r\n})\r\nexport class GbStepBase {\r\n @Prop() status: ProgressStepStatus;\r\n @Prop() size: GeneralSizes;\r\n @Prop() type: ProgressStepTypes;\r\n @Prop() state: ProgressStepStates;\r\n @Prop() connector: boolean = false;\r\n @Prop() showContent: boolean = false;\r\n @Prop() showSupportingText: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() supportingText: string = '';\r\n\r\n featuredIconLeftLabelClasses() {\r\n switch (this.size) {\r\n case 'sm':\r\n return 'text-sm-semi-bold';\r\n case 'md':\r\n return 'text-md-semi-bold';\r\n case 'lg':\r\n return 'text-md-semi-bold';\r\n }\r\n }\r\n\r\n featuredIconLeftTextClasses() {\r\n switch (this.size) {\r\n case 'sm':\r\n return 'text-xs-regular';\r\n case 'md':\r\n return 'text-sm-regular';\r\n case 'lg':\r\n return 'text-md-regular';\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.type === 'text_line' && (\r\n <>\r\n <div class={`bar ${this.size} ${this.status} ${this.state}`}></div>\r\n {this.showContent && (\r\n <div class={`text_line_div ${this.size} ${this.status} ${this.state}`}>\r\n <div class={`text_line_div_content`}>\r\n <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.state}`}>{this.label}</p>\r\n {this.showSupportingText && <p class={`text_line_text text-xs-regular ${this.status} ${this.state}`}>{this.supportingText}</p>}\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n )}\r\n {this.type === 'icon_only' && (\r\n <div class={`icon_only_div ${this.status} ${this.state} ${this.size}`}>\r\n {this.status !== 'complete' && <div class={`dot ${this.status} ${this.state} ${this.size}`}></div>}\r\n {this.status === 'complete' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.state} ${this.size}`}>\r\n <path d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\" stroke=\"#075DB2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n {this.type === 'icon_left' && (\r\n <div class={`icon_left_div ${this.size}`}>\r\n <div class=\"connector_wrap\">\r\n <div class={`icon_only_div ${this.status} ${this.state} ${this.size}`}>\r\n {this.status !== 'complete' && <div class={`dot ${this.status} ${this.state} ${this.size}`}></div>}\r\n {this.status === 'complete' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.state} ${this.size}`}>\r\n <path\r\n d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\"\r\n stroke=\"#075DB2\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n {this.connector && (\r\n <div class=\"connector_div\">\r\n <div class={`icon_left_connector ${this.state} ${this.status}`}></div>\r\n </div>\r\n )}\r\n </div>\r\n <div class=\"icon_left_text\">\r\n <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.state}`}>{this.label}</p>\r\n <p class={`text_line_text text-xs-regular ${this.status} ${this.state}`}>{this.supportingText}</p>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'icon_top' && (\r\n <div class={`icon_top_div ${this.size}`}>\r\n <div class=\"step_icon\">\r\n <div class={`icon_only_div ${this.status} ${this.state} ${this.size}`}>\r\n {this.status !== 'complete' && <div class={`dot ${this.status} ${this.state} ${this.size}`}></div>}\r\n {this.status === 'complete' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.state} ${this.size}`}>\r\n <path\r\n d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\"\r\n stroke=\"#075DB2\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n {this.connector && (\r\n <div class=\"connector_div\">\r\n <div class={`icon_top_connector ${this.state} ${this.status}`}></div>\r\n </div>\r\n )}\r\n </div>\r\n <div class=\"icon_top_content\">\r\n <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.state}`}>{this.label}</p>\r\n <p class={`text_line_text text-xs-regular ${this.status} ${this.state}`}>{this.supportingText}</p>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'featured_icon_left' && (\r\n <div class=\"featured_icon_left_div\">\r\n <div class=\"connector_wrap\">\r\n <gb-featured-icon size={this.size} icon=\"assets/user.svg\" destructive={this.state === 'destructive' ? true : false}></gb-featured-icon>\r\n <div class=\"connector_div\">\r\n <div class={`featured_icon_left_connector ${this.size} ${this.state} ${this.status}`}></div>\r\n </div>\r\n </div>\r\n <div class=\"featured_icon_left_content\">\r\n <p class={`featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.state}`}>{this.label}</p>\r\n <p class={`featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.state}`}>{this.supportingText}</p>\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}"]}
|
|
1
|
+
{"version":3,"file":"gb-step-base.js","sourceRoot":"","sources":["../../../src/components/gb-step-base/gb-step-base.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Fragment, Watch, State } from \"@stencil/core\";\r\nimport { GeneralSizes, ProgressStepStates, ProgressStepStatus, ProgressStepTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-step-base',\r\n styleUrl: 'gb-step-base.css',\r\n shadow: true,\r\n})\r\nexport class GbStepBase {\r\n @Prop() status: ProgressStepStatus;\r\n @Prop() size: GeneralSizes;\r\n @Prop() type: ProgressStepTypes;\r\n @Prop() state: ProgressStepStates;\r\n @Prop() connector: boolean = false;\r\n @Prop() showContent: boolean = false;\r\n @Prop() showSupportingText: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() supportingText: string = '';\r\n @State() internalState: ProgressStepStates;\r\n @State() internalStatus: ProgressStepStatus;\r\n\r\n featuredIconLeftLabelClasses() {\r\n switch (this.size) {\r\n case 'sm':\r\n return 'text-sm-semi-bold';\r\n case 'md':\r\n return 'text-md-semi-bold';\r\n case 'lg':\r\n return 'text-md-semi-bold';\r\n }\r\n }\r\n\r\n featuredIconLeftTextClasses() {\r\n switch (this.size) {\r\n case 'sm':\r\n return 'text-xs-regular';\r\n case 'md':\r\n return 'text-sm-regular';\r\n case 'lg':\r\n return 'text-md-regular';\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalState = this.state;\r\n this.internalStatus = this.status;\r\n }\r\n\r\n @Watch('status')\r\n onStatusChange(newValue: ProgressStepStatus, oldValue: ProgressStepStatus) {\r\n console.log('state changed from', oldValue, 'to', newValue);\r\n this.internalStatus = newValue;\r\n }\r\n\r\n @Watch('state')\r\n onStateChange(newValue: ProgressStepStates, oldValue: ProgressStepStates) {\r\n console.log('state changed from', oldValue, 'to', newValue);\r\n this.internalState = newValue;\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.type === 'text_line' && (\r\n <>\r\n <div class={`bar ${this.size} ${this.status} ${this.internalState}`}></div>\r\n {this.showContent && (\r\n <div class={`text_line_div ${this.size} ${this.status} ${this.internalState}`}>\r\n <div class={`text_line_div_content`}>\r\n <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n {this.showSupportingText && <p class={`text_line_text text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>}\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n )}\r\n {this.type === 'icon_only' && (\r\n <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n {this.status !== 'complete' && <div class={`dot ${this.status} ${this.internalState} ${this.size}`}></div>}\r\n {this.status === 'complete' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.internalState} ${this.size}`}>\r\n <path d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\" stroke=\"#075DB2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n )}\r\n </div>\r\n )}\r\n {this.type === 'icon_left' && (\r\n <div class={`icon_left_div ${this.size}`}>\r\n <div class=\"connector_wrap\">\r\n <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n {this.status !== 'complete' && <div class={`dot ${this.status} ${this.internalState} ${this.size}`}></div>}\r\n {this.status === 'complete' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.internalState} ${this.size}`}>\r\n <path\r\n d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\"\r\n stroke=\"#075DB2\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n {this.connector && (\r\n <div class=\"connector_div\">\r\n <div class={`icon_left_connector ${this.internalState} ${this.status}`}></div>\r\n </div>\r\n )}\r\n </div>\r\n <div class=\"icon_left_text\">\r\n <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n <p class={`text_line_text text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'icon_top' && (\r\n <div class={`icon_top_div ${this.size}`}>\r\n <div class=\"step_icon\">\r\n <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n {this.status !== 'complete' && <div class={`dot ${this.status} ${this.internalState} ${this.size}`}></div>}\r\n {this.status === 'complete' && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.internalState} ${this.size}`}>\r\n <path\r\n d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\"\r\n stroke=\"#075DB2\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </div>\r\n {this.connector && (\r\n <div class=\"connector_div\">\r\n <div class={`icon_top_connector ${this.internalState} ${this.status}`}></div>\r\n </div>\r\n )}\r\n </div>\r\n <div class=\"icon_top_content\">\r\n <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n <p class={`text_line_text text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n </div>\r\n </div>\r\n )}\r\n {this.type === 'featured_icon_left' && (\r\n <div class=\"featured_icon_left_div\">\r\n <div class=\"connector_wrap\">\r\n <gb-featured-icon size={this.size} icon=\"assets/user.svg\" destructive={this.internalState === 'destructive' ? true : false}></gb-featured-icon>\r\n <div class=\"connector_div\">\r\n <div class={`featured_icon_left_connector ${this.size} ${this.internalState} ${this.status}`}></div>\r\n </div>\r\n </div>\r\n <div class=\"featured_icon_left_content\">\r\n <p class={`featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.internalState}`}>{this.label}</p>\r\n <p class={`featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}"]}
|
|
@@ -3,26 +3,52 @@ export class GbstepperVerticalIconsWithText {
|
|
|
3
3
|
constructor() {
|
|
4
4
|
this.connector = false;
|
|
5
5
|
this.steps = [
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
6
|
+
{
|
|
7
|
+
state: 'default',
|
|
8
|
+
status: 'complete',
|
|
9
|
+
label: 'First Step',
|
|
10
|
+
supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
state: 'default',
|
|
14
|
+
status: 'current',
|
|
15
|
+
label: 'First Step',
|
|
16
|
+
supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',
|
|
17
|
+
},
|
|
18
|
+
];
|
|
19
|
+
this.internalSteps = [
|
|
20
|
+
{
|
|
21
|
+
state: 'default',
|
|
22
|
+
status: 'complete',
|
|
23
|
+
label: 'First Step',
|
|
24
|
+
supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
state: 'default',
|
|
28
|
+
status: 'current',
|
|
29
|
+
label: 'First Step',
|
|
30
|
+
supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',
|
|
31
|
+
},
|
|
18
32
|
];
|
|
19
33
|
}
|
|
20
34
|
emitIndex(index) {
|
|
21
35
|
this.stepClicked.emit(index);
|
|
22
|
-
|
|
36
|
+
}
|
|
37
|
+
componentWillLoad() {
|
|
38
|
+
this.steps.map(step => {
|
|
39
|
+
(this.internalState = step.state), (this.internalStatus = step.status);
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
onStatusChange(newValue, oldValue) {
|
|
43
|
+
console.log('state changed from', oldValue, 'to', newValue);
|
|
44
|
+
this.internalStatus = newValue;
|
|
45
|
+
}
|
|
46
|
+
onStateChange(newValue, oldValue) {
|
|
47
|
+
console.log('state changed from', oldValue, 'to', newValue);
|
|
48
|
+
this.internalState = newValue;
|
|
23
49
|
}
|
|
24
50
|
render() {
|
|
25
|
-
return (h("div", { key: '
|
|
51
|
+
return (h("div", { key: '69bd32e8d4769585d3403f745048ea4443b76bc9', class: "vertical_stepper_div" }, this.type === 'icon' && (h(Fragment, null, this.steps.map((step, index) => (h("gb-step-base", { size: this.size, type: "icon_left", state: step.state, status: step.status, connector: index === this.steps.length - 1 ? false : this.connector, label: step.label, "supporting-text": step.supportingText, onClick: () => this.emitIndex(index) })))))));
|
|
26
52
|
}
|
|
27
53
|
static get is() { return "gb-stepper-vertical-icons-with-text"; }
|
|
28
54
|
static get encapsulation() { return "shadow"; }
|
|
@@ -124,10 +150,17 @@ export class GbstepperVerticalIconsWithText {
|
|
|
124
150
|
},
|
|
125
151
|
"getter": false,
|
|
126
152
|
"setter": false,
|
|
127
|
-
"defaultValue": "[\r\n
|
|
153
|
+
"defaultValue": "[\r\n {\r\n state: 'default',\r\n status: 'complete',\r\n label: 'First Step',\r\n supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n },\r\n {\r\n state: 'default',\r\n status: 'current',\r\n label: 'First Step',\r\n supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n },\r\n ]"
|
|
128
154
|
}
|
|
129
155
|
};
|
|
130
156
|
}
|
|
157
|
+
static get states() {
|
|
158
|
+
return {
|
|
159
|
+
"internalSteps": {},
|
|
160
|
+
"internalState": {},
|
|
161
|
+
"internalStatus": {}
|
|
162
|
+
};
|
|
163
|
+
}
|
|
131
164
|
static get events() {
|
|
132
165
|
return [{
|
|
133
166
|
"method": "stepClicked",
|
|
@@ -146,5 +179,14 @@ export class GbstepperVerticalIconsWithText {
|
|
|
146
179
|
}
|
|
147
180
|
}];
|
|
148
181
|
}
|
|
182
|
+
static get watchers() {
|
|
183
|
+
return [{
|
|
184
|
+
"propName": "status",
|
|
185
|
+
"methodName": "onStatusChange"
|
|
186
|
+
}, {
|
|
187
|
+
"propName": "state",
|
|
188
|
+
"methodName": "onStateChange"
|
|
189
|
+
}];
|
|
190
|
+
}
|
|
149
191
|
}
|
|
150
192
|
//# sourceMappingURL=gb-stepper-vertical-icons-with-text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-stepper-vertical-icons-with-text.js","sourceRoot":"","sources":["../../../src/components/gb-stepper-vertical-icons-with-text/gb-stepper-vertical-icons-with-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"gb-stepper-vertical-icons-with-text.js","sourceRoot":"","sources":["../../../src/components/gb-stepper-vertical-icons-with-text/gb-stepper-vertical-icons-with-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQhG,MAAM,OAAO,8BAA8B;IAL3C;QAOU,cAAS,GAAY,KAAK,CAAC;QAE3B,UAAK,GAAkB;YAC7B;gBACE,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,UAAU;gBAClB,KAAK,EAAE,YAAY;gBACnB,cAAc,EAAE,gEAAgE;aACjF;YACD;gBACE,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,SAAS;gBACjB,KAAK,EAAE,YAAY;gBACnB,cAAc,EAAE,gEAAgE;aACjF;SACF,CAAC;QACO,kBAAa,GAAkB;YACtC;gBACE,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,UAAU;gBAClB,KAAK,EAAE,YAAY;gBACnB,cAAc,EAAE,gEAAgE;aACjF;YACD;gBACE,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,SAAS;gBACjB,KAAK,EAAE,YAAY;gBACnB,cAAc,EAAE,gEAAgE;aACjF;SACF,CAAC;KAiDH;IA5CC,SAAS,CAAC,KAAa;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACpB,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;QACzE,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,cAAc,CAAC,QAA4B,EAAE,QAA4B;QACvE,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC5D,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;IACjC,CAAC;IAGD,aAAa,CAAC,QAA4B,EAAE,QAA4B;QACtE,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC5D,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CACvB,kBACG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,oBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EACnE,KAAK,EAAE,IAAI,CAAC,KAAK,qBACA,IAAI,CAAC,cAAc,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GACtB,CACjB,CAAC,CACD,CACJ,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment, Event, EventEmitter, Watch, State } from '@stencil/core';\r\nimport { GeneralSizes, ProgressStepStates, ProgressStepStatus, StepperType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-stepper-vertical-icons-with-text',\r\n styleUrl: 'gb-stepper-vertical-icons-with-text.css',\r\n shadow: true,\r\n})\r\nexport class GbstepperVerticalIconsWithText {\r\n @Prop() size: GeneralSizes;\r\n @Prop() connector: boolean = false;\r\n @Prop() type: 'icon' | 'featured_icon';\r\n @Prop() steps: StepperType[] = [\r\n {\r\n state: 'default',\r\n status: 'complete',\r\n label: 'First Step',\r\n supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n },\r\n {\r\n state: 'default',\r\n status: 'current',\r\n label: 'First Step',\r\n supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n },\r\n ];\r\n @State() internalSteps: StepperType[] = [\r\n {\r\n state: 'default',\r\n status: 'complete',\r\n label: 'First Step',\r\n supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n },\r\n {\r\n state: 'default',\r\n status: 'current',\r\n label: 'First Step',\r\n supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n },\r\n ];\r\n @Event() stepClicked: EventEmitter<number>;\r\n @State() internalState: ProgressStepStates;\r\n @State() internalStatus: ProgressStepStatus;\r\n\r\n emitIndex(index: number) {\r\n this.stepClicked.emit(index);\r\n }\r\n\r\n componentWillLoad() {\r\n this.steps.map(step => {\r\n (this.internalState = step.state), (this.internalStatus = step.status);\r\n });\r\n }\r\n\r\n @Watch('status')\r\n onStatusChange(newValue: ProgressStepStatus, oldValue: ProgressStepStatus) {\r\n console.log('state changed from', oldValue, 'to', newValue);\r\n this.internalStatus = newValue;\r\n }\r\n\r\n @Watch('state')\r\n onStateChange(newValue: ProgressStepStates, oldValue: ProgressStepStates) {\r\n console.log('state changed from', oldValue, 'to', newValue);\r\n this.internalState = newValue;\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"vertical_stepper_div\">\r\n {this.type === 'icon' && (\r\n <>\r\n {this.steps.map((step, index) => (\r\n <gb-step-base\r\n size={this.size}\r\n type=\"icon_left\"\r\n state={step.state}\r\n status={step.status}\r\n connector={index === this.steps.length - 1 ? false : this.connector}\r\n label={step.label}\r\n supporting-text={step.supportingText}\r\n onClick={() => this.emitIndex(index)}\r\n ></gb-step-base>\r\n ))}\r\n </>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { G as GbFileUploadItemBase$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { G as GbFileUploadItemBase$1, d as defineCustomElement$1 } from './p-C-Nb1SEW.js';
|
|
2
2
|
|
|
3
3
|
const GbFileUploadItemBase = GbFileUploadItemBase$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from '
|
|
|
2
2
|
import { d as defineCustomElement$7 } from './p-Df76_fri.js';
|
|
3
3
|
import { d as defineCustomElement$6 } from './p-CAKmlbWp.js';
|
|
4
4
|
import { d as defineCustomElement$5 } from './p-XLYPaRCU.js';
|
|
5
|
-
import { d as defineCustomElement$4 } from './p-
|
|
5
|
+
import { d as defineCustomElement$4 } from './p-C-Nb1SEW.js';
|
|
6
6
|
import { d as defineCustomElement$3 } from './p-C7CJ36SO.js';
|
|
7
7
|
import { d as defineCustomElement$2 } from './p-C9YJdMaD.js';
|
|
8
8
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, F as Fragment } from './p-C_NOJI7O.js';
|
|
2
2
|
import { d as defineCustomElement$3 } from './p-DWX-AAX8.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-Xgolh87B.js';
|
|
4
4
|
|
|
5
5
|
const gbStepperHorizontalIconsCenteredCss = "";
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-C_NOJI7O.js';
|
|
2
2
|
import { d as defineCustomElement$3 } from './p-DWX-AAX8.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-Xgolh87B.js';
|
|
4
4
|
|
|
5
5
|
const gbStepperHorizontalLineWithTextCss = ".text_with_line{display:flex;width:100%;align-items:stretch;gap:var(--spacing-4)}gb-step-base{width:100%}";
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-C_NOJI7O.js';
|
|
2
2
|
import { d as defineCustomElement$3 } from './p-DWX-AAX8.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-Xgolh87B.js';
|
|
4
4
|
|
|
5
5
|
const gbStepperVerticalIconsWithTextCss = ".vertical_stepper_div{width:100%}";
|
|
6
6
|
|
|
@@ -12,33 +12,69 @@ const GbstepperVerticalIconsWithText = /*@__PURE__*/ proxyCustomElement(class Gb
|
|
|
12
12
|
this.stepClicked = createEvent(this, "stepClicked");
|
|
13
13
|
this.connector = false;
|
|
14
14
|
this.steps = [
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
15
|
+
{
|
|
16
|
+
state: 'default',
|
|
17
|
+
status: 'complete',
|
|
18
|
+
label: 'First Step',
|
|
19
|
+
supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
state: 'default',
|
|
23
|
+
status: 'current',
|
|
24
|
+
label: 'First Step',
|
|
25
|
+
supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',
|
|
26
|
+
},
|
|
27
|
+
];
|
|
28
|
+
this.internalSteps = [
|
|
29
|
+
{
|
|
30
|
+
state: 'default',
|
|
31
|
+
status: 'complete',
|
|
32
|
+
label: 'First Step',
|
|
33
|
+
supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
state: 'default',
|
|
37
|
+
status: 'current',
|
|
38
|
+
label: 'First Step',
|
|
39
|
+
supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',
|
|
40
|
+
},
|
|
27
41
|
];
|
|
28
42
|
}
|
|
29
43
|
emitIndex(index) {
|
|
30
44
|
this.stepClicked.emit(index);
|
|
31
|
-
|
|
45
|
+
}
|
|
46
|
+
componentWillLoad() {
|
|
47
|
+
this.steps.map(step => {
|
|
48
|
+
(this.internalState = step.state), (this.internalStatus = step.status);
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
onStatusChange(newValue, oldValue) {
|
|
52
|
+
console.log('state changed from', oldValue, 'to', newValue);
|
|
53
|
+
this.internalStatus = newValue;
|
|
54
|
+
}
|
|
55
|
+
onStateChange(newValue, oldValue) {
|
|
56
|
+
console.log('state changed from', oldValue, 'to', newValue);
|
|
57
|
+
this.internalState = newValue;
|
|
32
58
|
}
|
|
33
59
|
render() {
|
|
34
|
-
return (h("div", { key: '
|
|
60
|
+
return (h("div", { key: '69bd32e8d4769585d3403f745048ea4443b76bc9', class: "vertical_stepper_div" }, this.type === 'icon' && (h(Fragment, null, this.steps.map((step, index) => (h("gb-step-base", { size: this.size, type: "icon_left", state: step.state, status: step.status, connector: index === this.steps.length - 1 ? false : this.connector, label: step.label, "supporting-text": step.supportingText, onClick: () => this.emitIndex(index) })))))));
|
|
35
61
|
}
|
|
62
|
+
static get watchers() { return {
|
|
63
|
+
"status": ["onStatusChange"],
|
|
64
|
+
"state": ["onStateChange"]
|
|
65
|
+
}; }
|
|
36
66
|
static get style() { return gbStepperVerticalIconsWithTextCss; }
|
|
37
67
|
}, [1, "gb-stepper-vertical-icons-with-text", {
|
|
38
68
|
"size": [1],
|
|
39
69
|
"connector": [4],
|
|
40
70
|
"type": [1],
|
|
41
|
-
"steps": [16]
|
|
71
|
+
"steps": [16],
|
|
72
|
+
"internalSteps": [32],
|
|
73
|
+
"internalState": [32],
|
|
74
|
+
"internalStatus": [32]
|
|
75
|
+
}, undefined, {
|
|
76
|
+
"status": ["onStatusChange"],
|
|
77
|
+
"state": ["onStateChange"]
|
|
42
78
|
}]);
|
|
43
79
|
function defineCustomElement$1() {
|
|
44
80
|
if (typeof customElements === "undefined") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gb-stepper-vertical-icons-with-text.js","mappings":";;;;AAAA,MAAM,iCAAiC,GAAG,mCAAmC;;MCQhE,8BAA8B,iBAAAA,kBAAA,CAAA,MAAA,8BAAA,SAAAC,CAAA,CAAA;AAL3C,IAAA,WAAA,GAAA;;;;;AAOU,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;QAE1B,IAAA,CAAA,KAAK,GAAkB
|
|
1
|
+
{"file":"gb-stepper-vertical-icons-with-text.js","mappings":";;;;AAAA,MAAM,iCAAiC,GAAG,mCAAmC;;MCQhE,8BAA8B,iBAAAA,kBAAA,CAAA,MAAA,8BAAA,SAAAC,CAAA,CAAA;AAL3C,IAAA,WAAA,GAAA;;;;;AAOU,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;QAE1B,IAAA,CAAA,KAAK,GAAkB;AAC7B,YAAA;AACE,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,MAAM,EAAE,UAAU;AAClB,gBAAA,KAAK,EAAE,YAAY;AACnB,gBAAA,cAAc,EAAE,gEAAgE;AACjF,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,KAAK,EAAE,YAAY;AACnB,gBAAA,cAAc,EAAE,gEAAgE;AACjF,aAAA;SACF;QACQ,IAAA,CAAA,aAAa,GAAkB;AACtC,YAAA;AACE,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,MAAM,EAAE,UAAU;AAClB,gBAAA,KAAK,EAAE,YAAY;AACnB,gBAAA,cAAc,EAAE,gEAAgE;AACjF,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,KAAK,EAAE,YAAY;AACnB,gBAAA,cAAc,EAAE,gEAAgE;AACjF,aAAA;SACF;AAiDF;AA5CC,IAAA,SAAS,CAAC,KAAa,EAAA;AACrB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG9B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAG;AACpB,YAAA,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC;AACxE,SAAC,CAAC;;IAIJ,cAAc,CAAC,QAA4B,EAAE,QAA4B,EAAA;QACvE,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC;AAC3D,QAAA,IAAI,CAAC,cAAc,GAAG,QAAQ;;IAIhC,aAAa,CAAC,QAA4B,EAAE,QAA4B,EAAA;QACtE,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC;AAC3D,QAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;IAG/B,MAAM,GAAA;QACJ,QACE,4DAAK,KAAK,EAAC,sBAAsB,EAC9B,EAAA,IAAI,CAAC,IAAI,KAAK,MAAM,KACnB,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC1B,CACE,CAAA,cAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,SAAS,EACnE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,iBAAA,EACA,IAAI,CAAC,cAAc,EACpC,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EACtB,CAAA,CACjB,CAAC,CACD,CACJ,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-stepper-vertical-icons-with-text/gb-stepper-vertical-icons-with-text.css?tag=gb-stepper-vertical-icons-with-text&encapsulation=shadow","src/components/gb-stepper-vertical-icons-with-text/gb-stepper-vertical-icons-with-text.tsx"],"sourcesContent":[".vertical_stepper_div{\r\n width: 100%;\r\n}","import { Component, Prop, h, Fragment, Event, EventEmitter, Watch, State } from '@stencil/core';\r\nimport { GeneralSizes, ProgressStepStates, ProgressStepStatus, StepperType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-stepper-vertical-icons-with-text',\r\n styleUrl: 'gb-stepper-vertical-icons-with-text.css',\r\n shadow: true,\r\n})\r\nexport class GbstepperVerticalIconsWithText {\r\n @Prop() size: GeneralSizes;\r\n @Prop() connector: boolean = false;\r\n @Prop() type: 'icon' | 'featured_icon';\r\n @Prop() steps: StepperType[] = [\r\n {\r\n state: 'default',\r\n status: 'complete',\r\n label: 'First Step',\r\n supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n },\r\n {\r\n state: 'default',\r\n status: 'current',\r\n label: 'First Step',\r\n supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n },\r\n ];\r\n @State() internalSteps: StepperType[] = [\r\n {\r\n state: 'default',\r\n status: 'complete',\r\n label: 'First Step',\r\n supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n },\r\n {\r\n state: 'default',\r\n status: 'current',\r\n label: 'First Step',\r\n supportingText: 'Hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii',\r\n },\r\n ];\r\n @Event() stepClicked: EventEmitter<number>;\r\n @State() internalState: ProgressStepStates;\r\n @State() internalStatus: ProgressStepStatus;\r\n\r\n emitIndex(index: number) {\r\n this.stepClicked.emit(index);\r\n }\r\n\r\n componentWillLoad() {\r\n this.steps.map(step => {\r\n (this.internalState = step.state), (this.internalStatus = step.status);\r\n });\r\n }\r\n\r\n @Watch('status')\r\n onStatusChange(newValue: ProgressStepStatus, oldValue: ProgressStepStatus) {\r\n console.log('state changed from', oldValue, 'to', newValue);\r\n this.internalStatus = newValue;\r\n }\r\n\r\n @Watch('state')\r\n onStateChange(newValue: ProgressStepStates, oldValue: ProgressStepStates) {\r\n console.log('state changed from', oldValue, 'to', newValue);\r\n this.internalState = newValue;\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"vertical_stepper_div\">\r\n {this.type === 'icon' && (\r\n <>\r\n {this.steps.map((step, index) => (\r\n <gb-step-base\r\n size={this.size}\r\n type=\"icon_left\"\r\n state={step.state}\r\n status={step.status}\r\n connector={index === this.steps.length - 1 ? false : this.connector}\r\n label={step.label}\r\n supporting-text={step.supportingText}\r\n onClick={() => this.emitIndex(index)}\r\n ></gb-step-base>\r\n ))}\r\n </>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
|