@ds-mo/ui 0.8.7 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "0.8.7",
+  "version": "0.9.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/src/angular/index.ts

@@ -7,6 +7,7 @@ export const DIRECTIVES = [
   d.DsBanner,
   d.DsBreadcrumb,
   d.DsButton,
+  d.DsButtonGroup,
   d.DsCard,
   d.DsCheckbox,
   d.DsDivider,
@@ -16,6 +17,7 @@ export const DIRECTIVES = [
   d.DsHeader,
   d.DsIcon,
   d.DsInput,
+  d.DsLabelWrap,
   d.DsLoader,
   d.DsMenu,
   d.DsModal,
@@ -23,6 +25,7 @@ export const DIRECTIVES = [
   d.DsPanelNav,
   d.DsRadioGroup,
   d.DsScrollbar,
+  d.DsSelect,
   d.DsSidebar,
   d.DsSkeleton,
   d.DsSlider,
@@ -33,5 +36,7 @@ export const DIRECTIVES = [
   d.DsText,
   d.DsToastProvider,
   d.DsToggle,
+  d.DsToggleButton,
+  d.DsToggleButtonGroup,
   d.DsTooltip
 ];

package/src/angular/proxies.ts

@@ -150,6 +150,36 @@ export declare interface DsButton extends Components.DsButton {
 }
 
 
+@ProxyCmp({
+  inputs: ['elevation', 'items', 'rounded', 'size']
+})
+@Component({
+  selector: 'ds-button-group',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['elevation', 'items', 'rounded', 'size'],
+  outputs: ['dsClick'],
+  standalone: false
+})
+export class DsButtonGroup {
+  protected el: HTMLDsButtonGroupElement;
+  @Output() dsClick = new EventEmitter<CustomEvent<number>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsButtonGroup extends Components.DsButtonGroup {
+  /**
+   * Emits the index of the clicked item.
+   */
+  dsClick: EventEmitter<CustomEvent<number>>;
+}
+
+
 @ProxyCmp({
   inputs: ['elevation', 'radius']
 })
@@ -371,6 +401,29 @@ export declare interface DsInput extends Components.DsInput {
 }
 
 
+@ProxyCmp({
+  inputs: ['size', 'truncate']
+})
+@Component({
+  selector: 'ds-label-wrap',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['size', 'truncate'],
+  standalone: false
+})
+export class DsLabelWrap {
+  protected el: HTMLDsLabelWrapElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsLabelWrap extends Components.DsLabelWrap {}
+
+
 @ProxyCmp({
   inputs: ['label', 'size']
 })
@@ -484,14 +537,14 @@ export declare interface DsPagination extends Components.DsPagination {
 
 
 @ProxyCmp({
-  inputs: ['activeId', 'breakpoint', 'collapsed', 'currentUrl', 'groups', 'storageKey', 'userInitial', 'userName', 'variant']
+  inputs: ['activeId', 'breakpoint', 'collapsed', 'currentUrl', 'disableViewTransition', 'groups', 'storageKey', 'userInitial', 'userName', 'variant']
 })
 @Component({
   selector: 'ds-panel-nav',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['activeId', 'breakpoint', 'collapsed', 'currentUrl', 'groups', 'storageKey', 'userInitial', 'userName', 'variant'],
+  inputs: ['activeId', 'breakpoint', 'collapsed', 'currentUrl', 'disableViewTransition', 'groups', 'storageKey', 'userInitial', 'userName', 'variant'],
   outputs: ['dsNavSelect', 'dsNavToggle', 'dsNavFooterAction'],
   standalone: false
 })
@@ -574,6 +627,36 @@ export class DsScrollbar {
 export declare interface DsScrollbar extends Components.DsScrollbar {}
 
 
+@ProxyCmp({
+  inputs: ['ariaLabel', 'ariaLabelledby', 'inactive', 'options', 'placeholder', 'value']
+})
+@Component({
+  selector: 'ds-select',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['ariaLabel', 'ariaLabelledby', 'inactive', 'options', 'placeholder', 'value'],
+  outputs: ['dsChange'],
+  standalone: false
+})
+export class DsSelect {
+  protected el: HTMLDsSelectElement;
+  @Output() dsChange = new EventEmitter<CustomEvent<string>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsSelect extends Components.DsSelect {
+  /**
+   * Emits the selected value string.
+   */
+  dsChange: EventEmitter<CustomEvent<string>>;
+}
+
+
 @ProxyCmp({
   inputs: ['collapsed', 'mobile', 'resizable', 'width']
 })
@@ -682,14 +765,14 @@ export declare interface DsSurface extends Components.DsSurface {}
 
 
 @ProxyCmp({
-  inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'tabs', 'value']
+  inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'orientation', 'tabs', 'value']
 })
 @Component({
   selector: 'ds-tab-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'tabs', 'value'],
+  inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'orientation', 'tabs', 'value'],
   outputs: ['dsChange'],
   standalone: false
 })
@@ -857,6 +940,66 @@ export declare interface DsToggle extends Components.DsToggle {
 }
 
 
+@ProxyCmp({
+  inputs: ['ariaLabel', 'background', 'elevation', 'icon', 'inactive', 'label', 'pressed', 'rounded', 'size']
+})
+@Component({
+  selector: 'ds-toggle-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['ariaLabel', 'background', 'elevation', 'icon', 'inactive', 'label', 'pressed', 'rounded', 'size'],
+  outputs: ['dsChange'],
+  standalone: false
+})
+export class DsToggleButton {
+  protected el: HTMLDsToggleButtonElement;
+  @Output() dsChange = new EventEmitter<CustomEvent<boolean>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsToggleButton extends Components.DsToggleButton {
+  /**
+   * Emits the new pressed value (!pressed) on click.
+   */
+  dsChange: EventEmitter<CustomEvent<boolean>>;
+}
+
+
+@ProxyCmp({
+  inputs: ['background', 'elevation', 'items', 'rounded', 'size', 'value']
+})
+@Component({
+  selector: 'ds-toggle-button-group',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['background', 'elevation', 'items', 'rounded', 'size', 'value'],
+  outputs: ['dsChange'],
+  standalone: false
+})
+export class DsToggleButtonGroup {
+  protected el: HTMLDsToggleButtonGroupElement;
+  @Output() dsChange = new EventEmitter<CustomEvent<string>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsToggleButtonGroup extends Components.DsToggleButtonGroup {
+  /**
+   * Emits the id of the newly selected item.
+   */
+  dsChange: EventEmitter<CustomEvent<string>>;
+}
+
+
 @ProxyCmp({
   inputs: ['align', 'alignOffset', 'delay', 'label', 'shortcutKey', 'shortcutKeyPosition', 'side', 'sideOffset']
 })