@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-search-input.mjs

@@ -0,0 +1,290 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, effect, input, model, output, untracked, viewChild } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { Subject, debounce, distinctUntilChanged, filter, of, timer } from "rxjs";
+let nextUniqueId = 0;
+var SearchInputComponent = class SearchInputComponent {
+	inputId = input(`lc-search-input-${++nextUniqueId}`, ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
+	placeholder = input("Search…", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	debounceMs = input(300, ...ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	ariaLabelledBy = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []);
+	clearAriaLabel = input("Clear search", ...ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []);
+	value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	searchChange = output();
+	searchSubmit = output();
+	inputRef = viewChild("searchInputEl", ...ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []);
+	wrapperClasses = computed(() => {
+		return [
+			"search-input",
+			`search-input--${this.size()}`,
+			this.disabled() ? "search-input--disabled" : ""
+		].filter(Boolean).join(" ");
+	}, ...ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []);
+	input$ = new Subject();
+	lastPushed = "";
+	constructor() {
+		this.input$.pipe(debounce(({ immediate }) => {
+			const ms = this.debounceMs();
+			return immediate || ms <= 0 ? of(null) : timer(ms);
+		}), distinctUntilChanged((a, b) => a.value === b.value), filter(({ silent }) => !silent), takeUntilDestroyed()).subscribe(({ value }) => this.searchChange.emit(value));
+		effect(() => {
+			const value = this.value();
+			untracked(() => {
+				if (value !== this.lastPushed) this.push(value, {
+					immediate: true,
+					silent: true
+				});
+			});
+		});
+	}
+	onInput(event) {
+		const val = event.target.value;
+		this.value.set(val);
+		this.push(val, {
+			immediate: false,
+			silent: false
+		});
+	}
+	onKeydown(event) {
+		if (event.key === "Enter") this.searchSubmit.emit(this.value());
+	}
+	clear() {
+		this.value.set("");
+		this.push("", {
+			immediate: true,
+			silent: false
+		});
+		this.inputRef()?.nativeElement.focus();
+	}
+	push(value, opts) {
+		this.lastPushed = value;
+		this.input$.next({
+			value,
+			...opts
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SearchInputComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SearchInputComponent,
+		isStandalone: true,
+		selector: "lc-search-input",
+		inputs: {
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			debounceMs: {
+				classPropertyName: "debounceMs",
+				publicName: "debounceMs",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledBy: {
+				classPropertyName: "ariaLabelledBy",
+				publicName: "ariaLabelledBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearAriaLabel: {
+				classPropertyName: "clearAriaLabel",
+				publicName: "clearAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			searchChange: "searchChange",
+			searchSubmit: "searchSubmit"
+		},
+		viewQueries: [{
+			propertyName: "inputRef",
+			first: true,
+			predicate: ["searchInputEl"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div [class]=\"wrapperClasses()\">\n  <lc-icon name=\"magnifying-glass\" class=\"search-input__icon\" [decorative]=\"true\"></lc-icon>\n  <input\n    #searchInputEl\n    type=\"search\"\n    class=\"search-input__field\"\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    autocomplete=\"off\"\n    [attr.aria-label]=\"ariaLabelledBy() ? null : ariaLabel() || 'Search'\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n  />\n  @if (value()) {\n    <button\n      type=\"button\"\n      class=\"search-input__clear\"\n      (click)=\"clear()\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"disabled()\"\n    >\n      <lc-icon name=\"x-mark\" class=\"search-input__clear-icon\" [decorative]=\"true\"></lc-icon>\n    </button>\n  }\n</div>\n",
+		styles: [":host{display:block;width:100%}.search-input{display:flex;align-items:center;gap:.5rem;width:100%;background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:border-color .15s ease,box-shadow .15s ease}.search-input:hover:not(.search-input--disabled){border-color:var(--color-text-secondary)}.search-input:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 2px #20849733}.search-input--sm{padding:.375rem .625rem;font-size:.8125rem}.search-input--md{padding:.5rem .75rem;font-size:.875rem}.search-input--lg{padding:.625rem 1rem;font-size:1rem}.search-input--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.search-input__icon{flex-shrink:0;color:var(--color-text-tertiary);--icon-size: 1rem}.search-input__field{flex:1;border:none;outline:none;background:transparent;font:inherit;color:var(--color-text-primary);min-width:0}.search-input__field::placeholder{color:var(--color-text-tertiary)}.search-input__field::-webkit-search-cancel-button,.search-input__field::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.search-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;transition:background .15s ease}.search-input__clear:hover{background:var(--color-border-strong)}.search-input__clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.search-input__clear-icon{--icon-size: .75rem;color:var(--color-text-secondary)}\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: SearchInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-search-input",
+			standalone: true,
+			imports: [IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div [class]=\"wrapperClasses()\">\n  <lc-icon name=\"magnifying-glass\" class=\"search-input__icon\" [decorative]=\"true\"></lc-icon>\n  <input\n    #searchInputEl\n    type=\"search\"\n    class=\"search-input__field\"\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    autocomplete=\"off\"\n    [attr.aria-label]=\"ariaLabelledBy() ? null : ariaLabel() || 'Search'\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n  />\n  @if (value()) {\n    <button\n      type=\"button\"\n      class=\"search-input__clear\"\n      (click)=\"clear()\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"disabled()\"\n    >\n      <lc-icon name=\"x-mark\" class=\"search-input__clear-icon\" [decorative]=\"true\"></lc-icon>\n    </button>\n  }\n</div>\n",
+			styles: [":host{display:block;width:100%}.search-input{display:flex;align-items:center;gap:.5rem;width:100%;background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:border-color .15s ease,box-shadow .15s ease}.search-input:hover:not(.search-input--disabled){border-color:var(--color-text-secondary)}.search-input:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 2px #20849733}.search-input--sm{padding:.375rem .625rem;font-size:.8125rem}.search-input--md{padding:.5rem .75rem;font-size:.875rem}.search-input--lg{padding:.625rem 1rem;font-size:1rem}.search-input--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.search-input__icon{flex-shrink:0;color:var(--color-text-tertiary);--icon-size: 1rem}.search-input__field{flex:1;border:none;outline:none;background:transparent;font:inherit;color:var(--color-text-primary);min-width:0}.search-input__field::placeholder{color:var(--color-text-tertiary)}.search-input__field::-webkit-search-cancel-button,.search-input__field::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.search-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;transition:background .15s ease}.search-input__clear:hover{background:var(--color-border-strong)}.search-input__clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.search-input__clear-icon{--icon-size: .75rem;color:var(--color-text-secondary)}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		debounceMs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "debounceMs",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledBy",
+				required: false
+			}]
+		}],
+		clearAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearAriaLabel",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		searchChange: [{
+			type: i0.Output,
+			args: ["searchChange"]
+		}],
+		searchSubmit: [{
+			type: i0.Output,
+			args: ["searchSubmit"]
+		}],
+		inputRef: [{
+			type: i0.ViewChild,
+			args: ["searchInputEl", { isSignal: true }]
+		}]
+	}
+});
+export { SearchInputComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-search-input.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-search-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-search-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/search-input/search-input.component.ts","../../../../libs/angular-ui-kit/src/lib/search-input/search-input.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  input,\n  model,\n  output,\n  computed,\n  ElementRef,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { Subject, debounce, distinctUntilChanged, filter, of, timer } from 'rxjs';\n\nexport type SearchInputSize = 'sm' | 'md' | 'lg';\n\n/** A value travelling through the debounce pipe. */\ninterface SearchEmission {\n  readonly value: string;\n  /** Bypass the debounce (clear button, external writes). */\n  readonly immediate: boolean;\n  /** Only update the dedupe baseline, never reach `searchChange` (external writes). */\n  readonly silent: boolean;\n}\n\nlet nextUniqueId = 0;\n\n/**\n * Search input component with integrated search functionality.\n *\n * Features:\n * - Built-in search icon\n * - Clear button for resetting input\n * - RxJS-based configurable debounce\n * - Multiple size variants (sm, md, lg)\n * - Disabled state support\n * - Submit event on Enter key\n * - Two-way bindable `value` so a parent can preset or reset the query\n *\n * @example\n * ```html\n * <lc-search-input\n *   placeholder=\"Search...\"\n *   [debounceMs]=\"300\"\n *   [(value)]=\"query\"\n *   (searchChange)=\"onSearch($event)\"\n * ></lc-search-input>\n * ```\n */\n@Component({\n  selector: 'lc-search-input',\n  standalone: true,\n  imports: [IconComponent],\n  templateUrl: './search-input.component.html',\n  styleUrls: ['./search-input.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SearchInputComponent {\n  /**\n   * id of the native input (lets a parent `<label for>` point at it).\n   * @default generated\n   */\n  readonly inputId = input<string>(`lc-search-input-${++nextUniqueId}`);\n\n  /**\n   * Placeholder text.\n   * @default 'Search…'\n   */\n  placeholder = input<string>('Search…');\n\n  /**\n   * Size variant.\n   * @default 'md'\n   */\n  size = input<SearchInputSize>('md');\n\n  /**\n   * Debounce delay in milliseconds. 0 means no debounce.\n   * @default 300\n   */\n  debounceMs = input<number>(300);\n\n  /**\n   * Whether the search input is disabled.\n   * @default false\n   */\n  disabled = input<boolean>(false);\n\n  /**\n   * Accessible name of the input.\n   * @default 'Search'\n   */\n  readonly ariaLabel = input<string>();\n\n  /** id(s) of external element(s) labelling the input (wins over `ariaLabel`). */\n  readonly ariaLabelledBy = input<string>();\n\n  /** Accessible name of the clear button. */\n  readonly clearAriaLabel = input('Clear search');\n\n  /**\n   * Current query (two-way bindable). Writing it from outside updates the\n   * field without emitting `searchChange`; `valueChange` emits on every\n   * keystroke (undebounced) and on clear.\n   */\n  readonly value = model<string>('');\n\n  /**\n   * Emitted when the search value changes (debounced).\n   */\n  readonly searchChange = output<string>();\n\n  /**\n   * Emitted when the user presses Enter.\n   */\n  readonly searchSubmit = output<string>();\n\n  protected readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('searchInputEl');\n\n  protected wrapperClasses = computed(() => {\n    return [\n      'search-input',\n      `search-input--${this.size()}`,\n      this.disabled() ? 'search-input--disabled' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  private readonly input$ = new Subject<SearchEmission>();\n  /** Last value pushed into the pipe (by typing, clear or an external write). */\n  private lastPushed = '';\n\n  constructor() {\n    this.input$\n      .pipe(\n        // debounceMs is read per emission, so changing it takes effect immediately.\n        // 0 means \"no debounce\" — emit synchronously rather than on a 0ms timer.\n        debounce(({ immediate }) => {\n          const ms = this.debounceMs();\n          return immediate || ms <= 0 ? of(null) : timer(ms);\n        }),\n        distinctUntilChanged((a, b) => a.value === b.value),\n        filter(({ silent }) => !silent),\n        takeUntilDestroyed(),\n      )\n      .subscribe(({ value }) => this.searchChange.emit(value));\n\n    // A value written from outside is already known to the parent: run it through\n    // the pipe silently so it becomes the dedupe baseline (and cancels a pending\n    // debounce) without echoing a searchChange back.\n    effect(() => {\n      const value = this.value();\n      untracked(() => {\n        if (value !== this.lastPushed) {\n          this.push(value, { immediate: true, silent: true });\n        }\n      });\n    });\n  }\n\n  protected onInput(event: Event): void {\n    const val = (event.target as HTMLInputElement).value;\n    this.value.set(val);\n    this.push(val, { immediate: false, silent: false });\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      this.searchSubmit.emit(this.value());\n    }\n  }\n\n  protected clear(): void {\n    this.value.set('');\n    // immediate: emits '' synchronously through the pipe, exactly once\n    this.push('', { immediate: true, silent: false });\n    this.inputRef()?.nativeElement.focus();\n  }\n\n  private push(value: string, opts: Omit<SearchEmission, 'value'>): void {\n    this.lastPushed = value;\n    this.input$.next({ value, ...opts });\n  }\n}\n","<div [class]=\"wrapperClasses()\">\n  <lc-icon name=\"magnifying-glass\" class=\"search-input__icon\" [decorative]=\"true\"></lc-icon>\n  <input\n    #searchInputEl\n    type=\"search\"\n    class=\"search-input__field\"\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    autocomplete=\"off\"\n    [attr.aria-label]=\"ariaLabelledBy() ? null : ariaLabel() || 'Search'\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n  />\n  @if (value()) {\n    <button\n      type=\"button\"\n      class=\"search-input__clear\"\n      (click)=\"clear()\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"disabled()\"\n    >\n      <lc-icon name=\"x-mark\" class=\"search-input__clear-icon\" [decorative]=\"true\"></lc-icon>\n    </button>\n  }\n</div>\n"],"mappings":"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"}

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

@@ -0,0 +1,127 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostBinding, computed, input } from "@angular/core";
+var SectionComponent = class SectionComponent {
+	spacing = input("md", ...ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []);
+	background = input("none", ...ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []);
+	noPaddingX = input(false, ...ngDevMode ? [{ debugName: "noPaddingX" }] : /* istanbul ignore next */ []);
+	noPaddingY = input(false, ...ngDevMode ? [{ debugName: "noPaddingY" }] : /* istanbul ignore next */ []);
+	get hostClasses() {
+		return this.classes();
+	}
+	classes = computed(() => {
+		const classes = ["lc-section"];
+		classes.push(`section-spacing-${this.spacing()}`);
+		classes.push(`section-bg-${this.background()}`);
+		if (this.noPaddingX()) classes.push("section-no-padding-x");
+		if (this.noPaddingY()) classes.push("section-no-padding-y");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SectionComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: SectionComponent,
+		isStandalone: true,
+		selector: "lc-section",
+		inputs: {
+			spacing: {
+				classPropertyName: "spacing",
+				publicName: "spacing",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			background: {
+				classPropertyName: "background",
+				publicName: "background",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			noPaddingX: {
+				classPropertyName: "noPaddingX",
+				publicName: "noPaddingX",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			noPaddingY: {
+				classPropertyName: "noPaddingY",
+				publicName: "noPaddingY",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "this.hostClasses" } },
+		ngImport: i0,
+		template: "<ng-content></ng-content>\n",
+		styles: [":host{display:block;width:100%}.section-spacing-none{padding-block:0}.section-spacing-sm{padding-block:var(--lc-density-padding-md, 2rem)}.section-spacing-md{padding-block:var(--lc-density-padding-lg, 3rem)}.section-spacing-lg{padding-block:var(--lc-density-padding-xl, 4rem)}.section-spacing-xl{padding-block:calc(var(--lc-density-padding-xl, 4rem) * 1.5)}:host(:not(.section-no-padding-x)){padding-inline:var(--lc-density-padding-md, 1rem)}@media(min-width:640px){:host(:not(.section-no-padding-x)){padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){:host(:not(.section-no-padding-x)){padding-inline:var(--lc-density-padding-xl, 2rem)}}:host(.section-no-padding-y){padding-block:0}.section-bg-none{background-color:transparent}.section-bg-gray{background-color:var(--color-neutral-50)}.section-bg-primary{background-color:var(--color-primary-50)}.section-bg-secondary{background-color:var(--color-secondary-50)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SectionComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-section",
+			standalone: true,
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ng-content></ng-content>\n",
+			styles: [":host{display:block;width:100%}.section-spacing-none{padding-block:0}.section-spacing-sm{padding-block:var(--lc-density-padding-md, 2rem)}.section-spacing-md{padding-block:var(--lc-density-padding-lg, 3rem)}.section-spacing-lg{padding-block:var(--lc-density-padding-xl, 4rem)}.section-spacing-xl{padding-block:calc(var(--lc-density-padding-xl, 4rem) * 1.5)}:host(:not(.section-no-padding-x)){padding-inline:var(--lc-density-padding-md, 1rem)}@media(min-width:640px){:host(:not(.section-no-padding-x)){padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){:host(:not(.section-no-padding-x)){padding-inline:var(--lc-density-padding-xl, 2rem)}}:host(.section-no-padding-y){padding-block:0}.section-bg-none{background-color:transparent}.section-bg-gray{background-color:var(--color-neutral-50)}.section-bg-primary{background-color:var(--color-primary-50)}.section-bg-secondary{background-color:var(--color-secondary-50)}\n"]
+		}]
+	}],
+	propDecorators: {
+		spacing: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "spacing",
+				required: false
+			}]
+		}],
+		background: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "background",
+				required: false
+			}]
+		}],
+		noPaddingX: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noPaddingX",
+				required: false
+			}]
+		}],
+		noPaddingY: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noPaddingY",
+				required: false
+			}]
+		}],
+		hostClasses: [{
+			type: HostBinding,
+			args: ["class"]
+		}]
+	}
+});
+export { SectionComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-section.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-section.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/section/section.component.ts","../../../../libs/angular-ui-kit/src/lib/section/section.component.html"],"sourcesContent":["import { Component, input, computed, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n\nexport type SectionSpacing = 'none' | 'sm' | 'md' | 'lg' | 'xl';\nexport type SectionBackground = 'none' | 'gray' | 'primary' | 'secondary';\n\n@Component({\n  selector: 'lc-section',\n  standalone: true,\n  imports: [],\n  templateUrl: './section.component.html',\n  styleUrls: ['./section.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Section component for page content grouping with spacing and background.\n *\n * Features:\n * - Configurable vertical spacing (none, sm, md, lg, xl)\n * - Background color options (none, gray, primary, secondary)\n * - Independent horizontal and vertical padding control\n * - Density-aware: paddings come from `--lc-density-padding-*`, so a single\n *   `data-density` on an ancestor rescales every section on the page.\n * - No Tailwind dependency — styling lives in the component's own SCSS.\n *\n * @example\n * ```html\n * <lc-section spacing=\"lg\" background=\"gray\">Content</lc-section>\n * ```\n */\nexport class SectionComponent {\n  spacing = input<SectionSpacing>('md');\n  background = input<SectionBackground>('none');\n  noPaddingX = input<boolean>(false);\n  noPaddingY = input<boolean>(false);\n\n  @HostBinding('class')\n  get hostClasses(): string {\n    return this.classes();\n  }\n\n  classes = computed(() => {\n    const classes: string[] = ['lc-section'];\n\n    classes.push(`section-spacing-${this.spacing()}`);\n    classes.push(`section-bg-${this.background()}`);\n\n    if (this.noPaddingX()) classes.push('section-no-padding-x');\n    if (this.noPaddingY()) classes.push('section-no-padding-y');\n\n    return classes.join(' ');\n  });\n}\n","<ng-content></ng-content>\n"],"mappings":";;AA6BA,IAAa,mBAAb,MAAa,iBAAgB;CAC3B,UAAU,MAAsB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACrC,aAAa,MAAyB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAC7C,aAAa,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAClC,aAAa,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAElC,IACI,cAAW;EACb,OAAO,KAAK,QAAO;CACrB;CAEA,UAAU,eAAc;EACtB,MAAM,UAAoB,CAAC,YAAY;EAEvC,QAAQ,KAAK,mBAAmB,KAAK,QAAO,GAAI;EAChD,QAAQ,KAAK,cAAc,KAAK,WAAU,GAAI;EAE9C,IAAI,KAAK,WAAU,GAAI,QAAQ,KAAK,sBAAsB;EAC1D,IAAI,KAAK,WAAU,GAAI,QAAQ,KAAK,sBAAsB;EAE1D,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CArBS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAgB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAhB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAgB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,SAAA,mBAAA,EAAA;EAAA,UAAA;EAAA,UC7B7B;EACA,QAAA,CAAA,g7BAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AD4Ba,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgB,YAAA,CAAA;EAxB5B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAY,YACV;GAAI,SACP,CAAA;GAAE,iBAGM,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,g7BAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwB9C,MAAA;GAAY,MAAA,CAAA,OAAO"}