ngwr 14.9.1 → 14.11.0

package/fesm2022/ngwr-action-sheet.mjs

@@ -1,91 +1,211 @@
-import * as i0 from '@angular/core';
-import { inject, model, input, output, computed, ViewEncapsulation, Component } from '@angular/core';
-import { WrDrawer, WrDrawerTitle } from 'ngwr/drawer';
-import { useI18nText } from 'ngwr/i18n';
-import { WrIcon } from 'ngwr/icon';
-import { WrHaptics } from 'ngwr/platform';
-
-/**
- * @license
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
- */
-/**
- * iOS-style action sheet — a bottom sheet offering a short list of choices.
- * A thin preset over {@link WrDrawer} (bottom position, rounded, grab handle,
- * safe-area padding), driven by data rather than projected content.
- *
- * Pass `actions`; picking one emits `action` and closes the sheet. Rows with
- * `role: 'destructive'` are painted in the danger colour, and `role: 'cancel'`
- * rows drop to a separate group at the bottom. Dismissing via the backdrop,
- * `Escape`, or a swipe-down closes without emitting. Picking fires a light
- * {@link WrHaptics} tick.
- *
- * @example
- * ```html
- * <wr-action-sheet
- *   [(open)]="sheetOpen"
- *   title="Photo"
- *   [actions]="[
- *     { label: 'Take Photo', icon: 'camera', value: 'camera' },
- *     { label: 'Choose from Library', icon: 'image', value: 'library' },
- *     { label: 'Delete', role: 'destructive', value: 'delete' },
- *     { label: 'Cancel', role: 'cancel' },
- *   ]"
- *   (action)="onPick($event)"
- * />
- * ```
- *
- * @see https://ngwr.dev/reference/components/action-sheet
- */
-class WrActionSheet {
-    haptics = inject(WrHaptics);
-    /** Whether the sheet is open. Two-way. @default false */
-    open = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    /** The rows to offer. */
-    actions = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
-    /** Optional bold heading above the rows. */
-    title = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    /**
-     * Name announced for the dialog when there is no visible `title`. Falls back to
-     * `actionSheet.label`, then `'Actions'` — it used to be that English string,
-     * written into the template of a component whose every other string comes from
-     * the caller.
-     */
-    titleFallback = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "titleFallback" }] : /* istanbul ignore next */ []));
-    resolvedTitleFallback = useI18nText(this.titleFallback, 'actionSheet.label', 'Actions');
-    /** Optional muted sub-heading under the title. */
-    message = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
-    /** Fires with the chosen row (never fires on a dismiss). */
-    action = output();
-    mainActions = computed(() => this.actions().filter(a => a.role !== 'cancel'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mainActions" }] : /* istanbul ignore next */ []));
-    cancelActions = computed(() => this.actions().filter(a => a.role === 'cancel'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "cancelActions" }] : /* istanbul ignore next */ []));
-    select(item) {
-        if (item.disabled)
-            return;
-        this.haptics.selection();
-        this.action.emit(item);
-        this.open.set(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrActionSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: WrActionSheet, isStandalone: true, selector: "wr-action-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleFallback: { classPropertyName: "titleFallback", publicName: "titleFallback", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", action: "action" }, ngImport: i0, template: "<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>{{ resolvedTitleFallback() }}</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n", dependencies: [{ kind: "component", type: WrDrawer, selector: "wr-drawer", inputs: ["open", "position", "width", "height", "maxHeight", "rounded", "showHandle", "safeArea", "hasBackdrop", "closeOnBackdropClick", "closeOnEscape", "closable", "closeLabel"], outputs: ["openChange"] }, { kind: "directive", type: WrDrawerTitle, selector: "[wrDrawerTitle]" }, { kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrActionSheet, decorators: [{
-            type: Component,
-            args: [{ selector: 'wr-action-sheet', encapsulation: ViewEncapsulation.None, imports: [WrDrawer, WrDrawerTitle, WrIcon], template: "<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>{{ resolvedTitleFallback() }}</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n" }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleFallback", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
-
+import * as i0 from "@angular/core";
+import { Component, ViewEncapsulation, computed, inject, input, model, output } from "@angular/core";
+import { WrDrawer, WrDrawerTitle } from "ngwr/drawer";
+import { useI18nText } from "ngwr/i18n";
+import { WrIcon } from "ngwr/icon";
+import { WrHaptics } from "ngwr/platform";
 /**
- * Generated bundle index. Do not edit.
- */
-
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
+var WrActionSheet = class WrActionSheet {
+	haptics = inject(WrHaptics);
+	open = model(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	actions = input([], ...ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []);
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	titleFallback = input(null, ...ngDevMode ? [{ debugName: "titleFallback" }] : /* istanbul ignore next */ []);
+	resolvedTitleFallback = useI18nText(this.titleFallback, "actionSheet.label", "Actions");
+	message = input("", ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
+	panelClass = input(null, ...ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []);
+	action = output();
+	mainActions = computed(() => this.actions().filter((a) => a.role !== "cancel"), ...ngDevMode ? [{ debugName: "mainActions" }] : /* istanbul ignore next */ []);
+	cancelActions = computed(() => this.actions().filter((a) => a.role === "cancel"), ...ngDevMode ? [{ debugName: "cancelActions" }] : /* istanbul ignore next */ []);
+	select(item) {
+		if (item.disabled) return;
+		this.haptics.selection();
+		this.action.emit(item);
+		this.open.set(false);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: WrActionSheet,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: WrActionSheet,
+		isStandalone: true,
+		selector: "wr-action-sheet",
+		inputs: {
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			actions: {
+				classPropertyName: "actions",
+				publicName: "actions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			titleFallback: {
+				classPropertyName: "titleFallback",
+				publicName: "titleFallback",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			message: {
+				classPropertyName: "message",
+				publicName: "message",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			panelClass: {
+				classPropertyName: "panelClass",
+				publicName: "panelClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			open: "openChange",
+			action: "action"
+		},
+		ngImport: i0,
+		template: "<wr-drawer\n  [(open)]=\"open\"\n  position=\"bottom\"\n  height=\"auto\"\n  rounded\n  showHandle\n  safeArea\n  maxHeight=\"90dvh\"\n  [panelClass]=\"panelClass()\"\n>\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>{{ resolvedTitleFallback() }}</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n",
+		dependencies: [
+			{
+				kind: "component",
+				type: WrDrawer,
+				selector: "wr-drawer",
+				inputs: [
+					"open",
+					"position",
+					"width",
+					"height",
+					"maxHeight",
+					"rounded",
+					"showHandle",
+					"safeArea",
+					"hasBackdrop",
+					"closeOnBackdropClick",
+					"closeOnEscape",
+					"closable",
+					"closeLabel",
+					"panelClass"
+				],
+				outputs: ["openChange"]
+			},
+			{
+				kind: "directive",
+				type: WrDrawerTitle,
+				selector: "[wrDrawerTitle]"
+			},
+			{
+				kind: "component",
+				type: WrIcon,
+				selector: "wr-icon",
+				inputs: ["name"]
+			}
+		],
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: WrActionSheet,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wr-action-sheet",
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				WrDrawer,
+				WrDrawerTitle,
+				WrIcon
+			],
+			template: "<wr-drawer\n  [(open)]=\"open\"\n  position=\"bottom\"\n  height=\"auto\"\n  rounded\n  showHandle\n  safeArea\n  maxHeight=\"90dvh\"\n  [panelClass]=\"panelClass()\"\n>\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>{{ resolvedTitleFallback() }}</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n"
+		}]
+	}],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		actions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "actions",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		titleFallback: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "titleFallback",
+				required: false
+			}]
+		}],
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: false
+			}]
+		}],
+		panelClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "panelClass",
+				required: false
+			}]
+		}],
+		action: [{
+			type: i0.Output,
+			args: ["action"]
+		}]
+	}
+});
 export { WrActionSheet };
-//# sourceMappingURL=ngwr-action-sheet.mjs.map
+
+//# sourceMappingURL=ngwr-action-sheet.mjs.map

package/fesm2022/ngwr-action-sheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-action-sheet.mjs","sources":["../../../projects/lib/action-sheet/action-sheet.ts","../../../projects/lib/action-sheet/action-sheet.html","../../../projects/lib/action-sheet/ngwr-action-sheet.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, computed, inject, input, model, output } from '@angular/core';\n\nimport { WrDrawer, WrDrawerTitle } from 'ngwr/drawer';\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrIcon } from 'ngwr/icon';\nimport { WrHaptics } from 'ngwr/platform';\n\nimport type { WrActionSheetAction } from './interfaces';\n\n/**\n * iOS-style action sheet — a bottom sheet offering a short list of choices.\n * A thin preset over {@link WrDrawer} (bottom position, rounded, grab handle,\n * safe-area padding), driven by data rather than projected content.\n *\n * Pass `actions`; picking one emits `action` and closes the sheet. Rows with\n * `role: 'destructive'` are painted in the danger colour, and `role: 'cancel'`\n * rows drop to a separate group at the bottom. Dismissing via the backdrop,\n * `Escape`, or a swipe-down closes without emitting. Picking fires a light\n * {@link WrHaptics} tick.\n *\n * @example\n * ```html\n * <wr-action-sheet\n *   [(open)]=\"sheetOpen\"\n *   title=\"Photo\"\n *   [actions]=\"[\n *     { label: 'Take Photo', icon: 'camera', value: 'camera' },\n *     { label: 'Choose from Library', icon: 'image', value: 'library' },\n *     { label: 'Delete', role: 'destructive', value: 'delete' },\n *     { label: 'Cancel', role: 'cancel' },\n *   ]\"\n *   (action)=\"onPick($event)\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/action-sheet\n */\n@Component({\n  selector: 'wr-action-sheet',\n  templateUrl: './action-sheet.html',\n  encapsulation: ViewEncapsulation.None,\n  imports: [WrDrawer, WrDrawerTitle, WrIcon],\n})\nexport class WrActionSheet {\n  private readonly haptics = inject(WrHaptics);\n\n  /** Whether the sheet is open. Two-way. @default false */\n  readonly open = model<boolean>(false);\n\n  /** The rows to offer. */\n  readonly actions = input<readonly WrActionSheetAction[]>([]);\n\n  /** Optional bold heading above the rows. */\n  readonly title = input<string>('');\n\n  /**\n   * Name announced for the dialog when there is no visible `title`. Falls back to\n   * `actionSheet.label`, then `'Actions'` — it used to be that English string,\n   * written into the template of a component whose every other string comes from\n   * the caller.\n   */\n  readonly titleFallback = input<string | null>(null);\n\n  protected readonly resolvedTitleFallback = useI18nText(this.titleFallback, 'actionSheet.label', 'Actions');\n\n  /** Optional muted sub-heading under the title. */\n  readonly message = input<string>('');\n\n  /** Fires with the chosen row (never fires on a dismiss). */\n  readonly action = output<WrActionSheetAction>();\n\n  protected readonly mainActions = computed(() => this.actions().filter(a => a.role !== 'cancel'));\n  protected readonly cancelActions = computed(() => this.actions().filter(a => a.role === 'cancel'));\n\n  protected select(item: WrActionSheetAction): void {\n    if (item.disabled) return;\n    this.haptics.selection();\n    this.action.emit(item);\n    this.open.set(false);\n  }\n}\n","<wr-drawer [(open)]=\"open\" position=\"bottom\" height=\"auto\" rounded showHandle safeArea maxHeight=\"90dvh\">\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>{{ resolvedTitleFallback() }}</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAAA;;;;;AAKG;AAWH;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BG;MAOU,aAAa,CAAA;AACP,IAAA,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC;;IAGnC,IAAI,GAAG,KAAK,CAAU,KAAK;6EAAC;;IAG5B,OAAO,GAAG,KAAK,CAAiC,EAAE;gFAAC;;IAGnD,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;AAElC;;;;;AAKG;IACM,aAAa,GAAG,KAAK,CAAgB,IAAI;sFAAC;IAEhC,qBAAqB,GAAG,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,mBAAmB,EAAE,SAAS,CAAC;;IAGjG,OAAO,GAAG,KAAK,CAAS,EAAE;gFAAC;;IAG3B,MAAM,GAAG,MAAM,EAAuB;IAE5B,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC;oFAAC;IAC7E,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC;sFAAC;AAExF,IAAA,MAAM,CAAC,IAAyB,EAAA;QACxC,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;AACxB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;IACtB;uGApCW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,mwBClD1B,+6DAoDA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDJY,QAAQ,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,SAAA,EAAA,YAAA,EAAA,UAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,4DAAE,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAE9B,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;+BACE,iBAAiB,EAAA,aAAA,EAEZ,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,CAAC,QAAQ,EAAE,aAAa,EAAE,MAAM,CAAC,EAAA,QAAA,EAAA,+6DAAA,EAAA;;;AEhD5C;;AAEG;;"}
+{"version":3,"file":"ngwr-action-sheet.mjs","names":[],"sources":["../../../projects/lib/action-sheet/action-sheet.ts","../../../projects/lib/action-sheet/action-sheet.html"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Component, ViewEncapsulation, computed, inject, input, model, output } from '@angular/core';\n\nimport { WrDrawer, WrDrawerTitle } from 'ngwr/drawer';\nimport { useI18nText } from 'ngwr/i18n';\nimport { WrIcon } from 'ngwr/icon';\nimport { WrHaptics } from 'ngwr/platform';\nimport type { WrClassInput } from 'ngwr/utils';\n\nimport type { WrActionSheetAction } from './interfaces';\n\n/**\n * iOS-style action sheet — a bottom sheet offering a short list of choices.\n * A thin preset over {@link WrDrawer} (bottom position, rounded, grab handle,\n * safe-area padding), driven by data rather than projected content.\n *\n * Pass `actions`; picking one emits `action` and closes the sheet. Rows with\n * `role: 'destructive'` are painted in the danger colour, and `role: 'cancel'`\n * rows drop to a separate group at the bottom. Dismissing via the backdrop,\n * `Escape`, or a swipe-down closes without emitting. Picking fires a light\n * {@link WrHaptics} tick.\n *\n * @example\n * ```html\n * <wr-action-sheet\n *   [(open)]=\"sheetOpen\"\n *   title=\"Photo\"\n *   [actions]=\"[\n *     { label: 'Take Photo', icon: 'camera', value: 'camera' },\n *     { label: 'Choose from Library', icon: 'image', value: 'library' },\n *     { label: 'Delete', role: 'destructive', value: 'delete' },\n *     { label: 'Cancel', role: 'cancel' },\n *   ]\"\n *   (action)=\"onPick($event)\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/action-sheet\n */\n@Component({\n  selector: 'wr-action-sheet',\n  templateUrl: './action-sheet.html',\n  encapsulation: ViewEncapsulation.None,\n  imports: [WrDrawer, WrDrawerTitle, WrIcon],\n})\nexport class WrActionSheet {\n  private readonly haptics = inject(WrHaptics);\n\n  /** Whether the sheet is open. Two-way. @default false */\n  readonly open = model<boolean>(false);\n\n  /** The rows to offer. */\n  readonly actions = input<readonly WrActionSheetAction[]>([]);\n\n  /** Optional bold heading above the rows. */\n  readonly title = input<string>('');\n\n  /**\n   * Name announced for the dialog when there is no visible `title`. Falls back to\n   * `actionSheet.label`, then `'Actions'` — it used to be that English string,\n   * written into the template of a component whose every other string comes from\n   * the caller.\n   */\n  readonly titleFallback = input<string | null>(null);\n\n  protected readonly resolvedTitleFallback = useI18nText(this.titleFallback, 'actionSheet.label', 'Actions');\n\n  /** Optional muted sub-heading under the title. */\n  readonly message = input<string>('');\n\n  /**\n   * Extra CSS classes for the sheet's panel, forwarded to the `<wr-drawer>` this\n   * renders. The drawer is in THIS component's template rather than in the\n   * consumer's, so a class on `<wr-action-sheet>` lands on a host that only\n   * wraps it — the panel itself is reachable no other way.\n   */\n  readonly panelClass = input<WrClassInput>(null);\n\n  /** Fires with the chosen row (never fires on a dismiss). */\n  readonly action = output<WrActionSheetAction>();\n\n  protected readonly mainActions = computed(() => this.actions().filter(a => a.role !== 'cancel'));\n  protected readonly cancelActions = computed(() => this.actions().filter(a => a.role === 'cancel'));\n\n  protected select(item: WrActionSheetAction): void {\n    if (item.disabled) return;\n    this.haptics.selection();\n    this.action.emit(item);\n    this.open.set(false);\n  }\n}\n","<wr-drawer\n  [(open)]=\"open\"\n  position=\"bottom\"\n  height=\"auto\"\n  rounded\n  showHandle\n  safeArea\n  maxHeight=\"90dvh\"\n  [panelClass]=\"panelClass()\"\n>\n  <div class=\"wr-action-sheet\">\n    @if (title() || message()) {\n      <div class=\"wr-action-sheet__header\">\n        @if (title()) {\n          <div class=\"wr-action-sheet__title\" wrDrawerTitle>{{ title() }}</div>\n        }\n        @if (message()) {\n          <div class=\"wr-action-sheet__message\">{{ message() }}</div>\n        }\n      </div>\n    }\n    <!-- The drawer opens as an aria-modal dialog; name it via wrDrawerTitle.\n         When there is no visible title, a screen-reader-only fallback keeps the\n         dialog from being announced as unnamed. -->\n    @if (!title()) {\n      <span class=\"wr-action-sheet__sr-only\" wrDrawerTitle>{{ resolvedTitleFallback() }}</span>\n    }\n\n    <div class=\"wr-action-sheet__group\">\n      @for (item of mainActions(); track $index) {\n        <button\n          type=\"button\"\n          class=\"wr-action-sheet__action\"\n          [class.wr-action-sheet__action--destructive]=\"item.role === 'destructive'\"\n          [disabled]=\"item.disabled\"\n          (click)=\"select(item)\"\n        >\n          @if (item.icon) {\n            <wr-icon class=\"wr-action-sheet__icon\" [name]=\"item.icon\" />\n          }\n          <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n        </button>\n      }\n    </div>\n\n    @if (cancelActions().length) {\n      <div class=\"wr-action-sheet__group wr-action-sheet__group--cancel\">\n        @for (item of cancelActions(); track $index) {\n          <button\n            type=\"button\"\n            class=\"wr-action-sheet__action wr-action-sheet__action--cancel\"\n            [disabled]=\"item.disabled\"\n            (click)=\"select(item)\"\n          >\n            <span class=\"wr-action-sheet__label\">{{ item.label }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</wr-drawer>\n"],"mappings":"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"}

package/fesm2022/ngwr-affix.mjs

@@ -1,142 +1,124 @@
-import { coerceNumberProperty } from '@angular/cdk/coercion';
-import { isPlatformBrowser } from '@angular/common';
-import * as i0 from '@angular/core';
-import { input, output, inject, ElementRef, DestroyRef, PLATFORM_ID, Injector, afterNextRender, effect, Directive } from '@angular/core';
-
-/**
- * @license
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
- */
-/**
- * Stick-on-scroll directive. Combines native CSS `position: sticky` with
- * an `IntersectionObserver`-driven `wr-affix--active` state class, so consumers
- * can style the element differently while it's pinned (e.g. add a
- * shadow, change the background, shrink the height).
- *
- * The host gets `position: sticky; top: ${offsetTop}px;` inline. A tiny
- * sentinel `<div>` is inserted just before the host — when the sentinel
- * scrolls out of view, the host is "stuck" and gets `wr-affix--active`
- * + an `(wrAffixChange)` emission.
- *
- * Works inside any scroll container without configuration — CSS sticky
- * picks the nearest scrollable ancestor automatically.
- *
- * @example
- * ```html
- * <header wrAffix [wrAffixOffsetTop]="0">
- *   <!-- adds a shadow once stuck -->
- * </header>
- * ```
- *
- * ```scss
- * header.wr-affix.wr-affix--active {
- *   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
- * }
- * ```
- */
-class WrAffix {
-    /** Pixels from the top of the scroll container when stuck. @default 0 */
-    offsetTop = input(0, { ...(ngDevMode ? { debugName: "offsetTop" } : /* istanbul ignore next */ {}), alias: 'wrAffixOffsetTop',
-        transform: (v) => coerceNumberProperty(v, 0) });
-    /** Emits `true` when the element becomes affixed, `false` when it unsticks. */
-    // eslint-disable-next-line @angular-eslint/no-output-rename -- keep wr-prefixed binding to match `[wrAffix]`
-    affixChange = output({ alias: 'wrAffixChange' });
-    host = inject(ElementRef);
-    destroyRef = inject(DestroyRef);
-    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    /**
-     * `afterNextRender`'s callback is not an injection context, and the observer
-     * cannot exist before the sentinel it watches — so the effect that rebuilds it
-     * is handed the injector explicitly.
-     */
-    injector = inject(Injector);
-    constructor() {
-        if (!this.isBrowser)
-            return;
-        afterNextRender(() => {
-            const el = this.host.nativeElement;
-            const parent = el.parentElement;
-            if (!parent)
-                return;
-            // Sentinel: an empty zero-height block placed immediately before
-            // the host. When the sentinel scrolls out of view, the host is
-            // necessarily "stuck" at the configured offset.
-            const sentinel = el.ownerDocument.createElement('div');
-            sentinel.className = 'wr-affix__sentinel';
-            sentinel.setAttribute('aria-hidden', 'true');
-            sentinel.style.cssText = 'height:0;width:100%;margin:0;padding:0;pointer-events:none;';
-            parent.insertBefore(sentinel, el);
-            // The observer reports STATE, not transitions: it delivers an entry for the
-            // sentinel as soon as it starts watching it — before anything has scrolled —
-            // and can repeat a state the host is already in (a resize, another crossing of
-            // the same threshold). `affixChange` is documented as the transition, so it
-            // only fires on one. The starting state is "not affixed", which is what the
-            // element already renders as, so that first entry is silent.
-            let affixed = false;
-            let observer = null;
-            // `rootMargin` is fixed for an observer's lifetime, so a changed offset means
-            // a NEW observer. Without this the two halves of the offset drifted apart:
-            // `[style.top.px]` is a live binding, so a header that animates its offset
-            // pinned at the new line while still flipping state at the old one.
-            // Re-observing re-delivers the current state, which the transition guard
-            // above absorbs when nothing has actually changed.
-            effect(onCleanup => {
-                const offset = this.offsetTop();
-                observer = new IntersectionObserver(([entry]) => {
-                    // NOT `!entry.isIntersecting` on its own. A sentinel is outside
-                    // the root in TWO directions, and only one of them means the
-                    // header has stuck: above the line because the page scrolled past
-                    // it, or below it because the host simply starts further down the
-                    // page than the first screen. The bare negation called both
-                    // "affixed", so any sticky element below the fold reported
-                    // `affixed = true` and painted `.wr-affix--active` on its very
-                    // first observer callback — before a pixel had scrolled — and
-                    // emitted a transition that never happened.
-                    //
-                    // `rootBounds.top` is the offset line (the negative `rootMargin`
-                    // above moves it), so a sentinel above it has genuinely gone by.
-                    const rootTop = entry.rootBounds?.top ?? offset;
-                    const next = !entry.isIntersecting && entry.boundingClientRect.top < rootTop;
-                    if (next === affixed)
-                        return;
-                    affixed = next;
-                    el.classList.toggle('wr-affix--active', next);
-                    this.affixChange.emit(next);
-                }, {
-                    // Trigger when the sentinel's top crosses the offset line.
-                    rootMargin: `-${offset}px 0px 0px 0px`,
-                    threshold: [0],
-                });
-                observer.observe(sentinel);
-                onCleanup(() => observer?.disconnect());
-            }, { injector: this.injector });
-            this.destroyRef.onDestroy(() => {
-                observer?.disconnect();
-                sentinel.remove();
-                el.classList.remove('wr-affix--active');
-            });
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrAffix, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: WrAffix, isStandalone: true, selector: "[wrAffix]", inputs: { offsetTop: { classPropertyName: "offsetTop", publicName: "wrAffixOffsetTop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { affixChange: "wrAffixChange" }, host: { properties: { "style.position": "\"sticky\"", "style.top.px": "offsetTop()" }, classAttribute: "wr-affix" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrAffix, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[wrAffix]',
-                    host: {
-                        class: 'wr-affix',
-                        '[style.position]': '"sticky"',
-                        '[style.top.px]': 'offsetTop()',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { offsetTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrAffixOffsetTop", required: false }] }], affixChange: [{ type: i0.Output, args: ["wrAffixChange"] }] } });
-
+import { coerceNumberProperty } from "@angular/cdk/coercion";
+import { isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, Injector, PLATFORM_ID, afterNextRender, effect, inject, input, output } from "@angular/core";
 /**
- * Generated bundle index. Do not edit.
- */
-
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
+var WrAffix = class WrAffix {
+	offsetTop = input(0, {
+		...ngDevMode ? { debugName: "offsetTop" } : /* istanbul ignore next */ {},
+		alias: "wrAffixOffsetTop",
+		transform: (v) => coerceNumberProperty(v, 0)
+	});
+	affixChange = output({ alias: "wrAffixChange" });
+	host = inject(ElementRef);
+	destroyRef = inject(DestroyRef);
+	isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+	injector = inject(Injector);
+	constructor() {
+		if (!this.isBrowser) return;
+		afterNextRender(() => {
+			const el = this.host.nativeElement;
+			const parent = el.parentElement;
+			if (!parent) return;
+			const sentinel = el.ownerDocument.createElement("div");
+			sentinel.className = "wr-affix__sentinel";
+			sentinel.setAttribute("aria-hidden", "true");
+			sentinel.style.cssText = "height:0;width:100%;margin:0;padding:0;pointer-events:none;";
+			parent.insertBefore(sentinel, el);
+			let affixed = false;
+			let observer = null;
+			effect((onCleanup) => {
+				const offset = this.offsetTop();
+				observer = new IntersectionObserver(([entry]) => {
+					const rootTop = entry.rootBounds?.top ?? offset;
+					const next = !entry.isIntersecting && entry.boundingClientRect.top < rootTop;
+					if (next === affixed) return;
+					affixed = next;
+					el.classList.toggle("wr-affix--active", next);
+					this.affixChange.emit(next);
+				}, {
+					rootMargin: `-${offset}px 0px 0px 0px`,
+					threshold: [0]
+				});
+				observer.observe(sentinel);
+				onCleanup(() => observer?.disconnect());
+			}, { injector: this.injector });
+			this.destroyRef.onDestroy(() => {
+				observer?.disconnect();
+				sentinel.remove();
+				el.classList.remove("wr-affix--active");
+			});
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: WrAffix,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: WrAffix,
+		isStandalone: true,
+		selector: "[wrAffix]",
+		inputs: { offsetTop: {
+			classPropertyName: "offsetTop",
+			publicName: "wrAffixOffsetTop",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { affixChange: "wrAffixChange" },
+		host: {
+			properties: {
+				"style.position": "\"sticky\"",
+				"style.top.px": "offsetTop()"
+			},
+			classAttribute: "wr-affix"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: WrAffix,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[wrAffix]",
+			host: {
+				class: "wr-affix",
+				"[style.position]": "\"sticky\"",
+				"[style.top.px]": "offsetTop()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		offsetTop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "wrAffixOffsetTop",
+				required: false
+			}]
+		}],
+		affixChange: [{
+			type: i0.Output,
+			args: ["wrAffixChange"]
+		}]
+	}
+});
 export { WrAffix };
-//# sourceMappingURL=ngwr-affix.mjs.map
+
+//# sourceMappingURL=ngwr-affix.mjs.map