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

package/fesm2022/area8975-ui-colour.mjs

@@ -0,0 +1,200 @@
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, input, model, viewChild } from "@angular/core";
+import { UiButtonComponent } from "@area8975/ui/button";
+import { UiInputComponent } from "@area8975/ui/input";
+import { UiInputGroupComponent } from "@area8975/ui/input-group";
+const HEX_PATTERN = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+var UiColourComponent = class UiColourComponent {
+	value = model("#000000", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	picker = viewChild.required("picker", ...ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []);
+	isValid = computed(() => HEX_PATTERN.test(this.value()), ...ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []);
+	pickerValue = computed(() => {
+		if (!this.isValid()) return "#000000";
+		const hex = this.value().slice(1).toLowerCase();
+		return hex.length === 3 ? "#" + [...hex].map((char) => char + char).join("") : "#" + hex;
+	}, ...ngDevMode ? [{ debugName: "pickerValue" }] : /* istanbul ignore next */ []);
+	openPicker() {
+		const picker = this.picker().nativeElement;
+		if (picker.showPicker) picker.showPicker();
+		else picker.click();
+	}
+	handlePick(event) {
+		this.value.set(event.target.value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiColourComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: UiColourComponent,
+		isStandalone: true,
+		selector: "ui-colour",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: { properties: { "attr.id": "null" } },
+		viewQueries: [{
+			propertyName: "picker",
+			first: true,
+			predicate: ["picker"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ui-input-group [validationState]=\"isValid() ? null : false\">\n    <ui-button\n        appearance=\"white\"\n        intent=\"secondary\"\n        size=\"sm\"\n        classes=\"h-full\"\n        ariaLabel=\"Pick colour\"\n        [disabled]=\"disabled()\"\n        (click)=\"openPicker()\"\n    >\n        <span\n            class=\"border border-line-2 rounded size-5\"\n            [style.background-color]=\"isValid() ? value() : 'transparent'\"\n        ></span>\n    </ui-button>\n\n    <input\n        #picker\n        type=\"color\"\n        class=\"sr-only\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [value]=\"pickerValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"handlePick($event)\"\n    />\n\n    <ui-input\n        [(value)]=\"value\"\n        [id]=\"id()\"\n        [disabled]=\"disabled()\"\n        [maxlength]=\"7\"\n        [spellcheck]=\"false\"\n        autocomplete=\"off\"\n        placeholder=\"#000000\"\n    />\n</ui-input-group>\n",
+		dependencies: [
+			{
+				kind: "component",
+				type: UiInputComponent,
+				selector: "ui-input",
+				inputs: [
+					"value",
+					"classes",
+					"type",
+					"id",
+					"name",
+					"placeholder",
+					"autocomplete",
+					"inputmode",
+					"required",
+					"disabled",
+					"readonly",
+					"validationState",
+					"min",
+					"max",
+					"step",
+					"pattern",
+					"minlength",
+					"maxlength",
+					"autofocus",
+					"spellcheck",
+					"revealable",
+					"list",
+					"ariaLabel",
+					"describedBy",
+					"inputRole",
+					"ariaExpanded",
+					"ariaControls",
+					"ariaActiveDescendant",
+					"ariaAutocomplete",
+					"ariaHasPopup"
+				],
+				outputs: [
+					"valueChange",
+					"validationStateChange",
+					"focused",
+					"blurred"
+				]
+			},
+			{
+				kind: "component",
+				type: UiInputGroupComponent,
+				selector: "ui-input-group",
+				inputs: ["validationState"],
+				outputs: ["validationStateChange"]
+			},
+			{
+				kind: "component",
+				type: UiButtonComponent,
+				selector: "ui-button",
+				inputs: [
+					"appearance",
+					"intent",
+					"size",
+					"classes",
+					"type",
+					"ariaLabel",
+					"disabled",
+					"loading"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiColourComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-colour",
+			imports: [
+				UiInputComponent,
+				UiInputGroupComponent,
+				UiButtonComponent
+			],
+			host: { "[attr.id]": "null" },
+			template: "<ui-input-group [validationState]=\"isValid() ? null : false\">\n    <ui-button\n        appearance=\"white\"\n        intent=\"secondary\"\n        size=\"sm\"\n        classes=\"h-full\"\n        ariaLabel=\"Pick colour\"\n        [disabled]=\"disabled()\"\n        (click)=\"openPicker()\"\n    >\n        <span\n            class=\"border border-line-2 rounded size-5\"\n            [style.background-color]=\"isValid() ? value() : 'transparent'\"\n        ></span>\n    </ui-button>\n\n    <input\n        #picker\n        type=\"color\"\n        class=\"sr-only\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [value]=\"pickerValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"handlePick($event)\"\n    />\n\n    <ui-input\n        [(value)]=\"value\"\n        [id]=\"id()\"\n        [disabled]=\"disabled()\"\n        [maxlength]=\"7\"\n        [spellcheck]=\"false\"\n        autocomplete=\"off\"\n        placeholder=\"#000000\"\n    />\n</ui-input-group>\n"
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		picker: [{
+			type: i0.ViewChild,
+			args: ["picker", { isSignal: true }]
+		}]
+	}
+});
+export { UiColourComponent };
+
+//# sourceMappingURL=area8975-ui-colour.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-colour.mjs","names":[],"sources":["../../../projects/ui/colour/colour.component.ts","../../../projects/ui/colour/colour.component.html"],"sourcesContent":["import {\n    booleanAttribute,\n    Component,\n    computed,\n    ElementRef,\n    input,\n    model,\n    viewChild\n} from '@angular/core';\n\nimport { UiButtonComponent } from '@area8975/ui/button';\nimport { UiInputComponent } from '@area8975/ui/input';\nimport { UiInputGroupComponent } from '@area8975/ui/input-group';\n\n\nconst HEX_PATTERN = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;\n\n@Component({\n    selector: 'ui-colour',\n    templateUrl: './colour.component.html',\n    imports: [UiInputComponent, UiInputGroupComponent, UiButtonComponent],\n    host: { '[attr.id]': 'null' }\n})\nexport class UiColourComponent {\n    readonly value = model<string>('#000000');\n\n    readonly id = input<string>('');\n    readonly disabled = input(false, { transform: booleanAttribute });\n\n    private readonly picker = viewChild.required<ElementRef<HTMLInputElement>>(\n        'picker'\n    );\n\n    protected readonly isValid = computed(() => HEX_PATTERN.test(this.value()));\n\n    // the native picker only understands lowercase #rrggbb\n    protected readonly pickerValue = computed(() => {\n        if (!this.isValid()) {\n            return '#000000';\n        }\n\n        const hex = this.value().slice(1).toLowerCase();\n\n        return hex.length === 3\n            ? '#' + [...hex].map(char => char + char).join('')\n            : '#' + hex;\n    });\n\n    protected openPicker(): void {\n        const picker = this.picker().nativeElement;\n\n        if (picker.showPicker) {\n            picker.showPicker();\n        } else {\n            picker.click();\n        }\n    }\n\n    protected handlePick(event: Event): void {\n        this.value.set((event.target as HTMLInputElement).value);\n    }\n}\n","<ui-input-group [validationState]=\"isValid() ? null : false\">\n    <ui-button\n        appearance=\"white\"\n        intent=\"secondary\"\n        size=\"sm\"\n        classes=\"h-full\"\n        ariaLabel=\"Pick colour\"\n        [disabled]=\"disabled()\"\n        (click)=\"openPicker()\"\n    >\n        <span\n            class=\"border border-line-2 rounded size-5\"\n            [style.background-color]=\"isValid() ? value() : 'transparent'\"\n        ></span>\n    </ui-button>\n\n    <input\n        #picker\n        type=\"color\"\n        class=\"sr-only\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [value]=\"pickerValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"handlePick($event)\"\n    />\n\n    <ui-input\n        [(value)]=\"value\"\n        [id]=\"id()\"\n        [disabled]=\"disabled()\"\n        [maxlength]=\"7\"\n        [spellcheck]=\"false\"\n        autocomplete=\"off\"\n        placeholder=\"#000000\"\n    />\n</ui-input-group>\n"],"mappings":"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"}

package/fesm2022/area8975-ui-container.mjs

@@ -0,0 +1,40 @@
+import * as i0 from "@angular/core";
+import { Component } from "@angular/core";
+var UiContainerComponent = class UiContainerComponent {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiContainerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: UiContainerComponent,
+		isStandalone: true,
+		selector: "ui-container",
+		host: { classAttribute: "block container" },
+		ngImport: i0,
+		template: "<ng-content></ng-content>",
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiContainerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-container",
+			template: "<ng-content></ng-content>",
+			host: { class: "block container" }
+		}]
+	}]
+});
+export { UiContainerComponent };
+
+//# sourceMappingURL=area8975-ui-container.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-container.mjs","names":[],"sources":["../../../projects/ui/container/container.component.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n\n@Component({\n    selector: 'ui-container',\n    template: '<ng-content></ng-content>',\n    host: { class: 'block container' }\n})\nexport class UiContainerComponent {}\n"],"mappings":";;AAQA,IAAa,uBAAb,MAAa,qBAAoB;CAApB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,MAAA,EAAA,gBAAA,kBAAA;EAAA,UAAA;EAAA,UAHnB;EAA2B,UAAA;CAAA,CAAA;;AAG5B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EALhC,MAAA;EAAU,MAAA,CAAA;GACP,UAAU;GACV,UAAU;GACV,MAAM,EAAE,OAAO,kBAAiB;EACnC,CAAA"}

package/fesm2022/area8975-ui-counter.mjs

@@ -0,0 +1,246 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, contentChild, input, model } from "@angular/core";
+import { UiInputComponent } from "@area8975/ui/input";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroMinus, heroPlus } from "@ng-icons/heroicons/outline";
+var UiCounterComponent = class UiCounterComponent {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	step = input(1, ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
+	max = input(...ngDevMode ? [void 0, { debugName: "max" }] : /* istanbul ignore next */ []);
+	min = input(...ngDevMode ? [void 0, { debugName: "min" }] : /* istanbul ignore next */ []);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	leadingElement = contentChild("leading", ...ngDevMode ? [{ debugName: "leadingElement" }] : /* istanbul ignore next */ []);
+	trailingElement = contentChild("trailing", ...ngDevMode ? [{ debugName: "trailingElement" }] : /* istanbul ignore next */ []);
+	onStepUp() {
+		let value = this.value() ?? 0;
+		value += this.step();
+		const max = this.max();
+		if (max !== void 0 && value > max) value = max;
+		this.value.set(value);
+	}
+	onStepDown() {
+		let value = this.value() ?? 0;
+		value -= this.step();
+		const min = this.min();
+		if (min !== void 0 && value < min) value = min;
+		this.value.set(value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiCounterComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: UiCounterComponent,
+		isStandalone: true,
+		selector: "ui-counter",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			step: {
+				classPropertyName: "step",
+				publicName: "step",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			min: {
+				classPropertyName: "min",
+				publicName: "min",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		providers: [provideIcons({
+			heroPlus,
+			heroMinus
+		})],
+		queries: [{
+			propertyName: "leadingElement",
+			first: true,
+			predicate: ["leading"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "trailingElement",
+			first: true,
+			predicate: ["trailing"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ui-input\n    [(value)]=\"value\"\n    [placeholder]=\"placeholder()\"\n    type=\"number\"\n    classes=\"[&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [appearance:textfield]\"\n>\n    <ng-template #leading>\n        <ng-container *ngTemplateOutlet=\"leadingElement()\" />\n    </ng-template>\n    <ng-template #trailing>\n        <ng-container *ngTemplateOutlet=\"trailingElement()\" />\n\n        <div class=\"flex self-stretch ms-2\">\n            <button\n                type=\"button\"\n                class=\"inline-flex justify-center items-center w-8\"\n                (click)=\"onStepUp()\"\n            >\n                <ng-icon name=\"heroPlus\" class=\"shrink-0\" />\n            </button>\n            <button\n                type=\"button\"\n                class=\"inline-flex justify-center items-center w-8\"\n                (click)=\"onStepDown()\"\n            >\n                <ng-icon name=\"heroMinus\" class=\"shrink-0\" />\n            </button>\n        </div>\n    </ng-template>\n</ui-input>\n",
+		dependencies: [
+			{
+				kind: "component",
+				type: UiInputComponent,
+				selector: "ui-input",
+				inputs: [
+					"value",
+					"classes",
+					"type",
+					"id",
+					"name",
+					"placeholder",
+					"autocomplete",
+					"inputmode",
+					"required",
+					"disabled",
+					"readonly",
+					"validationState",
+					"min",
+					"max",
+					"step",
+					"pattern",
+					"minlength",
+					"maxlength",
+					"autofocus",
+					"spellcheck",
+					"revealable",
+					"list",
+					"ariaLabel",
+					"describedBy",
+					"inputRole",
+					"ariaExpanded",
+					"ariaControls",
+					"ariaActiveDescendant",
+					"ariaAutocomplete",
+					"ariaHasPopup"
+				],
+				outputs: [
+					"valueChange",
+					"validationStateChange",
+					"focused",
+					"blurred"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				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: UiCounterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-counter",
+			imports: [
+				UiInputComponent,
+				NgTemplateOutlet,
+				NgIcon
+			],
+			providers: [provideIcons({
+				heroPlus,
+				heroMinus
+			})],
+			template: "<ui-input\n    [(value)]=\"value\"\n    [placeholder]=\"placeholder()\"\n    type=\"number\"\n    classes=\"[&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [appearance:textfield]\"\n>\n    <ng-template #leading>\n        <ng-container *ngTemplateOutlet=\"leadingElement()\" />\n    </ng-template>\n    <ng-template #trailing>\n        <ng-container *ngTemplateOutlet=\"trailingElement()\" />\n\n        <div class=\"flex self-stretch ms-2\">\n            <button\n                type=\"button\"\n                class=\"inline-flex justify-center items-center w-8\"\n                (click)=\"onStepUp()\"\n            >\n                <ng-icon name=\"heroPlus\" class=\"shrink-0\" />\n            </button>\n            <button\n                type=\"button\"\n                class=\"inline-flex justify-center items-center w-8\"\n                (click)=\"onStepDown()\"\n            >\n                <ng-icon name=\"heroMinus\" class=\"shrink-0\" />\n            </button>\n        </div>\n    </ng-template>\n</ui-input>\n"
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		step: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "step",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		leadingElement: [{
+			type: i0.ContentChild,
+			args: ["leading", { isSignal: true }]
+		}],
+		trailingElement: [{
+			type: i0.ContentChild,
+			args: ["trailing", { isSignal: true }]
+		}]
+	}
+});
+export { UiCounterComponent };
+
+//# sourceMappingURL=area8975-ui-counter.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-counter.mjs","names":[],"sources":["../../../projects/ui/counter/counter.component.ts","../../../projects/ui/counter/counter.component.html"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n    Component,\n    contentChild,\n    input,\n    model,\n    TemplateRef\n} from '@angular/core';\n\nimport { UiInputComponent } from '@area8975/ui/input';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroMinus, heroPlus } from '@ng-icons/heroicons/outline';\n\n\n// todo\n// this component is just a number input with custom step buttons\n\n@Component({\n    selector: 'ui-counter',\n    templateUrl: './counter.component.html',\n    imports: [UiInputComponent, NgTemplateOutlet, NgIcon],\n    providers: [provideIcons({ heroPlus, heroMinus })]\n})\nexport class UiCounterComponent {\n    readonly value = model<number | null>(null);\n    readonly step = input<number>(1);\n    readonly max = input<number>();\n    readonly min = input<number>();\n    readonly placeholder = input<string>('');\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    onStepUp() {\n        let value = this.value() ?? 0;\n\n        value += this.step();\n\n        const max = this.max();\n\n        if (max !== undefined && value > max) {\n            value = max;\n        }\n\n        this.value.set(value);\n    }\n\n    onStepDown() {\n        let value = this.value() ?? 0;\n\n        value -= this.step();\n\n        const min = this.min();\n\n        if (min !== undefined && value < min) {\n            value = min;\n        }\n\n        this.value.set(value);\n    }\n}\n","<ui-input\n    [(value)]=\"value\"\n    [placeholder]=\"placeholder()\"\n    type=\"number\"\n    classes=\"[&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [appearance:textfield]\"\n>\n    <ng-template #leading>\n        <ng-container *ngTemplateOutlet=\"leadingElement()\" />\n    </ng-template>\n    <ng-template #trailing>\n        <ng-container *ngTemplateOutlet=\"trailingElement()\" />\n\n        <div class=\"flex self-stretch ms-2\">\n            <button\n                type=\"button\"\n                class=\"inline-flex justify-center items-center w-8\"\n                (click)=\"onStepUp()\"\n            >\n                <ng-icon name=\"heroPlus\" class=\"shrink-0\" />\n            </button>\n            <button\n                type=\"button\"\n                class=\"inline-flex justify-center items-center w-8\"\n                (click)=\"onStepDown()\"\n            >\n                <ng-icon name=\"heroMinus\" class=\"shrink-0\" />\n            </button>\n        </div>\n    </ng-template>\n</ui-input>\n"],"mappings":"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"}