@fluid-topics/ft-wc-utils 1.3.14 → 1.3.16

package/build/decorators.d.ts

@@ -1,5 +1,9 @@
 import { PropertyDeclaration } from "@lit/reactive-element";
 export declare const customElement: (tagName: string) => (clazz: CustomElementConstructor) => void;
 export declare function jsonProperty(defaultValue: any, options?: PropertyDeclaration): PropertyDecorator;
+/**
+ * @deprecated use numberProperty instead
+ */
 export declare function optionalNumberProperty(options?: PropertyDeclaration): PropertyDecorator;
+export declare function numberProperty(options?: PropertyDeclaration): PropertyDecorator;
 export declare function isNumber(value: any): boolean;

package/build/decorators.js

@@ -23,17 +23,24 @@ export function jsonProperty(defaultValue, options) {
             },
             toAttribute: (value) => {
                 return JSON.stringify(value);
-            }
+            },
         },
         hasChanged,
-        ...(options !== null && options !== void 0 ? options : {})
+        ...(options !== null && options !== void 0 ? options : {}),
     });
 }
+/**
+ * @deprecated use numberProperty instead
+ */
 export function optionalNumberProperty(options) {
+    return numberProperty(options);
+}
+export function numberProperty(options) {
     return property({
         type: Object,
         converter: {
             fromAttribute: (value) => {
+                console.log("from attribute", value, options);
                 if (value == null) {
                     return undefined;
                 }
@@ -41,9 +48,10 @@ export function optionalNumberProperty(options) {
             },
             toAttribute: (value) => {
                 return value == null ? undefined : "" + value;
-            }
+            },
         },
-        ...(options !== null && options !== void 0 ? options : {})
+        useDefault: true,
+        ...(options !== null && options !== void 0 ? options : {}),
     });
 }
 export function isNumber(value) {

package/build/designSystemVariables.js

@@ -54,10 +54,10 @@ export const designSystemVariables = {
     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)"),
     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)"),
     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)"),
-    borderRadiusS: FtCssVariableFactory.create("--ft-border-radius-S", "", "SIZE", "4px"),
-    borderRadiusM: FtCssVariableFactory.create("--ft-border-radius-M", "", "SIZE", "8px"),
-    borderRadiusL: FtCssVariableFactory.create("--ft-border-radius-L", "", "SIZE", "12px"),
-    borderRadiusXL: FtCssVariableFactory.create("--ft-border-radius-XL", "", "SIZE", "16px"),
+    borderRadiusS: FtCssVariableFactory.create("--ft-border-radius-s", "", "SIZE", "4px"),
+    borderRadiusM: FtCssVariableFactory.create("--ft-border-radius-m", "", "SIZE", "8px"),
+    borderRadiusL: FtCssVariableFactory.create("--ft-border-radius-l", "", "SIZE", "12px"),
+    borderRadiusXL: FtCssVariableFactory.create("--ft-border-radius-xl", "", "SIZE", "16px"),
     titleFont: FtCssVariableFactory.create("--ft-title-font", "", "UNKNOWN", "Ubuntu, system-ui, sans-serif"),
     contentFont: FtCssVariableFactory.create("--ft-content-font", "", "UNKNOWN", "'Open Sans', system-ui, sans-serif"),
     transitionDuration: FtCssVariableFactory.create("--ft-transition-duration", "", "UNKNOWN", "250ms"),

package/build/floating.d.ts

@@ -1,3 +1,4 @@
 import { ComputePositionReturn, Placement, Strategy } from "@floating-ui/dom";
+import { FtCssVariable } from "@fluid-topics/design-system-variables";
 export declare function computeOffsetPosition(reference: HTMLElement, element: HTMLElement, placement: Placement): Promise<ComputePositionReturn>;
-export declare function computeOffsetAutoPosition(reference: HTMLElement, element: HTMLElement, placement?: Placement, allowedPlacements?: Placement[], strategy?: Strategy, maxHeightCssVariable?: string, offsetValue?: number): Promise<ComputePositionReturn>;
+export declare function computeOffsetAutoPosition(reference: HTMLElement, element: HTMLElement, placement?: Placement, allowedPlacements?: Placement[], strategy?: Strategy, maxHeightCssVariable?: string | FtCssVariable, offsetValue?: number): Promise<ComputePositionReturn>;

package/build/floating.js

@@ -29,8 +29,11 @@ export async function computeOffsetAutoPosition(reference, element, placement, a
             autoPlacement({ allowedPlacements: allowedPlacements }),
             size({
                 apply({ availableHeight, elements }) {
+                    if (typeof maxHeightCssVariable === "string") {
+                        maxHeightCssVariable = `var(${maxHeightCssVariable})`;
+                    }
                     if (maxHeightCssVariable) {
-                        elements.floating.style.maxHeight = `min(${Math.max(0, availableHeight)}px, var(${maxHeightCssVariable}))`;
+                        elements.floating.style.maxHeight = `min(${Math.max(0, availableHeight)}px, ${maxHeightCssVariable})`;
                     }
                     else {
                         elements.floating.style.maxHeight = `${Math.max(0, availableHeight)}px`;