@skyux/datetime 5.1.2 → 5.5.0-alpha.0

package/esm2015/lib/modules/datepicker/yearpicker.component.js

@@ -0,0 +1,90 @@
+import { Component } from '@angular/core';
+import { SkyDatepickerCalendarInnerComponent } from './datepicker-calendar-inner.component';
+import * as i0 from "@angular/core";
+import * as i1 from "./datepicker-calendar-inner.component";
+import * as i2 from "@skyux/indicators";
+import * as i3 from "@angular/common";
+/**
+ * @internal
+ */
+export class SkyYearPickerComponent {
+    constructor(datepicker) {
+        this.rows = [];
+        this.datepicker = datepicker;
+    }
+    ngOnInit() {
+        this.datepicker.stepYear = { years: this.datepicker.yearRange };
+        this.datepicker.setRefreshViewHandler(() => {
+            this.refreshYearView();
+        }, 'year');
+        this.datepicker.setCompareHandler(this.compareYears, 'year');
+        this.datepicker.setKeydownHandler((key, event) => {
+            this.keydownYears(key, event);
+        }, 'year');
+        this.datepicker.refreshView();
+    }
+    getStartingYear(year) {
+        return (Math.floor((year - 1) / this.datepicker.yearRange) *
+            this.datepicker.yearRange +
+            1);
+    }
+    compareYears(date1, date2) {
+        return date1.getFullYear() - date2.getFullYear();
+    }
+    refreshYearView() {
+        let years = new Array(this.datepicker.yearRange);
+        let date;
+        let start = this.getStartingYear(this.datepicker.activeDate.getFullYear());
+        for (let i = 0; i < this.datepicker.yearRange; i++) {
+            date = new Date(this.datepicker.activeDate);
+            date.setFullYear(start + i, 0, 1);
+            years[i] = this.datepicker.createDateObject(date, this.datepicker.formatYear, false, this.datepicker.datepickerId + '-' + i);
+        }
+        this.title = [
+            years[0].label,
+            years[this.datepicker.yearRange - 1].label,
+        ].join(' - ');
+        this.rows = this.datepicker.createCalendarRows(years, this.datepicker.yearColLimit);
+    }
+    keydownYears(key, event) {
+        let date = this.datepicker.activeDate.getFullYear();
+        /* istanbul ignore else */
+        /* sanity check */
+        if (key === 'left') {
+            date = date - 1;
+        }
+        else if (key === 'up') {
+            date = date - this.datepicker.yearColLimit;
+        }
+        else if (key === 'right') {
+            date = date + 1;
+        }
+        else if (key === 'down') {
+            date = date + this.datepicker.yearColLimit;
+        }
+        else if (key === 'pageup' || key === 'pagedown') {
+            date += (key === 'pageup' ? -1 : 1) * this.datepicker.yearRange;
+        }
+        else if (key === 'home') {
+            date = this.getStartingYear(this.datepicker.activeDate.getFullYear());
+        }
+        else if (key === 'end') {
+            date =
+                this.getStartingYear(this.datepicker.activeDate.getFullYear()) +
+                    this.datepicker.yearRange -
+                    1;
+        }
+        this.datepicker.activeDate.setFullYear(date);
+    }
+}
+SkyYearPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: i1.SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
+SkyYearPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0, template: "<table *ngIf=\"datepicker.datepickerMode === 'year'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n      <th\n        [attr.colspan]=\"\n          datepicker.yearColLimit - 2 <= 0 ? 1 : datepicker.yearColLimit - 2\n        \"\n      >\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          role=\"heading\"\n          type=\"button\"\n          class=\"\n            sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\n          \"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode\n          }\"\n          tabindex=\"-1\"\n        >\n          <strong>{{ title }}</strong>\n        </button>\n      </th>\n      <th class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td *ngFor=\"let date of row\" class=\"sky-datepicker-row\" role=\"gridcell\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{\n            'sky-datepicker-btn-selected': date.selected,\n            'sky-btn-disabled': date.disabled,\n            'sky-btn-active': datepicker.isActive(date)\n          }\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n        >\n          <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n            date.label\n          }}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-yearpicker',
+                    templateUrl: 'yearpicker.component.html',
+                    styleUrls: ['./yearpicker.component.scss'],
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyDatepickerCalendarInnerComponent }]; } });
+//# sourceMappingURL=yearpicker.component.js.map

package/esm2015/lib/modules/datepicker/yearpicker.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"yearpicker.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/datetime/src/lib/modules/datepicker/yearpicker.component.ts","../../../../../../../../libs/components/datetime/src/lib/modules/datepicker/yearpicker.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAU,MAAM,eAAe,CAAC;AAElD,OAAO,EAAE,mCAAmC,EAAE,MAAM,uCAAuC,CAAC;;;;;AAI5F;;GAEG;AAMH,MAAM,OAAO,sBAAsB;IAOjC,YAAmB,UAA+C;QAJ3D,SAAI,GAAoC,EAAE,CAAC;QAKhD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;IAEM,QAAQ;QACb,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,CAAC;QAEhE,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,GAAG,EAAE;YACzC,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,EAAE,MAAM,CAAC,CAAC;QAEX,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;QAE7D,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,GAAW,EAAE,KAAoB,EAAE,EAAE;YACtE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC,EAAE,MAAM,CAAC,CAAC;QAEX,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;IAChC,CAAC;IAES,eAAe,CAAC,IAAY;QACpC,OAAO,CACL,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;YAChD,IAAI,CAAC,UAAU,CAAC,SAAS;YAC3B,CAAC,CACF,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,KAAW,EAAE,KAAW;QAC3C,OAAO,KAAK,CAAC,WAAW,EAAE,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;IACnD,CAAC;IAEO,eAAe;QACrB,IAAI,KAAK,GAA6B,IAAI,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;QAC3E,IAAI,IAAU,CAAC;QACf,IAAI,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;QAE3E,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE;YAClD,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;YAC5C,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YAElC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CACzC,IAAI,EACJ,IAAI,CAAC,UAAU,CAAC,UAAU,EAC1B,KAAK,EACL,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,GAAG,GAAG,CAAC,CACvC,CAAC;SACH;QAED,IAAI,CAAC,KAAK,GAAG;YACX,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK;YACd,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,KAAK;SAC3C,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,kBAAkB,CAC5C,KAAK,EACL,IAAI,CAAC,UAAU,CAAC,YAAY,CAC7B,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,GAAW,EAAE,KAAoB;QACpD,IAAI,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;QAEpD,0BAA0B;QAC1B,kBAAkB;QAClB,IAAI,GAAG,KAAK,MAAM,EAAE;YAClB,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC;SACjB;aAAM,IAAI,GAAG,KAAK,IAAI,EAAE;YACvB,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC;SAC5C;aAAM,IAAI,GAAG,KAAK,OAAO,EAAE;YAC1B,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC;SACjB;aAAM,IAAI,GAAG,KAAK,MAAM,EAAE;YACzB,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC;SAC5C;aAAM,IAAI,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,UAAU,EAAE;YACjD,IAAI,IAAI,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;SACjE;aAAM,IAAI,GAAG,KAAK,MAAM,EAAE;YACzB,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;SACvE;aAAM,IAAI,GAAG,KAAK,KAAK,EAAE;YACxB,IAAI;gBACF,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;oBAC9D,IAAI,CAAC,UAAU,CAAC,SAAS;oBACzB,CAAC,CAAC;SACL;QACD,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;;oHA1FU,sBAAsB;wGAAtB,sBAAsB,sDCdnC,oyFAsFA;4FDxEa,sBAAsB;kBALlC,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,WAAW,EAAE,2BAA2B;oBACxC,SAAS,EAAE,CAAC,6BAA6B,CAAC;iBAC3C","sourcesContent":["import { Component, OnInit } from '@angular/core';\n\nimport { SkyDatepickerCalendarInnerComponent } from './datepicker-calendar-inner.component';\n\nimport { SkyDatepickerDate } from './datepicker-date';\n\n/**\n * @internal\n */\n@Component({\n  selector: 'sky-yearpicker',\n  templateUrl: 'yearpicker.component.html',\n  styleUrls: ['./yearpicker.component.scss'],\n})\nexport class SkyYearPickerComponent implements OnInit {\n  public datepicker: SkyDatepickerCalendarInnerComponent;\n\n  public rows: Array<Array<SkyDatepickerDate>> = [];\n\n  public title: string;\n\n  public constructor(datepicker: SkyDatepickerCalendarInnerComponent) {\n    this.datepicker = datepicker;\n  }\n\n  public ngOnInit(): void {\n    this.datepicker.stepYear = { years: this.datepicker.yearRange };\n\n    this.datepicker.setRefreshViewHandler(() => {\n      this.refreshYearView();\n    }, 'year');\n\n    this.datepicker.setCompareHandler(this.compareYears, 'year');\n\n    this.datepicker.setKeydownHandler((key: string, event: KeyboardEvent) => {\n      this.keydownYears(key, event);\n    }, 'year');\n\n    this.datepicker.refreshView();\n  }\n\n  protected getStartingYear(year: number): number {\n    return (\n      Math.floor((year - 1) / this.datepicker.yearRange) *\n        this.datepicker.yearRange +\n      1\n    );\n  }\n\n  private compareYears(date1: Date, date2: Date): number {\n    return date1.getFullYear() - date2.getFullYear();\n  }\n\n  private refreshYearView() {\n    let years: Array<SkyDatepickerDate> = new Array(this.datepicker.yearRange);\n    let date: Date;\n    let start = this.getStartingYear(this.datepicker.activeDate.getFullYear());\n\n    for (let i = 0; i < this.datepicker.yearRange; i++) {\n      date = new Date(this.datepicker.activeDate);\n      date.setFullYear(start + i, 0, 1);\n\n      years[i] = this.datepicker.createDateObject(\n        date,\n        this.datepicker.formatYear,\n        false,\n        this.datepicker.datepickerId + '-' + i\n      );\n    }\n\n    this.title = [\n      years[0].label,\n      years[this.datepicker.yearRange - 1].label,\n    ].join(' - ');\n    this.rows = this.datepicker.createCalendarRows(\n      years,\n      this.datepicker.yearColLimit\n    );\n  }\n\n  private keydownYears(key: string, event: KeyboardEvent) {\n    let date = this.datepicker.activeDate.getFullYear();\n\n    /* istanbul ignore else */\n    /* sanity check */\n    if (key === 'left') {\n      date = date - 1;\n    } else if (key === 'up') {\n      date = date - this.datepicker.yearColLimit;\n    } else if (key === 'right') {\n      date = date + 1;\n    } else if (key === 'down') {\n      date = date + this.datepicker.yearColLimit;\n    } else if (key === 'pageup' || key === 'pagedown') {\n      date += (key === 'pageup' ? -1 : 1) * this.datepicker.yearRange;\n    } else if (key === 'home') {\n      date = this.getStartingYear(this.datepicker.activeDate.getFullYear());\n    } else if (key === 'end') {\n      date =\n        this.getStartingYear(this.datepicker.activeDate.getFullYear()) +\n        this.datepicker.yearRange -\n        1;\n    }\n    this.datepicker.activeDate.setFullYear(date);\n  }\n}\n","<table *ngIf=\"datepicker.datepickerMode === 'year'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n      <th\n        [attr.colspan]=\"\n          datepicker.yearColLimit - 2 <= 0 ? 1 : datepicker.yearColLimit - 2\n        \"\n      >\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          role=\"heading\"\n          type=\"button\"\n          class=\"\n            sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\n          \"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode\n          }\"\n          tabindex=\"-1\"\n        >\n          <strong>{{ title }}</strong>\n        </button>\n      </th>\n      <th class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td *ngFor=\"let date of row\" class=\"sky-datepicker-row\" role=\"gridcell\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{\n            'sky-datepicker-btn-selected': date.selected,\n            'sky-btn-disabled': date.disabled,\n            'sky-btn-active': datepicker.isActive(date)\n          }\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n        >\n          <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n            date.label\n          }}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n"]}

package/esm2015/lib/modules/shared/sky-datetime-resources.module.js

@@ -0,0 +1,131 @@
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-datetime' schematic.
+ * To update this file, simply rerun the command.
+ */
+import { NgModule } from '@angular/core';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, } from '@skyux/i18n';
+import * as i0 from "@angular/core";
+const RESOURCES = {
+    'EN-AU': {
+        skyux_date_range_picker_format_label_last_fiscal_year: {
+            message: 'Last financial year',
+        },
+        skyux_date_range_picker_format_label_this_fiscal_year: {
+            message: 'This financial year',
+        },
+        skyux_date_range_picker_format_label_next_fiscal_year: {
+            message: 'Next financial year',
+        },
+    },
+    'EN-GB': {
+        skyux_date_range_picker_format_label_last_fiscal_year: {
+            message: 'Last financial year',
+        },
+        skyux_date_range_picker_format_label_this_fiscal_year: {
+            message: 'This financial year',
+        },
+        skyux_date_range_picker_format_label_next_fiscal_year: {
+            message: 'Next financial year',
+        },
+    },
+    'EN-NZ': {
+        skyux_date_range_picker_format_label_last_fiscal_year: {
+            message: 'Last financial year',
+        },
+        skyux_date_range_picker_format_label_this_fiscal_year: {
+            message: 'This financial year',
+        },
+        skyux_date_range_picker_format_label_next_fiscal_year: {
+            message: 'Next financial year',
+        },
+    },
+    'EN-US': {
+        skyux_date_field_default_label: { message: 'Date' },
+        skyux_datepicker_trigger_button_label: { message: 'Select date' },
+        skyux_timepicker_button_label: { message: 'Choose time' },
+        skyux_timepicker_close: { message: 'Done' },
+        skyux_timepicker_input_default_label: { message: 'Time' },
+        skyux_date_range_picker_default_label: { message: 'Select a date range' },
+        skyux_date_range_picker_format_label_specific_range: {
+            message: 'Specific range',
+        },
+        skyux_date_range_picker_format_label_before: { message: 'Before' },
+        skyux_date_range_picker_format_label_after: { message: 'After' },
+        skyux_date_range_picker_format_label_any_time: { message: 'At any time' },
+        skyux_date_range_picker_format_label_yesterday: { message: 'Yesterday' },
+        skyux_date_range_picker_format_label_today: { message: 'Today' },
+        skyux_date_range_picker_format_label_tomorrow: { message: 'Tomorrow' },
+        skyux_date_range_picker_format_label_last_week: { message: 'Last week' },
+        skyux_date_range_picker_format_label_this_week: { message: 'This week' },
+        skyux_date_range_picker_format_label_next_week: { message: 'Next week' },
+        skyux_date_range_picker_format_label_last_month: { message: 'Last month' },
+        skyux_date_range_picker_format_label_this_month: { message: 'This month' },
+        skyux_date_range_picker_format_label_next_month: { message: 'Next month' },
+        skyux_date_range_picker_format_label_last_quarter: {
+            message: 'Last quarter',
+        },
+        skyux_date_range_picker_format_label_this_quarter: {
+            message: 'This quarter',
+        },
+        skyux_date_range_picker_format_label_next_quarter: {
+            message: 'Next quarter',
+        },
+        skyux_date_range_picker_format_label_last_calendar_year: {
+            message: 'Last calendar year',
+        },
+        skyux_date_range_picker_format_label_this_calendar_year: {
+            message: 'This calendar year',
+        },
+        skyux_date_range_picker_format_label_next_calendar_year: {
+            message: 'Next calendar year',
+        },
+        skyux_date_range_picker_format_label_last_fiscal_year: {
+            message: 'Last fiscal year',
+        },
+        skyux_date_range_picker_format_label_this_fiscal_year: {
+            message: 'This fiscal year',
+        },
+        skyux_date_range_picker_format_label_next_fiscal_year: {
+            message: 'Next fiscal year',
+        },
+        skyux_date_range_picker_start_date_label: { message: 'From date' },
+        skyux_date_range_picker_end_date_label: { message: 'To date' },
+        skyux_date_range_picker_before_date_label: { message: 'Before date' },
+        skyux_date_range_picker_after_date_label: { message: 'After date' },
+    },
+};
+export class SkyDatetimeResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+export class SkyDatetimeResourcesModule {
+}
+SkyDatetimeResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDatetimeResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] });
+SkyDatetimeResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatetimeResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyDatetimeResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyDatetimeResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+//# sourceMappingURL=sky-datetime-resources.module.js.map

package/esm2015/lib/modules/shared/sky-datetime-resources.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-datetime-resources.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/datetime/src/lib/modules/shared/sky-datetime-resources.module.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * NOTICE: DO NOT MODIFY THIS FILE!\n * The contents of this file were automatically generated by\n * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-datetime' schematic.\n * To update this file, simply rerun the command.\n */\n\nimport { NgModule } from '@angular/core';\nimport {\n  getLibStringForLocale,\n  SkyAppLocaleInfo,\n  SkyI18nModule,\n  SkyLibResources,\n  SkyLibResourcesProvider,\n  SKY_LIB_RESOURCES_PROVIDERS,\n} from '@skyux/i18n';\n\nconst RESOURCES: { [locale: string]: SkyLibResources } = {\n  'EN-AU': {\n    skyux_date_range_picker_format_label_last_fiscal_year: {\n      message: 'Last financial year',\n    },\n    skyux_date_range_picker_format_label_this_fiscal_year: {\n      message: 'This financial year',\n    },\n    skyux_date_range_picker_format_label_next_fiscal_year: {\n      message: 'Next financial year',\n    },\n  },\n  'EN-GB': {\n    skyux_date_range_picker_format_label_last_fiscal_year: {\n      message: 'Last financial year',\n    },\n    skyux_date_range_picker_format_label_this_fiscal_year: {\n      message: 'This financial year',\n    },\n    skyux_date_range_picker_format_label_next_fiscal_year: {\n      message: 'Next financial year',\n    },\n  },\n  'EN-NZ': {\n    skyux_date_range_picker_format_label_last_fiscal_year: {\n      message: 'Last financial year',\n    },\n    skyux_date_range_picker_format_label_this_fiscal_year: {\n      message: 'This financial year',\n    },\n    skyux_date_range_picker_format_label_next_fiscal_year: {\n      message: 'Next financial year',\n    },\n  },\n  'EN-US': {\n    skyux_date_field_default_label: { message: 'Date' },\n    skyux_datepicker_trigger_button_label: { message: 'Select date' },\n    skyux_timepicker_button_label: { message: 'Choose time' },\n    skyux_timepicker_close: { message: 'Done' },\n    skyux_timepicker_input_default_label: { message: 'Time' },\n    skyux_date_range_picker_default_label: { message: 'Select a date range' },\n    skyux_date_range_picker_format_label_specific_range: {\n      message: 'Specific range',\n    },\n    skyux_date_range_picker_format_label_before: { message: 'Before' },\n    skyux_date_range_picker_format_label_after: { message: 'After' },\n    skyux_date_range_picker_format_label_any_time: { message: 'At any time' },\n    skyux_date_range_picker_format_label_yesterday: { message: 'Yesterday' },\n    skyux_date_range_picker_format_label_today: { message: 'Today' },\n    skyux_date_range_picker_format_label_tomorrow: { message: 'Tomorrow' },\n    skyux_date_range_picker_format_label_last_week: { message: 'Last week' },\n    skyux_date_range_picker_format_label_this_week: { message: 'This week' },\n    skyux_date_range_picker_format_label_next_week: { message: 'Next week' },\n    skyux_date_range_picker_format_label_last_month: { message: 'Last month' },\n    skyux_date_range_picker_format_label_this_month: { message: 'This month' },\n    skyux_date_range_picker_format_label_next_month: { message: 'Next month' },\n    skyux_date_range_picker_format_label_last_quarter: {\n      message: 'Last quarter',\n    },\n    skyux_date_range_picker_format_label_this_quarter: {\n      message: 'This quarter',\n    },\n    skyux_date_range_picker_format_label_next_quarter: {\n      message: 'Next quarter',\n    },\n    skyux_date_range_picker_format_label_last_calendar_year: {\n      message: 'Last calendar year',\n    },\n    skyux_date_range_picker_format_label_this_calendar_year: {\n      message: 'This calendar year',\n    },\n    skyux_date_range_picker_format_label_next_calendar_year: {\n      message: 'Next calendar year',\n    },\n    skyux_date_range_picker_format_label_last_fiscal_year: {\n      message: 'Last fiscal year',\n    },\n    skyux_date_range_picker_format_label_this_fiscal_year: {\n      message: 'This fiscal year',\n    },\n    skyux_date_range_picker_format_label_next_fiscal_year: {\n      message: 'Next fiscal year',\n    },\n    skyux_date_range_picker_start_date_label: { message: 'From date' },\n    skyux_date_range_picker_end_date_label: { message: 'To date' },\n    skyux_date_range_picker_before_date_label: { message: 'Before date' },\n    skyux_date_range_picker_after_date_label: { message: 'After date' },\n  },\n};\n\nexport class SkyDatetimeResourcesProvider implements SkyLibResourcesProvider {\n  public getString(localeInfo: SkyAppLocaleInfo, name: string): string {\n    return getLibStringForLocale(RESOURCES, localeInfo.locale, name);\n  }\n}\n\n/**\n * Import into any component library module that needs to use resource strings.\n */\n@NgModule({\n  exports: [SkyI18nModule],\n  providers: [\n    {\n      provide: SKY_LIB_RESOURCES_PROVIDERS,\n      useClass: SkyDatetimeResourcesProvider,\n      multi: true,\n    },\n  ],\n})\nexport class SkyDatetimeResourcesModule {}\n"]}

package/esm2015/lib/modules/timepicker/timepicker.component.js

@@ -0,0 +1,367 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Optional, Output, TemplateRef, ViewChild, ViewEncapsulation, } from '@angular/core';
+import { SkyAffixAutoFitContext, SkyAffixService, SkyCoreAdapterService, SkyOverlayService, } from '@skyux/core';
+import { SkyInputBoxHostService } from '@skyux/forms';
+import { SkyThemeService } from '@skyux/theme';
+import { fromEvent, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import moment from 'moment';
+import * as i0 from "@angular/core";
+import * as i1 from "@skyux/core";
+import * as i2 from "@skyux/forms";
+import * as i3 from "@skyux/theme";
+import * as i4 from "@skyux/indicators";
+import * as i5 from "@angular/common";
+import * as i6 from "@skyux/i18n";
+let nextId = 0;
+/**
+ * Creates a SKY UX-themed replacement for the HTML `input` element with `type="time"`.
+ * The value that users select is driven through the `ngModel` attribute
+ * specified on the `input` element. You must wrap this component around an `input`
+ * with the `skyTimepickerInput` directive.
+ */
+export class SkyTimepickerComponent {
+    constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc) {
+        this.affixService = affixService;
+        this.changeDetector = changeDetector;
+        this.coreAdapter = coreAdapter;
+        this.overlayService = overlayService;
+        this.inputBoxHostService = inputBoxHostService;
+        /**
+         * Fires when the value in the timepicker input changes.
+         */
+        this.selectedTimeChanged = new EventEmitter();
+        this.is8601 = false;
+        this.timeFormat = 'hh';
+        this.ngUnsubscribe = new Subject();
+        const uniqueId = nextId++;
+        this.timepickerId = `sky-timepicker-${uniqueId}`;
+        this.triggerButtonId = `sky-timepicker-button-${uniqueId}`;
+        // Update icons when theme changes.
+        themeSvc === null || themeSvc === void 0 ? void 0 : themeSvc.settingsChange.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            this.changeDetector.markForCheck();
+        });
+    }
+    set disabled(value) {
+        this._disabled = value;
+        this.changeDetector.markForCheck();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set selectedHour(setHour) {
+        let hour;
+        let hourOffset = 0;
+        if (this.selectedMeridies === 'AM' && setHour === 12) {
+            hourOffset = -12;
+        }
+        if (this.selectedMeridies === 'PM' && setHour !== 12) {
+            hourOffset = 12;
+        }
+        if (this.is8601) {
+            hourOffset = 0;
+        }
+        hour = moment({ hour: setHour }).add(hourOffset, 'hours').hour();
+        this.activeTime = moment({
+            hour: hour,
+            minute: moment(this.activeTime).get('minute') + 0,
+        }).toDate();
+        this.selectedTimeChanged.emit(this.selectedTime);
+    }
+    get selectedHour() {
+        if (!this.is8601) {
+            /* istanbul ignore next */
+            return parseInt(moment(this.activeTime).format('h'), 0) || 1;
+        }
+        /* istanbul ignore else */
+        if (this.is8601) {
+            return moment(this.activeTime).hour() + 0;
+        }
+    }
+    set selectedMeridies(meridies) {
+        /* istanbul ignore else */
+        if (!this.is8601) {
+            if (meridies.trim() !== this.selectedMeridies) {
+                this.activeTime = moment(this.activeTime).add(12, 'hours').toDate();
+                this.selectedTimeChanged.emit(this.selectedTime);
+            }
+        }
+    }
+    get selectedMeridies() {
+        if (this.activeTime) {
+            return moment(this.activeTime).format('A');
+        }
+        return '';
+    }
+    set selectedMinute(minute) {
+        this.activeTime = moment({
+            hour: moment(this.activeTime).get('hour') + 0,
+            minute: minute,
+        }).toDate();
+        this.selectedTimeChanged.emit(this.selectedTime);
+    }
+    get selectedMinute() {
+        return moment(this.activeTime).minute() + 0;
+    }
+    set selectedTime(newTime) {
+        if (typeof newTime !== 'undefined') {
+            /* sanity check */
+            /* istanbul ignore else */
+            if (newTime.local !== 'Invalid date') {
+                this.activeTime = newTime.iso8601;
+                this.changeDetector.markForCheck();
+            }
+        }
+    }
+    get selectedTime() {
+        const time = {
+            hour: moment(this.activeTime).hour(),
+            minute: moment(this.activeTime).minute(),
+            meridie: moment(this.activeTime).format('A'),
+            timezone: parseInt(moment(this.activeTime).format('Z'), 10),
+            iso8601: this.activeTime,
+            local: moment(this.activeTime).format(this.localeFormat),
+            customFormat: typeof this.returnFormat !== 'undefined'
+                ? this.returnFormat
+                : this.localeFormat,
+        };
+        return time;
+    }
+    set timepickerRef(value) {
+        if (value) {
+            this._timepickerRef = value;
+            // Wait for the timepicker component to render before guaging dimensions.
+            setTimeout(() => {
+                this.destroyAffixer();
+                this.createAffixer();
+                setTimeout(() => {
+                    this.coreAdapter.getFocusableChildrenAndApplyFocus(this.timepickerRef, '.sky-timepicker-content', false);
+                    this.isVisible = true;
+                    this.changeDetector.markForCheck();
+                });
+            });
+        }
+    }
+    get timepickerRef() {
+        return this._timepickerRef;
+    }
+    ngOnInit() {
+        this.setFormat(this.timeFormat);
+        this.addKeydownListner();
+        if (this.inputBoxHostService) {
+            this.inputBoxHostService.populate({
+                inputTemplate: this.inputTemplateRef,
+                buttonsTemplate: this.triggerButtonTemplateRef,
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.removePickerEventListeners();
+        this.destroyAffixer();
+        this.destroyOverlay();
+    }
+    setFormat(format) {
+        let h = 12;
+        let m = 12;
+        let minuteMultiplier = 5;
+        let localeFormat = 'h:mm A';
+        if (format === 'hh') {
+            h = 12;
+            m = 12;
+            minuteMultiplier = 5;
+            localeFormat = 'h:mm A';
+            this.is8601 = false;
+        }
+        if (format === 'HH') {
+            h = 24;
+            m = 4;
+            minuteMultiplier = 15;
+            localeFormat = 'HH:mm';
+            this.is8601 = true;
+        }
+        let data;
+        data = {
+            hours: Array.apply(undefined, Array(h)).map(function (x, i) {
+                if (format === 'hh') {
+                    return ++i;
+                }
+                /* istanbul ignore else */
+                if (format === 'HH') {
+                    return i;
+                }
+                /* istanbul ignore next */
+                /* sanity check */
+                return 0;
+            }),
+            minutes: Array.apply(undefined, Array(m)).map(function (x, i) {
+                return i * minuteMultiplier;
+            }),
+            localeFormat: localeFormat,
+            minuteMultiplier: minuteMultiplier,
+        };
+        this.hours = data.hours;
+        this.minutes = data.minutes;
+        this.localeFormat = data.localeFormat;
+        this.minuteMultiplier = data.minuteMultiplier;
+    }
+    onCloseButtonCick() {
+        this.closePicker();
+    }
+    setTime(event) {
+        /* istanbul ignore else */
+        if (typeof event !== 'undefined') {
+            /* istanbul ignore else */
+            if (event.type === 'click') {
+                event.stopPropagation();
+                if (event.target.name === 'hour') {
+                    this.selectedHour = parseInt(event.target.innerHTML, 0);
+                }
+                if (event.target.name === 'minute') {
+                    this.selectedMinute = parseInt(event.target.innerHTML, 0);
+                }
+                if (event.target.name === 'meridie') {
+                    this.selectedMeridies = event.target.innerHTML;
+                }
+            }
+        }
+    }
+    onTriggerButtonClick() {
+        this.openPicker();
+    }
+    closePicker() {
+        this.destroyAffixer();
+        this.destroyOverlay();
+        this.removePickerEventListeners();
+        this.triggerButtonRef.nativeElement.focus();
+        this.isOpen = false;
+    }
+    openPicker() {
+        this.isVisible = false;
+        this.changeDetector.markForCheck();
+        this.removePickerEventListeners();
+        this.timepickerUnsubscribe = new Subject();
+        this.destroyOverlay();
+        this.createOverlay();
+        this.isOpen = true;
+        this.changeDetector.markForCheck();
+    }
+    createAffixer() {
+        const affixer = this.affixService.createAffixer(this.timepickerRef);
+        // Hide timepicker when trigger button is scrolled off screen.
+        affixer.placementChange
+            .pipe(takeUntil(this.timepickerUnsubscribe))
+            .subscribe((change) => {
+            this.isVisible = change.placement !== null;
+            this.changeDetector.markForCheck();
+        });
+        affixer.affixTo(this.triggerButtonRef.nativeElement, {
+            autoFitContext: SkyAffixAutoFitContext.Viewport,
+            enableAutoFit: true,
+            horizontalAlignment: 'right',
+            isSticky: true,
+            placement: 'below',
+        });
+        this.affixer = affixer;
+    }
+    destroyAffixer() {
+        /*istanbul ignore else*/
+        if (this.affixer) {
+            this.affixer.destroy();
+            this.affixer = undefined;
+        }
+    }
+    createOverlay() {
+        const overlay = this.overlayService.create({
+            enableClose: false,
+            enablePointerEvents: false,
+        });
+        overlay.backdropClick
+            .pipe(takeUntil(this.timepickerUnsubscribe))
+            .subscribe(() => {
+            /* istanbul ignore else */
+            if (this.isOpen) {
+                this.closePicker();
+            }
+        });
+        this.addKeydownListner();
+        overlay.attachTemplate(this.timepickerTemplateRef);
+        this.overlay = overlay;
+    }
+    destroyOverlay() {
+        /*istanbul ignore else*/
+        if (this.overlay) {
+            this.overlayService.close(this.overlay);
+            this.overlay = undefined;
+        }
+    }
+    addKeydownListner() {
+        this.overlayKeydownListner = fromEvent(window.document, 'keydown')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((event) => {
+            var _a;
+            const key = (_a = event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            /* istanbul ignore else */
+            if (key === 'escape' && this.isOpen) {
+                this.closePicker();
+            }
+        });
+    }
+    removePickerEventListeners() {
+        var _a;
+        /* istanbul ignore else */
+        if (this.timepickerUnsubscribe) {
+            this.timepickerUnsubscribe.next();
+            this.timepickerUnsubscribe.complete();
+            this.timepickerUnsubscribe = undefined;
+        }
+        /* istanbul ignore next */
+        (_a = this.overlayKeydownListner) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+}
+SkyTimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2.SkyInputBoxHostService, optional: true }, { token: i3.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-timepicker\">\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        icon=\"clock\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n    #timepickerRef\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          <li *ngFor=\"let hour of hours\">\n            <button\n              name=\"hour\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ hour }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          <li *ngFor=\"let minute of minutes\">\n            <button\n              name=\"minute\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n        <ol>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n              (click)=\"setTime($event)\"\n            >\n              AM\n            </button>\n          </li>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n              (click)=\"setTime($event)\"\n            >\n              PM\n            </button>\n          </li>\n        </ol>\n      </section>\n    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonCick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;grid-column-gap:1px;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern{display:none}.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"], components: [{ type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "skyLibResources": i6.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-timepicker',
+                    templateUrl: './timepicker.component.html',
+                    styleUrls: ['./timepicker.component.scss'],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2.SkyInputBoxHostService, decorators: [{
+                    type: Optional
+                }] }, { type: i3.SkyThemeService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { selectedTimeChanged: [{
+                type: Output
+            }], timepickerRef: [{
+                type: ViewChild,
+                args: ['timepickerRef', {
+                        read: ElementRef,
+                    }]
+            }], timepickerTemplateRef: [{
+                type: ViewChild,
+                args: ['timepickerTemplateRef', {
+                        read: TemplateRef,
+                    }]
+            }], triggerButtonRef: [{
+                type: ViewChild,
+                args: ['triggerButtonRef', {
+                        read: ElementRef,
+                    }]
+            }], inputTemplateRef: [{
+                type: ViewChild,
+                args: ['inputTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }], triggerButtonTemplateRef: [{
+                type: ViewChild,
+                args: ['triggerButtonTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+//# sourceMappingURL=timepicker.component.js.map