globuswebcomponents 1.0.2 → 1.0.3

package/dist/components/{p-e7fb3e27.js.map → p-ff58b603.js.map}

@@ -1 +1 @@
-{"file":"p-e7fb3e27.js","mappings":"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","names":[],"sources":["src/components/gb-file-upload-item-base/gb-file-upload-item-base.css?tag=gb-file-upload-item-base&encapsulation=shadow","src/components/gb-file-upload-item-base/gb-file-upload-item-base.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n/* .file_upload_item_base_div{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n} */\r\n\r\n.file_upload_item_base_container {\r\n  display: flex;\r\n  border-radius: var(--rounded-sm);\r\n  background-color: var(--color-background-card, #ffffff);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\n.file_upload_item_base_container.default:hover{\r\n  border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.file_upload_item_base_container.disabled{\r\n  background-color: var(--color-background-disabled, #F6F8FA);\r\n  border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\n.file_upload_item_base_container.md{\r\n  flex-direction: row;\r\n  padding: var(--spacing-4);\r\n}\r\n\r\n.file_upload_item_base_container.lg{\r\n  flex-direction: column;\r\n  padding: var(--spacing-6);\r\n}\r\n\r\n.close_button {\r\n  position: absolute;\r\n  top: var(--spacing-4);\r\n  right: var(--spacing-4);\r\n}\r\n\r\n.progress_bar{\r\n  margin-top: 0.5rem;\r\n}\r\n\r\n.file_type_text.in_progress,\r\n.file_type_text.complete{\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\n.file_type_text.error,\r\n.file_size_text.error{\r\n  color: var(--color-background-danger, #B51726);\r\n}\r\n\r\n.file_size_text.in_progress,\r\n.file_size_text.complete{\r\n  color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.in_progress_div.md,\r\n.error.md,\r\n.complete.md{\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-1);\r\n}\r\n\r\n.in_progress_div.lg,\r\n.error.lg,\r\n.complete.lg{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n/* Default Styles */\r\n.file_upload_icon{\r\n  background-color: #EEF2F6;\r\n  border-radius: var(--rounded-full);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: var(--spacing-3);\r\n}\r\n\r\n.file_upload_icon svg{\r\n  width: var(--spacing-6);\r\n  height: var(--spacing-6);\r\n}\r\n\r\n.default.md{\r\n  display: flex;\r\n  gap: var(--spacing-3);\r\n  align-items: center;\r\n}\r\n\r\n.default.lg{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.default_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n/* In Progress Styles */\r\n.in_progress_div.md{\r\n  width: 100%;\r\n}\r\n\r\n.in_progress_div.lg{\r\n  text-align: center;\r\n}\r\n\r\n.in_progress_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n  width: 100%;\r\n}\r\n\r\n.upload_btn_md{\r\n  position: absolute;\r\n  top: 45%;\r\n  right: 1.5rem;\r\n}\r\n\r\n.upload_btn_lg{\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n/* Complete Styles */\r\n.complete{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.complete.md{\r\n  flex-direction: row;\r\n  gap: var(--spacing-1);\r\n}\r\n\r\n.complete.lg{\r\n  align-items: center;\r\n  text-align: center;\r\n}\r\n\r\n.complete_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.complete_content.md{\r\n  justify-content: center;\r\n}\r\n\r\n.complete_content.lg{\r\n  align-items: center;\r\n}\r\n\r\n.delete_button{\r\n  position: absolute;\r\n  top: 30%;\r\n  right: 1rem;\r\n}\r\n\r\n.delete_btn{\r\n  position: absolute;\r\n  top: 35%;\r\n  right: 1.5rem;\r\n}\r\n\r\n/* Error Styles */\r\n.error{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n  border-color: var(--color-border-danger-subtle, #F9B4BA);\r\n}\r\n\r\n.error.lg{\r\n  text-align: center;\r\n}\r\n\r\n.error_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.error_content_text{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.btns{\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: var(--spacing-6);\r\n}\r\n\r\n.btn{\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.try_again_btn{\r\n  display: flex;\r\n  width: 100%;\r\n}\r\n\r\n/* Text Styles*/\r\n.text-sm-semi-bold{\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after{\r\n  content: \"\";\r\n  display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before{\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after{\r\n  margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium{\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after{\r\n  content: \"\";\r\n  display: table;\r\n}\r\n\r\n.text-sm-medium::before{\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after{\r\n  margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-regular::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after{\r\n    margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-regular{\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after{\r\n  content: \"\";\r\n  display: table;\r\n}\r\n\r\n.text-xs-regular::before{\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after{\r\n  margin-top: -0.396em;\r\n}\r\n\r\np.lg{\r\n  display: flex;\r\n  gap: var(--spacing-1);\r\n}","import { Component, h, Prop, Fragment, Event, EventEmitter } 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() state: FileUploadStates;\r\n  @Prop() heightSize: GeneralSizes = 'md';\r\n  @Prop() fileType: FileIconTypes;\r\n  @Prop() buttonState: StateEnum = StateEnum.Default;\r\n  @Prop() progress: number;\r\n  @Prop() size: number;\r\n  @Prop() fileSize: number;\r\n  @Prop() fileName: string;\r\n  @Event() cancelUpload: EventEmitter<void>;\r\n  @Event() deleteFileUpload: EventEmitter<void>;\r\n\r\n  render() {\r\n    return (\r\n      <div class={`file_upload_item_base_container ${this.state} ${this.heightSize}`}>\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`}>{this.fileName}.{this.fileType}</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>{this.fileSize}KB</p>\r\n                  <gb-progress-bar progress={this.progress} 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`}>{this.fileName}.{this.fileType}</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>{this.fileSize}KB</p>\r\n                  <gb-progress-bar progress={this.progress} 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`}>{this.fileName}.{this.fileType}</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>\r\n                    {`${this.fileSize}`}KB – {`${this.progress}`}% uploaded\r\n                  </p>\r\n                  <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"only\" icon-leading={true} icon-leading-swap=\"assets/delete-02.svg\" class=\"delete_button\" onClick={() => this.deleteFileUpload.emit()}></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`}>{this.fileName}.{this.fileType}</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>{this.fileSize}KB – {`${this.progress}`} % uploaded</p>\r\n                  <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"default\" icon-leading={true} icon-leading-swap=\"assets/delete-02.svg\" onClick={() => this.deleteFileUpload.emit()}>\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`}>{this.fileName}.{this.fileType}</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}>\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`}>{this.fileName}.{this.fileType}</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>{this.fileSize}KB – {`${this.progress}`}% uploaded</p>\r\n                  <div class=\"btns\">\r\n                    <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"default\" destructive={true} icon-leading={true} icon-leading-swap=\"assets/delete-02.svg\" onClick={() => this.deleteFileUpload.emit()}>\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\">\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    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-ff58b603.js","mappings":"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","names":[],"sources":["src/components/gb-file-upload-item-base/gb-file-upload-item-base.css?tag=gb-file-upload-item-base&encapsulation=shadow","src/components/gb-file-upload-item-base/gb-file-upload-item-base.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n/* .file_upload_item_base_div{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n} */\r\n\r\n.file_upload_item_base_container {\r\n  display: flex;\r\n  border-radius: var(--rounded-sm);\r\n  background-color: var(--color-background-card, #ffffff);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\n.file_upload_item_base_container.default:hover{\r\n  border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.file_upload_item_base_container.disabled{\r\n  background-color: var(--color-background-disabled, #F6F8FA);\r\n  border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\n.file_upload_item_base_container.md{\r\n  flex-direction: row;\r\n  padding: var(--spacing-4);\r\n}\r\n\r\n.file_upload_item_base_container.lg{\r\n  flex-direction: column;\r\n  padding: var(--spacing-6);\r\n}\r\n\r\n.close_button {\r\n  position: absolute;\r\n  top: var(--spacing-4);\r\n  right: var(--spacing-4);\r\n}\r\n\r\n.progress_bar{\r\n  margin-top: 0.5rem;\r\n}\r\n\r\n.file_type_text.in_progress,\r\n.file_type_text.complete{\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\n.file_type_text.error,\r\n.file_size_text.error{\r\n  color: var(--color-background-danger, #B51726);\r\n}\r\n\r\n.file_size_text.in_progress,\r\n.file_size_text.complete{\r\n  color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.in_progress_div.md,\r\n.error.md,\r\n.complete.md{\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-1);\r\n}\r\n\r\n.in_progress_div.lg,\r\n.error.lg,\r\n.complete.lg{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n/* Default Styles */\r\n.file_upload_icon{\r\n  background-color: #EEF2F6;\r\n  border-radius: var(--rounded-full);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: var(--spacing-3);\r\n}\r\n\r\n.file_upload_icon svg{\r\n  width: var(--spacing-6);\r\n  height: var(--spacing-6);\r\n}\r\n\r\n.default.md{\r\n  display: flex;\r\n  gap: var(--spacing-3);\r\n  align-items: center;\r\n}\r\n\r\n.default.lg{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.default_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n/* In Progress Styles */\r\n.in_progress_div.md{\r\n  width: 100%;\r\n}\r\n\r\n.in_progress_div.lg{\r\n  text-align: center;\r\n}\r\n\r\n.in_progress_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n  width: 100%;\r\n}\r\n\r\n.upload_btn_md{\r\n  position: absolute;\r\n  top: 45%;\r\n  right: 1.5rem;\r\n}\r\n\r\n.upload_btn_lg{\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n/* Complete Styles */\r\n.complete{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.complete.md{\r\n  flex-direction: row;\r\n  gap: var(--spacing-1);\r\n}\r\n\r\n.complete.lg{\r\n  align-items: center;\r\n  text-align: center;\r\n}\r\n\r\n.complete_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.complete_content.md{\r\n  justify-content: center;\r\n}\r\n\r\n.complete_content.lg{\r\n  align-items: center;\r\n}\r\n\r\n.delete_button{\r\n  position: absolute;\r\n  top: 30%;\r\n  right: 1rem;\r\n}\r\n\r\n.delete_btn{\r\n  position: absolute;\r\n  top: 35%;\r\n  right: 1.5rem;\r\n}\r\n\r\n/* Error Styles */\r\n.error{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n  border-color: var(--color-border-danger-subtle, #F9B4BA);\r\n}\r\n\r\n.error.lg{\r\n  text-align: center;\r\n}\r\n\r\n.error_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.error_content_text{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.btns{\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: var(--spacing-6);\r\n}\r\n\r\n.btn{\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.try_again_btn{\r\n  display: flex;\r\n  width: 100%;\r\n}\r\n\r\n/* Text Styles*/\r\n.text-sm-semi-bold{\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after{\r\n  content: \"\";\r\n  display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before{\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after{\r\n  margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium{\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after{\r\n  content: \"\";\r\n  display: table;\r\n}\r\n\r\n.text-sm-medium::before{\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after{\r\n  margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-regular::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after{\r\n    margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-regular{\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after{\r\n  content: \"\";\r\n  display: table;\r\n}\r\n\r\n.text-xs-regular::before{\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after{\r\n  margin-top: -0.396em;\r\n}\r\n\r\np.lg{\r\n  display: flex;\r\n  gap: var(--spacing-1);\r\n}","import { Component, h, Prop, Fragment, Event, EventEmitter } 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() state: FileUploadStates;\r\n  @Prop() heightSize: GeneralSizes = 'md';\r\n  @Prop() fileType: FileIconTypes;\r\n  @Prop() buttonState: StateEnum = StateEnum.Default;\r\n  @Prop() progress: number;\r\n  @Prop() size: number;\r\n  @Prop() fileSize: number;\r\n  @Prop() fileName: string;\r\n  @Event() cancelUpload: EventEmitter<void>;\r\n  @Event() deleteFileUpload: EventEmitter<void>;\r\n\r\n  render() {\r\n    return (\r\n      <div class={`file_upload_item_base_container ${this.state} ${this.heightSize}`}>\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`}>{this.fileName}.{this.fileType}</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>{this.fileSize}KB</p>\r\n                  <gb-progress-bar progress={this.progress} 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`}>{this.fileName}.{this.fileType}</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>{this.fileSize}KB</p>\r\n                  <gb-progress-bar progress={this.progress} 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`}>{this.fileName}.{this.fileType}</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>\r\n                    {`${this.fileSize}`}KB – {`${this.progress}`}% uploaded\r\n                  </p>\r\n                  <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"only\" icon-leading={true} icon-leading-swap=\"assets/delete-02.svg\" class=\"delete_button\" onClick={() => this.deleteFileUpload.emit()}></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`}>{this.fileName}.{this.fileType}</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>{this.fileSize}KB – {`${this.progress}`} % uploaded</p>\r\n                  <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"default\" icon-leading={true} icon-leading-swap=\"assets/delete-02.svg\" onClick={() => this.deleteFileUpload.emit()}>\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`}>{this.fileName}.{this.fileType}</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}>\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`}>{this.fileName}.{this.fileType}</p>\r\n                  <p class={`file_size_text ${this.state} text-sm-regular`}>{this.fileSize}KB – {`${this.progress}`}% uploaded</p>\r\n                  <div class=\"btns\">\r\n                    <gb-button size=\"sm\" hierarchy=\"tertiary_gray\" icon=\"default\" destructive={true} icon-leading={true} icon-leading-swap=\"assets/delete-02.svg\" onClick={() => this.deleteFileUpload.emit()}>\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\">\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    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/test-input-tag.js

@@ -1,15 +1,15 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-ad960c29.js';
 import { S as StateEnum } from './p-47052b60.js';
-import { d as defineCustomElement$b } from './p-24625c69.js';
+import { d as defineCustomElement$b } from './p-4aa73a61.js';
 import { d as defineCustomElement$a } from './p-bd1c23b9.js';
 import { d as defineCustomElement$9 } from './p-0880c70c.js';
 import { d as defineCustomElement$8 } from './p-db744951.js';
-import { d as defineCustomElement$7 } from './p-855667d7.js';
-import { d as defineCustomElement$6 } from './p-0c6b277d.js';
-import { d as defineCustomElement$5 } from './p-bdc413ec.js';
-import { d as defineCustomElement$4 } from './p-472f11a3.js';
-import { d as defineCustomElement$3 } from './p-1c1003b6.js';
-import { d as defineCustomElement$2 } from './p-c8f12e95.js';
+import { d as defineCustomElement$7 } from './p-8cafba87.js';
+import { d as defineCustomElement$6 } from './p-5512321a.js';
+import { d as defineCustomElement$5 } from './p-9b42bf2c.js';
+import { d as defineCustomElement$4 } from './p-2ee8e211.js';
+import { d as defineCustomElement$3 } from './p-b02e796f.js';
+import { d as defineCustomElement$2 } from './p-47f3f4e8.js';
 
 const testInputTagCss = ".input_group{--height:auto;--inputheight:4.5rem;--weight:100%;display:flex;position:relative}.input_like_parent{width:100%;border:1px solid var(--color-border-input, #CDD5DF);border-radius:var(--rounded-sm);padding:0.625rem 0.875rem 0.625rem var(--spacing-3)}.input_like{width:100%;overflow-y:scroll;transition:height 50ms ease-in-out}.results_display{display:flex;flex-wrap:wrap;gap:0.5rem;background-color:var(--color-surface, #FFFFFF);display:none;margin-top:0.5rem}.results_display.show_results{display:block}.tags{padding-top:1rem}.dropdown_list.show{display:block}.dropdown_menu{display:flex;width:100%;max-height:15rem;padding:var(--spacing-none);flex-direction:column;align-items:stretch;border-radius:var(--rounded-sm);border:1px solid var(--color-border-subtler, #E3E8EF);background:var(--color-surface, #FFFFFF);box-shadow:var(--shadow-sm);position:absolute;top:100%;z-index:10;gap:var(--spacing-none);transition:1s ease-in-out}";
 const TestInputTagStyle0 = testInputTagCss;
@@ -91,7 +91,7 @@ const TestInputTag$1 = /*@__PURE__*/ proxyCustomElement(class TestInputTag exten
         this.exportValue.emit(this.selectedStaff);
     }
     render() {
-        return (h("div", { key: 'd5cb3735c59d7892cafef8f195833b354d7c2d69', class: "input_group", ref: el => (this.inputGroupElement = el) }, h("label", { key: 'a15cdc9751ba206cf23e47475586d911cc6602bc', htmlFor: this.idOfInput }, this.labelText), h("div", { key: '84b4b3bf59cdae6368d07e4248cb9d47a8a4542c', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, h("input", { key: '6985f517a5c0b632fe88e371fc234561cd526ead', id: this.idOfInput, class: "input_like", type: "text", placeholder: this.placeholderText, value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff() }), h("div", { key: 'c2982c7e326b70add132c6e7b8dd7af87f4a3a7d', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index) => (
+        return (h("div", { key: 'f7a65bb33cdb631aac071a91f003c6fc627cabf0', class: "input_group", ref: el => (this.inputGroupElement = el) }, h("label", { key: 'ce5fff49d02a26bce59ca2ef328d6dbbf8b7c96d', htmlFor: this.idOfInput }, this.labelText), h("div", { key: '88414f0d44de2fdda683ad4f82bdc60403f4a949', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, h("input", { key: 'a1eb0d5a27810e9654b256f12368dc54265f96b3', id: this.idOfInput, class: "input_like", type: "text", placeholder: this.placeholderText, value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff() }), h("div", { key: '954cc7f2cf467dc8f9821e718eb58e7d4ef0f6e2', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index) => (
         //   <span>
         //     {staff.fullname}
         //     <img
@@ -100,7 +100,7 @@ const TestInputTag$1 = /*@__PURE__*/ proxyCustomElement(class TestInputTag exten
         //       onClick={() => this.removeStaff(index)}
         //     />
         //   </span>
-        h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index) }, h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, staff.fullname.split(' ')[0])))))), this.show && (h("div", { key: 'f8e12b457f121baf9f76d3e641ed6e830e4c8b00', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
+        h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index) }, h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, staff.fullname.split(' ')[0])))))), this.show && (h("div", { key: 'ebf9e70df251b3c5b607671e3755d9b2584f3082', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
         //   <li class="aList" onClick={() => this.selectStaff(staff)}>
         //     <div>{staff.fullname}</div>
         //     <div>{staff.email}</div>

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-01-16T21:38:40",
+  "timestamp": "2025-01-17T14:06:37",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.20.0",
@@ -7477,7 +7477,7 @@
           "reflectToAttr": false,
           "docs": "",
           "docsTags": [],
-          "default": "[\r\n    // { name: 'Mock Item A', username: 'A', selected: false },\r\n    // { name: 'Mock Item B', username: 'B', selected: false },\r\n    // { name: 'Mock Item C', username: 'C', selected: false },\r\n    // 45, 50, 20, 25, 90,\r\n    // 'Activated',\r\n    // 'Deactivated',\r\n  ]",
+          "default": "[\r\n    // { name: 'Mock Item A', username: 'A', selected: false },\r\n    // { name: 'Mock Item B', username: 'B', selected: false },\r\n    // { name: 'Mock Item C', username: 'C', selected: false },\r\n    // 45, 50, 20, 25, 90,\r\n    // 'Activated',\r\n    // 'Deactivated',\r\n    'Transaction Status'\r\n  ]",
           "values": [
             {
               "type": "any[]"