feat(datetime-button): add component

angular/src/directives/proxies-list.txt

@@ -23,6 +23,7 @@ export const DIRECTIVES = [
   d.IonCol,
   d.IonContent,
   d.IonDatetime,
+  d.IonDatetimeButton,
   d.IonFab,
   d.IonFabButton,
   d.IonFabList,

angular/src/directives/proxies.ts

@@ -543,6 +543,27 @@ export class IonDatetime {
 }
 
 
+export declare interface IonDatetimeButton extends Components.IonDatetimeButton {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['color', 'datetime', 'disabled', 'mode']
+})
+@Component({
+  selector: 'ion-datetime-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['color', 'datetime', 'disabled', 'mode']
+})
+export class IonDatetimeButton {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
 export declare interface IonFab extends Components.IonFab {}
 
 @ProxyCmp({

core/api.txt

@@ -409,6 +409,12 @@ ion-datetime,css-prop,--background
 ion-datetime,css-prop,--background-rgb
 ion-datetime,css-prop,--title-color
 
+ion-datetime-button,shadow
+ion-datetime-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
+ion-datetime-button,prop,datetime,string | undefined,undefined,false,false
+ion-datetime-button,prop,disabled,boolean,false,false,true
+ion-datetime-button,prop,mode,"ios" | "md",undefined,false,false
+
 ion-fab,shadow
 ion-fab,prop,activated,boolean,false,false,false
 ion-fab,prop,edge,boolean,false,false,false

core/src/components.d.ts

@@ -834,6 +834,24 @@ export namespace Components {
          */
         "yearValues"?: number[] | number | string;
     }
+    interface IonDatetimeButton {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * The ID of the `ion-datetime` instance associated with the datetime button.
+         */
+        "datetime"?: string;
+        /**
+          * If `true`, the user cannot interact with the button.
+         */
+        "disabled": boolean;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+    }
     interface IonFab {
         /**
           * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
@@ -3405,6 +3423,12 @@ declare global {
         prototype: HTMLIonDatetimeElement;
         new (): HTMLIonDatetimeElement;
     };
+    interface HTMLIonDatetimeButtonElement extends Components.IonDatetimeButton, HTMLStencilElement {
+    }
+    var HTMLIonDatetimeButtonElement: {
+        prototype: HTMLIonDatetimeButtonElement;
+        new (): HTMLIonDatetimeButtonElement;
+    };
     interface HTMLIonFabElement extends Components.IonFab, HTMLStencilElement {
     }
     var HTMLIonFabElement: {
@@ -3849,6 +3873,7 @@ declare global {
         "ion-col": HTMLIonColElement;
         "ion-content": HTMLIonContentElement;
         "ion-datetime": HTMLIonDatetimeElement;
+        "ion-datetime-button": HTMLIonDatetimeButtonElement;
         "ion-fab": HTMLIonFabElement;
         "ion-fab-button": HTMLIonFabButtonElement;
         "ion-fab-list": HTMLIonFabListElement;
@@ -4773,6 +4798,24 @@ declare namespace LocalJSX {
          */
         "yearValues"?: number[] | number | string;
     }
+    interface IonDatetimeButton {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * The ID of the `ion-datetime` instance associated with the datetime button.
+         */
+        "datetime"?: string;
+        /**
+          * If `true`, the user cannot interact with the button.
+         */
+        "disabled"?: boolean;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+    }
     interface IonFab {
         /**
           * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
@@ -7061,6 +7104,7 @@ declare namespace LocalJSX {
         "ion-col": IonCol;
         "ion-content": IonContent;
         "ion-datetime": IonDatetime;
+        "ion-datetime-button": IonDatetimeButton;
         "ion-fab": IonFab;
         "ion-fab-button": IonFabButton;
         "ion-fab-list": IonFabList;
@@ -7160,6 +7204,7 @@ declare module "@stencil/core" {
             "ion-col": LocalJSX.IonCol & JSXBase.HTMLAttributes<HTMLIonColElement>;
             "ion-content": LocalJSX.IonContent & JSXBase.HTMLAttributes<HTMLIonContentElement>;
             "ion-datetime": LocalJSX.IonDatetime & JSXBase.HTMLAttributes<HTMLIonDatetimeElement>;
+            "ion-datetime-button": LocalJSX.IonDatetimeButton & JSXBase.HTMLAttributes<HTMLIonDatetimeButtonElement>;
             "ion-fab": LocalJSX.IonFab & JSXBase.HTMLAttributes<HTMLIonFabElement>;
             "ion-fab-button": LocalJSX.IonFabButton & JSXBase.HTMLAttributes<HTMLIonFabButtonElement>;
             "ion-fab-list": LocalJSX.IonFabList & JSXBase.HTMLAttributes<HTMLIonFabListElement>;

core/src/components/datetime-button/datetime-button.tsx

@@ -0,0 +1,36 @@
+import type { ComponentInterface } from '@stencil/core';
+import { Component, Host, Prop, h } from '@stencil/core';
+
+import type { Color } from '../../interface';
+
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
+@Component({
+  tag: 'ion-datetime-button',
+  styleUrl: 'datetime-button.scss',
+  shadow: true,
+})
+export class DatetimeButton implements ComponentInterface {
+  /**
+   * The color to use from your application's color palette.
+   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+   * For more information on colors, see [theming](/docs/theming/basics).
+   */
+  @Prop({ reflect: true }) color?: Color = 'primary';
+
+  /**
+   * If `true`, the user cannot interact with the button.
+   */
+  @Prop({ reflect: true }) disabled = false;
+
+  /**
+   * The ID of the `ion-datetime` instance
+   * associated with the datetime button.
+   */
+  @Prop() datetime?: string;
+
+  render() {
+    return <Host></Host>;
+  }
+}

packages/react/src/components/proxies.ts

@@ -21,6 +21,7 @@ import { defineCustomElement as defineIonChip } from '@ionic/core/components/ion
 import { defineCustomElement as defineIonCol } from '@ionic/core/components/ion-col.js';
 import { defineCustomElement as defineIonContent } from '@ionic/core/components/ion-content.js';
 import { defineCustomElement as defineIonDatetime } from '@ionic/core/components/ion-datetime.js';
+import { defineCustomElement as defineIonDatetimeButton } from '@ionic/core/components/ion-datetime-button.js';
 import { defineCustomElement as defineIonFab } from '@ionic/core/components/ion-fab.js';
 import { defineCustomElement as defineIonFabList } from '@ionic/core/components/ion-fab-list.js';
 import { defineCustomElement as defineIonFooter } from '@ionic/core/components/ion-footer.js';
@@ -88,6 +89,7 @@ export const IonChip = /*@__PURE__*/createReactComponent<JSX.IonChip, HTMLIonChi
 export const IonCol = /*@__PURE__*/createReactComponent<JSX.IonCol, HTMLIonColElement>('ion-col', undefined, undefined, defineIonCol);
 export const IonContent = /*@__PURE__*/createReactComponent<JSX.IonContent, HTMLIonContentElement>('ion-content', undefined, undefined, defineIonContent);
 export const IonDatetime = /*@__PURE__*/createReactComponent<JSX.IonDatetime, HTMLIonDatetimeElement>('ion-datetime', undefined, undefined, defineIonDatetime);
+export const IonDatetimeButton = /*@__PURE__*/createReactComponent<JSX.IonDatetimeButton, HTMLIonDatetimeButtonElement>('ion-datetime-button', undefined, undefined, defineIonDatetimeButton);
 export const IonFab = /*@__PURE__*/createReactComponent<JSX.IonFab, HTMLIonFabElement>('ion-fab', undefined, undefined, defineIonFab);
 export const IonFabList = /*@__PURE__*/createReactComponent<JSX.IonFabList, HTMLIonFabListElement>('ion-fab-list', undefined, undefined, defineIonFabList);
 export const IonFooter = /*@__PURE__*/createReactComponent<JSX.IonFooter, HTMLIonFooterElement>('ion-footer', undefined, undefined, defineIonFooter);

packages/vue/src/proxies.ts

@@ -24,6 +24,7 @@ import { defineCustomElement as defineIonChip } from '@ionic/core/components/ion
 import { defineCustomElement as defineIonCol } from '@ionic/core/components/ion-col.js';
 import { defineCustomElement as defineIonContent } from '@ionic/core/components/ion-content.js';
 import { defineCustomElement as defineIonDatetime } from '@ionic/core/components/ion-datetime.js';
+import { defineCustomElement as defineIonDatetimeButton } from '@ionic/core/components/ion-datetime-button.js';
 import { defineCustomElement as defineIonFab } from '@ionic/core/components/ion-fab.js';
 import { defineCustomElement as defineIonFabButton } from '@ionic/core/components/ion-fab-button.js';
 import { defineCustomElement as defineIonFabList } from '@ionic/core/components/ion-fab-list.js';
@@ -302,6 +303,13 @@ export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime>('ion-d
 'value', 'v-ion-change', 'ionChange');
 
 
+export const IonDatetimeButton = /*@__PURE__*/ defineContainer<JSX.IonDatetimeButton>('ion-datetime-button', defineIonDatetimeButton, [
+  'color',
+  'disabled',
+  'datetime'
+]);
+
+
 export const IonFab = /*@__PURE__*/ defineContainer<JSX.IonFab>('ion-fab', defineIonFab, [
   'horizontal',
   'vertical',