@lifecorner/angular-ui-kit 3.4.1 → 3.5.1

package/fesm2022/lifecorner-angular-ui-kit-empty-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-empty-state.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/empty-state/empty-state.component.ts","../../../../libs/angular-ui-kit/src/lib/empty-state/empty-state.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\nexport type EmptyStateSize = 'sm' | 'md' | 'lg';\n\n/** Heading level of `lc-empty-state`'s heading (3.3, G-9). */\nexport type EmptyStateHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\n/**\n * Empty state component for \"no data\" placeholder displays.\n *\n * Features:\n * - Compact (sm) and page-level (md, lg) size modes\n * - Optional icon from Tabler Icons library\n * - Heading and description text\n * - Action slot for projected CTA buttons\n * - Centered layout with visual hierarchy\n *\n * @example\n * ```html\n * <lc-empty-state\n *   icon=\"chart-bar\"\n *   heading=\"No Data\"\n *   message=\"No items found.\">\n *   <lc-button variant=\"primary\">Get Started</lc-button>\n * </lc-empty-state>\n * ```\n */\n@Component({\n  selector: 'lc-empty-state',\n  standalone: true,\n  imports: [IconComponent],\n  templateUrl: './empty-state.component.html',\n  styleUrl: './empty-state.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EmptyStateComponent {\n  /**\n   * Size variant\n   * - `sm`: compact inline (inside cards), no padding\n   * - `md`: standard centered block (default)\n   * - `lg`: large page-level with extra padding\n   * @default 'md'\n   */\n  readonly size = input<EmptyStateSize>('md');\n\n  /**\n    * Tabler icon name to display above the heading\n   */\n  readonly icon = input<string>();\n\n  /**\n   * Bold heading text\n   */\n  readonly heading = input<string>();\n\n  /**\n   * Heading level of `heading` (`h2`–`h6`), so the empty state fits the\n   * page's outline. Semantics only, the look stays the same.\n   * @default 3\n   */\n  readonly headingLevel = input<EmptyStateHeadingLevel>(3);\n\n  /**\n   * Description text\n   */\n  readonly message = input<string>();\n\n  protected readonly hostClasses = computed(() => `empty-state empty-state--${this.size()}`);\n}\n","<div [class]=\"hostClasses()\" role=\"status\">\n  @if (icon()) {\n    <lc-icon [name]=\"icon()!\" size=\"xl\" color=\"var(--color-text-tertiary)\" [decorative]=\"true\" />\n  }\n  @if (heading()) {\n    @switch (headingLevel()) {\n      @case (2) {\n        <h2 class=\"empty-state__heading\">{{ heading() }}</h2>\n      }\n      @case (4) {\n        <h4 class=\"empty-state__heading\">{{ heading() }}</h4>\n      }\n      @case (5) {\n        <h5 class=\"empty-state__heading\">{{ heading() }}</h5>\n      }\n      @case (6) {\n        <h6 class=\"empty-state__heading\">{{ heading() }}</h6>\n      }\n      @default {\n        <h3 class=\"empty-state__heading\">{{ heading() }}</h3>\n      }\n    }\n  }\n  @if (message()) {\n    <p class=\"empty-state__message\">{{ message() }}</p>\n  }\n  <ng-content />\n</div>\n"],"mappings":";;;AAoCA,IAAa,sBAAb,MAAa,oBAAmB;CAQrB,OAAO,MAAsB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAKlC,OAAO,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAKtB,UAAU,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAOzB,eAAe,MAA8B,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAK/C,UAAU,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEf,cAAc,eAAe,4BAA4B,KAAK,KAAI,KAAK,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAhC/E,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAnB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAmB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UCpChC;EA4BA,QAAA,CAAA,ikBAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDGY;GAAa,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKZ,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAR/B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAgB,YACd;GAAI,SACP,CAAC,aAAa;GAAC,iBAGP,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,ikBAAA;EAAA,CAAA"}

package/fesm2022/lifecorner-angular-ui-kit-error-display.mjs

@@ -0,0 +1,306 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, effect, input, signal } from "@angular/core";
+import { AlertComponent } from "@lifecorner/angular-ui-kit/alert";
+const COGNITO_ERROR_MESSAGES = {
+	UsernameExistsException: "An account with this email already exists.",
+	InvalidPasswordException: "Password must be at least 8 characters with uppercase, lowercase, number, and special character.",
+	InvalidParameterException: "Invalid input. Please check your information and try again.",
+	UserNotFoundException: "No account found with this email address.",
+	NotAuthorizedException: "Incorrect email or password.",
+	UserNotConfirmedException: "Please verify your email address before signing in.",
+	PasswordResetRequiredException: "You must reset your password before continuing.",
+	CodeMismatchException: "Invalid verification code. Please try again.",
+	ExpiredCodeException: "Verification code has expired. Please request a new one.",
+	LimitExceededException: "Too many attempts. Please try again later.",
+	TooManyRequestsException: "Too many requests. Please wait a moment and try again.",
+	TooManyFailedAttemptsException: "Too many failed attempts. Your account has been temporarily locked.",
+	NotAuthorizedException_TokenExpired: "Your session has expired. Please sign in again.",
+	NetworkError: "Network error. Please check your connection and try again.",
+	UnknownError: "An unexpected error occurred. Please try again."
+};
+var ErrorDisplayComponent = class ErrorDisplayComponent {
+	error = input(...ngDevMode ? [void 0, { debugName: "error" }] : /* istanbul ignore next */ []);
+	message = input(...ngDevMode ? [void 0, { debugName: "message" }] : /* istanbul ignore next */ []);
+	severity = input("error", ...ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []);
+	title = input(...ngDevMode ? [void 0, { debugName: "title" }] : /* istanbul ignore next */ []);
+	dismissible = input(true, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
+	showIcon = input(true, ...ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []);
+	autoDismiss = input(false, ...ngDevMode ? [{ debugName: "autoDismiss" }] : /* istanbul ignore next */ []);
+	autoDismissDelay = input(5e3, ...ngDevMode ? [{ debugName: "autoDismissDelay" }] : /* istanbul ignore next */ []);
+	errorTitleLabel = input("Error", ...ngDevMode ? [{ debugName: "errorTitleLabel" }] : /* istanbul ignore next */ []);
+	warningTitleLabel = input("Warning", ...ngDevMode ? [{ debugName: "warningTitleLabel" }] : /* istanbul ignore next */ []);
+	infoTitleLabel = input("Information", ...ngDevMode ? [{ debugName: "infoTitleLabel" }] : /* istanbul ignore next */ []);
+	visible = signal(false, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	errorMessage = computed(() => {
+		if (this.message()) return this.message();
+		const err = this.error();
+		if (!err) return "";
+		const errorCode = "code" in err ? err.code : void 0;
+		if (errorCode && COGNITO_ERROR_MESSAGES[errorCode]) return COGNITO_ERROR_MESSAGES[errorCode];
+		if ("message" in err && err.message) return err.message;
+		return COGNITO_ERROR_MESSAGES["UnknownError"];
+	}, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	alertVariant = computed(() => {
+		const severity = this.severity();
+		if (severity === "warning") return "warning";
+		if (severity === "info") return "info";
+		return "error";
+	}, ...ngDevMode ? [{ debugName: "alertVariant" }] : /* istanbul ignore next */ []);
+	errorTitle = computed(() => {
+		if (this.title()) return this.title();
+		const severity = this.severity();
+		if (severity === "warning") return this.warningTitleLabel();
+		if (severity === "info") return this.infoTitleLabel();
+		return this.errorTitleLabel();
+	}, ...ngDevMode ? [{ debugName: "errorTitle" }] : /* istanbul ignore next */ []);
+	autoDismissTimer;
+	constructor() {
+		effect(() => {
+			const hasError = !!(this.error() || this.message());
+			this.visible.set(hasError);
+			if (hasError && this.autoDismiss()) {
+				this.clearAutoDismissTimer();
+				this.autoDismissTimer = setTimeout(() => {
+					this.visible.set(false);
+				}, this.autoDismissDelay());
+			}
+		});
+	}
+	onDismissed() {
+		this.visible.set(false);
+		this.clearAutoDismissTimer();
+	}
+	clearAutoDismissTimer() {
+		if (this.autoDismissTimer) {
+			clearTimeout(this.autoDismissTimer);
+			this.autoDismissTimer = void 0;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ErrorDisplayComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ErrorDisplayComponent,
+		isStandalone: true,
+		selector: "lc-error-display",
+		inputs: {
+			error: {
+				classPropertyName: "error",
+				publicName: "error",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			message: {
+				classPropertyName: "message",
+				publicName: "message",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			severity: {
+				classPropertyName: "severity",
+				publicName: "severity",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissible: {
+				classPropertyName: "dismissible",
+				publicName: "dismissible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showIcon: {
+				classPropertyName: "showIcon",
+				publicName: "showIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoDismiss: {
+				classPropertyName: "autoDismiss",
+				publicName: "autoDismiss",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoDismissDelay: {
+				classPropertyName: "autoDismissDelay",
+				publicName: "autoDismissDelay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorTitleLabel: {
+				classPropertyName: "errorTitleLabel",
+				publicName: "errorTitleLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			warningTitleLabel: {
+				classPropertyName: "warningTitleLabel",
+				publicName: "warningTitleLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			infoTitleLabel: {
+				classPropertyName: "infoTitleLabel",
+				publicName: "infoTitleLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "@if (visible() && errorMessage()) {\n  <lc-alert\n    [variant]=\"alertVariant()\"\n    [title]=\"errorTitle()\"\n    [message]=\"errorMessage()\"\n    [dismissible]=\"dismissible()\"\n    [showIcon]=\"showIcon()\"\n    (dismissed)=\"onDismissed()\"\n  />\n}\n",
+		styles: [":host{display:block;width:100%}:host{animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: AlertComponent,
+			selector: "lc-alert",
+			inputs: [
+				"variant",
+				"title",
+				"message",
+				"icon",
+				"showIcon",
+				"iconAriaLabel",
+				"actionsLayout",
+				"dismissible",
+				"ariaLabel",
+				"closeAriaLabel",
+				"visible"
+			],
+			outputs: ["dismissed", "visibleChange"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ErrorDisplayComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-error-display",
+			imports: [AlertComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@if (visible() && errorMessage()) {\n  <lc-alert\n    [variant]=\"alertVariant()\"\n    [title]=\"errorTitle()\"\n    [message]=\"errorMessage()\"\n    [dismissible]=\"dismissible()\"\n    [showIcon]=\"showIcon()\"\n    (dismissed)=\"onDismissed()\"\n  />\n}\n",
+			styles: [":host{display:block;width:100%}:host{animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: false
+			}]
+		}],
+		severity: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "severity",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		dismissible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissible",
+				required: false
+			}]
+		}],
+		showIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showIcon",
+				required: false
+			}]
+		}],
+		autoDismiss: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoDismiss",
+				required: false
+			}]
+		}],
+		autoDismissDelay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoDismissDelay",
+				required: false
+			}]
+		}],
+		errorTitleLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorTitleLabel",
+				required: false
+			}]
+		}],
+		warningTitleLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "warningTitleLabel",
+				required: false
+			}]
+		}],
+		infoTitleLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "infoTitleLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { ErrorDisplayComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-error-display.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-error-display.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-error-display.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/error-display/error-display.component.ts","../../../../libs/angular-ui-kit/src/lib/error-display/error-display.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, computed, signal, effect } from '@angular/core';\nimport { AlertComponent, AlertVariant } from '@lifecorner/angular-ui-kit/alert';\n\n/**\n * Maps common Cognito error codes to user-friendly messages\n */\nconst COGNITO_ERROR_MESSAGES: Record<string, string> = {\n  // Sign Up Errors\n  UsernameExistsException: 'An account with this email already exists.',\n  InvalidPasswordException:\n    'Password must be at least 8 characters with uppercase, lowercase, number, and special character.',\n  InvalidParameterException: 'Invalid input. Please check your information and try again.',\n\n  // Sign In Errors\n  UserNotFoundException: 'No account found with this email address.',\n  NotAuthorizedException: 'Incorrect email or password.',\n  UserNotConfirmedException: 'Please verify your email address before signing in.',\n  PasswordResetRequiredException: 'You must reset your password before continuing.',\n\n  // Confirmation Errors\n  CodeMismatchException: 'Invalid verification code. Please try again.',\n  ExpiredCodeException: 'Verification code has expired. Please request a new one.',\n\n  // Password Reset Errors\n  LimitExceededException: 'Too many attempts. Please try again later.',\n  TooManyRequestsException: 'Too many requests. Please wait a moment and try again.',\n  TooManyFailedAttemptsException:\n    'Too many failed attempts. Your account has been temporarily locked.',\n\n  // Token Errors\n  NotAuthorizedException_TokenExpired: 'Your session has expired. Please sign in again.',\n\n  // General Errors\n  NetworkError: 'Network error. Please check your connection and try again.',\n  UnknownError: 'An unexpected error occurred. Please try again.',\n};\n\n/**\n * Error severity levels\n */\nexport type ErrorSeverity = 'error' | 'warning' | 'info';\n\n/**\n * Error display component for authentication and application error messages.\n *\n * Features:\n * - Automatic Cognito error code mapping to user-friendly messages\n * - Severity levels (error, warning, info)\n * - Custom error message override\n * - Dismissible with close button\n * - Accepts Error objects or custom error shapes\n *\n * @example\n * ```html\n * <lc-error-display [error]=\"cognitoError\" [dismissible]=\"true\" />\n * <lc-error-display message=\"Invalid credentials\" severity=\"error\" />\n * ```\n */\n@Component({\n  selector: 'lc-error-display',\n  imports: [AlertComponent],\n  templateUrl: './error-display.component.html',\n  styleUrl: './error-display.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ErrorDisplayComponent {\n  /**\n   * Error object (Cognito or generic Error)\n   */\n  readonly error = input<Error | { code?: string; message?: string } | null>();\n\n  /**\n   * Custom error message (overrides error.message)\n   */\n  readonly message = input<string>();\n\n  /**\n   * Error severity level\n   * @default 'error'\n   */\n  readonly severity = input<ErrorSeverity>('error');\n\n  /**\n   * Title for the error display\n   */\n  readonly title = input<string>();\n\n  /**\n   * Whether the error can be dismissed\n   * @default true\n   */\n  readonly dismissible = input<boolean>(true);\n\n  /**\n   * Whether to show icon\n   * @default true\n   */\n  readonly showIcon = input<boolean>(true);\n\n  /**\n   * Whether to automatically hide after a delay\n   * @default false\n   */\n  readonly autoDismiss = input<boolean>(false);\n\n  /**\n   * Auto-dismiss delay in milliseconds\n   * @default 5000\n   */\n  readonly autoDismissDelay = input<number>(5000);\n\n  /** Default title for severity `error` (when no `title` is set). */\n  readonly errorTitleLabel = input('Error');\n\n  /** Default title for severity `warning`. */\n  readonly warningTitleLabel = input('Warning');\n\n  /** Default title for severity `info`. */\n  readonly infoTitleLabel = input('Information');\n\n  /**\n   * Internal visibility state\n   */\n  protected readonly visible = signal<boolean>(false);\n\n  /**\n   * Computed error message\n   */\n  protected readonly errorMessage = computed(() => {\n    // Custom message takes precedence\n    if (this.message()) return this.message();\n\n    const err = this.error();\n    if (!err) return '';\n\n    // Try to extract Cognito error code\n    const errorCode = 'code' in err ? err.code : undefined;\n    if (errorCode && COGNITO_ERROR_MESSAGES[errorCode]) {\n      return COGNITO_ERROR_MESSAGES[errorCode];\n    }\n\n    // Fallback to error message\n    if ('message' in err && err.message) {\n      return err.message;\n    }\n\n    return COGNITO_ERROR_MESSAGES['UnknownError'];\n  });\n\n  /**\n   * Computed alert variant based on severity\n   */\n  protected readonly alertVariant = computed((): AlertVariant => {\n    const severity = this.severity();\n    if (severity === 'warning') return 'warning';\n    if (severity === 'info') return 'info';\n    return 'error';\n  });\n\n  /**\n   * Computed title for the error\n   */\n  protected readonly errorTitle = computed(() => {\n    if (this.title()) return this.title();\n\n    const severity = this.severity();\n    if (severity === 'warning') return this.warningTitleLabel();\n    if (severity === 'info') return this.infoTitleLabel();\n    return this.errorTitleLabel();\n  });\n\n  /**\n   * Auto-dismiss timer\n   */\n  private autoDismissTimer?: ReturnType<typeof setTimeout>;\n\n  constructor() {\n    // Show/hide based on error presence\n    effect(() => {\n      const hasError = !!(this.error() || this.message());\n      this.visible.set(hasError);\n\n      // Setup auto-dismiss if enabled\n      if (hasError && this.autoDismiss()) {\n        this.clearAutoDismissTimer();\n        this.autoDismissTimer = setTimeout(() => {\n          this.visible.set(false);\n        }, this.autoDismissDelay());\n      }\n    });\n  }\n\n  /**\n   * Handle alert dismissed\n   */\n  protected onDismissed(): void {\n    this.visible.set(false);\n    this.clearAutoDismissTimer();\n  }\n\n  /**\n   * Clear auto-dismiss timer\n   */\n  private clearAutoDismissTimer(): void {\n    if (this.autoDismissTimer) {\n      clearTimeout(this.autoDismissTimer);\n      this.autoDismissTimer = undefined;\n    }\n  }\n}\n","@if (visible() && errorMessage()) {\n  <lc-alert\n    [variant]=\"alertVariant()\"\n    [title]=\"errorTitle()\"\n    [message]=\"errorMessage()\"\n    [dismissible]=\"dismissible()\"\n    [showIcon]=\"showIcon()\"\n    (dismissed)=\"onDismissed()\"\n  />\n}\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-field-group.mjs

@@ -0,0 +1,154 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+var FieldGroupComponent = class FieldGroupComponent {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	value = input(...ngDevMode ? [void 0, { debugName: "value" }] : /* istanbul ignore next */ []);
+	icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
+	iconSize = input("sm", ...ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []);
+	compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: FieldGroupComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: FieldGroupComponent,
+		isStandalone: true,
+		selector: "lc-field-group",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconSize: {
+				classPropertyName: "iconSize",
+				publicName: "iconSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			compact: {
+				classPropertyName: "compact",
+				publicName: "compact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"class.lc-field-group--with-icon": "icon()",
+				"class.lc-field-group--compact": "compact()"
+			},
+			classAttribute: "lc-field-group"
+		},
+		ngImport: i0,
+		template: "@if (icon()) {\n  <lc-icon [name]=\"icon()!\" [size]=\"iconSize()\" class=\"lc-field-group__icon\"></lc-icon>\n}\n\n<div class=\"lc-field-group__content\">\n  <span class=\"lc-field-group__label\">{{ label() }}</span>\n  @if (value()) {\n    <p class=\"lc-field-group__value\">{{ value() }}</p>\n  } @else {\n    <div class=\"lc-field-group__value\">\n      <ng-content></ng-content>\n    </div>\n  }\n</div>\n",
+		styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border-radius:var(--border-radius-md);background:var(--color-surface);transition:background-color .2s ease}:host:hover{background:var(--color-surface-hover)}:host.lc-field-group--with-icon{flex-direction:row;align-items:flex-start;gap:1rem;padding:1.25rem}:host.lc-field-group--compact{padding:.75rem;gap:.25rem}:host.lc-field-group--compact.lc-field-group--with-icon{padding:.75rem 1rem;gap:.75rem}.lc-field-group__icon{color:var(--color-primary);flex-shrink:0;margin-top:.125rem}.lc-field-group__content{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.lc-field-group__label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);line-height:1.2}.lc-field-group__value{font-size:1rem;font-weight:500;color:var(--color-text-primary);margin:0;line-height:1.4;word-break:break-word}.lc-field-group__value:empty:after{content:\"\\2014\";color:var(--color-text-tertiary)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "lc-icon",
+			inputs: [
+				"name",
+				"variant",
+				"size",
+				"color",
+				"ariaLabel",
+				"decorative",
+				"strict"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FieldGroupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-field-group",
+			standalone: true,
+			imports: [IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "lc-field-group",
+				"[class.lc-field-group--with-icon]": "icon()",
+				"[class.lc-field-group--compact]": "compact()"
+			},
+			template: "@if (icon()) {\n  <lc-icon [name]=\"icon()!\" [size]=\"iconSize()\" class=\"lc-field-group__icon\"></lc-icon>\n}\n\n<div class=\"lc-field-group__content\">\n  <span class=\"lc-field-group__label\">{{ label() }}</span>\n  @if (value()) {\n    <p class=\"lc-field-group__value\">{{ value() }}</p>\n  } @else {\n    <div class=\"lc-field-group__value\">\n      <ng-content></ng-content>\n    </div>\n  }\n</div>\n",
+			styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border-radius:var(--border-radius-md);background:var(--color-surface);transition:background-color .2s ease}:host:hover{background:var(--color-surface-hover)}:host.lc-field-group--with-icon{flex-direction:row;align-items:flex-start;gap:1rem;padding:1.25rem}:host.lc-field-group--compact{padding:.75rem;gap:.25rem}:host.lc-field-group--compact.lc-field-group--with-icon{padding:.75rem 1rem;gap:.75rem}.lc-field-group__icon{color:var(--color-primary);flex-shrink:0;margin-top:.125rem}.lc-field-group__content{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}.lc-field-group__label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);line-height:1.2}.lc-field-group__value{font-size:1rem;font-weight:500;color:var(--color-text-primary);margin:0;line-height:1.4;word-break:break-word}.lc-field-group__value:empty:after{content:\"\\2014\";color:var(--color-text-tertiary)}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		iconSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconSize",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}]
+	}
+});
+export { FieldGroupComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-field-group.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-field-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-field-group.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/field-group/field-group.component.ts","../../../../libs/angular-ui-kit/src/lib/field-group/field-group.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\n/**\n * Field group component for displaying label-value pairs.\n *\n * Features:\n * - Consistent label-value layout for read-only data\n * - Optional leading icon from Tabler Icons\n * - Compact mode for dense layouts\n * - Content projection for custom value rendering\n * - Configurable icon size (xs, sm, md)\n *\n * @example\n * ```html\n * <lc-field-group label=\"Email\" value=\"user@example.com\" />\n * <lc-field-group label=\"Language\" value=\"English\" icon=\"globe-alt\" />\n * ```\n */\n@Component({\n  selector: 'lc-field-group',\n  standalone: true,\n  imports: [IconComponent],\n  templateUrl: './field-group.component.html',\n  styleUrls: ['./field-group.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'lc-field-group',\n    '[class.lc-field-group--with-icon]': 'icon()',\n    '[class.lc-field-group--compact]': 'compact()',\n  },\n})\nexport class FieldGroupComponent {\n  /**\n   * Label text displayed above the value\n   */\n  label = input.required<string>();\n\n  /**\n   * Value text to display (optional if using content projection)\n   */\n  value = input<string>();\n\n  /**\n   * Optional icon name from Tabler Icons\n   */\n  icon = input<string>();\n\n  /**\n   * Icon size\n   * @default 'sm'\n   */\n  iconSize = input<'xs' | 'sm' | 'md'>('sm');\n\n  /**\n   * Use compact styling with less padding\n   * @default false\n   */\n  compact = input<boolean>(false);\n}\n","@if (icon()) {\n  <lc-icon [name]=\"icon()!\" [size]=\"iconSize()\" class=\"lc-field-group__icon\"></lc-icon>\n}\n\n<div class=\"lc-field-group__content\">\n  <span class=\"lc-field-group__label\">{{ label() }}</span>\n  @if (value()) {\n    <p class=\"lc-field-group__value\">{{ value() }}</p>\n  } @else {\n    <div class=\"lc-field-group__value\">\n      <ng-content></ng-content>\n    </div>\n  }\n</div>\n"],"mappings":";;;AAgCA,IAAa,sBAAb,MAAa,oBAAmB;CAI9B,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAKhC,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAKvB,OAAO,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAMtB,WAAW,MAA0B,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAM1C,UAAU,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CA1BpB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAnB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAmB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,mCAAA;IAAA,iCAAA;GAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UChChC;EAcA,QAAA,CAAA,sgCAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDQY;GAAa,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAUZ,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAb/B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAgB,YACd;GAAI,SACP,CAAC,aAAa;GAAC,iBAGP,wBAAwB;GAAM,MACzC;IACJ,OAAO;IACP,qCAAqC;IACrC,mCAAmC;GACpC;GAAA,UAAA;GAAA,QAAA,CAAA,sgCAAA;EAAA,CAAA"}