@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-popover.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/popover/popover.component.ts","../../../../libs/angular-ui-kit/src/lib/popover/popover.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  output,\n  signal,\n  computed,\n  effect,\n  untracked,\n  afterRenderEffect,\n  ElementRef,\n  HostListener,\n  Renderer2,\n  inject,\n  OnDestroy,\n} from '@angular/core';\nimport { OverlayStackService } from '@lifecorner/angular-ui-kit/internal/overlay';\n\nexport type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type PopoverTrigger = 'click' | 'hover';\n\n/** Natively focusable elements a projected trigger may be or contain. */\nconst INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, [tabindex]';\n\n/**\n * Popover component for displaying rich floating content.\n *\n * Features:\n * - Position options (top, bottom, left, right)\n * - Click or hover trigger modes\n * - Optional arrow indicator\n * - Click-outside and Escape to close (top-most overlay only)\n * - Open state change event\n * - Content projection for trigger and body\n *\n * @example\n * ```html\n * <lc-popover position=\"bottom\" trigger=\"click\">\n *   <button popover-trigger>Open</button>\n *   <div popover-content>Rich content here</div>\n * </lc-popover>\n * ```\n */\n@Component({\n  selector: 'lc-popover',\n  standalone: true,\n  templateUrl: './popover.component.html',\n  styleUrls: ['./popover.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PopoverComponent implements OnDestroy {\n  private static nextId = 0;\n  /** Identifies this instance in the overlay stack. */\n  private readonly overlayId = `lc-popover-${++PopoverComponent.nextId}`;\n\n  /**\n   * Position relative to the trigger element.\n   * @default 'bottom'\n   */\n  position = input<PopoverPosition>('bottom');\n\n  /**\n   * How the popover is triggered.\n   * @default 'click'\n   */\n  trigger = input<PopoverTrigger>('click');\n\n  /**\n   * Whether to show an arrow pointing at the trigger.\n   * @default true\n   */\n  showArrow = input<boolean>(true);\n\n  /**\n   * Emitted when the popover opens or closes.\n   */\n  readonly openChange = output<boolean>();\n\n  protected isOpen = signal(false);\n\n  /** Id of the panel, referenced by the trigger's `aria-controls`. */\n  protected readonly panelId = `${this.overlayId}-panel`;\n\n  protected panelClasses = computed(() => {\n    return [\n      'popover__panel',\n      `popover__panel--${this.position()}`,\n      this.showArrow() ? 'popover__panel--arrow' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly renderer = inject(Renderer2);\n  private readonly overlayStack = inject(OverlayStackService);\n\n  constructor() {\n    effect(() => {\n      const open = this.isOpen();\n      untracked(() => {\n        if (open) {\n          this.overlayStack.push(this.overlayId);\n        } else {\n          this.overlayStack.remove(this.overlayId);\n        }\n      });\n    });\n\n    // Mirror the open state onto the projected trigger so assistive tech knows\n    // it controls a popup (the trigger is caller-supplied, so we set the\n    // attributes rather than bind them).\n    afterRenderEffect(() => {\n      const open = this.isOpen();\n      const trigger = this.triggerElement();\n      if (!trigger) return;\n      this.renderer.setAttribute(trigger, 'aria-haspopup', 'dialog');\n      this.renderer.setAttribute(trigger, 'aria-expanded', String(open));\n      if (open) {\n        this.renderer.setAttribute(trigger, 'aria-controls', this.panelId);\n      } else {\n        this.renderer.removeAttribute(trigger, 'aria-controls');\n      }\n    });\n  }\n\n  /**\n   * Click outside closes the popover — only while it is the top-most overlay,\n   * so a click inside a layer above it (a modal opened from the popover) is\n   * left alone.\n   */\n  @HostListener('document:click', ['$event'])\n  onDocumentClick(event: MouseEvent): void {\n    if (!this.isOpen() || this.trigger() !== 'click') return;\n    const el = this.elementRef.nativeElement;\n    if (el.contains(event.target as Node)) return;\n    if (!this.overlayStack.claim(this.overlayId, event)) return;\n    this.close();\n  }\n\n  /**\n   * Escape closes the popover only while it is the top-most overlay; the event\n   * is consumed so overlays underneath stay open.\n   */\n  @HostListener('document:keydown.escape', ['$event'])\n  onEscape(event: Event): void {\n    if (!this.isOpen()) return;\n    if (!this.overlayStack.claim(this.overlayId, event)) return;\n    event.stopPropagation();\n    this.close();\n  }\n\n  ngOnDestroy(): void {\n    this.overlayStack.remove(this.overlayId);\n  }\n\n  protected toggle(): void {\n    if (this.isOpen()) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  protected open(): void {\n    this.isOpen.set(true);\n    this.openChange.emit(true);\n  }\n\n  protected close(): void {\n    this.restoreFocus();\n    this.isOpen.set(false);\n    this.openChange.emit(false);\n  }\n\n  protected onMouseEnter(): void {\n    if (this.trigger() === 'hover') {\n      this.open();\n    }\n  }\n\n  protected onMouseLeave(): void {\n    if (this.trigger() === 'hover') {\n      this.close();\n    }\n  }\n\n  /**\n   * The element that carries the popup ARIA attributes and receives focus back:\n   * the projected `[popover-trigger]` node itself when it is natively\n   * interactive, otherwise the first interactive element inside it (e.g. the\n   * `<button>` inside an `<lc-button popover-trigger>`).\n   */\n  private triggerElement(): HTMLElement | null {\n    const slot = this.elementRef.nativeElement.querySelector<HTMLElement>('[popover-trigger]');\n    if (!slot) return null;\n    return slot.matches(INTERACTIVE_SELECTOR)\n      ? slot\n      : (slot.querySelector<HTMLElement>(INTERACTIVE_SELECTOR) ?? slot);\n  }\n\n  /**\n   * Closing removes the panel from the DOM; if focus is inside it (Escape after\n   * tabbing in) it would silently drop to `<body>`, so send it back to the trigger.\n   */\n  private restoreFocus(): void {\n    if (typeof document === 'undefined') return;\n    const panel = this.elementRef.nativeElement.querySelector<HTMLElement>('.popover__panel');\n    if (panel?.contains(document.activeElement)) {\n      this.triggerElement()?.focus();\n    }\n  }\n}\n","<div\n  class=\"popover\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- the projected trigger is the focusable control; its click bubbles here -->\n  <div class=\"popover__trigger\" (click)=\"trigger() === 'click' ? toggle() : null\">\n    <ng-content select=\"[popover-trigger]\"></ng-content>\n  </div>\n  @if (isOpen()) {\n    <div [id]=\"panelId\" [class]=\"panelClasses()\" role=\"dialog\" aria-modal=\"false\">\n      <ng-content select=\"[popover-content]\"></ng-content>\n    </div>\n  }\n</div>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-progress-bar.mjs

@@ -0,0 +1,190 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+var ProgressBarComponent = class ProgressBarComponent {
+	value = input(0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	color = input("primary", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	variant = input("linear", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	showLabel = input(false, ...ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []);
+	inline = input(false, ...ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []);
+	indeterminate = input(false, ...ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Progress", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	clampedValue = computed(() => Math.max(0, Math.min(100, this.value())), ...ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []);
+	barClasses = computed(() => {
+		return [
+			"progress-bar",
+			`progress-bar--${this.color()}`,
+			`progress-bar--${this.size()}`,
+			this.indeterminate() ? "progress-bar--indeterminate" : ""
+		].filter(Boolean).join(" ");
+	}, ...ngDevMode ? [{ debugName: "barClasses" }] : /* istanbul ignore next */ []);
+	circleRadius = 40;
+	circleCircumference = 2 * Math.PI * 40;
+	strokeDashoffset = computed(() => {
+		return this.circleCircumference * (1 - this.clampedValue() / 100);
+	}, ...ngDevMode ? [{ debugName: "strokeDashoffset" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ProgressBarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ProgressBarComponent,
+		isStandalone: true,
+		selector: "lc-progress-bar",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLabel: {
+				classPropertyName: "showLabel",
+				publicName: "showLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inline: {
+				classPropertyName: "inline",
+				publicName: "inline",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			indeterminate: {
+				classPropertyName: "indeterminate",
+				publicName: "indeterminate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class.lc-progress-bar--inline": "inline()" } },
+		ngImport: i0,
+		template: "@if (variant() === 'linear') {\n  <div\n    [class]=\"barClasses()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    <div class=\"progress-bar__track\">\n      <div\n        class=\"progress-bar__fill\"\n        [style.width.%]=\"indeterminate() ? 0 : clampedValue()\"\n      ></div>\n    </div>\n    @if (showLabel() && !indeterminate()) {\n      <span class=\"progress-bar__label\">{{ clampedValue() }}%</span>\n    }\n  </div>\n} @else {\n  <div\n    class=\"progress-bar-circular\"\n    [class]=\"'progress-bar-circular progress-bar-circular--' + color() + ' progress-bar-circular--' + size()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    <svg viewBox=\"0 0 100 100\" class=\"progress-bar-circular__svg\">\n      <circle\n        class=\"progress-bar-circular__track\"\n        cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n        fill=\"none\"\n      />\n      <circle\n        class=\"progress-bar-circular__fill\"\n        cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n        fill=\"none\"\n        [attr.stroke-dasharray]=\"circleCircumference\"\n        [attr.stroke-dashoffset]=\"indeterminate() ? circleCircumference * 0.75 : strokeDashoffset()\"\n        [class.progress-bar-circular__fill--indeterminate]=\"indeterminate()\"\n      />\n    </svg>\n    @if (showLabel() && !indeterminate()) {\n      <span class=\"progress-bar-circular__label\">{{ clampedValue() }}%</span>\n    }\n  </div>\n}\n",
+		styles: [":host{display:block;width:100%}:host(.lc-progress-bar--inline){display:inline-flex;width:var(--lc-progress-bar-inline-width, 5rem);vertical-align:middle}.progress-bar{display:flex;align-items:center;gap:.75rem;width:100%}.progress-bar__track{flex:1;background-color:var(--color-surface-hover);border-radius:var(--border-radius-full);overflow:hidden}.progress-bar__fill{height:100%;border-radius:var(--border-radius-full);transition:width .3s ease-in-out}.progress-bar__label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);min-width:2.5rem;text-align:right}.progress-bar--xs .progress-bar__track{height:var(--lc-progress-bar-height, .125rem)}.progress-bar--sm .progress-bar__track{height:var(--lc-progress-bar-height, .25rem)}.progress-bar--md .progress-bar__track{height:var(--lc-progress-bar-height, .5rem)}.progress-bar--lg .progress-bar__track{height:var(--lc-progress-bar-height, .75rem)}.progress-bar--primary .progress-bar__fill{background-color:#208497}.progress-bar--secondary .progress-bar__fill{background-color:#7097af}.progress-bar--success .progress-bar__fill{background-color:#8ea475}.progress-bar--warning .progress-bar__fill{background-color:#e1a040}.progress-bar--error .progress-bar__fill{background-color:#9d0e0e}.progress-bar--info .progress-bar__fill{background-color:#3b6588}.progress-bar--indeterminate .progress-bar__fill{width:40%!important;animation:progress-indeterminate 1.5s ease-in-out infinite}@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}.progress-bar-circular{position:relative;display:inline-flex;align-items:center;justify-content:center}.progress-bar-circular__svg{transform:rotate(-90deg)}.progress-bar-circular__track{stroke:var(--color-surface-hover)}.progress-bar-circular__fill{transition:stroke-dashoffset .3s ease-in-out;stroke-linecap:round}.progress-bar-circular__fill--indeterminate{animation:circular-indeterminate 1.5s linear infinite;transform-origin:center}.progress-bar-circular__label{position:absolute;font-weight:700;color:var(--color-text-primary)}.progress-bar-circular--xs{width:2rem;height:2rem}.progress-bar-circular--xs .progress-bar-circular__track,.progress-bar-circular--xs .progress-bar-circular__fill{stroke-width:8}.progress-bar-circular--xs .progress-bar-circular__label{font-size:.5rem}.progress-bar-circular--sm{width:3rem;height:3rem}.progress-bar-circular--sm .progress-bar-circular__track,.progress-bar-circular--sm .progress-bar-circular__fill{stroke-width:7}.progress-bar-circular--sm .progress-bar-circular__label{font-size:.625rem}.progress-bar-circular--md{width:4.5rem;height:4.5rem}.progress-bar-circular--md .progress-bar-circular__track,.progress-bar-circular--md .progress-bar-circular__fill{stroke-width:6}.progress-bar-circular--md .progress-bar-circular__label{font-size:.8125rem}.progress-bar-circular--lg{width:6rem;height:6rem}.progress-bar-circular--lg .progress-bar-circular__track,.progress-bar-circular--lg .progress-bar-circular__fill{stroke-width:5}.progress-bar-circular--lg .progress-bar-circular__label{font-size:1rem}.progress-bar-circular--primary .progress-bar-circular__fill{stroke:#208497}.progress-bar-circular--secondary .progress-bar-circular__fill{stroke:#7097af}.progress-bar-circular--success .progress-bar-circular__fill{stroke:#8ea475}.progress-bar-circular--warning .progress-bar-circular__fill{stroke:#e1a040}.progress-bar-circular--error .progress-bar-circular__fill{stroke:#9d0e0e}.progress-bar-circular--info .progress-bar-circular__fill{stroke:#3b6588}@keyframes circular-indeterminate{to{transform:rotate(360deg)}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ProgressBarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-progress-bar",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[class.lc-progress-bar--inline]": "inline()" },
+			template: "@if (variant() === 'linear') {\n  <div\n    [class]=\"barClasses()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    <div class=\"progress-bar__track\">\n      <div\n        class=\"progress-bar__fill\"\n        [style.width.%]=\"indeterminate() ? 0 : clampedValue()\"\n      ></div>\n    </div>\n    @if (showLabel() && !indeterminate()) {\n      <span class=\"progress-bar__label\">{{ clampedValue() }}%</span>\n    }\n  </div>\n} @else {\n  <div\n    class=\"progress-bar-circular\"\n    [class]=\"'progress-bar-circular progress-bar-circular--' + color() + ' progress-bar-circular--' + size()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    <svg viewBox=\"0 0 100 100\" class=\"progress-bar-circular__svg\">\n      <circle\n        class=\"progress-bar-circular__track\"\n        cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n        fill=\"none\"\n      />\n      <circle\n        class=\"progress-bar-circular__fill\"\n        cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n        fill=\"none\"\n        [attr.stroke-dasharray]=\"circleCircumference\"\n        [attr.stroke-dashoffset]=\"indeterminate() ? circleCircumference * 0.75 : strokeDashoffset()\"\n        [class.progress-bar-circular__fill--indeterminate]=\"indeterminate()\"\n      />\n    </svg>\n    @if (showLabel() && !indeterminate()) {\n      <span class=\"progress-bar-circular__label\">{{ clampedValue() }}%</span>\n    }\n  </div>\n}\n",
+			styles: [":host{display:block;width:100%}:host(.lc-progress-bar--inline){display:inline-flex;width:var(--lc-progress-bar-inline-width, 5rem);vertical-align:middle}.progress-bar{display:flex;align-items:center;gap:.75rem;width:100%}.progress-bar__track{flex:1;background-color:var(--color-surface-hover);border-radius:var(--border-radius-full);overflow:hidden}.progress-bar__fill{height:100%;border-radius:var(--border-radius-full);transition:width .3s ease-in-out}.progress-bar__label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);min-width:2.5rem;text-align:right}.progress-bar--xs .progress-bar__track{height:var(--lc-progress-bar-height, .125rem)}.progress-bar--sm .progress-bar__track{height:var(--lc-progress-bar-height, .25rem)}.progress-bar--md .progress-bar__track{height:var(--lc-progress-bar-height, .5rem)}.progress-bar--lg .progress-bar__track{height:var(--lc-progress-bar-height, .75rem)}.progress-bar--primary .progress-bar__fill{background-color:#208497}.progress-bar--secondary .progress-bar__fill{background-color:#7097af}.progress-bar--success .progress-bar__fill{background-color:#8ea475}.progress-bar--warning .progress-bar__fill{background-color:#e1a040}.progress-bar--error .progress-bar__fill{background-color:#9d0e0e}.progress-bar--info .progress-bar__fill{background-color:#3b6588}.progress-bar--indeterminate .progress-bar__fill{width:40%!important;animation:progress-indeterminate 1.5s ease-in-out infinite}@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}.progress-bar-circular{position:relative;display:inline-flex;align-items:center;justify-content:center}.progress-bar-circular__svg{transform:rotate(-90deg)}.progress-bar-circular__track{stroke:var(--color-surface-hover)}.progress-bar-circular__fill{transition:stroke-dashoffset .3s ease-in-out;stroke-linecap:round}.progress-bar-circular__fill--indeterminate{animation:circular-indeterminate 1.5s linear infinite;transform-origin:center}.progress-bar-circular__label{position:absolute;font-weight:700;color:var(--color-text-primary)}.progress-bar-circular--xs{width:2rem;height:2rem}.progress-bar-circular--xs .progress-bar-circular__track,.progress-bar-circular--xs .progress-bar-circular__fill{stroke-width:8}.progress-bar-circular--xs .progress-bar-circular__label{font-size:.5rem}.progress-bar-circular--sm{width:3rem;height:3rem}.progress-bar-circular--sm .progress-bar-circular__track,.progress-bar-circular--sm .progress-bar-circular__fill{stroke-width:7}.progress-bar-circular--sm .progress-bar-circular__label{font-size:.625rem}.progress-bar-circular--md{width:4.5rem;height:4.5rem}.progress-bar-circular--md .progress-bar-circular__track,.progress-bar-circular--md .progress-bar-circular__fill{stroke-width:6}.progress-bar-circular--md .progress-bar-circular__label{font-size:.8125rem}.progress-bar-circular--lg{width:6rem;height:6rem}.progress-bar-circular--lg .progress-bar-circular__track,.progress-bar-circular--lg .progress-bar-circular__fill{stroke-width:5}.progress-bar-circular--lg .progress-bar-circular__label{font-size:1rem}.progress-bar-circular--primary .progress-bar-circular__fill{stroke:#208497}.progress-bar-circular--secondary .progress-bar-circular__fill{stroke:#7097af}.progress-bar-circular--success .progress-bar-circular__fill{stroke:#8ea475}.progress-bar-circular--warning .progress-bar-circular__fill{stroke:#e1a040}.progress-bar-circular--error .progress-bar-circular__fill{stroke:#9d0e0e}.progress-bar-circular--info .progress-bar-circular__fill{stroke:#3b6588}@keyframes circular-indeterminate{to{transform:rotate(360deg)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		showLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLabel",
+				required: false
+			}]
+		}],
+		inline: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inline",
+				required: false
+			}]
+		}],
+		indeterminate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "indeterminate",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { ProgressBarComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-progress-bar.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-progress-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-progress-bar.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/progress-bar/progress-bar.component.ts","../../../../libs/angular-ui-kit/src/lib/progress-bar/progress-bar.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n} from '@angular/core';\n\nexport type ProgressBarColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';\nexport type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ProgressBarVariant = 'linear' | 'circular';\n\n/**\n * Progress bar component for displaying completion status.\n *\n * Features:\n * - Linear and circular progress variants\n * - Color theme options (primary, secondary, success, warning, error)\n * - Multiple size presets (xs, sm, md, lg)\n * - Animated value transitions\n * - Accessible with ARIA progressbar role\n *\n * @example\n * ```html\n * <lc-progress-bar [value]=\"75\" color=\"primary\" size=\"md\"></lc-progress-bar>\n * <lc-progress-bar [value]=\"50\" variant=\"circular\" color=\"success\"></lc-progress-bar>\n *\n * <!-- thin bar inside a list row: fixed width, flows with the line -->\n * <lc-progress-bar [value]=\"60\" size=\"sm\" [inline]=\"true\"\n *                  style=\"--lc-progress-bar-height: 6px\"></lc-progress-bar>\n * ```\n */\n@Component({\n  selector: 'lc-progress-bar',\n  standalone: true,\n  templateUrl: './progress-bar.component.html',\n  styleUrls: ['./progress-bar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.lc-progress-bar--inline]': 'inline()',\n  },\n})\nexport class ProgressBarComponent {\n  /**\n   * Progress value between 0 and 100.\n   * @default 0\n   */\n  value = input<number>(0);\n\n  /**\n   * Color theme.\n   * @default 'primary'\n   */\n  color = input<ProgressBarColor>('primary');\n\n  /**\n   * Height/thickness of the bar.\n   * @default 'md'\n   */\n  size = input<ProgressBarSize>('md');\n\n  /**\n   * Visual variant.\n   * @default 'linear'\n   */\n  variant = input<ProgressBarVariant>('linear');\n\n  /**\n   * Whether to show the percentage label.\n   * @default false\n   */\n  showLabel = input<boolean>(false);\n\n  /**\n   * Inline mode for list rows: the bar flows with the surrounding line at a\n   * fixed width instead of filling its container. Width is settable via\n   * `--lc-progress-bar-inline-width` (default 5rem), the track height via\n   * `--lc-progress-bar-height` (e.g. 6px), which also works in block mode.\n   * @default false\n   */\n  inline = input<boolean>(false);\n\n  /**\n   * Whether the progress is indeterminate (animated, no fixed value).\n   * @default false\n   */\n  indeterminate = input<boolean>(false);\n\n  /**\n   * Accessible label for screen readers.\n   */\n  ariaLabel = input<string>('Progress');\n\n  protected clampedValue = computed(() => Math.max(0, Math.min(100, this.value())));\n\n  protected barClasses = computed(() => {\n    return [\n      'progress-bar',\n      `progress-bar--${this.color()}`,\n      `progress-bar--${this.size()}`,\n      this.indeterminate() ? 'progress-bar--indeterminate' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  // Circular variant helpers\n  protected readonly circleRadius = 40;\n  protected readonly circleCircumference = 2 * Math.PI * 40;\n\n  protected strokeDashoffset = computed(() => {\n    return this.circleCircumference * (1 - this.clampedValue() / 100);\n  });\n}\n","@if (variant() === 'linear') {\n  <div\n    [class]=\"barClasses()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    <div class=\"progress-bar__track\">\n      <div\n        class=\"progress-bar__fill\"\n        [style.width.%]=\"indeterminate() ? 0 : clampedValue()\"\n      ></div>\n    </div>\n    @if (showLabel() && !indeterminate()) {\n      <span class=\"progress-bar__label\">{{ clampedValue() }}%</span>\n    }\n  </div>\n} @else {\n  <div\n    class=\"progress-bar-circular\"\n    [class]=\"'progress-bar-circular progress-bar-circular--' + color() + ' progress-bar-circular--' + size()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    <svg viewBox=\"0 0 100 100\" class=\"progress-bar-circular__svg\">\n      <circle\n        class=\"progress-bar-circular__track\"\n        cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n        fill=\"none\"\n      />\n      <circle\n        class=\"progress-bar-circular__fill\"\n        cx=\"50\" cy=\"50\" [attr.r]=\"circleRadius\"\n        fill=\"none\"\n        [attr.stroke-dasharray]=\"circleCircumference\"\n        [attr.stroke-dashoffset]=\"indeterminate() ? circleCircumference * 0.75 : strokeDashoffset()\"\n        [class.progress-bar-circular__fill--indeterminate]=\"indeterminate()\"\n      />\n    </svg>\n    @if (showLabel() && !indeterminate()) {\n      <span class=\"progress-bar-circular__label\">{{ clampedValue() }}%</span>\n    }\n  </div>\n}\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-progress-ring.mjs

@@ -0,0 +1,175 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+var ProgressRingComponent = class ProgressRingComponent {
+	value = input(0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	color = input("primary", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	showValue = input(true, ...ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []);
+	showLabel = input(void 0, ...ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Progress", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	SIZE_MAP = {
+		xs: 32,
+		sm: 48,
+		md: 64,
+		lg: 96
+	};
+	STROKE_MAP = {
+		xs: 3,
+		sm: 4,
+		md: 5,
+		lg: 7
+	};
+	svgSize = computed(() => this.SIZE_MAP[this.size()], ...ngDevMode ? [{ debugName: "svgSize" }] : /* istanbul ignore next */ []);
+	strokeW = computed(() => this.STROKE_MAP[this.size()], ...ngDevMode ? [{ debugName: "strokeW" }] : /* istanbul ignore next */ []);
+	viewBox = computed(() => `0 0 ${this.svgSize()} ${this.svgSize()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
+	center = computed(() => this.svgSize() / 2, ...ngDevMode ? [{ debugName: "center" }] : /* istanbul ignore next */ []);
+	radius = computed(() => (this.svgSize() - this.strokeW() * 2) / 2, ...ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []);
+	circumference = computed(() => 2 * Math.PI * this.radius(), ...ngDevMode ? [{ debugName: "circumference" }] : /* istanbul ignore next */ []);
+	clampedValue = computed(() => Math.min(Math.max(this.value(), 0), 100), ...ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []);
+	shouldShowValue = computed(() => this.showLabel() ?? this.showValue(), ...ngDevMode ? [{ debugName: "shouldShowValue" }] : /* istanbul ignore next */ []);
+	dashOffset = computed(() => {
+		const c = this.circumference();
+		return c - this.clampedValue() / 100 * c;
+	}, ...ngDevMode ? [{ debugName: "dashOffset" }] : /* istanbul ignore next */ []);
+	fontSize = computed(() => {
+		return {
+			xs: "0.5rem",
+			sm: "0.625rem",
+			md: "0.875rem",
+			lg: "1.25rem"
+		}[this.size()];
+	}, ...ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []);
+	displayValue = computed(() => `${Math.round(this.clampedValue())}%`, ...ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ProgressRingComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ProgressRingComponent,
+		isStandalone: true,
+		selector: "lc-progress-ring",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showValue: {
+				classPropertyName: "showValue",
+				publicName: "showValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLabel: {
+				classPropertyName: "showLabel",
+				publicName: "showLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<svg\n  [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\"\n  class=\"lc-progress-ring\"\n  role=\"progressbar\"\n  [attr.aria-valuenow]=\"clampedValue()\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <circle\n    [attr.cx]=\"center()\" [attr.cy]=\"center()\" [attr.r]=\"radius()\"\n    [attr.stroke-width]=\"strokeW()\"\n    fill=\"none\" class=\"lc-progress-ring__track\"\n  />\n  <circle\n    [attr.cx]=\"center()\" [attr.cy]=\"center()\" [attr.r]=\"radius()\"\n    [attr.stroke-width]=\"strokeW()\"\n    [attr.stroke-dasharray]=\"circumference()\" [attr.stroke-dashoffset]=\"dashOffset()\"\n    fill=\"none\" stroke-linecap=\"round\"\n    [class]=\"'lc-progress-ring__value lc-progress-ring__value--' + color()\"\n    [attr.transform]=\"'rotate(-90 ' + center() + ' ' + center() + ')'\"\n  />\n  @if (shouldShowValue()) {\n    <text [attr.x]=\"center()\" [attr.y]=\"center()\" text-anchor=\"middle\" dominant-baseline=\"central\" class=\"lc-progress-ring__text\" [style.font-size]=\"fontSize()\">\n      {{ displayValue() }}\n    </text>\n  }\n</svg>\n",
+		styles: [":host{display:inline-flex}.lc-progress-ring{overflow:visible}.lc-progress-ring__track{stroke:var(--color-surface-hover)}.lc-progress-ring__value{transition:stroke-dashoffset .4s ease}.lc-progress-ring__value--primary{stroke:var(--color-primary-500)}.lc-progress-ring__value--secondary{stroke:var(--color-secondary-500)}.lc-progress-ring__value--success{stroke:var(--color-success-default)}.lc-progress-ring__value--warning{stroke:var(--color-warning-default)}.lc-progress-ring__value--error{stroke:var(--color-error-default)}.lc-progress-ring__value--info{stroke:var(--color-info-default)}.lc-progress-ring__text{font-weight:700;fill:var(--color-text-primary)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ProgressRingComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-progress-ring",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<svg\n  [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\"\n  class=\"lc-progress-ring\"\n  role=\"progressbar\"\n  [attr.aria-valuenow]=\"clampedValue()\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <circle\n    [attr.cx]=\"center()\" [attr.cy]=\"center()\" [attr.r]=\"radius()\"\n    [attr.stroke-width]=\"strokeW()\"\n    fill=\"none\" class=\"lc-progress-ring__track\"\n  />\n  <circle\n    [attr.cx]=\"center()\" [attr.cy]=\"center()\" [attr.r]=\"radius()\"\n    [attr.stroke-width]=\"strokeW()\"\n    [attr.stroke-dasharray]=\"circumference()\" [attr.stroke-dashoffset]=\"dashOffset()\"\n    fill=\"none\" stroke-linecap=\"round\"\n    [class]=\"'lc-progress-ring__value lc-progress-ring__value--' + color()\"\n    [attr.transform]=\"'rotate(-90 ' + center() + ' ' + center() + ')'\"\n  />\n  @if (shouldShowValue()) {\n    <text [attr.x]=\"center()\" [attr.y]=\"center()\" text-anchor=\"middle\" dominant-baseline=\"central\" class=\"lc-progress-ring__text\" [style.font-size]=\"fontSize()\">\n      {{ displayValue() }}\n    </text>\n  }\n</svg>\n",
+			styles: [":host{display:inline-flex}.lc-progress-ring{overflow:visible}.lc-progress-ring__track{stroke:var(--color-surface-hover)}.lc-progress-ring__value{transition:stroke-dashoffset .4s ease}.lc-progress-ring__value--primary{stroke:var(--color-primary-500)}.lc-progress-ring__value--secondary{stroke:var(--color-secondary-500)}.lc-progress-ring__value--success{stroke:var(--color-success-default)}.lc-progress-ring__value--warning{stroke:var(--color-warning-default)}.lc-progress-ring__value--error{stroke:var(--color-error-default)}.lc-progress-ring__value--info{stroke:var(--color-info-default)}.lc-progress-ring__text{font-weight:700;fill:var(--color-text-primary)}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		showValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValue",
+				required: false
+			}]
+		}],
+		showLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLabel",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { ProgressRingComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-progress-ring.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-progress-ring.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-progress-ring.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/progress-ring/progress-ring.component.ts","../../../../libs/angular-ui-kit/src/lib/progress-ring/progress-ring.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n} from '@angular/core';\n\nexport type ProgressRingColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';\nexport type ProgressRingSize = 'xs' | 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'lc-progress-ring',\n  standalone: true,\n  templateUrl: './progress-ring.component.html',\n  styleUrls: ['./progress-ring.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Progress ring component for circular progress indication.\n *\n * Features:\n * - Circular SVG progress arc (0–100%)\n * - Color theme variants (primary, secondary, success, warning, error)\n * - Size presets (xs, sm, md, lg)\n * - Optional percentage value display\n * - Animated stroke transitions\n * - Accessible `progressbar` role with `aria-valuenow` and a configurable label\n *\n * @example\n * ```html\n * <lc-progress-ring [value]=\"65\" color=\"success\" [showValue]=\"true\" />\n * ```\n */\nexport class ProgressRingComponent {\n  /** Value between 0 and 100. */\n  value = input<number>(0);\n\n  /** Color theme. */\n  color = input<ProgressRingColor>('primary');\n\n  /** Size preset. */\n  size = input<ProgressRingSize>('md');\n\n  /** Show percentage text in center. */\n  showValue = input<boolean>(true);\n\n  /**\n   * Alias of `showValue`, named like `lc-progress-bar`'s `showLabel`. When\n   * set it wins over `showValue`.\n   */\n  showLabel = input<boolean | undefined>(undefined);\n\n  /** Accessible name of the progress ring. */\n  ariaLabel = input<string>('Progress');\n\n  private readonly SIZE_MAP: Record<ProgressRingSize, number> = { xs: 32, sm: 48, md: 64, lg: 96 };\n  private readonly STROKE_MAP: Record<ProgressRingSize, number> = { xs: 3, sm: 4, md: 5, lg: 7 };\n\n  protected readonly svgSize = computed(() => this.SIZE_MAP[this.size()]);\n  protected readonly strokeW = computed(() => this.STROKE_MAP[this.size()]);\n  protected readonly viewBox = computed(() => `0 0 ${this.svgSize()} ${this.svgSize()}`);\n  protected readonly center = computed(() => this.svgSize() / 2);\n  protected readonly radius = computed(() => (this.svgSize() - this.strokeW() * 2) / 2);\n  protected readonly circumference = computed(() => 2 * Math.PI * this.radius());\n\n  /** `value` clamped to the 0–100 range (drives arc, text and ARIA). */\n  protected readonly clampedValue = computed(() => Math.min(Math.max(this.value(), 0), 100));\n\n  protected readonly shouldShowValue = computed(() => this.showLabel() ?? this.showValue());\n\n  protected readonly dashOffset = computed(() => {\n    const c = this.circumference();\n    return c - (this.clampedValue() / 100) * c;\n  });\n\n  protected readonly fontSize = computed(() => {\n    const map: Record<ProgressRingSize, string> = { xs: '0.5rem', sm: '0.625rem', md: '0.875rem', lg: '1.25rem' };\n    return map[this.size()];\n  });\n\n  protected readonly displayValue = computed(() => `${Math.round(this.clampedValue())}%`);\n}\n","<svg\n  [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\"\n  class=\"lc-progress-ring\"\n  role=\"progressbar\"\n  [attr.aria-valuenow]=\"clampedValue()\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [attr.aria-label]=\"ariaLabel()\"\n>\n  <circle\n    [attr.cx]=\"center()\" [attr.cy]=\"center()\" [attr.r]=\"radius()\"\n    [attr.stroke-width]=\"strokeW()\"\n    fill=\"none\" class=\"lc-progress-ring__track\"\n  />\n  <circle\n    [attr.cx]=\"center()\" [attr.cy]=\"center()\" [attr.r]=\"radius()\"\n    [attr.stroke-width]=\"strokeW()\"\n    [attr.stroke-dasharray]=\"circumference()\" [attr.stroke-dashoffset]=\"dashOffset()\"\n    fill=\"none\" stroke-linecap=\"round\"\n    [class]=\"'lc-progress-ring__value lc-progress-ring__value--' + color()\"\n    [attr.transform]=\"'rotate(-90 ' + center() + ' ' + center() + ')'\"\n  />\n  @if (shouldShowValue()) {\n    <text [attr.x]=\"center()\" [attr.y]=\"center()\" text-anchor=\"middle\" dominant-baseline=\"central\" class=\"lc-progress-ring__text\" [style.font-size]=\"fontSize()\">\n      {{ displayValue() }}\n    </text>\n  }\n</svg>\n"],"mappings":";;AAiCA,IAAa,wBAAb,MAAa,sBAAqB;CAEhC,QAAQ,MAAc,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGxB,QAAQ,MAAyB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAG3C,OAAO,MAAwB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAGpC,YAAY,MAAe,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAMhC,YAAY,MAA2B,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGjD,YAAY,MAAc,YAAW,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEpB,WAA6C;EAAE,IAAI;EAAI,IAAI;EAAI,IAAI;EAAI,IAAI;CAAE;CAC7E,aAA+C;EAAE,IAAI;EAAG,IAAI;EAAG,IAAI;EAAG,IAAI;CAAC;CAEzE,UAAU,eAAe,KAAK,SAAS,KAAK,KAAI,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACpD,UAAU,eAAe,KAAK,WAAW,KAAK,KAAI,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACtD,UAAU,eAAe,OAAO,KAAK,QAAO,EAAE,GAAI,KAAK,QAAO,KAAK,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACnE,SAAS,eAAe,KAAK,QAAO,IAAK,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAC3C,SAAS,gBAAgB,KAAK,QAAO,IAAK,KAAK,QAAO,IAAK,KAAK,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAClE,gBAAgB,eAAe,IAAI,KAAK,KAAK,KAAK,OAAM,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAG3D,eAAe,eAAe,KAAK,IAAI,KAAK,IAAI,KAAK,MAAK,GAAI,CAAC,GAAG,GAAG,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEvE,kBAAkB,eAAe,KAAK,UAAS,KAAM,KAAK,UAAS,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CAEtE,aAAa,eAAc;EAC5C,MAAM,IAAI,KAAK,cAAa;EAC5B,OAAO,IAAK,KAAK,aAAY,IAAK,MAAO;CAC3C,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,WAAW,eAAc;EAE1C,OAAO;GADyC,IAAI;GAAU,IAAI;GAAY,IAAI;GAAY,IAAI;EAC3F,EAAI,KAAK,KAAI;CACtB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,eAAe,eAAe,GAAG,KAAK,MAAM,KAAK,aAAY,CAAE,EAAC,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CA/C5E,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,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,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UCjClC;EA4BA,QAAA,CAAA,wpBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADKa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EAvBjC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAkB,YAChB;GAAI,iBAGC,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,wpBAAA;EAAA,CAAA"}