globuswebcomponents 0.5.4 → 0.5.6

package/dist/collection/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-input-dropdown-menu-item.js","sourceRoot":"","sources":["../../../src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h } from \"@stencil/core\";\r\nimport { DropdownTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-input-dropdown-menu-item',\r\n  styleUrl: 'gb-input-dropdown-menu-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbInputDropdownMenuItem {\r\n  @Prop() type: DropdownTypes;\r\n  @Prop() supportingText: boolean = false;\r\n  @Prop({ mutable: true }) selected: boolean = false;\r\n  @Prop() state: StateEnum;\r\n  @Element() el: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    nameSlot.classList.add('text-md-medium');\r\n\r\n    if(supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-sm-regular');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"dropdown-container\" onClick={() => (this.selected = !this.selected)}>\r\n        <div\r\n          class={{\r\n            'dropdown-item': true,\r\n            'dropdown-item--selected': this.selected,\r\n            'dropdown-item--disabled': this.state === 'disabled',\r\n            [this.type]: true,\r\n          }}\r\n          role=\"option\"\r\n          aria-selected={this.selected ? 'true' : 'false'}\r\n          aria-disabled={this.state === 'disabled' ? 'true' : 'false'}\r\n        >\r\n          {this.type === 'icon_leading' && (\r\n            <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <path\r\n                d=\"M5.48131 12.9013C4.30234 13.6034 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3334 6.32572 18.3334H13.6743C14.9621 18.3334 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6034 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n                stroke=\"#4B5565\"\r\n                stroke-width=\"1.5\"\r\n              />\r\n              <path\r\n                d=\"M13.75 5.41669C13.75 7.48776 12.0711 9.16669 10 9.16669C7.92893 9.16669 6.25 7.48776 6.25 5.41669C6.25 3.34562 7.92893 1.66669 10 1.66669C12.0711 1.66669 13.75 3.34562 13.75 5.41669Z\"\r\n                stroke=\"#4B5565\"\r\n                stroke-width=\"1.5\"\r\n              />\r\n            </svg>\r\n          )}\r\n          {this.type === 'avatar_leading' && (\r\n            <gb-avatar class=\"avatar-icon\" size=\"xs\" status-icon=\"false\">\r\n              <slot name=\"image\" slot=\"image\"></slot>\r\n            </gb-avatar>\r\n          )}\r\n          {this.type === 'dot_leading' && (\r\n            <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n              <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#17B26A\" />\r\n            </svg>\r\n          )}\r\n          {this.type === 'checkbox' && <gb-checkbox class=\"checkbox\" size=\"md\" type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>}\r\n          <div class=\"text\">\r\n            <slot name=\"name\"></slot>\r\n            {this.supportingText && (\r\n              <span>\r\n                <slot name=\"supporting_text\"></slot>\r\n              </span>\r\n            )}\r\n          </div>\r\n          {this.selected && this.type !== 'checkbox' && (\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <path\r\n                d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n                stroke=\"#075DB2\"\r\n                stroke-width=\"1.66667\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-input-dropdown-menu-item.js","sourceRoot":"","sources":["../../../src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h } from \"@stencil/core\";\r\nimport { DropdownTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-input-dropdown-menu-item',\r\n  styleUrl: 'gb-input-dropdown-menu-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbInputDropdownMenuItem {\r\n  @Prop() type: DropdownTypes;\r\n  @Prop() supportingText: boolean = false;\r\n  @Prop({ mutable: true }) selected: boolean = false;\r\n  @Prop() state: StateEnum;\r\n  @Element() el: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    nameSlot.classList.add('text-md-medium');\r\n\r\n    if(supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-sm-regular');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      // <div class=\"dropdown-container\" onClick={() => (this.selected = !this.selected)}>\r\n      <div class=\"dropdown-container\">\r\n        <div\r\n          class={{\r\n            'dropdown-item': true,\r\n            'dropdown-item--selected': this.selected,\r\n            'dropdown-item--disabled': this.state === 'disabled',\r\n            [this.type]: true,\r\n          }}\r\n          role=\"option\"\r\n          aria-selected={this.selected ? 'true' : 'false'}\r\n          aria-disabled={this.state === 'disabled' ? 'true' : 'false'}\r\n        >\r\n          <div class=\"content\">\r\n            {this.type === 'icon_leading' && (\r\n              <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M5.48131 12.9013C4.30234 13.6034 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3334 6.32572 18.3334H13.6743C14.9621 18.3334 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6034 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n                  stroke=\"#4B5565\"\r\n                  stroke-width=\"1.5\"\r\n                />\r\n                <path\r\n                  d=\"M13.75 5.41669C13.75 7.48776 12.0711 9.16669 10 9.16669C7.92893 9.16669 6.25 7.48776 6.25 5.41669C6.25 3.34562 7.92893 1.66669 10 1.66669C12.0711 1.66669 13.75 3.34562 13.75 5.41669Z\"\r\n                  stroke=\"#4B5565\"\r\n                  stroke-width=\"1.5\"\r\n                />\r\n              </svg>\r\n            )}\r\n            {this.type === 'avatar_leading' && (\r\n              <gb-avatar class=\"avatar-icon\" size=\"xs\" status-icon=\"false\">\r\n                <slot name=\"image\" slot=\"image\"></slot>\r\n              </gb-avatar>\r\n            )}\r\n            {this.type === 'dot_leading' && (\r\n              <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#17B26A\" />\r\n              </svg>\r\n            )}\r\n            {this.type === 'checkbox' && <gb-checkbox class=\"checkbox\" size=\"md\" type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>}\r\n            <slot name=\"name\"></slot>\r\n            {this.supportingText && (\r\n              <span>\r\n                <slot name=\"supporting_text\"></slot>\r\n              </span>\r\n            )}\r\n          </div>\r\n          {this.selected && this.type !== 'checkbox' && (\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <path\r\n                d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n                stroke=\"#075DB2\"\r\n                stroke-width=\"1.66667\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"]}

package/dist/collection/components/gb-input-field/gb-input-field.css

@@ -176,11 +176,11 @@
         --color-text-subtle: var(--gray-500);
     }
 
-    [data-theme="light"] {
+    [data-theme="dark"] {
         --color-text-subtle: var(--gray-500);
     }
 
-    [data-theme="dark"] {
+    [data-theme="light"] {
         --color-text-disabled: var(--gray-300);
     }
 
@@ -2674,332 +2674,204 @@
     margin-top: -0.416em;
 }
 
-div {
-  font-family: var(--font-family-body);
-  font-style: normal;
-  letter-spacing: var(--Font-Letter-spacing-T-md, 0rem);
-}
-
-div.sm {
-  display: flex;
-  width: 24.3125rem;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-2);
-}
-
-div.md {
+.input_container,
+.input_with_label{
   display: flex;
-  width: 24.3125rem;
   flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-2);
-}
-
-.input-with-label {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-2);
-  align-self: stretch;
-}
-
-.input-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   gap: var(--spacing-2);
-  align-self: stretch;
-  border-radius: var(--rounded-sm);
-  border: 1px solid var(--color-border-input, #CDD5DF);
-  background: var(--color-background-card, #FFFFFF);
-}
-
-.sm .input-wrapper {
-  height: var(--spacing-Positive-spacing-8, 2.5rem);
-  padding: 0.25rem var(--spacing-3, 0.75rem);
-}
-
-.md .input-wrapper{
-  height: 3rem;
-  padding: 0.45rem var(--spacing-3, 0.75rem);
-}
-
-.leading_text .input-wrapper.sm,
-.leading_text .input-wrapper.md {
-  flex-direction: row;
 }
 
-.count .input-wrapper.md,
-.count .input-wrapper.sm {
-  padding: 0;
-  flex-direction: row;
+.label{
+  color: var(--color-text, #4B5565);
 }
 
-.input-wrapper:focus-within,
-.leading_text:focus-within .text-input {
-  border: 1.3px solid var(--color-border-selected,#075DB2);
+.hint_text{
+  color: var(--color-text-subtle, #697586);
 }
 
 .content{
-  display: flex;
-  align-items: center;
-  align-content: center;
-  gap: 0.5rem var(--spacing-2);
-  flex: 1 0 0;
-  align-self: stretch;
-}
-
-.password .content{
-  padding: var(--spacing-2) var(--spacing-none) var(--spacing-2) var(--spacing-3);
-  flex-wrap: wrap;
-}
-
-.icon {
-  position: relative;
-  top: 3px;
-}
-
-.leading_text{
-  display: flex;
+  width: 100%;
+  /* height: 100%; */
+  border: none;
 }
 
-.leading_text_wrapper{
-  display: flex;
-  width: fit-content;
-  border-radius: var(--rounded-sm);
+.content::placeholder{
+  color: var(--color-text-disabled, #CDD5DF);
 }
 
-.add-on {
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-  padding: var(--spacing-2) var(--spacing-3);
-  border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;
-  border: 1px solid var(--color-border-input, #CDD5DF);
-  border-right: none;
+.content:focus{
+  outline: none;
 }
 
-.dropdown {
+.icon{
   display: flex;
   align-items: center;
-  gap: var(--spacing-1);
-  align-self: stretch;
-  margin-top: 0.1rem;
-}
-
-select {
-  border: none; 
-  background-color: var(--color-background-card, #FFFFFF); 
-  color: #374151; /* Text color */
-  box-shadow: none; /* Remove default box shadow */
-  outline: none;
-}
-
-select:focus {
-  border:none; /* Maintain light border on focus */
-  box-shadow: none; /* Ensure no additional shadow appears on focus */
 }
 
-.text-input {
+.input{
   display: flex;
   align-items: center;
-  gap: var(--spacing-Positive-spacing-2, 0.5rem);
-  flex: 1 0 0;
+  gap: var(--spacing-2);
   align-self: stretch;
+  border-radius: var(--rounded-sm);
 }
 
-.trailing_button .text-input {
-  padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem);
-}
-
-.count .text-input {
-  padding: var(--spacing-Positive-spacing-2, 0.5rem) 0rem var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem);
-  border-radius: 0.5rem var(--Radius-rounded-none, 0rem) var(--Radius-rounded-none, 0rem) 0.5rem;
-  border: 1px solid var(--color-boarder-input, #CDD5DF);
-}
-
-.leading_dropdown .text-input {
-  padding: var(--spacing-Positive-spacing-2, 0.5rem) var(--spacing-Positive-spacing-3, 0.75rem) var(--spacing-Positive-spacing-2, 0.5rem) 0rem;
-}
-
-.leading_text .text-input {
-  width: 14.4rem;
-  padding: 0.625rem 0.875rem;
-  border: 1px solid var(--gray-300, #D0D5DD);
-  border-radius: 0 var(--rounded-sm) var(--rounded-sm) 0;
+.input,
+.input.icon_leading,
+.password_input{
+  border: 1px solid var(--color-border-input, #CDD5DF);
+  background: var(--color-background-card, #FFFFFF);
 }
 
-.trailing_dropdown .dropdown {
-  display: flex;
-  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) 0;
-  justify-content: space-between;
+.input.leading_text{
+  flex-grow: 1;
+  border-radius: var(--rounded-none, 0rem) 0.5rem 0.5rem var(--rounded-none, 0rem);
 }
 
-.count-action {
+.leading_text_input{
   display: flex;
-  justify-content: space-between;
-  padding-right: var(--spacing-1);
-  align-items: center;
   gap: var(--spacing-none);
+  padding: var(--spacing-none);
 }
 
-.decrease-btn {
+.add_on{
   display: flex;
-  width: 2.5rem;
-  height: 2.5rem;
   justify-content: center;
   align-items: center;
-  border-radius: var(--rounded-none);
-  border-right: 1px solid var(--color-border-input, #CDD5DF);
+  border: 1px solid var(--color-border-input, #CDD5DF);
+  border-right: none;
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;
 }
 
-.payment-method {
-  display: flex;
-  width: 2.125rem;
-  height: var(--spacing-6);
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--rounded-xs);
-  border: 1px solid var(--color-border-subtler, #E3E8EF);
-  background: var(--color-background-card, #FFFFFF);
+.text_input{
+  flex-grow: 1;
+  height: 100%;
 }
 
-.tags-box {
+.trailing_button_text_input{
   display: flex;
-  align-items: center;
-  align-content: center;
-  gap: 0.375rem;
-  flex-wrap: wrap;
-}
-
-.tags input {
-  width: 160px;
-  padding-right: 8px;
-}
-
-input {
-  border: none; 
-  background-color: var(--color-background-card, #FFFFFF); 
-  color: var(--color-text, #4B5565);
-  box-shadow: none; /* Remove default box shadow */
-  outline: none;
-  font-family: var(--Font-Family-Body, Sora);
-  font-style: normal;
-  letter-spacing: var(--Font-Letter-spacing-T-md, 0rem);
-  width: 100%;
+  flex-grow: 1;
 }
 
-.trailing-btn {
+.help_circle{
   display: flex;
-  width: var(--spacing-Positive-spacing-8, 2.5rem);
-  height: var(--spacing-Positive-spacing-8, 2.5rem);
-  justify-content: center;
   align-items: center;
 }
 
-.trailing_dropdown .help-icon {
-  margin-left: -5px;
-}
-
-.trailing_dropdown .help-icon svg {
-  position: relative;
-  left: 5%;
-  top: 2px;
-}
-
-.tags .help-icon svg {
-  left: -52%;
+/* Size Styles */
+.input.sm{
+  min-height: 2.5rem;
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-3);
 }
 
-.help-icon{
-  display: flex;
-  align-items: center;
+.input.md{
+  min-height: 3rem;
+  padding: var(--spacing-none) var(--spacing-3);
 }
 
-.help-svg {
-  margin-right: 0.4rem;
+/* State Styles */
+.input:focus-within,
+.password_input:focus-within,
+.count_text_input:focus-within{
+  border: 1.3px solid var(--color-border-selected, #075DB2);
 }
 
-label{
-  color: var(--color-text, #4B5565);
+.input.disabled,
+.password_input.disabled,
+.count_text_input.disabled,
+.action.disabled{
+  border: 1px solid var(--color-border-disabled, #E3E8EF);
 }
 
-.hint_text{
+.input.disabled,
+.content.disabled,
+.password_input.disabled,
+.count_text_input.disabled{
+  background: var(--color-background-disabled, #F6F8FA);
   color: var(--color-text-subtle, #697586); 
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
-/* Destructive State Styles */
-.help_icon.destructive{
-  stroke: var(--color-icon-danger, #B51726);
+.icon.disabled path[stroke]{
+  stroke: var(--color-icon-disabled, #CDD5DF);
 }
 
-.hint_text.destructive{
-  color: var(--color-text-danger, #B51726);
+.input.destructive,
+.input.icon_leading.destructive,
+.count_text_input.destructive{
+  border: 1px solid var(--color-border-danger, #B51726); 
 }
 
-.input-wrapper.destructive{
-  border: 1px solid var(--color-border-danger, #B51726);
+::slotted([slot="tooltip_label"]){
+  white-space: nowrap;
+  color: var(--color-text, #4B5565);
 }
 
-.leading_text.destructive .text-input {
-  border: 1.5px solid var(--color-border-danger, #B51726);
+::slotted([slot="tooltip_supporting_text"]){
+  min-width: fit-content;
+  max-width: 18.5rem;
+  color: var(--color-text-subtle, #697586);
+  margin-top: 5rem;
 }
 
-/* Disabled Styles */
-.input-wrapper.disabled,
-.leading_text.disabled .text-input,
-.input-wrapper.default.disabled {
-  border: 1px solid var(--color-border-disabled, #E3E8EF);
-  background: var(--color-background-disabled, #F6F8FA);
-  pointer-events: none;
-  cursor: not-allowed;
+/* Type Styles */
+.password_input{
+  display: flex;
+  gap: var(--spacing-3);
+  align-items: center;
+  align-self: stretch;
+  border-radius: var(--rounded-sm);
 }
 
-.input-wrapper.disabled input,
-.leading_text.disabled input{
-  background: var(--color-background-disabled, #F6F8FA);
+.password_content{
+  display: flex;
+  gap: var(--spacing-2);
+  padding: 0.625rem var(--spacing-none) 0.625rem 0.875rem;
+  flex-grow: 1;
 }
 
-.hint_text.disabled{
-  color: var(--color-text-subtle, #697586);
+.dropdown{
+  padding-right: var(--spacing-half);
+  padding-left: var(--spacing-3);
 }
 
-.icon_leading_svg.disabled path{
-  stroke: var(--color-icon-disabled, #CDD5DF);
+.password_icon_leading_content{
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  gap: var(--spacing-2);
 }
 
-.leading_dropdown.disabled select,
-.trailing_dropdown.disabled select{
-  background: var(--color-background-disabled, #F6F8FA);
-  color: var(--color-text-subtle, #697586);
+.count_input{
+  display: flex;
+  gap: var(--spacing-none);
 }
 
-.password_dropdown{
+.count_text_input{
   display: flex;
-  padding-left: var(--spacing-3);
+  padding: var(--spacing-none) var(--spacing-3);
   align-items: center;
-  gap: var(--spacing-1);
+  gap: var(--spacing-2);
+  flex: 1 0 0;
   align-self: stretch;
+  border: 1px solid var(--color-border-input, #CDD5DF);
+  border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;
 }
 
-option{
+.action{
+  border: 1px solid var(--color-border-input, #CDD5DF);
+  border-left: none;
   display: flex;
-  padding: var(--spacing-none);
-    flex-direction: column;
-    align-items: flex-start;
-    align-items: stretch;
-    border-radius: var(--rounded-sm);
-    border: 1px solid var(--color-border-subtler, red);
-    background: var(--color-surface, #FFFFFF);
-    box-shadow: var(--shadow-sm);
-    position: absolute;
-    top: 4.5rem;
-    z-index: 10;
-    gap: var(--spacing-none);
+  padding-right: var(--spacing-1);
+  align-items: center;
+  gap: var(--spacing-none);
+  align-self: stretch;
+  border-radius: var(--rounded-none) 0.5rem 0.5rem var(--rounded-none);
 }
 
-.validation_svg{
-  width: 1.25rem;
-  height: 1.25rem;
+hr{
+  height: 100%;
+  border: 0.5px solid var(--color-border-input, #CDD5DF);
 }