main - f750300 build: set up token extraction for the timepicker

crisbeto · crisbeto · commit 34e4380b9a8e · 2024-10-04T07:12:25.000Z
diff --git a/docs-content/api-docs/material-timepicker-testing.html b/docs-content/api-docs/material-timepicker-testing.html
diff --git a/docs-content/api-docs/material-timepicker.html b/docs-content/api-docs/material-timepicker.html
diff --git a/docs-content/examples-highlighted/material/timepicker/index-ts.html b/docs-content/examples-highlighted/material/timepicker/index-ts.html
@@ -0,0 +1,2 @@
+<span class="hljs-keyword">export</span> {TimepickerOverviewExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./timepicker-overview/timepicker-overview-example&#x27;</span>;
+<span class="hljs-keyword">export</span> {TimepickerHarnessExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./timepicker-harness/timepicker-harness-example&#x27;</span>;
diff --git a/docs-content/examples-highlighted/material/timepicker/timepicker-harness/timepicker-harness-example-html.html b/docs-content/examples-highlighted/material/timepicker/timepicker-harness/timepicker-harness-example-html.html
@@ -0,0 +1,2 @@
+<span class="hljs-tag">&lt;<span class="hljs-name">input</span> [<span class="hljs-attr">matTimepicker</span>]=<span class="hljs-string">&quot;picker&quot;</span> [(<span class="hljs-attr">value</span>)]=<span class="hljs-string">&quot;date&quot;</span>/&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">mat-timepicker</span> #<span class="hljs-attr">picker</span>/&gt;</span>
diff --git a/docs-content/examples-highlighted/material/timepicker/timepicker-harness/timepicker-harness-example-ts.html b/docs-content/examples-highlighted/material/timepicker/timepicker-harness/timepicker-harness-example-ts.html
@@ -0,0 +1,23 @@
+<span class="hljs-keyword">import</span> {ChangeDetectionStrategy, Component, Signal, signal} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
+<span class="hljs-keyword">import</span> {provideNativeDateAdapter} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/core&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatTimepickerModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/timepicker&#x27;</span>;
+
+<span class="hljs-comment">/**
+ * <span class="hljs-doctag">@title </span>Testing with MatTimepickerInputHarness
+ */</span>
+<span class="hljs-meta">@Component</span>({
+  <span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;timepicker-harness-example&#x27;</span>,
+  <span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;timepicker-harness-example.html&#x27;</span>,
+  <span class="hljs-attr">standalone</span>: <span class="hljs-literal">true</span>,
+  <span class="hljs-attr">providers</span>: [provideNativeDateAdapter()],
+  <span class="hljs-attr">imports</span>: [MatTimepickerModule],
+  <span class="hljs-attr">changeDetection</span>: ChangeDetectionStrategy.OnPush,
+})
+<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TimepickerHarnessExample</span> </span>{
+  <span class="hljs-attr">date</span>: Signal&lt;<span class="hljs-built_in">Date</span> | <span class="hljs-literal">null</span>&gt;;
+
+  <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params"></span>)</span> {
+    <span class="hljs-keyword">const</span> today = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();
+    <span class="hljs-built_in">this</span>.date = signal(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(today.getFullYear(), today.getMonth(), today.getDate(), <span class="hljs-number">11</span>, <span class="hljs-number">45</span>));
+  }
+}
diff --git a/docs-content/examples-highlighted/material/timepicker/timepicker-harness/timepicker-harness-example.spec-ts.html b/docs-content/examples-highlighted/material/timepicker/timepicker-harness/timepicker-harness-example.spec-ts.html
@@ -0,0 +1,50 @@
+<span class="hljs-keyword">import</span> {ComponentFixture, TestBed} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core/testing&#x27;</span>;
+<span class="hljs-keyword">import</span> {TestbedHarnessEnvironment} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/cdk/testing/testbed&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatTimepickerInputHarness} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/timepicker/testing&#x27;</span>;
+<span class="hljs-keyword">import</span> {HarnessLoader} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/cdk/testing&#x27;</span>;
+<span class="hljs-keyword">import</span> {TimepickerHarnessExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./timepicker-harness-example&#x27;</span>;
+<span class="hljs-keyword">import</span> {NoopAnimationsModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/platform-browser/animations&#x27;</span>;
+<span class="hljs-keyword">import</span> {DateAdapter, MatNativeDateModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/core&#x27;</span>;
+
+describe(<span class="hljs-string">&#x27;TimepickerHarnessExample&#x27;</span>, <span class="hljs-function">() =&gt;</span> {
+  <span class="hljs-keyword">let</span> fixture: ComponentFixture&lt;TimepickerHarnessExample&gt;;
+  <span class="hljs-keyword">let</span> loader: HarnessLoader;
+
+  beforeEach(<span class="hljs-function">() =&gt;</span> {
+    TestBed.configureTestingModule({<span class="hljs-attr">imports</span>: [NoopAnimationsModule, MatNativeDateModule]});
+    TestBed.inject(DateAdapter).setLocale(<span class="hljs-string">&#x27;en-US&#x27;</span>); <span class="hljs-comment">// Set the locale to en-US to guarantee consistent tests.</span>
+    fixture = TestBed.createComponent(TimepickerHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it(<span class="hljs-string">&#x27;should load all timepicker input harnesses&#x27;</span>, <span class="hljs-keyword">async</span> () =&gt; {
+    <span class="hljs-keyword">const</span> inputs = <span class="hljs-keyword">await</span> loader.getAllHarnesses(MatTimepickerInputHarness);
+    expect(inputs.length).toBe(<span class="hljs-number">1</span>);
+  });
+
+  it(<span class="hljs-string">&#x27;should open and close a timepicker&#x27;</span>, <span class="hljs-keyword">async</span> () =&gt; {
+    <span class="hljs-keyword">const</span> input = <span class="hljs-keyword">await</span> loader.getHarness(MatTimepickerInputHarness);
+    expect(<span class="hljs-keyword">await</span> input.isTimepickerOpen()).toBe(<span class="hljs-literal">false</span>);
+
+    <span class="hljs-keyword">await</span> input.openTimepicker();
+    expect(<span class="hljs-keyword">await</span> input.isTimepickerOpen()).toBe(<span class="hljs-literal">true</span>);
+  });
+
+  it(<span class="hljs-string">&#x27;should set the input value&#x27;</span>, <span class="hljs-keyword">async</span> () =&gt; {
+    <span class="hljs-keyword">const</span> input = <span class="hljs-keyword">await</span> loader.getHarness(MatTimepickerInputHarness);
+    expect(<span class="hljs-keyword">await</span> input.getValue()).toBe(<span class="hljs-string">&#x27;11:45 AM&#x27;</span>);
+
+    <span class="hljs-keyword">await</span> input.setValue(<span class="hljs-string">&#x27;3:21 PM&#x27;</span>);
+    expect(<span class="hljs-keyword">await</span> input.getValue()).toBe(<span class="hljs-string">&#x27;3:21 PM&#x27;</span>);
+  });
+
+  it(<span class="hljs-string">&#x27;should select an option from the timepicker&#x27;</span>, <span class="hljs-keyword">async</span> () =&gt; {
+    <span class="hljs-keyword">const</span> input = <span class="hljs-keyword">await</span> loader.getHarness(MatTimepickerInputHarness);
+    <span class="hljs-keyword">const</span> timepicker = <span class="hljs-keyword">await</span> input.openTimepicker();
+    expect(<span class="hljs-keyword">await</span> input.getValue()).toBe(<span class="hljs-string">&#x27;11:45 AM&#x27;</span>);
+
+    <span class="hljs-keyword">await</span> timepicker.selectOption({<span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;1:00 PM&#x27;</span>});
+    expect(<span class="hljs-keyword">await</span> input.getValue()).toBe(<span class="hljs-string">&#x27;1:00 PM&#x27;</span>);
+  });
+});
diff --git a/docs-content/examples-highlighted/material/timepicker/timepicker-overview/timepicker-overview-example-html.html b/docs-content/examples-highlighted/material/timepicker/timepicker-overview/timepicker-overview-example-html.html
@@ -0,0 +1,6 @@
+<span class="hljs-tag">&lt;<span class="hljs-name">mat-form-field</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-label</span>&gt;</span>Pick a time<span class="hljs-tag">&lt;/<span class="hljs-name">mat-label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">matInput</span> [<span class="hljs-attr">matTimepicker</span>]=<span class="hljs-string">&quot;picker&quot;</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-timepicker-toggle</span> <span class="hljs-attr">matIconSuffix</span> [<span class="hljs-attr">for</span>]=<span class="hljs-string">&quot;picker&quot;</span>/&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-timepicker</span> #<span class="hljs-attr">picker</span>/&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">mat-form-field</span>&gt;</span>
diff --git a/docs-content/examples-highlighted/material/timepicker/timepicker-overview/timepicker-overview-example-ts.html b/docs-content/examples-highlighted/material/timepicker/timepicker-overview/timepicker-overview-example-ts.html
@@ -0,0 +1,16 @@
+<span class="hljs-keyword">import</span> {ChangeDetectionStrategy, Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatTimepickerModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/timepicker&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatInputModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/input&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatFormFieldModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/form-field&#x27;</span>;
+<span class="hljs-keyword">import</span> {provideNativeDateAdapter} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/core&#x27;</span>;
+
+<span class="hljs-comment">/** <span class="hljs-doctag">@title </span>Basic timepicker */</span>
+<span class="hljs-meta">@Component</span>({
+  <span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;timepicker-overview-example&#x27;</span>,
+  <span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;timepicker-overview-example.html&#x27;</span>,
+  <span class="hljs-attr">standalone</span>: <span class="hljs-literal">true</span>,
+  <span class="hljs-attr">providers</span>: [provideNativeDateAdapter()],
+  <span class="hljs-attr">imports</span>: [MatFormFieldModule, MatInputModule, MatTimepickerModule],
+  <span class="hljs-attr">changeDetection</span>: ChangeDetectionStrategy.OnPush,
+})
+<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TimepickerOverviewExample</span> </span>{}
diff --git a/docs-content/examples-source/material/timepicker/index.ts b/docs-content/examples-source/material/timepicker/index.ts
@@ -0,0 +1,2 @@
+export {TimepickerOverviewExample} from './timepicker-overview/timepicker-overview-example';
+export {TimepickerHarnessExample} from './timepicker-harness/timepicker-harness-example';
diff --git a/docs-content/examples-source/material/timepicker/timepicker-harness/timepicker-harness-example.html b/docs-content/examples-source/material/timepicker/timepicker-harness/timepicker-harness-example.html
@@ -0,0 +1,2 @@
+<input [matTimepicker]="picker" [(value)]="date"/>
+<mat-timepicker #picker/>
diff --git a/docs-content/examples-source/material/timepicker/timepicker-harness/timepicker-harness-example.spec.ts b/docs-content/examples-source/material/timepicker/timepicker-harness/timepicker-harness-example.spec.ts
@@ -0,0 +1,50 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatTimepickerInputHarness} from '@angular/material/timepicker/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {TimepickerHarnessExample} from './timepicker-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {DateAdapter, MatNativeDateModule} from '@angular/material/core';
+
+describe('TimepickerHarnessExample', () => {
+  let fixture: ComponentFixture<TimepickerHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({imports: [NoopAnimationsModule, MatNativeDateModule]});
+    TestBed.inject(DateAdapter).setLocale('en-US'); // Set the locale to en-US to guarantee consistent tests.
+    fixture = TestBed.createComponent(TimepickerHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should load all timepicker input harnesses', async () => {
+    const inputs = await loader.getAllHarnesses(MatTimepickerInputHarness);
+    expect(inputs.length).toBe(1);
+  });
+
+  it('should open and close a timepicker', async () => {
+    const input = await loader.getHarness(MatTimepickerInputHarness);
+    expect(await input.isTimepickerOpen()).toBe(false);
+
+    await input.openTimepicker();
+    expect(await input.isTimepickerOpen()).toBe(true);
+  });
+
+  it('should set the input value', async () => {
+    const input = await loader.getHarness(MatTimepickerInputHarness);
+    expect(await input.getValue()).toBe('11:45 AM');
+
+    await input.setValue('3:21 PM');
+    expect(await input.getValue()).toBe('3:21 PM');
+  });
+
+  it('should select an option from the timepicker', async () => {
+    const input = await loader.getHarness(MatTimepickerInputHarness);
+    const timepicker = await input.openTimepicker();
+    expect(await input.getValue()).toBe('11:45 AM');
+
+    await timepicker.selectOption({text: '1:00 PM'});
+    expect(await input.getValue()).toBe('1:00 PM');
+  });
+});
diff --git a/docs-content/examples-source/material/timepicker/timepicker-harness/timepicker-harness-example.ts b/docs-content/examples-source/material/timepicker/timepicker-harness/timepicker-harness-example.ts
@@ -0,0 +1,23 @@
+import {ChangeDetectionStrategy, Component, Signal, signal} from '@angular/core';
+import {provideNativeDateAdapter} from '@angular/material/core';
+import {MatTimepickerModule} from '@angular/material/timepicker';
+
+/**
+ * @title Testing with MatTimepickerInputHarness
+ */
+@Component({
+  selector: 'timepicker-harness-example',
+  templateUrl: 'timepicker-harness-example.html',
+  standalone: true,
+  providers: [provideNativeDateAdapter()],
+  imports: [MatTimepickerModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TimepickerHarnessExample {
+  date: Signal<Date | null>;
+
+  constructor() {
+    const today = new Date();
+    this.date = signal(new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 45));
+  }
+}
diff --git a/docs-content/examples-source/material/timepicker/timepicker-overview/timepicker-overview-example.html b/docs-content/examples-source/material/timepicker/timepicker-overview/timepicker-overview-example.html
@@ -0,0 +1,6 @@
+<mat-form-field>
+  <mat-label>Pick a time</mat-label>
+  <input matInput [matTimepicker]="picker">
+  <mat-timepicker-toggle matIconSuffix [for]="picker"/>
+  <mat-timepicker #picker/>
+</mat-form-field>
diff --git a/docs-content/examples-source/material/timepicker/timepicker-overview/timepicker-overview-example.ts b/docs-content/examples-source/material/timepicker/timepicker-overview/timepicker-overview-example.ts
@@ -0,0 +1,16 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MatTimepickerModule} from '@angular/material/timepicker';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {provideNativeDateAdapter} from '@angular/material/core';
+
+/** @title Basic timepicker */
+@Component({
+  selector: 'timepicker-overview-example',
+  templateUrl: 'timepicker-overview-example.html',
+  standalone: true,
+  providers: [provideNativeDateAdapter()],
+  imports: [MatFormFieldModule, MatInputModule, MatTimepickerModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TimepickerOverviewExample {}
diff --git a/docs-content/overviews/material/timepicker/timepicker.html b/docs-content/overviews/material/timepicker/timepicker.html
@@ -0,0 +1,2 @@
+<div class="docs-markdown"><p>TODO</p>
+</div>
diff --git a/docs-content/tokens/material/timepicker/timepicker.json b/docs-content/tokens/material/timepicker/timepicker.json
@@ -0,0 +1 @@
+{"totalTokens":3,"base":[{"name":"--mat-timepicker-container-elevation-shadow"},{"name":"--mat-timepicker-container-shape"}],"color":[{"name":"--mat-timepicker-container-background-color","derivedFrom":"--sys-surface-container"}],"typography":[],"density":[]}
diff --git a/fesm2022/components-examples.mjs b/fesm2022/components-examples.mjs
@@ -4578,6 +4578,33 @@ const EXAMPLE_COMPONENTS = {
         "primaryFile": "tab-nav-bar-basic-example.ts",
         "importPath": "material/tabs"
     },
+    "timepicker-harness": {
+        "packagePath": "material/timepicker/timepicker-harness",
+        "title": "Testing with MatTimepickerInputHarness",
+        "componentName": "TimepickerHarnessExample",
+        "files": [
+            "timepicker-harness-example.ts",
+            "timepicker-harness-example.html",
+            "timepicker-harness-example.spec.ts"
+        ],
+        "selector": "timepicker-harness-example",
+        "additionalComponents": [],
+        "primaryFile": "timepicker-harness-example.ts",
+        "importPath": "material/timepicker"
+    },
+    "timepicker-overview": {
+        "packagePath": "material/timepicker/timepicker-overview",
+        "title": "Basic timepicker",
+        "componentName": "TimepickerOverviewExample",
+        "files": [
+            "timepicker-overview-example.ts",
+            "timepicker-overview-example.html"
+        ],
+        "selector": "timepicker-overview-example",
+        "additionalComponents": [],
+        "primaryFile": "timepicker-overview-example.ts",
+        "importPath": "material/timepicker"
+    },
     "toolbar-basic": {
         "packagePath": "material/toolbar/toolbar-basic",
         "title": "Basic toolbar",
@@ -5568,6 +5595,10 @@ async function loadExample(id) {
             return import('@angular/components-examples/material/tabs');
         case 'tab-nav-bar-basic':
             return import('@angular/components-examples/material/tabs');
+        case 'timepicker-harness':
+            return import('@angular/components-examples/material/timepicker');
+        case 'timepicker-overview':
+            return import('@angular/components-examples/material/timepicker');
         case 'toolbar-basic':
             return import('@angular/components-examples/material/toolbar');
         case 'toolbar-harness':
diff --git a/fesm2022/components-examples.mjs.map b/fesm2022/components-examples.mjs.map
diff --git a/fesm2022/material/timepicker.mjs b/fesm2022/material/timepicker.mjs
diff --git a/fesm2022/material/timepicker.mjs.map b/fesm2022/material/timepicker.mjs.map
diff --git a/material/timepicker/index.d.ts b/material/timepicker/index.d.ts
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<span class="hljs-keyword">export</span> {TimepickerOverviewExample} <span class="hljs-keyword">from</span> <span class="hljs-string">'./timepicker-overview/timepicker-overview-example'</span>;`
	`2`	`+<span class="hljs-keyword">export</span> {TimepickerHarnessExample} <span class="hljs-keyword">from</span> <span class="hljs-string">'./timepicker-harness/timepicker-harness-example'</span>;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<span class="hljs-tag"><<span class="hljs-name">input</span> [<span class="hljs-attr">matTimepicker</span>]=<span class="hljs-string">"picker"</span> [(<span class="hljs-attr">value</span>)]=<span class="hljs-string">"date"</span>/></span>`
	`2`	`+<span class="hljs-tag"><<span class="hljs-name">mat-timepicker</span> #<span class="hljs-attr">picker</span>/></span>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export {TimepickerOverviewExample} from './timepicker-overview/timepicker-overview-example';`
	`2`	`+export {TimepickerHarnessExample} from './timepicker-harness/timepicker-harness-example';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<input [matTimepicker]="picker" [(value)]="date"/>`
	`2`	`+<mat-timepicker #picker/>`