@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

package/fesm2022/rt-tools-ui-kit-v2-ripple.mjs

@@ -1,118 +1,116 @@
-import * as i0 from '@angular/core';
-import { inject, ElementRef, Renderer2, DestroyRef, input, booleanAttribute, Directive } from '@angular/core';
-
-const BEM_BLOCK = 'rt-ripple';
-/** Сколько живёт один слой волны. Совпадает с длительностью в стилях блока. */
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, Renderer2, booleanAttribute, inject, input } from "@angular/core";
+const BEM_BLOCK = "rt-ripple";
 const RIPPLE_LIFETIME_MS = 550;
-/**
- * Волна нажатия. Ставится на элемент, который нажимают, и рисует расходящийся
- * от точки касания круг.
- *
- * Волна живёт в своём обрезающем слое внутри элемента, а не прямо в нём:
- * `overflow: hidden` на самой кнопке срезал бы всё, что торчит за её край, —
- * у кнопки-значка так стоит метка, вынесенная на два пикселя наружу.
- *
- * @example
- * ```html
- * <button rtRipple>Сохранить</button>
- * <button rtRipple [rippleDisabled]="loading()">Сохранить</button>
- * ```
- */
-class RtRippleDirective {
-    #el;
-    #renderer;
-    #destroyRef;
-    /** Слои, которые ещё гаснут: снимаются, если элемент умрёт раньше их. */
-    #live;
-    /** Обрезающий слой заводится при первом нажатии: у кнопки, которую не нажали, его нет. */
-    #area;
-    /** Гасит незакончившиеся волны: иначе таймер трогает снятый из дерева узел. */
-    constructor() {
-        this.#el = inject(ElementRef);
-        this.#renderer = inject(Renderer2);
-        this.#destroyRef = inject(DestroyRef);
-        /** Слои, которые ещё гаснут: снимаются, если элемент умрёт раньше их. */
-        this.#live = new Set();
-        /** Обрезающий слой заводится при первом нажатии: у кнопки, которую не нажали, его нет. */
-        this.#area = null;
-        /**
-         * Отключает волну, не трогая остальное поведение элемента.
-         * Отключённая и загружающаяся кнопка волны не даёт.
-         */
-        this.rippleDisabled = input(false, { ...(ngDevMode ? { debugName: "rippleDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.#destroyRef.onDestroy(() => {
-            for (const timer of this.#live) {
-                clearTimeout(timer);
-            }
-            this.#live.clear();
-        });
-    }
-    /**
-     * Ставит один слой волны от точки нажатия и снимает его, когда тот отгорит.
-     *
-     * Радиус считается по дальнему углу элемента: волна из угла должна накрыть
-     * противоположный, иначе на широкой кнопке она обрывается на полпути.
-     */
-    launch(event) {
-        const host = this.#el.nativeElement;
-        if (this.rippleDisabled() || host.disabled) {
-            return;
-        }
-        const box = host.getBoundingClientRect();
-        const x = event.clientX - box.left;
-        const y = event.clientY - box.top;
-        const radius = Math.hypot(Math.max(x, box.width - x), Math.max(y, box.height - y));
-        const area = this.#ensureArea(host);
-        const layer = this.#renderer.createElement('span');
-        this.#renderer.addClass(layer, `${BEM_BLOCK}__wave`);
-        this.#renderer.setStyle(layer, 'left', `${x - radius}px`);
-        this.#renderer.setStyle(layer, 'top', `${y - radius}px`);
-        this.#renderer.setStyle(layer, 'width', `${radius * 2}px`);
-        this.#renderer.setStyle(layer, 'height', `${radius * 2}px`);
-        this.#renderer.appendChild(area, layer);
-        const timer = setTimeout(() => {
-            this.#live.delete(timer);
-            if (layer.parentNode) {
-                this.#renderer.removeChild(area, layer);
-            }
-        }, RIPPLE_LIFETIME_MS);
-        this.#live.add(timer);
-    }
-    /** Обрезающий слой один на элемент: он повторяет его скругление и не ловит указатель. */
-    #ensureArea(host) {
-        if (this.#area?.parentNode) {
-            return this.#area;
-        }
-        /* Обрезающий слой стоит absolute, и ему нужен позиционированный предок. Позиция
-           ставится здесь, а не правилом блока: правило висело бы на каждой кнопке кита и
-           меняло растеризацию кадров витрины, ничего не двигая в раскладке. */
-        if (getComputedStyle(host).position === 'static') {
-            this.#renderer.setStyle(host, 'position', 'relative');
-        }
-        const area = this.#renderer.createElement('span');
-        this.#renderer.addClass(area, `${BEM_BLOCK}__area`);
-        this.#renderer.setAttribute(area, 'aria-hidden', 'true');
-        this.#renderer.appendChild(host, area);
-        this.#area = area;
-        return area;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtRippleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtRippleDirective, isStandalone: true, selector: "[rtRipple]", inputs: { rippleDisabled: { classPropertyName: "rippleDisabled", publicName: "rippleDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "launch($event)" }, classAttribute: "rt-ripple" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtRippleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtRipple]',
-                    host: {
-                        class: BEM_BLOCK,
-                        '(pointerdown)': 'launch($event)',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { rippleDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "rippleDisabled", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var RtRippleDirective = class RtRippleDirective {
+	#el;
+	#renderer;
+	#destroyRef;
+	#live;
+	#area;
+	constructor() {
+		this.#el = inject(ElementRef);
+		this.#renderer = inject(Renderer2);
+		this.#destroyRef = inject(DestroyRef);
+		this.#live = /* @__PURE__ */ new Set();
+		this.#area = null;
+		this.rippleDisabled = input(false, {
+			...ngDevMode ? { debugName: "rippleDisabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.#destroyRef.onDestroy(() => {
+			for (const timer of this.#live) clearTimeout(timer);
+			this.#live.clear();
+		});
+	}
+	launch(event) {
+		const host = this.#el.nativeElement;
+		if (this.rippleDisabled() || host.disabled) return;
+		const box = host.getBoundingClientRect();
+		const x = event.clientX - box.left;
+		const y = event.clientY - box.top;
+		const radius = Math.hypot(Math.max(x, box.width - x), Math.max(y, box.height - y));
+		const area = this.#ensureArea(host);
+		const layer = this.#renderer.createElement("span");
+		this.#renderer.addClass(layer, `${BEM_BLOCK}__wave`);
+		this.#renderer.setStyle(layer, "left", `${x - radius}px`);
+		this.#renderer.setStyle(layer, "top", `${y - radius}px`);
+		this.#renderer.setStyle(layer, "width", `${radius * 2}px`);
+		this.#renderer.setStyle(layer, "height", `${radius * 2}px`);
+		this.#renderer.appendChild(area, layer);
+		const timer = setTimeout(() => {
+			this.#live.delete(timer);
+			if (layer.parentNode) this.#renderer.removeChild(area, layer);
+		}, RIPPLE_LIFETIME_MS);
+		this.#live.add(timer);
+	}
+	#ensureArea(host) {
+		if (this.#area?.parentNode) return this.#area;
+		if (getComputedStyle(host).position === "static") this.#renderer.setStyle(host, "position", "relative");
+		const area = this.#renderer.createElement("span");
+		this.#renderer.addClass(area, `${BEM_BLOCK}__area`);
+		this.#renderer.setAttribute(area, "aria-hidden", "true");
+		this.#renderer.appendChild(host, area);
+		this.#area = area;
+		return area;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtRippleDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: RtRippleDirective,
+			isStandalone: true,
+			selector: "[rtRipple]",
+			inputs: { rippleDisabled: {
+				classPropertyName: "rippleDisabled",
+				publicName: "rippleDisabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			} },
+			host: {
+				listeners: { "pointerdown": "launch($event)" },
+				classAttribute: "rt-ripple"
+			},
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtRippleDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[rtRipple]",
+			host: {
+				class: BEM_BLOCK,
+				"(pointerdown)": "launch($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { rippleDisabled: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "rippleDisabled",
+			required: false
+		}]
+	}] }
+});
 export { RtRippleDirective };
-//# sourceMappingURL=rt-tools-ui-kit-v2-ripple.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-ripple.mjs.map

package/fesm2022/rt-tools-ui-kit-v2-ripple.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-ripple.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/ripple/rt-ripple.directive.ts","../../../projects/ui-kit-v2/src/lib/components/ripple/rt-tools-ui-kit-v2-ripple.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, DestroyRef, Directive, ElementRef, inject, input, InputSignalWithTransform, Renderer2 } from '@angular/core';\n\nconst BEM_BLOCK: string = 'rt-ripple';\n\n/** Сколько живёт один слой волны. Совпадает с длительностью в стилях блока. */\nconst RIPPLE_LIFETIME_MS: number = 550;\n\n/**\n * Волна нажатия. Ставится на элемент, который нажимают, и рисует расходящийся\n * от точки касания круг.\n *\n * Волна живёт в своём обрезающем слое внутри элемента, а не прямо в нём:\n * `overflow: hidden` на самой кнопке срезал бы всё, что торчит за её край, —\n * у кнопки-значка так стоит метка, вынесенная на два пикселя наружу.\n *\n * @example\n * ```html\n * <button rtRipple>Сохранить</button>\n * <button rtRipple [rippleDisabled]=\"loading()\">Сохранить</button>\n * ```\n */\n@Directive({\n    selector: '[rtRipple]',\n    host: {\n        class: BEM_BLOCK,\n        '(pointerdown)': 'launch($event)',\n    },\n})\nexport class RtRippleDirective {\n    readonly #el: ElementRef<HTMLElement> = inject<ElementRef<HTMLElement>>(ElementRef);\n    readonly #renderer: Renderer2 = inject(Renderer2);\n    readonly #destroyRef: DestroyRef = inject(DestroyRef);\n\n    /** Слои, которые ещё гаснут: снимаются, если элемент умрёт раньше их. */\n    readonly #live: Set<ReturnType<typeof setTimeout>> = new Set<ReturnType<typeof setTimeout>>();\n\n    /** Обрезающий слой заводится при первом нажатии: у кнопки, которую не нажали, его нет. */\n    #area: HTMLElement | null = null;\n\n    /**\n     * Отключает волну, не трогая остальное поведение элемента.\n     * Отключённая и загружающаяся кнопка волны не даёт.\n     */\n    public readonly rippleDisabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Гасит незакончившиеся волны: иначе таймер трогает снятый из дерева узел. */\n    constructor() {\n        this.#destroyRef.onDestroy((): void => {\n            for (const timer of this.#live) {\n                clearTimeout(timer);\n            }\n            this.#live.clear();\n        });\n    }\n\n    /**\n     * Ставит один слой волны от точки нажатия и снимает его, когда тот отгорит.\n     *\n     * Радиус считается по дальнему углу элемента: волна из угла должна накрыть\n     * противоположный, иначе на широкой кнопке она обрывается на полпути.\n     */\n    public launch(event: PointerEvent): void {\n        const host: HTMLElement = this.#el.nativeElement;\n        if (this.rippleDisabled() || (host as HTMLButtonElement).disabled) {\n            return;\n        }\n\n        const box: DOMRect = host.getBoundingClientRect();\n        const x: number = event.clientX - box.left;\n        const y: number = event.clientY - box.top;\n        const radius: number = Math.hypot(Math.max(x, box.width - x), Math.max(y, box.height - y));\n\n        const area: HTMLElement = this.#ensureArea(host);\n        const layer: HTMLElement = this.#renderer.createElement('span');\n        this.#renderer.addClass(layer, `${BEM_BLOCK}__wave`);\n        this.#renderer.setStyle(layer, 'left', `${x - radius}px`);\n        this.#renderer.setStyle(layer, 'top', `${y - radius}px`);\n        this.#renderer.setStyle(layer, 'width', `${radius * 2}px`);\n        this.#renderer.setStyle(layer, 'height', `${radius * 2}px`);\n        this.#renderer.appendChild(area, layer);\n\n        const timer: ReturnType<typeof setTimeout> = setTimeout((): void => {\n            this.#live.delete(timer);\n            if (layer.parentNode) {\n                this.#renderer.removeChild(area, layer);\n            }\n        }, RIPPLE_LIFETIME_MS);\n        this.#live.add(timer);\n    }\n\n    /** Обрезающий слой один на элемент: он повторяет его скругление и не ловит указатель. */\n    #ensureArea(host: HTMLElement): HTMLElement {\n        if (this.#area?.parentNode) {\n            return this.#area;\n        }\n\n        /* Обрезающий слой стоит absolute, и ему нужен позиционированный предок. Позиция\n           ставится здесь, а не правилом блока: правило висело бы на каждой кнопке кита и\n           меняло растеризацию кадров витрины, ничего не двигая в раскладке. */\n        if (getComputedStyle(host).position === 'static') {\n            this.#renderer.setStyle(host, 'position', 'relative');\n        }\n\n        const area: HTMLElement = this.#renderer.createElement('span');\n        this.#renderer.addClass(area, `${BEM_BLOCK}__area`);\n        this.#renderer.setAttribute(area, 'aria-hidden', 'true');\n        this.#renderer.appendChild(host, area);\n        this.#area = area;\n\n        return area;\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"rt-tools-ui-kit-v2-ripple.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/ripple/rt-ripple.directive.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, DestroyRef, Directive, ElementRef, inject, input, InputSignalWithTransform, Renderer2 } from '@angular/core';\n\nconst BEM_BLOCK: string = 'rt-ripple';\n\n/** Сколько живёт один слой волны. Совпадает с длительностью в стилях блока. */\nconst RIPPLE_LIFETIME_MS: number = 550;\n\n/**\n * Волна нажатия. Ставится на элемент, который нажимают, и рисует расходящийся\n * от точки касания круг.\n *\n * Волна живёт в своём обрезающем слое внутри элемента, а не прямо в нём:\n * `overflow: hidden` на самой кнопке срезал бы всё, что торчит за её край, —\n * у кнопки-значка так стоит метка, вынесенная на два пикселя наружу.\n *\n * @example\n * ```html\n * <button rtRipple>Сохранить</button>\n * <button rtRipple [rippleDisabled]=\"loading()\">Сохранить</button>\n * ```\n */\n@Directive({\n    selector: '[rtRipple]',\n    host: {\n        class: BEM_BLOCK,\n        '(pointerdown)': 'launch($event)',\n    },\n})\nexport class RtRippleDirective {\n    readonly #el: ElementRef<HTMLElement> = inject<ElementRef<HTMLElement>>(ElementRef);\n    readonly #renderer: Renderer2 = inject(Renderer2);\n    readonly #destroyRef: DestroyRef = inject(DestroyRef);\n\n    /** Слои, которые ещё гаснут: снимаются, если элемент умрёт раньше их. */\n    readonly #live: Set<ReturnType<typeof setTimeout>> = new Set<ReturnType<typeof setTimeout>>();\n\n    /** Обрезающий слой заводится при первом нажатии: у кнопки, которую не нажали, его нет. */\n    #area: HTMLElement | null = null;\n\n    /**\n     * Отключает волну, не трогая остальное поведение элемента.\n     * Отключённая и загружающаяся кнопка волны не даёт.\n     */\n    public readonly rippleDisabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Гасит незакончившиеся волны: иначе таймер трогает снятый из дерева узел. */\n    constructor() {\n        this.#destroyRef.onDestroy((): void => {\n            for (const timer of this.#live) {\n                clearTimeout(timer);\n            }\n            this.#live.clear();\n        });\n    }\n\n    /**\n     * Ставит один слой волны от точки нажатия и снимает его, когда тот отгорит.\n     *\n     * Радиус считается по дальнему углу элемента: волна из угла должна накрыть\n     * противоположный, иначе на широкой кнопке она обрывается на полпути.\n     */\n    public launch(event: PointerEvent): void {\n        const host: HTMLElement = this.#el.nativeElement;\n        if (this.rippleDisabled() || (host as HTMLButtonElement).disabled) {\n            return;\n        }\n\n        const box: DOMRect = host.getBoundingClientRect();\n        const x: number = event.clientX - box.left;\n        const y: number = event.clientY - box.top;\n        const radius: number = Math.hypot(Math.max(x, box.width - x), Math.max(y, box.height - y));\n\n        const area: HTMLElement = this.#ensureArea(host);\n        const layer: HTMLElement = this.#renderer.createElement('span');\n        this.#renderer.addClass(layer, `${BEM_BLOCK}__wave`);\n        this.#renderer.setStyle(layer, 'left', `${x - radius}px`);\n        this.#renderer.setStyle(layer, 'top', `${y - radius}px`);\n        this.#renderer.setStyle(layer, 'width', `${radius * 2}px`);\n        this.#renderer.setStyle(layer, 'height', `${radius * 2}px`);\n        this.#renderer.appendChild(area, layer);\n\n        const timer: ReturnType<typeof setTimeout> = setTimeout((): void => {\n            this.#live.delete(timer);\n            if (layer.parentNode) {\n                this.#renderer.removeChild(area, layer);\n            }\n        }, RIPPLE_LIFETIME_MS);\n        this.#live.add(timer);\n    }\n\n    /** Обрезающий слой один на элемент: он повторяет его скругление и не ловит указатель. */\n    #ensureArea(host: HTMLElement): HTMLElement {\n        if (this.#area?.parentNode) {\n            return this.#area;\n        }\n\n        /* Обрезающий слой стоит absolute, и ему нужен позиционированный предок. Позиция\n           ставится здесь, а не правилом блока: правило висело бы на каждой кнопке кита и\n           меняло растеризацию кадров витрины, ничего не двигая в раскладке. */\n        if (getComputedStyle(host).position === 'static') {\n            this.#renderer.setStyle(host, 'position', 'relative');\n        }\n\n        const area: HTMLElement = this.#renderer.createElement('span');\n        this.#renderer.addClass(area, `${BEM_BLOCK}__area`);\n        this.#renderer.setAttribute(area, 'aria-hidden', 'true');\n        this.#renderer.appendChild(host, area);\n        this.#area = area;\n\n        return area;\n    }\n}\n"],"mappings":"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"}