@fluid-topics/ft-wc-utils 2.0.37 → 2.1.0

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 (9) hide show
  1. package/build/FtLitElementWithConditionalVisibility.d.ts +10 -0
  2. package/build/FtLitElementWithConditionalVisibility.js +48 -0
  3. package/build/designSystemVariables.d.ts +65 -65
  4. package/build/directives/focusTrap.d.ts +1 -1
  5. package/build/ft-input/ValidationRules.js +2 -2
  6. package/build/globals.min.js +15 -15
  7. package/build/index.d.ts +1 -0
  8. package/build/index.js +3 -0
  9. package/package.json +28 -28
package/build/FtLitElementWithConditionalVisibility.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { FtLitElement } from "./FtLitElement";
2
+ import { Constructor } from "./generic-types";
3
+ export interface FtLitElementWithConditionalVisibilityInterface {
4
+ forceVisible: boolean;
5
+ isVisible: boolean;
6
+ isElementWithConditionalVisibility: boolean;
7
+ }
8
+ type FtLitElementWithConditionalVisibilityType<T extends Constructor<FtLitElement>> = T & Constructor<FtLitElementWithConditionalVisibilityInterface>;
9
+ export declare function withConditionalVisibility<T extends Constructor<FtLitElement>>(Class: T): FtLitElementWithConditionalVisibilityType<T>;
10
+ export {};
package/build/FtLitElementWithConditionalVisibility.js ADDED
@@ -0,0 +1,48 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ 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;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { property, state, } from "lit/decorators.js";
8
+ export function withConditionalVisibility(Class) {
9
+ class FtLitElementWithConditionalVisibilityClass extends Class {
10
+ constructor() {
11
+ super(...arguments);
12
+ this.forceVisible = false;
13
+ this.isVisible = true;
14
+ this.isElementWithConditionalVisibility = true;
15
+ }
16
+ calculateStyles(condition, styleString) {
17
+ if (condition) {
18
+ const style = document.createElement("style");
19
+ style.classList.add("conditional-visibility-style");
20
+ style.innerHTML = styleString;
21
+ this.shadowRoot.append(style);
22
+ }
23
+ }
24
+ hideIfNecessary() {
25
+ const isHidden = !(this.forceVisible || this.isVisible);
26
+ this.calculateStyles(isHidden, ":host { display: none !important; }");
27
+ }
28
+ highlightIfForceVisible() {
29
+ this.calculateStyles(this.forceVisible, ":host { box-shadow: 0px 0px 0px 8px rgba(227,119,59,0.4) inset; }");
30
+ }
31
+ willUpdate(props) {
32
+ super.willUpdate(props);
33
+ this.updateComplete.then(() => {
34
+ this.shadowRoot.querySelectorAll(".conditional-visibility-style")
35
+ .forEach((element) => element.remove());
36
+ this.hideIfNecessary();
37
+ this.highlightIfForceVisible();
38
+ });
39
+ }
40
+ }
41
+ __decorate([
42
+ property({ type: Boolean, attribute: false })
43
+ ], FtLitElementWithConditionalVisibilityClass.prototype, "forceVisible", void 0);
44
+ __decorate([
45
+ state()
46
+ ], FtLitElementWithConditionalVisibilityClass.prototype, "isVisible", void 0);
47
+ return FtLitElementWithConditionalVisibilityClass;
48
+ }
package/build/designSystemVariables.d.ts CHANGED
@@ -1,67 +1,67 @@
1
1
  export declare const designSystemVariables: {
2
- colorPrimary: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
3
- colorPrimaryVariant: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
4
- colorSecondary: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
5
- colorSecondaryVariant: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
6
- colorSurface: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
7
- colorContent: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
8
- colorInfo: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
9
- colorWarning: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
10
- colorError: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
11
- colorSuccess: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
12
- colorOutline: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
13
- colorOpacityHigh: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
14
- colorOpacityMedium: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
15
- colorOpacityDisabled: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
16
- colorOnPrimary: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
17
- colorOnPrimaryHigh: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
18
- colorOnPrimaryMedium: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
19
- colorOnPrimaryDisabled: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
20
- colorOnSecondary: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
21
- colorOnSecondaryHigh: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
22
- colorOnSecondaryMedium: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
23
- colorOnSecondaryDisabled: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
24
- colorOnSurface: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
25
- colorOnSurfaceHigh: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
26
- colorOnSurfaceMedium: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
27
- colorOnSurfaceDisabled: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
28
- opacityContentOnSurfaceDisabled: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
29
- opacityContentOnSurfaceEnable: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
30
- opacityContentOnSurfaceHover: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
31
- opacityContentOnSurfaceFocused: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
32
- opacityContentOnSurfacePressed: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
33
- opacityContentOnSurfaceSelected: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
34
- opacityContentOnSurfaceDragged: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
35
- opacityPrimaryOnSurfaceDisabled: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
36
- opacityPrimaryOnSurfaceEnable: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
37
- opacityPrimaryOnSurfaceHover: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
38
- opacityPrimaryOnSurfaceFocused: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
39
- opacityPrimaryOnSurfacePressed: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
40
- opacityPrimaryOnSurfaceSelected: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
41
- opacityPrimaryOnSurfaceDragged: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
42
- opacitySurfaceOnPrimaryDisabled: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
43
- opacitySurfaceOnPrimaryEnable: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
44
- opacitySurfaceOnPrimaryHover: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
45
- opacitySurfaceOnPrimaryFocused: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
46
- opacitySurfaceOnPrimaryPressed: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
47
- opacitySurfaceOnPrimarySelected: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
48
- opacitySurfaceOnPrimaryDragged: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
49
- elevation00: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
50
- elevation01: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
51
- elevation02: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
52
- elevation03: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
53
- elevation04: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
54
- elevation06: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
55
- elevation08: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
56
- elevation12: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
57
- elevation16: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
58
- elevation24: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
59
- borderRadiusS: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
60
- borderRadiusM: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
61
- borderRadiusL: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
62
- borderRadiusXL: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
63
- titleFont: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
64
- contentFont: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
65
- transitionDuration: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
66
- transitionTimingFunction: import("@fluid-topics/design-system-variables/build/FtCssVariables").FtCssVariable;
2
+ colorPrimary: import("@fluid-topics/design-system-variables").FtCssVariable;
3
+ colorPrimaryVariant: import("@fluid-topics/design-system-variables").FtCssVariable;
4
+ colorSecondary: import("@fluid-topics/design-system-variables").FtCssVariable;
5
+ colorSecondaryVariant: import("@fluid-topics/design-system-variables").FtCssVariable;
6
+ colorSurface: import("@fluid-topics/design-system-variables").FtCssVariable;
7
+ colorContent: import("@fluid-topics/design-system-variables").FtCssVariable;
8
+ colorInfo: import("@fluid-topics/design-system-variables").FtCssVariable;
9
+ colorWarning: import("@fluid-topics/design-system-variables").FtCssVariable;
10
+ colorError: import("@fluid-topics/design-system-variables").FtCssVariable;
11
+ colorSuccess: import("@fluid-topics/design-system-variables").FtCssVariable;
12
+ colorOutline: import("@fluid-topics/design-system-variables").FtCssVariable;
13
+ colorOpacityHigh: import("@fluid-topics/design-system-variables").FtCssVariable;
14
+ colorOpacityMedium: import("@fluid-topics/design-system-variables").FtCssVariable;
15
+ colorOpacityDisabled: import("@fluid-topics/design-system-variables").FtCssVariable;
16
+ colorOnPrimary: import("@fluid-topics/design-system-variables").FtCssVariable;
17
+ colorOnPrimaryHigh: import("@fluid-topics/design-system-variables").FtCssVariable;
18
+ colorOnPrimaryMedium: import("@fluid-topics/design-system-variables").FtCssVariable;
19
+ colorOnPrimaryDisabled: import("@fluid-topics/design-system-variables").FtCssVariable;
20
+ colorOnSecondary: import("@fluid-topics/design-system-variables").FtCssVariable;
21
+ colorOnSecondaryHigh: import("@fluid-topics/design-system-variables").FtCssVariable;
22
+ colorOnSecondaryMedium: import("@fluid-topics/design-system-variables").FtCssVariable;
23
+ colorOnSecondaryDisabled: import("@fluid-topics/design-system-variables").FtCssVariable;
24
+ colorOnSurface: import("@fluid-topics/design-system-variables").FtCssVariable;
25
+ colorOnSurfaceHigh: import("@fluid-topics/design-system-variables").FtCssVariable;
26
+ colorOnSurfaceMedium: import("@fluid-topics/design-system-variables").FtCssVariable;
27
+ colorOnSurfaceDisabled: import("@fluid-topics/design-system-variables").FtCssVariable;
28
+ opacityContentOnSurfaceDisabled: import("@fluid-topics/design-system-variables").FtCssVariable;
29
+ opacityContentOnSurfaceEnable: import("@fluid-topics/design-system-variables").FtCssVariable;
30
+ opacityContentOnSurfaceHover: import("@fluid-topics/design-system-variables").FtCssVariable;
31
+ opacityContentOnSurfaceFocused: import("@fluid-topics/design-system-variables").FtCssVariable;
32
+ opacityContentOnSurfacePressed: import("@fluid-topics/design-system-variables").FtCssVariable;
33
+ opacityContentOnSurfaceSelected: import("@fluid-topics/design-system-variables").FtCssVariable;
34
+ opacityContentOnSurfaceDragged: import("@fluid-topics/design-system-variables").FtCssVariable;
35
+ opacityPrimaryOnSurfaceDisabled: import("@fluid-topics/design-system-variables").FtCssVariable;
36
+ opacityPrimaryOnSurfaceEnable: import("@fluid-topics/design-system-variables").FtCssVariable;
37
+ opacityPrimaryOnSurfaceHover: import("@fluid-topics/design-system-variables").FtCssVariable;
38
+ opacityPrimaryOnSurfaceFocused: import("@fluid-topics/design-system-variables").FtCssVariable;
39
+ opacityPrimaryOnSurfacePressed: import("@fluid-topics/design-system-variables").FtCssVariable;
40
+ opacityPrimaryOnSurfaceSelected: import("@fluid-topics/design-system-variables").FtCssVariable;
41
+ opacityPrimaryOnSurfaceDragged: import("@fluid-topics/design-system-variables").FtCssVariable;
42
+ opacitySurfaceOnPrimaryDisabled: import("@fluid-topics/design-system-variables").FtCssVariable;
43
+ opacitySurfaceOnPrimaryEnable: import("@fluid-topics/design-system-variables").FtCssVariable;
44
+ opacitySurfaceOnPrimaryHover: import("@fluid-topics/design-system-variables").FtCssVariable;
45
+ opacitySurfaceOnPrimaryFocused: import("@fluid-topics/design-system-variables").FtCssVariable;
46
+ opacitySurfaceOnPrimaryPressed: import("@fluid-topics/design-system-variables").FtCssVariable;
47
+ opacitySurfaceOnPrimarySelected: import("@fluid-topics/design-system-variables").FtCssVariable;
48
+ opacitySurfaceOnPrimaryDragged: import("@fluid-topics/design-system-variables").FtCssVariable;
49
+ elevation00: import("@fluid-topics/design-system-variables").FtCssVariable;
50
+ elevation01: import("@fluid-topics/design-system-variables").FtCssVariable;
51
+ elevation02: import("@fluid-topics/design-system-variables").FtCssVariable;
52
+ elevation03: import("@fluid-topics/design-system-variables").FtCssVariable;
53
+ elevation04: import("@fluid-topics/design-system-variables").FtCssVariable;
54
+ elevation06: import("@fluid-topics/design-system-variables").FtCssVariable;
55
+ elevation08: import("@fluid-topics/design-system-variables").FtCssVariable;
56
+ elevation12: import("@fluid-topics/design-system-variables").FtCssVariable;
57
+ elevation16: import("@fluid-topics/design-system-variables").FtCssVariable;
58
+ elevation24: import("@fluid-topics/design-system-variables").FtCssVariable;
59
+ borderRadiusS: import("@fluid-topics/design-system-variables").FtCssVariable;
60
+ borderRadiusM: import("@fluid-topics/design-system-variables").FtCssVariable;
61
+ borderRadiusL: import("@fluid-topics/design-system-variables").FtCssVariable;
62
+ borderRadiusXL: import("@fluid-topics/design-system-variables").FtCssVariable;
63
+ titleFont: import("@fluid-topics/design-system-variables").FtCssVariable;
64
+ contentFont: import("@fluid-topics/design-system-variables").FtCssVariable;
65
+ transitionDuration: import("@fluid-topics/design-system-variables").FtCssVariable;
66
+ transitionTimingFunction: import("@fluid-topics/design-system-variables").FtCssVariable;
67
67
  };
package/build/directives/focusTrap.d.ts CHANGED
@@ -43,4 +43,4 @@ export declare class FocusTrapDirective extends AsyncDirective {
43
43
  private isFocusable;
44
44
  private isElementDisabled;
45
45
  }
46
- export declare const focusTrap: () => import("lit-html/directive").DirectiveResult<typeof FocusTrapDirective>;
46
+ export declare const focusTrap: () => import("lit-html/directive.js").DirectiveResult<typeof FocusTrapDirective>;
package/build/ft-input/ValidationRules.js CHANGED
@@ -1,4 +1,4 @@
1
- const URL_REGEX = /^[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
1
+ const URL_REGEX = /^https?:\/\//;
2
2
  const EMAIL_REGEX = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
3
3
  function testRegex(regex, message, v) {
4
4
  if (!v) {
@@ -11,7 +11,7 @@ function testRegex(regex, message, v) {
11
11
  }
12
12
  export const ValidationRules = {
13
13
  required: function (message) {
14
- return (v) => (!!v || message);
14
+ return (v) => (!!(v === null || v === void 0 ? void 0 : v.trim()) || message);
15
15
  },
16
16
  regex: function (regex, message) {
17
17
  return (v) => testRegex(regex, message, v);