@fluid-topics/ftds-period-picker 2.2.16 → 2.2.18

package/build/ftds-period-picker-in-select.d.ts

@@ -41,6 +41,7 @@ export declare class FtdsPeriodPickerInSelect extends FtdsPeriodPickerInSelect_b
     private resizeObserver?;
     get displayValue(): string;
     constructor();
+    focus(): void;
     closeOnEscape(event: KeyboardEvent): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/build/ftds-period-picker-in-select.js

@@ -41,6 +41,10 @@ export class FtdsPeriodPickerInSelect extends withI18n(toFtInput(FtdsBase)) {
         this.isMenuOpen = false;
         this.addI18nContext(ftPeriodI18nContext, periodPickerDefaultMessages);
     }
+    focus() {
+        var _a;
+        (_a = this.periodPickerTriggerButton) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     closeOnEscape(event) {
         var _a, _b;
         if (event.key === "Escape") {

package/build/ftds-period-picker.d.ts

@@ -1,12 +1,12 @@
 import { PropertyValues } from "lit";
-import { FtdsBase } from "@fluid-topics/ft-wc-utils";
+import { FtdsBase, FtInputChangeEvent } from "@fluid-topics/ft-wc-utils";
 import { FtdsPeriodPickerDateInputsVisibility, FtdsPeriodPickerProperties, FtPeriod, FtPeriodPickerConfigOption, FtPeriodPickerOption, FtPeriodSelection } from "./ftds-period-picker.properties";
 import { FtdsRadio, FtdsRadioGroup } from "@fluid-topics/ftds-radio";
 import { FtdsTextInput } from "@fluid-topics/ftds-text-input";
 import { FtdsIcon } from "@fluid-topics/ftds-icon";
 import { FtdsFloatingMenu } from "@fluid-topics/ftds-floating-menu";
 import { FtdsButton } from "@fluid-topics/ftds-button";
-export declare class FtPeriodChangeEvent extends CustomEvent<FtPeriodSelection> {
+export declare class FtPeriodChangeEvent extends FtInputChangeEvent<FtPeriodSelection> {
     constructor(detail: FtPeriodSelection);
 }
 declare const FtdsPeriodPicker_base: typeof FtdsBase & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-wc-utils").FtInputInterface<FtPeriod>> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
@@ -36,6 +36,7 @@ export declare class FtdsPeriodPicker extends FtdsPeriodPicker_base implements F
     constructor();
     protected willUpdate(props: PropertyValues): void;
     protected firstUpdated(props: PropertyValues): void;
+    focus(): void;
     protected render(): import("lit-html").TemplateResult<1>;
     protected renderRadioOptions(): import("lit-html").TemplateResult<1>;
     protected renderDateInputs(): import("lit-html").TemplateResult<1>;

package/build/ftds-period-picker.js

@@ -8,7 +8,7 @@ import { html, } from "lit";
 import { property, query, state, } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { repeat } from "lit/directives/repeat.js";
-import { DateFormatter, dateProperty, FtdsBase, toFtInput, } from "@fluid-topics/ft-wc-utils";
+import { DateFormatter, dateProperty, FtdsBase, FtInputChangeEvent, toFtInput, } from "@fluid-topics/ft-wc-utils";
 import { i18n, withI18n, } from "@fluid-topics/ft-i18n";
 import { FtdsPeriodPickerDateInputsVisibility, } from "./ftds-period-picker.properties";
 import { styles } from "./ftds-period-picker.styles";
@@ -19,9 +19,9 @@ import { FtdsTextInput } from "@fluid-topics/ftds-text-input";
 import { FtdsIcon } from "@fluid-topics/ftds-icon";
 import { FtdsFloatingMenu } from "@fluid-topics/ftds-floating-menu";
 import { FtdsButton } from "@fluid-topics/ftds-button";
-export class FtPeriodChangeEvent extends CustomEvent {
+export class FtPeriodChangeEvent extends FtInputChangeEvent {
     constructor(detail) {
-        super("change", { detail });
+        super(detail);
     }
 }
 export class FtdsPeriodPicker extends withI18n(toFtInput(FtdsBase)) {
@@ -74,6 +74,10 @@ export class FtdsPeriodPicker extends withI18n(toFtInput(FtdsBase)) {
             this.updatePeriodInputs();
         }
     }
+    focus() {
+        var _a;
+        (_a = this.ftdsRadioGroup) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     render() {
         var _a;
         return html `