npm - @rt-tools/ui-kit-v2 - Versions diffs - 0.33.0 → 0.34.1 - Mend

@rt-tools/ui-kit-v2 0.33.0 → 0.34.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (217) hide show

package/fesm2022/rt-tools-ui-kit-v2-toggle-button-group.mjs CHANGED Viewed

@@ -1,29 +1,93 @@
+import { NgTemplateOutlet } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, computed, input, output } from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, TemplateRef, ViewEncapsulation, booleanAttribute, computed, contentChild, forwardRef, inject, input, output, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
 import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
 import * as i1 from "@rt-tools/ui-kit-v2/radius";
 import { RtRadiusDirective } from "@rt-tools/ui-kit-v2/radius";
 import { RtTooltipDirective } from "@rt-tools/ui-kit-v2/tooltip";
+var RtToggleButtonOptionDirective = class RtToggleButtonOptionDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtToggleButtonOptionDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtToggleButtonOptionDirective,
+			isStandalone: true,
+			selector: "[rtToggleButtonOption]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtToggleButtonOptionDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtToggleButtonOption]" }]
+	}]
+});
 const BEM_BLOCK = "rt-toggle-button-group";
 const ICON_SIZE_BY_SIZE = Object.freeze({
 	sm: "xs",
 	md: "sm",
 	lg: "sm"
 });
+function isMany(value) {
+	return Array.isArray(value);
+}
 var RtToggleButtonGroupComponent = class RtToggleButtonGroupComponent {
 	constructor() {
+		this.#onChange = () => void 0;
+		this.#onTouched = () => void 0;
+		this.#bound = false;
+		this.#formValue = signal(void 0, ...ngDevMode ? [{ debugName: "#formValue" }] : /* istanbul ignore next */ []);
+		this.#disabledByForm = signal(false, ...ngDevMode ? [{ debugName: "#disabledByForm" }] : /* istanbul ignore next */ []);
+		this.#single = computed(() => {
+			const written = this.#formValue();
+			if (written === void 0) return this.value();
+			return isMany(written.value) ? void 0 : written.value ?? void 0;
+		}, ...ngDevMode ? [{ debugName: "#single" }] : /* istanbul ignore next */ []);
+		this.#many = computed(() => {
+			const written = this.#formValue();
+			if (written === void 0) return this.values();
+			return isMany(written.value) ? written.value : [];
+		}, ...ngDevMode ? [{ debugName: "#many" }] : /* istanbul ignore next */ []);
+		this.isDisabled = computed(() => this.disabled() || this.#disabledByForm(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+		this.optionTpl = contentChild(RtToggleButtonOptionDirective, ...ngDevMode ? [{ debugName: "optionTpl" }] : /* istanbul ignore next */ []);
 		this.iconSize = computed(() => ICON_SIZE_BY_SIZE[this.size()], ...ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []);
 		this.items = computed(() => {
 			const multiple = this.multiple();
-			const chosen = this.values();
-			const single = this.value();
-			const groupDisabled = this.disabled();
-			return this.options().map((option) => ({
-				option,
-				active: multiple ? chosen.includes(option.value) : single === option.value,
-				disabled: groupDisabled || !!option.disabled
-			}));
+			const chosen = this.#many();
+			const single = this.#single();
+			const groupDisabled = this.isDisabled();
+			return this.options().map((option) => {
+				const active = multiple ? chosen.includes(option.value) : single === option.value;
+				return {
+					option,
+					active,
+					disabled: groupDisabled || !!option.disabled,
+					context: {
+						$implicit: option,
+						active
+					}
+				};
+			});
 		}, ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
 		this.options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
 		this.value = input(void 0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
@@ -42,20 +106,54 @@ var RtToggleButtonGroupComponent = class RtToggleButtonGroupComponent {
 			...ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {},
 			transform: booleanAttribute
 		});
+		this.layout = input("row", ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+		this.appearance = input("segmented", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+		this.checkmark = input(false, {
+			...ngDevMode ? { debugName: "checkmark" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
 		this.valueChange = output();
 		this.valuesChange = output();
 	}
+	#onChange;
+	#onTouched;
+	#bound;
+	#formValue;
+	#disabledByForm;
+	#single;
+	#many;
+	writeValue(value) {
+		this.#formValue.set({ value });
+	}
+	registerOnChange(fn) {
+		this.#bound = true;
+		this.#onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.#onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.#disabledByForm.set(disabled);
+	}
 	onOptionClick(item) {
 		if (item.disabled) return;
 		const option = item.option;
 		if (!this.multiple()) {
+			this.#commit(option.value);
 			this.valueChange.emit(option.value);
 			return;
 		}
-		const chosen = this.values();
+		const chosen = this.#many();
 		const next = chosen.includes(option.value) ? chosen.filter((one) => one !== option.value) : [...chosen, option.value];
+		this.#commit(next);
 		this.valuesChange.emit(next);
 	}
+	#commit(value) {
+		if (!this.#bound) return;
+		this.#formValue.set({ value });
+		this.#onChange(value);
+		this.#onTouched();
+	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
@@ -129,6 +227,27 @@ var RtToggleButtonGroupComponent = class RtToggleButtonGroupComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				layout: {
+					classPropertyName: "layout",
+					publicName: "layout",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				appearance: {
+					classPropertyName: "appearance",
+					publicName: "appearance",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				checkmark: {
+					classPropertyName: "checkmark",
+					publicName: "checkmark",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: {
@@ -138,19 +257,44 @@ var RtToggleButtonGroupComponent = class RtToggleButtonGroupComponent {
 			host: {
 				properties: {
 					"class.rt-toggle-button-group--full-width": "fullWidth()",
+					"class.rt-toggle-button-group--wrap": "layout() === 'wrap'",
+					"class.rt-toggle-button-group--column": "layout() === 'column'",
 					"class.rt-toggle-button-group--md": "size() === 'md'",
-					"class.rt-toggle-button-group--lg": "size() === 'lg'"
+					"class.rt-toggle-button-group--lg": "size() === 'lg'",
+					"class.rt-toggle-button-group--chips": "appearance() === 'chips'"
 				},
 				classAttribute: "rt-toggle-button-group"
 			},
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => RtToggleButtonGroupComponent),
+				multi: true
+			}],
+			queries: [{
+				propertyName: "optionTpl",
+				first: true,
+				predicate: RtToggleButtonOptionDirective,
+				descendants: true,
+				isSignal: true
+			}],
 			hostDirectives: [{
 				directive: i1.RtRadiusDirective,
 				inputs: ["radius", "radius"]
 			}],
 			ngImport: i0,
-			template: "<div\n    rtBlock=\"rt-toggle-button-group\"\n    role=\"group\"\n    [rtMod]=\"{\n        sm: size() === 'sm',\n        md: size() === 'md',\n        lg: size() === 'lg',\n        disabled: disabled(),\n    }\"\n    [attr.aria-label]=\"ariaLabel()\">\n    @for (item of items(); track item.option.value) {\n        <button\n            type=\"button\"\n            rtElem=\"button\"\n            qa-dataid=\"toggle-button-group-option\"\n            [attr.data-value]=\"item.option.value\"\n            [rtMod]=\"{\n                active: item.active,\n                first: $first,\n                last: $last,\n            }\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-pressed]=\"item.active ? 'true' : 'false'\"\n            [rtTooltip]=\"item.option.title ?? ''\"\n            (click)=\"onOptionClick(item)\">\n            @if (item.option.icon || item.option.glyph) {\n                <rt-icon\n                    rtElem=\"icon\"\n                    color=\"current\"\n                    [name]=\"item.option.icon ?? null\"\n                    [glyph]=\"item.option.glyph ?? null\"\n                    [size]=\"iconSize()\" />\n            }\n            <span rtElem=\"label\">{{ item.option.label }}</span>\n        </button>\n    }\n</div>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-toggle-button-group{--rt-toggle-button-group-track-bg: var(--rt-color-bg-surface-subtle);--rt-toggle-button-group-active-bg: var(--rt-color-bg-surface);--rt-toggle-button-group-height: 30px;--rt-toggle-button-group-transition-duration: var(--rt-duration-fast);--rt-toggle-button-group-focus-shadow: var(--rt-shadow-focus-ring);--rt-toggle-button-group-track-padding: 4px;--rt-toggle-button-group-track-radius: var(--rt-radius-md);--rt-toggle-button-group-btn-padding: 0 8px;--rt-toggle-button-group-btn-radius: var(--rt-radius-ms);--rt-toggle-button-group-btn-gap: 4px;--rt-toggle-button-group-btn-font-size: 12px;--rt-toggle-button-group-btn-line-height: 14px;display:inline-flex}rt-toggle-button-group.rt-toggle-button-group--md{--rt-toggle-button-group-height: 40px;--rt-toggle-button-group-btn-padding: 0 14px;--rt-toggle-button-group-btn-gap: 6px;--rt-toggle-button-group-btn-font-size: 14px;--rt-toggle-button-group-btn-line-height: 16px}rt-toggle-button-group.rt-toggle-button-group--lg{--rt-toggle-button-group-height: 50px;--rt-toggle-button-group-btn-padding: 0 20px;--rt-toggle-button-group-btn-gap: 8px;--rt-toggle-button-group-btn-font-size: 16px;--rt-toggle-button-group-btn-line-height: 18px}rt-toggle-button-group .rt-toggle-button-group{display:inline-flex;height:var(--rt-toggle-button-group-height);box-sizing:border-box;align-items:stretch;padding:var(--rt-toggle-button-group-track-padding);border-radius:var(--rt-toggle-button-group-track-radius);background-color:var(--rt-toggle-button-group-track-bg);gap:0}rt-toggle-button-group .rt-toggle-button-group__button{display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-toggle-button-group-btn-padding);border:0;border-radius:var(--rt-toggle-button-group-btn-radius);background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-toggle-button-group-btn-font-size);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-toggle-button-group-btn-gap);line-height:var(--rt-toggle-button-group-btn-line-height);transition:background-color var(--rt-toggle-button-group-transition-duration) ease,color var(--rt-toggle-button-group-transition-duration) ease}rt-toggle-button-group .rt-toggle-button-group__button:hover:not(:disabled,rt-toggle-button-group .rt-toggle-button-group__button--active){color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button--active{background-color:var(--rt-toggle-button-group-active-bg);color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button:focus-visible{position:relative;z-index:1;box-shadow:var(--rt-toggle-button-group-focus-shadow);outline:2px solid transparent;outline-offset:1px}rt-toggle-button-group .rt-toggle-button-group__button:disabled{cursor:not-allowed}rt-toggle-button-group .rt-toggle-button-group__label{display:inline-block;white-space:nowrap}rt-toggle-button-group .rt-toggle-button-group__icon{flex-shrink:0}rt-toggle-button-group .rt-toggle-button-group--disabled{opacity:.5}rt-toggle-button-group[data-rt-radius=none]{--rt-toggle-button-group-track-radius: var(--rt-radius-none)}rt-toggle-button-group[data-rt-radius=xs]{--rt-toggle-button-group-track-radius: var(--rt-radius-xs)}rt-toggle-button-group[data-rt-radius=sm]{--rt-toggle-button-group-track-radius: var(--rt-radius-sm)}rt-toggle-button-group[data-rt-radius=ms]{--rt-toggle-button-group-track-radius: var(--rt-radius-ms)}rt-toggle-button-group[data-rt-radius=md]{--rt-toggle-button-group-track-radius: var(--rt-radius-md)}rt-toggle-button-group[data-rt-radius=lg]{--rt-toggle-button-group-track-radius: var(--rt-radius-lg)}rt-toggle-button-group[data-rt-radius=xl]{--rt-toggle-button-group-track-radius: var(--rt-radius-xl)}rt-toggle-button-group[data-rt-radius=\"2xl\"]{--rt-toggle-button-group-track-radius: var(--rt-radius-2xl)}rt-toggle-button-group[data-rt-radius=full]{--rt-toggle-button-group-track-radius: var(--rt-radius-full)}rt-toggle-button-group.rt-toggle-button-group--full-width{display:flex;width:100%}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group{display:flex;width:100%;flex:1 1 auto}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group .rt-toggle-button-group__button{flex:1 1 0}:root[data-theme=dark] rt-toggle-button-group,html.rt-theme-dark rt-toggle-button-group{--rt-toggle-button-group-track-bg: var(--rt-neutral-900)}}\n"],
+			template: "<div\n    rtBlock=\"rt-toggle-button-group\"\n    role=\"group\"\n    [rtMod]=\"{\n        sm: size() === 'sm',\n        md: size() === 'md',\n        lg: size() === 'lg',\n        disabled: isDisabled(),\n        wrap: layout() === 'wrap',\n        column: layout() === 'column',\n        chips: appearance() === 'chips',\n    }\"\n    [attr.aria-label]=\"ariaLabel()\">\n    @for (item of items(); track item.option.value) {\n        <button\n            type=\"button\"\n            rtElem=\"button\"\n            qa-dataid=\"toggle-button-group-option\"\n            [attr.data-value]=\"item.option.value\"\n            [rtMod]=\"{\n                active: item.active,\n                first: $first,\n                last: $last,\n                checked: checkmark() && item.active,\n            }\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-pressed]=\"item.active ? 'true' : 'false'\"\n            [rtTooltip]=\"item.option.title ?? ''\"\n            (click)=\"onOptionClick(item)\">\n            @if (checkmark() && item.active) {\n                <span rtElem=\"check\" aria-hidden=\"true\">\n                    <svg rtElem=\"check-svg\" viewBox=\"-2 -3 30 30\" focusable=\"false\">\n                        <path fill=\"none\" stroke=\"currentColor\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                    </svg>\n                </span>\n            }\n            @if (optionTpl(); as tpl) {\n                <ng-container [ngTemplateOutlet]=\"tpl.templateRef\" [ngTemplateOutletContext]=\"item.context\" />\n            } @else {\n                @if (item.option.icon || item.option.glyph) {\n                    <rt-icon\n                        rtElem=\"icon\"\n                        color=\"current\"\n                        [name]=\"item.option.icon ?? null\"\n                        [glyph]=\"item.option.glyph ?? null\"\n                        [size]=\"iconSize()\" />\n                }\n                <span rtElem=\"label\">{{ item.option.label }}</span>\n            }\n        </button>\n    }\n</div>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-toggle-button-group{--rt-toggle-button-group-track-bg: var(--rt-color-bg-surface-subtle);--rt-toggle-button-group-active-bg: var(--rt-color-bg-surface);--rt-toggle-button-group-height: 30px;--rt-toggle-button-group-transition-duration: var(--rt-duration-fast);--rt-toggle-button-group-focus-shadow: var(--rt-shadow-focus-ring);--rt-toggle-button-group-track-padding: 4px;--rt-toggle-button-group-track-radius: var(--rt-radius-md);--rt-toggle-button-group-btn-padding: 0 8px;--rt-toggle-button-group-btn-radius: var(--rt-radius-ms);--rt-toggle-button-group-btn-gap: 4px;--rt-toggle-button-group-btn-font-size: 12px;--rt-toggle-button-group-btn-line-height: 14px;display:inline-flex}rt-toggle-button-group.rt-toggle-button-group--md{--rt-toggle-button-group-height: 40px;--rt-toggle-button-group-btn-padding: 0 14px;--rt-toggle-button-group-btn-gap: 6px;--rt-toggle-button-group-btn-font-size: 14px;--rt-toggle-button-group-btn-line-height: 16px}rt-toggle-button-group.rt-toggle-button-group--lg{--rt-toggle-button-group-height: 50px;--rt-toggle-button-group-btn-padding: 0 20px;--rt-toggle-button-group-btn-gap: 8px;--rt-toggle-button-group-btn-font-size: 16px;--rt-toggle-button-group-btn-line-height: 18px}rt-toggle-button-group .rt-toggle-button-group{display:inline-flex;height:var(--rt-toggle-button-group-height);box-sizing:border-box;align-items:stretch;padding:var(--rt-toggle-button-group-track-padding);border-radius:var(--rt-toggle-button-group-track-radius);background-color:var(--rt-toggle-button-group-track-bg);gap:0}rt-toggle-button-group .rt-toggle-button-group__button{display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-toggle-button-group-btn-padding);border:0;border-radius:var(--rt-toggle-button-group-btn-radius);background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-toggle-button-group-btn-font-size);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-toggle-button-group-btn-gap);line-height:var(--rt-toggle-button-group-btn-line-height);transition:background-color var(--rt-toggle-button-group-transition-duration) ease,color var(--rt-toggle-button-group-transition-duration) ease}rt-toggle-button-group .rt-toggle-button-group__button:hover:not(:disabled,rt-toggle-button-group .rt-toggle-button-group__button--active){color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button--active{background-color:var(--rt-toggle-button-group-active-bg);color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button:focus-visible{position:relative;z-index:1;box-shadow:var(--rt-toggle-button-group-focus-shadow);outline:2px solid transparent;outline-offset:1px}rt-toggle-button-group .rt-toggle-button-group__button:disabled{cursor:not-allowed}rt-toggle-button-group .rt-toggle-button-group__label{display:inline-block;white-space:nowrap}rt-toggle-button-group .rt-toggle-button-group__icon{flex-shrink:0}rt-toggle-button-group .rt-toggle-button-group--disabled{opacity:.5}rt-toggle-button-group .rt-toggle-button-group--wrap,rt-toggle-button-group .rt-toggle-button-group--column{height:auto;gap:var(--rt-toggle-button-group-track-padding)}rt-toggle-button-group .rt-toggle-button-group--wrap .rt-toggle-button-group__button,rt-toggle-button-group .rt-toggle-button-group--column .rt-toggle-button-group__button{min-height:calc(var(--rt-toggle-button-group-height) - 2 * var(--rt-toggle-button-group-track-padding))}rt-toggle-button-group .rt-toggle-button-group--wrap{flex-wrap:wrap}rt-toggle-button-group .rt-toggle-button-group--column{flex-direction:column}rt-toggle-button-group .rt-toggle-button-group--column .rt-toggle-button-group__button{justify-content:flex-start}rt-toggle-button-group[data-rt-radius=none]{--rt-toggle-button-group-track-radius: var(--rt-radius-none)}rt-toggle-button-group[data-rt-radius=xs]{--rt-toggle-button-group-track-radius: var(--rt-radius-xs)}rt-toggle-button-group[data-rt-radius=sm]{--rt-toggle-button-group-track-radius: var(--rt-radius-sm)}rt-toggle-button-group[data-rt-radius=ms]{--rt-toggle-button-group-track-radius: var(--rt-radius-ms)}rt-toggle-button-group[data-rt-radius=md]{--rt-toggle-button-group-track-radius: var(--rt-radius-md)}rt-toggle-button-group[data-rt-radius=lg]{--rt-toggle-button-group-track-radius: var(--rt-radius-lg)}rt-toggle-button-group[data-rt-radius=xl]{--rt-toggle-button-group-track-radius: var(--rt-radius-xl)}rt-toggle-button-group[data-rt-radius=\"2xl\"]{--rt-toggle-button-group-track-radius: var(--rt-radius-2xl)}rt-toggle-button-group[data-rt-radius=full]{--rt-toggle-button-group-track-radius: var(--rt-radius-full)}rt-toggle-button-group.rt-toggle-button-group--wrap{display:flex}rt-toggle-button-group.rt-toggle-button-group--wrap .rt-toggle-button-group{min-width:0;flex:0 1 auto}rt-toggle-button-group.rt-toggle-button-group--full-width{display:flex;width:100%}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group{display:flex;width:100%;flex:1 1 auto}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group .rt-toggle-button-group__button{flex:1 1 0}:root[data-theme=dark] rt-toggle-button-group,html.rt-theme-dark rt-toggle-button-group{--rt-toggle-button-group-track-bg: var(--rt-neutral-900)}}\n", "@charset \"UTF-8\";@layer rt-kit.components{rt-toggle-button-group .rt-toggle-button-group__check{display:inline-flex;flex:none;align-items:center;justify-content:center;block-size:var(--rt-size-4);inline-size:var(--rt-size-4)}rt-toggle-button-group .rt-toggle-button-group__check-svg{display:block;block-size:100%;inline-size:100%;stroke-width:2px}rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group{height:auto;padding:0;border-radius:0;background-color:transparent;gap:var(--rt-space-2);opacity:1}rt-toggle-button-group.rt-toggle-button-group--chips.rt-toggle-button-group--column{display:flex;flex:1 1 auto}rt-toggle-button-group.rt-toggle-button-group--chips.rt-toggle-button-group--column .rt-toggle-button-group{flex:1 1 auto}rt-toggle-button-group.rt-toggle-button-group--chips.rt-toggle-button-group--column .rt-toggle-button-group__button{flex:none}rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group__button{--rt-toggle-chip-edge: var(--rt-toggle-chip-color-border);--rt-toggle-chip-outline: inset 0 0 0 var(--rt-border-width-thin) var(--rt-toggle-chip-edge);height:var(--rt-toggle-button-group-height);min-height:0;box-sizing:border-box;border-radius:var(--rt-toggle-button-group-track-radius);background-color:transparent;box-shadow:var(--rt-toggle-chip-outline);color:var(--rt-toggle-chip-color-text)}rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group__button:hover:not(:disabled){--rt-toggle-chip-hover: color-mix(in srgb, currentcolor 8%, transparent);background-image:linear-gradient(var(--rt-toggle-chip-hover),var(--rt-toggle-chip-hover))}rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group__button:hover:not(:disabled,.rt-toggle-button-group__button--active){color:var(--rt-toggle-chip-color-text)}rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group__button.rt-toggle-button-group__button--active{background-color:var(--rt-toggle-chip-color-bg-selected);color:var(--rt-color-action-primary-on-surface)}rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group__button:focus-visible{--rt-toggle-chip-focus: var(--rt-toggle-chip-outline), var(--rt-toggle-button-group-focus-shadow);box-shadow:var(--rt-toggle-chip-focus)}rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group__button:disabled{--rt-toggle-chip-edge: color-mix(in srgb, currentcolor 32%, transparent);color:var(--rt-color-text-disabled)}rt-toggle-button-group.rt-toggle-button-group--chips:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-toggle-button-group{padding-block:var(--rt-space-2);row-gap:var(--rt-space-4)}rt-toggle-button-group.rt-toggle-button-group--chips:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-toggle-button-group__button{height:28px;padding:0 calc(3 * var(--rt-space-1));font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium);letter-spacing:.1px;line-height:var(--rt-size-5)}rt-toggle-button-group.rt-toggle-button-group--chips:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-toggle-button-group__button--active:not(:disabled){--rt-toggle-chip-edge: transparent;color:var(--rt-sys-on-secondary-container, var(--rt-color-text-primary))}rt-toggle-button-group.rt-toggle-button-group--chips:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-toggle-button-group__check{block-size:var(--rt-size-6);inline-size:var(--rt-size-6);margin-inline:calc(-1.5 * var(--rt-space-1)) calc(1.5 * var(--rt-space-1) - var(--rt-toggle-button-group-btn-gap))}rt-toggle-button-group.rt-toggle-button-group--chips:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-toggle-button-group__check-svg{block-size:var(--rt-size-5);inline-size:var(--rt-size-5)}rt-toggle-button-group:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-toggle-button-group--chips) .rt-toggle-button-group:not(.rt-toggle-button-group--disabled) .rt-toggle-button-group__button:disabled{color:var(--rt-color-text-disabled)}}\n"],
 			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
 				{
 					kind: "component",
 					type: RtIconComponent,
@@ -173,6 +317,7 @@ var RtToggleButtonGroupComponent = class RtToggleButtonGroupComponent {
 					inputs: [
 						"rtTooltip",
 						"rtTooltipPlacement",
+						"rtTooltipShowDelay",
 						"rtTooltipWhenTruncated",
 						"rtTooltipHideOnClick"
 					],
@@ -213,12 +358,18 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
 			imports: [
+				NgTemplateOutlet,
 				RtIconComponent,
 				RtTooltipDirective,
 				BlockDirective,
 				ElemDirective,
 				ModDirective
 			],
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => RtToggleButtonGroupComponent),
+				multi: true
+			}],
 			hostDirectives: [{
 				directive: RtRadiusDirective,
 				inputs: ["radius"]
@@ -226,14 +377,21 @@ i0.ɵɵngDeclareClassMetadata({
 			host: {
 				class: BEM_BLOCK,
 				"[class.rt-toggle-button-group--full-width]": "fullWidth()",
+				"[class.rt-toggle-button-group--wrap]": "layout() === 'wrap'",
+				"[class.rt-toggle-button-group--column]": "layout() === 'column'",
 				"[class.rt-toggle-button-group--md]": "size() === 'md'",
-				"[class.rt-toggle-button-group--lg]": "size() === 'lg'"
+				"[class.rt-toggle-button-group--lg]": "size() === 'lg'",
+				"[class.rt-toggle-button-group--chips]": "appearance() === 'chips'"
 			},
-			template: "<div\n    rtBlock=\"rt-toggle-button-group\"\n    role=\"group\"\n    [rtMod]=\"{\n        sm: size() === 'sm',\n        md: size() === 'md',\n        lg: size() === 'lg',\n        disabled: disabled(),\n    }\"\n    [attr.aria-label]=\"ariaLabel()\">\n    @for (item of items(); track item.option.value) {\n        <button\n            type=\"button\"\n            rtElem=\"button\"\n            qa-dataid=\"toggle-button-group-option\"\n            [attr.data-value]=\"item.option.value\"\n            [rtMod]=\"{\n                active: item.active,\n                first: $first,\n                last: $last,\n            }\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-pressed]=\"item.active ? 'true' : 'false'\"\n            [rtTooltip]=\"item.option.title ?? ''\"\n            (click)=\"onOptionClick(item)\">\n            @if (item.option.icon || item.option.glyph) {\n                <rt-icon\n                    rtElem=\"icon\"\n                    color=\"current\"\n                    [name]=\"item.option.icon ?? null\"\n                    [glyph]=\"item.option.glyph ?? null\"\n                    [size]=\"iconSize()\" />\n            }\n            <span rtElem=\"label\">{{ item.option.label }}</span>\n        </button>\n    }\n</div>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-toggle-button-group{--rt-toggle-button-group-track-bg: var(--rt-color-bg-surface-subtle);--rt-toggle-button-group-active-bg: var(--rt-color-bg-surface);--rt-toggle-button-group-height: 30px;--rt-toggle-button-group-transition-duration: var(--rt-duration-fast);--rt-toggle-button-group-focus-shadow: var(--rt-shadow-focus-ring);--rt-toggle-button-group-track-padding: 4px;--rt-toggle-button-group-track-radius: var(--rt-radius-md);--rt-toggle-button-group-btn-padding: 0 8px;--rt-toggle-button-group-btn-radius: var(--rt-radius-ms);--rt-toggle-button-group-btn-gap: 4px;--rt-toggle-button-group-btn-font-size: 12px;--rt-toggle-button-group-btn-line-height: 14px;display:inline-flex}rt-toggle-button-group.rt-toggle-button-group--md{--rt-toggle-button-group-height: 40px;--rt-toggle-button-group-btn-padding: 0 14px;--rt-toggle-button-group-btn-gap: 6px;--rt-toggle-button-group-btn-font-size: 14px;--rt-toggle-button-group-btn-line-height: 16px}rt-toggle-button-group.rt-toggle-button-group--lg{--rt-toggle-button-group-height: 50px;--rt-toggle-button-group-btn-padding: 0 20px;--rt-toggle-button-group-btn-gap: 8px;--rt-toggle-button-group-btn-font-size: 16px;--rt-toggle-button-group-btn-line-height: 18px}rt-toggle-button-group .rt-toggle-button-group{display:inline-flex;height:var(--rt-toggle-button-group-height);box-sizing:border-box;align-items:stretch;padding:var(--rt-toggle-button-group-track-padding);border-radius:var(--rt-toggle-button-group-track-radius);background-color:var(--rt-toggle-button-group-track-bg);gap:0}rt-toggle-button-group .rt-toggle-button-group__button{display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-toggle-button-group-btn-padding);border:0;border-radius:var(--rt-toggle-button-group-btn-radius);background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-toggle-button-group-btn-font-size);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-toggle-button-group-btn-gap);line-height:var(--rt-toggle-button-group-btn-line-height);transition:background-color var(--rt-toggle-button-group-transition-duration) ease,color var(--rt-toggle-button-group-transition-duration) ease}rt-toggle-button-group .rt-toggle-button-group__button:hover:not(:disabled,rt-toggle-button-group .rt-toggle-button-group__button--active){color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button--active{background-color:var(--rt-toggle-button-group-active-bg);color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button:focus-visible{position:relative;z-index:1;box-shadow:var(--rt-toggle-button-group-focus-shadow);outline:2px solid transparent;outline-offset:1px}rt-toggle-button-group .rt-toggle-button-group__button:disabled{cursor:not-allowed}rt-toggle-button-group .rt-toggle-button-group__label{display:inline-block;white-space:nowrap}rt-toggle-button-group .rt-toggle-button-group__icon{flex-shrink:0}rt-toggle-button-group .rt-toggle-button-group--disabled{opacity:.5}rt-toggle-button-group[data-rt-radius=none]{--rt-toggle-button-group-track-radius: var(--rt-radius-none)}rt-toggle-button-group[data-rt-radius=xs]{--rt-toggle-button-group-track-radius: var(--rt-radius-xs)}rt-toggle-button-group[data-rt-radius=sm]{--rt-toggle-button-group-track-radius: var(--rt-radius-sm)}rt-toggle-button-group[data-rt-radius=ms]{--rt-toggle-button-group-track-radius: var(--rt-radius-ms)}rt-toggle-button-group[data-rt-radius=md]{--rt-toggle-button-group-track-radius: var(--rt-radius-md)}rt-toggle-button-group[data-rt-radius=lg]{--rt-toggle-button-group-track-radius: var(--rt-radius-lg)}rt-toggle-button-group[data-rt-radius=xl]{--rt-toggle-button-group-track-radius: var(--rt-radius-xl)}rt-toggle-button-group[data-rt-radius=\"2xl\"]{--rt-toggle-button-group-track-radius: var(--rt-radius-2xl)}rt-toggle-button-group[data-rt-radius=full]{--rt-toggle-button-group-track-radius: var(--rt-radius-full)}rt-toggle-button-group.rt-toggle-button-group--full-width{display:flex;width:100%}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group{display:flex;width:100%;flex:1 1 auto}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group .rt-toggle-button-group__button{flex:1 1 0}:root[data-theme=dark] rt-toggle-button-group,html.rt-theme-dark rt-toggle-button-group{--rt-toggle-button-group-track-bg: var(--rt-neutral-900)}}\n"]
+			template: "<div\n    rtBlock=\"rt-toggle-button-group\"\n    role=\"group\"\n    [rtMod]=\"{\n        sm: size() === 'sm',\n        md: size() === 'md',\n        lg: size() === 'lg',\n        disabled: isDisabled(),\n        wrap: layout() === 'wrap',\n        column: layout() === 'column',\n        chips: appearance() === 'chips',\n    }\"\n    [attr.aria-label]=\"ariaLabel()\">\n    @for (item of items(); track item.option.value) {\n        <button\n            type=\"button\"\n            rtElem=\"button\"\n            qa-dataid=\"toggle-button-group-option\"\n            [attr.data-value]=\"item.option.value\"\n            [rtMod]=\"{\n                active: item.active,\n                first: $first,\n                last: $last,\n                checked: checkmark() && item.active,\n            }\"\n            [disabled]=\"item.disabled\"\n            [attr.aria-pressed]=\"item.active ? 'true' : 'false'\"\n            [rtTooltip]=\"item.option.title ?? ''\"\n            (click)=\"onOptionClick(item)\">\n            @if (checkmark() && item.active) {\n                <span rtElem=\"check\" aria-hidden=\"true\">\n                    <svg rtElem=\"check-svg\" viewBox=\"-2 -3 30 30\" focusable=\"false\">\n                        <path fill=\"none\" stroke=\"currentColor\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                    </svg>\n                </span>\n            }\n            @if (optionTpl(); as tpl) {\n                <ng-container [ngTemplateOutlet]=\"tpl.templateRef\" [ngTemplateOutletContext]=\"item.context\" />\n            } @else {\n                @if (item.option.icon || item.option.glyph) {\n                    <rt-icon\n                        rtElem=\"icon\"\n                        color=\"current\"\n                        [name]=\"item.option.icon ?? null\"\n                        [glyph]=\"item.option.glyph ?? null\"\n                        [size]=\"iconSize()\" />\n                }\n                <span rtElem=\"label\">{{ item.option.label }}</span>\n            }\n        </button>\n    }\n</div>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-toggle-button-group{--rt-toggle-button-group-track-bg: var(--rt-color-bg-surface-subtle);--rt-toggle-button-group-active-bg: var(--rt-color-bg-surface);--rt-toggle-button-group-height: 30px;--rt-toggle-button-group-transition-duration: var(--rt-duration-fast);--rt-toggle-button-group-focus-shadow: var(--rt-shadow-focus-ring);--rt-toggle-button-group-track-padding: 4px;--rt-toggle-button-group-track-radius: var(--rt-radius-md);--rt-toggle-button-group-btn-padding: 0 8px;--rt-toggle-button-group-btn-radius: var(--rt-radius-ms);--rt-toggle-button-group-btn-gap: 4px;--rt-toggle-button-group-btn-font-size: 12px;--rt-toggle-button-group-btn-line-height: 14px;display:inline-flex}rt-toggle-button-group.rt-toggle-button-group--md{--rt-toggle-button-group-height: 40px;--rt-toggle-button-group-btn-padding: 0 14px;--rt-toggle-button-group-btn-gap: 6px;--rt-toggle-button-group-btn-font-size: 14px;--rt-toggle-button-group-btn-line-height: 16px}rt-toggle-button-group.rt-toggle-button-group--lg{--rt-toggle-button-group-height: 50px;--rt-toggle-button-group-btn-padding: 0 20px;--rt-toggle-button-group-btn-gap: 8px;--rt-toggle-button-group-btn-font-size: 16px;--rt-toggle-button-group-btn-line-height: 18px}rt-toggle-button-group .rt-toggle-button-group{display:inline-flex;height:var(--rt-toggle-button-group-height);box-sizing:border-box;align-items:stretch;padding:var(--rt-toggle-button-group-track-padding);border-radius:var(--rt-toggle-button-group-track-radius);background-color:var(--rt-toggle-button-group-track-bg);gap:0}rt-toggle-button-group .rt-toggle-button-group__button{display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-toggle-button-group-btn-padding);border:0;border-radius:var(--rt-toggle-button-group-btn-radius);background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-toggle-button-group-btn-font-size);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-toggle-button-group-btn-gap);line-height:var(--rt-toggle-button-group-btn-line-height);transition:background-color var(--rt-toggle-button-group-transition-duration) ease,color var(--rt-toggle-button-group-transition-duration) ease}rt-toggle-button-group .rt-toggle-button-group__button:hover:not(:disabled,rt-toggle-button-group .rt-toggle-button-group__button--active){color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button--active{background-color:var(--rt-toggle-button-group-active-bg);color:var(--rt-color-text-primary)}rt-toggle-button-group .rt-toggle-button-group__button:focus-visible{position:relative;z-index:1;box-shadow:var(--rt-toggle-button-group-focus-shadow);outline:2px solid transparent;outline-offset:1px}rt-toggle-button-group .rt-toggle-button-group__button:disabled{cursor:not-allowed}rt-toggle-button-group .rt-toggle-button-group__label{display:inline-block;white-space:nowrap}rt-toggle-button-group .rt-toggle-button-group__icon{flex-shrink:0}rt-toggle-button-group .rt-toggle-button-group--disabled{opacity:.5}rt-toggle-button-group .rt-toggle-button-group--wrap,rt-toggle-button-group .rt-toggle-button-group--column{height:auto;gap:var(--rt-toggle-button-group-track-padding)}rt-toggle-button-group .rt-toggle-button-group--wrap .rt-toggle-button-group__button,rt-toggle-button-group .rt-toggle-button-group--column .rt-toggle-button-group__button{min-height:calc(var(--rt-toggle-button-group-height) - 2 * var(--rt-toggle-button-group-track-padding))}rt-toggle-button-group .rt-toggle-button-group--wrap{flex-wrap:wrap}rt-toggle-button-group .rt-toggle-button-group--column{flex-direction:column}rt-toggle-button-group .rt-toggle-button-group--column .rt-toggle-button-group__button{justify-content:flex-start}rt-toggle-button-group[data-rt-radius=none]{--rt-toggle-button-group-track-radius: var(--rt-radius-none)}rt-toggle-button-group[data-rt-radius=xs]{--rt-toggle-button-group-track-radius: var(--rt-radius-xs)}rt-toggle-button-group[data-rt-radius=sm]{--rt-toggle-button-group-track-radius: var(--rt-radius-sm)}rt-toggle-button-group[data-rt-radius=ms]{--rt-toggle-button-group-track-radius: var(--rt-radius-ms)}rt-toggle-button-group[data-rt-radius=md]{--rt-toggle-button-group-track-radius: var(--rt-radius-md)}rt-toggle-button-group[data-rt-radius=lg]{--rt-toggle-button-group-track-radius: var(--rt-radius-lg)}rt-toggle-button-group[data-rt-radius=xl]{--rt-toggle-button-group-track-radius: var(--rt-radius-xl)}rt-toggle-button-group[data-rt-radius=\"2xl\"]{--rt-toggle-button-group-track-radius: var(--rt-radius-2xl)}rt-toggle-button-group[data-rt-radius=full]{--rt-toggle-button-group-track-radius: var(--rt-radius-full)}rt-toggle-button-group.rt-toggle-button-group--wrap{display:flex}rt-toggle-button-group.rt-toggle-button-group--wrap .rt-toggle-button-group{min-width:0;flex:0 1 auto}rt-toggle-button-group.rt-toggle-button-group--full-width{display:flex;width:100%}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group{display:flex;width:100%;flex:1 1 auto}rt-toggle-button-group.rt-toggle-button-group--full-width .rt-toggle-button-group .rt-toggle-button-group__button{flex:1 1 0}:root[data-theme=dark] rt-toggle-button-group,html.rt-theme-dark rt-toggle-button-group{--rt-toggle-button-group-track-bg: var(--rt-neutral-900)}}\n", "@charset \"UTF-8\";@layer rt-kit.components{rt-toggle-button-group .rt-toggle-button-group__check{display:inline-flex;flex:none;align-items:center;justify-content:center;block-size:var(--rt-size-4);inline-size:var(--rt-size-4)}rt-toggle-button-group .rt-toggle-button-group__check-svg{display:block;block-size:100%;inline-size:100%;stroke-width:2px}rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group{height:auto;padding:0;border-radius:0;background-color:transparent;gap:var(--rt-space-2);opacity:1}rt-toggle-button-group.rt-toggle-button-group--chips.rt-toggle-button-group--column{display:flex;flex:1 1 auto}rt-toggle-button-group.rt-toggle-button-group--chips.rt-toggle-button-group--column .rt-toggle-button-group{flex:1 1 auto}rt-toggle-button-group.rt-toggle-button-group--chips.rt-toggle-button-group--column .rt-toggle-button-group__button{flex:none}rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group__button{--rt-toggle-chip-edge: var(--rt-toggle-chip-color-border);--rt-toggle-chip-outline: inset 0 0 0 var(--rt-border-width-thin) var(--rt-toggle-chip-edge);height:var(--rt-toggle-button-group-height);min-height:0;box-sizing:border-box;border-radius:var(--rt-toggle-button-group-track-radius);background-color:transparent;box-shadow:var(--rt-toggle-chip-outline);color:var(--rt-toggle-chip-color-text)}rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group__button:hover:not(:disabled){--rt-toggle-chip-hover: color-mix(in srgb, currentcolor 8%, transparent);background-image:linear-gradient(var(--rt-toggle-chip-hover),var(--rt-toggle-chip-hover))}rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group__button:hover:not(:disabled,.rt-toggle-button-group__button--active){color:var(--rt-toggle-chip-color-text)}rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group__button.rt-toggle-button-group__button--active{background-color:var(--rt-toggle-chip-color-bg-selected);color:var(--rt-color-action-primary-on-surface)}rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group__button:focus-visible{--rt-toggle-chip-focus: var(--rt-toggle-chip-outline), var(--rt-toggle-button-group-focus-shadow);box-shadow:var(--rt-toggle-chip-focus)}rt-toggle-button-group.rt-toggle-button-group--chips .rt-toggle-button-group__button:disabled{--rt-toggle-chip-edge: color-mix(in srgb, currentcolor 32%, transparent);color:var(--rt-color-text-disabled)}rt-toggle-button-group.rt-toggle-button-group--chips:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-toggle-button-group{padding-block:var(--rt-space-2);row-gap:var(--rt-space-4)}rt-toggle-button-group.rt-toggle-button-group--chips:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-toggle-button-group__button{height:28px;padding:0 calc(3 * var(--rt-space-1));font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium);letter-spacing:.1px;line-height:var(--rt-size-5)}rt-toggle-button-group.rt-toggle-button-group--chips:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-toggle-button-group__button--active:not(:disabled){--rt-toggle-chip-edge: transparent;color:var(--rt-sys-on-secondary-container, var(--rt-color-text-primary))}rt-toggle-button-group.rt-toggle-button-group--chips:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-toggle-button-group__check{block-size:var(--rt-size-6);inline-size:var(--rt-size-6);margin-inline:calc(-1.5 * var(--rt-space-1)) calc(1.5 * var(--rt-space-1) - var(--rt-toggle-button-group-btn-gap))}rt-toggle-button-group.rt-toggle-button-group--chips:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]) .rt-toggle-button-group__check-svg{block-size:var(--rt-size-5);inline-size:var(--rt-size-5)}rt-toggle-button-group:is(.rt-preset-material *,[data-preset=material] *,.rt-preset-material,[data-preset=material]):not(.rt-toggle-button-group--chips) .rt-toggle-button-group:not(.rt-toggle-button-group--disabled) .rt-toggle-button-group__button:disabled{color:var(--rt-color-text-disabled)}}\n"]
 		}]
 	}],
 	propDecorators: {
+		optionTpl: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtToggleButtonOptionDirective), { isSignal: true }]
+		}],
 		options: [{
 			type: i0.Input,
 			args: [{
@@ -298,6 +456,30 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		layout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout",
+				required: false
+			}]
+		}],
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		checkmark: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checkmark",
+				required: false
+			}]
+		}],
 		valueChange: [{
 			type: i0.Output,
 			args: ["valueChange"]
@@ -308,6 +490,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { RtToggleButtonGroupComponent };
+export { RtToggleButtonGroupComponent, RtToggleButtonOptionDirective };
 //# sourceMappingURL=rt-tools-ui-kit-v2-toggle-button-group.mjs.map

package/fesm2022/rt-tools-ui-kit-v2-toggle-button-group.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"rt-tools-ui-kit-v2-toggle-button-group.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/toggle-button-group/rt-toggle-button-group.component.ts","../../../projects/ui-kit-v2/src/lib/components/toggle-button-group/rt-toggle-button-group.component.html"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n InputSignal,\n InputSignalWithTransform,\n output,\n OutputEmitterRef,\n Signal,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';\nimport { IRtToggleButtonGroup } from './rt-toggle-button-group.model';\n\nconst BEM_BLOCK: string = 'rt-toggle-button-group';\n\n/*\n Маппинг размера группы на размер вложенной `<rt-icon>`. rt-icon не имеет\n * промежуточных значений (12 / 16 / 20 / 24 / 32), поэтому `lg` тоже едет\n * на `sm` (16px) — ближе к расчётным 18px у rt-button lg, чем md (20px).\n /\nconst ICON_SIZE_BY_SIZE: Readonly<Record<IRtToggleButtonGroup.Size, IRtIcon.Size>> = Object.freeze({\n sm: 'xs',\n md: 'sm',\n lg: 'sm',\n});\n\n/\n Generic segmented control кита.\n \n API `toggle-button-group` с тремя особенностями:\n * 1. BEM через `rtBlock/rtElem/rtMod` (camelCase mods → kebab-case в CSS).\n * 2. Tooltip — нативный `[attr.title]` вместо `MatTooltip` (Angular Material\n * запрещён, см. CLAUDE.md).\n * 3. Визуал — текстовые лейблы + опциональная иконка, а не icon-only кнопки.\n * Иконка остаётся опциональной, чтобы покрыть оба сценария.\n \n Компонент \"controlled\" — рендерит сегмент с `value === option.value` как\n * активный, эмиттит `valueChange` при клике, обновление `value` остаётся за\n * потребителем.\n \n Generic `<T = string>` сохраняет типизацию по value (`'list' \| 'grid'`,\n * union'ы, enum'ы). Дефолт `string` нужен, чтобы шаблон-инстанцирование\n * без явного параметра компилировалось.\n /\n@Component({\n selector: 'rt-toggle-button-group',\n templateUrl: './rt-toggle-button-group.component.html',\n styleUrls: ['./rt-toggle-button-group.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n // standalone components / directives\n RtIconComponent,\n RtTooltipDirective,\n BlockDirective,\n ElemDirective,\n ModDirective,\n ],\n hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n host: {\n class: BEM_BLOCK,\n '[class.rt-toggle-button-group--full-width]': 'fullWidth()',\n '[class.rt-toggle-button-group--md]': \"size() === 'md'\",\n '[class.rt-toggle-button-group--lg]': \"size() === 'lg'\",\n },\n})\nexport class RtToggleButtonGroupComponent<T = string> {\n protected readonly iconSize: Signal<IRtIcon.Size> = computed((): IRtIcon.Size => ICON_SIZE_BY_SIZE[this.size()]);\n\n /\n Сегменты, готовые к отрисовке: подсветка и недоступность посчитаны здесь, а не в шаблоне.\n \n Подсветка читается по-разному в одиночном и множественном выборе, а недоступность приходит\n * с двух сторон — от группы и от самого сегмента. Признак группы главнее: доступный сегмент\n * внутри отключённой группы читался бы как её единственное живое место.\n /\n protected readonly items: Signal<ReadonlyArray<IRtToggleButtonGroup.Rendered<T>>> = computed(\n (): ReadonlyArray<IRtToggleButtonGroup.Rendered<T>> => {\n const multiple: boolean = this.multiple();\n const chosen: ReadonlyArray<T> = this.values();\n const single: T \| undefined = this.value();\n const groupDisabled: boolean = this.disabled();\n\n return this.options().map((option: IRtToggleButtonGroup.Option<T>): IRtToggleButtonGroup.Rendered<T> => ({\n option,\n active: multiple ? chosen.includes(option.value) : single === option.value,\n disabled: groupDisabled \|\| !!option.disabled,\n }));\n }\n );\n\n public readonly options: InputSignal<ReadonlyArray<IRtToggleButtonGroup.Option<T>>> =\n input.required<ReadonlyArray<IRtToggleButtonGroup.Option<T>>>();\n\n public readonly value: InputSignal<T \| undefined> = input<T \| undefined>(undefined);\n\n /\n Множественный выбор: нажатие добавляет сегмент или снимает его, а не переносит выбор.\n \n Своим входом, а не расширением типа `value`: вход, у которого тип значения меняется от\n * значения другого входа, не проверяет ни сборка, ни линтер — потребитель узнаёт о своей\n * ошибке, когда группа перестаёт подсвечивать выбранное.\n /\n public readonly multiple: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n transform: booleanAttribute,\n });\n\n /* Набор выбранного. Читается только при множественном выборе, одиночный берёт `value`. /\n public readonly values: InputSignal<ReadonlyArray<T>> = input<ReadonlyArray<T>>([]);\n\n public readonly ariaLabel: InputSignal<string \| null> = input<string \| null>(null);\n\n public readonly size: InputSignal<IRtToggleButtonGroup.Size> = input<IRtToggleButtonGroup.Size>('sm');\n\n public readonly disabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n transform: booleanAttribute,\n });\n\n /* Растягивает группу на всю ширину контейнера; опции делят ширину поровну. /\n public readonly fullWidth: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n transform: booleanAttribute,\n });\n\n public readonly valueChange: OutputEmitterRef<T> = output<T>();\n\n /\n Весь набор выбранного после нажатия, а не разница с прежним: разницу вызывающий сводит со\n * своим состоянием сам, и каждый сводит по-своему.\n */\n public readonly valuesChange: OutputEmitterRef<ReadonlyArray<T>> = output<ReadonlyArray<T>>();\n\n protected onOptionClick(item: IRtToggleButtonGroup.Rendered<T>): void {\n if (item.disabled) {\n return;\n }\n\n const option: IRtToggleButtonGroup.Option<T> = item.option;\n\n if (!this.multiple()) {\n this.valueChange.emit(option.value);\n\n return;\n }\n\n const chosen: ReadonlyArray<T> = this.values();\n const next: T[] = chosen.includes(option.value)\n ? chosen.filter((one: T): boolean => one !== option.value)\n : [...chosen, option.value];\n\n this.valuesChange.emit(next);\n }\n}\n","<div\n rtBlock=\"rt-toggle-button-group\"\n role=\"group\"\n [rtMod]=\"{\n sm: size() === 'sm',\n md: size() === 'md',\n lg: size() === 'lg',\n disabled: disabled(),\n }\"\n [attr.aria-label]=\"ariaLabel()\">\n @for (item of items(); track item.option.value) {\n <button\n type=\"button\"\n rtElem=\"button\"\n qa-dataid=\"toggle-button-group-option\"\n [attr.data-value]=\"item.option.value\"\n [rtMod]=\"{\n active: item.active,\n first: $first,\n last: $last,\n }\"\n [disabled]=\"item.disabled\"\n [attr.aria-pressed]=\"item.active ? 'true' : 'false'\"\n [rtTooltip]=\"item.option.title ?? ''\"\n (click)=\"onOptionClick(item)\">\n @if (item.option.icon \|\| item.option.glyph) {\n <rt-icon\n rtElem=\"icon\"\n color=\"current\"\n [name]=\"item.option.icon ?? null\"\n [glyph]=\"item.option.glyph ?? null\"\n [size]=\"iconSize()\" />\n }\n <span rtElem=\"label\">{{ item.option.label }}</span>\n </button>\n }\n</div>\n"],"mappings":"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"}
1	+ {"version":3,"file":"rt-tools-ui-kit-v2-toggle-button-group.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/toggle-button-group/rt-toggle-button-option.directive.ts","../../../projects/ui-kit-v2/src/lib/components/toggle-button-group/rt-toggle-button-group.component.ts","../../../projects/ui-kit-v2/src/lib/components/toggle-button-group/rt-toggle-button-group.component.html"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\nimport { IRtToggleButtonGroup } from './rt-toggle-button-group.model';\n\n/*\n Маркер своей разметки сегмента — того, что рисуется внутри кнопки на месте значка и подписи.\n \n Кнопка остаётся киту: нажатие, подсветка, недоступность, фокус и связь с формой. Потребитель даёт\n * только содержимое — например картинку-превью раскладки — и получает опцию и признак, нажат ли\n * сегмент.\n \n @example\n * ```html\n * <rt-toggle-button-group [options]=\"layouts\" formControlName=\"layout\">\n * <ng-template rtToggleButtonOption let-option let-active=\"active\">\n * <img [src]=\"option.value + '.svg'\" [alt]=\"option.label\" />\n * </ng-template>\n * </rt-toggle-button-group>\n * ```\n /\n@Directive({\n selector: '[rtToggleButtonOption]',\n})\nexport class RtToggleButtonOptionDirective<T = string> {\n public readonly templateRef: TemplateRef<IRtToggleButtonGroup.OptionContext<T>> =\n inject<TemplateRef<IRtToggleButtonGroup.OptionContext<T>>>(TemplateRef);\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n forwardRef,\n input,\n InputSignal,\n InputSignalWithTransform,\n output,\n OutputEmitterRef,\n signal,\n Signal,\n ViewEncapsulation,\n WritableSignal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';\nimport { IRtToggleButtonGroup } from './rt-toggle-button-group.model';\nimport { RtToggleButtonOptionDirective } from './rt-toggle-button-option.directive';\n\nconst BEM_BLOCK: string = 'rt-toggle-button-group';\n\n/\n Маппинг размера группы на размер вложенной `<rt-icon>`. rt-icon не имеет\n * промежуточных значений (12 / 16 / 20 / 24 / 32), поэтому `lg` тоже едет\n * на `sm` (16px) — ближе к расчётным 18px у rt-button lg, чем md (20px).\n /\nconst ICON_SIZE_BY_SIZE: Readonly<Record<IRtToggleButtonGroup.Size, IRtIcon.Size>> = Object.freeze({\n sm: 'xs',\n md: 'sm',\n lg: 'sm',\n});\n\n/* Форма записала набор, а не одно значение: так пишет множественный выбор. /\nfunction isMany<T>(value: IRtToggleButtonGroup.FormValue<T>): value is ReadonlyArray<T> {\n return Array.isArray(value);\n}\n\n/\n Generic segmented control кита.\n \n API `toggle-button-group` с тремя особенностями:\n * 1. BEM через `rtBlock/rtElem/rtMod` (camelCase mods → kebab-case в CSS).\n * 2. Tooltip — нативный `[attr.title]` вместо `MatTooltip` (Angular Material\n * запрещён, см. CLAUDE.md).\n * 3. Визуал — текстовые лейблы + опциональная иконка, а не icon-only кнопки.\n * Иконка остаётся опциональной, чтобы покрыть оба сценария.\n \n Компонент \"controlled\" — рендерит сегмент с `value === option.value` как\n * активный, эмиттит `valueChange` при клике, обновление `value` остаётся за\n * потребителем.\n \n Generic `<T = string>` сохраняет типизацию по value (`'list' \| 'grid'`,\n * union'ы, enum'ы). Дефолт `string` нужен, чтобы шаблон-инстанцирование\n * без явного параметра компилировалось.\n /\n@Component({\n selector: 'rt-toggle-button-group',\n templateUrl: './rt-toggle-button-group.component.html',\n styleUrls: ['./rt-toggle-button-group.component.scss', './rt-toggle-button-group-chips.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n // angular\n NgTemplateOutlet,\n\n // standalone components / directives\n RtIconComponent,\n RtTooltipDirective,\n BlockDirective,\n ElemDirective,\n ModDirective,\n ],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef((): typeof RtToggleButtonGroupComponent => RtToggleButtonGroupComponent),\n multi: true,\n },\n ],\n hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n host: {\n class: BEM_BLOCK,\n '[class.rt-toggle-button-group--full-width]': 'fullWidth()',\n '[class.rt-toggle-button-group--wrap]': \"layout() === 'wrap'\",\n '[class.rt-toggle-button-group--column]': \"layout() === 'column'\",\n '[class.rt-toggle-button-group--md]': \"size() === 'md'\",\n '[class.rt-toggle-button-group--lg]': \"size() === 'lg'\",\n '[class.rt-toggle-button-group--chips]': \"appearance() === 'chips'\",\n },\n})\nexport class RtToggleButtonGroupComponent<T = string> implements ControlValueAccessor {\n #onChange: (value: IRtToggleButtonGroup.FormValue<T>) => void = (): void => undefined;\n #onTouched: () => void = (): void => undefined;\n\n /* Группа связана с формой: нажатие тогда само переносит подсветку, без ответа хозяина. /\n #bound: boolean = false;\n\n /* Значение, записанное формой или нажатием; `undefined`, пока форма ничего не писала. /\n readonly #formValue: WritableSignal<{ readonly value: IRtToggleButtonGroup.FormValue<T> } \| undefined> = signal<\n { readonly value: IRtToggleButtonGroup.FormValue<T> } \| undefined\n >(undefined);\n\n /* Отключение, назначенное формой через CVA (`setDisabledState`). /\n readonly #disabledByForm: WritableSignal<boolean> = signal<boolean>(false);\n\n /* Выбранное при одиночном выборе: слово формы, если она его сказала, иначе вход. /\n readonly #single: Signal<T \| undefined> = computed((): T \| undefined => {\n const written: { readonly value: IRtToggleButtonGroup.FormValue<T> } \| undefined = this.#formValue();\n if (written === undefined) {\n return this.value();\n }\n\n return isMany(written.value) ? undefined : (written.value ?? undefined);\n });\n\n /* Набор выбранного при множественном выборе: слово формы, если она его сказала, иначе вход. /\n readonly #many: Signal<ReadonlyArray<T>> = computed((): ReadonlyArray<T> => {\n const written: { readonly value: IRtToggleButtonGroup.FormValue<T> } \| undefined = this.#formValue();\n if (written === undefined) {\n return this.values();\n }\n\n return isMany(written.value) ? written.value : [];\n });\n\n protected readonly isDisabled: Signal<boolean> = computed((): boolean => this.disabled() \|\| this.#disabledByForm());\n\n /* Своя разметка сегмента; без неё кнопка рисует значок и подпись. /\n protected readonly optionTpl: Signal<RtToggleButtonOptionDirective<T> \| undefined> = contentChild(RtToggleButtonOptionDirective);\n\n protected readonly iconSize: Signal<IRtIcon.Size> = computed((): IRtIcon.Size => ICON_SIZE_BY_SIZE[this.size()]);\n\n /\n Сегменты, готовые к отрисовке: подсветка и недоступность посчитаны здесь, а не в шаблоне.\n \n Подсветка читается по-разному в одиночном и множественном выборе, а недоступность приходит\n * с двух сторон — от группы и от самого сегмента. Признак группы главнее: доступный сегмент\n * внутри отключённой группы читался бы как её единственное живое место.\n /\n protected readonly items: Signal<ReadonlyArray<IRtToggleButtonGroup.Rendered<T>>> = computed(\n (): ReadonlyArray<IRtToggleButtonGroup.Rendered<T>> => {\n const multiple: boolean = this.multiple();\n const chosen: ReadonlyArray<T> = this.#many();\n const single: T \| undefined = this.#single();\n const groupDisabled: boolean = this.isDisabled();\n\n return this.options().map((option: IRtToggleButtonGroup.Option<T>): IRtToggleButtonGroup.Rendered<T> => {\n const active: boolean = multiple ? chosen.includes(option.value) : single === option.value;\n\n return { option, active, disabled: groupDisabled \|\| !!option.disabled, context: { $implicit: option, active } };\n });\n }\n );\n\n public readonly options: InputSignal<ReadonlyArray<IRtToggleButtonGroup.Option<T>>> =\n input.required<ReadonlyArray<IRtToggleButtonGroup.Option<T>>>();\n\n public readonly value: InputSignal<T \| undefined> = input<T \| undefined>(undefined);\n\n /\n Множественный выбор: нажатие добавляет сегмент или снимает его, а не переносит выбор.\n \n Своим входом, а не расширением типа `value`: вход, у которого тип значения меняется от\n * значения другого входа, не проверяет ни сборка, ни линтер — потребитель узнаёт о своей\n * ошибке, когда группа перестаёт подсвечивать выбранное.\n /\n public readonly multiple: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n transform: booleanAttribute,\n });\n\n /* Набор выбранного. Читается только при множественном выборе, одиночный берёт `value`. /\n public readonly values: InputSignal<ReadonlyArray<T>> = input<ReadonlyArray<T>>([]);\n\n public readonly ariaLabel: InputSignal<string \| null> = input<string \| null>(null);\n\n public readonly size: InputSignal<IRtToggleButtonGroup.Size> = input<IRtToggleButtonGroup.Size>('sm');\n\n public readonly disabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n transform: booleanAttribute,\n });\n\n /* Растягивает группу на всю ширину контейнера; опции делят ширину поровну. /\n public readonly fullWidth: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n transform: booleanAttribute,\n });\n\n /\n Раскладка сегментов: одна строка, перенос на следующую или столбик. Перенос нужен длинным\n * спискам во всплывающих окнах, столбик — спискам вроде дней недели.\n /\n public readonly layout: InputSignal<IRtToggleButtonGroup.Layout> = input<IRtToggleButtonGroup.Layout>('row');\n\n /\n Вид группы: дорожка с сегментами или отдельные чипы. Вид — входом, а не классом потребителя:\n * у чипов своя коробка пункта, свой просвет и своя подсветка, и класс снаружи до неё не достаёт.\n /\n public readonly appearance: InputSignal<IRtToggleButtonGroup.Appearance> = input<IRtToggleButtonGroup.Appearance>('segmented');\n\n /\n Галочка перед подписью выбранного пункта, как у фильтр-чипа Material. Выключена по умолчанию:\n * в сегментах выбор и так виден подложкой, а место под галочку раздвигает пункт.\n /\n public readonly checkmark: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n transform: booleanAttribute,\n });\n\n public readonly valueChange: OutputEmitterRef<T> = output<T>();\n\n /\n Весь набор выбранного после нажатия, а не разница с прежним: разницу вызывающий сводит со\n * своим состоянием сам, и каждый сводит по-своему.\n /\n public readonly valuesChange: OutputEmitterRef<ReadonlyArray<T>> = output<ReadonlyArray<T>>();\n\n public writeValue(value: IRtToggleButtonGroup.FormValue<T>): void {\n this.#formValue.set({ value });\n }\n\n public registerOnChange(fn: (value: IRtToggleButtonGroup.FormValue<T>) => void): void {\n this.#bound = true;\n this.#onChange = fn;\n }\n\n public registerOnTouched(fn: () => void): void {\n this.#onTouched = fn;\n }\n\n public setDisabledState(disabled: boolean): void {\n this.#disabledByForm.set(disabled);\n }\n\n protected onOptionClick(item: IRtToggleButtonGroup.Rendered<T>): void {\n if (item.disabled) {\n return;\n }\n\n const option: IRtToggleButtonGroup.Option<T> = item.option;\n\n if (!this.multiple()) {\n this.#commit(option.value);\n this.valueChange.emit(option.value);\n\n return;\n }\n\n const chosen: ReadonlyArray<T> = this.#many();\n const next: T[] = chosen.includes(option.value)\n ? chosen.filter((one: T): boolean => one !== option.value)\n : [...chosen, option.value];\n\n this.#commit(next);\n this.valuesChange.emit(next);\n }\n\n /* Нажатие уходит в форму, если группа с ней связана; без формы подсветку ведёт хозяин входами. */\n #commit(value: IRtToggleButtonGroup.FormValue<T>): void {\n if (!this.#bound) {\n return;\n }\n this.#formValue.set({ value });\n this.#onChange(value);\n this.#onTouched();\n }\n}\n","<div\n rtBlock=\"rt-toggle-button-group\"\n role=\"group\"\n [rtMod]=\"{\n sm: size() === 'sm',\n md: size() === 'md',\n lg: size() === 'lg',\n disabled: isDisabled(),\n wrap: layout() === 'wrap',\n column: layout() === 'column',\n chips: appearance() === 'chips',\n }\"\n [attr.aria-label]=\"ariaLabel()\">\n @for (item of items(); track item.option.value) {\n <button\n type=\"button\"\n rtElem=\"button\"\n qa-dataid=\"toggle-button-group-option\"\n [attr.data-value]=\"item.option.value\"\n [rtMod]=\"{\n active: item.active,\n first: $first,\n last: $last,\n checked: checkmark() && item.active,\n }\"\n [disabled]=\"item.disabled\"\n [attr.aria-pressed]=\"item.active ? 'true' : 'false'\"\n [rtTooltip]=\"item.option.title ?? ''\"\n (click)=\"onOptionClick(item)\">\n @if (checkmark() && item.active) {\n <span rtElem=\"check\" aria-hidden=\"true\">\n <svg rtElem=\"check-svg\" viewBox=\"-2 -3 30 30\" focusable=\"false\">\n <path fill=\"none\" stroke=\"currentColor\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n </svg>\n </span>\n }\n @if (optionTpl(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl.templateRef\" [ngTemplateOutletContext]=\"item.context\" />\n } @else {\n @if (item.option.icon \|\| item.option.glyph) {\n <rt-icon\n rtElem=\"icon\"\n color=\"current\"\n [name]=\"item.option.icon ?? null\"\n [glyph]=\"item.option.glyph ?? null\"\n [size]=\"iconSize()\" />\n }\n <span rtElem=\"label\">{{ item.option.label }}</span>\n }\n </button>\n }\n</div>\n"],"mappings":"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"}

package/fesm2022/rt-tools-ui-kit-v2-tooltip.mjs CHANGED Viewed

@@ -1,10 +1,10 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, Directive, ElementRef, ViewEncapsulation, booleanAttribute, effect, inject, input, signal } from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, ViewEncapsulation, booleanAttribute, effect, inject, input, numberAttribute, signal } from "@angular/core";
 import { FocusMonitor } from "@angular/cdk/a11y";
 import { Overlay, OverlayConfig, ScrollStrategyOptions } from "@angular/cdk/overlay";
 import { ComponentPortal } from "@angular/cdk/portal";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { carryThemeScope, materialPresetClassesOf } from "@rt-tools/ui-kit-v2/core";
+import { carryThemeScope, materialPresetClassesOf, rtKitDefault } from "@rt-tools/ui-kit-v2/core";
 const BEM_BLOCK = "rt-tooltip";
 var RtTooltipComponent = class RtTooltipComponent {
 	constructor() {
@@ -107,6 +107,9 @@ const FALLBACKS = {
 		"bottom"
 	]
 };
+function tooltipPlacement(own, configured, materialPreset) {
+	return own ?? configured ?? (materialPreset ? "bottom" : "top");
+}
 function tooltipPositions(placement) {
 	return FALLBACKS[placement].map((side) => ({ ...POSITION_BY_PLACEMENT[side] }));
 }
@@ -123,6 +126,8 @@ var RtTooltipDirective = class RtTooltipDirective {
 	#overlayRef;
 	#tooltipRef;
 	#showTimer;
+	#placementDefault;
+	#showDelayDefault;
 	constructor() {
 		this.#overlay = inject(Overlay);
 		this.#elementRef = inject(ElementRef);
@@ -131,6 +136,8 @@ var RtTooltipDirective = class RtTooltipDirective {
 		this.#overlayRef = null;
 		this.#tooltipRef = null;
 		this.#showTimer = null;
+		this.#placementDefault = rtKitDefault("tooltip", (it) => it.placement, null);
+		this.#showDelayDefault = rtKitDefault("tooltip", (it) => it.showDelay, SHOW_DELAY_MS);
 		this.text = input("", {
 			...ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {},
 			alias: "rtTooltip",
@@ -140,12 +147,20 @@ var RtTooltipDirective = class RtTooltipDirective {
 			...ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {},
 			alias: "rtTooltipPlacement"
 		});
+		this.showDelay = input(null, {
+			...ngDevMode ? { debugName: "showDelay" } : /* istanbul ignore next */ {},
+			alias: "rtTooltipShowDelay",
+			transform: (value) => {
+				const delay = value === null || value === void 0 || value === "" ? NaN : numberAttribute(value, NaN);
+				return delay >= 0 ? delay : null;
+			}
+		});
 		this.whenTruncated = input(false, {
 			...ngDevMode ? { debugName: "whenTruncated" } : /* istanbul ignore next */ {},
 			alias: "rtTooltipWhenTruncated",
 			transform: booleanAttribute
 		});
-		this.hideOnClick = input(true, {
+		this.hideOnClick = input(rtKitDefault("tooltip", (it) => it.hideOnClick, true), {
 			...ngDevMode ? { debugName: "hideOnClick" } : /* istanbul ignore next */ {},
 			alias: "rtTooltipHideOnClick",
 			transform: booleanAttribute
@@ -163,7 +178,7 @@ var RtTooltipDirective = class RtTooltipDirective {
 	show() {
 		if (this.text().trim() === "" || this.#tooltipRef !== null) return;
 		this.#clearTimer();
-		this.#showTimer = setTimeout(() => this.#attach(), SHOW_DELAY_MS);
+		this.#showTimer = setTimeout(() => this.#attach(), this.showDelay() ?? this.#showDelayDefault);
 	}
 	hide() {
 		this.#clearTimer();
@@ -195,7 +210,7 @@ var RtTooltipDirective = class RtTooltipDirective {
 	#ensureOverlay() {
 		if (this.#overlayRef !== null) return this.#overlayRef;
 		const presetClasses = materialPresetClassesOf(this.#elementRef.nativeElement);
-		const positions = tooltipPositions(this.placement() ?? (presetClasses.length > 0 ? "bottom" : "top"));
+		const positions = tooltipPositions(tooltipPlacement(this.placement(), this.#placementDefault, presetClasses.length > 0));
 		const positionStrategy = this.#overlay.position().flexibleConnectedTo(this.#elementRef).withPush(true).withViewportMargin(VIEWPORT_MARGIN).withFlexibleDimensions(false).withPositions(positions);
 		const config = new OverlayConfig({
 			positionStrategy,
@@ -249,6 +264,13 @@ var RtTooltipDirective = class RtTooltipDirective {
 					isRequired: false,
 					transformFunction: null
 				},
+				showDelay: {
+					classPropertyName: "showDelay",
+					publicName: "rtTooltipShowDelay",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				whenTruncated: {
 					classPropertyName: "whenTruncated",
 					publicName: "rtTooltipWhenTruncated",
@@ -311,6 +333,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		showDelay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rtTooltipShowDelay",
+				required: false
+			}]
+		}],
 		whenTruncated: [{
 			type: i0.Input,
 			args: [{