feat: add datetime-picker component

packages/angular-workspace/projects/angular/src/directives/proxies-list.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 
 import * as d from './proxies';
 
@@ -9,13 +8,16 @@ export const DIRECTIVES = [
   d.RuxBreadcrumbItem,
   d.RuxButton,
   d.RuxButtonGroup,
+  d.RuxCalendar,
   d.RuxCard,
   d.RuxCheckbox,
   d.RuxCheckboxGroup,
   d.RuxClassificationMarking,
   d.RuxClock,
   d.RuxContainer,
   d.RuxDatetime,
+  d.RuxDatetimePicker,
+  d.RuxDay,
   d.RuxDialog,
   d.RuxGlobalStatusBar,
   d.RuxIcon,

packages/angular-workspace/projects/angular/src/directives/proxies.ts

@@ -148,6 +148,34 @@ export class RuxButtonGroup {
 export declare interface RuxButtonGroup extends Components.RuxButtonGroup {}
 
 
+@ProxyCmp({
+  inputs: ['incomingDay', 'incomingMonth', 'incomingYear', 'initHoursValue', 'initMillisecondsValue', 'initMinutesValue', 'initSecondsValue', 'isJulian', 'iso', 'maxYear', 'minYear', 'precision']
+})
+@Component({
+  selector: 'rux-calendar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['incomingDay', 'incomingMonth', 'incomingYear', 'initHoursValue', 'initMillisecondsValue', 'initMinutesValue', 'initSecondsValue', 'isJulian', 'iso', 'maxYear', 'minYear', 'precision'],
+})
+export class RuxCalendar {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['ruxcalendardatetimeupdated', 'datetimeupdated']);
+  }
+}
+
+
+export declare interface RuxCalendar extends Components.RuxCalendar {
+
+  ruxcalendardatetimeupdated: EventEmitter<CustomEvent<{ iso: string }>>;
+
+  datetimeupdated: EventEmitter<CustomEvent<{ iso: string }>>;
+}
+
+
 @ProxyCmp({
 })
 @Component({
@@ -318,6 +346,56 @@ export class RuxDatetime {
 export declare interface RuxDatetime extends Components.RuxDatetime {}
 
 
+@ProxyCmp({
+  inputs: ['disabled', 'errorText', 'helpText', 'invalid', 'julianFormat', 'label', 'maxYear', 'minYear', 'name', 'precision', 'required', 'size', 'value']
+})
+@Component({
+  selector: 'rux-datetime-picker',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['disabled', 'errorText', 'helpText', 'invalid', 'julianFormat', 'label', 'maxYear', 'minYear', 'name', 'precision', 'required', 'size', 'value'],
+})
+export class RuxDatetimePicker {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface RuxDatetimePicker extends Components.RuxDatetimePicker {}
+
+
+@ProxyCmp({
+  inputs: ['dayNumber', 'selected']
+})
+@Component({
+  selector: 'rux-day',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['dayNumber', 'selected'],
+})
+export class RuxDay {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['ruxdayselected']);
+  }
+}
+
+
+import type { DayInfo as IRuxDayDayInfo } from '@astrouxds/astro-web-components';
+
+export declare interface RuxDay extends Components.RuxDay {
+
+  ruxdayselected: EventEmitter<CustomEvent<IRuxDayDayInfo>>;
+}
+
+
 @ProxyCmp({
   inputs: ['clickToClose', 'confirmText', 'denyText', 'header', 'message', 'open'],
   methods: ['toggle', 'show', 'hide']

packages/framework-testing/astro-react/src/App.tsx

@@ -1,5 +1,10 @@
 import "./App.css";
-import { RuxContainer, RuxGlobalStatusBar } from "@astrouxds/react";
+
+import {
+  RuxContainer,
+  RuxDatetimePicker,
+  RuxGlobalStatusBar,
+} from "@astrouxds/react";
 
 function App() {
   return (
@@ -12,6 +17,9 @@ function App() {
 
         <RuxContainer className="lg:col-span-10">
           <header slot="header">Header</header>
+          <div className="w-1/4 m-auto">
+            <RuxDatetimePicker></RuxDatetimePicker>
+          </div>
         </RuxContainer>
       </main>
     </>

packages/react/src/components.tsx

@@ -14,13 +14,16 @@ export const RuxBreadcrumb = /*@__PURE__*/createReactComponent<JSX.RuxBreadcrumb
 export const RuxBreadcrumbItem = /*@__PURE__*/createReactComponent<JSX.RuxBreadcrumbItem, HTMLRuxBreadcrumbItemElement>('rux-breadcrumb-item');
 export const RuxButton = /*@__PURE__*/createReactComponent<JSX.RuxButton, HTMLRuxButtonElement>('rux-button');
 export const RuxButtonGroup = /*@__PURE__*/createReactComponent<JSX.RuxButtonGroup, HTMLRuxButtonGroupElement>('rux-button-group');
+export const RuxCalendar = /*@__PURE__*/createReactComponent<JSX.RuxCalendar, HTMLRuxCalendarElement>('rux-calendar');
 export const RuxCard = /*@__PURE__*/createReactComponent<JSX.RuxCard, HTMLRuxCardElement>('rux-card');
 export const RuxCheckbox = /*@__PURE__*/createReactComponent<JSX.RuxCheckbox, HTMLRuxCheckboxElement>('rux-checkbox');
 export const RuxCheckboxGroup = /*@__PURE__*/createReactComponent<JSX.RuxCheckboxGroup, HTMLRuxCheckboxGroupElement>('rux-checkbox-group');
 export const RuxClassificationMarking = /*@__PURE__*/createReactComponent<JSX.RuxClassificationMarking, HTMLRuxClassificationMarkingElement>('rux-classification-marking');
 export const RuxClock = /*@__PURE__*/createReactComponent<JSX.RuxClock, HTMLRuxClockElement>('rux-clock');
 export const RuxContainer = /*@__PURE__*/createReactComponent<JSX.RuxContainer, HTMLRuxContainerElement>('rux-container');
 export const RuxDatetime = /*@__PURE__*/createReactComponent<JSX.RuxDatetime, HTMLRuxDatetimeElement>('rux-datetime');
+export const RuxDatetimePicker = /*@__PURE__*/createReactComponent<JSX.RuxDatetimePicker, HTMLRuxDatetimePickerElement>('rux-datetime-picker');
+export const RuxDay = /*@__PURE__*/createReactComponent<JSX.RuxDay, HTMLRuxDayElement>('rux-day');
 export const RuxDialog = /*@__PURE__*/createReactComponent<JSX.RuxDialog, HTMLRuxDialogElement>('rux-dialog');
 export const RuxGlobalStatusBar = /*@__PURE__*/createReactComponent<JSX.RuxGlobalStatusBar, HTMLRuxGlobalStatusBarElement>('rux-global-status-bar');
 export const RuxIcon = /*@__PURE__*/createReactComponent<JSX.RuxIcon, HTMLRuxIconElement>('rux-icon');