@ui5/webcomponents 0.0.0-389bdbabc → 0.0.0-3e3654870

package/dist/TimeSelection.js

@@ -0,0 +1,376 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var TimeSelection_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling
+import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
+import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
+import { isLeft, isRight, } from "@ui5/webcomponents-base/dist/Keys.js";
+import "@ui5/webcomponents-icons/dist/time-entry-request.js";
+import timeSelectionTemplate from "./generated/templates/TimeSelectionTemplate.lit.js";
+import WheelSlider from "./WheelSlider.js";
+import { getHours, getMinutes, getSeconds, getHoursConfigByFormat, getTimeControlsByFormat, } from "./timepicker-utils/TimeSlider.js";
+import { TIMEPICKER_HOURS_LABEL, TIMEPICKER_MINUTES_LABEL, TIMEPICKER_SECONDS_LABEL, } from "./generated/i18n/i18n-defaults.js";
+// Styles
+import timeSelectionCss from "./generated/themes/TimeSelection.css.js";
+/**
+ * @class
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.TimeSelection
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-time-selection
+ * @private
+ * @since 1.0.0-rc.12
+ */
+let TimeSelection = TimeSelection_1 = class TimeSelection extends UI5Element {
+    static async onDefine() {
+        [TimeSelection_1.i18nBundle] = await Promise.all([
+            getI18nBundle("@ui5/webcomponents"),
+            fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
+        ]);
+    }
+    constructor() {
+        super();
+    }
+    get _hoursConfiguration() {
+        // @ts-ignore aFormatArray is a private API of DateFormat
+        const formatArray = this.getFormat().aFormatArray;
+        const hourFormat = formatArray.find(item => item.type.startsWith("hour")); // try to find an entry for the hours
+        return getHoursConfigByFormat(hourFormat ? hourFormat.type : "hour0_23");
+    }
+    get _neededSliders() {
+        // @ts-ignore aFormatArray is a private API of DateFormat
+        const formatArray = this.getFormat().aFormatArray;
+        return getTimeControlsByFormat(formatArray, this._hoursConfiguration);
+    }
+    get _hasHoursSlider() {
+        return this._neededSliders[0] && !this.hideHours;
+    }
+    get _hasMinutesSlider() {
+        return this._neededSliders[1] && !this.hideMinutes;
+    }
+    get _hasSecondsSlider() {
+        return this._neededSliders[2] && !this.hideSeconds;
+    }
+    get _hasPeriodsSlider() {
+        return this._neededSliders[3];
+    }
+    get secondsArray() {
+        return getSeconds(this.maxSeconds ? this.maxSeconds + 1 : undefined, this.secondsStep);
+    }
+    get minutesArray() {
+        return getMinutes(this.maxMinutes ? this.maxMinutes + 1 : undefined, this.minutesStep);
+    }
+    get hoursArray() {
+        return getHours(this._hoursConfiguration, this.maxHours ? this.maxHours + 1 : undefined);
+    }
+    get periodsArray() {
+        // @ts-ignore aDayPeriodsAbbrev is a private API of DateFormat
+        const dayPeriodsAbbrev = this.getFormat().aDayPeriodsAbbrev;
+        return dayPeriodsAbbrev.map((x) => x.toUpperCase());
+    }
+    get _hoursSliderFocused() {
+        return this._currentSlider === "hours";
+    }
+    get _minutesSliderFocused() {
+        return this._currentSlider === "minutes";
+    }
+    get _secondsSliderFocused() {
+        return this._currentSlider === "seconds";
+    }
+    get _periodSliderFocused() {
+        return this._currentSlider === "periods";
+    }
+    get _hours() {
+        let hours;
+        const dateValue = this.validDateValue;
+        if (this._hoursConfiguration.isTwelveHoursFormat && dateValue.getHours() > this._hoursConfiguration.maxHour) {
+            hours = dateValue.getHours() - 12;
+        }
+        else if (this._hoursConfiguration.isTwelveHoursFormat && dateValue.getHours() < this._hoursConfiguration.minHour) {
+            hours = dateValue.getHours() + 12;
+        }
+        else {
+            hours = dateValue.getHours();
+        }
+        if (hours.toString().length === 1) {
+            hours = `0${hours}`;
+        }
+        return hours.toString();
+    }
+    get _minutes() {
+        const minutes = this.validDateValue.getMinutes().toString();
+        return minutes.length === 1 ? `0${minutes}` : minutes;
+    }
+    get _seconds() {
+        const seconds = this.validDateValue.getSeconds().toString();
+        return seconds.length === 1 ? `0${seconds}` : seconds;
+    }
+    get _period() {
+        if (!this._hoursConfiguration.isTwelveHoursFormat) {
+            return undefined;
+        }
+        let period;
+        const dateValue = this.validDateValue;
+        if (this._hoursConfiguration.minHour === 1) {
+            period = dateValue.getHours() >= this._hoursConfiguration.maxHour ? this.periodsArray[1] : this.periodsArray[0];
+        }
+        else {
+            period = (dateValue.getHours() > this._hoursConfiguration.maxHour || dateValue.getHours() === this._hoursConfiguration.minHour) ? this.periodsArray[1] : this.periodsArray[0];
+        }
+        return period;
+    }
+    setValue(date) {
+        const value = this.formatValue(date);
+        if (this.isValid(value)) {
+            this.value = this.normalizeValue(value);
+            this.fireEvent("change", { value: this.value, valid: true });
+        }
+    }
+    onHoursChange(e) {
+        let hours = parseInt(e.detail.value);
+        const isTwelveHoursFormat = this._hoursConfiguration.isTwelveHoursFormat;
+        if (isTwelveHoursFormat) {
+            if (this._period === this.periodsArray[0]) { // AM
+                hours = hours === 12 ? 0 : hours;
+            }
+            if (this._period === this.periodsArray[1]) { // PM
+                hours = hours === 12 ? hours : hours + 12;
+            }
+        }
+        const date = this.validDateValue;
+        date.setHours(hours);
+        this.setValue(date);
+    }
+    onMinutesChange(e) {
+        const minutes = parseInt(e.detail.value);
+        const date = this.validDateValue;
+        date.setMinutes(minutes);
+        this.setValue(date);
+    }
+    onSecondsChange(e) {
+        const seconds = parseInt(e.detail.value);
+        const date = this.validDateValue;
+        date.setSeconds(seconds);
+        this.setValue(date);
+    }
+    onPeriodChange(e) {
+        const period = e.detail.value;
+        const date = this.validDateValue;
+        if (period === this.periodsArray[0] && date.getHours() >= 12) {
+            date.setHours(date.getHours() - 12);
+        }
+        if (period === this.periodsArray[1] && date.getHours() < 12) {
+            date.setHours(date.getHours() + 12);
+        }
+        this.setValue(date);
+    }
+    isValid(value) {
+        return value === "" || this.getFormat().parse(value);
+    }
+    normalizeValue(value) {
+        if (value === "") {
+            return value;
+        }
+        return this.getFormat().format(this.getFormat().parse(value));
+    }
+    get _formatPattern() {
+        const pattern = this.formatPattern;
+        const hasHours = !!pattern.match(/H/i);
+        const fallback = !pattern || !hasHours;
+        const localeData = getCachedLocaleDataInstance(getLocale());
+        return fallback ? localeData.getCombinedDateTimePattern("medium", "medium", undefined) : pattern;
+    }
+    get _isPattern() {
+        return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
+    }
+    /**
+     * Event handler for the "click" and "focusin" events of the sliders
+     * @param event
+     */
+    selectSlider(e) {
+        const target = e.target;
+        this._setCurrentSlider(target.closest("[ui5-wheelslider]").getAttribute("data-sap-slider"));
+    }
+    _setCurrentSlider(slider) {
+        if (this._currentSlider === slider) {
+            return;
+        }
+        this._currentSlider = slider;
+        this.fireEvent("slider-change", { slider });
+    }
+    get _currentSliderDOM() {
+        return this.shadowRoot.querySelector(`[data-sap-slider="${this._currentSlider}"]`);
+    }
+    get _activeSliders() {
+        return [
+            this._hasHoursSlider ? "hours" : "",
+            this._hasMinutesSlider ? "minutes" : "",
+            this._hasSecondsSlider ? "seconds" : "",
+            this._hasPeriodsSlider ? "periods" : "",
+        ].filter((x) => !!x);
+    }
+    _onfocusin(e) {
+        if (!this._currentSlider) {
+            this._setCurrentSlider(this._activeSliders[0]);
+        }
+        if (e.target === e.currentTarget) {
+            this._currentSliderDOM.focus();
+        }
+    }
+    _onfocusout(e) {
+        if (!this.shadowRoot.contains(e.relatedTarget)) {
+            this._setCurrentSlider("");
+        }
+    }
+    _onkeydown(e) {
+        if (!(isLeft(e) || isRight(e))) {
+            return;
+        }
+        e.preventDefault();
+        const activeSliders = this._activeSliders;
+        const target = e.target;
+        const activeSlider = target.closest("[ui5-wheelslider]").getAttribute("data-sap-slider");
+        let index = activeSliders.indexOf(activeSlider);
+        if (isLeft(e)) {
+            index = index === 0 ? activeSliders.length - 1 : index - 1;
+        }
+        else if (isRight(e)) {
+            index = index === activeSliders.length - 1 ? 0 : index + 1;
+        }
+        this._setCurrentSlider(activeSliders[index]);
+        this._currentSliderDOM.focus();
+    }
+    _handleWheel(e) {
+        e.preventDefault();
+    }
+    getFormat() {
+        let dateFormat;
+        if (this._isPattern) {
+            dateFormat = DateFormat.getDateInstance({
+                calendarType: this._calendarType,
+                pattern: this._formatPattern,
+            });
+        }
+        else {
+            dateFormat = DateFormat.getDateInstance({
+                calendarType: this._calendarType,
+                style: this._formatPattern,
+            });
+        }
+        return dateFormat;
+    }
+    formatValue(date) {
+        return this.getFormat().format(date);
+    }
+    get dateValue() {
+        return this.value ? this.getFormat().parse(this.value) : new Date();
+    }
+    get validDateValue() {
+        return this.value !== undefined && this.isValid(this.value) ? this.dateValue : new Date();
+    }
+    get hoursSliderTitle() {
+        return TimeSelection_1.i18nBundle.getText(TIMEPICKER_HOURS_LABEL);
+    }
+    get minutesSliderTitle() {
+        return TimeSelection_1.i18nBundle.getText(TIMEPICKER_MINUTES_LABEL);
+    }
+    get secondsSliderTitle() {
+        return TimeSelection_1.i18nBundle.getText(TIMEPICKER_SECONDS_LABEL);
+    }
+    get periodSliderTitle() {
+        return "AM/PM";
+    }
+    get classes() {
+        return {
+            root: {
+                "ui5-time-selection-root": true,
+                "ui5-phone": isPhone(),
+            },
+        };
+    }
+};
+__decorate([
+    property({ defaultValue: undefined })
+], TimeSelection.prototype, "value", void 0);
+__decorate([
+    property()
+], TimeSelection.prototype, "formatPattern", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimeSelection.prototype, "hideHours", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimeSelection.prototype, "hideMinutes", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimeSelection.prototype, "hideSeconds", void 0);
+__decorate([
+    property({ validator: Integer })
+], TimeSelection.prototype, "maxHours", void 0);
+__decorate([
+    property({ validator: Integer })
+], TimeSelection.prototype, "maxMinutes", void 0);
+__decorate([
+    property({ validator: Integer })
+], TimeSelection.prototype, "maxSeconds", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 1 })
+], TimeSelection.prototype, "secondsStep", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 1 })
+], TimeSelection.prototype, "minutesStep", void 0);
+__decorate([
+    property({ defaultValue: "hours" })
+], TimeSelection.prototype, "_currentSlider", void 0);
+__decorate([
+    property({ type: CalendarType })
+], TimeSelection.prototype, "_calendarType", void 0);
+TimeSelection = TimeSelection_1 = __decorate([
+    customElement({
+        tag: "ui5-time-selection",
+        languageAware: true,
+        renderer: litRender,
+        styles: timeSelectionCss,
+        template: timeSelectionTemplate,
+        dependencies: [WheelSlider],
+    })
+    /**
+     * Fired when the value changes due to user interaction with the sliders
+     */
+    ,
+    event("change", {
+        detail: {
+            value: { type: String },
+            valid: { type: Boolean },
+        },
+    })
+    /**
+     * Fired when the expanded/collapsed slider changes (a new slider is expanded or the expanded slider is collapsed)
+     */
+    ,
+    event("sliderChange", {
+        detail: {
+            slider: { type: String },
+        },
+    })
+], TimeSelection);
+TimeSelection.define();
+export default TimeSelection;
+//# sourceMappingURL=TimeSelection.js.map

package/dist/TimeSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSelection.js","sourceRoot":"","sources":["../src/TimeSelection.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport getLocale from \"@ui5/webcomponents-base/dist/locale/getLocale.js\";\nimport DateFormat from \"@ui5/webcomponents-localization/dist/DateFormat.js\";\nimport getCachedLocaleDataInstance from \"@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js\";\nimport \"@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js\"; // default calendar for bundling\nimport CalendarType from \"@ui5/webcomponents-base/dist/types/CalendarType.js\";\nimport { fetchCldr } from \"@ui5/webcomponents-base/dist/asset-registries/LocaleData.js\";\nimport {\n\tisLeft,\n\tisRight,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport \"@ui5/webcomponents-icons/dist/time-entry-request.js\";\nimport timeSelectionTemplate from \"./generated/templates/TimeSelectionTemplate.lit.js\";\nimport WheelSlider from \"./WheelSlider.js\";\nimport {\n\tgetHours,\n\tgetMinutes,\n\tgetSeconds,\n\tgetHoursConfigByFormat,\n\tgetTimeControlsByFormat,\n} from \"./timepicker-utils/TimeSlider.js\";\n\nimport {\n\tTIMEPICKER_HOURS_LABEL,\n\tTIMEPICKER_MINUTES_LABEL,\n\tTIMEPICKER_SECONDS_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport timeSelectionCss from \"./generated/themes/TimeSelection.css.js\";\nimport type { WheelSliderSelectEventDetail } from \"./WheelSlider.js\";\nimport type { HourType } from \"./timepicker-utils/TimeSlider.js\";\n\ntype TimeSelectionChangeEventDetail = {\n\tvalue: string | undefined,\n\tvalid: boolean,\n}\n\ntype TimeSelectionSliderChangeEventDetail = {\n\tslider: string,\n}\n\n/**\n * @class\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.TimeSelection\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-time-selection\n * @private\n * @since 1.0.0-rc.12\n */\n@customElement({\n\ttag: \"ui5-time-selection\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\tstyles: timeSelectionCss,\n\ttemplate: timeSelectionTemplate,\n\tdependencies: [WheelSlider],\n})\n\n/**\n * Fired when the value changes due to user interaction with the sliders\n */\n@event(\"change\", {\n\tdetail: {\n\t\tvalue: { type: String },\n\t\tvalid: { type: Boolean },\n\t},\n})\n\n/**\n * Fired when the expanded/collapsed slider changes (a new slider is expanded or the expanded slider is collapsed)\n */\n@event(\"sliderChange\", {\n\tdetail: {\n\t\tslider: { type: String },\n\t},\n})\nclass TimeSelection extends UI5Element {\n\t/**\n\t * Defines a formatted time value.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.TimeSelection.prototype.value\n\t * @defaultvalue undefined\n\t * @public\n\t */\n\t@property({ defaultValue: undefined })\n\tvalue?: string;\n\n\t/**\n\t * Determines the format, displayed in the input field.\n\t *\n\t * Example:\n\t * HH:mm:ss -> 11:42:35\n\t * hh:mm:ss a -> 2:23:15 PM\n\t * mm:ss -> 12:04 (only minutes and seconds)\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.TimeSelection.prototype.formatPattern\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property()\n\tformatPattern!: string;\n\n\t/**\n\t * Hides the hours slider regardless of formatPattern\n\t * This property is only needed for the duration picker use case which requires non-standard slider combinations\n\t * @public\n\t * @name sap.ui.webc.main.TimeSelection.prototype.hideHours\n\t * @type {boolean}\n\t */\n\t@property({ type: Boolean })\n\thideHours!: boolean;\n\n\t/**\n\t * Hides the minutes slider regardless of formatPattern\n\t * This property is only needed for the duration picker use case which requires non-standard slider combinations\n\t * @public\n\t * @name sap.ui.webc.main.TimeSelection.prototype.hideMinutes\n\t * @type {boolean}\n\t */\n\t@property({ type: Boolean })\n\thideMinutes!: boolean;\n\n\t/**\n\t * Hides the seconds slider regardless of formatPattern\n\t * This property is only needed for the duration picker use case which requires non-standard slider combinations\n\t * @public\n\t * @name sap.ui.webc.main.TimeSelection.prototype.hideSeconds\n\t * @type {boolean}\n\t */\n\t@property({ type: Boolean })\n\thideSeconds!: boolean;\n\n\t/**\n\t * The maximum number of hours to be displayed for the hours slider (only needed for the duration picker use case)\n\t * @public\n\t * @name sap.ui.webc.main.TimeSelection.prototype.maxHours\n\t * @type {Integer}\n\t */\n\t@property({ validator: Integer })\n\tmaxHours?: number;\n\n\t/**\n\t * The maximum number of minutes to be displayed for the minutes slider (only needed for the duration picker use case)\n\t * @public\n\t * @name sap.ui.webc.main.TimeSelection.prototype.maxMinutes\n\t * @type {Integer}\n\t */\n\t@property({ validator: Integer })\n\tmaxMinutes?: number;\n\n\t/**\n\t * The maximum number of seconds to be displayed for the seconds slider (only needed for the duration picker use case)\n\t * @public\n\t * @name sap.ui.webc.main.TimeSelection.prototype.maxSeconds\n\t * @type {Integer}\n\t */\n\t@property({ validator: Integer })\n\tmaxSeconds?: number;\n\n\t@property({ validator: Integer, defaultValue: 1 })\n\tsecondsStep!: number;\n\n\t@property({ validator: Integer, defaultValue: 1 })\n\tminutesStep!: number;\n\n\t@property({ defaultValue: \"hours\" })\n\t_currentSlider!: string;\n\n\t@property({ type: CalendarType })\n\t_calendarType!: CalendarType;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\t[TimeSelection.i18nBundle] = await Promise.all([\n\t\t\tgetI18nBundle(\"@ui5/webcomponents\"),\n\t\t\tfetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),\n\t\t]);\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tget _hoursConfiguration() {\n\t\t// @ts-ignore aFormatArray is a private API of DateFormat\n\t\tconst formatArray = this.getFormat().aFormatArray as Array<{ type: HourType }>;\n\t\tconst hourFormat = formatArray.find(item => item.type.startsWith(\"hour\")); // try to find an entry for the hours\n\t\treturn getHoursConfigByFormat(hourFormat ? hourFormat.type : \"hour0_23\");\n\t}\n\n\tget _neededSliders() {\n\t\t// @ts-ignore aFormatArray is a private API of DateFormat\n\t\tconst formatArray = this.getFormat().aFormatArray as Array<{ type: HourType }>;\n\t\treturn getTimeControlsByFormat(formatArray, this._hoursConfiguration);\n\t}\n\n\tget _hasHoursSlider() {\n\t\treturn this._neededSliders[0] && !this.hideHours;\n\t}\n\n\tget _hasMinutesSlider() {\n\t\treturn this._neededSliders[1] && !this.hideMinutes;\n\t}\n\n\tget _hasSecondsSlider() {\n\t\treturn this._neededSliders[2] && !this.hideSeconds;\n\t}\n\n\tget _hasPeriodsSlider() {\n\t\treturn this._neededSliders[3];\n\t}\n\n\tget secondsArray() {\n\t\treturn getSeconds(this.maxSeconds ? this.maxSeconds + 1 : undefined, this.secondsStep);\n\t}\n\n\tget minutesArray() {\n\t\treturn getMinutes(this.maxMinutes ? this.maxMinutes + 1 : undefined, this.minutesStep);\n\t}\n\n\tget hoursArray() {\n\t\treturn getHours(this._hoursConfiguration, this.maxHours ? this.maxHours + 1 : undefined);\n\t}\n\n\tget periodsArray() {\n\t\t// @ts-ignore aDayPeriodsAbbrev is a private API of DateFormat\n\t\tconst dayPeriodsAbbrev = this.getFormat().aDayPeriodsAbbrev as Array<string>;\n\t\treturn dayPeriodsAbbrev.map((x: string) => x.toUpperCase());\n\t}\n\n\tget _hoursSliderFocused() {\n\t\treturn this._currentSlider === \"hours\";\n\t}\n\n\tget _minutesSliderFocused() {\n\t\treturn this._currentSlider === \"minutes\";\n\t}\n\n\tget _secondsSliderFocused() {\n\t\treturn this._currentSlider === \"seconds\";\n\t}\n\n\tget _periodSliderFocused() {\n\t\treturn this._currentSlider === \"periods\";\n\t}\n\n\tget _hours() {\n\t\tlet hours;\n\t\tconst dateValue = this.validDateValue;\n\t\tif (this._hoursConfiguration.isTwelveHoursFormat && dateValue.getHours() > this._hoursConfiguration.maxHour) {\n\t\t\thours = dateValue.getHours() - 12;\n\t\t} else if (this._hoursConfiguration.isTwelveHoursFormat && dateValue.getHours() < this._hoursConfiguration.minHour) {\n\t\t\thours = dateValue.getHours() + 12;\n\t\t} else {\n\t\t\thours = dateValue.getHours();\n\t\t}\n\t\tif (hours.toString().length === 1) {\n\t\t\thours = `0${hours}`;\n\t\t}\n\t\treturn hours.toString();\n\t}\n\n\tget _minutes() {\n\t\tconst minutes = this.validDateValue.getMinutes().toString();\n\t\treturn minutes.length === 1 ? `0${minutes}` : minutes;\n\t}\n\n\tget _seconds() {\n\t\tconst seconds = this.validDateValue.getSeconds().toString();\n\t\treturn seconds.length === 1 ? `0${seconds}` : seconds;\n\t}\n\n\tget _period() {\n\t\tif (!this._hoursConfiguration.isTwelveHoursFormat) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tlet period;\n\t\tconst dateValue = this.validDateValue;\n\t\tif (this._hoursConfiguration.minHour === 1) {\n\t\t\tperiod = dateValue.getHours() >= this._hoursConfiguration.maxHour ? this.periodsArray[1] : this.periodsArray[0];\n\t\t} else {\n\t\t\tperiod = (dateValue.getHours() > this._hoursConfiguration.maxHour || dateValue.getHours() === this._hoursConfiguration.minHour) ? this.periodsArray[1] : this.periodsArray[0];\n\t\t}\n\t\treturn period;\n\t}\n\n\tsetValue(date: Date) {\n\t\tconst value = this.formatValue(date);\n\t\tif (this.isValid(value)) {\n\t\t\tthis.value = this.normalizeValue(value);\n\t\t\tthis.fireEvent<TimeSelectionChangeEventDetail>(\"change\", { value: this.value, valid: true });\n\t\t}\n\t}\n\n\tonHoursChange(e: CustomEvent<WheelSliderSelectEventDetail>) {\n\t\tlet hours = parseInt(e.detail.value);\n\t\tconst isTwelveHoursFormat = this._hoursConfiguration.isTwelveHoursFormat;\n\n\t\tif (isTwelveHoursFormat) {\n\t\t\tif (this._period === this.periodsArray[0]) { // AM\n\t\t\t\thours = hours === 12 ? 0 : hours;\n\t\t\t}\n\n\t\t\tif (this._period === this.periodsArray[1]) { // PM\n\t\t\t\thours = hours === 12 ? hours : hours + 12;\n\t\t\t}\n\t\t}\n\n\t\tconst date = this.validDateValue;\n\t\tdate.setHours(hours);\n\t\tthis.setValue(date);\n\t}\n\n\tonMinutesChange(e: CustomEvent<WheelSliderSelectEventDetail>) {\n\t\tconst minutes = parseInt(e.detail.value);\n\t\tconst date = this.validDateValue;\n\t\tdate.setMinutes(minutes);\n\t\tthis.setValue(date);\n\t}\n\n\tonSecondsChange(e: CustomEvent<WheelSliderSelectEventDetail>) {\n\t\tconst seconds = parseInt(e.detail.value);\n\t\tconst date = this.validDateValue;\n\t\tdate.setSeconds(seconds);\n\t\tthis.setValue(date);\n\t}\n\n\tonPeriodChange(e: CustomEvent<WheelSliderSelectEventDetail>) {\n\t\tconst period = e.detail.value;\n\t\tconst date = this.validDateValue;\n\t\tif (period === this.periodsArray[0] && date.getHours() >= 12) {\n\t\t\tdate.setHours(date.getHours() - 12);\n\t\t} if (period === this.periodsArray[1] && date.getHours() < 12) {\n\t\t\tdate.setHours(date.getHours() + 12);\n\t\t}\n\t\tthis.setValue(date);\n\t}\n\n\tisValid(value: string) {\n\t\treturn value === \"\" || this.getFormat().parse(value);\n\t}\n\n\tnormalizeValue(value: string) {\n\t\tif (value === \"\") {\n\t\t\treturn value;\n\t\t}\n\n\t\treturn this.getFormat().format(this.getFormat().parse(value));\n\t}\n\n\tget _formatPattern() {\n\t\tconst pattern = this.formatPattern;\n\t\tconst hasHours = !!pattern.match(/H/i);\n\t\tconst fallback = !pattern || !hasHours;\n\n\t\tconst localeData = getCachedLocaleDataInstance(getLocale());\n\t\treturn fallback ? localeData.getCombinedDateTimePattern(\"medium\", \"medium\", undefined) : pattern;\n\t}\n\n\tget _isPattern() {\n\t\treturn this._formatPattern !== \"medium\" && this._formatPattern !== \"short\" && this._formatPattern !== \"long\";\n\t}\n\n\t/**\n\t * Event handler for the \"click\" and \"focusin\" events of the sliders\n\t * @param event\n\t */\n\tselectSlider(e: MouseEvent | FocusEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\tthis._setCurrentSlider(target.closest<WheelSlider>(\"[ui5-wheelslider]\")!.getAttribute(\"data-sap-slider\")!);\n\t}\n\n\t_setCurrentSlider(slider: string) {\n\t\tif (this._currentSlider === slider) {\n\t\t\treturn;\n\t\t}\n\t\tthis._currentSlider = slider;\n\t\tthis.fireEvent<TimeSelectionSliderChangeEventDetail>(\"slider-change\", { slider });\n\t}\n\n\tget _currentSliderDOM() {\n\t\treturn this.shadowRoot!.querySelector<WheelSlider>(`[data-sap-slider=\"${this._currentSlider}\"]`)!;\n\t}\n\n\tget _activeSliders() {\n\t\treturn [\n\t\t\tthis._hasHoursSlider ? \"hours\" : \"\",\n\t\t\tthis._hasMinutesSlider ? \"minutes\" : \"\",\n\t\t\tthis._hasSecondsSlider ? \"seconds\" : \"\",\n\t\t\tthis._hasPeriodsSlider ? \"periods\" : \"\",\n\t\t].filter((x: string) => !!x);\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tif (!this._currentSlider) {\n\t\t\tthis._setCurrentSlider(this._activeSliders[0]);\n\t\t}\n\n\t\tif (e.target === e.currentTarget) {\n\t\t\tthis._currentSliderDOM.focus();\n\t\t}\n\t}\n\n\t_onfocusout(e: FocusEvent) {\n\t\tif (!this.shadowRoot!.contains(e.relatedTarget as Node)) {\n\t\t\tthis._setCurrentSlider(\"\");\n\t\t}\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (!(isLeft(e) || isRight(e))) {\n\t\t\treturn;\n\t\t}\n\t\te.preventDefault();\n\n\t\tconst activeSliders = this._activeSliders;\n\t\tconst target = e.target as HTMLElement;\n\t\tconst activeSlider = target.closest<WheelSlider>(\"[ui5-wheelslider]\")!.getAttribute(\"data-sap-slider\")!;\n\t\tlet index = activeSliders.indexOf(activeSlider);\n\t\tif (isLeft(e)) {\n\t\t\tindex = index === 0 ? activeSliders.length - 1 : index - 1;\n\t\t} else if (isRight(e)) {\n\t\t\tindex = index === activeSliders.length - 1 ? 0 : index + 1;\n\t\t}\n\t\tthis._setCurrentSlider(activeSliders[index]);\n\t\tthis._currentSliderDOM.focus();\n\t}\n\n\t_handleWheel(e: WheelEvent) {\n\t\te.preventDefault();\n\t}\n\n\tgetFormat() {\n\t\tlet dateFormat: DateFormat;\n\t\tif (this._isPattern) {\n\t\t\tdateFormat = DateFormat.getDateInstance({\n\t\t\t\tcalendarType: this._calendarType,\n\t\t\t\tpattern: this._formatPattern,\n\t\t\t});\n\t\t} else {\n\t\t\tdateFormat = DateFormat.getDateInstance({\n\t\t\t\tcalendarType: this._calendarType,\n\t\t\t\tstyle: this._formatPattern,\n\t\t\t});\n\t\t}\n\n\t\treturn dateFormat;\n\t}\n\n\tformatValue(date: Date) {\n\t\treturn this.getFormat().format(date);\n\t}\n\n\tget dateValue() {\n\t\treturn this.value ? this.getFormat().parse(this.value) as Date : new Date();\n\t}\n\n\tget validDateValue() {\n\t\treturn this.value !== undefined && this.isValid(this.value) ? this.dateValue : new Date();\n\t}\n\n\tget hoursSliderTitle() {\n\t\treturn TimeSelection.i18nBundle.getText(TIMEPICKER_HOURS_LABEL);\n\t}\n\n\tget minutesSliderTitle() {\n\t\treturn TimeSelection.i18nBundle.getText(TIMEPICKER_MINUTES_LABEL);\n\t}\n\n\tget secondsSliderTitle() {\n\t\treturn TimeSelection.i18nBundle.getText(TIMEPICKER_SECONDS_LABEL);\n\t}\n\n\tget periodSliderTitle() {\n\t\treturn \"AM/PM\";\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-time-selection-root\": true,\n\t\t\t\t\"ui5-phone\": isPhone(),\n\t\t\t},\n\t\t};\n\t}\n}\n\nTimeSelection.define();\n\nexport default TimeSelection;\nexport type {\n\tTimeSelectionChangeEventDetail,\n\tTimeSelectionSliderChangeEventDetail,\n};\n"]}

package/dist/TimeSelectionClocks.d.ts

@@ -0,0 +1,115 @@
+import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
+import TimePickerInternals from "./TimePickerInternals.js";
+import TimePickerClock from "./TimePickerClock.js";
+import ToggleSpinButton from "./ToggleSpinButton.js";
+import type { TimePickerClockChangeEventDetail } from "./TimePickerClock.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * <code>ui5-time-selection-clocks</code> is component that contains all the <code>ui5-time-picker-clock</code> components
+ * necessary for the <code>ui5-time-picker</code> as well as all necessary <code>ui5-toggle-spin-button</code> components
+ * used for switching between different clocks.
+ * <code>ui5-time-picker-clock</code> components and <code>ui5-toggle-spin-button</code> depend on the time format set to
+ * <code>ui5-time-picker</code> component.
+ *
+ * This component should not be used separately.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.TimeSelectionClocks
+ * @extends sap.ui.webc.main.TimePickerInternals
+ * @abstract
+ * @tagname ui5-time-selection-clocks
+ * @since 1.15.0
+ * @private
+ */
+declare class TimeSelectionClocks extends TimePickerInternals {
+    /**
+     * Flag for pressed Space key
+     */
+    _spacePressed: boolean;
+    onBeforeRendering(): void;
+    /**
+     * Returns ToggleSpinButton component by index or name.
+     *
+     * @param {number | string} indexOrName the index or name of the component
+     * @returns { ToggleSpinButton | undefined} component (if exists) or undefined
+     */
+    _buttonComponent(indexOrName: number | string): ToggleSpinButton | null | undefined;
+    /**
+     * Returns TimePickerClock component by index or name.
+     *
+     * @param {number | string} indexOrName the index or name of the component
+     * @returns { TimePickerClock | undefined} component (if exists) or undefined
+     */
+    _clockComponent(indexOrName: number | string): TimePickerClock | null | undefined;
+    /**
+     * TimePickerClocks focusin event handler. Focuses the active button and switches to active clock.
+     *
+     * @param {event} evt Event object
+     */
+    _clocksFocusIn(evt: Event): void;
+    /**
+     * ToggleSpinButton focusin event handler.Switches to clock which button is being focused.
+     *
+     * @param {event} evt Event object
+     */
+    _buttonFocusIn(evt: Event): void;
+    /**
+     * keyup event handler.
+     *
+     * @param {event} evt Event object
+     */
+    _onkeyup(evt: KeyboardEvent): void;
+    /**
+     * keydown event handler.
+     *
+     * @param {event} evt Event object
+     */
+    _onkeydown(evt: KeyboardEvent): void;
+    /**
+     * Handles direct numbers entry.
+     *
+     * @param {event} evt Event object
+     */
+    _numbersInput(evt: KeyboardEvent): void;
+    /**
+     * Focuses the first available button.
+     */
+    _focusFirstButton(): void;
+    /**
+     * Sets the exact match value. Must be overriden.
+     */
+    _setExactMatch(): void;
+    /**
+     * Creates clock and button components according to the display format pattern.
+     */
+    _createComponents(): void;
+    /**
+     * Switches to the specific clock by name.
+     *
+     * @param {string} clockName the name of the clock
+     */
+    _switchTo(clockName: string): void;
+    /**
+     * Switches to the specific clock by its index in _clocks property.
+     *
+     * @param {number} clockIndex the index of the clock
+     */
+    _switchClock(clockIndex: number): void;
+    /**
+     * Switches to the next available clock.
+     *
+     * @param {boolean} wrapAround whether to switch to the first clock if there are no next clock
+     */
+    _switchNextClock(wrapAround?: boolean): void;
+    /**
+     * Clock 'change' event handler.
+     *
+     * @param {event} evt Event object
+     */
+    _clockChange(evt: CustomEvent<TimePickerClockChangeEventDetail>): void;
+}
+export default TimeSelectionClocks;