@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

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

@@ -0,0 +1,216 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, linkedSignal } from "@angular/core";
+const AVATAR_MEMBER_COLORS = [
+	"member-1",
+	"member-2",
+	"member-3",
+	"member-4",
+	"member-5",
+	"member-6"
+];
+var AvatarComponent = class AvatarComponent {
+	src = input(...ngDevMode ? [void 0, { debugName: "src" }] : /* istanbul ignore next */ []);
+	alt = input(...ngDevMode ? [void 0, { debugName: "alt" }] : /* istanbul ignore next */ []);
+	name = input(...ngDevMode ? [void 0, { debugName: "name" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	status = input(...ngDevMode ? [void 0, { debugName: "status" }] : /* istanbul ignore next */ []);
+	color = input("default", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	ring = input(false, ...ngDevMode ? [{ debugName: "ring" }] : /* istanbul ignore next */ []);
+	decorative = input(false, ...ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []);
+	initials = computed(() => {
+		const fullName = this.name();
+		if (!fullName || fullName.trim() === "") return "?";
+		const parts = fullName.trim().split(/\s+/).filter((p) => p.length > 0);
+		if (parts.length === 0) return "?";
+		if (parts.length === 1) return parts[0]?.[0]?.toUpperCase() ?? "?";
+		const firstInitial = parts[0]?.[0];
+		const lastInitial = parts[parts.length - 1]?.[0];
+		if (firstInitial && lastInitial) return (firstInitial + lastInitial).toUpperCase();
+		return "?";
+	}, ...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
+	avatarClasses = computed(() => {
+		const classes = ["lc-avatar"];
+		classes.push(`lc-avatar--${this.size()}`);
+		if (this.status()) classes.push("lc-avatar--with-status");
+		if (this.color() !== "default") classes.push("lc-avatar--member", `lc-avatar--${this.color()}`);
+		if (this.ring()) classes.push("lc-avatar--ring");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "avatarClasses" }] : /* istanbul ignore next */ []);
+	ariaLabel = computed(() => {
+		return this.alt() || this.name() || "Avatar";
+	}, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	showImage = computed(() => {
+		return this.src() && !this.imageError();
+	}, ...ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []);
+	imageError = linkedSignal({
+		...ngDevMode ? { debugName: "imageError" } : /* istanbul ignore next */ {},
+		source: this.src,
+		computation: () => false
+	});
+	onImageError() {
+		this.imageError.set(true);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: AvatarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: AvatarComponent,
+		isStandalone: true,
+		selector: "lc-avatar",
+		inputs: {
+			src: {
+				classPropertyName: "src",
+				publicName: "src",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			alt: {
+				classPropertyName: "alt",
+				publicName: "alt",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			status: {
+				classPropertyName: "status",
+				publicName: "status",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ring: {
+				classPropertyName: "ring",
+				publicName: "ring",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			decorative: {
+				classPropertyName: "decorative",
+				publicName: "decorative",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div \n  [class]=\"avatarClasses()\"\n  [attr.role]=\"decorative() ? null : 'img'\"\n  [attr.aria-label]=\"decorative() ? null : ariaLabel()\"\n  [attr.aria-hidden]=\"decorative() ? 'true' : null\"\n>\n  @if (showImage()) {\n    <img \n      [src]=\"src()!\" \n      [alt]=\"alt() || name() || 'Avatar'\" \n      class=\"lc-avatar__image\"\n      (error)=\"onImageError()\"\n    />\n  } @else {\n    <span class=\"lc-avatar__initials\">{{ initials() }}</span>\n  }\n\n  @if (status()) {\n    <span \n      class=\"lc-avatar__status lc-avatar__status--{{ status() }}\"\n      [attr.aria-label]=\"status() + ' status'\"\n    ></span>\n  }\n</div>\n",
+		styles: [".lc-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--color-surface-hover);color:var(--color-text-secondary);font-weight:var(--typography-font-weight-medium, 500);line-height:1;overflow:hidden;flex-shrink:0;-webkit-user-select:none;user-select:none}.lc-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:50%}.lc-avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:inherit;text-transform:uppercase}.lc-avatar__status{position:absolute;bottom:0;right:0;width:25%;height:25%;border-radius:50%;border:2px solid var(--color-surface)}.lc-avatar__status--online{background-color:var(--color-success)}.lc-avatar__status--offline{background-color:var(--color-text-tertiary)}.lc-avatar__status--away{background-color:var(--color-warning-500)}.lc-avatar__status--busy{background-color:var(--color-error-500)}.lc-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-avatar--xs .lc-avatar__status{width:.375rem;height:.375rem;border-width:1px}.lc-avatar--sm{width:2rem;height:2rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-avatar--sm .lc-avatar__status{width:.5rem;height:.5rem;border-width:1.5px}.lc-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--typography-font-size-base, 1rem)}.lc-avatar--md .lc-avatar__status{width:.625rem;height:.625rem;border-width:2px}.lc-avatar--lg{width:3rem;height:3rem;font-size:var(--typography-font-size-lg, 1.125rem)}.lc-avatar--lg .lc-avatar__status{width:.75rem;height:.75rem;border-width:2px}.lc-avatar--xl{width:4rem;height:4rem;font-size:var(--typography-font-size-xl, 1.25rem)}.lc-avatar--xl .lc-avatar__status{width:1rem;height:1rem;border-width:2px}.lc-avatar--member{color:var(--color-on-member, #ffffff);font-weight:var(--typography-font-weight-bold, 700);letter-spacing:.02em}.lc-avatar--member.lc-avatar--xs{font-size:.625rem}.lc-avatar--member.lc-avatar--sm{font-size:.75rem}.lc-avatar--member.lc-avatar--md{font-size:.875rem}.lc-avatar--member.lc-avatar--lg{font-size:1rem}.lc-avatar--member.lc-avatar--xl{font-size:1.25rem}.lc-avatar--member-1{background-color:var(--color-member-1, #1a6a79)}.lc-avatar--member-2{background-color:var(--color-member-2, #b04a22)}.lc-avatar--member-3{background-color:var(--color-member-3, #4e3f84)}.lc-avatar--member-4{background-color:var(--color-member-4, #5f7150)}.lc-avatar--member-5{background-color:var(--color-member-5, #9e3846)}.lc-avatar--member-6{background-color:var(--color-member-6, #5a798c)}.lc-avatar--ring{box-shadow:0 0 0 var(--lc-avatar-ring-width, 3px) var(--lc-avatar-ring-color, var(--color-background))}.lc-avatar--ring.lc-avatar--xs,.lc-avatar--ring.lc-avatar--sm{box-shadow:0 0 0 var(--lc-avatar-ring-width, 2px) var(--lc-avatar-ring-color, var(--color-background))}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: AvatarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-avatar",
+			standalone: true,
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div \n  [class]=\"avatarClasses()\"\n  [attr.role]=\"decorative() ? null : 'img'\"\n  [attr.aria-label]=\"decorative() ? null : ariaLabel()\"\n  [attr.aria-hidden]=\"decorative() ? 'true' : null\"\n>\n  @if (showImage()) {\n    <img \n      [src]=\"src()!\" \n      [alt]=\"alt() || name() || 'Avatar'\" \n      class=\"lc-avatar__image\"\n      (error)=\"onImageError()\"\n    />\n  } @else {\n    <span class=\"lc-avatar__initials\">{{ initials() }}</span>\n  }\n\n  @if (status()) {\n    <span \n      class=\"lc-avatar__status lc-avatar__status--{{ status() }}\"\n      [attr.aria-label]=\"status() + ' status'\"\n    ></span>\n  }\n</div>\n",
+			styles: [".lc-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--color-surface-hover);color:var(--color-text-secondary);font-weight:var(--typography-font-weight-medium, 500);line-height:1;overflow:hidden;flex-shrink:0;-webkit-user-select:none;user-select:none}.lc-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:50%}.lc-avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:inherit;text-transform:uppercase}.lc-avatar__status{position:absolute;bottom:0;right:0;width:25%;height:25%;border-radius:50%;border:2px solid var(--color-surface)}.lc-avatar__status--online{background-color:var(--color-success)}.lc-avatar__status--offline{background-color:var(--color-text-tertiary)}.lc-avatar__status--away{background-color:var(--color-warning-500)}.lc-avatar__status--busy{background-color:var(--color-error-500)}.lc-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-avatar--xs .lc-avatar__status{width:.375rem;height:.375rem;border-width:1px}.lc-avatar--sm{width:2rem;height:2rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-avatar--sm .lc-avatar__status{width:.5rem;height:.5rem;border-width:1.5px}.lc-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--typography-font-size-base, 1rem)}.lc-avatar--md .lc-avatar__status{width:.625rem;height:.625rem;border-width:2px}.lc-avatar--lg{width:3rem;height:3rem;font-size:var(--typography-font-size-lg, 1.125rem)}.lc-avatar--lg .lc-avatar__status{width:.75rem;height:.75rem;border-width:2px}.lc-avatar--xl{width:4rem;height:4rem;font-size:var(--typography-font-size-xl, 1.25rem)}.lc-avatar--xl .lc-avatar__status{width:1rem;height:1rem;border-width:2px}.lc-avatar--member{color:var(--color-on-member, #ffffff);font-weight:var(--typography-font-weight-bold, 700);letter-spacing:.02em}.lc-avatar--member.lc-avatar--xs{font-size:.625rem}.lc-avatar--member.lc-avatar--sm{font-size:.75rem}.lc-avatar--member.lc-avatar--md{font-size:.875rem}.lc-avatar--member.lc-avatar--lg{font-size:1rem}.lc-avatar--member.lc-avatar--xl{font-size:1.25rem}.lc-avatar--member-1{background-color:var(--color-member-1, #1a6a79)}.lc-avatar--member-2{background-color:var(--color-member-2, #b04a22)}.lc-avatar--member-3{background-color:var(--color-member-3, #4e3f84)}.lc-avatar--member-4{background-color:var(--color-member-4, #5f7150)}.lc-avatar--member-5{background-color:var(--color-member-5, #9e3846)}.lc-avatar--member-6{background-color:var(--color-member-6, #5a798c)}.lc-avatar--ring{box-shadow:0 0 0 var(--lc-avatar-ring-width, 3px) var(--lc-avatar-ring-color, var(--color-background))}.lc-avatar--ring.lc-avatar--xs,.lc-avatar--ring.lc-avatar--sm{box-shadow:0 0 0 var(--lc-avatar-ring-width, 2px) var(--lc-avatar-ring-color, var(--color-background))}\n"]
+		}]
+	}],
+	propDecorators: {
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}],
+		alt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "alt",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		status: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "status",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		ring: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ring",
+				required: false
+			}]
+		}],
+		decorative: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "decorative",
+				required: false
+			}]
+		}]
+	}
+});
+export { AVATAR_MEMBER_COLORS, AvatarComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-avatar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-avatar.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/avatar/avatar.component.ts","../../../../libs/angular-ui-kit/src/lib/avatar/avatar.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, computed, linkedSignal } from '@angular/core';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';\n\n/**\n * Background of the initials. `default` is the neutral kit avatar; `member-1`\n * … `member-6` are the member colours (`--color-member-1` … `-6`: teal, rust,\n * violet, sage, berry, slate) with white initials, each at least 4.5:1.\n * Assign them per person in a stable order (e.g. join order) and always show\n * the name or initials beside the colour — colour is never the only cue.\n */\nexport type AvatarColor =\n  | 'default'\n  | 'member-1'\n  | 'member-2'\n  | 'member-3'\n  | 'member-4'\n  | 'member-5'\n  | 'member-6';\n\n/** The six member colours in their order (`AvatarColor` without `default`). */\nexport const AVATAR_MEMBER_COLORS: readonly AvatarColor[] = [\n  'member-1',\n  'member-2',\n  'member-3',\n  'member-4',\n  'member-5',\n  'member-6',\n];\n\n/**\n * Avatar component for circular user representation.\n *\n * Features:\n * - Image display with fallback to initials\n * - Auto-generated initials from user name\n * - Status indicator (online, offline, busy, away)\n * - Multiple size variants (xs, sm, md, lg, xl)\n * - Member colours (`color`: `member-1` … `member-6`) with white initials\n * - `ring`: a gap in the page colour around the avatar, for stacks and for\n *   avatars on images or tints\n * - Accessible with alt text support\n *\n * @example\n * ```html\n * <lc-avatar src=\"https://example.com/avatar.jpg\" alt=\"John Doe\" />\n * <lc-avatar name=\"John Doe\" status=\"online\" size=\"lg\" />\n * <lc-avatar name=\"Tom Ek\" color=\"member-2\" [ring]=\"true\" />\n * ```\n */\n@Component({\n  selector: 'lc-avatar',\n  standalone: true,\n  imports: [],\n  templateUrl: './avatar.component.html',\n  styleUrl: './avatar.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarComponent {\n  /** Image source URL */\n  src = input<string>();\n\n  /** Alt text for the image */\n  alt = input<string>();\n\n  /** Full name for generating initials */\n  name = input<string>();\n\n  /** Size of the avatar */\n  size = input<AvatarSize>('md');\n\n  /** Status indicator */\n  status = input<AvatarStatus>();\n\n  /**\n   * Background of the initials: `default` (neutral) or a member colour\n   * `member-1` … `member-6` with white initials (LK-7).\n   */\n  color = input<AvatarColor>('default');\n\n  /**\n   * Draw a ring in the page colour around the avatar (3 px; 2 px for `xs` and\n   * `sm`), so stacked or overlapping avatars stay apart. The ring colour is\n   * `--lc-avatar-ring-color` (default `--color-background`); set it to the\n   * surface the avatar sits on.\n   */\n  ring = input<boolean>(false);\n\n  /**\n   * Hide the avatar from assistive technology (no `img` role, no label), for\n   * avatars inside a control that has its own accessible name — e.g. a menu\n   * button labelled \"Menu for Tom Ek\".\n   */\n  decorative = input<boolean>(false);\n\n  /**\n   * Computed initials from name\n   */\n  initials = computed(() => {\n    const fullName = this.name();\n    if (!fullName || fullName.trim() === '') {\n      return '?';\n    }\n\n    const parts = fullName\n      .trim()\n      .split(/\\s+/)\n      .filter((p) => p.length > 0);\n\n    if (parts.length === 0) {\n      return '?';\n    }\n\n    if (parts.length === 1) {\n      return parts[0]?.[0]?.toUpperCase() ?? '?';\n    }\n\n    // First and last name initials\n    const firstInitial = parts[0]?.[0];\n    const lastInitial = parts[parts.length - 1]?.[0];\n\n    if (firstInitial && lastInitial) {\n      return (firstInitial + lastInitial).toUpperCase();\n    }\n    return '?';\n  });\n\n  /**\n   * Computed CSS classes for the avatar\n   */\n  avatarClasses = computed(() => {\n    const classes = ['lc-avatar'];\n\n    classes.push(`lc-avatar--${this.size()}`);\n\n    if (this.status()) {\n      classes.push('lc-avatar--with-status');\n    }\n\n    if (this.color() !== 'default') {\n      classes.push('lc-avatar--member', `lc-avatar--${this.color()}`);\n    }\n\n    if (this.ring()) {\n      classes.push('lc-avatar--ring');\n    }\n\n    return classes.join(' ');\n  });\n\n  /**\n   * Get aria-label for accessibility\n   */\n  ariaLabel = computed(() => {\n    return this.alt() || this.name() || 'Avatar';\n  });\n\n  /**\n   * Check if image should be displayed\n   */\n  showImage = computed(() => {\n    return this.src() && !this.imageError();\n  });\n\n  /**\n   * Track if image failed to load. Resets whenever `src` changes so a new\n   * image gets a fresh attempt instead of staying stuck on the initials.\n   */\n  protected imageError = linkedSignal<string | undefined, boolean>({\n    source: this.src,\n    computation: () => false,\n  });\n\n  /**\n   * Handle image load error\n   */\n  onImageError(): void {\n    this.imageError.set(true);\n  }\n}\n","<div \n  [class]=\"avatarClasses()\"\n  [attr.role]=\"decorative() ? null : 'img'\"\n  [attr.aria-label]=\"decorative() ? null : ariaLabel()\"\n  [attr.aria-hidden]=\"decorative() ? 'true' : null\"\n>\n  @if (showImage()) {\n    <img \n      [src]=\"src()!\" \n      [alt]=\"alt() || name() || 'Avatar'\" \n      class=\"lc-avatar__image\"\n      (error)=\"onImageError()\"\n    />\n  } @else {\n    <span class=\"lc-avatar__initials\">{{ initials() }}</span>\n  }\n\n  @if (status()) {\n    <span \n      class=\"lc-avatar__status lc-avatar__status--{{ status() }}\"\n      [attr.aria-label]=\"status() + ' status'\"\n    ></span>\n  }\n</div>\n"],"mappings":"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"}

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

@@ -0,0 +1,121 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from "@angular/core";
+var BadgeComponent = class BadgeComponent {
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	rounded = input(false, ...ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []);
+	dot = input(false, ...ngDevMode ? [{ debugName: "dot" }] : /* istanbul ignore next */ []);
+	badgeClasses = computed(() => {
+		const classes = ["lc-badge"];
+		classes.push(`lc-badge--${this.variant()}`);
+		classes.push(`lc-badge--${this.size()}`);
+		if (this.rounded()) classes.push("lc-badge--rounded");
+		if (this.dot()) classes.push("lc-badge--has-dot");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "badgeClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: BadgeComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: BadgeComponent,
+		isStandalone: true,
+		selector: "lc-badge",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rounded: {
+				classPropertyName: "rounded",
+				publicName: "rounded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dot: {
+				classPropertyName: "dot",
+				publicName: "dot",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<span [class]=\"badgeClasses()\">\n  @if (dot()) {\n    <span class=\"lc-badge__dot\" aria-hidden=\"true\"></span>\n  }\n  <ng-content></ng-content>\n</span>\n",
+		styles: [".lc-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--typography-font-weight-medium, 500);line-height:1;border-radius:var(--border-radius-sm, .25rem);white-space:nowrap;transition:background-color .15s ease,color .15s ease}.lc-badge--xs{padding:.125rem .375rem;font-size:var(--typography-font-size-xs, .75rem);min-width:1.25rem;height:1.25rem}.lc-badge--sm{padding:.25rem .5rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.5rem;height:1.5rem}.lc-badge--md{padding:.375rem .625rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.75rem;height:1.75rem}.lc-badge--lg{padding:.5rem .75rem;font-size:var(--typography-font-size-base, 1rem);min-width:2rem;height:2rem}.lc-badge{background-color:var(--lc-badge-bg);color:var(--lc-badge-fg);border:1px solid var(--lc-badge-border, transparent)}.lc-badge--default{--lc-badge-bg: var(--color-surface-hover);--lc-badge-fg: var(--color-text-secondary);--lc-badge-border: var(--color-border)}.lc-badge--primary{--lc-badge-bg: var(--color-primary-subtle);--lc-badge-fg: var(--color-on-primary-subtle);--lc-badge-border: var(--color-border-strong)}.lc-badge--success{--lc-badge-bg: var(--color-success-subtle);--lc-badge-fg: var(--color-on-success-subtle);--lc-badge-border: rgba(142, 164, 117, .4)}.lc-badge--warning{--lc-badge-bg: var(--color-warning-subtle);--lc-badge-fg: var(--color-on-warning-subtle);--lc-badge-border: rgba(225, 160, 64, .4)}.lc-badge--error{--lc-badge-bg: var(--color-error-subtle);--lc-badge-fg: var(--color-on-error-subtle);--lc-badge-border: rgba(157, 14, 14, .4)}.lc-badge--info{--lc-badge-bg: var(--color-info-subtle);--lc-badge-fg: var(--color-on-info-subtle);--lc-badge-border: rgba(59, 101, 136, .42)}.lc-badge--rounded{border-radius:var(--border-radius-full, 9999px)}.lc-badge__dot{flex-shrink:0;width:.5em;height:.5em;margin-right:.4em;border-radius:var(--border-radius-full, 9999px);background-color:currentColor}@media(max-width:640px){.lc-badge--lg{padding:.5rem .875rem}}@media print{.lc-badge{border:1px solid currentColor}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BadgeComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-badge",
+			standalone: true,
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			template: "<span [class]=\"badgeClasses()\">\n  @if (dot()) {\n    <span class=\"lc-badge__dot\" aria-hidden=\"true\"></span>\n  }\n  <ng-content></ng-content>\n</span>\n",
+			styles: [".lc-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--typography-font-weight-medium, 500);line-height:1;border-radius:var(--border-radius-sm, .25rem);white-space:nowrap;transition:background-color .15s ease,color .15s ease}.lc-badge--xs{padding:.125rem .375rem;font-size:var(--typography-font-size-xs, .75rem);min-width:1.25rem;height:1.25rem}.lc-badge--sm{padding:.25rem .5rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.5rem;height:1.5rem}.lc-badge--md{padding:.375rem .625rem;font-size:var(--typography-font-size-sm, .875rem);min-width:1.75rem;height:1.75rem}.lc-badge--lg{padding:.5rem .75rem;font-size:var(--typography-font-size-base, 1rem);min-width:2rem;height:2rem}.lc-badge{background-color:var(--lc-badge-bg);color:var(--lc-badge-fg);border:1px solid var(--lc-badge-border, transparent)}.lc-badge--default{--lc-badge-bg: var(--color-surface-hover);--lc-badge-fg: var(--color-text-secondary);--lc-badge-border: var(--color-border)}.lc-badge--primary{--lc-badge-bg: var(--color-primary-subtle);--lc-badge-fg: var(--color-on-primary-subtle);--lc-badge-border: var(--color-border-strong)}.lc-badge--success{--lc-badge-bg: var(--color-success-subtle);--lc-badge-fg: var(--color-on-success-subtle);--lc-badge-border: rgba(142, 164, 117, .4)}.lc-badge--warning{--lc-badge-bg: var(--color-warning-subtle);--lc-badge-fg: var(--color-on-warning-subtle);--lc-badge-border: rgba(225, 160, 64, .4)}.lc-badge--error{--lc-badge-bg: var(--color-error-subtle);--lc-badge-fg: var(--color-on-error-subtle);--lc-badge-border: rgba(157, 14, 14, .4)}.lc-badge--info{--lc-badge-bg: var(--color-info-subtle);--lc-badge-fg: var(--color-on-info-subtle);--lc-badge-border: rgba(59, 101, 136, .42)}.lc-badge--rounded{border-radius:var(--border-radius-full, 9999px)}.lc-badge__dot{flex-shrink:0;width:.5em;height:.5em;margin-right:.4em;border-radius:var(--border-radius-full, 9999px);background-color:currentColor}@media(max-width:640px){.lc-badge--lg{padding:.5rem .875rem}}@media print{.lc-badge{border:1px solid currentColor}}\n"]
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		rounded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rounded",
+				required: false
+			}]
+		}],
+		dot: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dot",
+				required: false
+			}]
+		}]
+	}
+});
+export { BadgeComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-badge.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-badge.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/badge/badge.component.ts","../../../../libs/angular-ui-kit/src/lib/badge/badge.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, computed } from '@angular/core';\n\nexport type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';\nexport type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * Badge component for displaying status, notifications, or counts.\n *\n * Features:\n * - Semantic color variants (primary, secondary, success, warning, error, info, neutral)\n * - Multiple size options (xs, sm, md, lg)\n * - Pill-shaped rounded mode\n * - Content projection for labels or count values\n *\n * @example\n * ```html\n * <lc-badge variant=\"primary\" size=\"md\">New</lc-badge>\n * <lc-badge variant=\"error\" size=\"sm\" [rounded]=\"true\">5</lc-badge>\n * ```\n */\n@Component({\n  selector: 'lc-badge',\n  standalone: true,\n  imports: [],\n  templateUrl: './badge.component.html',\n  styleUrl: './badge.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None, // Required for dynamic variant class styling\n})\nexport class BadgeComponent {\n  /** Visual variant of the badge */\n  variant = input<BadgeVariant>('default');\n\n  /** Size of the badge */\n  size = input<BadgeSize>('md');\n\n  /** Whether the badge has fully rounded corners (pill shape) */\n  rounded = input<boolean>(false);\n\n  /**\n   * Render a small leading status dot, filled in the variant's `currentColor`,\n   * before the label (the \"● label\" pattern). Purely additive.\n   * @default false\n   */\n  dot = input<boolean>(false);\n\n  /**\n   * Computed CSS classes for the badge\n   */\n  badgeClasses = computed(() => {\n    const classes = ['lc-badge'];\n\n    classes.push(`lc-badge--${this.variant()}`);\n    classes.push(`lc-badge--${this.size()}`);\n\n    if (this.rounded()) {\n      classes.push('lc-badge--rounded');\n    }\n\n    if (this.dot()) {\n      classes.push('lc-badge--has-dot');\n    }\n\n    return classes.join(' ');\n  });\n}\n","<span [class]=\"badgeClasses()\">\n  @if (dot()) {\n    <span class=\"lc-badge__dot\" aria-hidden=\"true\"></span>\n  }\n  <ng-content></ng-content>\n</span>\n"],"mappings":";;AA6BA,IAAa,iBAAb,MAAa,eAAc;CAEzB,UAAU,MAAoB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGxC,OAAO,MAAiB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAG7B,UAAU,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAO/B,MAAM,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAK3B,eAAe,eAAc;EAC3B,MAAM,UAAU,CAAC,UAAU;EAE3B,QAAQ,KAAK,aAAa,KAAK,QAAO,GAAI;EAC1C,QAAQ,KAAK,aAAa,KAAK,KAAI,GAAI;EAEvC,IAAI,KAAK,QAAO,GACd,QAAQ,KAAK,mBAAmB;EAGlC,IAAI,KAAK,IAAG,GACV,QAAQ,KAAK,mBAAmB;EAGlC,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAnCS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAc,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAd,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAc,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;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,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UC7B3B;EAMA,QAAA,CAAA,ohEAAA;EAAA,iBAAA,GAAA,wBAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;ADuBa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAc,YAAA,CAAA;EAT1B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAU,YACR;GAAI,SACP,CAAA;GAAE,iBAGM,wBAAwB;GAAM,eAChC,kBAAkB;GAAI,UAAA;GAAA,QAAA,CAAA,ohEAAA;EAAA,CAAA"}