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

package/fesm2022/area8975-ui-disclosure.mjs

@@ -0,0 +1,279 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, Directive, TemplateRef, computed, contentChild, inject, input, model } from "@angular/core";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroChevronDown } from "@ng-icons/heroicons/outline";
+var UiDisclosurePanelDirective = class UiDisclosurePanelDirective {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiDisclosurePanelDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: UiDisclosurePanelDirective,
+		isStandalone: true,
+		selector: "ng-template[uiDisclosurePanel]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiDisclosurePanelDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[uiDisclosurePanel]" }]
+	}]
+});
+let nextId = 0;
+var UiDisclosureComponent = class UiDisclosureComponent {
+	expanded = model(false, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	panelId = input("", ...ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []);
+	generatedId = `ui-disclosure-${nextId++}`;
+	regionId = computed(() => this.panelId() || this.generatedId, ...ngDevMode ? [{ debugName: "regionId" }] : /* istanbul ignore next */ []);
+	panel = contentChild(UiDisclosurePanelDirective, ...ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []);
+	toggle = () => this.expanded.update((value) => !value);
+	open = () => this.expanded.set(true);
+	close = () => this.expanded.set(false);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiDisclosureComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiDisclosureComponent,
+		isStandalone: true,
+		selector: "ui-disclosure",
+		inputs: {
+			expanded: {
+				classPropertyName: "expanded",
+				publicName: "expanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			panelId: {
+				classPropertyName: "panelId",
+				publicName: "panelId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { expanded: "expandedChange" },
+		queries: [{
+			propertyName: "panel",
+			first: true,
+			predicate: UiDisclosurePanelDirective,
+			descendants: true,
+			isSignal: true
+		}],
+		exportAs: ["uiDisclosure"],
+		ngImport: i0,
+		template: "<ng-content />\n\n<div class=\"ui-disclosure-panel\" [id]=\"regionId()\" [hidden]=\"!expanded()\">\n    @if (expanded()) {\n        <ng-container [ngTemplateOutlet]=\"panel()?.template ?? null\" />\n    }\n</div>\n",
+		styles: [":host{position:relative;display:block}.ui-disclosure-panel{position:relative}\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: UiDisclosureComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-disclosure",
+			exportAs: "uiDisclosure",
+			imports: [NgTemplateOutlet],
+			template: "<ng-content />\n\n<div class=\"ui-disclosure-panel\" [id]=\"regionId()\" [hidden]=\"!expanded()\">\n    @if (expanded()) {\n        <ng-container [ngTemplateOutlet]=\"panel()?.template ?? null\" />\n    }\n</div>\n",
+			styles: [":host{position:relative;display:block}.ui-disclosure-panel{position:relative}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		expanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expanded",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedChange"]
+		}],
+		panelId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "panelId",
+				required: false
+			}]
+		}],
+		panel: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => UiDisclosurePanelDirective), { isSignal: true }]
+		}]
+	}
+});
+const DisclosureTriggerAppearances = ["section", "row"];
+var UiDisclosureChevronComponent = class UiDisclosureChevronComponent {
+	disclosure = inject(UiDisclosureComponent);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiDisclosureChevronComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: UiDisclosureChevronComponent,
+		isStandalone: true,
+		selector: "ui-disclosure-chevron",
+		host: { attributes: { "aria-hidden": "true" } },
+		providers: [provideIcons({ heroChevronDown })],
+		ngImport: i0,
+		template: `
+        <ng-icon
+            name="heroChevronDown"
+            class="ui-disclosure-chevron"
+            [class.ui-disclosure-chevron--expanded]="disclosure.expanded()"
+        />
+    `,
+		isInline: true,
+		styles: ["@layer properties;:host{display:inline-flex;flex-shrink:0}.ui-disclosure-chevron{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);color:var(--muted-foreground);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}@media(prefers-reduced-motion:reduce){.ui-disclosure-chevron{transition-property:none}}.ui-disclosure-chevron--expanded{rotate:180deg}@property --tw-duration{syntax: \"*\"; inherits: false;}@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-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [{
+			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: UiDisclosureChevronComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-disclosure-chevron",
+			template: `
+        <ng-icon
+            name="heroChevronDown"
+            class="ui-disclosure-chevron"
+            [class.ui-disclosure-chevron--expanded]="disclosure.expanded()"
+        />
+    `,
+			imports: [NgIcon],
+			host: { "aria-hidden": "true" },
+			providers: [provideIcons({ heroChevronDown })],
+			styles: ["@layer properties;:host{display:inline-flex;flex-shrink:0}.ui-disclosure-chevron{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);color:var(--muted-foreground);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}@media(prefers-reduced-motion:reduce){.ui-disclosure-chevron{transition-property:none}}.ui-disclosure-chevron--expanded{rotate:180deg}@property --tw-duration{syntax: \"*\"; inherits: false;}@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-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}]
+});
+var UiDisclosureTriggerComponent = class UiDisclosureTriggerComponent {
+	disclosure = inject(UiDisclosureComponent);
+	appearance = input("section", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiDisclosureTriggerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiDisclosureTriggerComponent,
+		isStandalone: true,
+		selector: "ui-disclosure-trigger",
+		inputs: {
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "appearance",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<button\n    type=\"button\"\n    [class]=\"'ui-disclosure-trigger ui-disclosure-trigger--' + appearance()\"\n    [attr.aria-expanded]=\"disclosure.expanded()\"\n    [attr.aria-controls]=\"disclosure.regionId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"disclosure.toggle()\"\n>\n    <ng-content />\n</button>\n",
+		styles: ["@layer properties;:host{display:block;min-width:0px}.ui-disclosure-trigger{cursor:pointer;text-align:start}.ui-disclosure-trigger:focus{--tw-outline-style: none;outline-style:none}.ui-disclosure-trigger--section{display:flex;width:100%;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);transition-property:box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-disclosure-trigger--section:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-disclosure-trigger--section:focus-visible{--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-disclosure-trigger--row{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-disclosure-trigger--row:after{content:var(--tw-content);position:absolute}.ui-disclosure-trigger--row:after{content:var(--tw-content);inset:0}.ui-disclosure-trigger--row:after{content:var(--tw-content);border-radius:var(--radius-lg, .5rem)}.ui-disclosure-trigger--row:focus-visible:after{content:var(--tw-content);--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-disclosure-trigger--row:focus-visible:after{content:var(--tw-content);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-content{syntax: \"*\"; initial-value: \"\"; inherits: false;}@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-font-weight: initial;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-content: \"\"}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiDisclosureTriggerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-disclosure-trigger",
+			template: "<button\n    type=\"button\"\n    [class]=\"'ui-disclosure-trigger ui-disclosure-trigger--' + appearance()\"\n    [attr.aria-expanded]=\"disclosure.expanded()\"\n    [attr.aria-controls]=\"disclosure.regionId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"disclosure.toggle()\"\n>\n    <ng-content />\n</button>\n",
+			styles: ["@layer properties;:host{display:block;min-width:0px}.ui-disclosure-trigger{cursor:pointer;text-align:start}.ui-disclosure-trigger:focus{--tw-outline-style: none;outline-style:none}.ui-disclosure-trigger--section{display:flex;width:100%;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);transition-property:box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-disclosure-trigger--section:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-disclosure-trigger--section:focus-visible{--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-disclosure-trigger--row{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-disclosure-trigger--row:after{content:var(--tw-content);position:absolute}.ui-disclosure-trigger--row:after{content:var(--tw-content);inset:0}.ui-disclosure-trigger--row:after{content:var(--tw-content);border-radius:var(--radius-lg, .5rem)}.ui-disclosure-trigger--row:focus-visible:after{content:var(--tw-content);--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-disclosure-trigger--row:focus-visible:after{content:var(--tw-content);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-content{syntax: \"*\"; initial-value: \"\"; inherits: false;}@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-font-weight: initial;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-content: \"\"}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { DisclosureTriggerAppearances, UiDisclosureChevronComponent, UiDisclosureComponent, UiDisclosurePanelDirective, UiDisclosureTriggerComponent };
+
+//# sourceMappingURL=area8975-ui-disclosure.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-disclosure.mjs","names":[],"sources":["../../../projects/ui/disclosure/disclosure.directives.ts","../../../projects/ui/disclosure/disclosure.component.ts","../../../projects/ui/disclosure/disclosure.component.html","../../../projects/ui/disclosure/disclosure.types.ts","../../../projects/ui/disclosure/disclosure-chevron.component.ts","../../../projects/ui/disclosure/disclosure-trigger.component.ts","../../../projects/ui/disclosure/disclosure-trigger.component.html"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n\n/** The disclosure's content, only rendered while it's expanded. */\n@Directive({\n    selector: 'ng-template[uiDisclosurePanel]'\n})\nexport class UiDisclosurePanelDirective {\n    readonly template = inject(TemplateRef);\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, contentChild, input, model } from '@angular/core';\n\nimport { UiDisclosurePanelDirective } from './disclosure.directives';\n\n\nlet nextId = 0;\n\n/**\n * Shows and hides a panel of content from a `ui-disclosure-trigger` inside it.\n * The content goes in an `<ng-template uiDisclosurePanel>`, rendered after\n * everything else in the disclosure.\n */\n@Component({\n    selector: 'ui-disclosure',\n    exportAs: 'uiDisclosure',\n    templateUrl: './disclosure.component.html',\n    styleUrl: './disclosure.component.css',\n    imports: [NgTemplateOutlet]\n})\nexport class UiDisclosureComponent {\n    readonly expanded = model(false);\n\n    /** The panel's id, which the trigger's aria-controls points at. Generated when left out. */\n    readonly panelId = input<string>('');\n\n    private readonly generatedId = `ui-disclosure-${nextId++}`;\n\n    readonly regionId = computed(() => this.panelId() || this.generatedId);\n\n    protected readonly panel = contentChild(UiDisclosurePanelDirective);\n\n    readonly toggle = () => this.expanded.update(value => !value);\n    readonly open = () => this.expanded.set(true);\n    readonly close = () => this.expanded.set(false);\n}\n","<ng-content />\n\n<div class=\"ui-disclosure-panel\" [id]=\"regionId()\" [hidden]=\"!expanded()\">\n    @if (expanded()) {\n        <ng-container [ngTemplateOutlet]=\"panel()?.template ?? null\" />\n    }\n</div>\n","/**\n * How a disclosure trigger looks. `\"section\"` is a full-width header,\n * `\"row\"` stretches the trigger over its row - see\n * `UiDisclosureTriggerComponent.appearance`.\n */\nexport const DisclosureTriggerAppearances = ['section', 'row'] as const;\n\n/** @see {@link DisclosureTriggerAppearances} */\nexport type DisclosureTriggerAppearance =\n    typeof DisclosureTriggerAppearances[number];\n","import { Component, inject } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronDown } from '@ng-icons/heroicons/outline';\n\nimport { UiDisclosureComponent } from './disclosure.component';\n\n\n/** A chevron that turns with the `ui-disclosure` it's in. Put it in the trigger, or anywhere in a row. */\n@Component({\n    selector: 'ui-disclosure-chevron',\n    template: `\n        <ng-icon\n            name=\"heroChevronDown\"\n            class=\"ui-disclosure-chevron\"\n            [class.ui-disclosure-chevron--expanded]=\"disclosure.expanded()\"\n        />\n    `,\n    styleUrl: './disclosure-chevron.component.css',\n    imports: [NgIcon],\n    host: { 'aria-hidden': 'true' },\n    providers: [provideIcons({ heroChevronDown })]\n})\nexport class UiDisclosureChevronComponent {\n    protected readonly disclosure = inject(UiDisclosureComponent);\n}\n","import { Component, inject, input } from '@angular/core';\n\nimport { UiDisclosureComponent } from './disclosure.component';\nimport type { DisclosureTriggerAppearance } from './disclosure.types';\n\n\n/**\n * The button that expands and collapses the `ui-disclosure` it's in.\n *\n * As a `\"row\"`, its hit area and focus ring cover the nearest positioned\n * element around it, so make the row `relative`, otherwise it's the whole\n * disclosure. Give other controls in the row `class=\"relative\"` so they stay\n * clickable above it.\n */\n@Component({\n    selector: 'ui-disclosure-trigger',\n    templateUrl: './disclosure-trigger.component.html',\n    styleUrl: './disclosure-trigger.component.css'\n})\nexport class UiDisclosureTriggerComponent {\n    protected readonly disclosure = inject(UiDisclosureComponent);\n\n    readonly appearance = input<DisclosureTriggerAppearance>('section');\n\n    readonly ariaLabel = input<string>('');\n}\n","<button\n    type=\"button\"\n    [class]=\"'ui-disclosure-trigger ui-disclosure-trigger--' + appearance()\"\n    [attr.aria-expanded]=\"disclosure.expanded()\"\n    [attr.aria-controls]=\"disclosure.regionId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    (click)=\"disclosure.toggle()\"\n>\n    <ng-content />\n</button>\n"],"mappings":"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"}

package/fesm2022/area8975-ui-drawer.mjs

@@ -0,0 +1,106 @@
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, input, signal } from "@angular/core";
+import { UiModalCloseButtonComponent } from "@area8975/ui/modal-close-btn";
+var UiDrawerComponent = class UiDrawerComponent {
+	isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	enableBackdrop = input(true, {
+		...ngDevMode ? { debugName: "enableBackdrop" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	subLabel = input("", ...ngDevMode ? [{ debugName: "subLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiDrawerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiDrawerComponent,
+		isStandalone: true,
+		selector: "ui-drawer",
+		inputs: {
+			enableBackdrop: {
+				classPropertyName: "enableBackdrop",
+				publicName: "enableBackdrop",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			subLabel: {
+				classPropertyName: "subLabel",
+				publicName: "subLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class.open": "isOpen()" } },
+		ngImport: i0,
+		template: "@if (enableBackdrop()) {\n    <div\n        class=\"absolute inset-0 bg-black/10 transition-opacity\"\n        [class.opacity-0]=\"!isOpen()\"\n        [class.pointer-events-none]=\"!isOpen()\"\n        aria-hidden=\"true\"\n        (click)=\"isOpen.set(false)\"\n    >\n    </div>\n}\n\n<aside\n    class=\"right-0 absolute inset-y-0 bg-layer border-line-2 border-s w-100 max-w-full h-full transition-transform duration-200\"\n    [class.translate-x-full]=\"!isOpen()\"\n>\n    <div class=\"flex flex-col h-full\">\n        <header\n            class=\"flex justify-between px-5 py-2.5 border-line-2 border-b\"\n            [class.items-start]=\"subLabel()\"\n            [class.items-center]=\"!subLabel()\"\n        >\n            <div>\n                <h3 class=\"font-semibold ui-text-h3\">{{ label() }}</h3>\n\n                @if (subLabel()) {\n                    <h4 class=\"ui-text-body\">{{ subLabel() }}</h4>\n                }\n            </div>\n            <div class=\"flex items-center gap-x-3 shrink-0\">\n                <ng-content select=\"[drawer-actions]\" />\n                <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n            </div>\n        </header>\n\n        <div class=\"p-5 overflow-y-auto grow\">\n            <ng-content />\n        </div>\n    </div>\n</aside>\n",
+		styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:100}:host.open{pointer-events:auto}::ng-deep .drawer-close-btn{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))!important;border-color:var(--surface-line)!important;background-color:var(--surface)!important;padding:0!important;color:var(--surface-foreground)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important;--tw-ring-offset-width: 0px !important;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [{
+			kind: "component",
+			type: UiModalCloseButtonComponent,
+			selector: "ui-modal-close-btn",
+			inputs: ["isOpen"],
+			outputs: ["isOpenChange"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiDrawerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-drawer",
+			imports: [UiModalCloseButtonComponent],
+			host: { "[class.open]": "isOpen()" },
+			template: "@if (enableBackdrop()) {\n    <div\n        class=\"absolute inset-0 bg-black/10 transition-opacity\"\n        [class.opacity-0]=\"!isOpen()\"\n        [class.pointer-events-none]=\"!isOpen()\"\n        aria-hidden=\"true\"\n        (click)=\"isOpen.set(false)\"\n    >\n    </div>\n}\n\n<aside\n    class=\"right-0 absolute inset-y-0 bg-layer border-line-2 border-s w-100 max-w-full h-full transition-transform duration-200\"\n    [class.translate-x-full]=\"!isOpen()\"\n>\n    <div class=\"flex flex-col h-full\">\n        <header\n            class=\"flex justify-between px-5 py-2.5 border-line-2 border-b\"\n            [class.items-start]=\"subLabel()\"\n            [class.items-center]=\"!subLabel()\"\n        >\n            <div>\n                <h3 class=\"font-semibold ui-text-h3\">{{ label() }}</h3>\n\n                @if (subLabel()) {\n                    <h4 class=\"ui-text-body\">{{ subLabel() }}</h4>\n                }\n            </div>\n            <div class=\"flex items-center gap-x-3 shrink-0\">\n                <ng-content select=\"[drawer-actions]\" />\n                <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n            </div>\n        </header>\n\n        <div class=\"p-5 overflow-y-auto grow\">\n            <ng-content />\n        </div>\n    </div>\n</aside>\n",
+			styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:100}:host.open{pointer-events:auto}::ng-deep .drawer-close-btn{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))!important;border-color:var(--surface-line)!important;background-color:var(--surface)!important;padding:0!important;color:var(--surface-foreground)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important;--tw-ring-offset-width: 0px !important;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		enableBackdrop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "enableBackdrop",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		subLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "subLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { UiDrawerComponent };
+
+//# sourceMappingURL=area8975-ui-drawer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-drawer.mjs","names":[],"sources":["../../../projects/ui/drawer/drawer.component.ts","../../../projects/ui/drawer/drawer.component.html"],"sourcesContent":["import { booleanAttribute, Component, input, signal } from '@angular/core';\n\nimport { UiModalCloseButtonComponent } from '@area8975/ui/modal-close-btn';\n\n\n@Component({\n    selector: 'ui-drawer',\n    templateUrl: './drawer.component.html',\n    styleUrl: './drawer.component.css',\n    imports: [UiModalCloseButtonComponent],\n    host: { '[class.open]': 'isOpen()' }\n})\nexport class UiDrawerComponent {\n    readonly isOpen = signal<boolean>(false);\n    readonly enableBackdrop = input(true, { transform: booleanAttribute });\n\n    readonly label = input<string>('');\n    readonly subLabel = input<string>('');\n}\n","@if (enableBackdrop()) {\n    <div\n        class=\"absolute inset-0 bg-black/10 transition-opacity\"\n        [class.opacity-0]=\"!isOpen()\"\n        [class.pointer-events-none]=\"!isOpen()\"\n        aria-hidden=\"true\"\n        (click)=\"isOpen.set(false)\"\n    >\n    </div>\n}\n\n<aside\n    class=\"right-0 absolute inset-y-0 bg-layer border-line-2 border-s w-100 max-w-full h-full transition-transform duration-200\"\n    [class.translate-x-full]=\"!isOpen()\"\n>\n    <div class=\"flex flex-col h-full\">\n        <header\n            class=\"flex justify-between px-5 py-2.5 border-line-2 border-b\"\n            [class.items-start]=\"subLabel()\"\n            [class.items-center]=\"!subLabel()\"\n        >\n            <div>\n                <h3 class=\"font-semibold ui-text-h3\">{{ label() }}</h3>\n\n                @if (subLabel()) {\n                    <h4 class=\"ui-text-body\">{{ subLabel() }}</h4>\n                }\n            </div>\n            <div class=\"flex items-center gap-x-3 shrink-0\">\n                <ng-content select=\"[drawer-actions]\" />\n                <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n            </div>\n        </header>\n\n        <div class=\"p-5 overflow-y-auto grow\">\n            <ng-content />\n        </div>\n    </div>\n</aside>\n"],"mappings":";;;AAYA,IAAa,oBAAb,MAAa,kBAAiB;CACjB,SAAS,OAAgB,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,iBAAiB,MAAM,MAAI;EAAA,GAAA,YAAA,EAAA,WAAA,iBAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAE1D,QAAQ,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACzB,WAAW,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAL5B,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,QAAA;GAAA,gBAAA;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,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,cAAA,WAAA,EAAA;EAAA,UAAA;EAAA,UCZ9B;EAuCA,QAAA,CAAA,olFAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MD9Bc;GAA2B,UAAA;GAAA,QAAA,CAAA,QAAA;GAAA,SAAA,CAAA,cAAA;EAAA,CAAA;CAAA,CAAA;;AAG5B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAP7B,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAW,SAGZ,CAAC,2BAA2B;GAAC,MAChC,EAAE,gBAAgB,WAAU;GAAE,UAAA;GAAA,QAAA,CAAA,olFAAA;EAAA,CAAA"}

package/fesm2022/area8975-ui-dropdown-button.mjs

@@ -0,0 +1,141 @@
+import * as i0 from "@angular/core";
+import { Component, input, model } from "@angular/core";
+import { UiButtonComponent } from "@area8975/ui/button";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroChevronDown } from "@ng-icons/heroicons/outline";
+var UiDropdownButtonComponent = class UiDropdownButtonComponent {
+	intent = input("secondary", ...ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []);
+	appearance = input("white", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	icon = input("heroChevronDown", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	isOpen = model.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiDropdownButtonComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiDropdownButtonComponent,
+		isStandalone: true,
+		selector: "ui-dropdown-button",
+		inputs: {
+			intent: {
+				classPropertyName: "intent",
+				publicName: "intent",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "appearance",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isOpen: {
+				classPropertyName: "isOpen",
+				publicName: "isOpen",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		outputs: { isOpen: "isOpenChange" },
+		providers: [provideIcons({ heroChevronDown })],
+		ngImport: i0,
+		template: "<ui-button\n    [intent]=\"intent()\"\n    [appearance]=\"appearance()\"\n    (click)=\"isOpen.update(value => !value)\"\n>\n    <ng-content />\n    <ng-icon\n        name=\"heroChevronDown\"\n        class=\"size-4 transition-transform duration-100 shrink-0\"\n        [class.rotate-180]=\"isOpen()\"\n    />\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: UiDropdownButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-dropdown-button",
+			imports: [UiButtonComponent, NgIcon],
+			providers: [provideIcons({ heroChevronDown })],
+			template: "<ui-button\n    [intent]=\"intent()\"\n    [appearance]=\"appearance()\"\n    (click)=\"isOpen.update(value => !value)\"\n>\n    <ng-content />\n    <ng-icon\n        name=\"heroChevronDown\"\n        class=\"size-4 transition-transform duration-100 shrink-0\"\n        [class.rotate-180]=\"isOpen()\"\n    />\n</ui-button>\n"
+		}]
+	}],
+	propDecorators: {
+		intent: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "intent",
+				required: false
+			}]
+		}],
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		isOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isOpen",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["isOpenChange"]
+		}]
+	}
+});
+export { UiDropdownButtonComponent };
+
+//# sourceMappingURL=area8975-ui-dropdown-button.mjs.map

package/fesm2022/area8975-ui-dropdown-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-dropdown-button.mjs","names":[],"sources":["../../../projects/ui/dropdown-button/dropdown-button.component.ts","../../../projects/ui/dropdown-button/dropdown-button.component.html"],"sourcesContent":["import { Component, input, model } from '@angular/core';\n\nimport { UiButtonComponent } from '@area8975/ui/button';\nimport {\n    ButtonAppearance,\n    ButtonIntent\n} from '@area8975/ui/button';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronDown } from '@ng-icons/heroicons/outline';\n\n\n@Component({\n    selector: 'ui-dropdown-button',\n    templateUrl: './dropdown-button.component.html',\n    imports: [UiButtonComponent, NgIcon],\n    providers: [provideIcons({ heroChevronDown })]\n})\nexport class UiDropdownButtonComponent {\n    readonly intent = input<ButtonIntent>('secondary');\n    readonly appearance = input<ButtonAppearance>('white');\n    readonly icon = input<string>('heroChevronDown');\n    readonly isOpen = model.required<boolean>();\n}\n","<ui-button\n    [intent]=\"intent()\"\n    [appearance]=\"appearance()\"\n    (click)=\"isOpen.update(value => !value)\"\n>\n    <ng-content />\n    <ng-icon\n        name=\"heroChevronDown\"\n        class=\"size-4 transition-transform duration-100 shrink-0\"\n        [class.rotate-180]=\"isOpen()\"\n    />\n</ui-button>\n"],"mappings":";;;;;AAiBA,IAAa,4BAAb,MAAa,0BAAyB;CACzB,SAAS,MAAoB,aAAY,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACzC,aAAa,MAAwB,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAC7C,OAAO,MAAc,mBAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACvC,SAAS,MAAM,SAAmB,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAJlC,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAyB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAzB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAyB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,QAAA,eAAA;EAAA,WAFvB,CAAC,aAAa,EAAE,gBAAe,CAAE,CAAC;EAAC,UAAA;EAAA,UCflD;EAYA,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;CAAyB,YAAA,CAAA;EANrC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAoB,SAErB,CAAC,mBAAmB,MAAM;GAAC,WACzB,CAAC,aAAa,EAAE,gBAAe,CAAE,CAAC;GAAC,UAAA;EAAA,CAAA"}