@kumori/aurora-wui-components 0.0.273-dev4131 → 0.0.273-dev4131.3

package/dist/components/axebow-carousel-selector-tenant/parts/axebow-carousel-selector-item.d.ts

@@ -12,7 +12,7 @@ export declare class AxebowCarouselSelectorItem extends LitElement {
     accountName: string;
     logoSrc: string | null;
     logoAlt: string;
-    private _handleChange;
+    private _handleCardClick;
     private _renderCheck;
     private _renderBadge;
     private _renderAccount;

package/dist/components/axebow-carousel-selector-tenant/parts/axebow-carousel-selector-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-carousel-selector-item.d.ts","sourceRoot":"","sources":["../../../../src/components/axebow-carousel-selector-tenant/parts/axebow-carousel-selector-item.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,+DAA+D,CAAC;AACvE,OAAO,kCAAkC,CAAC;AAE1C,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,aAAa,CAAC;AAEhE,qBACa,0BAA2B,SAAQ,UAAU;IACxD,MAAM,CAAC,MAAM,4BAyBX;IAEyC,OAAO,EAAE,uBAAuB,CAAa;IAC5D,MAAM,SAAM;IACX,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAClB,SAAS,SAAM;IACf,IAAI,SAAM;IACV,UAAU,SAAM;IAChB,WAAW,SAAM;IACjB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC9B,OAAO,SAAM;IAEzC,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,kBAAkB;IA2B1B,MAAM;CAgBP"}
+{"version":3,"file":"axebow-carousel-selector-item.d.ts","sourceRoot":"","sources":["../../../../src/components/axebow-carousel-selector-tenant/parts/axebow-carousel-selector-item.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,+DAA+D,CAAC;AACvE,OAAO,kCAAkC,CAAC;AAE1C,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,aAAa,CAAC;AAEhE,qBACa,0BAA2B,SAAQ,UAAU;IACxD,MAAM,CAAC,MAAM,4BA4BX;IAEyC,OAAO,EAAE,uBAAuB,CAAa;IAC5D,MAAM,SAAM;IACX,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAClB,SAAS,SAAM;IACf,IAAI,SAAM;IACV,UAAU,SAAM;IAChB,WAAW,SAAM;IACjB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC9B,OAAO,SAAM;IAEzC,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,kBAAkB;IA2B1B,MAAM;CAiBP"}

package/dist/components/axebow-input/axebow-providers-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-providers-input.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-providers-input.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,qBACa,oBAAqB,SAAQ,eAAe;IACvD,MAAM,CAAC,MAAM,4BAAmC;IAErB,aAAa,EAAE,YAAY,EAAE,CAAM;IAC9B,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC;IAEvF,MAAM;CAgBP"}
+{"version":3,"file":"axebow-providers-input.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-providers-input.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,qBACa,oBAAqB,SAAQ,eAAe;IACvD,MAAM,CAAC,MAAM,4BAoBX;IAEyB,aAAa,EAAE,YAAY,EAAE,CAAM;IAC9B,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC;IAEvF,MAAM;CAmBP"}

package/dist/index.js

@@ -2455,17 +2455,39 @@ var AxebowProvidersInput = class AxebowProvidersInput extends AxebowInputBase {
 		this.carouselItems = [];
 	}
 	static {
-		this.styles = [...AxebowInputBase.baseStyles];
+		this.styles = [...AxebowInputBase.baseStyles, css`
+      .provider-card {
+        border-color: var(--axebow-light-gray);
+        background-color: var(--axebow-base);
+      }
+      .provider-card:not(.selected):hover {
+        border-color: var(--axebow-tertiary);
+      }
+      .provider-card.selected {
+        border-color: var(--axebow-primary);
+        background-color: var(--axebow-white);
+        cursor: default;
+      }
+      .provider-card.disabled {
+        opacity: 0.6;
+        pointer-events: none;
+      }
+    `];
 	}
 	render() {
 		return this.renderWrapper(html`
       <div class="flex flex-wrap gap-3 mt-0">
-        ${this.carouselItems.map((item) => this.carouselItemRenderer ? this.carouselItemRenderer(item) : html`
-                <div>
-                  <img src="${item.content}" alt="${item.id}" />
-                  <p>${item.id}</p>
+        ${this.carouselItems.map((item) => {
+			const isSelected = this.value === item.id || this.value === item.name;
+			return this.carouselItemRenderer ? this.carouselItemRenderer(item) : html`
+                <div
+                  class="provider-card border border-solid rounded-md transition-colors flex gap-4 items-center justify-center p-3 cursor-pointer ${isSelected ? "selected" : ""} ${this.disabled ? "disabled" : ""}"
+                >
+                  <img src="${item.content}" alt="${item.id}" class="w-12.5 h-12.5 object-contain" />
+                  <p class="m-0">${item.id}</p>
                 </div>
-              `)}
+              `;
+		})}
       </div>
     `);
 	}
@@ -8803,6 +8825,9 @@ var AxebowCarouselSelectorItem = class AxebowCarouselSelectorItem extends LitEle
         width: 14.208125rem;
         height: 5.125rem;
       }
+      .item-container:not(.selected):hover {
+        border-color: var(--axebow-tertiary);
+      }
       .item-checkbox::part(base) {
         padding: 0;
       }
@@ -8817,13 +8842,9 @@ var AxebowCarouselSelectorItem = class AxebowCarouselSelectorItem extends LitEle
       }
     `];
 	}
-	_handleChange(e) {
-		const checkbox = e.target;
+	_handleCardClick() {
 		if (this.disabled) return;
-		if (this.selected && !checkbox.checked) {
-			checkbox.checked = true;
-			return;
-		}
+		if (this.selected) return;
 		this.dispatchEvent(new CustomEvent("item-select", {
 			detail: { id: this.itemId },
 			bubbles: true,
@@ -8832,12 +8853,11 @@ var AxebowCarouselSelectorItem = class AxebowCarouselSelectorItem extends LitEle
 	}
 	_renderCheck() {
 		return html`
-      <div class="absolute ${this.variant === "environment" ? "top-3 right-1.5" : "top-3 right-3"} w-4.5 h-4.5 shrink-0">
+      <div class="absolute ${this.variant === "environment" ? "top-3 right-1.5" : "top-3 right-3"} w-4.5 h-4.5 shrink-0 pointer-events-none">
         <sl-checkbox
           class="item-checkbox"
           .checked=${this.selected}
           ?disabled=${this.disabled}
-          @sl-change=${this._handleChange}
         ></sl-checkbox>
       </div>
     `;
@@ -8886,9 +8906,11 @@ var AxebowCarouselSelectorItem = class AxebowCarouselSelectorItem extends LitEle
     `;
 	}
 	render() {
+		const paddingClass = this.variant === "environment" ? "pt-3 px-1.5 pb-0" : "pt-3 px-3 pb-0";
 		return html`
       <div
-        class="relative w-full h-full box-border rounded-md border border-solid overflow-hidden transition-colors ${this.variant === "environment" ? "pt-3 px-1.5 pb-0" : "pt-3 px-3 pb-0"} ${this.selected ? "border-(--axebow-primary) bg-(--axebow-white)" : "border-(--axebow-light-gray) bg-(--axebow-base)"} ${this.disabled ? "opacity-60 pointer-events-none" : "hover:border-(--axebow-tertiary)"}"
+        @click=${this._handleCardClick}
+        class="item-container relative w-full h-full box-border rounded-md border border-solid overflow-hidden transition-colors ${paddingClass} ${this.selected ? "selected cursor-default border-(--axebow-primary) bg-(--axebow-white)" : "cursor-pointer border-(--axebow-light-gray) bg-(--axebow-base)"} ${this.disabled ? "opacity-60 pointer-events-none" : ""}"
       >
         ${this.variant === "environment" ? this._renderEnvironment() : this._renderAccount()}
         ${this._renderCheck()}