@sula-tech/webcomponents 0.4.1 → 0.6.0

package/dist/components/sula-dropdown.js.map

@@ -0,0 +1 @@
+{"file":"sula-dropdown.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,k6TAAk6T;;MCQ76TA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;;;;;AAYE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEzB;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAuB,EAAE;AAoC9B,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAGjB,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AA4BjB,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACjB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YAE3B,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,gBAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;;AAEpC,SAAC;AAED,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,IAAqD,KAAI;YAC7E,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;AACvC,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM;AACjC,SAAC;AAQD,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACjB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;AAC7B,SAAC;AAED,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;YAChB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE;AAChC,SAAC;AAsDF;IA9GC,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK;;;AAKlC,IAAA,mBAAmB,CAAC,KAAY,EAAA;QAC9B,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE;AAEhB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;QAE5D,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;;;IAI1B,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK;;;IAmBlC,YAAY,GAAA;QACV,IAAI,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,oBAAoB;AAE9C,QAAA,OAAO,mBAAmB;;IAiB5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAA,EACnC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,+FAA+F,EAAE,IAAI;AACrG,gBAAA,gCAAgC,EAAE,CAAC,IAAI,CAAC,QAAQ;gBAChD,uBAAuB,EAAE,IAAI,CAAC,QAAQ;gBACtC,gBAAgB,EAAE,IAAI,CAAC,SAAS;aACjC,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,EAEvB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,qBAAqB,EAAE,CAAC,IAAI,CAAC,YAAY;AACzC,gBAAA,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY;AAClD,gBAAA,mBAAmB,EAAE,CAAC,IAAI,CAAC,QAAQ;gBACnC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;aACpC,EAEA,EAAA,IAAI,CAAC,KAAK,CACL,EAEP,CAAC,CAAC,IAAI,CAAC,YAAY,KAClB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,0BAA0B,EAAE,IAAI;AAChC,gBAAA,mBAAmB,EAAE,CAAC,IAAI,CAAC,QAAQ;gBACnC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;aACpC,EAAA,EAEA,IAAI,CAAC,YAAY,CAAC,KAAK,CACnB,CACR,CACG,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0DAA0D,EAAA,EACnE,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,MAAM,CAAE,CAAA,EAAE,WAAW,EAAE,CAAG,EAAA,IAAI,CAAC,YAAY,EAAE,CAAW,SAAA,CAAA,EAAA,CAAc,CAC1H,EAEL,IAAI,CAAC,SAAS,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wCAAwC,EAAA,EACjD,CAAuB,CAAA,uBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,kBAAkB,EAAA,CAA0B,CACxH,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SulaDropdown","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-dropdown/sula-dropdown.scss?tag=sula-dropdown&encapsulation=shadow","src/components/sula-dropdown/sula-dropdown.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.dropdown-focus {\n  outline: 2px solid var(--color-feedback-informational) !important;\n  outline-offset: 2px !important;\n}\n","import { Component, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { SulaMenuListItem, SulaMenuSelectListCustomEvent } from '../../components';\n\n@Component({\n  tag: 'sula-dropdown',\n  styleUrl: 'sula-dropdown.scss',\n  shadow: true,\n})\nexport class SulaDropdown {\n  /**\n   * Dropdown label\n   */\n  @Prop({ mutable: true })\n  label: string;\n\n  /**\n   * Dropdown is disabled\n   */\n  @Prop({ mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Items for list\n   */\n  @Prop({ mutable: true })\n  items: SulaMenuListItem[] = [];\n\n  /**\n   * Value for dropdown\n   */\n  @Prop({ mutable: true })\n  value?: SulaMenuListItem;\n\n  /**\n   * Event emitted when dropdown is clicked\n   */\n  @Event()\n  dropdownClicked: EventEmitter<void>;\n\n  /**\n   * Event emitted when dropdown is focused\n   */\n  @Event()\n  dropdownFocused: EventEmitter<void>;\n\n  /**\n   * Event emitted when dropdown is focused out\n   */\n  @Event()\n  dropdownFocusedOut: EventEmitter<void>;\n\n  /**\n   * Event emitted when item is selected\n   */\n  @Event()\n  menuItemSelected: EventEmitter<SulaMenuListItem>;\n\n  @State()\n  selectedItem?: SulaMenuListItem;\n\n  @State()\n  showItems = false;\n\n  @State()\n  isFocused = false;\n\n  node?: HTMLElement;\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.value) {\n      this.selectedItem = this.value;\n    }\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: Event) {\n    if (!this.node) return;\n\n    const clickInside = this.node.contains(event.target as Node);\n\n    if (!clickInside) {\n      this.showItems = false;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.selectedItem = this.value;\n    }\n  }\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.dropdownClicked.emit();\n\n    if (this.items.length > 0) {\n      this.showItems = !this.showItems;\n    }\n  };\n\n  handleItemSelected = (item: SulaMenuSelectListCustomEvent<SulaMenuListItem>) => {\n    this.menuItemSelected.emit(item.detail);\n    this.selectedItem = item.detail;\n  };\n\n  getIconClass() {\n    if (this.disabled) return 'text-icon-disabled';\n\n    return 'text-text-primary';\n  }\n\n  handleFocus = () => {\n    if (this.disabled) return;\n\n    this.isFocused = true;\n    this.dropdownFocused.emit();\n  };\n\n  handleBlur = () => {\n    if (this.disabled) return;\n\n    this.isFocused = false;\n    this.dropdownFocusedOut.emit();\n  };\n\n  render() {\n    return (\n      <Host ref={node => (this.node = node)}>\n        <div\n          class={{\n            'flex justify-between items-center border border-line-input h-[72px] px-16 rounded-xl relative': true,\n            'bg-surface-body cursor-pointer': !this.disabled,\n            'bg-states-bg-disabled': this.disabled,\n            'dropdown-focus': this.isFocused,\n          }}\n          onClick={this.handleClick}\n          tabIndex={0}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <div class=\"flex flex-col\">\n            <label\n              class={{\n                'text-base leading-4': !this.selectedItem,\n                'text-sm leading-4 font-bold': !!this.selectedItem,\n                'text-text-primary': !this.disabled,\n                'text-text-disabled': this.disabled,\n              }}\n            >\n              {this.label}\n            </label>\n\n            {!!this.selectedItem && (\n              <span\n                class={{\n                  'text-base leading-4 pt-4': true,\n                  'text-text-primary': !this.disabled,\n                  'text-text-disabled': this.disabled,\n                }}\n              >\n                {this.selectedItem.title}\n              </span>\n            )}\n          </div>\n          <div class=\"flex items-center justify-center ml-8 leading-6 text-2xl\">\n            <sula-icon icon={`ph ph-caret-${this.showItems ? 'up' : 'down'}`} customClass={`${this.getIconClass()} text-2xl`}></sula-icon>\n          </div>\n\n          {this.showItems && (\n            <div class=\"absolute z-50 top-[72px] left-0 w-full\">\n              <sula-menu-select-list items={this.items} fullWidth={true} onItemSelected={this.handleItemSelected}></sula-menu-select-list>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sula-icon.js

@@ -1,4 +1,4 @@
-import { S as SulaIcon$1, d as defineCustomElement$1 } from './p-CEU3PNQs.js';
+import { S as SulaIcon$1, d as defineCustomElement$1 } from './p-DULnDBOY.js';
 
 const SulaIcon = SulaIcon$1;
 const defineCustomElement = defineCustomElement$1;