@wkly/datetime-picker 17.0.0 → 17.1.0

package/README.md

@@ -13,6 +13,8 @@ WKLY is an Angular date and time picker with a continuous, scrollable calendar.
 - [Set application defaults](#set-application-defaults)
 - [Use public types and methods](#use-public-types-and-methods)
 
+Showcase: [https://cokkto.github.io/wkly-datetime-picker](https://cokkto.github.io/wkly-datetime-picker)
+
 ## Install and choose a version
 
 Install `@wkly/datetime-picker` with the same major version as your Angular application. Angular 11–22 have corresponding package version lines.
@@ -23,6 +25,8 @@ For Angular 19:
 npm install @wkly/datetime-picker@19.x.x
 ```
 
+The `latest` npm dist-tag follows the highest supported Angular major (currently 22). Use `@wkly/datetime-picker@latest` for that line, or `@wkly/datetime-picker@angular-N` for a specific supported major.
+
 For another supported Angular major, replace `19` with that number. Keep the major in your dependency range when updating.
 
 Versions follow `N.S.A`: `N` is the Angular major, `S` is the shared revision, and `A` is the revision for that Angular integration. For example, an Angular 19 fix advances `19.2.21` to `19.2.22`; a shared update advances the supported lines to `N.3.0`. Your application must satisfy the package's Angular and RxJS peer dependencies. CDK is optional and is needed only for the anchored overlay.
@@ -299,7 +303,7 @@ The relative-day view uses `inDays` (default `"In {{days}} days"`), `days`, `end
 
 ## Use a different calendar
 
-The included calendar adapter is `WklyGregorianCalendarAdapter`, available from `wkly-datetime-picker.adapters`. It is selected automatically and supports Gregorian years `0000..9999` with localized labels. `WklyCalendarAbstractAdapter` is an optional base class for custom adapters, providing reusable locale formatters.
+The included calendar adapter is `WklyGregorianCalendarAdapter`, available from `@wkly/adapters`. It is selected automatically and supports Gregorian years `0000..9999` with localized labels. `WklyCalendarAbstractAdapter` is an optional base class for custom adapters, providing reusable locale formatters.
 
 For another calendar, supply a `WklyCalendarAdapter` through `[calendarAdapter]`. The [Hebrew adapter](https://github.com/cokkto/wkly-datetime-picker/blob/main/projects/wkly-datetime-picker.showcase/src/hebrew-adapter.ts) and [Hijri adapter](https://github.com/cokkto/wkly-datetime-picker/blob/main/projects/wkly-datetime-picker.showcase/src/hijri-adapter.ts) are available as source from Git; neither is shipped in npm packages. Copy their source into your application. Hebrew requires `@hebcal/core`; Hijri has no additional dependency beyond WKLY and the platform's `Intl` calendar formatting.
 
@@ -389,9 +393,9 @@ Use the public types when integrating with forms, application state, validation,
 | `WklyConfiguration`, `WklyStrings`, `WklyTranslations`, `WklyClock` | `@wkly/datetime-picker` | Type values supplied through injection tokens |
 | `WklyViewportChange`, `WklyCloseReason`, `WklyJumpOptions` | `@wkly/datetime-picker` | Handle navigation, dismissal, and programmatic jumps |
 | `WklyPresentationRef` | `@wkly/datetime-picker` | Access and destroy a presentation created through a presentation service |
-| `WklyCalendarAdapter`, `WklyCalendarDate`, `WklyCalendarMonth`, `WklyCalendarDateError` | `wkly-datetime-picker.adapters` | Implement another calendar and its validation |
-| `WklyDatePredicateContext`, `WklyTimePredicateContext`, `WklySelectionConfig` | `wkly-datetime-picker.adapters` | Work directly with predicate context and selection validation |
-| `WklyPickerInputs`, `WklyPickerOutputs` | `wkly-datetime-picker` | Describe the shared binding contracts when building presentation extensions |
+| `WklyCalendarAdapter`, `WklyCalendarDate`, `WklyCalendarMonth`, `WklyCalendarDateError` | `@wkly/adapters` | Implement another calendar and its validation |
+| `WklyDatePredicateContext`, `WklyTimePredicateContext`, `WklySelectionConfig` | `@wkly/adapters` | Work directly with predicate context and selection validation |
+| `WklyPickerInputs`, `WklyPickerOutputs` | `@wkly/presentation` | Describe the shared binding contracts when building presentation extensions |
 
 When importing an adapter or shared contract directly, declare its package as a direct dependency of your application.
 

package/esm2022/field.component.mjs

@@ -214,11 +214,11 @@ export class WklyFieldComponent {
         this.touchChanged = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WklyFieldComponent, selector: "wkly-field", inputs: { value: "value", label: "label", hideLabel: "hideLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", min: "min", max: "max", step: "step", locale: "locale", disabled: "disabled", invalid: "invalid", labels: "labels" }, outputs: { valueChange: "valueChange", complete: "complete" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"field\"\n  (wheel)=\"wheel($event)\"\n  (touchstart)=\"touchStart($event)\"\n  (touchmove)=\"touchMove($event)\"\n  (touchend)=\"touchEnd($event)\"\n  (touchcancel)=\"touchEnd($event)\"\n>\n  <span *ngIf=\"!hideLabel\" class=\"label\">{{ label }}</span>\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"previousLabel || label + ': previous'\"\n    (click)=\"stepBy(-1)\"\n  >\n    {{ neighbor(-1) }}\n  </button>\n  <input\n    [attr.aria-label]=\"label\"\n    [attr.aria-invalid]=\"invalid\"\n    [disabled]=\"disabled\"\n    [value]=\"display\"\n    [attr.inputmode]=\"labels ? 'text' : min < 0 ? 'text' : 'numeric'\"\n    autocomplete=\"off\"\n    (focus)=\"begin($event)\"\n    (input)=\"type($event)\"\n    (blur)=\"finish()\"\n    (keydown)=\"key($event)\"\n  />\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"nextLabel || label + ': next'\"\n    (click)=\"stepBy(1)\"\n  >\n    {{ neighbor(1) }}\n  </button>\n</div>\n", styles: [".field{display:flex;flex-direction:column;align-items:stretch;min-width:0;text-align:center;touch-action:pan-x}.label{font-size:11px;color:var(--wkly-muted-color, #54616e);margin-bottom:4px}button,input{font:inherit;box-sizing:border-box;min-height:44px;width:100%;border:0;text-align:center;background:transparent;color:inherit;border-radius:7px}button{color:var(--wkly-muted-color, #54616e);cursor:pointer}input{font-size:18px;font-weight:650;background:var(--wkly-range-color, #e5f1ee);border-block:2px solid var(--wkly-accent-color, #176c55)}input[aria-invalid=true]{border-color:var(--wkly-error-color, #b42318)}:focus-visible{outline:2px solid var(--wkly-focus-color, #124ee0);outline-offset:1px}button:disabled,input:disabled{opacity:.45}button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WklyFieldComponent, selector: "wkly-field", inputs: { value: "value", label: "label", hideLabel: "hideLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", min: "min", max: "max", step: "step", locale: "locale", disabled: "disabled", invalid: "invalid", labels: "labels" }, outputs: { valueChange: "valueChange", complete: "complete" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"field\"\n  (wheel)=\"wheel($event)\"\n  (touchstart)=\"touchStart($event)\"\n  (touchmove)=\"touchMove($event)\"\n  (touchend)=\"touchEnd($event)\"\n  (touchcancel)=\"touchEnd($event)\"\n>\n  <span *ngIf=\"!hideLabel\" class=\"label\">{{ label }}</span>\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"previousLabel || label + ': previous'\"\n    (click)=\"stepBy(-1)\"\n  >\n    {{ neighbor(-1) }}\n  </button>\n  <input\n    [attr.aria-label]=\"label\"\n    [attr.aria-invalid]=\"invalid\"\n    [disabled]=\"disabled\"\n    [value]=\"display\"\n    [attr.inputmode]=\"labels ? 'text' : min < 0 ? 'text' : 'numeric'\"\n    autocomplete=\"off\"\n    (focus)=\"begin($event)\"\n    (input)=\"type($event)\"\n    (blur)=\"finish()\"\n    (keydown)=\"key($event)\"\n  />\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"nextLabel || label + ': next'\"\n    (click)=\"stepBy(1)\"\n  >\n    {{ neighbor(1) }}\n  </button>\n</div>\n", styles: [".field{display:flex;flex-direction:column;align-items:stretch;min-width:0;text-align:center;touch-action:pan-x}.label{font-size:11px;color:var(--wkly-muted-color, #54616e);margin-bottom:4px}button,input{font:inherit;box-sizing:border-box;min-height:44px;width:100%;border:0;text-align:center;background:transparent;color:inherit;border-radius:7px}button{color:var(--wkly-muted-color, #54616e);cursor:pointer}input{font-size:18px;font-weight:650;background:var(--wkly-range-color, #e5f1ee);border-block:2px solid var(--wkly-accent-color, #176c55)}input[aria-invalid=true]{border-color:var(--wkly-error-color, #b42318)}:focus-visible{outline:2px solid var(--wkly-focus-color, #124ee0);outline-offset:1px}button:disabled,input:disabled{opacity:.45}@media (hover: hover) and (pointer: fine){button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: "wkly-field", template: "<div\n  class=\"field\"\n  (wheel)=\"wheel($event)\"\n  (touchstart)=\"touchStart($event)\"\n  (touchmove)=\"touchMove($event)\"\n  (touchend)=\"touchEnd($event)\"\n  (touchcancel)=\"touchEnd($event)\"\n>\n  <span *ngIf=\"!hideLabel\" class=\"label\">{{ label }}</span>\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"previousLabel || label + ': previous'\"\n    (click)=\"stepBy(-1)\"\n  >\n    {{ neighbor(-1) }}\n  </button>\n  <input\n    [attr.aria-label]=\"label\"\n    [attr.aria-invalid]=\"invalid\"\n    [disabled]=\"disabled\"\n    [value]=\"display\"\n    [attr.inputmode]=\"labels ? 'text' : min < 0 ? 'text' : 'numeric'\"\n    autocomplete=\"off\"\n    (focus)=\"begin($event)\"\n    (input)=\"type($event)\"\n    (blur)=\"finish()\"\n    (keydown)=\"key($event)\"\n  />\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"nextLabel || label + ': next'\"\n    (click)=\"stepBy(1)\"\n  >\n    {{ neighbor(1) }}\n  </button>\n</div>\n", styles: [".field{display:flex;flex-direction:column;align-items:stretch;min-width:0;text-align:center;touch-action:pan-x}.label{font-size:11px;color:var(--wkly-muted-color, #54616e);margin-bottom:4px}button,input{font:inherit;box-sizing:border-box;min-height:44px;width:100%;border:0;text-align:center;background:transparent;color:inherit;border-radius:7px}button{color:var(--wkly-muted-color, #54616e);cursor:pointer}input{font-size:18px;font-weight:650;background:var(--wkly-range-color, #e5f1ee);border-block:2px solid var(--wkly-accent-color, #176c55)}input[aria-invalid=true]{border-color:var(--wkly-error-color, #b42318)}:focus-visible{outline:2px solid var(--wkly-focus-color, #124ee0);outline-offset:1px}button:disabled,input:disabled{opacity:.45}button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}\n"] }]
+            args: [{ selector: "wkly-field", template: "<div\n  class=\"field\"\n  (wheel)=\"wheel($event)\"\n  (touchstart)=\"touchStart($event)\"\n  (touchmove)=\"touchMove($event)\"\n  (touchend)=\"touchEnd($event)\"\n  (touchcancel)=\"touchEnd($event)\"\n>\n  <span *ngIf=\"!hideLabel\" class=\"label\">{{ label }}</span>\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"previousLabel || label + ': previous'\"\n    (click)=\"stepBy(-1)\"\n  >\n    {{ neighbor(-1) }}\n  </button>\n  <input\n    [attr.aria-label]=\"label\"\n    [attr.aria-invalid]=\"invalid\"\n    [disabled]=\"disabled\"\n    [value]=\"display\"\n    [attr.inputmode]=\"labels ? 'text' : min < 0 ? 'text' : 'numeric'\"\n    autocomplete=\"off\"\n    (focus)=\"begin($event)\"\n    (input)=\"type($event)\"\n    (blur)=\"finish()\"\n    (keydown)=\"key($event)\"\n  />\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"nextLabel || label + ': next'\"\n    (click)=\"stepBy(1)\"\n  >\n    {{ neighbor(1) }}\n  </button>\n</div>\n", styles: [".field{display:flex;flex-direction:column;align-items:stretch;min-width:0;text-align:center;touch-action:pan-x}.label{font-size:11px;color:var(--wkly-muted-color, #54616e);margin-bottom:4px}button,input{font:inherit;box-sizing:border-box;min-height:44px;width:100%;border:0;text-align:center;background:transparent;color:inherit;border-radius:7px}button{color:var(--wkly-muted-color, #54616e);cursor:pointer}input{font-size:18px;font-weight:650;background:var(--wkly-range-color, #e5f1ee);border-block:2px solid var(--wkly-accent-color, #176c55)}input[aria-invalid=true]{border-color:var(--wkly-error-color, #b42318)}:focus-visible{outline:2px solid var(--wkly-focus-color, #124ee0);outline-offset:1px}button:disabled,input:disabled{opacity:.45}@media (hover: hover) and (pointer: fine){button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], label: [{