@progress/kendo-angular-buttons 23.3.0-develop.2 → 23.3.0-develop.20

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/README.md CHANGED
@@ -15,7 +15,7 @@ The Kendo UI for Angular Buttons provide a clickable UI functionality which can
15
15
 
16
16
  ## What's Included in the Angular Buttons Package
17
17
 
18
- The [Angular Buttons](https://www.telerik.com/kendo-angular-ui/components/buttons) package includes eight built-in components:
18
+ The [Angular Buttons](https://www.telerik.com/kendo-angular-ui/components/buttons) package includes ten built-in components:
19
19
 
20
20
  * [Angular Button Component](https://www.telerik.com/kendo-angular-ui/components/buttons/button)
21
21
  * [Angular ButtonGroup Component](https://www.telerik.com/kendo-angular-ui/components/buttons/buttongroup)
@@ -23,7 +23,9 @@ The [Angular Buttons](https://www.telerik.com/kendo-angular-ui/components/button
23
23
  * [Angular ChipList Component](https://www.telerik.com/kendo-angular-ui/components/buttons/chiplist)
24
24
  * [Angular DropDownButton Component](https://www.telerik.com/kendo-angular-ui/components/buttons/dropdownbutton)
25
25
  * [Angular FloatingActionButton Component](https://www.telerik.com/kendo-angular-ui/components/buttons/floatingactionbutton)
26
+ * [Angular SegmentedControl Component](https://www.telerik.com/kendo-angular-ui/components/buttons/segmentedcontrol)
26
27
  * [Angular SmartPasteButton Component](https://www.telerik.com/kendo-angular-ui/components/buttons/smartpastebutton)
28
+ * [Angular SpeechToTextButton Component](https://www.telerik.com/kendo-angular-ui/components/buttons/speechtotextbutton)
27
29
  * [Angular SplitButton Component](https://www.telerik.com/kendo-angular-ui/components/buttons/splitbutton)
28
30
 
29
31
  ## Key Features
@@ -6,7 +6,7 @@ import { SimpleChanges, ElementRef, EventEmitter, Renderer2, OnDestroy, NgZone,
6
6
  import { KendoButtonService } from './button.service';
7
7
  import { SVGIcon } from '@progress/kendo-svg-icons';
8
8
  import { LocalizationService } from '@progress/kendo-angular-l10n';
9
- import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
9
+ import { ButtonFillMode, ButtonIconPosition, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
10
10
  import { ArrowIconSettings } from '../common/models/arrow-settings';
11
11
  import * as i0 from "@angular/core";
12
12
  /**
@@ -64,6 +64,12 @@ export declare class ButtonComponent implements OnInit, OnDestroy, OnChanges {
64
64
  * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
65
65
  */
66
66
  imageUrl: string;
67
+ /**
68
+ * Sets the icon position relative to the button text.
69
+ * @hidden
70
+ * @default 'start'
71
+ */
72
+ iconPosition: ButtonIconPosition;
67
73
  /**
68
74
  * Defines a CSS class, or multiple classes separated by spaces applied to a `span` element inside the Button. Use the `iconClass` to add custom icons.
69
75
  */
@@ -200,5 +206,5 @@ export declare class ButtonComponent implements OnInit, OnDestroy, OnChanges {
200
206
  private handleClasses;
201
207
  private handleThemeColor;
202
208
  static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, [null, null, { optional: true; }, null, null]>;
203
- static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[kendoButton]", ["kendoButton"], { "arrowIcon": { "alias": "arrowIcon"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "togglable": { "alias": "togglable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "primary": { "alias": "primary"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "selectedChange": "selectedChange"; "click": "click"; }, never, ["*"], true, never>;
209
+ static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[kendoButton]", ["kendoButton"], { "arrowIcon": { "alias": "arrowIcon"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "togglable": { "alias": "togglable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "primary": { "alias": "primary"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "selectedChange": "selectedChange"; "click": "click"; }, never, ["*"], true, never>;
204
210
  }
@@ -17,6 +17,7 @@ import * as i11 from "./splitbutton/localization/custom-messages.component";
17
17
  import * as i12 from "@progress/kendo-angular-common";
18
18
  import * as i13 from "./speechtotextbutton/speechtotextbutton.component";
19
19
  import * as i14 from "./smartpastebutton/smartpastebutton.component";
20
+ import * as i15 from "./segmentedcontrol/segmented-control.component";
20
21
  /**
21
22
  * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
22
23
  * definition for the Buttons components.
@@ -40,6 +41,6 @@ import * as i14 from "./smartpastebutton/smartpastebutton.component";
40
41
  */
41
42
  export declare class ButtonsModule {
42
43
  static ɵfac: i0.ɵɵFactoryDeclaration<ButtonsModule, never>;
43
- static ɵmod: i0.ɵɵNgModuleDeclaration<ButtonsModule, never, [typeof i1.ButtonComponent, typeof i1.ButtonComponent, typeof i2.ButtonGroupComponent, typeof i3.DropDownButtonComponent, typeof i4.ButtonItemTemplateDirective, typeof i5.ChipComponent, typeof i5.ChipComponent, typeof i6.ChipListComponent, typeof i7.FloatingActionButtonComponent, typeof i8.DialItemTemplateDirective, typeof i9.FloatingActionButtonTemplateDirective, typeof i10.SplitButtonComponent, typeof i11.SplitButtonCustomMessagesComponent, typeof i12.ToggleButtonTabStopDirective, typeof i4.ButtonItemTemplateDirective, typeof i13.SpeechToTextButtonComponent, typeof i14.SmartPasteButtonComponent, typeof i12.ToggleButtonTabStopDirective], [typeof i1.ButtonComponent, typeof i1.ButtonComponent, typeof i2.ButtonGroupComponent, typeof i3.DropDownButtonComponent, typeof i4.ButtonItemTemplateDirective, typeof i5.ChipComponent, typeof i5.ChipComponent, typeof i6.ChipListComponent, typeof i7.FloatingActionButtonComponent, typeof i8.DialItemTemplateDirective, typeof i9.FloatingActionButtonTemplateDirective, typeof i10.SplitButtonComponent, typeof i11.SplitButtonCustomMessagesComponent, typeof i12.ToggleButtonTabStopDirective, typeof i4.ButtonItemTemplateDirective, typeof i13.SpeechToTextButtonComponent, typeof i14.SmartPasteButtonComponent, typeof i12.ToggleButtonTabStopDirective]>;
44
+ static ɵmod: i0.ɵɵNgModuleDeclaration<ButtonsModule, never, [typeof i1.ButtonComponent, typeof i1.ButtonComponent, typeof i2.ButtonGroupComponent, typeof i3.DropDownButtonComponent, typeof i4.ButtonItemTemplateDirective, typeof i5.ChipComponent, typeof i5.ChipComponent, typeof i6.ChipListComponent, typeof i7.FloatingActionButtonComponent, typeof i8.DialItemTemplateDirective, typeof i9.FloatingActionButtonTemplateDirective, typeof i10.SplitButtonComponent, typeof i11.SplitButtonCustomMessagesComponent, typeof i12.ToggleButtonTabStopDirective, typeof i4.ButtonItemTemplateDirective, typeof i13.SpeechToTextButtonComponent, typeof i14.SmartPasteButtonComponent, typeof i15.SegmentedControlComponent, typeof i12.ToggleButtonTabStopDirective], [typeof i1.ButtonComponent, typeof i1.ButtonComponent, typeof i2.ButtonGroupComponent, typeof i3.DropDownButtonComponent, typeof i4.ButtonItemTemplateDirective, typeof i5.ChipComponent, typeof i5.ChipComponent, typeof i6.ChipListComponent, typeof i7.FloatingActionButtonComponent, typeof i8.DialItemTemplateDirective, typeof i9.FloatingActionButtonTemplateDirective, typeof i10.SplitButtonComponent, typeof i11.SplitButtonCustomMessagesComponent, typeof i12.ToggleButtonTabStopDirective, typeof i4.ButtonItemTemplateDirective, typeof i13.SpeechToTextButtonComponent, typeof i14.SmartPasteButtonComponent, typeof i15.SegmentedControlComponent, typeof i12.ToggleButtonTabStopDirective]>;
44
45
  static ɵinj: i0.ɵɵInjectorDeclaration<ButtonsModule>;
45
46
  }
@@ -0,0 +1,10 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ /**
6
+ * Defines the position of the icon relative to the button text.
7
+ *
8
+ * @hidden
9
+ */
10
+ export type ButtonIconPosition = 'start' | 'end';
@@ -8,3 +8,4 @@ export * from './models/fillmode';
8
8
  export * from './models/rounded';
9
9
  export * from './models/styling-classes';
10
10
  export * from './models/arrow-settings';
11
+ export * from './models/icon-position';
package/directives.d.ts CHANGED
@@ -16,6 +16,7 @@ import { SplitButtonComponent } from './splitbutton/splitbutton.component';
16
16
  import { ButtonItemTemplateDirective } from './listbutton/button-item-template.directive';
17
17
  import { SpeechToTextButtonComponent } from './speechtotextbutton/speechtotextbutton.component';
18
18
  import { SmartPasteButtonComponent } from './smartpastebutton/smartpastebutton.component';
19
+ import { SegmentedControlComponent } from './segmentedcontrol/segmented-control.component';
19
20
  /**
20
21
  * Use the `KENDO_BUTTON` utility array to add all Button-related components and directives to a standalone Angular component.
21
22
  *
@@ -142,6 +143,20 @@ export declare const KENDO_SPEECHTOTEXTBUTTON: readonly [typeof SpeechToTextButt
142
143
  * ```
143
144
  */
144
145
  export declare const KENDO_SMARTPASTEBUTTON: readonly [typeof SmartPasteButtonComponent];
146
+ /**
147
+ * Use the `KENDO_SEGMENTEDCONTROL` utility array to add all SegmentedControl-related components and directives to a standalone Angular component.
148
+ *
149
+ * @example
150
+ * ```typescript
151
+ * @Component({
152
+ * standalone: true,
153
+ * imports: [KENDO_SEGMENTEDCONTROL],
154
+ * // ...
155
+ * })
156
+ * export class MyComponent {}
157
+ * ```
158
+ */
159
+ export declare const KENDO_SEGMENTEDCONTROL: readonly [typeof SegmentedControlComponent];
145
160
  /**
146
161
  * Use the `KENDO_BUTTONS` utility array to add all `@progress/kendo-angular-buttons`-related components and directives to a standalone Angular component.
147
162
  *
@@ -155,4 +170,4 @@ export declare const KENDO_SMARTPASTEBUTTON: readonly [typeof SmartPasteButtonCo
155
170
  * export class MyComponent {}
156
171
  * ```
157
172
  */
158
- export declare const KENDO_BUTTONS: readonly [typeof ButtonComponent, typeof ButtonComponent, typeof ButtonGroupComponent, typeof DropDownButtonComponent, typeof ButtonItemTemplateDirective, typeof ChipComponent, typeof ChipComponent, typeof ChipListComponent, typeof FloatingActionButtonComponent, typeof DialItemTemplateDirective, typeof FloatingActionButtonTemplateDirective, typeof SplitButtonComponent, typeof SplitButtonCustomMessagesComponent, typeof ToggleButtonTabStopDirective, typeof ButtonItemTemplateDirective, typeof SpeechToTextButtonComponent, typeof SmartPasteButtonComponent];
173
+ export declare const KENDO_BUTTONS: readonly [typeof ButtonComponent, typeof ButtonComponent, typeof ButtonGroupComponent, typeof DropDownButtonComponent, typeof ButtonItemTemplateDirective, typeof ChipComponent, typeof ChipComponent, typeof ChipListComponent, typeof FloatingActionButtonComponent, typeof DialItemTemplateDirective, typeof FloatingActionButtonTemplateDirective, typeof SplitButtonComponent, typeof SplitButtonCustomMessagesComponent, typeof ToggleButtonTabStopDirective, typeof ButtonItemTemplateDirective, typeof SpeechToTextButtonComponent, typeof SmartPasteButtonComponent, typeof SegmentedControlComponent];
@@ -3,7 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as i0 from '@angular/core';
6
- import { Injectable, isDevMode, EventEmitter, Input, HostListener, HostBinding, Output, Optional, Component, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ViewChild, ContentChild, forwardRef, SkipSelf, NgModule } from '@angular/core';
6
+ import { Injectable, isDevMode, EventEmitter, Input, HostListener, HostBinding, Output, Optional, Component, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ViewChild, ContentChild, forwardRef, SkipSelf, ChangeDetectionStrategy, NgModule } from '@angular/core';
7
7
  import { Subject, Subscription, fromEvent, merge, of, Observable, from } from 'rxjs';
8
8
  import * as i12 from '@progress/kendo-angular-common';
9
9
  import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, normalizeKeys, Keys, TemplateContextDirective, MultiTabStop, guid, parseCSSClassNames, isPresent as isPresent$1, EventsOutsideAngularDirective, replaceMessagePlaceholder, anyChanged, PreventableEvent as PreventableEvent$1, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
@@ -13,7 +13,7 @@ import * as i1 from '@progress/kendo-angular-l10n';
13
13
  import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
14
14
  import { validatePackage } from '@progress/kendo-licensing';
15
15
  import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
16
- import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
16
+ import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
17
17
  import { filter, tap, take } from 'rxjs/operators';
18
18
  import * as i3 from '@progress/kendo-angular-popup';
19
19
  import { PopupService } from '@progress/kendo-angular-popup';
@@ -49,8 +49,8 @@ const packageMetadata = {
49
49
  productName: 'Kendo UI for Angular',
50
50
  productCode: 'KENDOUIANGULAR',
51
51
  productCodes: ['KENDOUIANGULAR'],
52
- publishDate: 1773914939,
53
- version: '23.3.0-develop.2',
52
+ publishDate: 1774614708,
53
+ version: '23.3.0-develop.20',
54
54
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
55
55
  };
56
56
 
@@ -239,6 +239,12 @@ class ButtonComponent {
239
239
  * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
240
240
  */
241
241
  imageUrl;
242
+ /**
243
+ * Sets the icon position relative to the button text.
244
+ * @hidden
245
+ * @default 'start'
246
+ */
247
+ iconPosition = 'start';
242
248
  /**
243
249
  * Defines a CSS class, or multiple classes separated by spaces applied to a `span` element inside the Button. Use the `iconClass` to add custom icons.
244
250
  */
@@ -547,40 +553,52 @@ class ButtonComponent {
547
553
  }
548
554
  }
549
555
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
550
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
556
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconPosition: "iconPosition", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
551
557
  LocalizationService,
552
558
  {
553
559
  provide: L10N_PREFIX,
554
560
  useValue: 'kendo.button'
555
561
  }
556
562
  ], exportAs: ["kendoButton"], usesOnChanges: true, ngImport: i0, template: `
557
- @if (icon || svgIcon) {
558
- <kendo-icon-wrapper
559
- innerCssClass="k-button-icon"
560
- [name]="icon"
561
- [svgIcon]="svgIcon"></kendo-icon-wrapper>
562
- }
563
- @if (imageUrl) {
564
- <span class="k-button-icon k-icon">
565
- <img [src]="imageUrl" class="k-image" role="presentation" />
566
- </span>
563
+ <ng-template #iconTemplate>
564
+ @if (icon || svgIcon) {
565
+ <kendo-icon-wrapper
566
+ innerCssClass="k-button-icon"
567
+ [name]="icon"
568
+ [svgIcon]="svgIcon">
569
+ </kendo-icon-wrapper>
570
+ }
571
+ @if (imageUrl) {
572
+ <span class="k-button-icon k-icon">
573
+ <img [src]="imageUrl" class="k-image" role="presentation" />
574
+ </span>
575
+ }
576
+ @if (iconClass) {
577
+ <span class="k-button-icon" [ngClass]="iconClass"></span>
578
+ }
579
+ </ng-template>
580
+ @if (iconPosition === 'start') {
581
+ <ng-container *ngTemplateOutlet="iconTemplate"></ng-container>
567
582
  }
568
- @if (iconClass) {
569
- <span class="k-button-icon" [ngClass]="iconClass"></span>
583
+ <span class="k-button-text">
584
+ <ng-content></ng-content>
585
+ </span>
586
+ @if (iconPosition === 'end') {
587
+ <ng-container *ngTemplateOutlet="iconTemplate"></ng-container>
570
588
  }
571
- <span class="k-button-text"><ng-content></ng-content></span>
572
589
  @if ($any(arrowIcon).iconClass) {
573
- <span class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
590
+ <span class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
574
591
  }
575
592
  @if (arrowIcon && !$any(arrowIcon).iconClass) {
576
- <span class="k-button-arrow">
577
- <kendo-icon-wrapper
578
- [name]="$any(arrowIcon).icon || 'caret-alt-down'"
579
- [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
580
- </span>
593
+ <span class="k-button-arrow">
594
+ <kendo-icon-wrapper
595
+ [name]="$any(arrowIcon).icon || 'caret-alt-down'"
596
+ [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon">
597
+ </kendo-icon-wrapper>
598
+ </span>
581
599
  }
582
600
 
583
- `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
601
+ `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
584
602
  }
585
603
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonComponent, decorators: [{
586
604
  type: Component,
@@ -595,35 +613,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
595
613
  ],
596
614
  selector: 'button[kendoButton]',
597
615
  template: `
598
- @if (icon || svgIcon) {
599
- <kendo-icon-wrapper
600
- innerCssClass="k-button-icon"
601
- [name]="icon"
602
- [svgIcon]="svgIcon"></kendo-icon-wrapper>
603
- }
604
- @if (imageUrl) {
605
- <span class="k-button-icon k-icon">
606
- <img [src]="imageUrl" class="k-image" role="presentation" />
607
- </span>
616
+ <ng-template #iconTemplate>
617
+ @if (icon || svgIcon) {
618
+ <kendo-icon-wrapper
619
+ innerCssClass="k-button-icon"
620
+ [name]="icon"
621
+ [svgIcon]="svgIcon">
622
+ </kendo-icon-wrapper>
623
+ }
624
+ @if (imageUrl) {
625
+ <span class="k-button-icon k-icon">
626
+ <img [src]="imageUrl" class="k-image" role="presentation" />
627
+ </span>
628
+ }
629
+ @if (iconClass) {
630
+ <span class="k-button-icon" [ngClass]="iconClass"></span>
631
+ }
632
+ </ng-template>
633
+ @if (iconPosition === 'start') {
634
+ <ng-container *ngTemplateOutlet="iconTemplate"></ng-container>
608
635
  }
609
- @if (iconClass) {
610
- <span class="k-button-icon" [ngClass]="iconClass"></span>
636
+ <span class="k-button-text">
637
+ <ng-content></ng-content>
638
+ </span>
639
+ @if (iconPosition === 'end') {
640
+ <ng-container *ngTemplateOutlet="iconTemplate"></ng-container>
611
641
  }
612
- <span class="k-button-text"><ng-content></ng-content></span>
613
642
  @if ($any(arrowIcon).iconClass) {
614
- <span class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
643
+ <span class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
615
644
  }
616
645
  @if (arrowIcon && !$any(arrowIcon).iconClass) {
617
- <span class="k-button-arrow">
618
- <kendo-icon-wrapper
619
- [name]="$any(arrowIcon).icon || 'caret-alt-down'"
620
- [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
621
- </span>
646
+ <span class="k-button-arrow">
647
+ <kendo-icon-wrapper
648
+ [name]="$any(arrowIcon).icon || 'caret-alt-down'"
649
+ [svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon">
650
+ </kendo-icon-wrapper>
651
+ </span>
622
652
  }
623
653
 
624
654
  `,
625
655
  standalone: true,
626
- imports: [IconWrapperComponent, NgClass]
656
+ imports: [IconWrapperComponent, NgClass, NgTemplateOutlet]
627
657
  }]
628
658
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: KendoButtonService, decorators: [{
629
659
  type: Optional
@@ -639,6 +669,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
639
669
  type: Input
640
670
  }], imageUrl: [{
641
671
  type: Input
672
+ }], iconPosition: [{
673
+ type: Input
642
674
  }], iconClass: [{
643
675
  type: Input
644
676
  }], icon: [{
@@ -3142,7 +3174,7 @@ class DropDownButtonComponent extends ListButton {
3142
3174
  </kendo-button-list>
3143
3175
  </ng-template>
3144
3176
  <ng-container #container></ng-container>
3145
- `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
3177
+ `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
3146
3178
  }
3147
3179
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DropDownButtonComponent, decorators: [{
3148
3180
  type: Component,
@@ -5209,7 +5241,7 @@ class SplitButtonComponent extends ListButton {
5209
5241
  </kendo-button-list>
5210
5242
  </ng-template>
5211
5243
  <ng-container #container></ng-container>
5212
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
5244
+ `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
5213
5245
  }
5214
5246
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SplitButtonComponent, decorators: [{
5215
5247
  type: Component,
@@ -6577,6 +6609,263 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
6577
6609
  args: ['blur']
6578
6610
  }] } });
6579
6611
 
6612
+ const SIZES_MAP = {
6613
+ small: 'sm',
6614
+ medium: 'md',
6615
+ large: 'lg'
6616
+ };
6617
+ /**
6618
+ * Represents the Kendo UI SegmentedControl component for Angular.
6619
+ *
6620
+ * Renders a group of buttons where only one can be selected at a time,
6621
+ * with a sliding selection indicator.
6622
+ */
6623
+ class SegmentedControlComponent {
6624
+ renderer;
6625
+ wrapper;
6626
+ cdr;
6627
+ zone;
6628
+ hostClass = true;
6629
+ get stretchedClass() {
6630
+ return this._layoutMode === 'stretch';
6631
+ }
6632
+ get direction() {
6633
+ return this._direction;
6634
+ }
6635
+ hostRole = 'group';
6636
+ thumb;
6637
+ /**
6638
+ * Specifies the collection of items to render in the SegmentedControl.
6639
+ */
6640
+ set items(value) {
6641
+ this._items = value;
6642
+ this.showSelectionIndicator();
6643
+ }
6644
+ get items() {
6645
+ return this._items;
6646
+ }
6647
+ /**
6648
+ * Specifies the layout mode of the SegmentedControl.
6649
+ *
6650
+ * @default 'compact'
6651
+ */
6652
+ set layoutMode(value) {
6653
+ this._layoutMode = value;
6654
+ this.showSelectionIndicator();
6655
+ }
6656
+ get layoutMode() {
6657
+ return this._layoutMode;
6658
+ }
6659
+ /**
6660
+ * Specifies the size of the SegmentedControl.
6661
+ */
6662
+ set size(size) {
6663
+ const newSize = size;
6664
+ this.handleSizeClass(newSize, this._size);
6665
+ this._size = newSize;
6666
+ this.showSelectionIndicator();
6667
+ }
6668
+ get size() {
6669
+ return this._size;
6670
+ }
6671
+ /**
6672
+ * Specifies the index of the selected button in the `items` array.
6673
+ *
6674
+ * @default 0
6675
+ */
6676
+ set selected(value) {
6677
+ this.selectedButtonIndex = value;
6678
+ this.showSelectionIndicator();
6679
+ }
6680
+ get selected() {
6681
+ return this.selectedButtonIndex;
6682
+ }
6683
+ /**
6684
+ * Fires when the selected button changes. Emits the index of the selected button.
6685
+ */
6686
+ selectedChange = new EventEmitter();
6687
+ /**
6688
+ * @hidden
6689
+ */
6690
+ selectedButtonIndex = 0;
6691
+ _items = [];
6692
+ _size;
6693
+ _layoutMode = 'compact';
6694
+ _direction;
6695
+ subs = new Subscription();
6696
+ constructor(renderer, wrapper, cdr, zone, localization) {
6697
+ this.renderer = renderer;
6698
+ this.wrapper = wrapper;
6699
+ this.cdr = cdr;
6700
+ this.zone = zone;
6701
+ validatePackage(packageMetadata);
6702
+ this._direction = localization.rtl ? 'rtl' : 'ltr';
6703
+ this.subs.add(localization.changes.subscribe(({ rtl }) => {
6704
+ this._direction = rtl ? 'rtl' : 'ltr';
6705
+ }));
6706
+ }
6707
+ ngAfterViewInit() {
6708
+ this.handleSizeClass(this._size, null);
6709
+ }
6710
+ ngOnDestroy() {
6711
+ this.subs.unsubscribe();
6712
+ }
6713
+ /**
6714
+ * @hidden
6715
+ */
6716
+ handleClick(button, index) {
6717
+ if (button.disabled || index === this.selectedButtonIndex) {
6718
+ return;
6719
+ }
6720
+ this.selectedButtonIndex = index;
6721
+ this.selectedChange.emit(index);
6722
+ this.showSelectionIndicator();
6723
+ }
6724
+ /**
6725
+ * @hidden
6726
+ */
6727
+ handleKeydown(event, button) {
6728
+ if (button.disabled && (event.code === Keys.Enter || event.code === Keys.NumpadEnter || event.code === Keys.Space)) {
6729
+ event.preventDefault();
6730
+ }
6731
+ }
6732
+ handleSizeClass(newValue, prevValue) {
6733
+ if (!this.wrapper) {
6734
+ return;
6735
+ }
6736
+ const elem = this.wrapper.nativeElement;
6737
+ const classToRemove = prevValue ? `k-segmented-control-${SIZES_MAP[prevValue]}` : null;
6738
+ const classToAdd = newValue ? `k-segmented-control-${SIZES_MAP[newValue]}` : null;
6739
+ classToRemove && this.renderer.removeClass(elem, classToRemove);
6740
+ classToAdd && this.renderer.addClass(elem, classToAdd);
6741
+ }
6742
+ /**
6743
+ * Updates the thumb position to reflect the currently selected button.
6744
+ */
6745
+ showSelectionIndicator() {
6746
+ if (!isDocumentAvailable()) {
6747
+ return;
6748
+ }
6749
+ this.zone.onStable.pipe(take(1)).subscribe(() => {
6750
+ const element = this.wrapper.nativeElement;
6751
+ if (!element?.getBoundingClientRect) {
6752
+ return;
6753
+ }
6754
+ const controlRect = element.getBoundingClientRect();
6755
+ const selectedItem = element.querySelector('.k-segmented-control-button.k-selected');
6756
+ const selectionIndicator = this.thumb ? this.thumb.nativeElement : null;
6757
+ if (!selectedItem || !selectionIndicator) {
6758
+ return;
6759
+ }
6760
+ const itemRect = selectedItem.getBoundingClientRect();
6761
+ const left = itemRect.left - controlRect.left;
6762
+ const right = controlRect.right - itemRect.right;
6763
+ this.renderer.setStyle(selectionIndicator, 'left', `${left}px`);
6764
+ this.renderer.setStyle(selectionIndicator, 'right', `${right}px`);
6765
+ });
6766
+ }
6767
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedControlComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
6768
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SegmentedControlComponent, isStandalone: true, selector: "kendo-segmented-control", inputs: { items: "items", layoutMode: "layoutMode", size: "size", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class.k-segmented-control": "this.hostClass", "class.k-segmented-control-stretched": "this.stretchedClass", "attr.dir": "this.direction", "attr.role": "this.hostRole" } }, providers: [
6769
+ LocalizationService,
6770
+ {
6771
+ provide: L10N_PREFIX,
6772
+ useValue: 'kendo.segmentedcontrol'
6773
+ }
6774
+ ], viewQueries: [{ propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true }], ngImport: i0, template: `
6775
+ <div class="k-segmented-control-thumb" #thumb [attr.aria-hidden]="true"></div>
6776
+ @for (button of items; track $index; let idx = $index) {
6777
+ <button type="button"
6778
+ class="k-segmented-control-button"
6779
+ [class.k-disabled]="button.disabled"
6780
+ [attr.aria-disabled]="button.disabled ? true : null"
6781
+ [attr.title]="button.title"
6782
+ [attr.aria-label]="button.title && !button.text ? button.title : null"
6783
+ (click)="handleClick(button, idx)"
6784
+ (keydown)="handleKeydown($event, button)"
6785
+ [class.k-selected]="selectedButtonIndex === idx"
6786
+ [attr.aria-pressed]="selectedButtonIndex === idx ? 'true' : 'false'">
6787
+ @if (button.icon || button.svgIcon) {
6788
+ <kendo-icon-wrapper
6789
+ [innerCssClass]="button['iconInnerCssClass'] ? 'k-segmented-control-button-icon ' + button['iconInnerCssClass'] : 'k-segmented-control-button-icon'"
6790
+ [name]="button.icon"
6791
+ [svgIcon]="button.svgIcon">
6792
+ </kendo-icon-wrapper>
6793
+ }
6794
+ @if (button.text) {
6795
+ <span class="k-segmented-control-button-text">{{button.text}}</span>
6796
+ }
6797
+ </button>
6798
+ }
6799
+ `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6800
+ }
6801
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedControlComponent, decorators: [{
6802
+ type: Component,
6803
+ args: [{
6804
+ selector: 'kendo-segmented-control',
6805
+ standalone: true,
6806
+ changeDetection: ChangeDetectionStrategy.OnPush,
6807
+ imports: [IconWrapperComponent],
6808
+ providers: [
6809
+ LocalizationService,
6810
+ {
6811
+ provide: L10N_PREFIX,
6812
+ useValue: 'kendo.segmentedcontrol'
6813
+ }
6814
+ ],
6815
+ template: `
6816
+ <div class="k-segmented-control-thumb" #thumb [attr.aria-hidden]="true"></div>
6817
+ @for (button of items; track $index; let idx = $index) {
6818
+ <button type="button"
6819
+ class="k-segmented-control-button"
6820
+ [class.k-disabled]="button.disabled"
6821
+ [attr.aria-disabled]="button.disabled ? true : null"
6822
+ [attr.title]="button.title"
6823
+ [attr.aria-label]="button.title && !button.text ? button.title : null"
6824
+ (click)="handleClick(button, idx)"
6825
+ (keydown)="handleKeydown($event, button)"
6826
+ [class.k-selected]="selectedButtonIndex === idx"
6827
+ [attr.aria-pressed]="selectedButtonIndex === idx ? 'true' : 'false'">
6828
+ @if (button.icon || button.svgIcon) {
6829
+ <kendo-icon-wrapper
6830
+ [innerCssClass]="button['iconInnerCssClass'] ? 'k-segmented-control-button-icon ' + button['iconInnerCssClass'] : 'k-segmented-control-button-icon'"
6831
+ [name]="button.icon"
6832
+ [svgIcon]="button.svgIcon">
6833
+ </kendo-icon-wrapper>
6834
+ }
6835
+ @if (button.text) {
6836
+ <span class="k-segmented-control-button-text">{{button.text}}</span>
6837
+ }
6838
+ </button>
6839
+ }
6840
+ `
6841
+ }]
6842
+ }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { hostClass: [{
6843
+ type: HostBinding,
6844
+ args: ['class.k-segmented-control']
6845
+ }], stretchedClass: [{
6846
+ type: HostBinding,
6847
+ args: ['class.k-segmented-control-stretched']
6848
+ }], direction: [{
6849
+ type: HostBinding,
6850
+ args: ['attr.dir']
6851
+ }], hostRole: [{
6852
+ type: HostBinding,
6853
+ args: ['attr.role']
6854
+ }], thumb: [{
6855
+ type: ViewChild,
6856
+ args: ['thumb']
6857
+ }], items: [{
6858
+ type: Input
6859
+ }], layoutMode: [{
6860
+ type: Input
6861
+ }], size: [{
6862
+ type: Input
6863
+ }], selected: [{
6864
+ type: Input
6865
+ }], selectedChange: [{
6866
+ type: Output
6867
+ }] } });
6868
+
6580
6869
  /**
6581
6870
  * Use the `KENDO_BUTTON` utility array to add all Button-related components and directives to a standalone Angular component.
6582
6871
  *
@@ -6729,6 +7018,22 @@ const KENDO_SPEECHTOTEXTBUTTON = [
6729
7018
  const KENDO_SMARTPASTEBUTTON = [
6730
7019
  SmartPasteButtonComponent
6731
7020
  ];
7021
+ /**
7022
+ * Use the `KENDO_SEGMENTEDCONTROL` utility array to add all SegmentedControl-related components and directives to a standalone Angular component.
7023
+ *
7024
+ * @example
7025
+ * ```typescript
7026
+ * @Component({
7027
+ * standalone: true,
7028
+ * imports: [KENDO_SEGMENTEDCONTROL],
7029
+ * // ...
7030
+ * })
7031
+ * export class MyComponent {}
7032
+ * ```
7033
+ */
7034
+ const KENDO_SEGMENTEDCONTROL = [
7035
+ SegmentedControlComponent
7036
+ ];
6732
7037
  /**
6733
7038
  * Use the `KENDO_BUTTONS` utility array to add all `@progress/kendo-angular-buttons`-related components and directives to a standalone Angular component.
6734
7039
  *
@@ -6751,7 +7056,8 @@ const KENDO_BUTTONS = [
6751
7056
  ...KENDO_FLOATINGACTIONBUTTON,
6752
7057
  ...KENDO_SPLITBUTTON,
6753
7058
  ...KENDO_SPEECHTOTEXTBUTTON,
6754
- ...KENDO_SMARTPASTEBUTTON
7059
+ ...KENDO_SMARTPASTEBUTTON,
7060
+ ...KENDO_SEGMENTEDCONTROL
6755
7061
  ];
6756
7062
 
6757
7063
  //IMPORTANT: NgModule export kept for backwards compatibility
@@ -6854,8 +7160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
6854
7160
  */
6855
7161
  class ButtonsModule {
6856
7162
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
6857
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: ButtonsModule, imports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, SmartPasteButtonComponent, i12.ToggleButtonTabStopDirective], exports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, SmartPasteButtonComponent, i12.ToggleButtonTabStopDirective] });
6858
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonsModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ButtonComponent, ButtonComponent, DropDownButtonComponent, ChipComponent, ChipComponent, FloatingActionButtonComponent, SplitButtonComponent, SpeechToTextButtonComponent, SmartPasteButtonComponent] });
7163
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: ButtonsModule, imports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent, i12.ToggleButtonTabStopDirective], exports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent, i12.ToggleButtonTabStopDirective, ButtonItemTemplateDirective, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent, i12.ToggleButtonTabStopDirective] });
7164
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonsModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ButtonComponent, ButtonComponent, DropDownButtonComponent, ChipComponent, ChipComponent, FloatingActionButtonComponent, SplitButtonComponent, SpeechToTextButtonComponent, SmartPasteButtonComponent, SegmentedControlComponent] });
6859
7165
  }
6860
7166
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonsModule, decorators: [{
6861
7167
  type: NgModule,
@@ -7052,9 +7358,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
7052
7358
  }]
7053
7359
  }] });
7054
7360
 
7361
+ //IMPORTANT: NgModule export kept for backwards compatibility
7362
+ /**
7363
+ * Represents the exported package module.
7364
+ *
7365
+ * Required for adding SegmentedControl features in NgModule-based Angular applications.
7366
+ *
7367
+ * The package exports:
7368
+ * - `SegmentedControlComponent`&mdash;The SegmentedControl component class.
7369
+ */
7370
+ class SegmentedControlModule {
7371
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
7372
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: SegmentedControlModule, imports: [SegmentedControlComponent], exports: [SegmentedControlComponent] });
7373
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedControlModule, providers: [IconsService], imports: [KENDO_SEGMENTEDCONTROL] });
7374
+ }
7375
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedControlModule, decorators: [{
7376
+ type: NgModule,
7377
+ args: [{
7378
+ exports: [...KENDO_SEGMENTEDCONTROL],
7379
+ imports: [...KENDO_SEGMENTEDCONTROL],
7380
+ providers: [IconsService]
7381
+ }]
7382
+ }] });
7383
+
7055
7384
  /**
7056
7385
  * Generated bundle index. Do not edit.
7057
7386
  */
7058
7387
 
7059
- export { ButtonComponent as Button, ButtonComponent, ButtonComponent as ButtonDirective, ButtonGroupComponent as ButtonGroup, ButtonGroupComponent, ButtonGroupModule, ButtonItemTemplateDirective, ButtonModule, ButtonsModule, ChipComponent, ChipListComponent, ChipModule, DialItemTemplateDirective, DropDownButtonComponent as DropDownButton, DropDownButtonComponent, DropDownButtonModule, FloatingActionButtonComponent, FloatingActionButtonModule, FloatingActionButtonTemplateDirective, FocusableDirective, KENDO_BUTTON, KENDO_BUTTONGROUP, KENDO_BUTTONS, KENDO_CHIP, KENDO_CHIPLIST, KENDO_DROPDOWNBUTTON, KENDO_FLOATINGACTIONBUTTON, KENDO_SMARTPASTEBUTTON, KENDO_SPEECHTOTEXTBUTTON, KENDO_SPLITBUTTON, KendoButtonService, ListComponent, LocalizedSplitButtonMessagesDirective, PreventableEvent, SmartPasteButtonComponent, SmartPasteButtonModule, SmartPasteRequestEndEvent, SmartPasteRequestStartEvent, SpeechToTextButtonComponent, SpeechToTextButtonModule, SplitButtonComponent as SplitButton, SplitButtonComponent, SplitButtonCustomMessagesComponent, SplitButtonModule };
7388
+ export { ButtonComponent as Button, ButtonComponent, ButtonComponent as ButtonDirective, ButtonGroupComponent as ButtonGroup, ButtonGroupComponent, ButtonGroupModule, ButtonItemTemplateDirective, ButtonModule, ButtonsModule, ChipComponent, ChipListComponent, ChipModule, DialItemTemplateDirective, DropDownButtonComponent as DropDownButton, DropDownButtonComponent, DropDownButtonModule, FloatingActionButtonComponent, FloatingActionButtonModule, FloatingActionButtonTemplateDirective, FocusableDirective, KENDO_BUTTON, KENDO_BUTTONGROUP, KENDO_BUTTONS, KENDO_CHIP, KENDO_CHIPLIST, KENDO_DROPDOWNBUTTON, KENDO_FLOATINGACTIONBUTTON, KENDO_SEGMENTEDCONTROL, KENDO_SMARTPASTEBUTTON, KENDO_SPEECHTOTEXTBUTTON, KENDO_SPLITBUTTON, KendoButtonService, ListComponent, LocalizedSplitButtonMessagesDirective, PreventableEvent, SegmentedControlComponent, SegmentedControlModule, SmartPasteButtonComponent, SmartPasteButtonModule, SmartPasteRequestEndEvent, SmartPasteRequestStartEvent, SpeechToTextButtonComponent, SpeechToTextButtonModule, SplitButtonComponent as SplitButton, SplitButtonComponent, SplitButtonCustomMessagesComponent, SplitButtonModule };
7060
7389
 
package/index.d.ts CHANGED
@@ -47,7 +47,10 @@ export { SpeechToTextButtonModule } from './speechtotextbutton/speechtotextbutto
47
47
  export { SmartPasteButtonComponent } from './smartpastebutton/smartpastebutton.component';
48
48
  export { SmartPasteButtonModule } from './smartpastebutton/smartpastebutton.module';
49
49
  export { SmartPasteFormField, SmartPasteType, SmartPasteAIRequestData, SmartPasteAIResponse, SmartPasteAIRequestOptions, SmartPasteRequestStartEvent, SmartPasteRequestEndEvent } from './smartpastebutton/models';
50
- export { ButtonSize, ChipSize, ButtonRounded, ChipRounded, ButtonFillMode, ChipFillMode, ButtonThemeColor, ChipThemeColor, ArrowIconSettings } from './common/models';
50
+ export { SegmentedControlComponent } from './segmentedcontrol/segmented-control.component';
51
+ export { SegmentedControlModule } from './segmentedcontrol/segmented-control.module';
52
+ export { SegmentedItemSettings, SegmentedControlLayout } from './segmentedcontrol/models';
53
+ export { ButtonSize, ChipSize, ButtonRounded, ChipRounded, ButtonFillMode, ChipFillMode, ButtonThemeColor, ChipThemeColor, ArrowIconSettings, ButtonIconPosition } from './common/models';
51
54
  export { FocusableDirective } from './focusable/focusable.directive';
52
55
  export { PreventableEvent } from './preventable-event';
53
56
  export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
@@ -7,7 +7,7 @@ export const packageMetadata = {
7
7
  "productCodes": [
8
8
  "KENDOUIANGULAR"
9
9
  ],
10
- "publishDate": 1773914939,
11
- "version": "23.3.0-develop.2",
10
+ "publishDate": 1774614708,
11
+ "version": "23.3.0-develop.20",
12
12
  "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
13
13
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-buttons",
3
- "version": "23.3.0-develop.2",
3
+ "version": "23.3.0-develop.20",
4
4
  "description": "Buttons Package for Angular",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -21,7 +21,7 @@
21
21
  "package": {
22
22
  "productName": "Kendo UI for Angular",
23
23
  "productCode": "KENDOUIANGULAR",
24
- "publishDate": 1773914939,
24
+ "publishDate": 1774614708,
25
25
  "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
26
26
  }
27
27
  },
@@ -31,15 +31,15 @@
31
31
  "@angular/core": "19 - 21",
32
32
  "@angular/platform-browser": "19 - 21",
33
33
  "@progress/kendo-licensing": "^1.10.0",
34
- "@progress/kendo-angular-common": "23.3.0-develop.2",
35
- "@progress/kendo-angular-l10n": "23.3.0-develop.2",
36
- "@progress/kendo-angular-popup": "23.3.0-develop.2",
37
- "@progress/kendo-angular-icons": "23.3.0-develop.2",
34
+ "@progress/kendo-angular-common": "23.3.0-develop.20",
35
+ "@progress/kendo-angular-l10n": "23.3.0-develop.20",
36
+ "@progress/kendo-angular-popup": "23.3.0-develop.20",
37
+ "@progress/kendo-angular-icons": "23.3.0-develop.20",
38
38
  "rxjs": "^6.5.3 || ^7.0.0"
39
39
  },
40
40
  "dependencies": {
41
41
  "tslib": "^2.3.1",
42
- "@progress/kendo-angular-schematics": "23.3.0-develop.2",
42
+ "@progress/kendo-angular-schematics": "23.3.0-develop.20",
43
43
  "@progress/kendo-common": "^1.0.1",
44
44
  "@progress/kendo-webspeech-common": "1.0.1",
45
45
  "@progress/kendo-smartpaste-common": "1.0.0"
@@ -0,0 +1,37 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { SVGIcon } from '@progress/kendo-svg-icons';
6
+ /**
7
+ * Specifies how the items are sized within the SegmentedControl.
8
+ * - `compact`&mdash;Items take up only the space they need.
9
+ * - `stretch`&mdash;Items stretch to fill the full width of the control.
10
+ */
11
+ export type SegmentedControlLayout = 'compact' | 'stretch';
12
+ /**
13
+ * Represents the settings for an item in the `SegmentedControlComponent`.
14
+ */
15
+ export interface SegmentedItemSettings {
16
+ /**
17
+ * Specifies the name of an existing font icon in the Kendo UI theme.
18
+ */
19
+ icon?: string;
20
+ /**
21
+ * Defines the SVG icon to render inside the button.
22
+ */
23
+ svgIcon?: SVGIcon;
24
+ /**
25
+ * Specifies the text content of the button.
26
+ */
27
+ text?: string;
28
+ /**
29
+ * Determines whether the button is disabled.
30
+ */
31
+ disabled?: boolean;
32
+ /**
33
+ * Sets the `title` attribute of the button. When no `text` is provided,
34
+ * the `title` value also renders as the `aria-label` attribute.
35
+ */
36
+ title?: string;
37
+ }
@@ -0,0 +1,81 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, Renderer2 } from '@angular/core';
6
+ import { LocalizationService } from '@progress/kendo-angular-l10n';
7
+ import { ButtonSize } from '../common/models';
8
+ import { SegmentedItemSettings, SegmentedControlLayout } from './models';
9
+ import * as i0 from "@angular/core";
10
+ /**
11
+ * Represents the Kendo UI SegmentedControl component for Angular.
12
+ *
13
+ * Renders a group of buttons where only one can be selected at a time,
14
+ * with a sliding selection indicator.
15
+ */
16
+ export declare class SegmentedControlComponent implements AfterViewInit, OnDestroy {
17
+ private renderer;
18
+ private wrapper;
19
+ private cdr;
20
+ private zone;
21
+ hostClass: boolean;
22
+ get stretchedClass(): boolean;
23
+ get direction(): string;
24
+ hostRole: string;
25
+ thumb: ElementRef;
26
+ /**
27
+ * Specifies the collection of items to render in the SegmentedControl.
28
+ */
29
+ set items(value: Array<SegmentedItemSettings>);
30
+ get items(): Array<SegmentedItemSettings>;
31
+ /**
32
+ * Specifies the layout mode of the SegmentedControl.
33
+ *
34
+ * @default 'compact'
35
+ */
36
+ set layoutMode(value: SegmentedControlLayout);
37
+ get layoutMode(): SegmentedControlLayout;
38
+ /**
39
+ * Specifies the size of the SegmentedControl.
40
+ */
41
+ set size(size: ButtonSize);
42
+ get size(): ButtonSize;
43
+ /**
44
+ * Specifies the index of the selected button in the `items` array.
45
+ *
46
+ * @default 0
47
+ */
48
+ set selected(value: number);
49
+ get selected(): number;
50
+ /**
51
+ * Fires when the selected button changes. Emits the index of the selected button.
52
+ */
53
+ selectedChange: EventEmitter<number>;
54
+ /**
55
+ * @hidden
56
+ */
57
+ selectedButtonIndex: number;
58
+ private _items;
59
+ private _size;
60
+ private _layoutMode;
61
+ private _direction;
62
+ private subs;
63
+ constructor(renderer: Renderer2, wrapper: ElementRef, cdr: ChangeDetectorRef, zone: NgZone, localization: LocalizationService);
64
+ ngAfterViewInit(): void;
65
+ ngOnDestroy(): void;
66
+ /**
67
+ * @hidden
68
+ */
69
+ handleClick(button: SegmentedItemSettings, index: number): void;
70
+ /**
71
+ * @hidden
72
+ */
73
+ handleKeydown(event: KeyboardEvent, button: SegmentedItemSettings): void;
74
+ private handleSizeClass;
75
+ /**
76
+ * Updates the thumb position to reflect the currently selected button.
77
+ */
78
+ private showSelectionIndicator;
79
+ static ɵfac: i0.ɵɵFactoryDeclaration<SegmentedControlComponent, never>;
80
+ static ɵcmp: i0.ɵɵComponentDeclaration<SegmentedControlComponent, "kendo-segmented-control", never, { "items": { "alias": "items"; "required": false; }; "layoutMode": { "alias": "layoutMode"; "required": false; }; "size": { "alias": "size"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectedChange": "selectedChange"; }, never, never, true, never>;
81
+ }
@@ -0,0 +1,19 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import * as i0 from "@angular/core";
6
+ import * as i1 from "./segmented-control.component";
7
+ /**
8
+ * Represents the exported package module.
9
+ *
10
+ * Required for adding SegmentedControl features in NgModule-based Angular applications.
11
+ *
12
+ * The package exports:
13
+ * - `SegmentedControlComponent`&mdash;The SegmentedControl component class.
14
+ */
15
+ export declare class SegmentedControlModule {
16
+ static ɵfac: i0.ɵɵFactoryDeclaration<SegmentedControlModule, never>;
17
+ static ɵmod: i0.ɵɵNgModuleDeclaration<SegmentedControlModule, never, [typeof i1.SegmentedControlComponent], [typeof i1.SegmentedControlComponent]>;
18
+ static ɵinj: i0.ɵɵInjectorDeclaration<SegmentedControlModule>;
19
+ }