@lifecorner/angular-ui-kit 3.22.1 → 3.22.2

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

@@ -1,36 +1,38 @@
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+const SKELETON_DEFAULTS = {
+	line: {
+		w: "100%",
+		h: "0.875rem",
+		r: "0.25rem"
+	},
+	circle: {
+		w: "40px",
+		h: "40px",
+		r: "50%"
+	},
+	rect: {
+		w: "100%",
+		h: "100px",
+		r: "0.5rem"
+	}
+};
 var SkeletonComponent = class SkeletonComponent {
 	variant = input("line", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
 	width = input(...ngDevMode ? [void 0, { debugName: "width" }] : /* istanbul ignore next */ []);
 	height = input(...ngDevMode ? [void 0, { debugName: "height" }] : /* istanbul ignore next */ []);
 	borderRadius = input(...ngDevMode ? [void 0, { debugName: "borderRadius" }] : /* istanbul ignore next */ []);
 	variantClass = computed(() => `lc-skeleton--${this.variant()}`, ...ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []);
+	defaults = computed(() => SKELETON_DEFAULTS[this.variant()], ...ngDevMode ? [{ debugName: "defaults" }] : /* istanbul ignore next */ []);
 	styles = computed(() => {
-		const d = {
-			line: {
-				w: "100%",
-				h: "0.875rem",
-				r: "0.25rem"
-			},
-			circle: {
-				w: "40px",
-				h: "40px",
-				r: "50%"
-			},
-			rect: {
-				w: "100%",
-				h: "100px",
-				r: "0.5rem"
-			}
-		}[this.variant()];
+		const d = this.defaults();
 		return {
-			width: this.width() ?? d.w,
+			width: "100%",
 			height: this.height() ?? d.h,
 			"border-radius": this.borderRadius() ?? d.r
 		};
 	}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
-	hostWidth = computed(() => this.styles().width, ...ngDevMode ? [{ debugName: "hostWidth" }] : /* istanbul ignore next */ []);
+	hostWidth = computed(() => this.width() ?? this.defaults().w, ...ngDevMode ? [{ debugName: "hostWidth" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.2",

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

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-skeleton.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/skeleton/skeleton.component.ts","../../../../libs/angular-ui-kit/src/lib/skeleton/skeleton.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';\n\nexport type SkeletonVariant = 'line' | 'circle' | 'rect';\n\n/**\n * Skeleton loader component for placeholder loading states.\n *\n * Features:\n * - Variant shapes (text, rect, circle)\n * - Shimmer animation effect; a static fill under `prefers-reduced-motion`\n * - Colours from `--color-skeleton` / `--color-skeleton-highlight`, overridable\n *   with the `--lc-skeleton-bg` / `--lc-skeleton-highlight` hooks\n * - Custom width, height, and border radius\n * - `--lc-skeleton-height` hook: the height from CSS (a container query, `cqi`),\n *   winning over the `height` input; set it on the `lc-skeleton` element (on a\n *   wrapper it reaches every skeleton inside)\n * - Composable for building complex loading layouts\n * - Dark mode compatible\n *\n * @example\n * ```html\n * <lc-skeleton />\n * <lc-skeleton variant=\"circle\" width=\"40px\" height=\"40px\" />\n * <lc-skeleton variant=\"rect\" width=\"100%\" height=\"400px\" />\n * ```\n */\n@Component({\n  selector: 'lc-skeleton',\n  standalone: true,\n  templateUrl: './skeleton.component.html',\n  styleUrl: './skeleton.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // The host mirrors the box width so the skeleton sizes correctly inside\n    // flex layouts, and never shrinks below it.\n    '[style.width]': 'hostWidth()',\n    '[style.flex-shrink]': '\"0\"',\n  },\n})\nexport class SkeletonComponent {\n  /** Shape variant. */\n  readonly variant = input<SkeletonVariant>('line');\n\n  /** Width (CSS value). Defaults to '100%' for line/rect, '40px' for circle. */\n  readonly width = input<string>();\n\n  /**\n   * Height (CSS value). Defaults to '0.875rem' for line, '40px' for circle, '100px' for rect.\n   * The `--lc-skeleton-height` custom property, when set, wins over it.\n   */\n  readonly height = input<string>();\n\n  /** Border radius override (CSS value). */\n  readonly borderRadius = input<string>();\n\n  protected readonly variantClass = computed(() => `lc-skeleton--${this.variant()}`);\n\n  protected readonly styles = computed(() => {\n    const v = this.variant();\n    const defaults: Record<SkeletonVariant, { w: string; h: string; r: string }> = {\n      line: { w: '100%', h: '0.875rem', r: '0.25rem' },\n      circle: { w: '40px', h: '40px', r: '50%' },\n      rect: { w: '100%', h: '100px', r: '0.5rem' },\n    };\n    const d = defaults[v];\n    return {\n      width: this.width() ?? d.w,\n      height: this.height() ?? d.h,\n      'border-radius': this.borderRadius() ?? d.r,\n    };\n  });\n\n  protected readonly hostWidth = computed(() => this.styles().width);\n}\n","<div class=\"lc-skeleton\" [class]=\"variantClass()\" [style]=\"styles()\"></div>\n"],"mappings":";;AAuCA,IAAa,oBAAb,MAAa,kBAAiB;CAEnB,UAAU,MAAuB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGxC,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAMvB,SAAS,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAGxB,eAAe,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEpB,eAAe,eAAe,gBAAgB,KAAK,QAAO,KAAK,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAE/D,SAAS,eAAc;EAOxC,MAAM,IAAI;GAJR,MAAM;IAAE,GAAG;IAAQ,GAAG;IAAY,GAAG;GAAS;GAC9C,QAAQ;IAAE,GAAG;IAAQ,GAAG;IAAQ,GAAG;GAAK;GACxC,MAAM;IAAE,GAAG;IAAQ,GAAG;IAAS,GAAG;GAAQ;EAElC,EANA,KAAK,QAMI;EACnB,OAAO;GACL,OAAO,KAAK,MAAK,KAAM,EAAE;GACzB,QAAQ,KAAK,OAAM,KAAM,EAAE;GAC3B,iBAAiB,KAAK,aAAY,KAAM,EAAE;EAC3C;CACH,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,YAAY,eAAe,KAAK,OAAM,CAAE,CAAC,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAjCvD,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAiB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAjB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAiB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;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,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,eAAA;GAAA,qBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UCvC9B;EACA,QAAA,CAAA,8sBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADsCa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAb7B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,YACX;GAAI,iBAGC,wBAAwB;GAAM,MACzC;IAGJ,iBAAiB;IACjB,uBAAuB;GACxB;GAAA,UAAA;GAAA,QAAA,CAAA,8sBAAA;EAAA,CAAA"}
+{"version":3,"file":"lifecorner-angular-ui-kit-skeleton.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/skeleton/skeleton.component.ts","../../../../libs/angular-ui-kit/src/lib/skeleton/skeleton.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';\n\nexport type SkeletonVariant = 'line' | 'circle' | 'rect';\n\n/** Per-variant defaults: width (on the host), height and border radius (on the fill). */\nconst SKELETON_DEFAULTS: Record<SkeletonVariant, { w: string; h: string; r: string }> = {\n  line: { w: '100%', h: '0.875rem', r: '0.25rem' },\n  circle: { w: '40px', h: '40px', r: '50%' },\n  rect: { w: '100%', h: '100px', r: '0.5rem' },\n};\n\n/**\n * Skeleton loader component for placeholder loading states.\n *\n * Features:\n * - Variant shapes (text, rect, circle)\n * - Shimmer animation effect; a static fill under `prefers-reduced-motion`\n * - Colours from `--color-skeleton` / `--color-skeleton-highlight`, overridable\n *   with the `--lc-skeleton-bg` / `--lc-skeleton-highlight` hooks\n * - Custom width, height, and border radius\n * - `--lc-skeleton-height` hook: the height from CSS (a container query, `cqi`),\n *   winning over the `height` input; set it on the `lc-skeleton` element (on a\n *   wrapper it reaches every skeleton inside)\n * - Composable for building complex loading layouts\n * - Dark mode compatible\n *\n * @example\n * ```html\n * <lc-skeleton />\n * <lc-skeleton variant=\"circle\" width=\"40px\" height=\"40px\" />\n * <lc-skeleton variant=\"rect\" width=\"100%\" height=\"400px\" />\n * ```\n */\n@Component({\n  selector: 'lc-skeleton',\n  standalone: true,\n  templateUrl: './skeleton.component.html',\n  styleUrl: './skeleton.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // The host takes the width once, so the skeleton sizes correctly inside\n    // flex layouts and never shrinks below it; the fill spans it (3.22.2:\n    // before, the fill took the width again, so a percentage applied twice).\n    '[style.width]': 'hostWidth()',\n    '[style.flex-shrink]': '\"0\"',\n  },\n})\nexport class SkeletonComponent {\n  /**\n   * Shape variant.\n   * @default 'line'\n   */\n  readonly variant = input<SkeletonVariant>('line');\n\n  /**\n   * Width (CSS value), applied once, to the host: a percentage is a share of the\n   * containing block and the fill always spans the host (since 3.22.2; before, a\n   * percentage applied twice, so `30%` drew 9 %).\n   * @default '100%' for line and rect, '40px' for circle\n   */\n  readonly width = input<string>();\n\n  /**\n   * Height (CSS value). Defaults to '0.875rem' for line, '40px' for circle, '100px' for rect.\n   * The `--lc-skeleton-height` custom property, when set, wins over it.\n   * @default '0.875rem' for line, '40px' for circle, '100px' for rect\n   */\n  readonly height = input<string>();\n\n  /**\n   * Border radius override (CSS value).\n   * @default '0.25rem' for line, '50%' for circle, '0.5rem' for rect\n   */\n  readonly borderRadius = input<string>();\n\n  protected readonly variantClass = computed(() => `lc-skeleton--${this.variant()}`);\n\n  private readonly defaults = computed(() => SKELETON_DEFAULTS[this.variant()]);\n\n  /** The fill's inline styles: it always spans the host, which holds the width. */\n  protected readonly styles = computed(() => {\n    const d = this.defaults();\n    return {\n      width: '100%',\n      height: this.height() ?? d.h,\n      'border-radius': this.borderRadius() ?? d.r,\n    };\n  });\n\n  protected readonly hostWidth = computed(() => this.width() ?? this.defaults().w);\n}\n","<div class=\"lc-skeleton\" [class]=\"variantClass()\" [style]=\"styles()\"></div>\n"],"mappings":";;AAKA,MAAM,oBAAkF;CACtF,MAAM;EAAE,GAAG;EAAQ,GAAG;EAAY,GAAG;CAAS;CAC9C,QAAQ;EAAE,GAAG;EAAQ,GAAG;EAAQ,GAAG;CAAK;CACxC,MAAM;EAAE,GAAG;EAAQ,GAAG;EAAS,GAAG;CAAQ;AAC3C;AAsCD,IAAa,oBAAb,MAAa,kBAAiB;CAKnB,UAAU,MAAuB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAQxC,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAOvB,SAAS,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAMxB,eAAe,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEpB,eAAe,eAAe,gBAAgB,KAAK,QAAO,KAAK,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEjE,WAAW,eAAe,kBAAkB,KAAK,QAAO,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAG1D,SAAS,eAAc;EACxC,MAAM,IAAI,KAAK,SAAQ;EACvB,OAAO;GACL,OAAO;GACP,QAAQ,KAAK,OAAM,KAAM,EAAE;GAC3B,iBAAiB,KAAK,aAAY,KAAM,EAAE;EAC3C;CACH,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,YAAY,eAAe,KAAK,MAAK,KAAM,KAAK,SAAQ,CAAE,CAAC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CA1CrE,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAiB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAjB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAiB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;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,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,eAAA;GAAA,qBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UC/C9B;EACA,QAAA,CAAA,8sBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AD8Ca,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAd7B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,YACX;GAAI,iBAGC,wBAAwB;GAAM,MACzC;IAIJ,iBAAiB;IACjB,uBAAuB;GACxB;GAAA,UAAA;GAAA,QAAA,CAAA,8sBAAA;EAAA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifecorner/angular-ui-kit",
-  "version": "3.22.1",
+  "version": "3.22.2",
   "description": "LifeCorner Design System – Angular UI component library",
   "license": "MIT",
   "repository": {

package/types/lifecorner-angular-ui-kit-skeleton.d.ts

@@ -23,18 +23,32 @@ export type SkeletonVariant = 'line' | 'circle' | 'rect';
  * ```
  */
 export declare class SkeletonComponent {
-  /** Shape variant. */
+  /**
+   * Shape variant.
+   * @default 'line'
+   */
   readonly variant: import("@angular/core").InputSignal<SkeletonVariant>;
-  /** Width (CSS value). Defaults to '100%' for line/rect, '40px' for circle. */
+  /**
+   * Width (CSS value), applied once, to the host: a percentage is a share of the
+   * containing block and the fill always spans the host (since 3.22.2; before, a
+   * percentage applied twice, so `30%` drew 9 %).
+   * @default '100%' for line and rect, '40px' for circle
+   */
   readonly width: import("@angular/core").InputSignal<string | undefined>;
   /**
    * Height (CSS value). Defaults to '0.875rem' for line, '40px' for circle, '100px' for rect.
    * The `--lc-skeleton-height` custom property, when set, wins over it.
+   * @default '0.875rem' for line, '40px' for circle, '100px' for rect
    */
   readonly height: import("@angular/core").InputSignal<string | undefined>;
-  /** Border radius override (CSS value). */
+  /**
+   * Border radius override (CSS value).
+   * @default '0.25rem' for line, '50%' for circle, '0.5rem' for rect
+   */
   readonly borderRadius: import("@angular/core").InputSignal<string | undefined>;
   protected readonly variantClass: import("@angular/core").Signal<string>;
+  private readonly defaults;
+  /** The fill's inline styles: it always spans the host, which holds the width. */
   protected readonly styles: import("@angular/core").Signal<{
     width: string;
     height: string;