@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-list.mjs

@@ -0,0 +1,338 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, TemplateRef, computed, contentChild, inject, input, output } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { ButtonComponent } from "@lifecorner/angular-ui-kit/button";
+var ListItemTemplateDirective = class ListItemTemplateDirective {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ListItemTemplateDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: ListItemTemplateDirective,
+		isStandalone: true,
+		selector: "[lcListItem]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ListItemTemplateDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[lcListItem]",
+			standalone: true
+		}]
+	}]
+});
+var ListComponent = class ListComponent {
+	itemTemplate = contentChild(ListItemTemplateDirective, ...ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	showDividers = input(false, ...ngDevMode ? [{ debugName: "showDividers" }] : /* istanbul ignore next */ []);
+	clickable = input(false, ...ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []);
+	clampDescription = input(true, ...ngDevMode ? [{ debugName: "clampDescription" }] : /* istanbul ignore next */ []);
+	actionVariant = input("ghost", ...ngDevMode ? [{ debugName: "actionVariant" }] : /* istanbul ignore next */ []);
+	actionSize = input("xs", ...ngDevMode ? [{ debugName: "actionSize" }] : /* istanbul ignore next */ []);
+	itemClick = output();
+	actionClick = output();
+	listClasses = computed(() => {
+		const classes = ["lc-list"];
+		classes.push(`lc-list--${this.orientation()}`);
+		classes.push(`lc-list--${this.variant()}`);
+		classes.push(`lc-list--${this.size()}`);
+		if (this.showDividers()) classes.push("lc-list--with-dividers");
+		if (this.clickable()) classes.push("lc-list--clickable");
+		if (!this.clampDescription()) classes.push("lc-list--no-clamp");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []);
+	getItemClasses(item) {
+		const classes = ["lc-list__item"];
+		if (item.disabled) classes.push("lc-list__item--disabled");
+		if (item.selected) classes.push("lc-list__item--selected");
+		return classes.join(" ");
+	}
+	avatarClasses(item) {
+		const color = item.avatarColor;
+		return color && color !== "default" ? `lc-list__avatar lc-list__avatar--member lc-list__avatar--${color}` : "lc-list__avatar";
+	}
+	onItemClick(item) {
+		if (!item.disabled) this.itemClick.emit(item);
+	}
+	onItemKeydown(event, item) {
+		if (event.target !== event.currentTarget) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			this.onItemClick(item);
+		}
+	}
+	onActionClick(item) {
+		this.actionClick.emit(item);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ListComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ListComponent,
+		isStandalone: true,
+		selector: "lc-list",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showDividers: {
+				classPropertyName: "showDividers",
+				publicName: "showDividers",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clickable: {
+				classPropertyName: "clickable",
+				publicName: "clickable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clampDescription: {
+				classPropertyName: "clampDescription",
+				publicName: "clampDescription",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			actionVariant: {
+				classPropertyName: "actionVariant",
+				publicName: "actionVariant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			actionSize: {
+				classPropertyName: "actionSize",
+				publicName: "actionSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			itemClick: "itemClick",
+			actionClick: "actionClick"
+		},
+		queries: [{
+			propertyName: "itemTemplate",
+			first: true,
+			predicate: ListItemTemplateDirective,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n  }\n</ng-template>\n\n<div [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    @if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n",
+		styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--border-radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical>.lc-list__item:last-child,.lc-list--vertical>.lc-list__item-wrapper:last-child .lc-list__item{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-divider)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item,.lc-list--horizontal .lc-list__item-wrapper{flex:1}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent}.lc-list--horizontal>.lc-list__item:last-child,.lc-list--horizontal>.lc-list__item-wrapper:last-child .lc-list__item{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-divider)}.lc-list__item-wrapper{display:flex;min-width:0}.lc-list__item-wrapper>.lc-list__item{flex:1;min-width:0}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));transition:background-color .2s ease}.lc-list__item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary-500)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-text-tertiary)}.lc-list__label{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-100, #dbeafe)}.lc-list__avatar-img{width:100%;height:100%;object-fit:cover}.lc-list__avatar-initials{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-primary-700, #1d4ed8);text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.lc-list__avatar--member-1{background-color:var(--color-member-1, #1a6a79)}.lc-list__avatar--member-2{background-color:var(--color-member-2, #b04a22)}.lc-list__avatar--member-3{background-color:var(--color-member-3, #4e3f84)}.lc-list__avatar--member-4{background-color:var(--color-member-4, #5f7150)}.lc-list__avatar--member-5{background-color:var(--color-member-5, #9e3846)}.lc-list__avatar--member-6{background-color:var(--color-member-6, #5a798c)}.lc-list__avatar--member .lc-list__avatar-initials{color:var(--color-on-member, #ffffff);font-weight:700;letter-spacing:.02em}.lc-list__content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lc-list__subtitle{font-size:var(--font-size-sm, .875rem);color:var(--color-text-tertiary);line-height:var(--line-height-sm, 1.25rem);overflow-wrap:anywhere}.lc-list__description{overflow-wrap:anywhere;font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);line-height:var(--line-height-xs, 1rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lc-list--no-clamp .lc-list__description{display:block;-webkit-line-clamp:unset;overflow:visible}.lc-list__trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.lc-list__action{flex-shrink:0}.lc-list--clickable .lc-list__item{cursor:pointer}.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-surface-hover)}.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-surface-sunken)}.lc-list__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:var(--font-size-xs, .75rem);font-weight:500;line-height:1.25rem;white-space:nowrap}.lc-list__badge--default{background-color:var(--color-surface-hover);color:var(--color-text-secondary)}.lc-list__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.lc-list__badge--success{background-color:var(--color-success-100, #dcfce7);color:var(--color-success-700, #15803d)}.lc-list__badge--warning{background-color:var(--color-warning-100, #fef3c7);color:var(--color-warning-700, #a16207)}.lc-list__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-error-700, #b91c1c)}.lc-list__metadata{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);white-space:nowrap}.lc-list__item--selected{background-color:var(--color-primary-50, #eff6ff)}.lc-list--clickable .lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-100, #dbeafe)}.lc-list--sm .lc-list__item{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-list--sm .lc-list__avatar{width:32px;height:32px}.lc-list--sm .lc-list__avatar-initials{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__label{font-size:var(--font-size-sm, .875rem)}.lc-list--sm .lc-list__subtitle{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__description{display:none}.lc-list--lg .lc-list__item{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-list--lg .lc-list__avatar{width:48px;height:48px}.lc-list--lg .lc-list__avatar-initials{font-size:var(--font-size-base, 1rem)}.lc-list--lg .lc-list__label{font-size:var(--font-size-lg, 1.125rem)}.lc-list--lg .lc-list__content{gap:4px}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-surface-2);border:1px solid var(--color-border);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--elevation-1)}.lc-list--card.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled){background:var(--color-surface-sunken)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "lc-icon",
+				inputs: [
+					"name",
+					"variant",
+					"size",
+					"color",
+					"ariaLabel",
+					"decorative",
+					"strict"
+				]
+			},
+			{
+				kind: "component",
+				type: ButtonComponent,
+				selector: "lc-button",
+				inputs: [
+					"variant",
+					"size",
+					"disabled",
+					"loading",
+					"iconOnly",
+					"fullWidth",
+					"ariaLabel",
+					"type",
+					"title",
+					"disabledReason",
+					"inline"
+				],
+				outputs: [
+					"clicked",
+					"focused",
+					"blurred"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-list",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				IconComponent,
+				ButtonComponent
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n  }\n</ng-template>\n\n<div [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    @if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n",
+			styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--border-radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical>.lc-list__item:last-child,.lc-list--vertical>.lc-list__item-wrapper:last-child .lc-list__item{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-divider)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item,.lc-list--horizontal .lc-list__item-wrapper{flex:1}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent}.lc-list--horizontal>.lc-list__item:last-child,.lc-list--horizontal>.lc-list__item-wrapper:last-child .lc-list__item{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-divider)}.lc-list__item-wrapper{display:flex;min-width:0}.lc-list__item-wrapper>.lc-list__item{flex:1;min-width:0}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));transition:background-color .2s ease}.lc-list__item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary-500)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-text-tertiary)}.lc-list__label{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-100, #dbeafe)}.lc-list__avatar-img{width:100%;height:100%;object-fit:cover}.lc-list__avatar-initials{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-primary-700, #1d4ed8);text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.lc-list__avatar--member-1{background-color:var(--color-member-1, #1a6a79)}.lc-list__avatar--member-2{background-color:var(--color-member-2, #b04a22)}.lc-list__avatar--member-3{background-color:var(--color-member-3, #4e3f84)}.lc-list__avatar--member-4{background-color:var(--color-member-4, #5f7150)}.lc-list__avatar--member-5{background-color:var(--color-member-5, #9e3846)}.lc-list__avatar--member-6{background-color:var(--color-member-6, #5a798c)}.lc-list__avatar--member .lc-list__avatar-initials{color:var(--color-on-member, #ffffff);font-weight:700;letter-spacing:.02em}.lc-list__content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lc-list__subtitle{font-size:var(--font-size-sm, .875rem);color:var(--color-text-tertiary);line-height:var(--line-height-sm, 1.25rem);overflow-wrap:anywhere}.lc-list__description{overflow-wrap:anywhere;font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);line-height:var(--line-height-xs, 1rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lc-list--no-clamp .lc-list__description{display:block;-webkit-line-clamp:unset;overflow:visible}.lc-list__trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.lc-list__action{flex-shrink:0}.lc-list--clickable .lc-list__item{cursor:pointer}.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-surface-hover)}.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-surface-sunken)}.lc-list__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:var(--font-size-xs, .75rem);font-weight:500;line-height:1.25rem;white-space:nowrap}.lc-list__badge--default{background-color:var(--color-surface-hover);color:var(--color-text-secondary)}.lc-list__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.lc-list__badge--success{background-color:var(--color-success-100, #dcfce7);color:var(--color-success-700, #15803d)}.lc-list__badge--warning{background-color:var(--color-warning-100, #fef3c7);color:var(--color-warning-700, #a16207)}.lc-list__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-error-700, #b91c1c)}.lc-list__metadata{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);white-space:nowrap}.lc-list__item--selected{background-color:var(--color-primary-50, #eff6ff)}.lc-list--clickable .lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-100, #dbeafe)}.lc-list--sm .lc-list__item{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-list--sm .lc-list__avatar{width:32px;height:32px}.lc-list--sm .lc-list__avatar-initials{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__label{font-size:var(--font-size-sm, .875rem)}.lc-list--sm .lc-list__subtitle{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__description{display:none}.lc-list--lg .lc-list__item{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-list--lg .lc-list__avatar{width:48px;height:48px}.lc-list--lg .lc-list__avatar-initials{font-size:var(--font-size-base, 1rem)}.lc-list--lg .lc-list__label{font-size:var(--font-size-lg, 1.125rem)}.lc-list--lg .lc-list__content{gap:4px}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-surface-2);border:1px solid var(--color-border);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled){background:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--elevation-1)}.lc-list--card.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled){background:var(--color-surface-sunken)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}\n"]
+		}]
+	}],
+	propDecorators: {
+		itemTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => ListItemTemplateDirective), { isSignal: true }]
+		}],
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		showDividers: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showDividers",
+				required: false
+			}]
+		}],
+		clickable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clickable",
+				required: false
+			}]
+		}],
+		clampDescription: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clampDescription",
+				required: false
+			}]
+		}],
+		actionVariant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "actionVariant",
+				required: false
+			}]
+		}],
+		actionSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "actionSize",
+				required: false
+			}]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}],
+		actionClick: [{
+			type: i0.Output,
+			args: ["actionClick"]
+		}]
+	}
+});
+export { ListComponent, ListItemTemplateDirective };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-list.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-list.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/list/list-item-template.directive.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.html"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport { ListItem } from './list.component';\n\n/**\n * Directive for providing a custom template to render each list item.\n *\n * @example\n * ```html\n * <lc-list [items]=\"runs()\" (itemClick)=\"onRunClick($event)\">\n *   <ng-template lcListItem let-item>\n *     <lc-badge [variant]=\"getStatusVariant(item.status)\">{{ item.status }}</lc-badge>\n *     <span>{{ item.symbol }}</span>\n *     <span class=\"text-sm text-neutral-500\">{{ item.date }}</span>\n *   </ng-template>\n * </lc-list>\n * ```\n */\n@Directive({\n  selector: '[lcListItem]',\n  standalone: true,\n})\nexport class ListItemTemplateDirective {\n  public readonly template = inject(TemplateRef<{ $implicit: ListItem }>);\n}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  computed,\n  contentChild,\n  output,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { ButtonComponent, ButtonSize, ButtonVariant } from '@lifecorner/angular-ui-kit/button';\nimport { ListItemTemplateDirective } from './list-item-template.directive';\nimport type { AvatarColor } from '@lifecorner/angular-ui-kit/avatar';\n\n/**\n * List orientation type\n */\nexport type ListOrientation = 'vertical' | 'horizontal';\n\n/**\n * List visual variant\n *  - default: flat rows (original)\n *  - card: each item rendered as a mini-card with border, radius and shadow on hover\n */\nexport type ListVariant = 'default' | 'card';\n\n/**\n * List item interface\n */\nexport interface ListItem {\n  /** Item label text (primary line) */\n  label: string;\n  /** Secondary text shown below the label */\n  subtitle?: string;\n  /** Description text shown below subtitle (third line) */\n  description?: string;\n  /** Optional icon identifier */\n  icon?: string;\n  /** Avatar URL or initials (renders a circular avatar instead of icon) */\n  avatar?: string;\n  /**\n   * Background of avatar initials: `default` or a member colour `member-1` …\n   * `member-6` with white initials (as `lc-avatar`'s `color`).\n   */\n  avatarColor?: AvatarColor;\n  /** Badge text (e.g. count, status label) shown on the trailing side */\n  badge?: string;\n  /** Badge color variant */\n  badgeVariant?: 'default' | 'primary' | 'success' | 'warning' | 'error';\n  /** Metadata text shown on the trailing side (e.g. date, size) */\n  metadata?: string;\n  /** Optional action label */\n  action?: string;\n  /**\n   * Accessible name of this row's action when the visible label repeats on\n   * every row (e.g. „Entfernen“ → „iPhone · Safari entfernen“). The visible\n   * label must be part of it (WCAG 2.5.3).\n   */\n  actionAriaLabel?: string;\n  /** Item identifier */\n  id?: string;\n  /** Whether the item is disabled */\n  disabled?: boolean;\n  /** Whether the item is selected / highlighted */\n  selected?: boolean;\n  /** Any additional data */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any;\n}\n\n/**\n * List item size\n */\nexport type ListSize = 'sm' | 'md' | 'lg';\n\n/**\n * List component for displaying structured item collections.\n *\n * Features:\n * - Vertical and horizontal layout orientations\n * - Variant styles (default, bordered, card)\n * - Optional dividers between items\n * - Icon and avatar support per item\n * - Action buttons with click events\n * - Accessible with ARIA list role; `clickable` rows are keyboard-operable\n *\n * @example\n * ```html\n * <lc-list\n *   [items]=\"listItems\"\n *   orientation=\"vertical\"\n *   [showDividers]=\"true\"\n *   (itemClick)=\"handleItemClick($event)\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-list',\n  standalone: true,\n  imports: [NgTemplateOutlet, IconComponent, ButtonComponent],\n  templateUrl: './list.component.html',\n  styleUrl: './list.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ListComponent {\n  /** Custom item template provided via lcListItem directive */\n  readonly itemTemplate = contentChild(ListItemTemplateDirective);\n\n  /** Array of list items to display */\n  items = input<ListItem[]>([]);\n\n  /** Orientation of the list */\n  orientation = input<ListOrientation>('vertical');\n\n  /** Visual variant */\n  variant = input<ListVariant>('default');\n\n  /** Size of list items */\n  size = input<ListSize>('md');\n\n  /** Whether to show dividers between items */\n  showDividers = input<boolean>(false);\n\n  /**\n   * Whether rows are interactive. When set, each row is rendered as a\n   * focusable button (Enter / Space emit `itemClick`) so `itemClick` is\n   * reachable from the keyboard. Set this whenever you handle `itemClick`.\n   */\n  clickable = input<boolean>(false);\n\n  /**\n   * Clamp each item's `description` to two lines (3.2). Set `false` for\n   * reading text that must show in full (3.3, G-11).\n   * @default true\n   */\n  clampDescription = input<boolean>(true);\n\n  /**\n   * Variant of the built-in row action (`ListItem.action`).\n   * @default 'ghost'\n   */\n  actionVariant = input<ButtonVariant>('ghost');\n\n  /**\n   * Size of the built-in row action: `xs` (3.2, about 25 px) … `lg` (48.5 px,\n   * the 44 px touch target).\n   * @default 'xs'\n   */\n  actionSize = input<ButtonSize>('xs');\n\n  /** Event emitted when an item is clicked */\n  readonly itemClick = output<ListItem>();\n\n  /** Event emitted when an action button is clicked */\n  readonly actionClick = output<ListItem>();\n\n  /**\n   * Computed CSS classes for the list\n   */\n  listClasses = computed(() => {\n    const classes = ['lc-list'];\n\n    classes.push(`lc-list--${this.orientation()}`);\n    classes.push(`lc-list--${this.variant()}`);\n    classes.push(`lc-list--${this.size()}`);\n\n    if (this.showDividers()) {\n      classes.push('lc-list--with-dividers');\n    }\n\n    if (this.clickable()) {\n      classes.push('lc-list--clickable');\n    }\n\n    if (!this.clampDescription()) {\n      classes.push('lc-list--no-clamp');\n    }\n\n    return classes.join(' ');\n  });\n\n  /**\n   * Get CSS classes for a list item\n   */\n  getItemClasses(item: ListItem): string {\n    const classes = ['lc-list__item'];\n\n    if (item.disabled) {\n      classes.push('lc-list__item--disabled');\n    }\n\n    if (item.selected) {\n      classes.push('lc-list__item--selected');\n    }\n\n    return classes.join(' ');\n  }\n\n  /** CSS classes of an item's avatar (member colour, LK-7). */\n  protected avatarClasses(item: ListItem): string {\n    const color = item.avatarColor;\n    return color && color !== 'default'\n      ? `lc-list__avatar lc-list__avatar--member lc-list__avatar--${color}`\n      : 'lc-list__avatar';\n  }\n\n  /**\n   * Handle item click\n   */\n  onItemClick(item: ListItem): void {\n    if (!item.disabled) {\n      this.itemClick.emit(item);\n    }\n  }\n\n  /**\n   * Keyboard activation of a clickable row. Only reacts to keys on the row\n   * itself: a nested control (e.g. the action button) handles its own Enter.\n   */\n  onItemKeydown(event: KeyboardEvent, item: ListItem): void {\n    if (event.target !== event.currentTarget) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.onItemClick(item);\n    }\n  }\n\n  /**\n   * Handle action button click\n   */\n  onActionClick(item: ListItem): void {\n    this.actionClick.emit(item);\n  }\n}\n","<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n  }\n</ng-template>\n\n<div [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    @if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n"],"mappings":"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"}