@agorapulse/ui-components 20.4.32 → 20.4.33
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/agorapulse-ui-components-20.4.33.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-segmented-control.mjs +10 -3
- package/fesm2022/agorapulse-ui-components-segmented-control.mjs.map +1 -1
- package/package.json +1 -1
- package/segmented-control/index.d.ts +3 -2
- package/agorapulse-ui-components-20.4.32.tgz +0 -0
|
Binary file
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
|
|
2
2
|
import { SymbolRegistry, SymbolComponent } from '@agorapulse/ui-symbol';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { inject, input, model, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
|
+
import { inject, input, model, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* A single-select control for switching between a small set (2–4) of mutually
|
|
@@ -18,14 +18,21 @@ import { inject, input, model, ViewEncapsulation, ChangeDetectionStrategy, Compo
|
|
|
18
18
|
class SegmentedControlComponent {
|
|
19
19
|
symbolRegistry = inject(SymbolRegistry);
|
|
20
20
|
options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
21
|
-
/** The currently selected value. Supports two-way binding via `[(value)]`. */
|
|
22
|
-
value = model(...(ngDevMode ? [
|
|
21
|
+
/** The currently selected value. Supports two-way binding via `[(value)]`. Defaults to the first option's value when unset. */
|
|
22
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
23
23
|
/** Disables the whole control. */
|
|
24
24
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
25
25
|
/** When true, the control fills its container width and segments share it equally instead of fitting their text. */
|
|
26
26
|
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
27
27
|
/** Accessible name for the group of segments. */
|
|
28
28
|
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
29
|
+
// Keep `value` defined: fall back to the first option whenever it is unset.
|
|
30
|
+
defaultValueEffect = effect(() => {
|
|
31
|
+
const [firstOption] = this.options();
|
|
32
|
+
if (!this.value() && firstOption) {
|
|
33
|
+
untracked(() => this.value.set(firstOption.value));
|
|
34
|
+
}
|
|
35
|
+
}, ...(ngDevMode ? [{ debugName: "defaultValueEffect" }] : []));
|
|
29
36
|
constructor() {
|
|
30
37
|
this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
|
|
31
38
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-segmented-control.mjs","sources":["../../../libs/ui-components/segmented-control/src/segmented-control.component.ts","../../../libs/ui-components/segmented-control/src/segmented-control.component.html","../../../libs/ui-components/segmented-control/src/agorapulse-ui-components-segmented-control.ts"],"sourcesContent":["import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { agorapulseSymbol, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, inject, input, model, ViewEncapsulation } from '@angular/core';\n\nexport interface SegmentedControlOption {\n /** The value bound to the control when this option is selected. */\n value: string;\n /** The text shown on the segment. */\n label: string;\n /** Optional leading icon symbol id. */\n symbolId?: agorapulseSymbol;\n /** Disables this segment only. */\n disabled?: boolean;\n}\n\n/**\n * A single-select control for switching between a small set (2–4) of mutually\n * exclusive options laid out side by side.\n *\n * @example\n * ```html\n * <ap-segmented-control\n * [options]=\"[{ value: 'list', label: 'List' }, { value: 'board', label: 'Board' }]\"\n * [(value)]=\"view\"\n * ariaLabel=\"Choose a view\" />\n * ```\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-segmented-control',\n templateUrl: './segmented-control.component.html',\n styleUrls: ['./segmented-control.component.scss'],\n imports: [SymbolComponent],\n host: {\n '[class.ap-segmented-control--full-width]': 'fullWidth()',\n },\n // Emit plain, global `.ap-segmented-control*` classes (no Angular scoping) so the\n // styling stays framework-agnostic and readable/reusable outside Angular.\n encapsulation: ViewEncapsulation.None,\n})\nexport class SegmentedControlComponent {\n private readonly symbolRegistry = inject(SymbolRegistry);\n\n readonly options = input.required<SegmentedControlOption[]>();\n /** The currently selected value. Supports two-way binding via `[(value)]`. */\n readonly value = model<string>();\n /** Disables the whole control. */\n readonly disabled = input(false);\n /** When true, the control fills its container width and segments share it equally instead of fitting their text. */\n readonly fullWidth = input(false);\n /** Accessible name for the group of segments. */\n readonly ariaLabel = input('');\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n }\n\n protected select(option: SegmentedControlOption): void {\n if (this.disabled() || option.disabled) {\n return;\n }\n this.value.set(option.value);\n }\n}\n","<div\n class=\"ap-segmented-control\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel() || null\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n class=\"ap-segmented-control__segment\"\n [class.ap-segmented-control__segment--selected]=\"value() === option.value\"\n [attr.aria-pressed]=\"value() === option.value\"\n [disabled]=\"disabled() || (option.disabled ?? false)\"\n (click)=\"select(option)\">\n @if (option.symbolId) {\n <ap-symbol\n class=\"ap-segmented-control__icon\"\n [symbolId]=\"option.symbolId\"\n [size]=\"16\"\n [color]=\"value() === option.value ? 'blue' : 'grey-blue'\" />\n }\n <span class=\"ap-segmented-control__label\">{{ option.label }}</span>\n </button>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;AAeA;;;;;;;;;;;AAWG;MAcU,yBAAyB,CAAA;AACjB,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;AAE/C,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,kDAA4B;;
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-segmented-control.mjs","sources":["../../../libs/ui-components/segmented-control/src/segmented-control.component.ts","../../../libs/ui-components/segmented-control/src/segmented-control.component.html","../../../libs/ui-components/segmented-control/src/agorapulse-ui-components-segmented-control.ts"],"sourcesContent":["import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { agorapulseSymbol, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, effect, inject, input, model, untracked, ViewEncapsulation } from '@angular/core';\n\nexport interface SegmentedControlOption {\n /** The value bound to the control when this option is selected. */\n value: string;\n /** The text shown on the segment. */\n label: string;\n /** Optional leading icon symbol id. */\n symbolId?: agorapulseSymbol;\n /** Disables this segment only. */\n disabled?: boolean;\n}\n\n/**\n * A single-select control for switching between a small set (2–4) of mutually\n * exclusive options laid out side by side.\n *\n * @example\n * ```html\n * <ap-segmented-control\n * [options]=\"[{ value: 'list', label: 'List' }, { value: 'board', label: 'Board' }]\"\n * [(value)]=\"view\"\n * ariaLabel=\"Choose a view\" />\n * ```\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-segmented-control',\n templateUrl: './segmented-control.component.html',\n styleUrls: ['./segmented-control.component.scss'],\n imports: [SymbolComponent],\n host: {\n '[class.ap-segmented-control--full-width]': 'fullWidth()',\n },\n // Emit plain, global `.ap-segmented-control*` classes (no Angular scoping) so the\n // styling stays framework-agnostic and readable/reusable outside Angular.\n encapsulation: ViewEncapsulation.None,\n})\nexport class SegmentedControlComponent {\n private readonly symbolRegistry = inject(SymbolRegistry);\n\n readonly options = input.required<SegmentedControlOption[]>();\n /** The currently selected value. Supports two-way binding via `[(value)]`. Defaults to the first option's value when unset. */\n readonly value = model<string>('');\n /** Disables the whole control. */\n readonly disabled = input(false);\n /** When true, the control fills its container width and segments share it equally instead of fitting their text. */\n readonly fullWidth = input(false);\n /** Accessible name for the group of segments. */\n readonly ariaLabel = input('');\n\n // Keep `value` defined: fall back to the first option whenever it is unset.\n private readonly defaultValueEffect = effect(() => {\n const [firstOption] = this.options();\n if (!this.value() && firstOption) {\n untracked(() => this.value.set(firstOption.value));\n }\n });\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n }\n\n protected select(option: SegmentedControlOption): void {\n if (this.disabled() || option.disabled) {\n return;\n }\n this.value.set(option.value);\n }\n}\n","<div\n class=\"ap-segmented-control\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel() || null\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n class=\"ap-segmented-control__segment\"\n [class.ap-segmented-control__segment--selected]=\"value() === option.value\"\n [attr.aria-pressed]=\"value() === option.value\"\n [disabled]=\"disabled() || (option.disabled ?? false)\"\n (click)=\"select(option)\">\n @if (option.symbolId) {\n <ap-symbol\n class=\"ap-segmented-control__icon\"\n [symbolId]=\"option.symbolId\"\n [size]=\"16\"\n [color]=\"value() === option.value ? 'blue' : 'grey-blue'\" />\n }\n <span class=\"ap-segmented-control__label\">{{ option.label }}</span>\n </button>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -26,14 +26,15 @@ interface SegmentedControlOption {
|
|
|
26
26
|
declare class SegmentedControlComponent {
|
|
27
27
|
private readonly symbolRegistry;
|
|
28
28
|
readonly options: _angular_core.InputSignal<SegmentedControlOption[]>;
|
|
29
|
-
/** The currently selected value. Supports two-way binding via `[(value)]`. */
|
|
30
|
-
readonly value: _angular_core.ModelSignal<string
|
|
29
|
+
/** The currently selected value. Supports two-way binding via `[(value)]`. Defaults to the first option's value when unset. */
|
|
30
|
+
readonly value: _angular_core.ModelSignal<string>;
|
|
31
31
|
/** Disables the whole control. */
|
|
32
32
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
33
33
|
/** When true, the control fills its container width and segments share it equally instead of fitting their text. */
|
|
34
34
|
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
35
35
|
/** Accessible name for the group of segments. */
|
|
36
36
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
37
|
+
private readonly defaultValueEffect;
|
|
37
38
|
constructor();
|
|
38
39
|
protected select(option: SegmentedControlOption): void;
|
|
39
40
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedControlComponent, never>;
|
|
Binary file
|