@testgorilla/tgo-ui 8.17.3 → 8.18.0
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.
- package/components/segmented-toggle/index.d.ts +68 -0
- package/fesm2022/testgorilla-tgo-ui-components-segmented-toggle.mjs +102 -0
- package/fesm2022/testgorilla-tgo-ui-components-segmented-toggle.mjs.map +1 -0
- package/fesm2022/testgorilla-tgo-ui.mjs +1 -0
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/mcp/catalog.json +1 -1
- package/package.json +5 -1
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';
|
|
3
|
+
export { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';
|
|
4
|
+
import { IconName } from '@testgorilla/tgo-ui/components/icon';
|
|
5
|
+
|
|
6
|
+
interface SegmentedToggleOption<T> {
|
|
7
|
+
value: T;
|
|
8
|
+
/**
|
|
9
|
+
* Visible text label. Optional so an option can be icon-only — in that case
|
|
10
|
+
* provide `icon` and `iconAriaLabel` so the segment still has an accessible name.
|
|
11
|
+
*/
|
|
12
|
+
label?: string;
|
|
13
|
+
/** Optional leading icon, typed to the Canopy icon set. */
|
|
14
|
+
icon?: IconName;
|
|
15
|
+
/**
|
|
16
|
+
* When set, the icon is informational and this text is exposed to assistive
|
|
17
|
+
* tech via a visually-hidden label. When omitted, the icon is decorative and
|
|
18
|
+
* marked `aria-hidden`.
|
|
19
|
+
*/
|
|
20
|
+
iconAriaLabel?: string;
|
|
21
|
+
/**
|
|
22
|
+
* When true, selecting this option shows the brand (magenta) pill; selecting
|
|
23
|
+
* any non-brand option shows the neutral pill.
|
|
24
|
+
*/
|
|
25
|
+
brand?: boolean;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
declare class SegmentedToggleComponent<T> {
|
|
29
|
+
private readonly hostRef;
|
|
30
|
+
private readonly destroyRef;
|
|
31
|
+
readonly options: _angular_core.InputSignal<SegmentedToggleOption<T>[]>;
|
|
32
|
+
readonly value: _angular_core.ModelSignal<T | undefined>;
|
|
33
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
34
|
+
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
35
|
+
readonly applicationTheme: _angular_core.InputSignal<ApplicationTheme | undefined>;
|
|
36
|
+
private readonly defaultAppTheme;
|
|
37
|
+
readonly theme: _angular_core.Signal<ApplicationTheme>;
|
|
38
|
+
/** One ElementRef per segment button; used to measure the active pill geometry. */
|
|
39
|
+
private readonly optionButtons;
|
|
40
|
+
/** Index of the selected option; -1 when value() matches no option. */
|
|
41
|
+
protected readonly selectedIndex: _angular_core.Signal<number>;
|
|
42
|
+
/** True when the currently-selected option is flagged `brand: true`. */
|
|
43
|
+
protected readonly selectedOptionIsBrand: _angular_core.Signal<boolean>;
|
|
44
|
+
/** Measured pixel geometry of the active button, driving the sliding indicator. */
|
|
45
|
+
protected readonly indicatorOffset: _angular_core.WritableSignal<number>;
|
|
46
|
+
protected readonly indicatorTop: _angular_core.WritableSignal<number>;
|
|
47
|
+
protected readonly indicatorWidth: _angular_core.WritableSignal<number>;
|
|
48
|
+
protected readonly indicatorHeight: _angular_core.WritableSignal<number>;
|
|
49
|
+
/** Enables the slide transition only after the initial position is painted. */
|
|
50
|
+
protected readonly animated: _angular_core.WritableSignal<boolean>;
|
|
51
|
+
constructor();
|
|
52
|
+
protected select(optionValue: T): void;
|
|
53
|
+
protected isSelected(optionValue: T): boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Last-resort accessible name for a segment. Used only for an icon-only option
|
|
56
|
+
* that provides neither a visible `label` nor an `iconAriaLabel`, so the button
|
|
57
|
+
* is never a nameless control. When a label or icon label is present those name
|
|
58
|
+
* the button and this returns `null` (no `aria-label` attribute).
|
|
59
|
+
*/
|
|
60
|
+
protected fallbackAriaLabel(option: SegmentedToggleOption<T>): string | null;
|
|
61
|
+
/** Reads the active button's box and writes it to the indicator signals. */
|
|
62
|
+
private measureIndicator;
|
|
63
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedToggleComponent<any>, never>;
|
|
64
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedToggleComponent<any>, "ui-segmented-toggle", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export { SegmentedToggleComponent };
|
|
68
|
+
export type { SegmentedToggleOption };
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, ElementRef, DestroyRef, input, model, booleanAttribute, computed, viewChildren, signal, afterRenderEffect, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import * as i1 from '@testgorilla/tgo-ui/components/icon';
|
|
4
|
+
import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
|
|
5
|
+
|
|
6
|
+
class SegmentedToggleComponent {
|
|
7
|
+
constructor() {
|
|
8
|
+
this.hostRef = inject(ElementRef);
|
|
9
|
+
this.destroyRef = inject(DestroyRef);
|
|
10
|
+
this.options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
11
|
+
this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
12
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
|
|
13
|
+
this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
14
|
+
this.applicationTheme = input(undefined, ...(ngDevMode ? [{ debugName: "applicationTheme" }] : []));
|
|
15
|
+
this.defaultAppTheme = inject('CANOPYUI_DEFAULT_APPLICATION_THEME', {
|
|
16
|
+
optional: true,
|
|
17
|
+
});
|
|
18
|
+
this.theme = computed(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'light', ...(ngDevMode ? [{ debugName: "theme" }] : []));
|
|
19
|
+
/** One ElementRef per segment button; used to measure the active pill geometry. */
|
|
20
|
+
this.optionButtons = viewChildren('optionButton', ...(ngDevMode ? [{ debugName: "optionButtons" }] : []));
|
|
21
|
+
/** Index of the selected option; -1 when value() matches no option. */
|
|
22
|
+
this.selectedIndex = computed(() => this.options().findIndex(option => option.value === this.value()), ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
|
|
23
|
+
/** True when the currently-selected option is flagged `brand: true`. */
|
|
24
|
+
this.selectedOptionIsBrand = computed(() => this.options()[this.selectedIndex()]?.brand === true, ...(ngDevMode ? [{ debugName: "selectedOptionIsBrand" }] : []));
|
|
25
|
+
/** Measured pixel geometry of the active button, driving the sliding indicator. */
|
|
26
|
+
this.indicatorOffset = signal(0, ...(ngDevMode ? [{ debugName: "indicatorOffset" }] : []));
|
|
27
|
+
this.indicatorTop = signal(0, ...(ngDevMode ? [{ debugName: "indicatorTop" }] : []));
|
|
28
|
+
this.indicatorWidth = signal(0, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : []));
|
|
29
|
+
this.indicatorHeight = signal(0, ...(ngDevMode ? [{ debugName: "indicatorHeight" }] : []));
|
|
30
|
+
/** Enables the slide transition only after the initial position is painted. */
|
|
31
|
+
this.animated = signal(false, ...(ngDevMode ? [{ debugName: "animated" }] : []));
|
|
32
|
+
// Re-measure after every render that follows a selection or options change.
|
|
33
|
+
afterRenderEffect(() => {
|
|
34
|
+
// Read these so the effect re-runs (post-render) whenever selection changes.
|
|
35
|
+
this.value();
|
|
36
|
+
this.options();
|
|
37
|
+
this.measureIndicator();
|
|
38
|
+
});
|
|
39
|
+
// Re-measure on container resize (width changes don't touch any signal).
|
|
40
|
+
afterNextRender(() => {
|
|
41
|
+
// Position the indicator for the initial selection without animating, then
|
|
42
|
+
// enable the slide on the next frame so only user-driven changes animate.
|
|
43
|
+
this.measureIndicator();
|
|
44
|
+
requestAnimationFrame(() => this.animated.set(true));
|
|
45
|
+
if (typeof ResizeObserver === 'undefined') {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
const observer = new ResizeObserver(() => this.measureIndicator());
|
|
49
|
+
observer.observe(this.hostRef.nativeElement);
|
|
50
|
+
this.destroyRef.onDestroy(() => observer.disconnect());
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
select(optionValue) {
|
|
54
|
+
if (this.disabled()) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
this.value.set(optionValue);
|
|
58
|
+
}
|
|
59
|
+
isSelected(optionValue) {
|
|
60
|
+
return optionValue === this.value();
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* Last-resort accessible name for a segment. Used only for an icon-only option
|
|
64
|
+
* that provides neither a visible `label` nor an `iconAriaLabel`, so the button
|
|
65
|
+
* is never a nameless control. When a label or icon label is present those name
|
|
66
|
+
* the button and this returns `null` (no `aria-label` attribute).
|
|
67
|
+
*/
|
|
68
|
+
fallbackAriaLabel(option) {
|
|
69
|
+
if (option.label || option.iconAriaLabel) {
|
|
70
|
+
return null;
|
|
71
|
+
}
|
|
72
|
+
return String(option.value);
|
|
73
|
+
}
|
|
74
|
+
/** Reads the active button's box and writes it to the indicator signals. */
|
|
75
|
+
measureIndicator() {
|
|
76
|
+
const button = this.optionButtons()[this.selectedIndex()]?.nativeElement;
|
|
77
|
+
if (!button) {
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
this.indicatorOffset.set(button.offsetLeft);
|
|
81
|
+
this.indicatorTop.set(button.offsetTop);
|
|
82
|
+
this.indicatorWidth.set(button.offsetWidth);
|
|
83
|
+
this.indicatorHeight.set(button.offsetHeight);
|
|
84
|
+
}
|
|
85
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
86
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SegmentedToggleComponent, isStandalone: true, selector: "ui-segmented-toggle", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.theme": "theme()", "class.ui-segmented-toggle--brand-active": "selectedOptionIsBrand()", "class.ui-segmented-toggle--disabled": "disabled()" } }, viewQueries: [{ propertyName: "optionButtons", predicate: ["optionButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n <span\n class=\"ui-segmented-toggle__indicator\"\n [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n aria-hidden=\"true\"\n [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n [style.width.px]=\"indicatorWidth()\"\n [style.height.px]=\"indicatorHeight()\"\n ></span>\n\n @for (option of options(); track option.value) {\n <button\n #optionButton\n type=\"button\"\n class=\"ui-segmented-toggle__option\"\n [attr.aria-pressed]=\"isSelected(option.value)\"\n [attr.aria-label]=\"fallbackAriaLabel(option)\"\n [disabled]=\"disabled()\"\n (click)=\"select(option.value)\"\n >\n @if (option.icon) {\n <ui-icon\n class=\"ui-segmented-toggle__icon\"\n [name]=\"option.icon\"\n size=\"16\"\n [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n ></ui-icon>\n @if (option.iconAriaLabel) {\n <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n }\n }\n @if (option.label) {\n <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n }\n </button>\n }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:inline-block}.ui-segmented-toggle__group{position:relative;display:flex;align-items:center;gap:0;padding:4px;box-shadow:inset 0 0 0 1px #242424;border-radius:999px;background:#fff}.ui-segmented-toggle__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#242424}.ui-segmented-toggle__indicator--hidden{opacity:0}.ui-segmented-toggle__indicator--animated{transition:transform .2s ease,width .2s ease}.ui-segmented-toggle__option{--cnp-icon-color: #666666;position:relative;z-index:1;display:inline-flex;flex:0 0 auto;gap:4px;align-items:center;justify-content:center;margin:0;padding:3px 16px;border:0;border-radius:999px;background:transparent;color:#666;font:inherit;white-space:nowrap;cursor:pointer}.ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffffff;color:#fff}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__indicator{background:#d410aa}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffe6fa;color:#ffe6fa}:host(.ui-segmented-toggle--disabled){opacity:.5}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option{cursor:not-allowed}.ui-segmented-toggle__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.ui-segmented-toggle__indicator--animated{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
87
|
+
}
|
|
88
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedToggleComponent, decorators: [{
|
|
89
|
+
type: Component,
|
|
90
|
+
args: [{ selector: 'ui-segmented-toggle', standalone: true, imports: [IconComponentModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
91
|
+
'[attr.theme]': 'theme()',
|
|
92
|
+
'[class.ui-segmented-toggle--brand-active]': 'selectedOptionIsBrand()',
|
|
93
|
+
'[class.ui-segmented-toggle--disabled]': 'disabled()',
|
|
94
|
+
}, template: "<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n <span\n class=\"ui-segmented-toggle__indicator\"\n [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n aria-hidden=\"true\"\n [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n [style.width.px]=\"indicatorWidth()\"\n [style.height.px]=\"indicatorHeight()\"\n ></span>\n\n @for (option of options(); track option.value) {\n <button\n #optionButton\n type=\"button\"\n class=\"ui-segmented-toggle__option\"\n [attr.aria-pressed]=\"isSelected(option.value)\"\n [attr.aria-label]=\"fallbackAriaLabel(option)\"\n [disabled]=\"disabled()\"\n (click)=\"select(option.value)\"\n >\n @if (option.icon) {\n <ui-icon\n class=\"ui-segmented-toggle__icon\"\n [name]=\"option.icon\"\n size=\"16\"\n [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n ></ui-icon>\n @if (option.iconAriaLabel) {\n <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n }\n }\n @if (option.label) {\n <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n }\n </button>\n }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:inline-block}.ui-segmented-toggle__group{position:relative;display:flex;align-items:center;gap:0;padding:4px;box-shadow:inset 0 0 0 1px #242424;border-radius:999px;background:#fff}.ui-segmented-toggle__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#242424}.ui-segmented-toggle__indicator--hidden{opacity:0}.ui-segmented-toggle__indicator--animated{transition:transform .2s ease,width .2s ease}.ui-segmented-toggle__option{--cnp-icon-color: #666666;position:relative;z-index:1;display:inline-flex;flex:0 0 auto;gap:4px;align-items:center;justify-content:center;margin:0;padding:3px 16px;border:0;border-radius:999px;background:transparent;color:#666;font:inherit;white-space:nowrap;cursor:pointer}.ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffffff;color:#fff}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__indicator{background:#d410aa}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffe6fa;color:#ffe6fa}:host(.ui-segmented-toggle--disabled){opacity:.5}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option{cursor:not-allowed}.ui-segmented-toggle__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.ui-segmented-toggle__indicator--animated{transition:none}}\n"] }]
|
|
95
|
+
}], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], optionButtons: [{ type: i0.ViewChildren, args: ['optionButton', { isSignal: true }] }] } });
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* Generated bundle index. Do not edit.
|
|
99
|
+
*/
|
|
100
|
+
|
|
101
|
+
export { SegmentedToggleComponent };
|
|
102
|
+
//# sourceMappingURL=testgorilla-tgo-ui-components-segmented-toggle.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"testgorilla-tgo-ui-components-segmented-toggle.mjs","sources":["../../../components/segmented-toggle/segmented-toggle.component.ts","../../../components/segmented-toggle/segmented-toggle.component.html","../../../components/segmented-toggle/testgorilla-tgo-ui-components-segmented-toggle.ts"],"sourcesContent":["import {\n afterNextRender,\n afterRenderEffect,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n inject,\n input,\n model,\n signal,\n viewChildren,\n} from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { SegmentedToggleOption } from './segmented-toggle.model';\n\n@Component({\n selector: 'ui-segmented-toggle',\n standalone: true,\n imports: [IconComponentModule],\n templateUrl: './segmented-toggle.component.html',\n styleUrls: ['./segmented-toggle.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.theme]': 'theme()',\n '[class.ui-segmented-toggle--brand-active]': 'selectedOptionIsBrand()',\n '[class.ui-segmented-toggle--disabled]': 'disabled()',\n },\n})\nexport class SegmentedToggleComponent<T> {\n private readonly hostRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n\n readonly options = input.required<SegmentedToggleOption<T>[]>();\n readonly value = model<T>();\n readonly disabled = input(false, { transform: booleanAttribute });\n readonly ariaLabel = input<string>();\n readonly applicationTheme = input<ApplicationTheme | undefined>(undefined);\n private readonly defaultAppTheme = inject<ApplicationTheme>('CANOPYUI_DEFAULT_APPLICATION_THEME' as never, {\n optional: true,\n });\n readonly theme = computed<ApplicationTheme>(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'light');\n\n /** One ElementRef per segment button; used to measure the active pill geometry. */\n private readonly optionButtons = viewChildren<ElementRef<HTMLButtonElement>>('optionButton');\n\n /** Index of the selected option; -1 when value() matches no option. */\n protected readonly selectedIndex = computed(() => this.options().findIndex(option => option.value === this.value()));\n\n /** True when the currently-selected option is flagged `brand: true`. */\n protected readonly selectedOptionIsBrand = computed(() => this.options()[this.selectedIndex()]?.brand === true);\n\n /** Measured pixel geometry of the active button, driving the sliding indicator. */\n protected readonly indicatorOffset = signal(0);\n protected readonly indicatorTop = signal(0);\n protected readonly indicatorWidth = signal(0);\n protected readonly indicatorHeight = signal(0);\n\n /** Enables the slide transition only after the initial position is painted. */\n protected readonly animated = signal(false);\n\n constructor() {\n // Re-measure after every render that follows a selection or options change.\n afterRenderEffect(() => {\n // Read these so the effect re-runs (post-render) whenever selection changes.\n this.value();\n this.options();\n this.measureIndicator();\n });\n\n // Re-measure on container resize (width changes don't touch any signal).\n afterNextRender(() => {\n // Position the indicator for the initial selection without animating, then\n // enable the slide on the next frame so only user-driven changes animate.\n this.measureIndicator();\n requestAnimationFrame(() => this.animated.set(true));\n\n if (typeof ResizeObserver === 'undefined') {\n return;\n }\n const observer = new ResizeObserver(() => this.measureIndicator());\n observer.observe(this.hostRef.nativeElement);\n this.destroyRef.onDestroy(() => observer.disconnect());\n });\n }\n\n protected select(optionValue: T): void {\n if (this.disabled()) {\n return;\n }\n this.value.set(optionValue);\n }\n\n protected isSelected(optionValue: T): boolean {\n return optionValue === this.value();\n }\n\n /**\n * Last-resort accessible name for a segment. Used only for an icon-only option\n * that provides neither a visible `label` nor an `iconAriaLabel`, so the button\n * is never a nameless control. When a label or icon label is present those name\n * the button and this returns `null` (no `aria-label` attribute).\n */\n protected fallbackAriaLabel(option: SegmentedToggleOption<T>): string | null {\n if (option.label || option.iconAriaLabel) {\n return null;\n }\n return String(option.value);\n }\n\n /** Reads the active button's box and writes it to the indicator signals. */\n private measureIndicator(): void {\n const button = this.optionButtons()[this.selectedIndex()]?.nativeElement;\n if (!button) {\n return;\n }\n this.indicatorOffset.set(button.offsetLeft);\n this.indicatorTop.set(button.offsetTop);\n this.indicatorWidth.set(button.offsetWidth);\n this.indicatorHeight.set(button.offsetHeight);\n }\n}\n","<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n <span\n class=\"ui-segmented-toggle__indicator\"\n [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n aria-hidden=\"true\"\n [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n [style.width.px]=\"indicatorWidth()\"\n [style.height.px]=\"indicatorHeight()\"\n ></span>\n\n @for (option of options(); track option.value) {\n <button\n #optionButton\n type=\"button\"\n class=\"ui-segmented-toggle__option\"\n [attr.aria-pressed]=\"isSelected(option.value)\"\n [attr.aria-label]=\"fallbackAriaLabel(option)\"\n [disabled]=\"disabled()\"\n (click)=\"select(option.value)\"\n >\n @if (option.icon) {\n <ui-icon\n class=\"ui-segmented-toggle__icon\"\n [name]=\"option.icon\"\n size=\"16\"\n [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n ></ui-icon>\n @if (option.iconAriaLabel) {\n <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n }\n }\n @if (option.label) {\n <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n }\n </button>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAgCa,wBAAwB,CAAA;AAgCnC,IAAA,WAAA,GAAA;AA/BiB,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAA0B,UAAU,CAAC;AACrD,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAEvC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,kDAA8B;QACtD,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAK;AAClB,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,4CAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;QACxD,IAAA,CAAA,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;AAC3B,QAAA,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAA+B,SAAS,4DAAC;AACzD,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAmB,oCAA6C,EAAE;AACzG,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC;AACO,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAmB,MAAM,IAAI,CAAC,gBAAgB,EAAE,IAAI,IAAI,CAAC,eAAe,IAAI,OAAO,iDAAC;;AAG5F,QAAA,IAAA,CAAA,aAAa,GAAG,YAAY,CAAgC,cAAc,yDAAC;;QAGzE,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,SAAS,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,eAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;;QAGjG,IAAA,CAAA,qBAAqB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,uBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;;AAG5F,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAC,CAAC,2DAAC;AAC3B,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAC,CAAC,wDAAC;AACxB,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,CAAC,0DAAC;AAC1B,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAC,CAAC,2DAAC;;AAG3B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,oDAAC;;QAIzC,iBAAiB,CAAC,MAAK;;YAErB,IAAI,CAAC,KAAK,EAAE;YACZ,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,gBAAgB,EAAE;AACzB,QAAA,CAAC,CAAC;;QAGF,eAAe,CAAC,MAAK;;;YAGnB,IAAI,CAAC,gBAAgB,EAAE;AACvB,YAAA,qBAAqB,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAEpD,YAAA,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;gBACzC;YACF;AACA,YAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAClE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;AAC5C,YAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;AACxD,QAAA,CAAC,CAAC;IACJ;AAEU,IAAA,MAAM,CAAC,WAAc,EAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACnB;QACF;AACA,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC;IAC7B;AAEU,IAAA,UAAU,CAAC,WAAc,EAAA;AACjC,QAAA,OAAO,WAAW,KAAK,IAAI,CAAC,KAAK,EAAE;IACrC;AAEA;;;;;AAKG;AACO,IAAA,iBAAiB,CAAC,MAAgC,EAAA;QAC1D,IAAI,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,aAAa,EAAE;AACxC,YAAA,OAAO,IAAI;QACb;AACA,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;IAC7B;;IAGQ,gBAAgB,GAAA;AACtB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,aAAa;QACxE,IAAI,CAAC,MAAM,EAAE;YACX;QACF;QACA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC;QAC3C,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC;QAC3C,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC;IAC/C;+GA3FW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,yCAAA,EAAA,yBAAA,EAAA,qCAAA,EAAA,YAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,eAAA,EAAA,SAAA,EAAA,CAAA,cAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChCrC,83CAsCA,EAAA,MAAA,EAAA,CAAA,yhHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDhBY,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAUlB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAbpC,SAAS;+BACE,qBAAqB,EAAA,UAAA,EACnB,IAAI,EAAA,OAAA,EACP,CAAC,mBAAmB,CAAC,EAAA,eAAA,EAGb,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,cAAc,EAAE,SAAS;AACzB,wBAAA,2CAA2C,EAAE,yBAAyB;AACtE,wBAAA,uCAAuC,EAAE,YAAY;AACtD,qBAAA,EAAA,QAAA,EAAA,83CAAA,EAAA,MAAA,EAAA,CAAA,yhHAAA,CAAA,EAAA;6nBAiB4E,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AE/C7F;;AAEG;;;;"}
|
|
@@ -107,6 +107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
107
107
|
* - @testgorilla/tgo-ui/components/empty-state
|
|
108
108
|
* - @testgorilla/tgo-ui/components/filter-button
|
|
109
109
|
* - @testgorilla/tgo-ui/components/segmented-button
|
|
110
|
+
* - @testgorilla/tgo-ui/components/segmented-toggle
|
|
110
111
|
* - @testgorilla/tgo-ui/components/segmented-bar
|
|
111
112
|
* - @testgorilla/tgo-ui/components/paginator
|
|
112
113
|
* - @testgorilla/tgo-ui/components/validation-error
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"testgorilla-tgo-ui.mjs","sources":["../../../projects/tgo-canopy-ui/components/deprecated-paginator/deprecated-paginator.component.ts","../../../projects/tgo-canopy-ui/components/deprecated-paginator/deprecated-paginator.component.html","../../../projects/tgo-canopy-ui/components/deprecated-paginator/deprecated-paginator.component.module.ts","../../../projects/tgo-canopy-ui/public-api.ts","../../../projects/tgo-canopy-ui/testgorilla-tgo-ui.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\nimport { PageEvent } from '@angular/material/paginator';\n\n@Component({\n selector: 'ui-paginator',\n templateUrl: './deprecated-paginator.component.html',\n styleUrls: ['./deprecated-paginator.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class DeprecatedPaginatorComponent {\n // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13\n // https://github.com/StoryFnbookjs/StoryFnbook/issues/16865\n // https://github.com/StoryFnbookjs/StoryFnbook/issues/17004\n\n /**\n * Paginator size options\n *\n * @type {number[]}\n * @memberof PaginatorComponent\n */\n readonly pageSizeOptions = [10, 25, 50];\n\n /**\n * Data length\n *\n * @type {number}\n * @memberof PaginatorComponent\n */\n @Input() length = 0;\n\n /**\n * Default page size\n *\n * @type {number}\n * @memberof PaginatorComponent\n */\n @Input() defaultPageSize = 25;\n\n /**\n * @ignore\n */\n @Output() paginatorChangedEvent: EventEmitter<PageEvent> = new EventEmitter<PageEvent>();\n\n constructor() {}\n\n paginatorChanged(paginator: PageEvent) {\n this.paginatorChangedEvent.emit(paginator);\n }\n}\n","<mat-paginator\n [length]=\"length\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"paginatorChanged($event)\"\n>\n</mat-paginator>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatPaginatorModule } from '@angular/material/paginator';\nimport { DeprecatedPaginatorComponent } from './deprecated-paginator.component';\n\n@NgModule({\n declarations: [DeprecatedPaginatorComponent],\n imports: [CommonModule, MatPaginatorModule],\n exports: [DeprecatedPaginatorComponent],\n providers: [],\n})\nexport class DeprecatedPaginatorComponentModule {}\n","/**\n * @testgorilla/tgo-ui Public API\n *\n * IMPORTANT: For optimal tree-shaking, import directly from entry points:\n *\n * @example\n * import { ButtonComponent } from '@testgorilla/tgo-ui/components/button';\n * import { IconComponent } from '@testgorilla/tgo-ui/components/icon';\n * import { DialogService } from '@testgorilla/tgo-ui/components/dialog';\n *\n * Available entry points:\n * - @testgorilla/tgo-ui/components/core (shared utilities, pipes, directives)\n * - @testgorilla/tgo-ui/components/icon\n * - @testgorilla/tgo-ui/components/badge\n * - @testgorilla/tgo-ui/components/button\n * - @testgorilla/tgo-ui/components/card\n * - @testgorilla/tgo-ui/components/checkbox\n * - @testgorilla/tgo-ui/components/dropdown\n * - @testgorilla/tgo-ui/components/field\n * - @testgorilla/tgo-ui/components/inline-field\n * - @testgorilla/tgo-ui/components/toggle\n * - @testgorilla/tgo-ui/components/radio-button\n * - @testgorilla/tgo-ui/components/slider\n * - @testgorilla/tgo-ui/components/rating\n * - @testgorilla/tgo-ui/components/scale\n * - @testgorilla/tgo-ui/components/autocomplete\n * - @testgorilla/tgo-ui/components/divider\n * - @testgorilla/tgo-ui/components/skeleton\n * - @testgorilla/tgo-ui/components/elevation-shadow\n * - @testgorilla/tgo-ui/components/tooltip\n * - @testgorilla/tgo-ui/components/spinner\n * - @testgorilla/tgo-ui/components/progress-bar\n * - @testgorilla/tgo-ui/components/radial-progress\n * - @testgorilla/tgo-ui/components/tag\n * - @testgorilla/tgo-ui/components/avatar\n * - @testgorilla/tgo-ui/components/logo\n * - @testgorilla/tgo-ui/components/empty-state\n * - @testgorilla/tgo-ui/components/filter-button\n * - @testgorilla/tgo-ui/components/segmented-button\n * - @testgorilla/tgo-ui/components/segmented-bar\n * - @testgorilla/tgo-ui/components/paginator\n * - @testgorilla/tgo-ui/components/validation-error\n * - @testgorilla/tgo-ui/components/accordion\n * - @testgorilla/tgo-ui/components/alert-banner\n * - @testgorilla/tgo-ui/components/breadcrumb\n * - @testgorilla/tgo-ui/components/navbar\n * - @testgorilla/tgo-ui/components/side-navigation\n * - @testgorilla/tgo-ui/components/page-header\n * - @testgorilla/tgo-ui/components/tabs\n * - @testgorilla/tgo-ui/components/stepper\n * - @testgorilla/tgo-ui/components/dialog\n * - @testgorilla/tgo-ui/components/snackbar\n * - @testgorilla/tgo-ui/components/side-panel\n * - @testgorilla/tgo-ui/components/side-sheet\n * - @testgorilla/tgo-ui/components/table\n * - @testgorilla/tgo-ui/components/datepicker\n * - @testgorilla/tgo-ui/components/ai-audio-circle\n * - @testgorilla/tgo-ui/components/ai-caveat\n * - @testgorilla/tgo-ui/components/ai-feedback\n * - @testgorilla/tgo-ui/components/checklist\n * - @testgorilla/tgo-ui/components/file-upload\n * - @testgorilla/tgo-ui/components/multi-input\n * - @testgorilla/tgo-ui/components/overflow-menu\n * - @testgorilla/tgo-ui/components/password-criteria\n * - @testgorilla/tgo-ui/components/password-strength\n * - @testgorilla/tgo-ui/components/phone-input\n * - @testgorilla/tgo-ui/components/prompt\n * - @testgorilla/tgo-ui/components/scale-table\n * - @testgorilla/tgo-ui/components/icon-label\n * - @testgorilla/tgo-ui/components/media-card\n * - @testgorilla/tgo-ui/components/media-dialog\n * - @testgorilla/tgo-ui/components/selectable-card\n * - @testgorilla/tgo-ui/components/donut-chart\n * - @testgorilla/tgo-ui/components/gaussian-chart\n * - @testgorilla/tgo-ui/components/spider-chart\n * - @testgorilla/tgo-ui/components/universal-skills\n * - @testgorilla/tgo-ui/components/audio-waveform\n * - @testgorilla/tgo-ui/components/write-with-ai\n */\n\n// Core utilities (re-exported for backward compatibility)\nexport * from '@testgorilla/tgo-ui/components/core';\n\n// Legacy: Deprecated Paginator (not an entry point)\nexport * from './components/deprecated-paginator/deprecated-paginator.component';\nexport * from './components/deprecated-paginator/deprecated-paginator.component.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAUa,4BAA4B,CAAA;AAkCvC,IAAA,WAAA,GAAA;;;;AA7BA;;;;;AAKG;QACM,IAAA,CAAA,eAAe,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAEvC;;;;;AAKG;QACM,IAAA,CAAA,MAAM,GAAG,CAAC;AAEnB;;;;;AAKG;QACM,IAAA,CAAA,eAAe,GAAG,EAAE;AAE7B;;AAEG;AACO,QAAA,IAAA,CAAA,qBAAqB,GAA4B,IAAI,YAAY,EAAa;IAEzE;AAEf,IAAA,gBAAgB,CAAC,SAAoB,EAAA;AACnC,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,SAAS,CAAC;IAC5C;+GAtCW,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,4BAA4B,wMCVzC,gLAOA,EAAA,MAAA,EAAA,CAAA,m2FAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,cAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,MAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDGa,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAPxC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,eAAA,EAGP,uBAAuB,CAAC,MAAM,cACnC,KAAK,EAAA,QAAA,EAAA,gLAAA,EAAA,MAAA,EAAA,CAAA,m2FAAA,CAAA,EAAA;;sBAqBhB;;sBAQA;;sBAKA;;;ME/BU,kCAAkC,CAAA;+GAAlC,kCAAkC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAlC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kCAAkC,iBAL9B,4BAA4B,CAAA,EAAA,OAAA,EAAA,CACjC,YAAY,EAAE,kBAAkB,aAChC,4BAA4B,CAAA,EAAA,CAAA,CAAA;gHAG3B,kCAAkC,EAAA,OAAA,EAAA,CAJnC,YAAY,EAAE,kBAAkB,CAAA,EAAA,CAAA,CAAA;;4FAI/B,kCAAkC,EAAA,UAAA,EAAA,CAAA;kBAN9C,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,4BAA4B,CAAC;AAC5C,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,kBAAkB,CAAC;oBAC3C,OAAO,EAAE,CAAC,4BAA4B,CAAC;AACvC,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA;;;ACVD
|
|
1
|
+
{"version":3,"file":"testgorilla-tgo-ui.mjs","sources":["../../../projects/tgo-canopy-ui/components/deprecated-paginator/deprecated-paginator.component.ts","../../../projects/tgo-canopy-ui/components/deprecated-paginator/deprecated-paginator.component.html","../../../projects/tgo-canopy-ui/components/deprecated-paginator/deprecated-paginator.component.module.ts","../../../projects/tgo-canopy-ui/public-api.ts","../../../projects/tgo-canopy-ui/testgorilla-tgo-ui.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\nimport { PageEvent } from '@angular/material/paginator';\n\n@Component({\n selector: 'ui-paginator',\n templateUrl: './deprecated-paginator.component.html',\n styleUrls: ['./deprecated-paginator.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class DeprecatedPaginatorComponent {\n // TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13\n // https://github.com/StoryFnbookjs/StoryFnbook/issues/16865\n // https://github.com/StoryFnbookjs/StoryFnbook/issues/17004\n\n /**\n * Paginator size options\n *\n * @type {number[]}\n * @memberof PaginatorComponent\n */\n readonly pageSizeOptions = [10, 25, 50];\n\n /**\n * Data length\n *\n * @type {number}\n * @memberof PaginatorComponent\n */\n @Input() length = 0;\n\n /**\n * Default page size\n *\n * @type {number}\n * @memberof PaginatorComponent\n */\n @Input() defaultPageSize = 25;\n\n /**\n * @ignore\n */\n @Output() paginatorChangedEvent: EventEmitter<PageEvent> = new EventEmitter<PageEvent>();\n\n constructor() {}\n\n paginatorChanged(paginator: PageEvent) {\n this.paginatorChangedEvent.emit(paginator);\n }\n}\n","<mat-paginator\n [length]=\"length\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"paginatorChanged($event)\"\n>\n</mat-paginator>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatPaginatorModule } from '@angular/material/paginator';\nimport { DeprecatedPaginatorComponent } from './deprecated-paginator.component';\n\n@NgModule({\n declarations: [DeprecatedPaginatorComponent],\n imports: [CommonModule, MatPaginatorModule],\n exports: [DeprecatedPaginatorComponent],\n providers: [],\n})\nexport class DeprecatedPaginatorComponentModule {}\n","/**\n * @testgorilla/tgo-ui Public API\n *\n * IMPORTANT: For optimal tree-shaking, import directly from entry points:\n *\n * @example\n * import { ButtonComponent } from '@testgorilla/tgo-ui/components/button';\n * import { IconComponent } from '@testgorilla/tgo-ui/components/icon';\n * import { DialogService } from '@testgorilla/tgo-ui/components/dialog';\n *\n * Available entry points:\n * - @testgorilla/tgo-ui/components/core (shared utilities, pipes, directives)\n * - @testgorilla/tgo-ui/components/icon\n * - @testgorilla/tgo-ui/components/badge\n * - @testgorilla/tgo-ui/components/button\n * - @testgorilla/tgo-ui/components/card\n * - @testgorilla/tgo-ui/components/checkbox\n * - @testgorilla/tgo-ui/components/dropdown\n * - @testgorilla/tgo-ui/components/field\n * - @testgorilla/tgo-ui/components/inline-field\n * - @testgorilla/tgo-ui/components/toggle\n * - @testgorilla/tgo-ui/components/radio-button\n * - @testgorilla/tgo-ui/components/slider\n * - @testgorilla/tgo-ui/components/rating\n * - @testgorilla/tgo-ui/components/scale\n * - @testgorilla/tgo-ui/components/autocomplete\n * - @testgorilla/tgo-ui/components/divider\n * - @testgorilla/tgo-ui/components/skeleton\n * - @testgorilla/tgo-ui/components/elevation-shadow\n * - @testgorilla/tgo-ui/components/tooltip\n * - @testgorilla/tgo-ui/components/spinner\n * - @testgorilla/tgo-ui/components/progress-bar\n * - @testgorilla/tgo-ui/components/radial-progress\n * - @testgorilla/tgo-ui/components/tag\n * - @testgorilla/tgo-ui/components/avatar\n * - @testgorilla/tgo-ui/components/logo\n * - @testgorilla/tgo-ui/components/empty-state\n * - @testgorilla/tgo-ui/components/filter-button\n * - @testgorilla/tgo-ui/components/segmented-button\n * - @testgorilla/tgo-ui/components/segmented-toggle\n * - @testgorilla/tgo-ui/components/segmented-bar\n * - @testgorilla/tgo-ui/components/paginator\n * - @testgorilla/tgo-ui/components/validation-error\n * - @testgorilla/tgo-ui/components/accordion\n * - @testgorilla/tgo-ui/components/alert-banner\n * - @testgorilla/tgo-ui/components/breadcrumb\n * - @testgorilla/tgo-ui/components/navbar\n * - @testgorilla/tgo-ui/components/side-navigation\n * - @testgorilla/tgo-ui/components/page-header\n * - @testgorilla/tgo-ui/components/tabs\n * - @testgorilla/tgo-ui/components/stepper\n * - @testgorilla/tgo-ui/components/dialog\n * - @testgorilla/tgo-ui/components/snackbar\n * - @testgorilla/tgo-ui/components/side-panel\n * - @testgorilla/tgo-ui/components/side-sheet\n * - @testgorilla/tgo-ui/components/table\n * - @testgorilla/tgo-ui/components/datepicker\n * - @testgorilla/tgo-ui/components/ai-audio-circle\n * - @testgorilla/tgo-ui/components/ai-caveat\n * - @testgorilla/tgo-ui/components/ai-feedback\n * - @testgorilla/tgo-ui/components/checklist\n * - @testgorilla/tgo-ui/components/file-upload\n * - @testgorilla/tgo-ui/components/multi-input\n * - @testgorilla/tgo-ui/components/overflow-menu\n * - @testgorilla/tgo-ui/components/password-criteria\n * - @testgorilla/tgo-ui/components/password-strength\n * - @testgorilla/tgo-ui/components/phone-input\n * - @testgorilla/tgo-ui/components/prompt\n * - @testgorilla/tgo-ui/components/scale-table\n * - @testgorilla/tgo-ui/components/icon-label\n * - @testgorilla/tgo-ui/components/media-card\n * - @testgorilla/tgo-ui/components/media-dialog\n * - @testgorilla/tgo-ui/components/selectable-card\n * - @testgorilla/tgo-ui/components/donut-chart\n * - @testgorilla/tgo-ui/components/gaussian-chart\n * - @testgorilla/tgo-ui/components/spider-chart\n * - @testgorilla/tgo-ui/components/universal-skills\n * - @testgorilla/tgo-ui/components/audio-waveform\n * - @testgorilla/tgo-ui/components/write-with-ai\n */\n\n// Core utilities (re-exported for backward compatibility)\nexport * from '@testgorilla/tgo-ui/components/core';\n\n// Legacy: Deprecated Paginator (not an entry point)\nexport * from './components/deprecated-paginator/deprecated-paginator.component';\nexport * from './components/deprecated-paginator/deprecated-paginator.component.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAUa,4BAA4B,CAAA;AAkCvC,IAAA,WAAA,GAAA;;;;AA7BA;;;;;AAKG;QACM,IAAA,CAAA,eAAe,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAEvC;;;;;AAKG;QACM,IAAA,CAAA,MAAM,GAAG,CAAC;AAEnB;;;;;AAKG;QACM,IAAA,CAAA,eAAe,GAAG,EAAE;AAE7B;;AAEG;AACO,QAAA,IAAA,CAAA,qBAAqB,GAA4B,IAAI,YAAY,EAAa;IAEzE;AAEf,IAAA,gBAAgB,CAAC,SAAoB,EAAA;AACnC,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,SAAS,CAAC;IAC5C;+GAtCW,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,4BAA4B,wMCVzC,gLAOA,EAAA,MAAA,EAAA,CAAA,m2FAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,sBAAA,EAAA,cAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,MAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDGa,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAPxC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,eAAA,EAGP,uBAAuB,CAAC,MAAM,cACnC,KAAK,EAAA,QAAA,EAAA,gLAAA,EAAA,MAAA,EAAA,CAAA,m2FAAA,CAAA,EAAA;;sBAqBhB;;sBAQA;;sBAKA;;;ME/BU,kCAAkC,CAAA;+GAAlC,kCAAkC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAlC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kCAAkC,iBAL9B,4BAA4B,CAAA,EAAA,OAAA,EAAA,CACjC,YAAY,EAAE,kBAAkB,aAChC,4BAA4B,CAAA,EAAA,CAAA,CAAA;gHAG3B,kCAAkC,EAAA,OAAA,EAAA,CAJnC,YAAY,EAAE,kBAAkB,CAAA,EAAA,CAAA,CAAA;;4FAI/B,kCAAkC,EAAA,UAAA,EAAA,CAAA;kBAN9C,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,4BAA4B,CAAC;AAC5C,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,kBAAkB,CAAC;oBAC3C,OAAO,EAAE,CAAC,4BAA4B,CAAC;AACvC,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA;;;ACVD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EG;AAEH;;ACjFA;;AAEG;;;;"}
|