@agorapulse/ui-components 20.4.26 → 20.4.27

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.
@@ -22,6 +22,8 @@ class SegmentedControlComponent {
22
22
  value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
23
23
  /** Disables the whole control. */
24
24
  disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
25
+ /** When true, the control fills its container width and segments share it equally instead of fitting their text. */
26
+ fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
25
27
  /** Accessible name for the group of segments. */
26
28
  ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
27
29
  constructor() {
@@ -34,12 +36,14 @@ class SegmentedControlComponent {
34
36
  this.value.set(option.value);
35
37
  }
36
38
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
37
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SegmentedControlComponent, isStandalone: true, selector: "ap-segmented-control", 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 } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<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.icon) {\n <ap-symbol\n class=\"ap-segmented-control__icon\"\n [symbolId]=\"option.icon\"\n [size]=\"16\"\n [color]=\"value() === option.value ? 'blue' : 'basic-grey'\" />\n }\n <span class=\"ap-segmented-control__label\">{{ option.label }}</span>\n </button>\n }\n</div>\n", styles: ["ap-segmented-control{display:inline-block}.ap-segmented-control{display:inline-flex;align-items:center}.ap-segmented-control .ap-segmented-control__segment{display:inline-flex;align-items:center;justify-content:center;gap:var(--ref-spacing-xxs);box-sizing:border-box;min-height:36px;margin:0;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);border:1px solid var(--ref-color-grey-20);background-color:var(--ref-color-white);color:var(--ref-color-grey-100);font-family:var(--font-family);font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md);white-space:nowrap;cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease}.ap-segmented-control .ap-segmented-control__segment:not(:first-child){margin-left:-1px}.ap-segmented-control .ap-segmented-control__segment:first-child{border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm)}.ap-segmented-control .ap-segmented-control__segment:last-child{border-top-right-radius:var(--ref-border-radius-sm);border-bottom-right-radius:var(--ref-border-radius-sm)}.ap-segmented-control .ap-segmented-control__segment:hover:not(:disabled){z-index:1;border-color:var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment:focus-visible{z-index:2;outline:none;border-color:var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment--selected{z-index:1;border-color:var(--ref-color-electric-blue-100);color:var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment:disabled{border-color:var(--ref-color-grey-20);background-color:var(--ref-color-grey-05);color:var(--ref-color-grey-40);cursor:not-allowed}.ap-segmented-control .ap-segmented-control__label{font:inherit}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
39
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SegmentedControlComponent, isStandalone: true, selector: "ap-segmented-control", 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 }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.ap-segmented-control--full-width": "fullWidth()" } }, ngImport: i0, template: "<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", styles: ["ap-segmented-control{display:inline-block}ap-segmented-control.ap-segmented-control--full-width{display:block}ap-segmented-control.ap-segmented-control--full-width .ap-segmented-control{display:flex;width:100%}ap-segmented-control.ap-segmented-control--full-width .ap-segmented-control__segment{flex:1 1 0}.ap-segmented-control{display:inline-flex;align-items:center}.ap-segmented-control .ap-segmented-control__segment{display:inline-flex;align-items:center;justify-content:center;gap:var(--ref-spacing-xxs);box-sizing:border-box;min-height:36px;margin:0;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);border:1px solid var(--ref-color-grey-20);background-color:var(--ref-color-white);color:var(--ref-color-grey-100);font-family:var(--ref-font-family);font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md);white-space:nowrap;cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease}.ap-segmented-control .ap-segmented-control__segment:not(:first-child){margin-left:-1px}.ap-segmented-control .ap-segmented-control__segment:first-child{border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm)}.ap-segmented-control .ap-segmented-control__segment:last-child{border-top-right-radius:var(--ref-border-radius-sm);border-bottom-right-radius:var(--ref-border-radius-sm)}.ap-segmented-control .ap-segmented-control__segment:hover:not(:disabled){z-index:1;border-color:var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment:focus-visible{z-index:2;outline:none;border-color:var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment.ap-segmented-control__segment--selected{z-index:1;border-color:var(--ref-color-electric-blue-100);color:var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment:disabled{border-color:var(--ref-color-grey-20);background-color:var(--ref-color-grey-05);color:var(--ref-color-grey-40);cursor:not-allowed}.ap-segmented-control .ap-segmented-control__label{font:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
38
40
  }
39
41
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SegmentedControlComponent, decorators: [{
40
42
  type: Component,
41
- args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-segmented-control', imports: [SymbolComponent], encapsulation: ViewEncapsulation.None, template: "<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.icon) {\n <ap-symbol\n class=\"ap-segmented-control__icon\"\n [symbolId]=\"option.icon\"\n [size]=\"16\"\n [color]=\"value() === option.value ? 'blue' : 'basic-grey'\" />\n }\n <span class=\"ap-segmented-control__label\">{{ option.label }}</span>\n </button>\n }\n</div>\n", styles: ["ap-segmented-control{display:inline-block}.ap-segmented-control{display:inline-flex;align-items:center}.ap-segmented-control .ap-segmented-control__segment{display:inline-flex;align-items:center;justify-content:center;gap:var(--ref-spacing-xxs);box-sizing:border-box;min-height:36px;margin:0;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);border:1px solid var(--ref-color-grey-20);background-color:var(--ref-color-white);color:var(--ref-color-grey-100);font-family:var(--font-family);font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md);white-space:nowrap;cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease}.ap-segmented-control .ap-segmented-control__segment:not(:first-child){margin-left:-1px}.ap-segmented-control .ap-segmented-control__segment:first-child{border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm)}.ap-segmented-control .ap-segmented-control__segment:last-child{border-top-right-radius:var(--ref-border-radius-sm);border-bottom-right-radius:var(--ref-border-radius-sm)}.ap-segmented-control .ap-segmented-control__segment:hover:not(:disabled){z-index:1;border-color:var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment:focus-visible{z-index:2;outline:none;border-color:var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment--selected{z-index:1;border-color:var(--ref-color-electric-blue-100);color:var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment:disabled{border-color:var(--ref-color-grey-20);background-color:var(--ref-color-grey-05);color:var(--ref-color-grey-40);cursor:not-allowed}.ap-segmented-control .ap-segmented-control__label{font:inherit}\n"] }]
42
- }], 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 }] }] } });
43
+ args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-segmented-control', imports: [SymbolComponent], host: {
44
+ '[class.ap-segmented-control--full-width]': 'fullWidth()',
45
+ }, encapsulation: ViewEncapsulation.None, template: "<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", styles: ["ap-segmented-control{display:inline-block}ap-segmented-control.ap-segmented-control--full-width{display:block}ap-segmented-control.ap-segmented-control--full-width .ap-segmented-control{display:flex;width:100%}ap-segmented-control.ap-segmented-control--full-width .ap-segmented-control__segment{flex:1 1 0}.ap-segmented-control{display:inline-flex;align-items:center}.ap-segmented-control .ap-segmented-control__segment{display:inline-flex;align-items:center;justify-content:center;gap:var(--ref-spacing-xxs);box-sizing:border-box;min-height:36px;margin:0;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);border:1px solid var(--ref-color-grey-20);background-color:var(--ref-color-white);color:var(--ref-color-grey-100);font-family:var(--ref-font-family);font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md);white-space:nowrap;cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease}.ap-segmented-control .ap-segmented-control__segment:not(:first-child){margin-left:-1px}.ap-segmented-control .ap-segmented-control__segment:first-child{border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm)}.ap-segmented-control .ap-segmented-control__segment:last-child{border-top-right-radius:var(--ref-border-radius-sm);border-bottom-right-radius:var(--ref-border-radius-sm)}.ap-segmented-control .ap-segmented-control__segment:hover:not(:disabled){z-index:1;border-color:var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment:focus-visible{z-index:2;outline:none;border-color:var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment.ap-segmented-control__segment--selected{z-index:1;border-color:var(--ref-color-electric-blue-100);color:var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment:disabled{border-color:var(--ref-color-grey-20);background-color:var(--ref-color-grey-05);color:var(--ref-color-grey-40);cursor:not-allowed}.ap-segmented-control .ap-segmented-control__label{font:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis}\n"] }]
46
+ }], 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 }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
43
47
 
44
48
  /**
45
49
  * Generated bundle index. Do not edit.
@@ -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 icon?: 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 // 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 /** 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.icon) {\n <ap-symbol\n class=\"ap-segmented-control__icon\"\n [symbolId]=\"option.icon\"\n [size]=\"16\"\n [color]=\"value() === option.value ? 'blue' : 'basic-grey'\" />\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;MAWU,yBAAyB,CAAA;AACjB,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;AAE/C,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,kDAA4B;;IAEpD,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;;AAEvB,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC;;AAEvB,IAAA,SAAS,GAAG,KAAK,CAAC,EAAE,qDAAC;AAE9B,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI,MAAM,CAAC,qBAAqB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IACzG;AAEU,IAAA,MAAM,CAAC,MAA8B,EAAA;QAC3C,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,MAAM,CAAC,QAAQ,EAAE;YACpC;QACJ;QACA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;IAChC;wGApBS,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,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,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrCtC,k7BAuBA,EAAA,MAAA,EAAA,CAAA,w4DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDSc,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FAKhB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAVrC,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,sBAAsB,EAAA,OAAA,EAGvB,CAAC,eAAe,CAAC,EAAA,aAAA,EAGX,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,k7BAAA,EAAA,MAAA,EAAA,CAAA,w4DAAA,CAAA,EAAA;;;AEnCzC;;AAEG;;;;"}
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":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@agorapulse/ui-components",
3
3
  "description": "Agorapulse UI Components Library",
4
- "version": "20.4.26",
4
+ "version": "20.4.27",
5
5
  "author": "Benoit Hediard",
6
6
  "repository": {
7
7
  "type": "git",
@@ -7,7 +7,7 @@ interface SegmentedControlOption {
7
7
  /** The text shown on the segment. */
8
8
  label: string;
9
9
  /** Optional leading icon symbol id. */
10
- icon?: agorapulseSymbol;
10
+ symbolId?: agorapulseSymbol;
11
11
  /** Disables this segment only. */
12
12
  disabled?: boolean;
13
13
  }
@@ -30,12 +30,14 @@ declare class SegmentedControlComponent {
30
30
  readonly value: _angular_core.ModelSignal<string | undefined>;
31
31
  /** Disables the whole control. */
32
32
  readonly disabled: _angular_core.InputSignal<boolean>;
33
+ /** When true, the control fills its container width and segments share it equally instead of fitting their text. */
34
+ readonly fullWidth: _angular_core.InputSignal<boolean>;
33
35
  /** Accessible name for the group of segments. */
34
36
  readonly ariaLabel: _angular_core.InputSignal<string>;
35
37
  constructor();
36
38
  protected select(option: SegmentedControlOption): void;
37
39
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedControlComponent, never>;
38
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedControlComponent, "ap-segmented-control", 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; }; }, { "value": "valueChange"; }, never, never, true, never>;
40
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedControlComponent, "ap-segmented-control", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
39
41
  }
40
42
 
41
43
  export { SegmentedControlComponent };