@logosphere-ui/core 0.0.0-alpha.38 → 0.0.0-alpha.40

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.
Files changed (132) hide show
  1. package/AGENTS.md +49 -5
  2. package/dist/AGENTS.md +49 -5
  3. package/dist/atoms/Checkbox/checkbox.d.ts +11 -2
  4. package/dist/atoms/FormField/formfield.d.ts +2 -0
  5. package/dist/{badge-BJqUgXZD.js → badge-B0Bj-HAT.js} +20 -20
  6. package/dist/{badge-COTtd1jh.cjs → badge-DWkKpZTX.cjs} +1 -1
  7. package/dist/badge.cjs +1 -1
  8. package/dist/badge.js +1 -1
  9. package/dist/breadcrumb-BOuCLUJh.cjs +12 -0
  10. package/dist/breadcrumb-BeJqq-5C.js +41 -0
  11. package/dist/breadcrumb.cjs +1 -1
  12. package/dist/breadcrumb.js +1 -1
  13. package/dist/button-MBxtvVqn.cjs +10 -0
  14. package/dist/button-QWCkFTeJ.js +58 -0
  15. package/dist/button.cjs +1 -1
  16. package/dist/button.js +1 -1
  17. package/dist/{calendar-DtpJBtpq.cjs → calendar-DcDT4o-U.cjs} +1 -1
  18. package/dist/{calendar-B7bSuIt4.js → calendar-DsriSHZ4.js} +1 -1
  19. package/dist/calendar.cjs +1 -1
  20. package/dist/calendar.js +1 -1
  21. package/dist/{card-BD8FkSTi.cjs → card-BUWvno93.cjs} +1 -1
  22. package/dist/{card-CAAhjIjf.js → card-R_cKrdHK.js} +2 -2
  23. package/dist/card.cjs +1 -1
  24. package/dist/card.js +1 -1
  25. package/dist/chatbot-BPVC2wqM.cjs +183 -0
  26. package/dist/{chatbot-Cr6iOO7s.js → chatbot-yup4Nz00.js} +13 -13
  27. package/dist/chatbot.cjs +1 -1
  28. package/dist/chatbot.js +1 -1
  29. package/dist/checkbox-BAbPDN6x.cjs +53 -0
  30. package/dist/checkbox-CTfbav6M.js +152 -0
  31. package/dist/checkbox.cjs +1 -1
  32. package/dist/checkbox.js +1 -1
  33. package/dist/chip-group-BqYKZKmu.cjs +26 -0
  34. package/dist/chip-group-CC5RBhN_.js +89 -0
  35. package/dist/chip-group.cjs +1 -0
  36. package/dist/chip-group.js +4 -0
  37. package/dist/combobox-Bah9Akr-.cjs +113 -0
  38. package/dist/combobox-Nxhk75IH.js +460 -0
  39. package/dist/combobox.cjs +1 -1
  40. package/dist/combobox.js +1 -1
  41. package/dist/{datepicker-tJbIvNpy.js → datepicker-BExZseRQ.js} +58 -51
  42. package/dist/datepicker-BOQ13sIm.cjs +85 -0
  43. package/dist/datepicker.cjs +1 -1
  44. package/dist/datepicker.js +1 -1
  45. package/dist/{drawer-g6mHdpjF.cjs → drawer-DBrOkz0z.cjs} +1 -1
  46. package/dist/{drawer-CRB8UUAo.js → drawer-DHsESNFL.js} +2 -2
  47. package/dist/drawer.cjs +1 -1
  48. package/dist/drawer.js +1 -1
  49. package/dist/formfield-JXiv9mvJ.cjs +33 -0
  50. package/dist/{formfield-O327HYt0.js → formfield-ss2mFweu.js} +59 -52
  51. package/dist/formfield.cjs +1 -1
  52. package/dist/formfield.js +1 -1
  53. package/dist/icon.cjs +1 -0
  54. package/dist/icon.js +4 -0
  55. package/dist/index.cjs +7 -7
  56. package/dist/index.d.ts +2 -0
  57. package/dist/index.js +61 -58
  58. package/dist/index.umd.js +202 -171
  59. package/dist/input-D9lFcDHU.js +278 -0
  60. package/dist/input-Dg-jos9u.cjs +60 -0
  61. package/dist/input.cjs +1 -1
  62. package/dist/input.js +1 -1
  63. package/dist/left-menu.cjs +1 -1
  64. package/dist/left-menu.js +1 -1
  65. package/dist/{leftmenu-Cf2gC2J0.js → leftmenu-CMx2K5Ws.js} +4 -4
  66. package/dist/{leftmenu-D0sRExqr.cjs → leftmenu-DCfTelzi.cjs} +1 -1
  67. package/dist/modal-BJNCTlBX.cjs +84 -0
  68. package/dist/{modal-Cfa0imdF.js → modal-DNjURVZy.js} +3 -3
  69. package/dist/modal.cjs +1 -1
  70. package/dist/modal.js +1 -1
  71. package/dist/molecules/Chip/chip-group.d.ts +29 -0
  72. package/dist/molecules/Chip/index.d.ts +2 -0
  73. package/dist/molecules/Input/input.d.ts +17 -0
  74. package/dist/organisms/Combobox/combobox.d.ts +20 -0
  75. package/dist/organisms/DatePicker/datepicker.d.ts +2 -0
  76. package/dist/{pagination-DG56TV5n.js → pagination-B91sZD5E.js} +61 -61
  77. package/dist/pagination-Cnh-o-Nq.cjs +169 -0
  78. package/dist/pagination.cjs +1 -1
  79. package/dist/pagination.js +1 -1
  80. package/dist/{popover-BSfKsQni.js → popover-CSgoaROl.js} +1 -1
  81. package/dist/popover-DwDyLpQq.cjs +30 -0
  82. package/dist/popover.cjs +1 -1
  83. package/dist/popover.js +1 -1
  84. package/dist/shared/icons/index.d.ts +1 -0
  85. package/dist/{switch-8RGGesy5.cjs → switch-Do6SCkPJ.cjs} +2 -2
  86. package/dist/{switch-DNqPqH-R.js → switch-uYVuohJ-.js} +25 -21
  87. package/dist/switch.cjs +1 -1
  88. package/dist/switch.js +1 -1
  89. package/dist/tab-BvRVHpWs.cjs +41 -0
  90. package/dist/{tab-CuBCFGoO.js → tab-Byh4UgFB.js} +1 -1
  91. package/dist/tab.cjs +1 -1
  92. package/dist/tab.js +1 -1
  93. package/dist/{text-area-coWx4Xn-.js → text-area-CHkrGi3S.js} +16 -12
  94. package/dist/text-area-DvOiCcKP.cjs +51 -0
  95. package/dist/textarea.cjs +1 -1
  96. package/dist/textarea.js +1 -1
  97. package/dist/{timepicker-rNyKCfN3.js → timepicker-CAat7fcK.js} +6 -2
  98. package/dist/{timepicker-WxA2Uo66.cjs → timepicker-Co7lW5Rp.cjs} +1 -1
  99. package/dist/timepicker.cjs +1 -1
  100. package/dist/timepicker.js +1 -1
  101. package/dist/{toast-container-Cb0MduXt.js → toast-container-DxFwLT5S.js} +3 -3
  102. package/dist/{toast-container-B9E_mVk6.cjs → toast-container-aY1lGjRi.cjs} +1 -1
  103. package/dist/toast.cjs +1 -1
  104. package/dist/toast.js +1 -1
  105. package/dist/tree-menu-Dqy14_m2.cjs +47 -0
  106. package/dist/{tree-menu-CufITiv_.js → tree-menu-Psek8QB9.js} +2 -2
  107. package/dist/tree-menu.cjs +1 -1
  108. package/dist/tree-menu.js +1 -1
  109. package/dist/ui-icon-Cd5YhUeQ.cjs +22 -0
  110. package/dist/ui-icon-Ckljc9hg.js +74 -0
  111. package/package.json +11 -1
  112. package/dist/breadcrumb-BB61Xt0s.js +0 -41
  113. package/dist/breadcrumb-Cop-B1J7.cjs +0 -12
  114. package/dist/button-DRZ4sG4T.cjs +0 -10
  115. package/dist/button-Uu9oaieg.js +0 -58
  116. package/dist/chatbot-Dl6P98Jq.cjs +0 -183
  117. package/dist/checkbox-CX0LgsWP.js +0 -148
  118. package/dist/checkbox-DpbKHANK.cjs +0 -53
  119. package/dist/combobox-CFF30L-n.js +0 -393
  120. package/dist/combobox-s7NFPAd3.cjs +0 -108
  121. package/dist/datepicker-BCNJROwD.cjs +0 -85
  122. package/dist/formfield-CRcyUMvQ.cjs +0 -33
  123. package/dist/input-BUX_2G5m.js +0 -257
  124. package/dist/input-Tkm7VBBl.cjs +0 -59
  125. package/dist/modal-DFnpqdWX.cjs +0 -84
  126. package/dist/pagination-HyX0EAZr.cjs +0 -169
  127. package/dist/popover-DhEvLuOo.cjs +0 -30
  128. package/dist/tab-CDMcFHvP.cjs +0 -41
  129. package/dist/text-area-DCBCDtJw.cjs +0 -51
  130. package/dist/tree-menu-DuJuy5pp.cjs +0 -47
  131. package/dist/ui-icon-Ctn4nGFa.js +0 -70
  132. package/dist/ui-icon-jKyMV1zp.cjs +0 -22
@@ -1,108 +0,0 @@
1
- "use strict";const r=require("lit"),o=require("lit/decorators.js"),p=require("@popperjs/core");require("./badge-COTtd1jh.cjs");require("./checkbox-DpbKHANK.cjs");require("./formfield-CRcyUMvQ.cjs");require("./ui-icon-jKyMV1zp.cjs");const d='.combobox{display:flex;flex-direction:column;gap:var(--spacing-1);font-family:var(--font-family-base);width:100%}.combobox__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text)}.combobox__label--required:after{content:" *";color:var(--color-primary)}.combobox__readonly{border:none;background:transparent;font-size:var(--font-size-sm);color:var(--color-body-text);padding:0;outline:none;font-family:var(--font-family-base)}.combobox__wrapper{position:relative;width:100%;cursor:pointer}.combobox__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--spacing-2);padding:0;border:none;border-radius:0;background-color:transparent;cursor:pointer;overflow:hidden;font-size:var(--font-size-sm);color:var(--color-body-text);transition:color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.combobox__trigger--default{min-height:20px}.combobox__trigger--large{min-height:24px;font-size:var(--font-size-base)}.combobox__trigger--open{color:var(--color-body-text)}.combobox__trigger--readonly{cursor:default;color:var(--color-tertiary)}.combobox__trigger--disabled{cursor:not-allowed;color:var(--color-tertiary)}.combobox__trigger--readonly .combobox__chevron,.combobox__trigger--disabled .combobox__chevron{opacity:.3}.combobox__placeholder{color:var(--color-tertiary);font-size:var(--font-size-sm);flex:1}.combobox__single-value{flex:1;font-size:var(--font-size-sm);color:var(--color-body-text)}.combobox__trigger--not-clearable .combobox__single-value,.combobox__trigger--not-clearable .combobox__placeholder{padding-right:24px}.combobox__chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--color-tertiary);flex-shrink:0;transition:transform var(--transition-speed-fast) var(--transition-timing);position:absolute;right:var(--spacing-3)}.combobox__chevron--open{transform:rotate(180deg)}.combobox__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1);flex:1;overflow:hidden}.combobox__tag{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-light);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--color-body-text);white-space:nowrap}.combobox__tag-remove{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--color-tertiary);line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__tag-remove:hover{color:var(--color-body-text)}.combobox__clear{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0 12px 0 0;cursor:pointer;color:var(--color-secondary);line-height:1;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.combobox__clear:hover{color:var(--color-body-text)}.combobox__filter-input{flex:1;border:none;outline:none;background:transparent;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);min-width:0;padding:0;cursor:text}.combobox__filter-input:disabled{cursor:not-allowed}.combobox__filter-input::placeholder{color:var(--color-tertiary)}.combobox__filter-input--inline{flex:1;min-width:60px}.combobox__trigger--multi-filter{flex-wrap:wrap;height:auto;min-height:32px;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-3)}.combobox__trigger--large.combobox__trigger--multi-filter{min-height:40px}.combobox__dropdown[popover]{position:fixed;inset:unset;margin:0;padding:0;border:none}.combobox__dropdown{width:auto;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-sm);z-index:var(--z-index-dropdown);overflow:hidden}.combobox__search{width:100%;padding:var(--spacing-2) var(--spacing-3);border:none;border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-body-text);font-family:var(--font-family-base);outline:none;box-sizing:border-box;background-color:var(--color-body-bg)}.combobox__search::placeholder{color:var(--color-tertiary)}.combobox__list{max-height:208px;overflow-y:auto}.combobox__item{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-body-text);cursor:pointer;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.combobox__item:hover,.combobox__item--selected,.combobox__item--focused{background-color:var(--color-light)}.combobox__empty{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-tertiary);text-align:center}';var h=Object.defineProperty,b=Object.getOwnPropertyDescriptor,t=(c,e,i,s)=>{for(var n=s>1?void 0:s?b(e,i):e,l=c.length-1,a;l>=0;l--)(a=c[l])&&(n=(s?a(e,i,n):a(n))||n);return s&&n&&h(e,i,n),n};exports.Combobox=class extends r.LitElement{constructor(){super(...arguments),this.inputId="combo-"+Math.random().toString(36).substring(2),this.label="",this.helper="",this.error="",this.placeholder="Seçim yapınız",this.required=!1,this.disabled=!1,this.readOnly=!1,this.variant="default",this.multiple=!1,this.filterable=!1,this.optionLabel="label",this.optionValue="value",this.emptyMessage="Sonuç yok",this.items=[],this.size="default",this.clearable=!0,this.selected=[],this.inputValue="",this.isOpen=!1,this.focusedIndex=-1,this._filteredItems=[],this._handleOutsideClick=e=>{e.composedPath().includes(this)||this._closeDropdown()},this._handleKeydown=e=>{if(!(this.readOnly||this.disabled))switch(e.key){case"ArrowDown":e.preventDefault(),this.isOpen?this.focusedIndex=Math.min(this.focusedIndex+1,this._filteredItems.length-1):(this.isOpen=!0,this.focusedIndex=0),this._scrollFocusedIntoView();break;case"ArrowUp":e.preventDefault(),this.isOpen&&(this.focusedIndex=Math.max(this.focusedIndex-1,0),this._scrollFocusedIntoView());break;case"Enter":e.preventDefault(),this.isOpen?this.focusedIndex>=0&&this.focusedIndex<this._filteredItems.length&&this._selectItem(this._filteredItems[this.focusedIndex],e):(this.isOpen=!0,this.focusedIndex=0);break;case"Escape":e.preventDefault(),this._closeDropdown();break}},this._removeTag=(e,i)=>{i.stopPropagation(),this.setSelected(this.selected.filter(s=>s[this.optionValue]!==e[this.optionValue]))},this._clearSelection=e=>{e.stopPropagation(),this.setSelected([]),this.inputValue=""},this._onFilterFocus=()=>{this.readOnly||this.disabled||(this.inputValue="",this.isOpen=!0,this.focusedIndex=0)},this._onFilterInput=e=>{this.readOnly||this.disabled||(this.inputValue=e.target.value,this.focusedIndex=0,this.isOpen||(this.isOpen=!0))},this._stopPropagation=e=>e.stopPropagation(),this._onTriggerClick=()=>{this.readOnly||this.disabled||(this.filterable&&!this.multiple?this._focusFilterInput():this.isOpen=!this.isOpen)},this._onFieldClick=e=>{if(this.readOnly||this.disabled)return;const i=e.composedPath();if(!(i.some(l=>{const a=l?.classList;return a?.contains("combobox__trigger")||a?.contains("combobox__chevron")})||i.some(l=>l?.classList?.contains("combobox__dropdown")))){if(this.filterable&&!this.multiple){this.isOpen=!0,this._focusFilterInput();return}this.isOpen=!this.isOpen}},this._onChevronClick=()=>{if(!(this.readOnly||this.disabled)){if(this.isOpen){this._closeDropdown();return}this.isOpen=!0,this.filterable&&!this.multiple&&this._focusFilterInput()}}}willUpdate(e){if(e.has("items")||e.has("inputValue")||e.has("optionLabel")){const i=this.inputValue.toLocaleLowerCase();this._filteredItems=this.items.filter(s=>String(s[this.optionLabel]??"").toLocaleLowerCase().includes(i))}}updated(e){if(e.has("isOpen")&&this.isOpen&&this.filterable&&this.multiple&&this.shadowRoot?.querySelector(".combobox__search")?.focus(),e.has("isOpen")){this.isOpen?this.updateComplete.then(()=>{this._showPopover(),this._updatePopper()}):(this._hidePopover(),this._destroyPopper());return}this.isOpen&&this._updatePopper()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),this._destroyPopper()}_closeDropdown(){this.isOpen=!1,this.focusedIndex=-1,this.filterable&&(this.inputValue="")}get _filterDisplayValue(){return this.isOpen?this.inputValue:!this.multiple&&this.selected.length?String(this.selected[0][this.optionLabel]):""}_focusFilterInput(){this.updateComplete.then(()=>{this.shadowRoot?.querySelector(".combobox__filter-input")?.focus()})}_scrollFocusedIntoView(){this.updateComplete.then(()=>{this.shadowRoot?.querySelectorAll(".combobox__item")?.[this.focusedIndex]?.scrollIntoView({block:"nearest"})})}selectedItems(){return this.selected}isSelected(e){return this.selected.some(i=>i[this.optionValue]===e[this.optionValue])}_selectItem(e,i){i.stopPropagation();let s;this.multiple?s=this.isSelected(e)?this.selected.filter(n=>n[this.optionValue]!==e[this.optionValue]):[...this.selected,e]:(s=[e],this.isOpen=!1,this.filterable&&(this.inputValue="")),this.setSelected(s)}setSelected(e){this.selected=e,this.dispatchEvent(new CustomEvent("selected",{detail:{selected:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0}))}_renderTagList(){return r.html`
2
- <div class="combobox__tags">
3
- ${this.selected.map(e=>r.html`
4
- <logosphere-badge
5
- variant="default"
6
- text=${String(e[this.optionLabel])}
7
- ?closeable=${!this.readOnly}
8
- @close=${i=>this._removeTag(e,i)}
9
- ></logosphere-badge>
10
- `)}
11
- </div>
12
- `}_renderTriggerContent(){return this.filterable&&!this.multiple?r.html`
13
- <input
14
- class="combobox__filter-input"
15
- type="text"
16
- .value=${this._filterDisplayValue}
17
- placeholder=${this.placeholder}
18
- ?disabled=${this.readOnly||this.disabled}
19
- @focus=${this._onFilterFocus}
20
- @input=${this._onFilterInput}
21
- @keydown=${this._handleKeydown}
22
- @click=${this._stopPropagation}
23
- />
24
- ${this.clearable&&!this.readOnly&&this.selected.length?r.html`
25
- <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
26
- <ui-icon name="uil-times" size="14"></ui-icon>
27
- </button>
28
- `:r.nothing}
29
- `:this.multiple&&this.selected.length?this._renderTagList():!this.multiple&&this.selected.length?r.html`
30
- <span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
31
- ${this.clearable&&!this.readOnly?r.html`
32
- <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
33
- <ui-icon name="uil-times" size="14"></ui-icon>
34
- </button>
35
- `:r.nothing}
36
- `:r.html`<span class="combobox__placeholder">${this.placeholder}</span>`}_renderDropdown(){return r.html`
37
- <div data-combobox-popper popover="manual" class="combobox__dropdown">
38
- ${this.filterable&&this.multiple?r.html`
39
- <input
40
- class="combobox__search"
41
- type="text"
42
- placeholder=${this.placeholder}
43
- .value=${this.inputValue}
44
- @input=${this._onFilterInput}
45
- @keydown=${this._handleKeydown}
46
- @click=${this._stopPropagation}
47
- />
48
- `:r.nothing}
49
-
50
- <div class="combobox__list">
51
- ${this._filteredItems.length===0?r.html`<div class="combobox__empty">${this.emptyMessage}</div>`:this._filteredItems.map((e,i)=>r.html`
52
- <div
53
- class="combobox__item
54
- ${!this.multiple&&this.isSelected(e)?"combobox__item--selected":""}
55
- ${i===this.focusedIndex?"combobox__item--focused":""}"
56
- @click=${s=>this._selectItem(e,s)}
57
- @mouseenter=${()=>{this.focusedIndex=i}}
58
- >
59
- ${this.multiple?r.html`
60
- <logosphere-checkbox
61
- .checked=${this.isSelected(e)}
62
- .value=${e[this.optionValue]}
63
- @click=${this._stopPropagation}
64
- ></logosphere-checkbox>
65
- `:r.nothing}
66
- ${e[this.optionLabel]}
67
- </div>
68
- `)}
69
- </div>
70
- </div>
71
- `}_getPopperModifiers(){return[{name:"offset",options:{offset:[0,8]}},{name:"preventOverflow",options:{padding:8}},{name:"flip",options:{padding:8,fallbackPlacements:["top-start","right-start","left-start","bottom-end","top-end"]}}]}_getPopperReferenceElement(){return this._formFieldElement?.shadowRoot?.querySelector(".formfield__container")??this._referenceElement}_updatePopper(){const e=this._getPopperReferenceElement(),i=this._dropdownElement;if(!this.isOpen||!e||!i||!this.isConnected)return;const s=Math.round(e.getBoundingClientRect().width);if(i.style.width=`${s}px`,this._popperInstance){this._popperInstance.setOptions({placement:"bottom-start",strategy:"fixed",modifiers:this._getPopperModifiers()}),this._popperInstance.update();return}this._popperInstance=p.createPopper(e,i,{placement:"bottom-start",strategy:"fixed",modifiers:this._getPopperModifiers()})}_destroyPopper(){this._popperInstance&&(this._popperInstance.destroy(),this._popperInstance=void 0)}_showPopover(){this._dropdownElement?.showPopover?.()}_hidePopover(){const e=this._dropdownElement;try{e?.hidePopover?.()}catch{}}render(){const e=["combobox__trigger",`combobox__trigger--${this.size}`,this.disabled?"combobox__trigger--disabled":"",this.readOnly?"combobox__trigger--readonly":"",!this.readOnly&&!this.disabled&&this.isOpen?"combobox__trigger--open":"",this.clearable?"":"combobox__trigger--not-clearable"].filter(Boolean).join(" ");return r.html`
72
- <div class="combobox">
73
- <logosphere-formfield
74
- .label=${this.label}
75
- .helper=${this.helper}
76
- .error=${this.error}
77
- cursor="pointer"
78
- .required=${this.required}
79
- .disabled=${this.disabled}
80
- .readonly=${this.readOnly}
81
- .size=${this.size}
82
- .variant=${this.variant}
83
- .forceFocused=${this.isOpen}
84
- @click=${this._onFieldClick}
85
- >
86
- <div class="combobox__wrapper">
87
- <div
88
- class="${e}"
89
- tabindex="${this.readOnly||this.filterable||this.disabled?-1:0}"
90
- @click=${this._onTriggerClick}
91
- @keydown=${this.filterable?r.nothing:this._handleKeydown}
92
- >
93
- ${this._renderTriggerContent()}
94
- </div>
95
-
96
- ${this._renderDropdown()}
97
- </div>
98
- <span
99
- class="combobox__chevron ${this.isOpen?"combobox__chevron--open":""}"
100
- @click=${this._onChevronClick}
101
- >
102
- <ui-icon name="uil-angle-down" size="16"></ui-icon>
103
- </span>
104
- </logosphere-formfield>
105
- </div>
106
- `}};exports.Combobox.styles=[r.css`
107
- ${r.unsafeCSS(d)}
108
- `];t([o.property({type:String})],exports.Combobox.prototype,"label",2);t([o.property({type:String})],exports.Combobox.prototype,"helper",2);t([o.property({type:String})],exports.Combobox.prototype,"error",2);t([o.property({type:String})],exports.Combobox.prototype,"placeholder",2);t([o.property({type:Boolean})],exports.Combobox.prototype,"required",2);t([o.property({type:Boolean})],exports.Combobox.prototype,"disabled",2);t([o.property({type:Boolean})],exports.Combobox.prototype,"readOnly",2);t([o.property({type:String})],exports.Combobox.prototype,"variant",2);t([o.property({type:Boolean})],exports.Combobox.prototype,"multiple",2);t([o.property({type:Boolean})],exports.Combobox.prototype,"filterable",2);t([o.property({type:String})],exports.Combobox.prototype,"optionLabel",2);t([o.property({type:String})],exports.Combobox.prototype,"optionValue",2);t([o.property({type:String})],exports.Combobox.prototype,"emptyMessage",2);t([o.property({type:Array})],exports.Combobox.prototype,"items",2);t([o.property({type:String})],exports.Combobox.prototype,"size",2);t([o.property({type:Boolean})],exports.Combobox.prototype,"clearable",2);t([o.state()],exports.Combobox.prototype,"selected",2);t([o.state()],exports.Combobox.prototype,"inputValue",2);t([o.state()],exports.Combobox.prototype,"isOpen",2);t([o.state()],exports.Combobox.prototype,"focusedIndex",2);t([o.query(".combobox__wrapper")],exports.Combobox.prototype,"_referenceElement",2);t([o.query("logosphere-formfield")],exports.Combobox.prototype,"_formFieldElement",2);t([o.query("[data-combobox-popper]")],exports.Combobox.prototype,"_dropdownElement",2);exports.Combobox=t([o.customElement("logosphere-combobox")],exports.Combobox);
@@ -1,85 +0,0 @@
1
- "use strict";const s=require("lit"),r=require("lit/decorators.js"),d=require("lit/directives/live.js"),u=require("@popperjs/core");require("./formfield-CRcyUMvQ.cjs");const h=require("./calendar-DtpJBtpq.cjs");require("./ui-icon-jKyMV1zp.cjs");const _=require("dayjs"),c=".dp{display:block;position:relative;width:100%;font-family:var(--font-family-base)}.dp__field,.dp__reference{width:100%}.dp__input{width:100%;border:none;outline:none;background:transparent;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);line-height:1.5}.dp__input::placeholder{color:var(--color-tertiary)}.dp__input:disabled{cursor:not-allowed}.dp__icon-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.dp__icon-btn_suffix{padding-right:var(--spacing-1)}.dp__icon-btn:hover{color:var(--color-gray-600)}.dp__icon-btn:disabled{cursor:not-allowed;opacity:.5}.dp__popup{background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:var(--z-index-dropdown);padding:var(--spacing-4);box-sizing:border-box;overflow:hidden;max-height:calc(100vh - 16px)}";var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,i=(p,e,t,a)=>{for(var n=a>1?void 0:a?f(e,t):e,o=p.length-1,l;o>=0;o--)(l=p[o])&&(n=(a?l(e,t,n):l(n))||n);return a&&n&&g(e,t,n),n};let y=0;const m=()=>`dp-${++y}`;exports.LogosphereDatePicker=class extends s.LitElement{constructor(){super(...arguments),this.value=null,this.min=null,this.max=null,this.required=!1,this.disabled=!1,this.readonly=!1,this.expandFactor=1.05,this.placeholder="GG/AA/YYYY veya GG.AA.YYYY",this.label="",this.helper="",this.error="",this.size="default",this.variant="default",this.rangeMode=!1,this.disabledDays=[],this.rangeStart=null,this.rangeEnd=null,this._open=!1,this._rangeStart=null,this._rangeEnd=null,this._hasError=!1,this._errorMsg="",this._inputDraft=null,this._errorTimer=null,this.inputId=m(),this._outsideClick=e=>{this._open&&(e.composedPath().includes(this)||(this._parseAndSetDate(),this._toggleOpen(!1)))},this._openDropdown=()=>{this._toggleOpen(!0)},this._onBlur=()=>{this._parseAndSetDate()}}willUpdate(e){e.has("rangeStart")&&(this._rangeStart=this.rangeStart),e.has("rangeEnd")&&(this._rangeEnd=this.rangeEnd),e.has("value")&&!this._isInputFocused()&&(this._inputDraft=null)}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._outsideClick,!0)}disconnectedCallback(){window.removeEventListener("click",this._outsideClick,!0),this._destroyPopper(),this._errorTimer&&clearTimeout(this._errorTimer),super.disconnectedCallback()}updated(e){if(super.updated(e),e.has("_open")){this._open?this._updatePopper():this._destroyPopper();return}this._open&&this._updatePopper()}_safeDay(e){return h.safeDay(e)}_isInputFocused(){return this.shadowRoot?.activeElement===this._inputElement}_withinBounds(e){const t=this._safeDay(this.min),a=this._safeDay(this.max);return!(t&&e.isBefore(t,"day")||a&&e.isAfter(a,"day")||this.disabledDays.includes(e.day()))}_displayValue(){if(this.rangeMode&&this._rangeStart&&this._rangeEnd){const t=this._safeDay(this._rangeStart),a=this._safeDay(this._rangeEnd);if(t&&a)return`${t.format("DD/MM/YYYY")} - ${a.format("DD/MM/YYYY")}`}const e=this._safeDay(this.value);return e?e.format("DD/MM/YYYY"):""}_inputValue(){return this._inputDraft??this._displayValue()}_emitChange(e){this.value=e,this.dispatchEvent(new CustomEvent("change",{detail:{value:e}})),this.onChange?.(e)}_emitRangeChange(){if(!this._rangeStart||!this._rangeEnd)return;const e={start:this._rangeStart,end:this._rangeEnd};this.dispatchEvent(new CustomEvent("rangeChange",{detail:e})),this.onRangeChange?.(e)}_showInputError(e){this._errorTimer&&clearTimeout(this._errorTimer),this._hasError=!0,this._errorMsg=e,this._errorTimer=setTimeout(()=>this._clearInputError(),3e3)}_clearInputError(){this._hasError=!1,this._errorMsg="",this._errorTimer&&(clearTimeout(this._errorTimer),this._errorTimer=null)}_toggleOpen(e){if(this.disabled)return;const t=e??!this._open;this._open=t,t&&this.updateComplete.then(()=>this._updatePopper())}_onInput(e){const t=e.target.value;this._inputDraft=t,t.trim()||(this._emitChange(null),this.rangeMode&&(this._rangeStart=null,this._rangeEnd=null)),this._clearInputError()}_parseSingleDate(e){for(const t of h.DATE_FORMATS){const a=_(e,t,!0);if(a.isValid())return a}return this._safeDay(e)}_parseRangeInput(e){const t=e.split(/\s+-\s+/);if(t.length!==2)return null;const a=this._parseSingleDate(t[0].trim()),n=this._parseSingleDate(t[1].trim());return!a||!n?null:a.isAfter(n,"day")?{start:n,end:a}:{start:a,end:n}}_onKeydown(e){(e.key==="Tab"||e.key==="Enter")&&this._parseAndSetDate()}_parseAndSetDate(){const e=this._inputElement;if(!e)return;const t=e.value.trim();if(!t){if(this.rangeMode&&this._rangeStart&&!this._rangeEnd)return;this._emitChange(null),this.rangeMode&&(this._rangeStart=null,this._rangeEnd=null),this._inputDraft=null;return}if(this.rangeMode){const n=this._parseRangeInput(t);if(n){if(this._withinBounds(n.start)&&this._withinBounds(n.end)){this._rangeStart=n.start.format("YYYY-MM-DD"),this._rangeEnd=n.end.format("YYYY-MM-DD"),this._inputDraft=null,this._clearInputError(),this._emitRangeChange();return}this._showInputError("Seçilen aralık sınırlar dışında.");return}const o=this._parseSingleDate(t);if(o&&this._withinBounds(o)){this._rangeStart=o.format("YYYY-MM-DD"),this._rangeEnd=null,this._inputDraft=null,this._clearInputError();return}this._showInputError("Geçersiz aralık formatı. Örnek: 19/09/2025 - 25/09/2025");return}const a=this._parseSingleDate(t);a&&this._withinBounds(a)?(this._emitChange(a.format("YYYY-MM-DD")),this._inputDraft=null,this._clearInputError()):this._showInputError("Geçersiz tarih formatı. Örnek: 19/09/2025")}_updatePopper(){if(!this._open||!this.isConnected)return;const e=this._referenceElement,t=this._popupElement;if(!e||!t)return;const a=Math.max(270,Math.round(e.getBoundingClientRect().width*(this.expandFactor||1)));if(t.style.width=`${a}px`,this._popperInstance){this._popperInstance.setOptions({placement:"bottom",strategy:"fixed",modifiers:this._getPopperModifiers()}),this._popperInstance.update();return}this._popperInstance=u.createPopper(e,t,{placement:"bottom",strategy:"fixed",modifiers:this._getPopperModifiers()})}_getPopperModifiers(){return[{name:"offset",options:{offset:[0,8]}},{name:"preventOverflow",options:{padding:8}},{name:"flip",options:{padding:8,fallbackPlacements:["top-start","right-start","left-start","bottom-end","top-end","right-end","left-end"]}}]}_destroyPopper(){this._popperInstance&&(this._popperInstance.destroy(),this._popperInstance=void 0)}_handleCalendarChange(e){this._emitChange(e.detail.value),this._inputDraft=null,this._toggleOpen(!1)}_handleCalendarRangeChange(e){this._rangeStart=e.detail.start,this._rangeEnd=e.detail.end,this._inputDraft=null,this._emitRangeChange(),this._toggleOpen(!1)}_handleCalendarStateChange(e){this._rangeStart=e.detail.rangeStart,this._rangeEnd=e.detail.rangeEnd}_handleSuffixClick(e){e.stopPropagation(),this._openDropdown(),this._inputElement?.focus()}_handleClearClick(e){e.stopPropagation(),this._emitChange(null),this._rangeStart=null,this._rangeEnd=null,this._inputDraft=null,this._clearInputError(),this._inputElement?.focus()}render(){const e=this.error||(this._hasError?this._errorMsg:""),t=!!this._displayValue();return s.html`
2
- <div class="dp">
3
- <div class="dp__reference">
4
- <logosphere-formfield
5
- class="dp__field"
6
- .label=${this.label}
7
- .helper=${this.helper}
8
- .error=${e}
9
- .required=${this.required}
10
- .disabled=${this.disabled}
11
- .readonly=${this.readonly}
12
- .placeholder=${this.placeholder}
13
- .size=${this.size}
14
- .variant=${this.variant}
15
- @click=${this._openDropdown}
16
- >
17
- <input
18
- id=${this.inputId}
19
- class="dp__input"
20
- .value=${d.live(this._inputValue())}
21
- ?disabled=${this.disabled}
22
- ?readonly=${this.readonly}
23
- placeholder=${this.placeholder}
24
- aria-label="Tarih girin"
25
- aria-invalid=${e?"true":"false"}
26
- @focus=${this._openDropdown}
27
- @input=${this._onInput}
28
- @keydown=${this._onKeydown}
29
- @blur=${this._onBlur}
30
- />
31
- ${t?s.html`
32
- <button
33
- slot="clear"
34
- class="dp__icon-btn dp__icon-btn_suffix"
35
- type="button"
36
- aria-label="Temizle"
37
- @click=${this._handleClearClick}
38
- >
39
- <ui-icon name="uil-times" size="14"></ui-icon>
40
- </button>
41
- `:s.nothing}
42
- <button
43
- id=${this.inputId+"-ico"}
44
- slot="suffix"
45
- class="dp__icon-btn"
46
- type="button"
47
- aria-label=${this._open?"Takvimi kapat":"Takvimi aç"}
48
- aria-expanded=${this._open?"true":"false"}
49
- aria-haspopup="dialog"
50
- @click=${this._handleSuffixClick}
51
- >
52
- <ui-icon name="uil-calendar" size="16"></ui-icon>
53
- </button>
54
- </logosphere-formfield>
55
- </div>
56
-
57
- ${this._open?s.html`
58
- <div
59
- data-datepicker-popper
60
- class="dp__popup"
61
- role="dialog"
62
- aria-modal="true"
63
- aria-label="Tarih seçici"
64
- >
65
- <logosphere-calendar
66
- .value=${this.value}
67
- .min=${this.min}
68
- .max=${this.max}
69
- .disabled=${this.disabled}
70
- .rangeMode=${this.rangeMode}
71
- .disabledDays=${this.disabledDays}
72
- .rangeStart=${this._rangeStart}
73
- .rangeEnd=${this._rangeEnd}
74
- .closable=${!0}
75
- @change=${this._handleCalendarChange}
76
- @rangeChange=${this._handleCalendarRangeChange}
77
- @calendar-state-change=${this._handleCalendarStateChange}
78
- @close-request=${()=>this._toggleOpen(!1)}
79
- ></logosphere-calendar>
80
- </div>
81
- `:s.nothing}
82
- </div>
83
- `}};exports.LogosphereDatePicker.styles=[s.css`
84
- ${s.unsafeCSS(c)}
85
- `];i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"value",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"min",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"max",2);i([r.property({type:Boolean})],exports.LogosphereDatePicker.prototype,"required",2);i([r.property({type:Boolean})],exports.LogosphereDatePicker.prototype,"disabled",2);i([r.property({type:Boolean})],exports.LogosphereDatePicker.prototype,"readonly",2);i([r.property({type:Number})],exports.LogosphereDatePicker.prototype,"expandFactor",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"placeholder",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"label",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"helper",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"error",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"size",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"variant",2);i([r.property({type:Boolean})],exports.LogosphereDatePicker.prototype,"rangeMode",2);i([r.property({type:Array})],exports.LogosphereDatePicker.prototype,"disabledDays",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"rangeStart",2);i([r.property({type:String})],exports.LogosphereDatePicker.prototype,"rangeEnd",2);i([r.property({attribute:!1})],exports.LogosphereDatePicker.prototype,"onChange",2);i([r.property({attribute:!1})],exports.LogosphereDatePicker.prototype,"onRangeChange",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_open",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_rangeStart",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_rangeEnd",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_hasError",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_errorMsg",2);i([r.state()],exports.LogosphereDatePicker.prototype,"_inputDraft",2);i([r.query(".dp__reference")],exports.LogosphereDatePicker.prototype,"_referenceElement",2);i([r.query("[data-datepicker-popper]")],exports.LogosphereDatePicker.prototype,"_popupElement",2);i([r.query("input")],exports.LogosphereDatePicker.prototype,"_inputElement",2);exports.LogosphereDatePicker=i([r.customElement("logosphere-datepicker")],exports.LogosphereDatePicker);
@@ -1,33 +0,0 @@
1
- "use strict";const l=require("lit"),o=require("lit/decorators.js"),f=":host{display:block}.formfield{position:relative;font-family:var(--font-family-base)}.formfield__label{display:block;font-size:12px;line-height:1.125rem;letter-spacing:-.12px;font-weight:var(--font-weight-medium);color:var(--color-tertiary);margin-bottom:var(--spacing-1)}.formfield__required{color:var(--color-danger);margin-left:var(--spacing-1)}.formfield__container{position:relative;display:flex;align-items:center;box-sizing:border-box;border-radius:var(--formfield-border-radius, var(--radius-base));border-top:var(--formfield-border-top, var(--formfield-border-top-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-right:var(--formfield-border-right, var(--formfield-border-right-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-bottom:var(--formfield-border-bottom, var(--formfield-border-bottom-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-left:var(--formfield-border-left, var(--formfield-border-left-width, 1px) solid var(--formfield-border-color, var(--color-border)));padding:0 var(--spacing-2) 0 var(--spacing-3);background-color:var(--color-body-bg);cursor:text;transition:border-color var(--transition-speed-base) var(--transition-timing),background-color var(--transition-speed-base) var(--transition-timing)}.formfield__container--cursor-text{cursor:text}.formfield__container--cursor-pointer{cursor:pointer}.formfield__container--cursor-default{cursor:default}.formfield__container--default{min-height:32px}.formfield__container--large{min-height:40px}.formfield__container--multiline{align-items:flex-start;min-height:64px;padding-top:var(--spacing-2);padding-bottom:var(--spacing-2)}import .formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-light)}.formfield__container--focused{border-color:var(--color-body-text);background-color:var(--color-body-bg)}.formfield__container--error{border-color:var(--color-danger)}.formfield__container--disabled{background-color:var(--color-body-bg);opacity:.4;cursor:not-allowed;pointer-events:none}.formfield__container--subtle:not(.formfield__container--focused):not(.formfield__container--error){border-color:transparent;background-color:var(--color-light)}.formfield__input-area{flex:1;min-width:0;display:flex;align-items:center}.formfield__container--multiline .formfield__input-area{align-items:flex-start;align-self:stretch}.formfield__prefix,.formfield__clear,.formfield__suffix{display:flex;align-items:center;flex-shrink:0;align-self:stretch}.formfield__container--multiline .formfield__clear,.formfield__container--multiline .formfield__suffix{align-items:flex-start}.formfield__prefix{margin-right:var(--spacing-2)}.formfield__clear,.formfield__suffix{margin-left:var(--spacing-2)}.formfield__container--has-prefix .formfield__prefix{border-right:1px solid var(--color-border);padding-right:var(--spacing-2)}.formfield__container--has-suffix .formfield__suffix{border-left:1px solid var(--color-border);padding-left:var(--spacing-2)}.formfield__prefix:empty,.formfield__clear:empty,.formfield__suffix:empty{display:none}.formfield__helper{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-tertiary);margin-top:var(--spacing-1)}.formfield__error{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-danger);margin-top:var(--spacing-1)}::slotted(input),::slotted(textarea){width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text)}::slotted(input:disabled),::slotted(textarea:disabled){cursor:not-allowed}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,t=(n,e,r,a)=>{for(var i=a>1?void 0:a?h(e,r):e,s=n.length-1,d;s>=0;s--)(d=n[s])&&(i=(a?d(e,r,i):d(i))||i);return a&&i&&c(e,r,i),i};exports.FormField=class extends l.LitElement{constructor(){super(...arguments),this.label="",this.helper="",this.error="",this.placeholder="",this.size="default",this.variant="default",this.cursor="text",this.required=!1,this.disabled=!1,this.readonly=!1,this.multiline=!1,this.forceFocused=!1,this._focused=!1,this._hovered=!1,this._hasPrefix=!1,this._hasSuffix=!1,this.handleSlotFocus=e=>{const r=e.target;["INPUT","TEXTAREA","SELECT"].includes(r.tagName)&&(this._focused=!0,this.dispatchEvent(new CustomEvent("field-focus",{bubbles:!0,composed:!0,detail:{originalEvent:e}})))},this.handleSlotBlur=e=>{const r=e.target;["INPUT","TEXTAREA","SELECT"].includes(r.tagName)&&(this._focused=!1,this.dispatchEvent(new CustomEvent("field-blur",{bubbles:!0,composed:!0,detail:{originalEvent:e}})))},this.handleMouseEnter=()=>{this._hovered=!0},this.handleMouseLeave=()=>{this._hovered=!1},this.handleContainerClick=e=>{const r=e.target;if(["INPUT","TEXTAREA","SELECT","BUTTON"].includes(r.tagName))return;this.shadowRoot?.querySelector("slot:not([name])")?.assignedElements({flatten:!0}).find(s=>["INPUT","TEXTAREA","SELECT"].includes(s.tagName))?.focus()},this.handlePrefixSlotChange=e=>{const r=e.target;this._hasPrefix=r.assignedElements({flatten:!0}).length>0},this.handleSuffixSlotChange=e=>{const r=e.target;this._hasSuffix=r.assignedElements({flatten:!0}).length>0}}connectedCallback(){super.connectedCallback(),this.addEventListener("focus",this.handleSlotFocus,!0),this.addEventListener("blur",this.handleSlotBlur,!0)}firstUpdated(){const e=this.shadowRoot?.querySelector('slot[name="prefix"]'),r=this.shadowRoot?.querySelector('slot[name="suffix"]');e&&(this._hasPrefix=e.assignedElements({flatten:!0}).length>0),r&&(this._hasSuffix=r.assignedElements({flatten:!0}).length>0)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this.handleSlotFocus,!0),this.removeEventListener("blur",this.handleSlotBlur,!0)}render(){const e=!!this.error,r=!e&&!!this.helper,a=["formfield__container",`formfield__container--${this.size}`,`formfield__container--cursor-${this.cursor}`,this._hasPrefix?"formfield__container--has-prefix":"",this._hasSuffix?"formfield__container--has-suffix":"",e?"formfield__container--error":"",this._focused||this.forceFocused?"formfield__container--focused":"",this._hovered?"formfield__container--hovered":"",this.disabled?"formfield__container--disabled":"",this.variant==="subtle"?"formfield__container--subtle":"",this.multiline?"formfield__container--multiline":""].filter(Boolean).join(" ");return l.html`
2
- <div class="formfield">
3
- ${this.label?l.html`
4
- <label class="formfield__label">
5
- ${this.label}
6
- ${this.required?l.html`<span class="formfield__required">*</span>`:""}
7
- </label>
8
- `:""}
9
-
10
- <div
11
- class="${a}"
12
- @mouseenter=${this.handleMouseEnter}
13
- @mouseleave=${this.handleMouseLeave}
14
- @click=${this.handleContainerClick}
15
- >
16
- <div class="formfield__prefix">
17
- <slot name="prefix" @slotchange=${this.handlePrefixSlotChange}></slot>
18
- </div>
19
- <div class="formfield__input-area">
20
- <slot></slot>
21
- </div>
22
- <div class="formfield__clear">
23
- <slot name="clear"></slot>
24
- </div>
25
- <div class="formfield__suffix">
26
- <slot name="suffix" @slotchange=${this.handleSuffixSlotChange}></slot>
27
- </div>
28
- </div>
29
-
30
- ${r?l.html`<div class="formfield__helper">${this.helper}</div>`:""}
31
- ${e?l.html`<div class="formfield__error">${this.error}</div>`:""}
32
- </div>
33
- `}};exports.FormField.styles=[l.css`${l.unsafeCSS(f)}`];t([o.property({type:String})],exports.FormField.prototype,"label",2);t([o.property({type:String})],exports.FormField.prototype,"helper",2);t([o.property({type:String})],exports.FormField.prototype,"error",2);t([o.property({type:String})],exports.FormField.prototype,"placeholder",2);t([o.property({type:String})],exports.FormField.prototype,"size",2);t([o.property({type:String})],exports.FormField.prototype,"variant",2);t([o.property({type:String})],exports.FormField.prototype,"cursor",2);t([o.property({type:Boolean})],exports.FormField.prototype,"required",2);t([o.property({type:Boolean})],exports.FormField.prototype,"disabled",2);t([o.property({type:Boolean})],exports.FormField.prototype,"readonly",2);t([o.property({type:Boolean})],exports.FormField.prototype,"multiline",2);t([o.property({type:Boolean})],exports.FormField.prototype,"forceFocused",2);t([o.state()],exports.FormField.prototype,"_focused",2);t([o.state()],exports.FormField.prototype,"_hovered",2);t([o.state()],exports.FormField.prototype,"_hasPrefix",2);t([o.state()],exports.FormField.prototype,"_hasSuffix",2);exports.FormField=t([o.customElement("logosphere-formfield")],exports.FormField);
@@ -1,257 +0,0 @@
1
- import { unsafeCSS as m, css as f, LitElement as g, nothing as a, html as u } from "lit";
2
- import { query as v, property as n, state as c, customElement as b } from "lit/decorators.js";
3
- import { live as _ } from "lit/directives/live.js";
4
- import "./formfield-O327HYt0.js";
5
- import "./ui-icon-Ctn4nGFa.js";
6
- const E = ".input__field{width:100%;background:transparent;border:none;outline:none;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);box-sizing:border-box;line-height:1.5}.input__field::placeholder{color:var(--color-tertiary)}.input__field:disabled{cursor:not-allowed}.input__field--default{height:16px}.input__field--large{height:24px}.input__clear-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.input__clear-btn:hover{color:var(--color-gray-600)}";
7
- var w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, s = (t, e, o, l) => {
8
- for (var r = l > 1 ? void 0 : l ? $(e, o) : e, p = t.length - 1, h; p >= 0; p--)
9
- (h = t[p]) && (r = (l ? h(e, o, r) : h(r)) || r);
10
- return l && r && w(e, o, r), r;
11
- };
12
- const y = {
13
- 0: /\d/,
14
- a: /[a-zA-Z]/,
15
- "*": /[a-zA-Z0-9]/
16
- };
17
- function d(t) {
18
- return t.split("").filter((e) => /[a-zA-Z0-9]/.test(e)).join("");
19
- }
20
- function k(t, e) {
21
- let o = 0, l = "";
22
- for (let r = 0; r < e.length && !(o >= t.length); r++) {
23
- const p = e[r], h = y[p];
24
- if (h) {
25
- for (; o < t.length && !h.test(t[o]); ) o++;
26
- o < t.length && (l += t[o++]);
27
- } else
28
- l += p;
29
- }
30
- return l;
31
- }
32
- function x(t, e, o) {
33
- let l = 0;
34
- for (let r = 0; r < t.length; r++)
35
- if (y[e[r]] && (l++, l === o))
36
- return r + 1;
37
- return t.length;
38
- }
39
- let i = class extends g {
40
- constructor() {
41
- super(...arguments), this.value = "", this.type = "text", this.placeholder = "", this.name = "", this.autocomplete = "", this.pattern = "", this.size = "default", this.variant = "default", this.label = "", this.helper = "", this.error = "", this.required = !1, this.disabled = !1, this.readonly = !1, this.mask = "", this._internalError = "", this._showPassword = !1, this.handleInput = (t) => {
42
- const e = t.target;
43
- if (this.mask) {
44
- const o = e.selectionStart ?? e.value.length, l = d(e.value.slice(0, o)).length, r = d(e.value), p = k(r, this.mask);
45
- e.value = p, this.value = p;
46
- const h = x(p, this.mask, l);
47
- requestAnimationFrame(() => e.setSelectionRange(h, h));
48
- } else
49
- this.value = e.value;
50
- this._internalError && (this._internalError = "", this._inputElement.setCustomValidity("")), this.dispatchEvent(new CustomEvent("input", {
51
- bubbles: !0,
52
- composed: !0,
53
- detail: {
54
- value: this.value,
55
- rawValue: this.mask ? d(this.value) : this.value,
56
- originalEvent: t
57
- }
58
- }));
59
- }, this.handleChange = (t) => {
60
- const e = t.target;
61
- this.value = e.value, e.checkValidity() || (this._internalError = e.validationMessage), this.dispatchEvent(new CustomEvent("change", {
62
- bubbles: !0,
63
- composed: !0,
64
- detail: { value: this.value, originalEvent: t }
65
- }));
66
- }, this.handleKeyDown = (t) => {
67
- this.dispatchEvent(new CustomEvent("keydown", {
68
- bubbles: !0,
69
- composed: !0,
70
- detail: { key: t.key, originalEvent: t }
71
- }));
72
- }, this.handleKeyUp = (t) => {
73
- this.dispatchEvent(new CustomEvent("keyup", {
74
- bubbles: !0,
75
- composed: !0,
76
- detail: { key: t.key, originalEvent: t }
77
- }));
78
- }, this.handleClear = () => {
79
- this.value = "", this._inputElement && (this._inputElement.value = ""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("input", {
80
- bubbles: !0,
81
- composed: !0,
82
- detail: { value: "", originalEvent: null }
83
- }));
84
- }, this.handlePasswordToggle = () => {
85
- this.disabled || (this._showPassword = !this._showPassword, this._inputElement?.focus());
86
- };
87
- }
88
- get inputElement() {
89
- return this._inputElement;
90
- }
91
- focus() {
92
- this._inputElement?.focus();
93
- }
94
- blur() {
95
- this._inputElement?.blur();
96
- }
97
- select() {
98
- this._inputElement?.select();
99
- }
100
- setSelectionRange(t, e, o) {
101
- this._inputElement?.setSelectionRange(t, e, o);
102
- }
103
- checkValidity() {
104
- return this._inputElement?.checkValidity() ?? !0;
105
- }
106
- reportValidity() {
107
- return this._inputElement?.reportValidity() ?? !0;
108
- }
109
- setCustomValidity(t) {
110
- this._inputElement?.setCustomValidity(t), this._internalError = t, this.requestUpdate();
111
- }
112
- willUpdate(t) {
113
- t.has("type") && this.type !== "password" && this._showPassword && (this._showPassword = !1);
114
- }
115
- /** Mask varsa ve placeholder verilmemişse mask pattern'ını placeholder olarak göster */
116
- get _effectivePlaceholder() {
117
- return this.placeholder ? this.placeholder : this.mask ? this.mask.replace(/[0a*]/g, "_") : "";
118
- }
119
- render() {
120
- const t = this.error || this._internalError, e = !!this.value && !this.disabled && !this.readonly, o = this.type === "password", l = o && this._showPassword ? "text" : this.type, r = `input__field input__field--${this.size}`;
121
- return u`
122
- <logosphere-formfield
123
- .label=${this.label}
124
- .helper=${this.helper}
125
- .error=${t}
126
- .required=${this.required}
127
- .disabled=${this.disabled}
128
- .readonly=${this.readonly}
129
- .placeholder=${this._effectivePlaceholder}
130
- .size=${this.size}
131
- .variant=${this.variant}
132
- >
133
- <slot name="prefix" slot="prefix"></slot>
134
- <input
135
- class="${r}"
136
- type=${l}
137
- .value=${_(this.value)}
138
- placeholder=${this._effectivePlaceholder || a}
139
- name=${this.name || a}
140
- autocomplete=${this.autocomplete || a}
141
- ?required=${this.required}
142
- ?disabled=${this.disabled}
143
- ?readonly=${this.readonly}
144
- minlength=${this.minlength ?? a}
145
- maxlength=${this.maxlength ?? a}
146
- pattern=${this.pattern || a}
147
- min=${this.min ?? a}
148
- max=${this.max ?? a}
149
- step=${this.step ?? a}
150
- @input=${this.handleInput}
151
- @change=${this.handleChange}
152
- @keydown=${this.handleKeyDown}
153
- @keyup=${this.handleKeyUp}
154
- />
155
- ${e ? u`
156
- <button
157
- type="button"
158
- slot="clear"
159
- class="input__clear-btn"
160
- @click=${this.handleClear}
161
- tabindex="-1"
162
- >
163
- <ui-icon name="uil-times" size="14"></ui-icon>
164
- </button>
165
- ` : a}
166
- ${o ? u`
167
- <button
168
- type="button"
169
- slot="suffix"
170
- class="input__clear-btn"
171
- aria-label=${this._showPassword ? "Şifreyi gizle" : "Şifreyi göster"}
172
- @click=${this.handlePasswordToggle}
173
- >
174
- <ui-icon name=${this._showPassword ? "uil-eye-slash" : "uil-eye"} size="16"></ui-icon>
175
- </button>
176
- ` : a}
177
- <slot name="suffix" slot="suffix"></slot>
178
- </logosphere-formfield>
179
- `;
180
- }
181
- };
182
- i.styles = [f`${m(E)}`];
183
- s([
184
- v("input")
185
- ], i.prototype, "_inputElement", 2);
186
- s([
187
- n({ type: String })
188
- ], i.prototype, "value", 2);
189
- s([
190
- n({ type: String })
191
- ], i.prototype, "type", 2);
192
- s([
193
- n({ type: String })
194
- ], i.prototype, "placeholder", 2);
195
- s([
196
- n({ type: String })
197
- ], i.prototype, "name", 2);
198
- s([
199
- n({ type: String })
200
- ], i.prototype, "autocomplete", 2);
201
- s([
202
- n({ type: Number })
203
- ], i.prototype, "minlength", 2);
204
- s([
205
- n({ type: Number })
206
- ], i.prototype, "maxlength", 2);
207
- s([
208
- n({ type: String })
209
- ], i.prototype, "pattern", 2);
210
- s([
211
- n({ type: Number })
212
- ], i.prototype, "min", 2);
213
- s([
214
- n({ type: Number })
215
- ], i.prototype, "max", 2);
216
- s([
217
- n({ type: Number })
218
- ], i.prototype, "step", 2);
219
- s([
220
- n({ type: String })
221
- ], i.prototype, "size", 2);
222
- s([
223
- n({ type: String })
224
- ], i.prototype, "variant", 2);
225
- s([
226
- n({ type: String })
227
- ], i.prototype, "label", 2);
228
- s([
229
- n({ type: String })
230
- ], i.prototype, "helper", 2);
231
- s([
232
- n({ type: String })
233
- ], i.prototype, "error", 2);
234
- s([
235
- n({ type: Boolean })
236
- ], i.prototype, "required", 2);
237
- s([
238
- n({ type: Boolean })
239
- ], i.prototype, "disabled", 2);
240
- s([
241
- n({ type: Boolean })
242
- ], i.prototype, "readonly", 2);
243
- s([
244
- n({ type: String })
245
- ], i.prototype, "mask", 2);
246
- s([
247
- c()
248
- ], i.prototype, "_internalError", 2);
249
- s([
250
- c()
251
- ], i.prototype, "_showPassword", 2);
252
- i = s([
253
- b("logosphere-input")
254
- ], i);
255
- export {
256
- i as L
257
- };
@@ -1,59 +0,0 @@
1
- "use strict";const n=require("lit"),r=require("lit/decorators.js"),y=require("lit/directives/live.js");require("./formfield-CRcyUMvQ.cjs");require("./ui-icon-jKyMV1zp.cjs");const c=".input__field{width:100%;background:transparent;border:none;outline:none;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);box-sizing:border-box;line-height:1.5}.input__field::placeholder{color:var(--color-tertiary)}.input__field:disabled{cursor:not-allowed}.input__field--default{height:16px}.input__field--large{height:24px}.input__clear-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.input__clear-btn:hover{color:var(--color-gray-600)}";var g=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(p,e,t,s)=>{for(var i=s>1?void 0:s?m(e,t):e,l=p.length-1,a;l>=0;l--)(a=p[l])&&(i=(s?a(e,t,i):a(i))||i);return s&&i&&g(e,t,i),i};const d={0:/\d/,a:/[a-zA-Z]/,"*":/[a-zA-Z0-9]/};function h(p){return p.split("").filter(e=>/[a-zA-Z0-9]/.test(e)).join("")}function f(p,e){let t=0,s="";for(let i=0;i<e.length&&!(t>=p.length);i++){const l=e[i],a=d[l];if(a){for(;t<p.length&&!a.test(p[t]);)t++;t<p.length&&(s+=p[t++])}else s+=l}return s}function v(p,e,t){let s=0;for(let i=0;i<p.length;i++)if(d[e[i]]&&(s++,s===t))return i+1;return p.length}exports.LogosphereInput=class extends n.LitElement{constructor(){super(...arguments),this.value="",this.type="text",this.placeholder="",this.name="",this.autocomplete="",this.pattern="",this.size="default",this.variant="default",this.label="",this.helper="",this.error="",this.required=!1,this.disabled=!1,this.readonly=!1,this.mask="",this._internalError="",this._showPassword=!1,this.handleInput=e=>{const t=e.target;if(this.mask){const s=t.selectionStart??t.value.length,i=h(t.value.slice(0,s)).length,l=h(t.value),a=f(l,this.mask);t.value=a,this.value=a;const u=v(a,this.mask,i);requestAnimationFrame(()=>t.setSelectionRange(u,u))}else this.value=t.value;this._internalError&&(this._internalError="",this._inputElement.setCustomValidity("")),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,rawValue:this.mask?h(this.value):this.value,originalEvent:e}}))},this.handleChange=e=>{const t=e.target;this.value=t.value,t.checkValidity()||(this._internalError=t.validationMessage),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleKeyDown=e=>{this.dispatchEvent(new CustomEvent("keydown",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleKeyUp=e=>{this.dispatchEvent(new CustomEvent("keyup",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleClear=()=>{this.value="",this._inputElement&&(this._inputElement.value=""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:"",originalEvent:null}}))},this.handlePasswordToggle=()=>{this.disabled||(this._showPassword=!this._showPassword,this._inputElement?.focus())}}get inputElement(){return this._inputElement}focus(){this._inputElement?.focus()}blur(){this._inputElement?.blur()}select(){this._inputElement?.select()}setSelectionRange(e,t,s){this._inputElement?.setSelectionRange(e,t,s)}checkValidity(){return this._inputElement?.checkValidity()??!0}reportValidity(){return this._inputElement?.reportValidity()??!0}setCustomValidity(e){this._inputElement?.setCustomValidity(e),this._internalError=e,this.requestUpdate()}willUpdate(e){e.has("type")&&this.type!=="password"&&this._showPassword&&(this._showPassword=!1)}get _effectivePlaceholder(){return this.placeholder?this.placeholder:this.mask?this.mask.replace(/[0a*]/g,"_"):""}render(){const e=this.error||this._internalError,t=!!this.value&&!this.disabled&&!this.readonly,s=this.type==="password",i=s&&this._showPassword?"text":this.type,l=`input__field input__field--${this.size}`;return n.html`
2
- <logosphere-formfield
3
- .label=${this.label}
4
- .helper=${this.helper}
5
- .error=${e}
6
- .required=${this.required}
7
- .disabled=${this.disabled}
8
- .readonly=${this.readonly}
9
- .placeholder=${this._effectivePlaceholder}
10
- .size=${this.size}
11
- .variant=${this.variant}
12
- >
13
- <slot name="prefix" slot="prefix"></slot>
14
- <input
15
- class="${l}"
16
- type=${i}
17
- .value=${y.live(this.value)}
18
- placeholder=${this._effectivePlaceholder||n.nothing}
19
- name=${this.name||n.nothing}
20
- autocomplete=${this.autocomplete||n.nothing}
21
- ?required=${this.required}
22
- ?disabled=${this.disabled}
23
- ?readonly=${this.readonly}
24
- minlength=${this.minlength??n.nothing}
25
- maxlength=${this.maxlength??n.nothing}
26
- pattern=${this.pattern||n.nothing}
27
- min=${this.min??n.nothing}
28
- max=${this.max??n.nothing}
29
- step=${this.step??n.nothing}
30
- @input=${this.handleInput}
31
- @change=${this.handleChange}
32
- @keydown=${this.handleKeyDown}
33
- @keyup=${this.handleKeyUp}
34
- />
35
- ${t?n.html`
36
- <button
37
- type="button"
38
- slot="clear"
39
- class="input__clear-btn"
40
- @click=${this.handleClear}
41
- tabindex="-1"
42
- >
43
- <ui-icon name="uil-times" size="14"></ui-icon>
44
- </button>
45
- `:n.nothing}
46
- ${s?n.html`
47
- <button
48
- type="button"
49
- slot="suffix"
50
- class="input__clear-btn"
51
- aria-label=${this._showPassword?"Şifreyi gizle":"Şifreyi göster"}
52
- @click=${this.handlePasswordToggle}
53
- >
54
- <ui-icon name=${this._showPassword?"uil-eye-slash":"uil-eye"} size="16"></ui-icon>
55
- </button>
56
- `:n.nothing}
57
- <slot name="suffix" slot="suffix"></slot>
58
- </logosphere-formfield>
59
- `}};exports.LogosphereInput.styles=[n.css`${n.unsafeCSS(c)}`];o([r.query("input")],exports.LogosphereInput.prototype,"_inputElement",2);o([r.property({type:String})],exports.LogosphereInput.prototype,"value",2);o([r.property({type:String})],exports.LogosphereInput.prototype,"type",2);o([r.property({type:String})],exports.LogosphereInput.prototype,"placeholder",2);o([r.property({type:String})],exports.LogosphereInput.prototype,"name",2);o([r.property({type:String})],exports.LogosphereInput.prototype,"autocomplete",2);o([r.property({type:Number})],exports.LogosphereInput.prototype,"minlength",2);o([r.property({type:Number})],exports.LogosphereInput.prototype,"maxlength",2);o([r.property({type:String})],exports.LogosphereInput.prototype,"pattern",2);o([r.property({type:Number})],exports.LogosphereInput.prototype,"min",2);o([r.property({type:Number})],exports.LogosphereInput.prototype,"max",2);o([r.property({type:Number})],exports.LogosphereInput.prototype,"step",2);o([r.property({type:String})],exports.LogosphereInput.prototype,"size",2);o([r.property({type:String})],exports.LogosphereInput.prototype,"variant",2);o([r.property({type:String})],exports.LogosphereInput.prototype,"label",2);o([r.property({type:String})],exports.LogosphereInput.prototype,"helper",2);o([r.property({type:String})],exports.LogosphereInput.prototype,"error",2);o([r.property({type:Boolean})],exports.LogosphereInput.prototype,"required",2);o([r.property({type:Boolean})],exports.LogosphereInput.prototype,"disabled",2);o([r.property({type:Boolean})],exports.LogosphereInput.prototype,"readonly",2);o([r.property({type:String})],exports.LogosphereInput.prototype,"mask",2);o([r.state()],exports.LogosphereInput.prototype,"_internalError",2);o([r.state()],exports.LogosphereInput.prototype,"_showPassword",2);exports.LogosphereInput=o([r.customElement("logosphere-input")],exports.LogosphereInput);