globuswebcomponents 2.0.9 → 2.1.1

package/dist/cjs/test-input-tag.cjs.entry.js

@@ -78,7 +78,7 @@ const TestInputTag = class {
         this.exportValue.emit(this.selectedStaff);
     }
     render() {
-        return (index.h("div", { key: '219acdd5a620b80bceb4dc68173113dd2bcb6fe7', class: "input_group", ref: el => (this.inputGroupElement = el) }, index.h("label", { key: 'b630cc1aadcc0cbcf1baae84c346fca84f927396', htmlFor: this.idOfInput }, this.labelText), index.h("div", { key: '546631612ff168b0d6701c145333cac7058f13f0', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, index.h("input", { key: '102628ca619f8797f44d93fdd7f2d0e66fbcb0d7', 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() }), index.h("div", { key: '245904135a23b0238b40a77cb75ab2efa42471e8', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index$1) => (
+        return (index.h("div", { key: 'bc57c54e4e4d12d1bdc3f1176843625f10a9f506', class: "input_group", ref: el => (this.inputGroupElement = el) }, index.h("label", { key: 'bf4d3f6185ed316419932cb083aebd4b6f2bc37d', htmlFor: this.idOfInput }, this.labelText), index.h("div", { key: 'e580e3765a36eb5692afe75192389bc7a4b2a16a', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, index.h("input", { key: '71c50ae6596289cdcec9b17819944863d5f3d4a6', 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() }), index.h("div", { key: 'd22cb6124bcec36f98bf18d76ef6131290772d59', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index$1) => (
         //   <span>
         //     {staff.fullname}
         //     <img
@@ -87,7 +87,7 @@ const TestInputTag = class {
         //       onClick={() => this.removeStaff(index)}
         //     />
         //   </span>
-        index.h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index$1) }, index.h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), index.h("p", null, staff.fullname.split(' ')[0])))))), this.show && (index.h("div", { key: '40ece86a71403f77ede5f009d98524ef68ae4d5b', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
+        index.h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index$1) }, index.h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), index.h("p", null, staff.fullname.split(' ')[0])))))), this.show && (index.h("div", { key: '5d000fb2ef0b85de2dcfc7bf1db04c1705b851c5', 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/collection/components/gb-input-dropdown/gb-input-dropdown.css

@@ -2658,267 +2658,305 @@
     margin-top: -0.416em;
 }
 
-.input_dropdown_div{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-radius: 0.5rem;
-    gap: var(--spacing-3);
-    border: 1px solid var(--color-border-input, #CDD5DF);
-    background-color: var(--color-background-card, #FFFFFF);
-    padding: var(--spacing-none) var(--spacing-3);
-    cursor: pointer;
-    position: relative;
+.input_dropdown_div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 0.5rem;
+  gap: var(--spacing-3);
+  border: 1px solid var(--color-border-input, #cdd5df);
+  background-color: var(--color-background-card, #ffffff);
+  padding: var(--spacing-none) var(--spacing-3);
+  cursor: pointer;
+  position: relative;
 }
 
-.input_dropdown_container{
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-2);
+.input_dropdown_container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
 }
 
-.input_dropdown_container.tag{
-    min-height: 3rem;
+.input_dropdown_container.tag {
+  min-height: 3rem;
 }
 
-.icon{
-    display: flex;
-    align-items: center;
+.icon {
+  display: flex;
+  align-items: center;
 }
 
-.input_with_label{
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-2);
+.input_with_label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
 }
 
-.hint_text{
+.hint_text {
   color: var(--color-text-subtle, #697586);
 }
 
-.error_text{
-  color: var(--color-text-danger, #B51726);
+.error_text {
+  color: var(--color-text-danger, #b51726);
 }
 
 /* Size Styles */
-.input_dropdown_div.sm{
-    height: 2.5rem;
+.input_dropdown_div.sm {
+  height: 2.5rem;
 }
 
-.input_dropdown_div.md{
-    height: 3rem;
+.input_dropdown_div.md {
+  height: 3rem;
 }
 
-.dot.sm{
-    width: var(--spacing-2);
-    height: var(--spacing-2);
+.dot.sm {
+  width: var(--spacing-2);
+  height: var(--spacing-2);
 }
 
-.dot.md{
-    width: 0.625rem;
-    height: 0.625rem;
+.dot.md {
+  width: 0.625rem;
+  height: 0.625rem;
 }
 
 /* State Styles */
-.input_dropdown_div.focused{
-    border-color: var(--color-border-selected, #075DB2);
+.input_dropdown_div.focused {
+  border-color: var(--color-border-selected, #075db2);
 }
 
-.input_dropdown_div.destructive{
-    border-color: var(--color-border-danger, #B51726);
+.input_dropdown_div.destructive {
+  border-color: var(--color-border-danger, #b51726);
 }
 
-.input_dropdown_div.disabled{
-    background-color: var(--color-background-disabled, #F6F8FA);
-    pointer-events: none;
-    cursor: not-allowed;
+.input_dropdown_div.disabled {
+  background-color: var(--color-background-disabled, #f6f8fa);
+  pointer-events: none;
+  cursor: not-allowed;
 }
 
-.placeholder{
-    display: flex;
-    justify-content: stretch;
-    width: 100%;
-    white-space: nowrap;
+.placeholder {
+  display: flex;
+  justify-content: stretch;
+  width: 100%;
+  white-space: nowrap;
 }
 
-.content{
-    display: flex;
-    gap: var(--spacing-2);
-    overflow: hidden; /* Clip overflowing content */
-    /* width: 50px; */
-    flex: 1 0 0;
+.content {
+  display: flex;
+  gap: var(--spacing-2);
+  overflow: hidden; /* Clip overflowing content */
+  /* width: 50px; */
+  flex: 1 0 0;
 }
 
-.text.tag{
-    display: flex;
-    justify-content: flex-start;
-    align-items: stretch;
-    flex-wrap: wrap;
-    gap: 0.38rem;
-    padding: 0.4rem 0;
+.text.tag {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  flex-wrap: wrap;
+  gap: 0.38rem;
+  padding: 0.4rem 0;
 }
 
-.added_tag{
-    width: fit-content;
+.supporting_text {
+  display: flex;
+  align-items: center;
 }
 
-.help_icon{
-    display: flex;
-    align-items: center;
-    height: fit-content;
+.added_tag {
+  width: fit-content;
 }
 
-.dropdown_icon{
-    display: flex;
-    align-items: center;
+.help_icon {
+  display: flex;
+  align-items: center;
+  height: fit-content;
 }
 
-svg.disabled path{
-    stroke: var(--color-icon-disabled, #CDD5DF);
+.dropdown_icon {
+  display: flex;
+  align-items: center;
 }
 
-.dropdown_menu{
-    display: flex;
-    min-width: 100%;
-    max-height: 300px;
-    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, #E3E8EF);
-    background: var(--color-surface, #FFFFFF);
-    box-shadow: var(--shadow-sm);
-    position: absolute;
-    gap: var(--spacing-none);
-    transition: 1s ease-in-out;
-    overflow-y: auto;
+svg.disabled path {
+  stroke: var(--color-icon-disabled, #cdd5df);
+}
+
+.dropdown_menu {
+  display: flex;
+  min-width: 100%;
+  max-height: 300px;
+  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, #e3e8ef);
+  background: var(--color-surface, #ffffff);
+  box-shadow: var(--shadow-sm);
+  position: absolute;
+  gap: var(--spacing-none);
+  transition: 1s ease-in-out;
+  overflow-y: auto;
 }
 
-.dropdown_menu.top{
-    bottom: 105%;
-    left: 0;
-    z-index: 999;
+.dropdown_menu.top {
+  bottom: 105%;
+  left: 0;
+  z-index: 999;
 }
 
-.dropdown_menu.bottom{
-    top: 105%;
-    right: 0;
-    z-index: 999;
+.dropdown_menu.bottom {
+  top: 105%;
+  right: 0;
+  z-index: 999;
 }
 
 /* .input_dropdown_div.sm.tag{
     min-height: 2.5rem;
 } */
 
-.input_dropdown_div.tag{
-    min-height: 3rem;
-    height: fit-content;
+.input_dropdown_div.tag {
+  min-height: 3rem;
+  height: fit-content;
 }
 
-.input_dropdown_div.md.tag{
-    min-height: 2.5rem;
+.input_dropdown_div.md.tag {
+  min-height: 2.5rem;
 }
 
-.input_dropdown_div.md.tag{
-    min-height: 3rem;
+.input_dropdown_div.md.tag {
+  min-height: 3rem;
 }
 
-.opened{
-    transform: rotate(180deg);
-    transition: 0.2s ease-in-out;
+.opened {
+  transform: rotate(180deg);
+  transition: 0.2s ease-in-out;
 }
 
-::slotted([slot="tooltip_label"]){
+::slotted([slot='tooltip_label']) {
   white-space: nowrap;
-  color: var(--color-text, #4B5565);
+  color: var(--color-text, #4b5565);
 }
 
-::slotted([slot="tooltip_supporting_text"]){
+::slotted([slot='tooltip_supporting_text']) {
   min-width: fit-content;
   max-width: 18.5rem;
   color: var(--color-text-subtle, #697586);
   margin-top: 5rem;
 }
 
-::slotted([slot="initials"].gray){
-    color: #4B5565;
+::slotted([slot='initials'].gray) {
+  color: #4b5565;
 }
 
-::slotted([slot="initials"].blue){
-    color: var(--color-text-information, #064E94);
+::slotted([slot='initials'].blue) {
+  color: var(--color-text-information, #064e94);
 }
 
-::slotted([slot="initials"].cyan){
-    color: var(--color-text-discovery, #0086C9);
+::slotted([slot='initials'].cyan) {
+  color: var(--color-text-discovery, #0086c9);
 }
 
-::slotted([slot="initials"].pink){
-    color: var(--color-text-pink, #DD2590);
+::slotted([slot='initials'].pink) {
+  color: var(--color-text-pink, #dd2590);
 }
 
-::slotted([slot="initials"].purple){
-    color: var(--color-text-purple, #6938EF);
+::slotted([slot='initials'].purple) {
+  color: var(--color-text-purple, #6938ef);
 }
 
-::slotted([slot="initials"].green){
-    color: var(--color-text-success, #079455);
+::slotted([slot='initials'].green) {
+  color: var(--color-text-success, #079455);
 }
 
-::slotted([slot="initials"].yellow){
-    color: var(--color-text-warning, #DC6803);
+::slotted([slot='initials'].yellow) {
+  color: var(--color-text-warning, #dc6803);
 }
 
-.dropdown_search_field{
-    background: var(--color-surface, #FFFFFF);
-    padding: var(--spacing-2) var(--spacing-2) var(--spacing-none) var(--spacing-2);
-    position: sticky;
-    top: 0;
-    z-index: 999;
+.dropdown_search_field {
+  background: var(--color-surface, #ffffff);
+  padding: var(--spacing-2) var(--spacing-2) var(--spacing-none) var(--spacing-2);
+  position: sticky;
+  top: 0;
+  z-index: 999;
 }
 
-.empty_state{
-    margin: auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.empty_state {
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.background{
-    position: relative;
-    width: 80%;
+.background {
+  position: relative;
+  width: 80%;
 }
 
-.message_background{
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-1);
+.message_background {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-1);
 }
 
-.illustration{
-    width: 100px;
-    height: 100px;
+.illustration {
+  width: 100px;
+  height: 100px;
 }
 
-.message{
-    color: var(--color-text-bold, #202939);
+.message {
+  color: var(--color-text-bold, #202939);
 }
 
-.text{
-    display: flex;
-    align-items: center;
-    flex: 1 1 auto; /* Allow it to grow and shrink */
-    overflow: hidden; /* Prevent content from overflowing */
+.text {
+  display: flex;
+  align-items: center;
+  /* flex: 1 1 auto; */
+  overflow: hidden; /* Prevent content from overflowing */
+}
+
+.selected_text {
+  overflow: hidden; /* Hide overflowing text */
+  text-overflow: ellipsis;
+  white-space: nowrap; /* Prevent wrapping */
+  flex: 1 1 auto; /* Take up available space and adjust dynamically */
+  min-width: 0; /* Ensures it respects parent width in flexbox */
+}
+
+.search_input {
+  display: flex;
+  flex: 1 0 0;
+  width: 100%;
+}
+
+input {
+  border: none;
+  color: var(--color-text, #4b5565);
 }
 
-.selected_text{
-    overflow: hidden; /* Hide overflowing text */
-    text-overflow: ellipsis;
-    white-space: nowrap; /* Prevent wrapping */
-    flex: 1 1 auto; /* Take up available space and adjust dynamically */
-    min-width: 0; /* Ensures it respects parent width in flexbox */
+input:focus {
+  outline: none;
+}
+
+input::placeholder {
+  color: var(--color-text-disabled, #cdd5df);
+}
+
+.close_button {
+  position: absolute;
+}
+
+.close_button.sm {
+  right: 0.2rem;
+  top: 0.15rem;
+}
+
+.close_button.md {
+  right: 0.3rem;
+  top: 0.25rem;
 }
 
 /* .new_div{
@@ -2932,4 +2970,4 @@ svg.disabled path{
     background: purple;
     display: flex;
     flex: 1 0 0;
-} */
+} */