@area8975/ui 0.2.2-dev.49 → 0.2.2-dev.50

package/fesm2022/area8975-ui-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-input.mjs","names":[],"sources":["../../../projects/ui/input/input.component.ts","../../../projects/ui/input/input.component.html","../../../projects/ui/input/input.types.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n    booleanAttribute,\n    Component,\n    computed,\n    contentChild,\n    input,\n    model,\n    output,\n    signal,\n    TemplateRef\n} from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroEye, heroEyeSlash } from '@ng-icons/heroicons/outline';\n\nimport {\n    type InputAriaAutocomplete,\n    type InputAriaHasPopup,\n    type InputMode,\n    type InputType,\n    type InputValidation\n} from './input.types';\n\n\n@Component({\n    selector: 'ui-input',\n    templateUrl: './input.component.html',\n    styleUrl: './input.component.css',\n    host: { '[attr.id]': 'null' },\n    imports: [NgTemplateOutlet, NgIcon],\n    providers: [provideIcons({\n        heroEyeSlash,\n        heroEye\n    })]\n})\nexport class UiInputComponent<ValueType = string> {\n    readonly value = model.required<ValueType>();\n\n    readonly classes = input<string>('');\n\n    readonly type = input<InputType>('text');\n    readonly id = input<string>('');\n    readonly name = input<string>('');\n    readonly placeholder = input<string>('');\n    readonly autocomplete = input<string>('');\n    readonly inputmode = input<InputMode | ''>('');\n\n    readonly required = input(false, { transform: booleanAttribute });\n    readonly disabled = input(false, { transform: booleanAttribute });\n    readonly readonly = input(false, { transform: booleanAttribute });\n\n    /** true/false shows valid/invalid styling. null means not validated yet. */\n    readonly validationState = model<InputValidation>(null);\n\n    // these values can be strings or numbers depending on the input type\n    readonly min = input<string | number>('');\n    readonly max = input<string | number>('');\n    readonly step = input<string | number>('');\n    readonly pattern = input<string>('');\n    readonly minlength = input<number | null>(null);\n    readonly maxlength = input<number | null>(null);\n\n    readonly autofocus = input(false, { transform: booleanAttribute });\n    readonly spellcheck = input(true, { transform: booleanAttribute });\n\n    /** With `type=\"password\"`, adds a button to show and hide what's been typed. */\n    readonly revealable = input(false, { transform: booleanAttribute });\n\n    readonly list = input<string>('');\n    readonly ariaLabel = input<string>('');\n    readonly describedBy = input<string>('');\n\n    // for inputs that drive a popup, e.g. a select's search box or a datepicker\n    // not \"role\", a static role attribute would also land on the host element\n    readonly inputRole = input<string>('');\n    readonly ariaExpanded = input<boolean | null>(null);\n    readonly ariaControls = input<string>('');\n    readonly ariaActiveDescendant = input<string | null>(null);\n    readonly ariaAutocomplete = input<InputAriaAutocomplete | ''>('');\n    readonly ariaHasPopup = input<InputAriaHasPopup | ''>('');\n\n    readonly focused = output<FocusEvent>();\n    readonly blurred = output<FocusEvent>();\n\n    // Leading/Trialing elements that appear inside of the input.\n    readonly leadingElement = contentChild<TemplateRef<unknown>>('leading');\n    readonly trailingElement = contentChild<TemplateRef<unknown>>('trailing');\n\n    protected readonly revealed = signal(false);\n\n    protected readonly canReveal = computed(() =>\n        this.revealable() && this.type() === 'password'\n    );\n\n    protected readonly shownType = computed<InputType>(() =>\n        this.canReveal() && this.revealed() ? 'text' : this.type()\n    );\n\n    readonly generatedClasses = computed(() =>\n        [\n            'ui-input',\n            'ui-text-body',\n            this.classes()\n        ]\n            .filter(Boolean)\n            .join(' ')\n    );\n\n    protected handleInput(event: Event): void {\n        const target = event.target as HTMLInputElement;\n\n        this.value.set(this.parseValue(target));\n    }\n\n    protected handleFocus(event: FocusEvent): void {\n        this.focused.emit(event);\n    }\n\n    protected handleBlur(event: FocusEvent): void {\n        this.blurred.emit(event);\n    }\n\n    private parseValue(element: HTMLInputElement): ValueType {\n        if (this.type() !== 'number') {\n            return element.value as ValueType;\n        }\n\n        if (!element.value) {\n            return null as ValueType;\n        }\n\n        return element.valueAsNumber as ValueType;\n    }\n}\n","<ng-container *ngTemplateOutlet=\"leadingElement()\"></ng-container>\n\n<input\n    [value]=\"value()\"\n    [class]=\"generatedClasses()\"\n    [type]=\"shownType()\"\n    [attr.id]=\"id() || null\"\n    [attr.name]=\"name() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [autocomplete]=\"autocomplete()\"\n    [attr.min]=\"min() === '' ? null : min()\"\n    [attr.max]=\"max() === '' ? null : max()\"\n    [attr.step]=\"step() === '' ? null : step()\"\n    [attr.pattern]=\"pattern() || null\"\n    [attr.inputmode]=\"inputmode() || null\"\n    [attr.maxlength]=\"maxlength()\"\n    [attr.minlength]=\"minlength()\"\n   \n    [attr.spellcheck]=\"spellcheck()\"\n    [attr.list]=\"list() || null\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-describedby]=\"describedBy() || null\"\n    [attr.role]=\"inputRole() || null\"\n    [attr.aria-expanded]=\"ariaExpanded()\"\n    [attr.aria-controls]=\"ariaControls() || null\"\n    [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n    [attr.aria-autocomplete]=\"ariaAutocomplete() || null\"\n    [attr.aria-haspopup]=\"ariaHasPopup() || null\"\n    [attr.data-invalid]=\"validationState() === false ? '' : null\"\n    [attr.data-valid]=\"validationState() === true ? '' : null\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleFocus($event)\"\n    (blur)=\"handleBlur($event)\"\n/>\n\n<ng-container *ngTemplateOutlet=\"trailingElement()\"></ng-container>\n\n@if (canReveal()) {\n    <button\n        type=\"button\"\n        class=\"ui-input-reveal\"\n        [attr.aria-label]=\"revealed() ? 'Hide password' : 'Show password'\"\n        [attr.aria-pressed]=\"revealed()\"\n        [disabled]=\"disabled()\"\n        (click)=\"revealed.set(!revealed())\"\n    >\n        <ng-icon [name]=\"revealed() ? 'heroEyeSlash' : 'heroEye'\" size=\"18\" class=\"shrink-0\" />\n    </button>\n}\n","/** Native type values ui-input supports. File/checkbox/radio/range need their own components. */\nexport const InputTypes = [\n    'text',\n    'email',\n    'tel',\n    'url',\n    'search',\n    'password',\n    'number',\n    'date',\n    'time',\n    'datetime-local',\n    'month',\n    'week',\n    'color'\n] as const;\n\n/** @see {@link InputTypes} */\nexport type InputType = typeof InputTypes[number];\n\n/** Native inputmode values, hinting at the virtual keyboard to show. */\nexport const InputModes = [\n    'none',\n    'text',\n    'decimal',\n    'numeric',\n    'tel',\n    'search',\n    'email',\n    'url'\n] as const;\n\n/** @see {@link InputModes} */\nexport type InputMode = typeof InputModes[number];\n\n/** true is valid, false is invalid, null is not yet validated. */\nexport type InputValidation = boolean | null;\n\n/** Native aria-autocomplete values, for inputs that suggest as you type. */\nexport const InputAriaAutocompletes = ['none', 'inline', 'list', 'both'] as const;\n\n/** @see {@link InputAriaAutocompletes} */\nexport type InputAriaAutocomplete = typeof InputAriaAutocompletes[number];\n\n/** Native aria-haspopup values, for inputs that open something. */\nexport const InputAriaHasPopups = ['listbox', 'dialog', 'grid', 'menu', 'tree'] as const;\n\n/** @see {@link InputAriaHasPopups} */\nexport type InputAriaHasPopup = typeof InputAriaHasPopups[number];\n"],"mappings":"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"}

package/fesm2022/area8975-ui-kpi.mjs

@@ -0,0 +1,167 @@
+import * as i0 from "@angular/core";
+import { Component, input } from "@angular/core";
+import { UiCardComponent } from "@area8975/ui/card";
+import { UiTooltipComponent } from "@area8975/ui/tooltip";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroQuestionMarkCircle } from "@ng-icons/heroicons/outline";
+var UiKpiComponent = class UiKpiComponent {
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
+	iconPosition = input("left", ...ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiKpiComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiKpiComponent,
+		isStandalone: true,
+		selector: "ui-kpi",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconPosition: {
+				classPropertyName: "iconPosition",
+				publicName: "iconPosition",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "block" },
+		providers: [provideIcons({ heroQuestionMarkCircle })],
+		ngImport: i0,
+		template: "<ui-card radius=\"xl\" class=\"h-full\">\n    <div class=\"flex gap-x-4 p-4 md:p-5\">\n        @if (icon() && iconPosition() === 'left') {\n            <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n                <ng-icon\n                    [name]=\"icon()\"\n                    size=\"32\"\n                    class=\"size-8 text-muted-foreground-2 shrink-0\"\n                    strokeWidth=\"1.5\"\n                />\n            </div>\n        }\n\n        <div class=\"grow\">\n            <div class=\"flex items-center gap-x-2 text-muted-foreground-2\">\n                <span class=\"font-semibold ui-text-h4 text-sm uppercase\">\n                    {{ label() }}\n                </span>\n\n                @if (hint()) {\n                    <ui-tooltip\n                        [text]=\"hint()\"\n                        placement=\"top\"\n                        trigger=\"hover\"\n                    >\n                        <ng-icon name=\"heroQuestionMarkCircle\" size=\"18\" />\n                    </ui-tooltip>\n                }\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n                <h3 class=\"font-semibold text-foreground ui-text-h2\">\n                    <!-- falls back to the plain value when nothing is projected -->\n                    <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n                </h3>\n                <ng-content select=\"[kpi-badge]\"></ng-content>\n            </div>\n        </div>\n\n        @if (icon() && iconPosition() === 'right') {\n            <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n                <ng-icon\n                    [name]=\"icon()\"\n                    size=\"32\"\n                    class=\"size-8 text-muted-foreground-2 shrink-0\"\n                    strokeWidth=\"1.5\"\n                />\n            </div>\n        }\n    </div>\n</ui-card>\n",
+		dependencies: [
+			{
+				kind: "component",
+				type: UiCardComponent,
+				selector: "ui-card",
+				inputs: ["radius"]
+			},
+			{
+				kind: "component",
+				type: NgIcon,
+				selector: "ng-icon",
+				inputs: [
+					"name",
+					"svg",
+					"size",
+					"strokeWidth",
+					"color"
+				]
+			},
+			{
+				kind: "component",
+				type: UiTooltipComponent,
+				selector: "ui-tooltip",
+				inputs: [
+					"text",
+					"placement",
+					"trigger",
+					"classes",
+					"isOpen"
+				],
+				exportAs: ["uiTooltip"]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiKpiComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-kpi",
+			imports: [
+				UiCardComponent,
+				NgIcon,
+				UiTooltipComponent
+			],
+			host: { class: "block" },
+			providers: [provideIcons({ heroQuestionMarkCircle })],
+			template: "<ui-card radius=\"xl\" class=\"h-full\">\n    <div class=\"flex gap-x-4 p-4 md:p-5\">\n        @if (icon() && iconPosition() === 'left') {\n            <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n                <ng-icon\n                    [name]=\"icon()\"\n                    size=\"32\"\n                    class=\"size-8 text-muted-foreground-2 shrink-0\"\n                    strokeWidth=\"1.5\"\n                />\n            </div>\n        }\n\n        <div class=\"grow\">\n            <div class=\"flex items-center gap-x-2 text-muted-foreground-2\">\n                <span class=\"font-semibold ui-text-h4 text-sm uppercase\">\n                    {{ label() }}\n                </span>\n\n                @if (hint()) {\n                    <ui-tooltip\n                        [text]=\"hint()\"\n                        placement=\"top\"\n                        trigger=\"hover\"\n                    >\n                        <ng-icon name=\"heroQuestionMarkCircle\" size=\"18\" />\n                    </ui-tooltip>\n                }\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n                <h3 class=\"font-semibold text-foreground ui-text-h2\">\n                    <!-- falls back to the plain value when nothing is projected -->\n                    <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n                </h3>\n                <ng-content select=\"[kpi-badge]\"></ng-content>\n            </div>\n        </div>\n\n        @if (icon() && iconPosition() === 'right') {\n            <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n                <ng-icon\n                    [name]=\"icon()\"\n                    size=\"32\"\n                    class=\"size-8 text-muted-foreground-2 shrink-0\"\n                    strokeWidth=\"1.5\"\n                />\n            </div>\n        }\n    </div>\n</ui-card>\n"
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		iconPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconPosition",
+				required: false
+			}]
+		}]
+	}
+});
+export { UiKpiComponent };
+
+//# sourceMappingURL=area8975-ui-kpi.mjs.map

package/fesm2022/area8975-ui-kpi.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-kpi.mjs","names":[],"sources":["../../../projects/ui/kpi/kpi.component.ts","../../../projects/ui/kpi/kpi.component.html"],"sourcesContent":["import { Component, input } from '@angular/core';\n\nimport { UiCardComponent } from '@area8975/ui/card';\nimport { UiTooltipComponent } from '@area8975/ui/tooltip';\nimport { IconName, NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroQuestionMarkCircle } from '@ng-icons/heroicons/outline';\n\n\n@Component({\n    selector: 'ui-kpi',\n    templateUrl: './kpi.component.html',\n    imports: [UiCardComponent, NgIcon, UiTooltipComponent],\n    host: { class: 'block' },\n    providers: [provideIcons({ heroQuestionMarkCircle })]\n})\nexport class UiKpiComponent {\n    readonly label = input<string>('');\n    readonly value = input<string>('');\n    readonly hint = input<string>('');\n    readonly icon = input<IconName>();\n    readonly iconPosition = input<'left' | 'right'>('left');\n}\n","<ui-card radius=\"xl\" class=\"h-full\">\n    <div class=\"flex gap-x-4 p-4 md:p-5\">\n        @if (icon() && iconPosition() === 'left') {\n            <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n                <ng-icon\n                    [name]=\"icon()\"\n                    size=\"32\"\n                    class=\"size-8 text-muted-foreground-2 shrink-0\"\n                    strokeWidth=\"1.5\"\n                />\n            </div>\n        }\n\n        <div class=\"grow\">\n            <div class=\"flex items-center gap-x-2 text-muted-foreground-2\">\n                <span class=\"font-semibold ui-text-h4 text-sm uppercase\">\n                    {{ label() }}\n                </span>\n\n                @if (hint()) {\n                    <ui-tooltip\n                        [text]=\"hint()\"\n                        placement=\"top\"\n                        trigger=\"hover\"\n                    >\n                        <ng-icon name=\"heroQuestionMarkCircle\" size=\"18\" />\n                    </ui-tooltip>\n                }\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n                <h3 class=\"font-semibold text-foreground ui-text-h2\">\n                    <!-- falls back to the plain value when nothing is projected -->\n                    <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n                </h3>\n                <ng-content select=\"[kpi-badge]\"></ng-content>\n            </div>\n        </div>\n\n        @if (icon() && iconPosition() === 'right') {\n            <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n                <ng-icon\n                    [name]=\"icon()\"\n                    size=\"32\"\n                    class=\"size-8 text-muted-foreground-2 shrink-0\"\n                    strokeWidth=\"1.5\"\n                />\n            </div>\n        }\n    </div>\n</ui-card>\n"],"mappings":";;;;;;AAeA,IAAa,iBAAb,MAAa,eAAc;CACd,QAAQ,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACzB,QAAQ,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACzB,OAAO,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACxB,OAAO,MAAiB,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACxB,eAAe,MAAwB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAL9C,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,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,MAAA;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,gBAAA,QAAA;EAAA,WAFZ,CAAC,aAAa,EAAE,uBAAsB,CAAE,CAAC;EAAC,UAAA;EAAA,UCbzD;EAmDA,cAAA;GAAA;IAAA,MAAA;IAAA,MDxCc;IAAe,UAAA;IAAA,QAAA,CAAA,QAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAM,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAkB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,UAAA,CAAA,WAAA;GAAA;EAAA;CAAA,CAAA;;AAI5C,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAc,YAAA,CAAA;EAP1B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAQ,SAET;IAAC;IAAiB;IAAQ;GAAkB;GAAC,MAChD,EAAE,OAAO,QAAO;GAAE,WACb,CAAC,aAAa,EAAE,uBAAsB,CAAE,CAAC;GAAC,UAAA;EAAA,CAAA"}

package/fesm2022/area8975-ui-layout.mjs

@@ -0,0 +1,63 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, contentChild } from "@angular/core";
+var UiLayoutComponent = class UiLayoutComponent {
+	sidebar = contentChild("sidebar", ...ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiLayoutComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: UiLayoutComponent,
+		isStandalone: true,
+		selector: "ui-layout",
+		queries: [{
+			propertyName: "sidebar",
+			first: true,
+			predicate: ["sidebar"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"shrink-0\">\n    <ng-container *ngTemplateOutlet=\"sidebar()\" />\n</div>\n\n<main class=\"relative min-w-0 overflow-y-auto grow\">\n    <ng-content />\n</main>\n",
+		styles: [":host{display:flex;height:100vh;width:100vw}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiLayoutComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-layout",
+			imports: [NgTemplateOutlet],
+			template: "<div class=\"shrink-0\">\n    <ng-container *ngTemplateOutlet=\"sidebar()\" />\n</div>\n\n<main class=\"relative min-w-0 overflow-y-auto grow\">\n    <ng-content />\n</main>\n",
+			styles: [":host{display:flex;height:100vh;width:100vw}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: { sidebar: [{
+		type: i0.ContentChild,
+		args: ["sidebar", { isSignal: true }]
+	}] }
+});
+export { UiLayoutComponent };
+
+//# sourceMappingURL=area8975-ui-layout.mjs.map

package/fesm2022/area8975-ui-layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-layout.mjs","names":[],"sources":["../../../projects/ui/layout/layout.component.ts","../../../projects/ui/layout/layout.component.html"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Component, contentChild, TemplateRef } from '@angular/core';\n\n\n@Component({\n    selector: 'ui-layout',\n    templateUrl: './layout.component.html',\n    styleUrl: './layout.component.css',\n    imports: [NgTemplateOutlet]\n})\nexport class UiLayoutComponent {\n    readonly sidebar = contentChild<TemplateRef<unknown>>('sidebar');\n}\n","<div class=\"shrink-0\">\n    <ng-container *ngTemplateOutlet=\"sidebar()\" />\n</div>\n\n<main class=\"relative min-w-0 overflow-y-auto grow\">\n    <ng-content />\n</main>\n"],"mappings":";;;AAUA,IAAa,oBAAb,MAAa,kBAAiB;CACjB,UAAU,aAAmC,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CADvD,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,SAAA,CAAA;GAAA,cAAA;GAAA,OAAA;GAAA,WAAA,CAAA,SAAA;GAAA,aAAA;GAAA,UAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UCV9B;EAOA,QAAA,CAAA,mHAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDCc;GAAgB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;CAAA,CAAA;;AAEjB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAN7B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAW,SAGZ,CAAC,gBAAgB;GAAC,UAAA;GAAA,QAAA,CAAA,mHAAA;EAAA,CAAA;CAG2B,CAAA;CAAA,gBAAA,EAAA,SAAA,CAAA;EAAA,MAAA,GAAA;EAAA,MAAA,CAAA,WAAS,EAAA,UAAA,KAAA,CAAA;CAAA,CAAA,EAAA;AAAA,CAAA"}

package/fesm2022/area8975-ui-loading.mjs

@@ -0,0 +1,76 @@
+import * as i0 from "@angular/core";
+import { Component, computed, input } from "@angular/core";
+const TEXT_TYPES = [
+	"blinking-caret",
+	"shimmer-text",
+	"loading-dots"
+];
+var UiLoadingComponent = class UiLoadingComponent {
+	type = input("spinner", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	hasText = computed(() => TEXT_TYPES.includes(this.type()), ...ngDevMode ? [{ debugName: "hasText" }] : /* istanbul ignore next */ []);
+	throbberSpokes = Array.from({ length: 12 }, (_, i) => i);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiLoadingComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiLoadingComponent,
+		isStandalone: true,
+		selector: "ui-loading",
+		inputs: { type: {
+			classPropertyName: "type",
+			publicName: "type",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: "<div class=\"ui-loading\" role=\"status\">\n    @switch (type()) {\n        @case ('throbber') {\n            <svg\n                class=\"ui-loading--throbber\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                @for (i of throbberSpokes; track i) {\n                    <line\n                        x1=\"12\"\n                        y1=\"2.5\"\n                        x2=\"12\"\n                        y2=\"7\"\n                        [attr.transform]=\"'rotate(' + i * (360 / throbberSpokes.length) + ' 12 12)'\"\n                        [style.animation-delay.s]=\"i / throbberSpokes.length - 1\"\n                    />\n                }\n            </svg>\n        }\n        @case ('pulse-ring') {\n            <span\n                class=\"ui-loading--pulse-ring ui-loading--pulse\"\n                aria-hidden=\"true\"\n            ></span>\n        }\n        @case ('pulse-dot') {\n            <span\n                class=\"ui-loading--pulse ui-loading--pulse-dot\"\n                aria-hidden=\"true\"\n            ></span>\n        }\n        @case ('wave') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3, 4, 5]; track i) {\n                    <span class=\"ui-loading--bar\"></span>\n                }\n            </span>\n        }\n        @case ('equaliser') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger ui-loading--bars\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3, 4, 5]; track i) {\n                    <span class=\"ui-loading--bar\"></span>\n                }\n            </span>\n        }\n        @case ('terminal') {\n            <span class=\"ui-loading--prompt\" aria-hidden=\"true\">&gt;</span>\n            <span class=\"ui-loading--caret\" aria-hidden=\"true\"></span>\n        }\n        @case ('blinking-caret') {\n            <span>Loading</span>\n            <span class=\"ui-loading--caret\" aria-hidden=\"true\"></span>\n        }\n        @case ('shimmer-text') {\n            <span class=\"ui-loading--shimmer\">Loading</span>\n        }\n        @case ('loading-dots') {\n            <span>Loading</span>\n            <span\n                class=\"ui-loading--text-dots ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--text-dot\">.</span>\n                }\n            </span>\n        }\n        @case ('bouncing-dots') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--dot ui-loading--dot-bounce\"></span>\n                }\n            </span>\n        }\n        @case ('fading-dots') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--dot ui-loading--dot-fade\"></span>\n                }\n            </span>\n        }\n        @default {\n            <span class=\"ui-loading--spinner\" aria-hidden=\"true\"></span>\n        }\n    }\n\n    @if (!hasText()) {\n        <span class=\"sr-only\">Loading</span>\n    }\n</div>\n",
+		styles: ["@layer properties;.ui-loading{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);--tw-leading: 1;line-height:1}.ui-loading--row{display:inline-flex;height:1em;align-items:center;column-gap:.2em}.ui-loading--spinner{display:inline-block;width:1em;height:1em;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:.15em;border-color:currentcolor;border-top-color:currentcolor;animation:ui-loading-spin .8s linear infinite}@supports (color: color-mix(in lab,red,red)){.ui-loading--spinner{border-color:color-mix(in oklab,currentcolor 20%,transparent)}}.ui-loading--throbber{width:1em;height:1em}.ui-loading--throbber line{stroke:currentColor;stroke-width:2;stroke-linecap:round;animation:ui-loading-spoke 1s linear infinite}.ui-loading--pulse{position:relative;display:inline-block;width:1em;height:1em}.ui-loading--pulse:before,.ui-loading--pulse:after{position:absolute;inset:0;border-radius:var(--radius-full, calc(infinity * 1px));content:\"\"}.ui-loading--pulse-ring:before,.ui-loading--pulse-ring:after{border-style:var(--tw-border-style);border-width:.12em;border-color:currentcolor}.ui-loading--pulse-dot:before,.ui-loading--pulse-dot:after{background-color:currentcolor}.ui-loading--pulse-dot:before{inset:.25em}.ui-loading--pulse:after{animation:ui-loading-echo 1.4s ease-out infinite}.ui-loading--bar{height:100%;width:.15em;border-radius:var(--radius-full, calc(infinity * 1px));background-color:currentcolor;animation:ui-loading-stretch 1s ease-in-out infinite}.ui-loading--bars{align-items:flex-end}.ui-loading--bars>.ui-loading--bar{transform-origin:bottom}.ui-loading--prompt{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace)}.ui-loading--caret{margin-inline-start:calc(var(--spacing, .25rem) * -1.5);height:1em;width:.5em;background-color:currentcolor;animation:ui-loading-blink 1s steps(1) infinite}.ui-loading--prompt+.ui-loading--caret{margin-inline-start:0px}.ui-loading--shimmer{-webkit-background-clip:text;background-clip:text;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);-webkit-text-fill-color:transparent;background-image:linear-gradient(90deg,currentColor 35%,currentColor 50%,currentColor 65%);background-size:250% 100%;animation:ui-loading-shimmer 1.6s linear infinite}@supports (color: color-mix(in lab,red,red)){.ui-loading--shimmer{background-image:linear-gradient(90deg,color-mix(in oklab,currentColor 35%,transparent) 35%,currentColor 50%,color-mix(in oklab,currentColor 35%,transparent) 65%)}}.ui-loading--text-dots{margin-inline-start:calc(var(--spacing, .25rem) * -2)}.ui-loading--text-dot{display:inline-block;animation:ui-loading-bounce 1.2s ease-in-out infinite}.ui-loading--dot{width:.3em;height:.3em;border-radius:var(--radius-full, calc(infinity * 1px));background-color:currentcolor}.ui-loading--dot-bounce{opacity:60%;animation:ui-loading-bounce 1.2s ease-in-out infinite}.ui-loading--dot-fade{animation:ui-loading-fade 1.2s ease-in-out infinite}.ui-loading--stagger>:nth-child(2){animation-delay:.15s}.ui-loading--stagger>:nth-child(3){animation-delay:.3s}.ui-loading--stagger>:nth-child(4){animation-delay:.45s}.ui-loading--stagger>:nth-child(5){animation-delay:.6s}@keyframes ui-loading-spin{to{transform:rotate(360deg)}}@keyframes ui-loading-spoke{0%{opacity:1}to{opacity:.15}}@keyframes ui-loading-echo{0%{transform:scale(1);opacity:.6}to{transform:scale(2);opacity:0}}@keyframes ui-loading-stretch{0%,60%,to{transform:scaleY(.3)}30%{transform:scaleY(1)}}@keyframes ui-loading-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.25em)}}@keyframes ui-loading-blink{0%{opacity:1}50%{opacity:0}}@keyframes ui-loading-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ui-loading-fade{0%,to{opacity:.25}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.ui-loading *,.ui-loading *:before,.ui-loading *:after{animation-duration:3s!important}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiLoadingComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-loading",
+			template: "<div class=\"ui-loading\" role=\"status\">\n    @switch (type()) {\n        @case ('throbber') {\n            <svg\n                class=\"ui-loading--throbber\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                @for (i of throbberSpokes; track i) {\n                    <line\n                        x1=\"12\"\n                        y1=\"2.5\"\n                        x2=\"12\"\n                        y2=\"7\"\n                        [attr.transform]=\"'rotate(' + i * (360 / throbberSpokes.length) + ' 12 12)'\"\n                        [style.animation-delay.s]=\"i / throbberSpokes.length - 1\"\n                    />\n                }\n            </svg>\n        }\n        @case ('pulse-ring') {\n            <span\n                class=\"ui-loading--pulse-ring ui-loading--pulse\"\n                aria-hidden=\"true\"\n            ></span>\n        }\n        @case ('pulse-dot') {\n            <span\n                class=\"ui-loading--pulse ui-loading--pulse-dot\"\n                aria-hidden=\"true\"\n            ></span>\n        }\n        @case ('wave') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3, 4, 5]; track i) {\n                    <span class=\"ui-loading--bar\"></span>\n                }\n            </span>\n        }\n        @case ('equaliser') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger ui-loading--bars\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3, 4, 5]; track i) {\n                    <span class=\"ui-loading--bar\"></span>\n                }\n            </span>\n        }\n        @case ('terminal') {\n            <span class=\"ui-loading--prompt\" aria-hidden=\"true\">&gt;</span>\n            <span class=\"ui-loading--caret\" aria-hidden=\"true\"></span>\n        }\n        @case ('blinking-caret') {\n            <span>Loading</span>\n            <span class=\"ui-loading--caret\" aria-hidden=\"true\"></span>\n        }\n        @case ('shimmer-text') {\n            <span class=\"ui-loading--shimmer\">Loading</span>\n        }\n        @case ('loading-dots') {\n            <span>Loading</span>\n            <span\n                class=\"ui-loading--text-dots ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--text-dot\">.</span>\n                }\n            </span>\n        }\n        @case ('bouncing-dots') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--dot ui-loading--dot-bounce\"></span>\n                }\n            </span>\n        }\n        @case ('fading-dots') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--dot ui-loading--dot-fade\"></span>\n                }\n            </span>\n        }\n        @default {\n            <span class=\"ui-loading--spinner\" aria-hidden=\"true\"></span>\n        }\n    }\n\n    @if (!hasText()) {\n        <span class=\"sr-only\">Loading</span>\n    }\n</div>\n",
+			styles: ["@layer properties;.ui-loading{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);--tw-leading: 1;line-height:1}.ui-loading--row{display:inline-flex;height:1em;align-items:center;column-gap:.2em}.ui-loading--spinner{display:inline-block;width:1em;height:1em;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:.15em;border-color:currentcolor;border-top-color:currentcolor;animation:ui-loading-spin .8s linear infinite}@supports (color: color-mix(in lab,red,red)){.ui-loading--spinner{border-color:color-mix(in oklab,currentcolor 20%,transparent)}}.ui-loading--throbber{width:1em;height:1em}.ui-loading--throbber line{stroke:currentColor;stroke-width:2;stroke-linecap:round;animation:ui-loading-spoke 1s linear infinite}.ui-loading--pulse{position:relative;display:inline-block;width:1em;height:1em}.ui-loading--pulse:before,.ui-loading--pulse:after{position:absolute;inset:0;border-radius:var(--radius-full, calc(infinity * 1px));content:\"\"}.ui-loading--pulse-ring:before,.ui-loading--pulse-ring:after{border-style:var(--tw-border-style);border-width:.12em;border-color:currentcolor}.ui-loading--pulse-dot:before,.ui-loading--pulse-dot:after{background-color:currentcolor}.ui-loading--pulse-dot:before{inset:.25em}.ui-loading--pulse:after{animation:ui-loading-echo 1.4s ease-out infinite}.ui-loading--bar{height:100%;width:.15em;border-radius:var(--radius-full, calc(infinity * 1px));background-color:currentcolor;animation:ui-loading-stretch 1s ease-in-out infinite}.ui-loading--bars{align-items:flex-end}.ui-loading--bars>.ui-loading--bar{transform-origin:bottom}.ui-loading--prompt{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace)}.ui-loading--caret{margin-inline-start:calc(var(--spacing, .25rem) * -1.5);height:1em;width:.5em;background-color:currentcolor;animation:ui-loading-blink 1s steps(1) infinite}.ui-loading--prompt+.ui-loading--caret{margin-inline-start:0px}.ui-loading--shimmer{-webkit-background-clip:text;background-clip:text;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);-webkit-text-fill-color:transparent;background-image:linear-gradient(90deg,currentColor 35%,currentColor 50%,currentColor 65%);background-size:250% 100%;animation:ui-loading-shimmer 1.6s linear infinite}@supports (color: color-mix(in lab,red,red)){.ui-loading--shimmer{background-image:linear-gradient(90deg,color-mix(in oklab,currentColor 35%,transparent) 35%,currentColor 50%,color-mix(in oklab,currentColor 35%,transparent) 65%)}}.ui-loading--text-dots{margin-inline-start:calc(var(--spacing, .25rem) * -2)}.ui-loading--text-dot{display:inline-block;animation:ui-loading-bounce 1.2s ease-in-out infinite}.ui-loading--dot{width:.3em;height:.3em;border-radius:var(--radius-full, calc(infinity * 1px));background-color:currentcolor}.ui-loading--dot-bounce{opacity:60%;animation:ui-loading-bounce 1.2s ease-in-out infinite}.ui-loading--dot-fade{animation:ui-loading-fade 1.2s ease-in-out infinite}.ui-loading--stagger>:nth-child(2){animation-delay:.15s}.ui-loading--stagger>:nth-child(3){animation-delay:.3s}.ui-loading--stagger>:nth-child(4){animation-delay:.45s}.ui-loading--stagger>:nth-child(5){animation-delay:.6s}@keyframes ui-loading-spin{to{transform:rotate(360deg)}}@keyframes ui-loading-spoke{0%{opacity:1}to{opacity:.15}}@keyframes ui-loading-echo{0%{transform:scale(1);opacity:.6}to{transform:scale(2);opacity:0}}@keyframes ui-loading-stretch{0%,60%,to{transform:scaleY(.3)}30%{transform:scaleY(1)}}@keyframes ui-loading-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.25em)}}@keyframes ui-loading-blink{0%{opacity:1}50%{opacity:0}}@keyframes ui-loading-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@keyframes ui-loading-fade{0%,to{opacity:.25}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.ui-loading *,.ui-loading *:before,.ui-loading *:after{animation-duration:3s!important}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: { type: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "type",
+			required: false
+		}]
+	}] }
+});
+const UI_LOADING_TYPES = [
+	"spinner",
+	"throbber",
+	"pulse-ring",
+	"pulse-dot",
+	"wave",
+	"equaliser",
+	"terminal",
+	"blinking-caret",
+	"shimmer-text",
+	"loading-dots",
+	"bouncing-dots",
+	"fading-dots"
+];
+export { UI_LOADING_TYPES, UiLoadingComponent };
+
+//# sourceMappingURL=area8975-ui-loading.mjs.map

package/fesm2022/area8975-ui-loading.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-loading.mjs","names":[],"sources":["../../../projects/ui/loading/loading.component.ts","../../../projects/ui/loading/loading.component.html","../../../projects/ui/loading/loading.types.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\nimport { UiLoadingType } from './loading.types';\n\n\nconst TEXT_TYPES: UiLoadingType[] = [\n    'blinking-caret',\n    'shimmer-text',\n    'loading-dots'\n];\n\n@Component({\n    selector: 'ui-loading',\n    templateUrl: './loading.component.html',\n    styleUrl: './loading.component.css'\n})\nexport class UiLoadingComponent {\n    readonly type = input<UiLoadingType>('spinner');\n\n    protected readonly hasText = computed(() =>\n        TEXT_TYPES.includes(this.type())\n    );\n\n    protected readonly throbberSpokes = Array.from({ length: 12 }, (_, i) => i);\n}\n","<div class=\"ui-loading\" role=\"status\">\n    @switch (type()) {\n        @case ('throbber') {\n            <svg\n                class=\"ui-loading--throbber\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                @for (i of throbberSpokes; track i) {\n                    <line\n                        x1=\"12\"\n                        y1=\"2.5\"\n                        x2=\"12\"\n                        y2=\"7\"\n                        [attr.transform]=\"'rotate(' + i * (360 / throbberSpokes.length) + ' 12 12)'\"\n                        [style.animation-delay.s]=\"i / throbberSpokes.length - 1\"\n                    />\n                }\n            </svg>\n        }\n        @case ('pulse-ring') {\n            <span\n                class=\"ui-loading--pulse-ring ui-loading--pulse\"\n                aria-hidden=\"true\"\n            ></span>\n        }\n        @case ('pulse-dot') {\n            <span\n                class=\"ui-loading--pulse ui-loading--pulse-dot\"\n                aria-hidden=\"true\"\n            ></span>\n        }\n        @case ('wave') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3, 4, 5]; track i) {\n                    <span class=\"ui-loading--bar\"></span>\n                }\n            </span>\n        }\n        @case ('equaliser') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger ui-loading--bars\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3, 4, 5]; track i) {\n                    <span class=\"ui-loading--bar\"></span>\n                }\n            </span>\n        }\n        @case ('terminal') {\n            <span class=\"ui-loading--prompt\" aria-hidden=\"true\">&gt;</span>\n            <span class=\"ui-loading--caret\" aria-hidden=\"true\"></span>\n        }\n        @case ('blinking-caret') {\n            <span>Loading</span>\n            <span class=\"ui-loading--caret\" aria-hidden=\"true\"></span>\n        }\n        @case ('shimmer-text') {\n            <span class=\"ui-loading--shimmer\">Loading</span>\n        }\n        @case ('loading-dots') {\n            <span>Loading</span>\n            <span\n                class=\"ui-loading--text-dots ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--text-dot\">.</span>\n                }\n            </span>\n        }\n        @case ('bouncing-dots') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--dot ui-loading--dot-bounce\"></span>\n                }\n            </span>\n        }\n        @case ('fading-dots') {\n            <span\n                class=\"ui-loading--row ui-loading--stagger\"\n                aria-hidden=\"true\"\n            >\n                @for (i of [1, 2, 3]; track i) {\n                    <span class=\"ui-loading--dot ui-loading--dot-fade\"></span>\n                }\n            </span>\n        }\n        @default {\n            <span class=\"ui-loading--spinner\" aria-hidden=\"true\"></span>\n        }\n    }\n\n    @if (!hasText()) {\n        <span class=\"sr-only\">Loading</span>\n    }\n</div>\n","export const UI_LOADING_TYPES = [\n    'spinner',\n    'throbber',\n    'pulse-ring',\n    'pulse-dot',\n    'wave',\n    'equaliser',\n    'terminal',\n    'blinking-caret',\n    'shimmer-text',\n    'loading-dots',\n    'bouncing-dots',\n    'fading-dots'\n] as const satisfies string[];\n\nexport type UiLoadingType = typeof UI_LOADING_TYPES[number];\n"],"mappings":";;AAKA,MAAM,aAA8B;CAChC;CACA;CACA;AACH;AAOD,IAAa,qBAAb,MAAa,mBAAkB;CAClB,OAAO,MAAqB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAE5B,UAAU,eACzB,WAAW,SAAS,KAAK,KAAI,CAAE,GAClC,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEkB,iBAAiB,MAAM,KAAK,EAAE,QAAQ,GAAE,IAAK,GAAG,MAAM,CAAC;CAPjE,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,MAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UChB/B;EAuGA,QAAA,CAAA,i3IAAA;CAAA,CAAA;;ADvFa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAL9B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAY,UAAA;GAAA,QAAA,CAAA,i3IAAA;EAAA,CAAA;;;;;;;;;;;AEZ1B,MAAa,mBAAmB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACyB"}

package/fesm2022/area8975-ui-modal-close-btn.mjs

@@ -0,0 +1,89 @@
+import * as i0 from "@angular/core";
+import { Component, model } from "@angular/core";
+import { UiButtonComponent } from "@area8975/ui/button";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroXMark } from "@ng-icons/heroicons/outline";
+var UiModalCloseButtonComponent = class UiModalCloseButtonComponent {
+	isOpen = model.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiModalCloseButtonComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiModalCloseButtonComponent,
+		isStandalone: true,
+		selector: "ui-modal-close-btn",
+		inputs: { isOpen: {
+			classPropertyName: "isOpen",
+			publicName: "isOpen",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		outputs: { isOpen: "isOpenChange" },
+		providers: [provideIcons({ heroXMark })],
+		ngImport: i0,
+		template: "<ui-button\n    appearance=\"white\"\n    intent=\"secondary\"\n    classes=\"p-2! border-transparent! shadow-none!\"\n    (click)=\"isOpen.set(false)\"\n>\n    <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n",
+		dependencies: [{
+			kind: "component",
+			type: UiButtonComponent,
+			selector: "ui-button",
+			inputs: [
+				"appearance",
+				"intent",
+				"size",
+				"classes",
+				"type",
+				"ariaLabel",
+				"disabled",
+				"loading"
+			]
+		}, {
+			kind: "component",
+			type: NgIcon,
+			selector: "ng-icon",
+			inputs: [
+				"name",
+				"svg",
+				"size",
+				"strokeWidth",
+				"color"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiModalCloseButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-modal-close-btn",
+			imports: [UiButtonComponent, NgIcon],
+			providers: [provideIcons({ heroXMark })],
+			template: "<ui-button\n    appearance=\"white\"\n    intent=\"secondary\"\n    classes=\"p-2! border-transparent! shadow-none!\"\n    (click)=\"isOpen.set(false)\"\n>\n    <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n"
+		}]
+	}],
+	propDecorators: { isOpen: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "isOpen",
+			required: true
+		}]
+	}, {
+		type: i0.Output,
+		args: ["isOpenChange"]
+	}] }
+});
+export { UiModalCloseButtonComponent };
+
+//# sourceMappingURL=area8975-ui-modal-close-btn.mjs.map

package/fesm2022/area8975-ui-modal-close-btn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-modal-close-btn.mjs","names":[],"sources":["../../../projects/ui/modal-close-btn/modal-close-btn.component.ts","../../../projects/ui/modal-close-btn/modal-close-btn.component.html"],"sourcesContent":["import { Component, model } from '@angular/core';\n\nimport { UiButtonComponent } from '@area8975/ui/button';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroXMark } from '@ng-icons/heroicons/outline';\n\n\n@Component({\n    selector: 'ui-modal-close-btn',\n    templateUrl: './modal-close-btn.component.html',\n    imports: [UiButtonComponent, NgIcon],\n    providers: [provideIcons({ heroXMark })]\n})\nexport class UiModalCloseButtonComponent {\n    readonly isOpen = model.required<boolean>();\n}\n","<ui-button\n    appearance=\"white\"\n    intent=\"secondary\"\n    classes=\"p-2! border-transparent! shadow-none!\"\n    (click)=\"isOpen.set(false)\"\n>\n    <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n"],"mappings":";;;;;AAaA,IAAa,8BAAb,MAAa,4BAA2B;CAC3B,SAAS,MAAM,SAAmB,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CADlC,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAA2B,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAA3B,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAA2B,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,QAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,SAAA,EAAA,QAAA,eAAA;EAAA,WAFzB,CAAC,aAAa,EAAE,UAAS,CAAE,CAAC;EAAC,UAAA;EAAA,UCX5C;EAQA,cAAA,CAAA;GAAA,MAAA;GAAA,MDEc;GAAiB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,GAAA;GAAA,MAAA;GAAA,MAAE;GAAM,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;CAAA,CAAA;;AAG1B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAA2B,YAAA,CAAA;EANvC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAoB,SAErB,CAAC,mBAAmB,MAAM;GAAC,WACzB,CAAC,aAAa,EAAE,UAAS,CAAE,CAAC;GAAC,UAAA;EAAA,CAAA"}