@kumori/aurora-wui-components 0.0.273-dev4131.18 → 0.0.273-dev4131.19

package/dist/components/axebow-form-panel-field/axebow-form-panel-field.d.ts

@@ -21,9 +21,11 @@ export declare class AxebowFormPanelField extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _handleOutsideClick;
+    private get _isSelector();
     private _handleFocus;
     private _handleBlur;
     private _handleInput;
+    private _handleKeyDown;
     private _handleActionClick;
     private _handleSecondaryActionClick;
     private _handleCloseClick;

package/dist/components/axebow-form-panel-field/axebow-form-panel-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-form-panel-field.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-form-panel-field/axebow-form-panel-field.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAa,MAAM,KAAK,CAAC;AAEvD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG,QAAQ,CAAC;AAE3D,qBACa,oBAAqB,SAAQ,UAAU;IAClD,MAAM,CAAC,MAAM,4BAiBX;IAE0B,YAAY,EAAE,mBAAmB,CAAiB;IACjD,QAAQ,UAAS;IAClB,KAAK,SAAiB;IACtB,KAAK,SAAM;IACV,SAAS,UAAQ;IACjB,YAAY,UAAS;IACrB,aAAa,UAAS;IACvB,eAAe,SAA4B;IAC1C,cAAc,UAAS;IACxB,UAAU,SAAkB;IAC5B,SAAS,SAAM;IACd,uBAAuB,UAAS;IACjC,mBAAmB,SAAiB;IAEhE,oDAAoD;IACzB,OAAO,EAAE,MAAM,EAAE,CAAM;IAEzC,OAAO,CAAC,eAAe,CAAS;IAEzC,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,2BAA2B;IAWnC,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,oBAAoB;IAe5B,OAAO,CAAC,aAAa;IAqBrB,MAAM;CAoHP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}
+{"version":3,"file":"axebow-form-panel-field.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-form-panel-field/axebow-form-panel-field.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAa,MAAM,KAAK,CAAC;AAEvD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG,QAAQ,CAAC;AAE3D,qBACa,oBAAqB,SAAQ,UAAU;IAClD,MAAM,CAAC,MAAM,4BAiBX;IAE0B,YAAY,EAAE,mBAAmB,CAAiB;IACjD,QAAQ,UAAS;IAClB,KAAK,SAAiB;IACtB,KAAK,SAAM;IACV,SAAS,UAAQ;IACjB,YAAY,UAAS;IACrB,aAAa,UAAS;IACvB,eAAe,SAA4B;IAC1C,cAAc,UAAS;IACxB,UAAU,SAAkB;IAC5B,SAAS,SAAM;IACd,uBAAuB,UAAS;IACjC,mBAAmB,SAAiB;IAEhE,oDAAoD;IACzB,OAAO,EAAE,MAAM,EAAE,CAAM;IAEzC,OAAO,CAAC,eAAe,CAAS;IAEzC,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,2BAA2B;IAWnC,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,oBAAoB;IAe5B,OAAO,CAAC,aAAa;IAqBrB,MAAM;CAuHP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}

package/dist/index.js

@@ -11465,6 +11465,9 @@ var AxebowFormPanelField = class AxebowFormPanelField extends LitElement {
 		super.disconnectedCallback();
 		window.removeEventListener("click", this._handleOutsideClick);
 	}
+	get _isSelector() {
+		return Boolean(this.showDropdown || this.options && this.options.length > 0);
+	}
 	_handleFocus(_e) {
 		if (this.disabled) return;
 		this.dispatchEvent(new CustomEvent("focus", {
@@ -11482,7 +11485,7 @@ var AxebowFormPanelField = class AxebowFormPanelField extends LitElement {
 		}));
 	}
 	_handleInput(e) {
-		if (this.disabled) return;
+		if (this.disabled || this._isSelector) return;
 		const target = e.target;
 		this.value = target.value;
 		this.dispatchEvent(new CustomEvent("change", {
@@ -11491,6 +11494,16 @@ var AxebowFormPanelField = class AxebowFormPanelField extends LitElement {
 			composed: true
 		}));
 	}
+	_handleKeyDown(e) {
+		if (this.disabled || !this._isSelector) return;
+		if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+			e.preventDefault();
+			this._handleDropdownClick(e);
+		} else if (e.key === "Escape" && this._isDropdownOpen) {
+			e.preventDefault();
+			this._isDropdownOpen = false;
+		}
+	}
 	_handleActionClick(e) {
 		e.stopPropagation();
 		const textToCopy = this.copyValue !== void 0 && this.copyValue !== "" ? this.copyValue : this.value;
@@ -11543,6 +11556,7 @@ var AxebowFormPanelField = class AxebowFormPanelField extends LitElement {
 		}));
 	}
 	render() {
+		const isSelector = this._isSelector;
 		const isFilled = this.styleVariant && this.styleVariant.toLowerCase() === "filled" || !!this.value;
 		const bgClass = this.disabled ? "bg-(--axebow-base) border border-solid border-(--axebow-border-gray)" : "bg-white border border-solid border-(--axebow-border-gray) focus-within:border-(--axebow-tertiary)";
 		const textColor = this.disabled ? "text-(--axebow-gray)" : isFilled ? "text-(--axebow-strong-gray)" : "text-(--axebow-gray)";
@@ -11550,8 +11564,9 @@ var AxebowFormPanelField = class AxebowFormPanelField extends LitElement {
       <div class="relative w-full">
         <!-- Field Container -->
         <div
-          class="field-container border flex items-center justify-between gap-2 ${bgClass} ${this.showDropdown && !this.disabled ? "cursor-pointer" : ""}"
-          @click=${this.showDropdown ? this._handleDropdownClick : null}
+          class="field-container border flex items-center justify-between gap-2 ${bgClass} ${isSelector && !this.disabled ? "cursor-pointer select-none" : ""}"
+          @click=${isSelector ? this._handleDropdownClick : null}
+          @keydown=${this._handleKeyDown}
         >
           <div class="flex flex-col justify-center flex-1 min-w-0">
             <!-- Top Label -->
@@ -11563,10 +11578,11 @@ var AxebowFormPanelField = class AxebowFormPanelField extends LitElement {
             <!-- Value / Input -->
             <input
               type="text"
-              class="w-full bg-transparent border-0 p-0 text-sm font-normal ${textColor} focus:outline-none truncate"
+              class="w-full bg-transparent border-0 p-0 text-sm font-normal ${textColor} focus:outline-none truncate ${isSelector && !this.disabled ? "cursor-pointer select-none" : ""}"
               .value=${this.value}
               placeholder=${this.placeholderCopy}
               ?disabled=${this.disabled}
+              ?readonly=${isSelector}
               @input=${this._handleInput}
               @focus=${this._handleFocus}
               @blur=${this._handleBlur}
@@ -11602,7 +11618,7 @@ var AxebowFormPanelField = class AxebowFormPanelField extends LitElement {
                     <axebow-icon iconName="cancel" iconColor="currentColor" size="lg"></axebow-icon>
                   </button>
                 ` : ""}
-            ${this.showDropdown ? html`
+            ${isSelector ? html`
                   <button
                     type="button"
                     class="p-0 border-0 bg-transparent cursor-pointer flex items-center justify-center text-(--axebow-tertiary) hover:text-(--axebow-gray) transition-colors"
@@ -11620,7 +11636,7 @@ var AxebowFormPanelField = class AxebowFormPanelField extends LitElement {
         </div>
 
         <!-- Dropdown Menu Overlay -->
-        ${this.showDropdown && this._isDropdownOpen && this.options && this.options.length > 0 ? html`
+        ${isSelector && this._isDropdownOpen && this.options && this.options.length > 0 ? html`
               <div
                 class="absolute left-0 top-full mt-1 w-full bg-white border border-solid border-(--axebow-border-gray) rounded-md shadow-lg z-50 max-h-48 overflow-y-auto py-1 box-border"
               >