@underlayerdev/ui 0.18.0 → 0.18.1

package/fesm2022/underlayerdev-ui.mjs

@@ -1499,7 +1499,7 @@ var BannerComponent = class BannerComponent {
 		outputs: { dismissed: "dismissed" },
 		ngImport: i0,
 		template: "<section class=\"ul-banner ul-banner--{{ tone() }}\">\n  <ul-icon class=\"ul-banner__icon\" [icon]=\"resolvedIcon()\" size=\"6\" />\n\n  <div class=\"ul-banner__body\">\n    <div class=\"ul-banner__title\"><ng-content select=\"[ul-banner-title]\" /></div>\n    <div class=\"ul-banner__message\"><ng-content /></div>\n  </div>\n\n  <div class=\"ul-banner__actions\"><ng-content select=\"[ul-banner-actions]\" /></div>\n\n  @if (dismissible()) {\n    <ul-button\n      class=\"ul-banner__close\"\n      theme=\"ghost-white\"\n      size=\"xs\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"dismissLabel()\"\n      (buttonClick)=\"dismissed.emit()\"\n    >\n      <ul-icon icon=\"cross\" size=\"4\" />\n    </ul-button>\n  }\n</section>\n",
-		styles: [".ul-banner{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background-color:#232323;color:#fff}@media(max-width:767px){.ul-banner{flex-wrap:wrap;align-items:flex-start}}.ul-banner__icon{flex-shrink:0}.ul-banner__body{flex:1 1 0;min-width:0}.ul-banner__title:not(:empty){margin-block-end:4px;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-banner__message{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#ffffffb3}.ul-banner__actions{display:flex;flex-shrink:0;justify-content:end;gap:8px}.ul-banner__actions:empty{display:none}@media(max-width:767px){.ul-banner__actions{order:3;width:100%}}.ul-banner__close{flex-shrink:0}@media(max-width:767px){.ul-banner__close{order:2}}.ul-banner--info{border-color:#c2a8ff}.ul-banner--alert{border-color:#ffd9af}.ul-banner--confirm{border-color:#7edc96}.ul-banner--error{border-color:#f69d9d}\n"],
+		styles: [":host{display:block}.ul-banner{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background-color:#232323;color:#fff}@media(max-width:767px){.ul-banner{flex-wrap:wrap;align-items:flex-start}}.ul-banner__icon{flex-shrink:0}.ul-banner__body{flex:1 1 0;min-width:0}.ul-banner__title:not(:empty){margin-block-end:4px;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-banner__message{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#ffffffb3}.ul-banner__actions{display:flex;flex-shrink:0;justify-content:end;gap:8px}.ul-banner__actions:empty{display:none}@media(max-width:767px){.ul-banner__actions{order:3;width:100%}}.ul-banner__close{flex-shrink:0}@media(max-width:767px){.ul-banner__close{order:2}}.ul-banner--info{border-color:#c2a8ff}.ul-banner--alert{border-color:#ffd9af}.ul-banner--confirm{border-color:#7edc96}.ul-banner--error{border-color:#f69d9d}\n"],
 		dependencies: [{
 			kind: "component",
 			type: ButtonComponent,
@@ -1537,7 +1537,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ul-banner",
 			imports: [ButtonComponent, IconComponent],
 			template: "<section class=\"ul-banner ul-banner--{{ tone() }}\">\n  <ul-icon class=\"ul-banner__icon\" [icon]=\"resolvedIcon()\" size=\"6\" />\n\n  <div class=\"ul-banner__body\">\n    <div class=\"ul-banner__title\"><ng-content select=\"[ul-banner-title]\" /></div>\n    <div class=\"ul-banner__message\"><ng-content /></div>\n  </div>\n\n  <div class=\"ul-banner__actions\"><ng-content select=\"[ul-banner-actions]\" /></div>\n\n  @if (dismissible()) {\n    <ul-button\n      class=\"ul-banner__close\"\n      theme=\"ghost-white\"\n      size=\"xs\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"dismissLabel()\"\n      (buttonClick)=\"dismissed.emit()\"\n    >\n      <ul-icon icon=\"cross\" size=\"4\" />\n    </ul-button>\n  }\n</section>\n",
-			styles: [".ul-banner{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background-color:#232323;color:#fff}@media(max-width:767px){.ul-banner{flex-wrap:wrap;align-items:flex-start}}.ul-banner__icon{flex-shrink:0}.ul-banner__body{flex:1 1 0;min-width:0}.ul-banner__title:not(:empty){margin-block-end:4px;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-banner__message{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#ffffffb3}.ul-banner__actions{display:flex;flex-shrink:0;justify-content:end;gap:8px}.ul-banner__actions:empty{display:none}@media(max-width:767px){.ul-banner__actions{order:3;width:100%}}.ul-banner__close{flex-shrink:0}@media(max-width:767px){.ul-banner__close{order:2}}.ul-banner--info{border-color:#c2a8ff}.ul-banner--alert{border-color:#ffd9af}.ul-banner--confirm{border-color:#7edc96}.ul-banner--error{border-color:#f69d9d}\n"]
+			styles: [":host{display:block}.ul-banner{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background-color:#232323;color:#fff}@media(max-width:767px){.ul-banner{flex-wrap:wrap;align-items:flex-start}}.ul-banner__icon{flex-shrink:0}.ul-banner__body{flex:1 1 0;min-width:0}.ul-banner__title:not(:empty){margin-block-end:4px;font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:800}.ul-banner__message{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#ffffffb3}.ul-banner__actions{display:flex;flex-shrink:0;justify-content:end;gap:8px}.ul-banner__actions:empty{display:none}@media(max-width:767px){.ul-banner__actions{order:3;width:100%}}.ul-banner__close{flex-shrink:0}@media(max-width:767px){.ul-banner__close{order:2}}.ul-banner--info{border-color:#c2a8ff}.ul-banner--alert{border-color:#ffd9af}.ul-banner--confirm{border-color:#7edc96}.ul-banner--error{border-color:#f69d9d}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -6119,17 +6119,24 @@ var DropdownComponent = class DropdownComponent {
 	menuTriggerIcons = input(DEFAULT_MENU_TRIGGER_ICONS, ...ngDevMode ? [{ debugName: "menuTriggerIcons" }] : /* istanbul ignore next */ []);
 	triggerIconOnly = input(...ngDevMode ? [void 0, { debugName: "triggerIconOnly" }] : /* istanbul ignore next */ []);
 	iconOnlyLabel = input("Open menu", ...ngDevMode ? [{ debugName: "iconOnlyLabel" }] : /* istanbul ignore next */ []);
+	placeholder = input(...ngDevMode ? [void 0, { debugName: "placeholder" }] : /* istanbul ignore next */ []);
 	selectedIndex = model(0, ...ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []);
 	selectedItem = computed(() => {
 		const items = this.items();
+		const index = this.selectedIndex();
+		const fallback = {
+			label: "",
+			value: void 0,
+			leftIcons: [],
+			rightIcons: [],
+			disabled: false
+		};
+		const placeholder = this.placeholder();
 		return {
-			...items[this.selectedIndex()] ?? items[0] ?? {
-				label: "",
-				value: void 0,
-				leftIcons: [],
-				rightIcons: [],
-				disabled: false
-			},
+			...placeholder !== void 0 && !items[index] ? {
+				...fallback,
+				label: placeholder
+			} : items[index] ?? items[0] ?? fallback,
 			...this.menuTriggerIcons() ?? DEFAULT_MENU_TRIGGER_ICONS
 		};
 	}, ...ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []);
@@ -6215,6 +6222,13 @@ var DropdownComponent = class DropdownComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			selectedIndex: {
 				classPropertyName: "selectedIndex",
 				publicName: "selectedIndex",
@@ -6348,6 +6362,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
 		selectedIndex: [{
 			type: i0.Input,
 			args: [{
@@ -14476,6 +14498,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const NO_SELECTION = -1;
 var SelectComponent = class SelectComponent {
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
 	theme = input("transparent-white", ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
@@ -14511,17 +14534,11 @@ var SelectComponent = class SelectComponent {
 		effect(() => {
 			const currentValue = this.value();
 			const options = this.options();
-			if (currentValue == null) {
-				this.selectedIndex.set(0);
-				return;
-			}
-			const index = options.findIndex((opt) => opt.value === currentValue);
-			this.selectedIndex.set(index >= 0 ? index : 0);
+			this.selectedIndex.set(currentValue == null ? NO_SELECTION : options.findIndex((opt) => opt.value === currentValue));
 		});
 	}
-	onSelectedIndexChange(index) {
-		const option = this.options()[index];
-		this.selectedIndex.set(index);
+	onItemSelected(item) {
+		const option = this.options().find((candidate) => candidate.value === item.value);
 		this.value.set(option?.value ?? null);
 	}
 	onDropdownClosed() {
@@ -14654,7 +14671,7 @@ var SelectComponent = class SelectComponent {
 			selectedIndex: "selectedIndexChange"
 		},
 		ngImport: i0,
-		template: "<div\n  class=\"ul-select ul-select--{{ size() }}\"\n  [class.ul-select--disabled]=\"disabled()\"\n  [class.ul-select--error]=\"hasError()\"\n  [class.ul-select--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"ids.controlId\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <div\n    class=\"ul-select__control\"\n    [id]=\"ids.controlId\"\n    [class.ul-select__control--disabled]=\"disabled()\"\n  >\n    <ul-dropdown\n      class=\"ul-select__dropdown\"\n      [theme]=\"theme()\"\n      [items]=\"items()\"\n      [disabled]=\"disabled()\"\n      [(selectedIndex)]=\"selectedIndex\"\n      (selectedIndexChange)=\"onSelectedIndexChange($event)\"\n      (closed)=\"onDropdownClosed()\"\n    />\n  </div>\n\n  <ul-form-field-helper\n    [id]=\"ids.helperId\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n",
+		template: "<div\n  class=\"ul-select ul-select--{{ size() }}\"\n  [class.ul-select--disabled]=\"disabled()\"\n  [class.ul-select--error]=\"hasError()\"\n  [class.ul-select--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"ids.controlId\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <div\n    class=\"ul-select__control\"\n    [id]=\"ids.controlId\"\n    [class.ul-select__control--disabled]=\"disabled()\"\n  >\n    <ul-dropdown\n      class=\"ul-select__dropdown\"\n      [theme]=\"theme()\"\n      [items]=\"items()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [selectedIndex]=\"selectedIndex()\"\n      (selectedItemChange)=\"onItemSelected($event)\"\n      (closed)=\"onDropdownClosed()\"\n    />\n  </div>\n\n  <ul-form-field-helper\n    [id]=\"ids.helperId\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n",
 		styles: [".ul-select{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-select__control{display:flex;align-items:center;min-height:40px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background-color:transparent;transition:border-color .25s cubic-bezier(.4,0,.2,1)}.ul-select__control:hover{border-color:#ffffff4d}.ul-select__control:focus-within{border-color:#ffffff80}.ul-select__control .ul-list-item:focus-visible,.ul-select__control .ul-list-item:focus{outline:none}.ul-select__control--disabled{opacity:.6;cursor:not-allowed}.ul-select--disabled .ul-select__control{border-color:#ffffff1a}.ul-select--disabled .ul-select__control:hover,.ul-select--disabled .ul-select__control:focus-within{border-color:#ffffff1a}.ul-select--disabled .ul-select__control{opacity:.6;cursor:not-allowed}.ul-select__dropdown{width:100%}\n"],
 		dependencies: [
 			{
@@ -14668,6 +14685,7 @@ var SelectComponent = class SelectComponent {
 					"menuTriggerIcons",
 					"triggerIconOnly",
 					"iconOnlyLabel",
+					"placeholder",
 					"selectedIndex"
 				],
 				outputs: [
@@ -14718,7 +14736,7 @@ i0.ɵɵngDeclareClassMetadata({
 				FormFieldHelperComponent
 			],
 			encapsulation: ViewEncapsulation.None,
-			template: "<div\n  class=\"ul-select ul-select--{{ size() }}\"\n  [class.ul-select--disabled]=\"disabled()\"\n  [class.ul-select--error]=\"hasError()\"\n  [class.ul-select--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"ids.controlId\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <div\n    class=\"ul-select__control\"\n    [id]=\"ids.controlId\"\n    [class.ul-select__control--disabled]=\"disabled()\"\n  >\n    <ul-dropdown\n      class=\"ul-select__dropdown\"\n      [theme]=\"theme()\"\n      [items]=\"items()\"\n      [disabled]=\"disabled()\"\n      [(selectedIndex)]=\"selectedIndex\"\n      (selectedIndexChange)=\"onSelectedIndexChange($event)\"\n      (closed)=\"onDropdownClosed()\"\n    />\n  </div>\n\n  <ul-form-field-helper\n    [id]=\"ids.helperId\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n",
+			template: "<div\n  class=\"ul-select ul-select--{{ size() }}\"\n  [class.ul-select--disabled]=\"disabled()\"\n  [class.ul-select--error]=\"hasError()\"\n  [class.ul-select--required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-describedby]=\"describedBy()\"\n>\n  <ul-form-field-label\n    [label]=\"label()\"\n    [required]=\"required()\"\n    [for]=\"ids.controlId\"\n    [size]=\"size()\"\n    [showRequiredIndicator]=\"showRequiredIndicator()\"\n  />\n\n  <div\n    class=\"ul-select__control\"\n    [id]=\"ids.controlId\"\n    [class.ul-select__control--disabled]=\"disabled()\"\n  >\n    <ul-dropdown\n      class=\"ul-select__dropdown\"\n      [theme]=\"theme()\"\n      [items]=\"items()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [selectedIndex]=\"selectedIndex()\"\n      (selectedItemChange)=\"onItemSelected($event)\"\n      (closed)=\"onDropdownClosed()\"\n    />\n  </div>\n\n  <ul-form-field-helper\n    [id]=\"ids.helperId\"\n    [helperText]=\"helperText()\"\n    [errorText]=\"errorText() || (hasError() && errors().length ? errors()[0].message : '') || null\"\n    [error]=\"hasError()\"\n  />\n</div>\n",
 			styles: [".ul-select{white-space:nowrap;box-sizing:border-box;display:flex;flex-direction:column;width:100%;gap:4px}.ul-select__control{display:flex;align-items:center;min-height:40px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background-color:transparent;transition:border-color .25s cubic-bezier(.4,0,.2,1)}.ul-select__control:hover{border-color:#ffffff4d}.ul-select__control:focus-within{border-color:#ffffff80}.ul-select__control .ul-list-item:focus-visible,.ul-select__control .ul-list-item:focus{outline:none}.ul-select__control--disabled{opacity:.6;cursor:not-allowed}.ul-select--disabled .ul-select__control{border-color:#ffffff1a}.ul-select--disabled .ul-select__control:hover,.ul-select--disabled .ul-select__control:focus-within{border-color:#ffffff1a}.ul-select--disabled .ul-select__control{opacity:.6;cursor:not-allowed}.ul-select__dropdown{width:100%}\n"]
 		}]
 	}],