@logosphere-ui/core 0.0.0-alpha.3 → 0.0.0-alpha.32

package/dist/combobox-BV4AKTqp.cjs

@@ -0,0 +1,107 @@
+"use strict";const r=require("lit"),o=require("lit/decorators.js"),c=require("@popperjs/core");require("./badge-COTtd1jh.cjs");require("./checkbox-CdDTRdKV.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=(l,e,i,s)=>{for(var n=s>1?void 0:s?b(e,i):e,a=l.length-1,p;a>=0;a--)(p=l[a])&&(n=(s?p(e,i,n):p(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=e=>{e.stopPropagation(),!(this.readOnly||this.disabled)&&(this.filterable&&!this.multiple?this._focusFilterInput():this.isOpen=!this.isOpen)},this._onFieldClick=e=>{if(!(this.readOnly||this.disabled||e.composedPath().some(n=>n?.classList?.contains("combobox__dropdown")))){if(this.filterable&&!this.multiple){this.isOpen=!0,this._focusFilterInput();return}this.isOpen=!this.isOpen}},this._onChevronClick=e=>{if(e.stopPropagation(),!(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`
+      <div class="combobox__tags">
+        ${this.selected.map(e=>r.html`
+            <logosphere-badge
+              variant="default"
+              text=${String(e[this.optionLabel])}
+              ?closeable=${!this.readOnly}
+              @close=${i=>this._removeTag(e,i)}
+            ></logosphere-badge>
+          `)}
+      </div>
+    `}_renderTriggerContent(){return this.filterable&&!this.multiple?r.html`
+        <input
+          class="combobox__filter-input"
+          type="text"
+          .value=${this._filterDisplayValue}
+          placeholder=${this.placeholder}
+          ?disabled=${this.readOnly||this.disabled}
+          @focus=${this._onFilterFocus}
+          @input=${this._onFilterInput}
+          @keydown=${this._handleKeydown}
+          @click=${this._stopPropagation}
+        />
+        ${this.clearable&&!this.readOnly&&this.selected.length?r.html`
+              <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
+                <ui-icon name="uil-times" size="14"></ui-icon>
+              </button>
+            `:r.nothing}
+      `:this.multiple&&this.selected.length?this._renderTagList():!this.multiple&&this.selected.length?r.html`
+        <span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
+        ${this.clearable&&!this.readOnly?r.html`
+              <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
+                <ui-icon name="uil-times" size="14"></ui-icon>
+              </button>
+            `:r.nothing}
+      `:r.html`<span class="combobox__placeholder">${this.placeholder}</span>`}_renderDropdown(){return r.html`
+      <div data-combobox-popper popover="manual" class="combobox__dropdown">
+        ${this.filterable&&this.multiple?r.html`
+              <input
+                class="combobox__search"
+                type="text"
+                placeholder=${this.placeholder}
+                .value=${this.inputValue}
+                @input=${this._onFilterInput}
+                @keydown=${this._handleKeydown}
+                @click=${this._stopPropagation}
+              />
+            `:r.nothing}
+
+        <div class="combobox__list">
+          ${this._filteredItems.length===0?r.html`<div class="combobox__empty">${this.emptyMessage}</div>`:this._filteredItems.map((e,i)=>r.html`
+                  <div
+                    class="combobox__item
+                    ${!this.multiple&&this.isSelected(e)?"combobox__item--selected":""}
+                    ${i===this.focusedIndex?"combobox__item--focused":""}"
+                    @click=${s=>this._selectItem(e,s)}
+                    @mouseenter=${()=>{this.focusedIndex=i}}
+                  >
+                    ${this.multiple?r.html`
+                          <logosphere-checkbox
+                            .checked=${this.isSelected(e)}
+                            .value=${e[this.optionValue]}
+                            @click=${this._stopPropagation}
+                          ></logosphere-checkbox>
+                        `:r.nothing}
+                    ${e[this.optionLabel]}
+                  </div>
+                `)}
+        </div>
+      </div>
+    `}_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=c.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`
+      <div class="combobox">
+        <logosphere-formfield
+          .label=${this.label}
+          .helper=${this.helper}
+          .error=${this.error}
+          cursor="pointer"
+          .required=${this.required}
+          .disabled=${this.disabled}
+          .readonly=${this.readOnly}
+          .size=${this.size}
+          .variant=${this.variant}
+          @click=${this._onFieldClick}
+        >
+          <div class="combobox__wrapper">
+            <div
+              class="${e}"
+              tabindex="${this.readOnly||this.filterable||this.disabled?-1:0}"
+              @click=${this._onTriggerClick}
+              @keydown=${this.filterable?r.nothing:this._handleKeydown}
+            >
+              ${this._renderTriggerContent()}
+            </div>
+
+            ${this._renderDropdown()}
+          </div>
+          <span
+            class="combobox__chevron ${this.isOpen?"combobox__chevron--open":""}"
+            @click=${this._onChevronClick}
+          >
+            <ui-icon name="uil-angle-down" size="16"></ui-icon>
+          </span>
+        </logosphere-formfield>
+      </div>
+    `}};exports.Combobox.styles=[r.css`
+      ${r.unsafeCSS(d)}
+    `];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);

package/dist/combobox-CTqEZUg6.js

@@ -0,0 +1,387 @@
+import { unsafeCSS as u, css as m, LitElement as _, html as n, nothing as c } from "lit";
+import { property as s, state as p, query as b, customElement as f } from "lit/decorators.js";
+import { createPopper as g } from "@popperjs/core";
+import "./badge-BJqUgXZD.js";
+import "./checkbox-g6kl2jGR.js";
+import "./formfield-O327HYt0.js";
+import "./ui-icon-Ctn4nGFa.js";
+const x = '.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 v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, i, r, l) => {
+  for (var a = l > 1 ? void 0 : l ? y(i, r) : i, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (a = (l ? h(i, r, a) : h(a)) || a);
+  return l && a && v(i, r, a), a;
+};
+let t = class extends _ {
+  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((r) => r[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 = (e) => {
+      e.stopPropagation(), !(this.readOnly || this.disabled) && (this.filterable && !this.multiple ? this._focusFilterInput() : this.isOpen = !this.isOpen);
+    }, this._onFieldClick = (e) => {
+      if (!(this.readOnly || this.disabled || e.composedPath().some(
+        (l) => l?.classList?.contains("combobox__dropdown")
+      ))) {
+        if (this.filterable && !this.multiple) {
+          this.isOpen = !0, this._focusFilterInput();
+          return;
+        }
+        this.isOpen = !this.isOpen;
+      }
+    }, this._onChevronClick = (e) => {
+      if (e.stopPropagation(), !(this.readOnly || this.disabled)) {
+        if (this.isOpen) {
+          this._closeDropdown();
+          return;
+        }
+        this.isOpen = !0, this.filterable && !this.multiple && this._focusFilterInput();
+      }
+    };
+  }
+  // ==================== LIFECYCLE ====================
+  willUpdate(e) {
+    if (e.has("items") || e.has("inputValue") || e.has("optionLabel")) {
+      const i = this.inputValue.toLocaleLowerCase();
+      this._filteredItems = this.items.filter(
+        (r) => String(r[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();
+  }
+  // ==================== HELPERS ====================
+  _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" });
+    });
+  }
+  // ==================== SELECTION ====================
+  selectedItems() {
+    return this.selected;
+  }
+  isSelected(e) {
+    return this.selected.some((i) => i[this.optionValue] === e[this.optionValue]);
+  }
+  _selectItem(e, i) {
+    i.stopPropagation();
+    let r;
+    this.multiple ? r = this.isSelected(e) ? this.selected.filter((l) => l[this.optionValue] !== e[this.optionValue]) : [...this.selected, e] : (r = [e], this.isOpen = !1, this.filterable && (this.inputValue = "")), this.setSelected(r);
+  }
+  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 })
+    );
+  }
+  // ==================== RENDER PARTS ====================
+  _renderTagList() {
+    return n`
+      <div class="combobox__tags">
+        ${this.selected.map(
+      (e) => n`
+            <logosphere-badge
+              variant="default"
+              text=${String(e[this.optionLabel])}
+              ?closeable=${!this.readOnly}
+              @close=${(i) => this._removeTag(e, i)}
+            ></logosphere-badge>
+          `
+    )}
+      </div>
+    `;
+  }
+  _renderTriggerContent() {
+    return this.filterable && !this.multiple ? n`
+        <input
+          class="combobox__filter-input"
+          type="text"
+          .value=${this._filterDisplayValue}
+          placeholder=${this.placeholder}
+          ?disabled=${this.readOnly || this.disabled}
+          @focus=${this._onFilterFocus}
+          @input=${this._onFilterInput}
+          @keydown=${this._handleKeydown}
+          @click=${this._stopPropagation}
+        />
+        ${this.clearable && !this.readOnly && this.selected.length ? n`
+              <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
+                <ui-icon name="uil-times" size="14"></ui-icon>
+              </button>
+            ` : c}
+      ` : this.multiple && this.selected.length ? this._renderTagList() : !this.multiple && this.selected.length ? n`
+        <span class="combobox__single-value">${this.selected[0][this.optionLabel]}</span>
+        ${this.clearable && !this.readOnly ? n`
+              <button class="combobox__clear" @click=${this._clearSelection} aria-label="Clear">
+                <ui-icon name="uil-times" size="14"></ui-icon>
+              </button>
+            ` : c}
+      ` : n`<span class="combobox__placeholder">${this.placeholder}</span>`;
+  }
+  _renderDropdown() {
+    return n`
+      <div data-combobox-popper popover="manual" class="combobox__dropdown">
+        ${this.filterable && this.multiple ? n`
+              <input
+                class="combobox__search"
+                type="text"
+                placeholder=${this.placeholder}
+                .value=${this.inputValue}
+                @input=${this._onFilterInput}
+                @keydown=${this._handleKeydown}
+                @click=${this._stopPropagation}
+              />
+            ` : c}
+
+        <div class="combobox__list">
+          ${this._filteredItems.length === 0 ? n`<div class="combobox__empty">${this.emptyMessage}</div>` : this._filteredItems.map(
+      (e, i) => n`
+                  <div
+                    class="combobox__item
+                    ${!this.multiple && this.isSelected(e) ? "combobox__item--selected" : ""}
+                    ${i === this.focusedIndex ? "combobox__item--focused" : ""}"
+                    @click=${(r) => this._selectItem(e, r)}
+                    @mouseenter=${() => {
+        this.focusedIndex = i;
+      }}
+                  >
+                    ${this.multiple ? n`
+                          <logosphere-checkbox
+                            .checked=${this.isSelected(e)}
+                            .value=${e[this.optionValue]}
+                            @click=${this._stopPropagation}
+                          ></logosphere-checkbox>
+                        ` : c}
+                    ${e[this.optionLabel]}
+                  </div>
+                `
+    )}
+        </div>
+      </div>
+    `;
+  }
+  _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 r = Math.round(e.getBoundingClientRect().width);
+    if (i.style.width = `${r}px`, this._popperInstance) {
+      this._popperInstance.setOptions({
+        placement: "bottom-start",
+        strategy: "fixed",
+        modifiers: this._getPopperModifiers()
+      }), this._popperInstance.update();
+      return;
+    }
+    this._popperInstance = g(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 {
+    }
+  }
+  // ==================== MAIN RENDER ====================
+  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 n`
+      <div class="combobox">
+        <logosphere-formfield
+          .label=${this.label}
+          .helper=${this.helper}
+          .error=${this.error}
+          cursor="pointer"
+          .required=${this.required}
+          .disabled=${this.disabled}
+          .readonly=${this.readOnly}
+          .size=${this.size}
+          .variant=${this.variant}
+          @click=${this._onFieldClick}
+        >
+          <div class="combobox__wrapper">
+            <div
+              class="${e}"
+              tabindex="${this.readOnly || this.filterable || this.disabled ? -1 : 0}"
+              @click=${this._onTriggerClick}
+              @keydown=${this.filterable ? c : this._handleKeydown}
+            >
+              ${this._renderTriggerContent()}
+            </div>
+
+            ${this._renderDropdown()}
+          </div>
+          <span
+            class="combobox__chevron ${this.isOpen ? "combobox__chevron--open" : ""}"
+            @click=${this._onChevronClick}
+          >
+            <ui-icon name="uil-angle-down" size="16"></ui-icon>
+          </span>
+        </logosphere-formfield>
+      </div>
+    `;
+  }
+};
+t.styles = [
+  m`
+      ${u(x)}
+    `
+];
+o([
+  s({ type: String })
+], t.prototype, "label", 2);
+o([
+  s({ type: String })
+], t.prototype, "helper", 2);
+o([
+  s({ type: String })
+], t.prototype, "error", 2);
+o([
+  s({ type: String })
+], t.prototype, "placeholder", 2);
+o([
+  s({ type: Boolean })
+], t.prototype, "required", 2);
+o([
+  s({ type: Boolean })
+], t.prototype, "disabled", 2);
+o([
+  s({ type: Boolean })
+], t.prototype, "readOnly", 2);
+o([
+  s({ type: String })
+], t.prototype, "variant", 2);
+o([
+  s({ type: Boolean })
+], t.prototype, "multiple", 2);
+o([
+  s({ type: Boolean })
+], t.prototype, "filterable", 2);
+o([
+  s({ type: String })
+], t.prototype, "optionLabel", 2);
+o([
+  s({ type: String })
+], t.prototype, "optionValue", 2);
+o([
+  s({ type: String })
+], t.prototype, "emptyMessage", 2);
+o([
+  s({ type: Array })
+], t.prototype, "items", 2);
+o([
+  s({ type: String })
+], t.prototype, "size", 2);
+o([
+  s({ type: Boolean })
+], t.prototype, "clearable", 2);
+o([
+  p()
+], t.prototype, "selected", 2);
+o([
+  p()
+], t.prototype, "inputValue", 2);
+o([
+  p()
+], t.prototype, "isOpen", 2);
+o([
+  p()
+], t.prototype, "focusedIndex", 2);
+o([
+  b(".combobox__wrapper")
+], t.prototype, "_referenceElement", 2);
+o([
+  b("logosphere-formfield")
+], t.prototype, "_formFieldElement", 2);
+o([
+  b("[data-combobox-popper]")
+], t.prototype, "_dropdownElement", 2);
+t = o([
+  f("logosphere-combobox")
+], t);
+export {
+  t as C
+};

package/dist/combobox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./combobox-pmE7bgEL.cjs");Object.defineProperty(exports,"Combobox",{enumerable:!0,get:()=>e.Combobox});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./combobox-BV4AKTqp.cjs");Object.defineProperty(exports,"Combobox",{enumerable:!0,get:()=>e.Combobox});

package/dist/combobox.js

@@ -1,4 +1,4 @@
-import { C as m } from "./combobox-BJbI-Tgi.js";
+import { C as m } from "./combobox-CTqEZUg6.js";
 export {
   m as Combobox
 };

package/dist/datepicker-BCNJROwD.cjs

@@ -0,0 +1,85 @@
+"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`
+      <div class="dp">
+        <div class="dp__reference">
+          <logosphere-formfield
+            class="dp__field"
+            .label=${this.label}
+            .helper=${this.helper}
+            .error=${e}
+            .required=${this.required}
+            .disabled=${this.disabled}
+            .readonly=${this.readonly}
+            .placeholder=${this.placeholder}
+            .size=${this.size}
+            .variant=${this.variant}
+            @click=${this._openDropdown}
+          >
+            <input
+              id=${this.inputId}
+              class="dp__input"
+              .value=${d.live(this._inputValue())}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
+              placeholder=${this.placeholder}
+              aria-label="Tarih girin"
+              aria-invalid=${e?"true":"false"}
+              @focus=${this._openDropdown}
+              @input=${this._onInput}
+              @keydown=${this._onKeydown}
+              @blur=${this._onBlur}
+            />
+            ${t?s.html`
+                  <button
+                    slot="clear"
+                    class="dp__icon-btn dp__icon-btn_suffix"
+                    type="button"
+                    aria-label="Temizle"
+                    @click=${this._handleClearClick}
+                  >
+                    <ui-icon name="uil-times" size="14"></ui-icon>
+                  </button>
+                `:s.nothing}
+            <button
+              id=${this.inputId+"-ico"}
+              slot="suffix"
+              class="dp__icon-btn"
+              type="button"
+              aria-label=${this._open?"Takvimi kapat":"Takvimi aç"}
+              aria-expanded=${this._open?"true":"false"}
+              aria-haspopup="dialog"
+              @click=${this._handleSuffixClick}
+            >
+              <ui-icon name="uil-calendar" size="16"></ui-icon>
+            </button>
+          </logosphere-formfield>
+        </div>
+
+        ${this._open?s.html`
+              <div
+                data-datepicker-popper
+                class="dp__popup"
+                role="dialog"
+                aria-modal="true"
+                aria-label="Tarih seçici"
+              >
+                <logosphere-calendar
+                  .value=${this.value}
+                  .min=${this.min}
+                  .max=${this.max}
+                  .disabled=${this.disabled}
+                  .rangeMode=${this.rangeMode}
+                  .disabledDays=${this.disabledDays}
+                  .rangeStart=${this._rangeStart}
+                  .rangeEnd=${this._rangeEnd}
+                  .closable=${!0}
+                  @change=${this._handleCalendarChange}
+                  @rangeChange=${this._handleCalendarRangeChange}
+                  @calendar-state-change=${this._handleCalendarStateChange}
+                  @close-request=${()=>this._toggleOpen(!1)}
+                ></logosphere-calendar>
+              </div>
+            `:s.nothing}
+      </div>
+    `}};exports.LogosphereDatePicker.styles=[s.css`
+      ${s.unsafeCSS(c)}
+    `];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);