@progress/kendo-angular-buttons 23.3.0-develop.8 → 23.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/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,18 +3,18 @@
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
- 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';
9
+ import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, normalizeKeys, Keys, TemplateContextDirective, MultiTabStop, guid, parseCSSClassNames, isPresent as isPresent$1, EventsOutsideAngularDirective, replaceMessagePlaceholder, anyChanged, PreventableEvent as PreventableEvent$1, ResizeSensorComponent, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
10
10
  export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
11
11
  import { caretAltDownIcon, xCircleIcon, moreVerticalIcon, microphoneOutlineIcon, stopSmIcon, pasteSparkleIcon } from '@progress/kendo-svg-icons';
12
12
  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';
17
- import { filter, tap, take } from 'rxjs/operators';
16
+ import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
17
+ import { filter, tap, take, debounceTime } from 'rxjs/operators';
18
18
  import * as i3 from '@progress/kendo-angular-popup';
19
19
  import { PopupService } from '@progress/kendo-angular-popup';
20
20
  import * as i4 from '@angular/animations';
@@ -49,8 +49,8 @@ const packageMetadata = {
49
49
  productName: 'Kendo UI for Angular',
50
50
  productCode: 'KENDOUIANGULAR',
51
51
  productCodes: ['KENDOUIANGULAR'],
52
- publishDate: 1774277491,
53
- version: '23.3.0-develop.8',
52
+ publishDate: 1775133161,
53
+ version: '23.3.0',
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,274 @@ 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
+ zone;
6627
+ hostClass = true;
6628
+ get stretchedClass() {
6629
+ return this._layoutMode === 'stretch';
6630
+ }
6631
+ get direction() {
6632
+ return this._direction;
6633
+ }
6634
+ hostRole = 'group';
6635
+ thumb;
6636
+ resizeSensor;
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, zone, localization) {
6697
+ this.renderer = renderer;
6698
+ this.wrapper = wrapper;
6699
+ this.zone = zone;
6700
+ validatePackage(packageMetadata);
6701
+ this._direction = localization.rtl ? 'rtl' : 'ltr';
6702
+ this.subs.add(localization.changes.subscribe(({ rtl }) => {
6703
+ this._direction = rtl ? 'rtl' : 'ltr';
6704
+ }));
6705
+ }
6706
+ ngAfterViewInit() {
6707
+ this.handleSizeClass(this._size, null);
6708
+ if (this.resizeSensor) {
6709
+ this.subs.add(this.resizeSensor.resize.pipe(debounceTime(150)).subscribe(() => {
6710
+ this.zone.run(() => {
6711
+ this.showSelectionIndicator();
6712
+ });
6713
+ }));
6714
+ }
6715
+ }
6716
+ ngOnDestroy() {
6717
+ this.subs.unsubscribe();
6718
+ }
6719
+ /**
6720
+ * @hidden
6721
+ */
6722
+ handleClick(button, index) {
6723
+ if (button.disabled || index === this.selectedButtonIndex) {
6724
+ return;
6725
+ }
6726
+ this.selectedButtonIndex = index;
6727
+ this.selectedChange.emit(index);
6728
+ this.showSelectionIndicator();
6729
+ }
6730
+ /**
6731
+ * @hidden
6732
+ */
6733
+ handleKeydown(event, button) {
6734
+ if (button.disabled && (event.code === Keys.Enter || event.code === Keys.NumpadEnter || event.code === Keys.Space)) {
6735
+ event.preventDefault();
6736
+ }
6737
+ }
6738
+ handleSizeClass(newValue, prevValue) {
6739
+ if (!this.wrapper) {
6740
+ return;
6741
+ }
6742
+ const elem = this.wrapper.nativeElement;
6743
+ const classToRemove = prevValue ? `k-segmented-control-${SIZES_MAP[prevValue]}` : null;
6744
+ const classToAdd = newValue ? `k-segmented-control-${SIZES_MAP[newValue]}` : null;
6745
+ classToRemove && this.renderer.removeClass(elem, classToRemove);
6746
+ classToAdd && this.renderer.addClass(elem, classToAdd);
6747
+ }
6748
+ /**
6749
+ * Updates the thumb position to reflect the currently selected button.
6750
+ */
6751
+ showSelectionIndicator() {
6752
+ if (!isDocumentAvailable()) {
6753
+ return;
6754
+ }
6755
+ this.zone.onStable.pipe(take(1)).subscribe(() => {
6756
+ const element = this.wrapper.nativeElement;
6757
+ if (!element?.getBoundingClientRect) {
6758
+ return;
6759
+ }
6760
+ const controlRect = element.getBoundingClientRect();
6761
+ const selectedItem = element.querySelector('.k-segmented-control-button.k-selected');
6762
+ const selectionIndicator = this.thumb ? this.thumb.nativeElement : null;
6763
+ if (!selectedItem || !selectionIndicator) {
6764
+ return;
6765
+ }
6766
+ const itemRect = selectedItem.getBoundingClientRect();
6767
+ const left = itemRect.left - controlRect.left;
6768
+ const right = controlRect.right - itemRect.right;
6769
+ this.renderer.setStyle(selectionIndicator, 'left', `${left}px`);
6770
+ this.renderer.setStyle(selectionIndicator, 'right', `${right}px`);
6771
+ });
6772
+ }
6773
+ 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.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
6774
+ 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: [
6775
+ LocalizationService,
6776
+ {
6777
+ provide: L10N_PREFIX,
6778
+ useValue: 'kendo.segmentedcontrol'
6779
+ }
6780
+ ], viewQueries: [{ propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }], ngImport: i0, template: `
6781
+ <kendo-resize-sensor #resizeSensor></kendo-resize-sensor>
6782
+ <div class="k-segmented-control-thumb" #thumb [attr.aria-hidden]="true"></div>
6783
+ @for (button of items; track $index; let idx = $index) {
6784
+ <button type="button"
6785
+ class="k-segmented-control-button"
6786
+ [class.k-disabled]="button.disabled"
6787
+ [attr.aria-disabled]="button.disabled ? true : null"
6788
+ [attr.title]="button.title"
6789
+ [attr.aria-label]="button.title && !button.text ? button.title : null"
6790
+ (click)="handleClick(button, idx)"
6791
+ (keydown)="handleKeydown($event, button)"
6792
+ [class.k-selected]="selectedButtonIndex === idx"
6793
+ [attr.aria-pressed]="selectedButtonIndex === idx ? 'true' : 'false'">
6794
+ @if (button.icon || button.svgIcon) {
6795
+ <kendo-icon-wrapper
6796
+ [innerCssClass]="button['iconInnerCssClass'] ? 'k-segmented-control-button-icon ' + button['iconInnerCssClass'] : 'k-segmented-control-button-icon'"
6797
+ [name]="button.icon"
6798
+ [svgIcon]="button.svgIcon">
6799
+ </kendo-icon-wrapper>
6800
+ }
6801
+ @if (button.text) {
6802
+ <span class="k-segmented-control-button-text">{{button.text}}</span>
6803
+ }
6804
+ </button>
6805
+ }
6806
+ `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6807
+ }
6808
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedControlComponent, decorators: [{
6809
+ type: Component,
6810
+ args: [{
6811
+ selector: 'kendo-segmented-control',
6812
+ standalone: true,
6813
+ changeDetection: ChangeDetectionStrategy.OnPush,
6814
+ imports: [IconWrapperComponent, ResizeSensorComponent],
6815
+ providers: [
6816
+ LocalizationService,
6817
+ {
6818
+ provide: L10N_PREFIX,
6819
+ useValue: 'kendo.segmentedcontrol'
6820
+ }
6821
+ ],
6822
+ template: `
6823
+ <kendo-resize-sensor #resizeSensor></kendo-resize-sensor>
6824
+ <div class="k-segmented-control-thumb" #thumb [attr.aria-hidden]="true"></div>
6825
+ @for (button of items; track $index; let idx = $index) {
6826
+ <button type="button"
6827
+ class="k-segmented-control-button"
6828
+ [class.k-disabled]="button.disabled"
6829
+ [attr.aria-disabled]="button.disabled ? true : null"
6830
+ [attr.title]="button.title"
6831
+ [attr.aria-label]="button.title && !button.text ? button.title : null"
6832
+ (click)="handleClick(button, idx)"
6833
+ (keydown)="handleKeydown($event, button)"
6834
+ [class.k-selected]="selectedButtonIndex === idx"
6835
+ [attr.aria-pressed]="selectedButtonIndex === idx ? 'true' : 'false'">
6836
+ @if (button.icon || button.svgIcon) {
6837
+ <kendo-icon-wrapper
6838
+ [innerCssClass]="button['iconInnerCssClass'] ? 'k-segmented-control-button-icon ' + button['iconInnerCssClass'] : 'k-segmented-control-button-icon'"
6839
+ [name]="button.icon"
6840
+ [svgIcon]="button.svgIcon">
6841
+ </kendo-icon-wrapper>
6842
+ }
6843
+ @if (button.text) {
6844
+ <span class="k-segmented-control-button-text">{{button.text}}</span>
6845
+ }
6846
+ </button>
6847
+ }
6848
+ `
6849
+ }]
6850
+ }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { hostClass: [{
6851
+ type: HostBinding,
6852
+ args: ['class.k-segmented-control']
6853
+ }], stretchedClass: [{
6854
+ type: HostBinding,
6855
+ args: ['class.k-segmented-control-stretched']
6856
+ }], direction: [{
6857
+ type: HostBinding,
6858
+ args: ['attr.dir']
6859
+ }], hostRole: [{
6860
+ type: HostBinding,
6861
+ args: ['attr.role']
6862
+ }], thumb: [{
6863
+ type: ViewChild,
6864
+ args: ['thumb']
6865
+ }], resizeSensor: [{
6866
+ type: ViewChild,
6867
+ args: ['resizeSensor']
6868
+ }], items: [{
6869
+ type: Input
6870
+ }], layoutMode: [{
6871
+ type: Input
6872
+ }], size: [{
6873
+ type: Input
6874
+ }], selected: [{
6875
+ type: Input
6876
+ }], selectedChange: [{
6877
+ type: Output
6878
+ }] } });
6879
+
6580
6880
  /**
6581
6881
  * Use the `KENDO_BUTTON` utility array to add all Button-related components and directives to a standalone Angular component.
6582
6882
  *
@@ -6729,6 +7029,22 @@ const KENDO_SPEECHTOTEXTBUTTON = [
6729
7029
  const KENDO_SMARTPASTEBUTTON = [
6730
7030
  SmartPasteButtonComponent
6731
7031
  ];
7032
+ /**
7033
+ * Use the `KENDO_SEGMENTEDCONTROL` utility array to add all SegmentedControl-related components and directives to a standalone Angular component.
7034
+ *
7035
+ * @example
7036
+ * ```typescript
7037
+ * @Component({
7038
+ * standalone: true,
7039
+ * imports: [KENDO_SEGMENTEDCONTROL],
7040
+ * // ...
7041
+ * })
7042
+ * export class MyComponent {}
7043
+ * ```
7044
+ */
7045
+ const KENDO_SEGMENTEDCONTROL = [
7046
+ SegmentedControlComponent
7047
+ ];
6732
7048
  /**
6733
7049
  * Use the `KENDO_BUTTONS` utility array to add all `@progress/kendo-angular-buttons`-related components and directives to a standalone Angular component.
6734
7050
  *
@@ -6751,7 +7067,8 @@ const KENDO_BUTTONS = [
6751
7067
  ...KENDO_FLOATINGACTIONBUTTON,
6752
7068
  ...KENDO_SPLITBUTTON,
6753
7069
  ...KENDO_SPEECHTOTEXTBUTTON,
6754
- ...KENDO_SMARTPASTEBUTTON
7070
+ ...KENDO_SMARTPASTEBUTTON,
7071
+ ...KENDO_SEGMENTEDCONTROL
6755
7072
  ];
6756
7073
 
6757
7074
  //IMPORTANT: NgModule export kept for backwards compatibility
@@ -6854,8 +7171,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
6854
7171
  */
6855
7172
  class ButtonsModule {
6856
7173
  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] });
7174
+ 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] });
7175
+ 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
7176
  }
6860
7177
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonsModule, decorators: [{
6861
7178
  type: NgModule,
@@ -7052,9 +7369,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
7052
7369
  }]
7053
7370
  }] });
7054
7371
 
7372
+ //IMPORTANT: NgModule export kept for backwards compatibility
7373
+ /**
7374
+ * Represents the exported package module.
7375
+ *
7376
+ * Required for adding SegmentedControl features in NgModule-based Angular applications.
7377
+ *
7378
+ * The package exports:
7379
+ * - `SegmentedControlComponent`&mdash;The SegmentedControl component class.
7380
+ */
7381
+ class SegmentedControlModule {
7382
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
7383
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: SegmentedControlModule, imports: [SegmentedControlComponent], exports: [SegmentedControlComponent] });
7384
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedControlModule, providers: [IconsService], imports: [KENDO_SEGMENTEDCONTROL] });
7385
+ }
7386
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedControlModule, decorators: [{
7387
+ type: NgModule,
7388
+ args: [{
7389
+ exports: [...KENDO_SEGMENTEDCONTROL],
7390
+ imports: [...KENDO_SEGMENTEDCONTROL],
7391
+ providers: [IconsService]
7392
+ }]
7393
+ }] });
7394
+
7055
7395
  /**
7056
7396
  * Generated bundle index. Do not edit.
7057
7397
  */
7058
7398
 
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 };
7399
+ 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
7400
 
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": 1774277491,
11
- "version": "23.3.0-develop.8",
10
+ "publishDate": 1775133161,
11
+ "version": "23.3.0",
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.8",
3
+ "version": "23.3.0",
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": 1774277491,
24
+ "publishDate": 1775133161,
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.8",
35
- "@progress/kendo-angular-l10n": "23.3.0-develop.8",
36
- "@progress/kendo-angular-popup": "23.3.0-develop.8",
37
- "@progress/kendo-angular-icons": "23.3.0-develop.8",
34
+ "@progress/kendo-angular-common": "23.3.0",
35
+ "@progress/kendo-angular-l10n": "23.3.0",
36
+ "@progress/kendo-angular-popup": "23.3.0",
37
+ "@progress/kendo-angular-icons": "23.3.0",
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.8",
42
+ "@progress/kendo-angular-schematics": "23.3.0",
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,82 @@
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, ElementRef, EventEmitter, NgZone, OnDestroy, Renderer2 } from '@angular/core';
6
+ import { ResizeSensorComponent } from '@progress/kendo-angular-common';
7
+ import { LocalizationService } from '@progress/kendo-angular-l10n';
8
+ import { ButtonSize } from '../common/models';
9
+ import { SegmentedItemSettings, SegmentedControlLayout } from './models';
10
+ import * as i0 from "@angular/core";
11
+ /**
12
+ * Represents the Kendo UI SegmentedControl component for Angular.
13
+ *
14
+ * Renders a group of buttons where only one can be selected at a time,
15
+ * with a sliding selection indicator.
16
+ */
17
+ export declare class SegmentedControlComponent implements AfterViewInit, OnDestroy {
18
+ private renderer;
19
+ private wrapper;
20
+ private zone;
21
+ hostClass: boolean;
22
+ get stretchedClass(): boolean;
23
+ get direction(): string;
24
+ hostRole: string;
25
+ thumb: ElementRef;
26
+ resizeSensor: ResizeSensorComponent;
27
+ /**
28
+ * Specifies the collection of items to render in the SegmentedControl.
29
+ */
30
+ set items(value: Array<SegmentedItemSettings>);
31
+ get items(): Array<SegmentedItemSettings>;
32
+ /**
33
+ * Specifies the layout mode of the SegmentedControl.
34
+ *
35
+ * @default 'compact'
36
+ */
37
+ set layoutMode(value: SegmentedControlLayout);
38
+ get layoutMode(): SegmentedControlLayout;
39
+ /**
40
+ * Specifies the size of the SegmentedControl.
41
+ */
42
+ set size(size: ButtonSize);
43
+ get size(): ButtonSize;
44
+ /**
45
+ * Specifies the index of the selected button in the `items` array.
46
+ *
47
+ * @default 0
48
+ */
49
+ set selected(value: number);
50
+ get selected(): number;
51
+ /**
52
+ * Fires when the selected button changes. Emits the index of the selected button.
53
+ */
54
+ selectedChange: EventEmitter<number>;
55
+ /**
56
+ * @hidden
57
+ */
58
+ selectedButtonIndex: number;
59
+ private _items;
60
+ private _size;
61
+ private _layoutMode;
62
+ private _direction;
63
+ private subs;
64
+ constructor(renderer: Renderer2, wrapper: ElementRef, zone: NgZone, localization: LocalizationService);
65
+ ngAfterViewInit(): void;
66
+ ngOnDestroy(): void;
67
+ /**
68
+ * @hidden
69
+ */
70
+ handleClick(button: SegmentedItemSettings, index: number): void;
71
+ /**
72
+ * @hidden
73
+ */
74
+ handleKeydown(event: KeyboardEvent, button: SegmentedItemSettings): void;
75
+ private handleSizeClass;
76
+ /**
77
+ * Updates the thumb position to reflect the currently selected button.
78
+ */
79
+ private showSelectionIndicator;
80
+ static ɵfac: i0.ɵɵFactoryDeclaration<SegmentedControlComponent, never>;
81
+ 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>;
82
+ }
@@ -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
+ }