@loomui-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/loomui-ng-ui-popover.mjs

@@ -0,0 +1,358 @@
+import { FocusTrapFactory } from "@angular/cdk/a11y";
+import * as i0 from "@angular/core";
+import { Directive, ElementRef, computed, inject, input } from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, UiLayerRoot, UiPopperContentBase, cn } from "@loomui-ng/ui/utils";
+const CONTENT_CLASS = "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95";
+var UiPopover = class UiPopover extends UiLayerRoot {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiPopover,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiPopover,
+		isStandalone: true,
+		selector: "[uiPopover], ui-popover",
+		exportAs: ["uiPopover"],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiPopover,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiPopover], ui-popover",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiPopover"
+		}]
+	}]
+});
+var UiPopoverTrigger = class UiPopoverTrigger {
+	root = inject(UiPopover);
+	constructor() {
+		this.root.trigger.set(inject(ElementRef).nativeElement);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiPopoverTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiPopoverTrigger,
+		isStandalone: true,
+		selector: "[uiPopoverTrigger], ui-popover-trigger",
+		host: {
+			attributes: {
+				"data-slot": "popover-trigger",
+				"aria-haspopup": "dialog"
+			},
+			listeners: { "click": "root.toggle()" },
+			properties: {
+				"attr.aria-expanded": "root.open()",
+				"attr.aria-controls": "root.id",
+				"attr.data-state": "root.open() ? \"open\" : \"closed\""
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiPopoverTrigger,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiPopoverTrigger], ui-popover-trigger",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "popover-trigger",
+				"aria-haspopup": "dialog",
+				"[attr.aria-expanded]": "root.open()",
+				"[attr.aria-controls]": "root.id",
+				"[attr.data-state]": "root.open() ? \"open\" : \"closed\"",
+				"(click)": "root.toggle()"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var UiPopoverContent = class UiPopoverContent extends UiPopperContentBase {
+	root = inject(UiPopover);
+	varPrefix = "--radix-popover";
+	trapFactory = inject(FocusTrapFactory);
+	classes = computed(() => cn(CONTENT_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		super();
+		this.init();
+	}
+	onAttached() {
+		const trap = this.trapFactory.create(this.el);
+		trap.focusInitialElementWhenReady().then((ok) => {
+			if (!ok) this.el.focus();
+			trap.destroy();
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiPopoverContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiPopoverContent,
+		isStandalone: true,
+		selector: "[uiPopoverContent], ui-popover-content",
+		host: {
+			attributes: {
+				"role": "dialog",
+				"data-slot": "popover-content",
+				"tabindex": "-1"
+			},
+			properties: {
+				"id": "root.id",
+				"attr.data-state": "root.state()",
+				"attr.class": "classes()"
+			}
+		},
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiPopoverContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiPopoverContent], ui-popover-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "dialog",
+				"data-slot": "popover-content",
+				tabindex: "-1",
+				"[id]": "root.id",
+				"[attr.data-state]": "root.state()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var UiPopoverHeader = class UiPopoverHeader {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("flex flex-col gap-0.5 text-sm", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiPopoverHeader,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiPopoverHeader,
+		isStandalone: true,
+		selector: "[uiPopoverHeader], ui-popover-header",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "popover-header" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiPopoverHeader,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiPopoverHeader], ui-popover-header",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "popover-header",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiPopoverTitle = class UiPopoverTitle {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("font-medium", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiPopoverTitle,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiPopoverTitle,
+		isStandalone: true,
+		selector: "[uiPopoverTitle], ui-popover-title",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "popover-title" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiPopoverTitle,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiPopoverTitle], ui-popover-title",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "popover-title",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiPopoverDescription = class UiPopoverDescription {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("text-muted-foreground", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiPopoverDescription,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiPopoverDescription,
+		isStandalone: true,
+		selector: "[uiPopoverDescription], ui-popover-description",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "popover-description" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiPopoverDescription,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiPopoverDescription], ui-popover-description",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "popover-description",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+const UI_POPOVER = [
+	UiPopover,
+	UiPopoverTrigger,
+	UiPopoverContent,
+	UiPopoverHeader,
+	UiPopoverTitle,
+	UiPopoverDescription
+];
+export { UI_POPOVER, UiPopover, UiPopoverContent, UiPopoverDescription, UiPopoverHeader, UiPopoverTitle, UiPopoverTrigger };
+
+//# sourceMappingURL=loomui-ng-ui-popover.mjs.map

package/fesm2022/loomui-ng-ui-popover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-popover.mjs","names":[],"sources":["../../../libs/ui/popover/popover.ts"],"sourcesContent":["import { FocusTrapFactory } from '@angular/cdk/a11y';\nimport { computed, Directive, ElementRef, inject } from '@angular/core';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { UiLayerRoot } from '@loomui-ng/ui/utils';\nimport { UiPopperContentBase } from '@loomui-ng/ui/utils';\nimport { input } from '@angular/core';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\nconst CONTENT_CLASS =\n  'z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95';\n\n/**\n * <div uiPopover [(open)]=\"o\" class=\"contents\">\n *   <button uiButton uiPopoverTrigger>Open</button>\n *   <div uiPopoverContent side=\"bottom\" align=\"center\">…</div>\n * </div>\n */\n@Directive({ selector: '[uiPopover], ui-popover', hostDirectives: [UiElementHost], exportAs: 'uiPopover' })\nexport class UiPopover extends UiLayerRoot {}\n\n@Directive({\n  selector: '[uiPopoverTrigger], ui-popover-trigger', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'popover-trigger',\n    'aria-haspopup': 'dialog',\n    '[attr.aria-expanded]': 'root.open()',\n    '[attr.aria-controls]': 'root.id',\n    '[attr.data-state]': 'root.open() ? \"open\" : \"closed\"',\n    '(click)': 'root.toggle()',\n  },\n})\nexport class UiPopoverTrigger {\n  protected readonly root = inject(UiPopover);\n  constructor() {\n    this.root.trigger.set(inject<ElementRef<HTMLElement>>(ElementRef).nativeElement);\n  }\n}\n\n@Directive({\n  selector: '[uiPopoverContent], ui-popover-content', hostDirectives: [UiElementHost],\n  host: {\n    role: 'dialog',\n    'data-slot': 'popover-content',\n    tabindex: '-1',\n    '[id]': 'root.id',\n    '[attr.data-state]': 'root.state()',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiPopoverContent extends UiPopperContentBase {\n  protected readonly root = inject(UiPopover);\n  protected readonly varPrefix = '--radix-popover';\n  private readonly trapFactory = inject(FocusTrapFactory);\n  protected readonly classes = computed(() => cn(CONTENT_CLASS, this.userClass()));\n\n  constructor() {\n    super();\n    this.init();\n  }\n\n  protected override onAttached(): void {\n    // Radix Popover moves focus into the content (first tabbable, else the content itself); focus is not trapped.\n    const trap = this.trapFactory.create(this.el);\n    void trap.focusInitialElementWhenReady().then((ok) => {\n      if (!ok) this.el.focus();\n      trap.destroy();\n    });\n  }\n}\n\n@Directive({\n  selector: '[uiPopoverHeader], ui-popover-header', hostDirectives: [UiElementHost],\n  host: { 'data-slot': 'popover-header', '[attr.class]': 'classes()' },\n})\nexport class UiPopoverHeader {\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn('flex flex-col gap-0.5 text-sm', this.userClass()));\n}\n\n@Directive({\n  selector: '[uiPopoverTitle], ui-popover-title', hostDirectives: [UiElementHost],\n  host: { 'data-slot': 'popover-title', '[attr.class]': 'classes()' },\n})\nexport class UiPopoverTitle {\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn('font-medium', this.userClass()));\n}\n\n@Directive({\n  selector: '[uiPopoverDescription], ui-popover-description', hostDirectives: [UiElementHost],\n  host: { 'data-slot': 'popover-description', '[attr.class]': 'classes()' },\n})\nexport class UiPopoverDescription {\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn('text-muted-foreground', this.userClass()));\n}\n\nexport const UI_POPOVER = [\n  UiPopover,\n  UiPopoverTrigger,\n  UiPopoverContent,\n  UiPopoverHeader,\n  UiPopoverTitle,\n  UiPopoverDescription,\n] as const;\n"],"mappings":";;;;;AAQA,MAAM,gBACJ;AASF,IAAa,YAAb,MAAa,kBAAkB,YAAW;CAA7B,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAS,MAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAT,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAS,cAAA;EAAA,UAAA;EAAA,UAAA,CAAA,WAAA;EAAA,iBAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,cAAA,CAAA;EAAA,UAAA;CAAA,CAAA;;AAAT,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EADrB,MAAA;EAAU,MAAA,CAAA;GAAE,UAAU;GAA2B,gBAAgB,CAAC,aAAa;GAAG,UAAU;EAAW,CAAE;;;AAc1G,IAAa,mBAAb,MAAa,iBAAgB;CACR,OAAO,OAAO,SAAS;CAC1C,cAAA;EACE,KAAK,KAAK,QAAQ,IAAI,OAAgC,UAAU,CAAC,CAAC,aAAa;CACjF;CAJW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAgB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAhB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAgB,cAAA;EAAA,UAAA;EAAA,MAAA;GAAA,YAAA;IAAA,aAAA;IAAA,iBAAA;GAAA;GAAA,WAAA,EAAA,SAAA,gBAAA;GAAA,YAAA;IAAA,sBAAA;IAAA,sBAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,cAAA,CAAA;EAAA,UAAA;CAAA,CAAA;;AAAhB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgB,YAAA,CAAA;EAX5B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GAA0C,gBAAgB,CAAC,aAAa;GAClF,MAAM;IACJ,aAAa;IACb,iBAAiB;IACjB,wBAAwB;IACxB,wBAAwB;IACxB,qBAAqB;IACrB,WAAW;GACZ;EACF,CAAA;;;;AAmBD,IAAa,mBAAb,MAAa,yBAAyB,oBAAmB;CACpC,OAAO,OAAO,SAAS;CACvB,YAAY;CACd,cAAc,OAAO,gBAAgB;CACnC,UAAU,eAAe,GAAG,eAAe,KAAK,UAAS,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEhF,cAAA;EACE,MAAK;EACL,KAAK,KAAI;CACX;CAEmB,aAAU;EAE3B,MAAM,OAAO,KAAK,YAAY,OAAO,KAAK,EAAE;EAC5C,AAAK,KAAK,6BAA4B,CAAE,CAAC,MAAM,OAAM;GACnD,IAAI,CAAC,IAAI,KAAK,GAAG,MAAK;GACtB,KAAK,QAAO;EACd,CAAC;CACH;CAlBW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAgB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAhB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAgB,cAAA;EAAA,UAAA;EAAA,MAAA;GAAA,YAAA;IAAA,QAAA;IAAA,aAAA;IAAA,YAAA;GAAA;GAAA,YAAA;IAAA,MAAA;IAAA,mBAAA;IAAA,cAAA;GAAA;EAAA;EAAA,iBAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,cAAA,CAAA;EAAA,UAAA;CAAA,CAAA;;AAAhB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgB,YAAA,CAAA;EAX5B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GAA0C,gBAAgB,CAAC,aAAa;GAClF,MAAM;IACJ,MAAM;IACN,aAAa;IACb,UAAU;IACV,QAAQ;IACR,qBAAqB;IACrB,gBAAgB;GACjB;EACF,CAAA;;;;AA0BD,IAAa,kBAAb,MAAa,gBAAe;CACjB,YAAY,MAAc,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAO,CAAA;CACpC,UAAU,eAAe,GAAG,iCAAiC,KAAK,UAAS,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAFvF,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAe,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAf,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAe,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,WAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,aAAA,iBAAA;GAAA,YAAA,EAAA,cAAA,YAAA;EAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,cAAA,CAAA;EAAA,UAAA;CAAA,CAAA;;AAAf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAJ3B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GAAwC,gBAAgB,CAAC,aAAa;GAChF,MAAM;IAAE,aAAa;IAAkB,gBAAgB;GAAW;EACnE,CAAA;;;;;;;;;;;AAUD,IAAa,iBAAb,MAAa,eAAc;CAChB,YAAY,MAAc,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAO,CAAA;CACpC,UAAU,eAAe,GAAG,eAAe,KAAK,UAAS,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAFrE,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,EAAA,WAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,aAAA,gBAAA;GAAA,YAAA,EAAA,cAAA,YAAA;EAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,cAAA,CAAA;EAAA,UAAA;CAAA,CAAA;;AAAd,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAc,YAAA,CAAA;EAJ1B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GAAsC,gBAAgB,CAAC,aAAa;GAC9E,MAAM;IAAE,aAAa;IAAiB,gBAAgB;GAAW;EAClE,CAAA;;;;;;;;;;;AAUD,IAAa,uBAAb,MAAa,qBAAoB;CACtB,YAAY,MAAc,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAO,CAAA;CACpC,UAAU,eAAe,GAAG,yBAAyB,KAAK,UAAS,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAF/E,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,QAAA,EAAA,WAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,aAAA,sBAAA;GAAA,YAAA,EAAA,cAAA,YAAA;EAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,cAAA,CAAA;EAAA,UAAA;CAAA,CAAA;;AAApB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EAJhC,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GAAkD,gBAAgB,CAAC,aAAa;GAC1F,MAAM;IAAE,aAAa;IAAuB,gBAAgB;GAAW;EACxE,CAAA;;;;;;;;;;;AAMD,MAAa,aAAa;CACxB;CACA;CACA;CACA;CACA;CACA;AACQ"}

package/fesm2022/loomui-ng-ui-progress.mjs

@@ -0,0 +1,159 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+var UiProgress = class UiProgress {
+	value = input(null, {
+		...ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {},
+		transform: (v) => v === null || v === void 0 || v === "" ? null : numberAttribute(v)
+	});
+	max = input(100, {
+		...ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	percent = computed(() => {
+		const v = this.value();
+		return v === null ? 0 : Math.min(100, Math.max(0, v / this.max() * 100));
+	}, ...ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []);
+	state = computed(() => {
+		const v = this.value();
+		return v === null ? "indeterminate" : v >= this.max() ? "complete" : "loading";
+	}, ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted rtl:rotate-180", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiProgress,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiProgress,
+		isStandalone: true,
+		selector: "div[uiProgress], ui-progress",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "progressbar",
+				"aria-valuemin": "0",
+				"data-slot": "progress"
+			},
+			properties: {
+				"attr.aria-valuemax": "max()",
+				"attr.aria-valuenow": "value()",
+				"attr.data-state": "state()",
+				"attr.data-value": "value()",
+				"attr.data-max": "max()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `
+    <div
+      data-slot="progress-indicator"
+      [attr.data-state]="state()"
+      [attr.data-value]="value()"
+      [attr.data-max]="max()"
+      class="size-full flex-1 bg-primary transition-all"
+      [style.transform]="'translateX(-' + (100 - percent()) + '%)'"
+    ></div>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiProgress,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "div[uiProgress], ui-progress",
+			hostDirectives: [UiElementHost],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "progressbar",
+				"aria-valuemin": "0",
+				"[attr.aria-valuemax]": "max()",
+				"[attr.aria-valuenow]": "value()",
+				"[attr.data-state]": "state()",
+				"[attr.data-value]": "value()",
+				"[attr.data-max]": "max()",
+				"data-slot": "progress",
+				"[attr.class]": "classes()"
+			},
+			template: `
+    <div
+      data-slot="progress-indicator"
+      [attr.data-state]="state()"
+      [attr.data-value]="value()"
+      [attr.data-max]="max()"
+      class="size-full flex-1 bg-primary transition-all"
+      [style.transform]="'translateX(-' + (100 - percent()) + '%)'"
+    ></div>
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_PROGRESS = [UiProgress];
+export { UI_PROGRESS, UiProgress };
+
+//# sourceMappingURL=loomui-ng-ui-progress.mjs.map

package/fesm2022/loomui-ng-ui-progress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-progress.mjs","names":[],"sources":["../../../libs/ui/progress/progress.manual.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, numberAttribute } from '@angular/core';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\n/**\n * <div uiProgress [value]=\"60\"></div>\n * Observed (Radix): role=\"progressbar\", aria-valuemin=0, aria-valuemax, data-state, data-max; the indicator is\n * translated by -(100 - value)% and the root flips with `rtl:rotate-180`.\n */\n@Component({\n  selector: 'div[uiProgress], ui-progress', hostDirectives: [UiElementHost],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    role: 'progressbar',\n    'aria-valuemin': '0',\n    '[attr.aria-valuemax]': 'max()',\n    '[attr.aria-valuenow]': 'value()',\n    '[attr.data-state]': 'state()',\n    '[attr.data-value]': 'value()',\n    '[attr.data-max]': 'max()',\n    'data-slot': 'progress',\n    '[attr.class]': 'classes()',\n  },\n  template: `\n    <div\n      data-slot=\"progress-indicator\"\n      [attr.data-state]=\"state()\"\n      [attr.data-value]=\"value()\"\n      [attr.data-max]=\"max()\"\n      class=\"size-full flex-1 bg-primary transition-all\"\n      [style.transform]=\"'translateX(-' + (100 - percent()) + '%)'\"\n    ></div>\n  `,\n})\nexport class UiProgress {\n  /** `null` = indeterminate (observed on the live page: data-state=\"indeterminate\"). */\n  readonly value = input<number | null, unknown>(null, {\n    transform: (v: unknown) => (v === null || v === undefined || v === '' ? null : numberAttribute(v)),\n  });\n  readonly max = input(100, { transform: numberAttribute });\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly percent = computed(() => {\n    const v = this.value();\n    return v === null ? 0 : Math.min(100, Math.max(0, (v / this.max()) * 100));\n  });\n  protected readonly state = computed(() => {\n    const v = this.value();\n    return v === null ? 'indeterminate' : v >= this.max() ? 'complete' : 'loading';\n  });\n  protected readonly classes = computed(() =>\n    cn('relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted rtl:rotate-180', this.userClass()),\n  );\n}\n\nexport const UI_PROGRESS = [UiProgress] as const;\n"],"mappings":";;;;AAkCA,IAAa,aAAb,MAAa,WAAU;CAEZ,QAAQ,MAA8B,MAAI;EAAA,GAAA,YAAA,EAAA,WAAA,QAAA,+BAAA,CAAA;EACjD,YAAY,MAAgB,MAAM,QAAQ,MAAM,UAAa,MAAM,KAAK,OAAO,gBAAgB,CAAC;CAAE,CAAA;CAE3F,MAAM,MAAM,KAAG;EAAA,GAAA,YAAA,EAAA,WAAA,MAAA,+BAAA,CAAA;EAAI,WAAW;CAAe,CAAA;CAC7C,YAAY,MAAc,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAO,CAAA;CACpC,UAAU,eAAc;EACzC,MAAM,IAAI,KAAK,MAAK;EACpB,OAAO,MAAM,OAAO,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,IAAI,KAAK,IAAG,IAAM,GAAG,CAAC;CAC3E,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACiB,QAAQ,eAAc;EACvC,MAAM,IAAI,KAAK,MAAK;EACpB,OAAO,MAAM,OAAO,kBAAkB,KAAK,KAAK,IAAG,IAAK,aAAa;CACvE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACiB,UAAU,eAC3B,GAAG,gGAAgG,KAAK,UAAS,CAAE,GACpH,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAjBU,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAU,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAV,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAU,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;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,MAAA;GAAA,YAAA;IAAA,QAAA;IAAA,iBAAA;IAAA,aAAA;GAAA;GAAA,YAAA;IAAA,sBAAA;IAAA,sBAAA;IAAA,mBAAA;IAAA,mBAAA;IAAA,iBAAA;IAAA,cAAA;GAAA;EAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,cAAA,CAAA;EAAA,UAAA;EAAA,UAXX;;;;;;;;;;EAST,UAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EAzBtB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GAAgC,gBAAgB,CAAC,aAAa;GACxE,iBAAiB,wBAAwB;GACzC,MAAM;IACJ,MAAM;IACN,iBAAiB;IACjB,wBAAwB;IACxB,wBAAwB;IACxB,qBAAqB;IACrB,qBAAqB;IACrB,mBAAmB;IACnB,aAAa;IACb,gBAAgB;GACjB;GACD,UAAU;;;;;;;;;;EAUX,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBD,MAAa,cAAc,CAAC,UAAU"}