@fluid-topics/ft-wc-utils 1.3.30 → 1.3.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/build/DateFormatter.d.ts +1 -0
  2. package/build/DateFormatter.js +5 -0
  3. package/build/DynamicImporter.d.ts +1 -1
  4. package/build/DynamicImporter.js +3 -1
  5. package/build/FtLitElementWithAriaNotification.d.ts +4 -2
  6. package/build/FtLitElementWithAriaNotification.js +14 -13
  7. package/build/a11y/FluidTopicsA11yHints.d.ts +1 -0
  8. package/build/a11y/FluidTopicsA11yHints.js +2 -0
  9. package/build/designSystemVariables.js +10 -10
  10. package/build/globals.min.js +13 -13
  11. package/build/helpers.d.ts +3 -0
  12. package/build/helpers.js +25 -0
  13. package/package.json +2 -2
package/build/DateFormatter.d.ts CHANGED
@@ -8,4 +8,5 @@ export declare class DateFormatter {
8
8
  static format(date: string | Date, locale: string, longDateFormat: boolean, dateTimeFormat: boolean): string;
9
9
  private static getMomentDateFormat;
10
10
  private static getIntlDateTime;
11
+ static getTimezoneAsString(): string;
11
12
  }
package/build/DateFormatter.js CHANGED
@@ -28,4 +28,9 @@ export class DateFormatter {
28
28
  const timePart = (new Intl.DateTimeFormat(locale, { timeStyle: "short" })).format(parsedDate);
29
29
  return `${datePart} ${timePart}`;
30
30
  }
31
+ static getTimezoneAsString() {
32
+ const getDigits = (n) => String(Math.floor(n)).padStart(2, "0");
33
+ const offset = new Date().getTimezoneOffset();
34
+ return `${offset < 0 ? "+" : "-"}${getDigits(Math.abs(offset) / 60)}:${getDigits(Math.abs(offset) % 60)}`;
35
+ }
31
36
  }
package/build/DynamicImporter.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export declare class DynamicImporter {
2
- import(url: string): Promise<any>;
2
+ import(url?: string): Promise<any>;
3
3
  }
4
4
  export declare const dynamicImporter: DynamicImporter;
package/build/DynamicImporter.js CHANGED
@@ -1,6 +1,8 @@
1
1
  export class DynamicImporter {
2
2
  async import(url) {
3
- return import(/* @vite-ignore */ url);
3
+ if (url) {
4
+ return import(/* @vite-ignore */ url);
5
+ }
4
6
  }
5
7
  }
6
8
  export const dynamicImporter = new DynamicImporter();
package/build/FtLitElementWithAriaNotification.d.ts CHANGED
@@ -3,9 +3,11 @@ import { Constructor } from "./generic-types";
3
3
  type AriaNotificationMessageType = string | {
4
4
  message: string;
5
5
  };
6
+ type AriaNotificationOptions = {
7
+ checkVisibility?: boolean;
8
+ };
6
9
  export type FtLitElementWithAriaNotificationInterface = {
7
- sendAriaNotificationIfVisible(message?: AriaNotificationMessageType): void;
8
- sendAriaNotification(message?: AriaNotificationMessageType): void;
10
+ sendAriaNotification(message?: AriaNotificationMessageType, options?: AriaNotificationOptions): void;
9
11
  };
10
12
  type FtLitElementWithAriaNotificationType<T extends Constructor<FtLitElement>> = T & Constructor<FtLitElementWithAriaNotificationInterface>;
11
13
  export declare const withAriaNotification: <T extends Constructor<FtLitElement>>(c: T) => FtLitElementWithAriaNotificationType<T>;
package/build/FtLitElementWithAriaNotification.js CHANGED
@@ -1,23 +1,24 @@
1
- import { FtNotificationEvent } from "./events";
2
1
  import { applyMixinOnce } from "./helpers";
2
+ import { FtNotificationEvent } from "./events";
3
+ const defaultAriaNotificationOptions = {
4
+ checkVisibility: true,
5
+ };
3
6
  export const withAriaNotification = applyMixinOnce(Symbol("withAriaNotification"), function (Class) {
4
7
  class FtLitElementWithAriaNotificationClass extends Class {
5
- sendAriaNotificationIfVisible(message) {
8
+ sendAriaNotification(message, options) {
9
+ const { checkVisibility } = { ...defaultAriaNotificationOptions, ...options };
6
10
  setTimeout(() => {
7
- if (this.checkVisibility()) {
8
- this.sendAriaNotification(message);
11
+ if (!checkVisibility || this.checkVisibility()) {
12
+ message = typeof message === "string" ? message : message === null || message === void 0 ? void 0 : message.message;
13
+ if (message) {
14
+ this.dispatchEvent(new FtNotificationEvent({
15
+ type: "aria",
16
+ message: message,
17
+ }));
18
+ }
9
19
  }
10
20
  }, 20);
11
21
  }
12
- sendAriaNotification(message) {
13
- message = typeof message === "string" ? message : message === null || message === void 0 ? void 0 : message.message;
14
- if (message) {
15
- this.dispatchEvent(new FtNotificationEvent({
16
- type: "aria",
17
- message: message,
18
- }));
19
- }
20
- }
21
22
  }
22
23
  return FtLitElementWithAriaNotificationClass;
23
24
  });
package/build/a11y/FluidTopicsA11yHints.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export interface FluidTopicsA11yHints {
2
2
  isKeyboardNavigation: boolean;
3
+ lastPressedKey: string;
3
4
  }
4
5
  declare global {
5
6
  interface Window {
package/build/a11y/FluidTopicsA11yHints.js CHANGED
@@ -1,10 +1,12 @@
1
1
  window.FluidTopicsA11yHints = {
2
2
  isKeyboardNavigation: false,
3
+ lastPressedKey: "",
3
4
  };
4
5
  function onKeyDown(event) {
5
6
  if (event.key === "Enter" || event.key === " " || event.key === "Tab") {
6
7
  window.FluidTopicsA11yHints.isKeyboardNavigation = true;
7
8
  }
9
+ window.FluidTopicsA11yHints.lastPressedKey = event.key;
8
10
  }
9
11
  function onClick(event) {
10
12
  // event.detail contains the number of clicks. If it is equal to 0, that means we are using a keyboard
package/build/designSystemVariables.js CHANGED
@@ -47,16 +47,16 @@ export const designSystemVariables = {
47
47
  opacitySurfaceOnPrimaryPressed: FtCssVariableFactory.create("--ft-opacity-surface-on-primary-pressed", "", "NUMBER", "0.10"),
48
48
  opacitySurfaceOnPrimarySelected: FtCssVariableFactory.create("--ft-opacity-surface-on-primary-selected", "", "NUMBER", "0.08"),
49
49
  opacitySurfaceOnPrimaryDragged: FtCssVariableFactory.create("--ft-opacity-surface-on-primary-dragged", "", "NUMBER", "0.08"),
50
- elevation00: FtCssVariableFactory.create("--ft-elevation-00", "", "UNKNOWN", "0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0)"),
51
- elevation01: FtCssVariableFactory.create("--ft-elevation-01", "", "UNKNOWN", "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),
52
- elevation02: FtCssVariableFactory.create("--ft-elevation-02", "", "UNKNOWN", "0px 4px 10px 0px rgba(0, 0, 0, 0.06), 0px 2px 5px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),
53
- elevation03: FtCssVariableFactory.create("--ft-elevation-03", "", "UNKNOWN", "0px 6px 13px 0px rgba(0, 0, 0, 0.06), 0px 3px 7px 0px rgba(0, 0, 0, 0.14), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"),
54
- elevation04: FtCssVariableFactory.create("--ft-elevation-04", "", "UNKNOWN", "0px 8px 16px 0px rgba(0, 0, 0, 0.06), 0px 4px 9px 0px rgba(0, 0, 0, 0.14), 0px 2px 3px 0px rgba(0, 0, 0, 0.06)"),
55
- elevation06: FtCssVariableFactory.create("--ft-elevation-06", "", "UNKNOWN", "0px 12px 22px 0px rgba(0, 0, 0, 0.06), 0px 6px 13px 0px rgba(0, 0, 0, 0.14), 0px 4px 5px 0px rgba(0, 0, 0, 0.06)"),
56
- elevation08: FtCssVariableFactory.create("--ft-elevation-08", "", "UNKNOWN", "0px 16px 28px 0px rgba(0, 0, 0, 0.06), 0px 8px 17px 0px rgba(0, 0, 0, 0.14), 0px 6px 7px 0px rgba(0, 0, 0, 0.06)"),
57
- elevation12: FtCssVariableFactory.create("--ft-elevation-12", "", "UNKNOWN", "0px 22px 40px 0px rgba(0, 0, 0, 0.06), 0px 12px 23px 0px rgba(0, 0, 0, 0.14), 0px 10px 11px 0px rgba(0, 0, 0, 0.06)"),
58
- elevation16: FtCssVariableFactory.create("--ft-elevation-16", "", "UNKNOWN", "0px 28px 52px 0px rgba(0, 0, 0, 0.06), 0px 16px 29px 0px rgba(0, 0, 0, 0.14), 0px 14px 15px 0px rgba(0, 0, 0, 0.06)"),
59
- elevation24: FtCssVariableFactory.create("--ft-elevation-24", "", "UNKNOWN", "0px 40px 76px 0px rgba(0, 0, 0, 0.06), 0px 24px 41px 0px rgba(0, 0, 0, 0.14), 0px 22px 23px 0px rgba(0, 0, 0, 0.06)"),
50
+ elevation00: FtCssVariableFactory.create("--ft-elevation-00", "", "SHADOW", "0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0)"),
51
+ elevation01: FtCssVariableFactory.create("--ft-elevation-01", "", "SHADOW", "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),
52
+ elevation02: FtCssVariableFactory.create("--ft-elevation-02", "", "SHADOW", "0px 4px 10px 0px rgba(0, 0, 0, 0.06), 0px 2px 5px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)"),
53
+ elevation03: FtCssVariableFactory.create("--ft-elevation-03", "", "SHADOW", "0px 6px 13px 0px rgba(0, 0, 0, 0.06), 0px 3px 7px 0px rgba(0, 0, 0, 0.14), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"),
54
+ elevation04: FtCssVariableFactory.create("--ft-elevation-04", "", "SHADOW", "0px 8px 16px 0px rgba(0, 0, 0, 0.06), 0px 4px 9px 0px rgba(0, 0, 0, 0.14), 0px 2px 3px 0px rgba(0, 0, 0, 0.06)"),
55
+ elevation06: FtCssVariableFactory.create("--ft-elevation-06", "", "SHADOW", "0px 12px 22px 0px rgba(0, 0, 0, 0.06), 0px 6px 13px 0px rgba(0, 0, 0, 0.14), 0px 4px 5px 0px rgba(0, 0, 0, 0.06)"),
56
+ elevation08: FtCssVariableFactory.create("--ft-elevation-08", "", "SHADOW", "0px 16px 28px 0px rgba(0, 0, 0, 0.06), 0px 8px 17px 0px rgba(0, 0, 0, 0.14), 0px 6px 7px 0px rgba(0, 0, 0, 0.06)"),
57
+ elevation12: FtCssVariableFactory.create("--ft-elevation-12", "", "SHADOW", "0px 22px 40px 0px rgba(0, 0, 0, 0.06), 0px 12px 23px 0px rgba(0, 0, 0, 0.14), 0px 10px 11px 0px rgba(0, 0, 0, 0.06)"),
58
+ elevation16: FtCssVariableFactory.create("--ft-elevation-16", "", "SHADOW", "0px 28px 52px 0px rgba(0, 0, 0, 0.06), 0px 16px 29px 0px rgba(0, 0, 0, 0.14), 0px 14px 15px 0px rgba(0, 0, 0, 0.06)"),
59
+ elevation24: FtCssVariableFactory.create("--ft-elevation-24", "", "SHADOW", "0px 40px 76px 0px rgba(0, 0, 0, 0.06), 0px 24px 41px 0px rgba(0, 0, 0, 0.14), 0px 22px 23px 0px rgba(0, 0, 0, 0.06)"),
60
60
  borderRadiusS: FtCssVariableFactory.create("--ft-border-radius-s", "", "SIZE", "4px"),
61
61
  borderRadiusM: FtCssVariableFactory.create("--ft-border-radius-m", "", "SIZE", "8px"),
62
62
  borderRadiusL: FtCssVariableFactory.create("--ft-border-radius-l", "", "SIZE", "12px"),