New <sl-time-field> component

.changeset/bumpy-lizards-switch.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/locales': minor
+---
+
+New translations for `<sl-time-field>`

.changeset/deep-baths-bow.md

@@ -0,0 +1,17 @@
+---
+'@sl-design-system/editorial-suite': minor
+'@sl-design-system/my-digital-book': minor
+'@sl-design-system/sanoma-learning': minor
+'@sl-design-system/itslearning': minor
+'@sl-design-system/bingel-int': minor
+'@sl-design-system/bingel-dc': minor
+'@sl-design-system/clickedu': minor
+'@sl-design-system/magister': minor
+'@sl-design-system/kampus': minor
+'@sl-design-system/neon': minor
+'@sl-design-system/teas': minor
+'@sl-design-system/max': minor
+'@sl-design-system/tig': minor
+---
+
+Added clock icon for use in `<sl-time-field>`

.changeset/every-lights-lick.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/time-field': patch
+---
+
+New component

.changeset/nine-stars-turn.md

@@ -0,0 +1,7 @@
+---
+'@sl-design-system/angular': minor
+---
+
+Add support for `<sl-time-field>`:
+- Added `TextFieldDirective` to handle form binding
+- Added `TimeFieldComponent` wrapper around `<sl-time-field>`

packages/angular/package.json

@@ -69,7 +69,8 @@
     "@sl-design-system/select": "^2.0.5",
     "@sl-design-system/switch": "^1.1.5",
     "@sl-design-system/text-area": "^1.1.4",
-    "@sl-design-system/text-field": "^1.6.6"
+    "@sl-design-system/text-field": "^1.6.6",
+    "@sl-design-system/time-field": "^0.0.0"
   },
   "devDependencies": {
     "@angular-devkit/architect": "^0.1902.14",

packages/angular/src/forms/public-api.ts

@@ -7,3 +7,4 @@ export * from './select.directive';
 export * from './switch.directive';
 export * from './text-area.directive';
 export * from './text-field.directive';
+export * from './time-field.directive';

packages/angular/src/forms/time-field.directive.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectorRef, Directive, ElementRef, Inject, forwardRef } from '@angular/core';
+import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { type TimeField } from '@sl-design-system/time-field';
+import { FormControlElementDirective } from './form-control-element.directive';
+
+@Directive({
+  selector: 'sl-time-field',
+  standalone: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TimeFieldDirective),
+      multi: true
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => TimeFieldDirective),
+      multi: true
+    }
+  ]
+})
+export class TimeFieldDirective extends FormControlElementDirective<TimeField> {
+  constructor(
+    @Inject(ElementRef) elementRef: ElementRef<TimeField>,
+    @Inject(ChangeDetectorRef) changeDetection: ChangeDetectorRef
+  ) {
+    super(elementRef, changeDetection);
+  }
+}

packages/angular/src/package.json

@@ -24,6 +24,7 @@
     "@sl-design-system/switch": "*",
     "@sl-design-system/text-area": "*",
     "@sl-design-system/text-field": "*",
+    "@sl-design-system/time-field": "*",
     "@sl-design-system/tooltip": "*"
   }
 }

packages/angular/stories/forms.stories.ts

@@ -26,6 +26,7 @@ import { SelectDirective } from '../src/forms/select.directive';
 import { SwitchDirective } from '../src/forms/switch.directive';
 import { TextAreaDirective } from '../src/forms/text-area.directive';
 import { TextFieldDirective } from '../src/forms/text-field.directive';
+import { TimeFieldDirective } from '../src/forms/time-field.directive';
 import { InlineMessageComponent } from '../src/inline-message/inline-message.component';
 import { OptionComponent } from '../src/listbox/option.component';
 import { NumberFieldComponent } from '../src/number-field/number-field.component';
@@ -35,6 +36,7 @@ import { SelectComponent } from '../src/select/select.component';
 import { SwitchComponent } from '../src/switch/switch.component';
 import { TextAreaComponent } from '../src/text-area/text-area.component';
 import { TextFieldComponent } from '../src/text-field/text-field.component';
+import { TimeFieldComponent } from '../src/time-field/time-field.component';
 
 @Component({
   selector: 'sla-all-form-controls-reactive',
@@ -48,6 +50,10 @@ import { TextFieldComponent } from '../src/text-field/text-field.component';
         <sl-number-field formControlName="numberField"></sl-number-field>
       </sl-form-field>
 
+      <sl-form-field label="Time field">
+        <sl-time-field formControlName="timeField"></sl-time-field>
+      </sl-form-field>
+
       <sl-form-field label="Textarea">
         <sl-text-area formControlName="textArea"></sl-text-area>
       </sl-form-field>
@@ -118,7 +124,8 @@ import { TextFieldComponent } from '../src/text-field/text-field.component';
     SelectDirective,
     SwitchDirective,
     TextAreaDirective,
-    TextFieldDirective
+    TextFieldDirective,
+    TimeFieldDirective
   ]
 })
 export class AllFormControlsReactiveComponent {
@@ -132,7 +139,8 @@ export class AllFormControlsReactiveComponent {
     select: new FormControl('1'),
     switch: new FormControl('toggled'),
     textArea: new FormControl('Text area'),
-    textField: new FormControl('Text field')
+    textField: new FormControl('Text field'),
+    timeField: new FormControl('13:45')
   });
 
   options: WritableSignal<Array<{ label: string; value: string }>> = signal([]);
@@ -160,6 +168,10 @@ export class AllFormControlsReactiveComponent {
         <sl-number-field formControlName="numberField" required></sl-number-field>
       </sl-form-field>
 
+      <sl-form-field label="Time field">
+        <sl-time-field formControlName="timeField" required></sl-time-field>
+      </sl-form-field>
+
       <sl-form-field label="Text area">
         <sl-text-area formControlName="textArea" required></sl-text-area>
       </sl-form-field>
@@ -236,7 +248,8 @@ export class AllFormControlsReactiveComponent {
     SelectDirective,
     SwitchDirective,
     TextAreaDirective,
-    TextFieldDirective
+    TextFieldDirective,
+    TimeFieldDirective
   ]
 })
 export class AllFormControlsEmptyReactiveComponent {
@@ -252,7 +265,8 @@ export class AllFormControlsEmptyReactiveComponent {
     select: new FormControl(''),
     switch: new FormControl(false),
     textArea: new FormControl(''),
-    textField: new FormControl('')
+    textField: new FormControl(''),
+    timeField: new FormControl('')
   });
 
   options: WritableSignal<Array<{ label: string; value: string }>> = signal([]);
@@ -284,6 +298,10 @@ export class AllFormControlsEmptyReactiveComponent {
         <sl-number-field [(ngModel)]="formGroup.numberField"></sl-number-field>
       </sl-form-field>
 
+      <sl-form-field label="Time field">
+        <sl-time-field [(ngModel)]="formGroup.timeField"></sl-time-field>
+      </sl-form-field>
+
       <sl-form-field label="Text area">
         <sl-text-area [(ngModel)]="formGroup.textArea"></sl-text-area>
       </sl-form-field>
@@ -354,21 +372,23 @@ export class AllFormControlsEmptyReactiveComponent {
     SelectDirective,
     SwitchDirective,
     TextAreaDirective,
-    TextFieldDirective
+    TextFieldDirective,
+    TimeFieldDirective
   ]
 })
 export class AllFormControlsTemplateComponent {
   formGroup = {
-    textField: 'Text field',
-    textArea: 'Text area',
     checkbox: 'checked',
-    comboboxSingle: 'Option 1',
+    checkboxGroup: ['2', '1', '0'],
     comboboxMultiple: ['Option 1', 'Option 2'],
+    comboboxSingle: 'Option 1',
     numberField: 10,
+    radioGroup: '1',
     select: '1',
     switch: 'toggled',
-    checkboxGroup: ['2', '1', '0'],
-    radioGroup: '1'
+    textArea: 'Text area',
+    textField: 'Text field',
+    timeField: '13:45'
   };
 }
 
@@ -467,16 +487,17 @@ export class AllFormControlsEmptyTemplateComponent {
   @ViewChild('form') form!: ElementRef<Form>;
 
   formGroup = {
-    textField: '',
-    textArea: '',
     checkbox: false,
-    comboboxSingle: '',
+    checkboxGroup: [],
     comboboxMultiple: [],
+    comboboxSingle: '',
     numberField: '',
+    radioGroup: null,
     select: '',
     switch: false,
-    checkboxGroup: [],
-    radioGroup: null
+    textArea: '',
+    textField: '',
+    timeField: ''
   };
 
   onClick(): void {
@@ -588,7 +609,8 @@ export default {
         SelectComponent,
         SwitchComponent,
         TextAreaComponent,
-        TextFieldComponent
+        TextFieldComponent,
+        TimeFieldComponent
       ]
     })
   ],

packages/components/form/src/form.stories.ts

@@ -11,6 +11,7 @@ import '@sl-design-system/select/register.js';
 import '@sl-design-system/switch/register.js';
 import '@sl-design-system/text-area/register.js';
 import '@sl-design-system/text-field/register.js';
+import '@sl-design-system/time-field/register.js';
 import { type Meta, type StoryObj } from '@storybook/web-components-vite';
 import { LitElement, type TemplateResult, html, nothing } from 'lit';
 import '../register.js';
@@ -23,6 +24,7 @@ type Props = Pick<Form, 'disabled' | 'value'> & {
   reportValidity?: boolean;
 };
 type Story = StoryObj<Props>;
+
 class customComponent extends ScopedElementsMixin(LitElement) {
   constructor() {
     super();
@@ -36,7 +38,12 @@ class customComponent extends ScopedElementsMixin(LitElement) {
     `;
   }
 }
-customElements.define('custom-component', customComponent);
+
+try {
+  customElements.define('custom-component', customComponent);
+} catch {
+  /* empty */
+}
 
 export default {
   title: 'Form/Form',
@@ -195,6 +202,10 @@ export const All: Story = {
         <sl-date-field name="dateField" placeholder="Placeholder" required></sl-date-field>
       </sl-form-field>
 
+      <sl-form-field hint="Hint text" label="Time field">
+        <sl-time-field name="timeField" placeholder="Placeholder" required></sl-time-field>
+      </sl-form-field>
+
       <sl-form-field hint="Hint text" label="Text area">
         <sl-text-area ?disabled=${disabled} name="textArea" placeholder="Placeholder" required></sl-text-area>
       </sl-form-field>
@@ -285,7 +296,8 @@ export const AllValid: Story = {
       select: '2',
       switch: 'toggled',
       textArea: 'Text area',
-      textField: 'Text field'
+      textField: 'Text field',
+      timeField: '12:00'
     }
   }
 };

packages/components/format-date/src/format-date.stories.ts

@@ -25,6 +25,8 @@ type Props = Pick<
 > & { fallback?: string };
 type Story = StoryObj<Props>;
 
+const locales = ['de', 'en-GB', 'es', 'fi', 'fr', 'it', 'nl', 'nl-BE', 'no', 'pl', 'sv'];
+
 export default {
   title: 'Utilities/Format date',
   tags: ['draft'],
@@ -41,7 +43,7 @@ export default {
     },
     locale: {
       control: 'inline-radio',
-      options: ['de', 'en-GB', 'es', 'fi', 'fr', 'it', 'nl', 'nl-BE', 'no', 'pl', 'sv']
+      options: locales
     },
     timeStyle: {
       control: 'inline-radio',
@@ -146,3 +148,67 @@ export const Fallback: Story = {
       'You can use the fallback slot to provide a message when the date is not valid (this includes when a date is not set). This can be useful if you want to show a placeholder or an error message.'
   }
 };
+
+export const Locales: Story = {
+  args: {
+    date: new Date()
+  },
+  argTypes: {
+    locale: { table: { disable: true } }
+  },
+  render: ({
+    fallback,
+    date,
+    dateStyle,
+    timeStyle,
+    weekday,
+    era,
+    year,
+    month,
+    day,
+    dayPeriod,
+    hour,
+    minute,
+    second,
+    timeZoneName,
+    timeZone,
+    hour12
+  }) => html`
+    <style>
+      dl {
+        display: inline-grid;
+        grid-template-columns: auto 1fr;
+        gap: 0.5rem 1rem;
+      }
+    </style>
+    <dl>
+      ${locales.map(
+        locale => html`
+          <dt>${locale}</dt>
+          <dd>
+            <sl-format-date
+              .date=${date}
+              .dateStyle=${dateStyle}
+              .timeStyle=${timeStyle}
+              .weekday=${weekday}
+              .era=${era}
+              .year=${year}
+              .month=${month}
+              .day=${day}
+              .dayPeriod=${dayPeriod}
+              .hour=${hour}
+              .minute=${minute}
+              .second=${second}
+              .timeZoneName=${timeZoneName}
+              .timeZone=${timeZone}
+              .hour12=${hour12}
+              locale=${locale}
+            >
+              ${fallback}
+            </sl-format-date>
+          </dd>
+        `
+      )}
+    </dl>
+  `
+};

packages/components/time-field/index.ts

@@ -0,0 +1 @@
+export * from './src/time-field.js';