@configura/web-ui 2.1.0-alpha.1 → 2.1.0-alpha.3

package/dist/scss/_utilities.scss

@@ -1,21 +1,21 @@
-/**
- * Web UI Utilities
- */
-
-.cfgMl1 {
-	margin-left: 1em;
-}
-
-.cfgMt1 {
-	margin-top: 1em;
-}
-
-.cfgMb1 {
-	margin-bottom: 1em;
-}
-
-.cfgTextOverflow {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
+/**
+ * Web UI Utilities
+ */
+
+.cfgMl1 {
+	margin-left: 1em;
+}
+
+.cfgMt1 {
+	margin-top: 1em;
+}
+
+.cfgMb1 {
+	margin-bottom: 1em;
+}
+
+.cfgTextOverflow {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

package/dist/scss/_variables.scss

@@ -1,6 +1,6 @@
-/**
- * Web UI Variables
- */
-	
-$baseFontSize: 10px !default; // We use 10px for easy em conversion
-$overlayingZIndex: 1000 !default;
+/**
+ * Web UI Variables
+ */
+	
+$baseFontSize: 10px !default; // We use 10px for easy em conversion
+$overlayingZIndex: 1000 !default;

package/dist/scss/icons/_checkmark.scss

@@ -1,46 +1,46 @@
-@use "../mixins";
-
-@mixin classes($colorActive, $colorPassive) {
-	.cfgCheckmark {
-		/* The distance-units inside the checkmark are px even though everything
-		   else is relative units. The SVG has its own coordinate space. */
-
-		@include mixins.cfgRootStyles;
-
-		display: inline-block;
-		width: 100%;
-		height: 100%;
-
-		&__container {
-			transition: transform 0.4s;
-			transform: translateY(17px);
-		}
-
-		&__line {
-			stroke: $colorActive;
-			stroke-linecap: round;
-			stroke-width: 12;
-			transform-origin: 50px 50px;
-			transition: transform 0.4s, stroke 0.4s;
-		}
-
-		&__lineLeft {
-			stroke: $colorActive;
-			transform: rotate(40deg) translateY(24px) translateX(18px);
-		}
-
-		&__lineRight {
-			stroke: $colorActive;
-			transform: rotate(-50deg) translateY(-2px) translateX(-3px);
-		}
-
-		@content;
-
-		&__border {
-			@include mixins.cfgCheckbox($colorPassive);
-			&--active {
-				@include mixins.cfgCheckbox($colorActive);
-			}
-		}
-	}
-}
+@use "../mixins";
+
+@mixin classes($colorActive, $colorPassive) {
+	.cfgCheckmark {
+		/* The distance-units inside the checkmark are px even though everything
+		   else is relative units. The SVG has its own coordinate space. */
+
+		@include mixins.cfgRootStyles;
+
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+
+		&__container {
+			transition: transform 0.4s;
+			transform: translateY(17px);
+		}
+
+		&__line {
+			stroke: $colorActive;
+			stroke-linecap: round;
+			stroke-width: 12;
+			transform-origin: 50px 50px;
+			transition: transform 0.4s, stroke 0.4s;
+		}
+
+		&__lineLeft {
+			stroke: $colorActive;
+			transform: rotate(40deg) translateY(24px) translateX(18px);
+		}
+
+		&__lineRight {
+			stroke: $colorActive;
+			transform: rotate(-50deg) translateY(-2px) translateX(-3px);
+		}
+
+		@content;
+
+		&__border {
+			@include mixins.cfgCheckbox($colorPassive);
+			&--active {
+				@include mixins.cfgCheckbox($colorActive);
+			}
+		}
+	}
+}

package/dist/scss/icons/_chevron.scss

@@ -1,62 +1,62 @@
-@use "../mixins";
-
-@mixin classes($activeColor, $passiveColor) {
-	.cfgChevron {
-		/* The distance-units inside the chevron are px even though everything
-		   else is relative units. The SVG has its own coordinate space. */
-
-		@include mixins.cfgRootStyles;
-
-		display: inline-block;
-		width: 100%;
-
-		&__container {
-			transition: transform 0.4s;
-
-			&--down {
-				transform: translateY(13px);
-			}
-
-			&--up {
-				transform: translateY(-13px);
-			}
-		}
-
-		&__line {
-			stroke-linecap: round;
-			stroke-width: 10;
-			transform-origin: 50px 50px;
-			transition: transform 0.4s, stroke 0.4s;
-		}
-
-		&__lineLeft,
-		&__lineRight {
-			&--active {
-				stroke: $activeColor;
-			}
-			&--passive {
-				stroke: $passiveColor;
-			}
-		}
-
-		&__lineLeft {
-			&--down {
-				transform: rotate(40deg);
-			}
-			&--up {
-				transform: rotate(-40deg);
-			}
-		}
-		&__lineRight {
-			&--down {
-				transform: rotate(-40deg);
-			}
-
-			&--up {
-				transform: rotate(40deg);
-			}
-		}
-
-		@content;
-	}
-}
+@use "../mixins";
+
+@mixin classes($activeColor, $passiveColor) {
+	.cfgChevron {
+		/* The distance-units inside the chevron are px even though everything
+		   else is relative units. The SVG has its own coordinate space. */
+
+		@include mixins.cfgRootStyles;
+
+		display: inline-block;
+		width: 100%;
+
+		&__container {
+			transition: transform 0.4s;
+
+			&--down {
+				transform: translateY(13px);
+			}
+
+			&--up {
+				transform: translateY(-13px);
+			}
+		}
+
+		&__line {
+			stroke-linecap: round;
+			stroke-width: 10;
+			transform-origin: 50px 50px;
+			transition: transform 0.4s, stroke 0.4s;
+		}
+
+		&__lineLeft,
+		&__lineRight {
+			&--active {
+				stroke: $activeColor;
+			}
+			&--passive {
+				stroke: $passiveColor;
+			}
+		}
+
+		&__lineLeft {
+			&--down {
+				transform: rotate(40deg);
+			}
+			&--up {
+				transform: rotate(-40deg);
+			}
+		}
+		&__lineRight {
+			&--down {
+				transform: rotate(-40deg);
+			}
+
+			&--up {
+				transform: rotate(40deg);
+			}
+		}
+
+		@content;
+	}
+}

package/dist/scss/icons/_circle-xmark-icon.scss

@@ -1,24 +1,24 @@
-@use "../mixins";
-
-@mixin classes($color) {
-	.cfgCircleXmarkIcon {
-		/* The distance-units inside the icon are px even though everything
-		   else is relative units. The SVG has its own coordinate space. */
-
-		@include mixins.cfgRootStyles;
-
-		display: inline-block;
-		width: 100%;
-		height: 100%;
-
-		path,
-		circle {
-			stroke: $color;
-			stroke-linecap: round;
-			stroke-linejoin: round;
-			stroke-width: 1.5;
-		}
-
-		@content;
-	}
-}
+@use "../mixins";
+
+@mixin classes($color) {
+	.cfgCircleXmarkIcon {
+		/* The distance-units inside the icon are px even though everything
+		   else is relative units. The SVG has its own coordinate space. */
+
+		@include mixins.cfgRootStyles;
+
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+
+		path,
+		circle {
+			stroke: $color;
+			stroke-linecap: round;
+			stroke-linejoin: round;
+			stroke-width: 1.5;
+		}
+
+		@content;
+	}
+}

package/dist/scss/icons/_download-icon.scss

@@ -1,24 +1,24 @@
-@use "../mixins";
-
-@mixin classes($color) {
-	.cfgDownloadIcon {
-		/* The distance-units inside the icon are px even though everything
-		   else is relative units. The SVG has its own coordinate space. */
-
-		@include mixins.cfgRootStyles;
-
-		display: inline-block;
-		width: 100%;
-		height: 100%;
-
-		path,
-		circle {
-			stroke: $color;
-			stroke-linecap: round;
-			stroke-linejoin: round;
-			stroke-width: 1.5;
-		}
-
-		@content;
-	}
-}
+@use "../mixins";
+
+@mixin classes($color) {
+	.cfgDownloadIcon {
+		/* The distance-units inside the icon are px even though everything
+		   else is relative units. The SVG has its own coordinate space. */
+
+		@include mixins.cfgRootStyles;
+
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+
+		path,
+		circle {
+			stroke: $color;
+			stroke-linecap: round;
+			stroke-linejoin: round;
+			stroke-width: 1.5;
+		}
+
+		@content;
+	}
+}

package/dist/scss/icons/_error-icon.scss

@@ -1,24 +1,24 @@
-@use "../mixins";
-
-@mixin classes($color) {
-	.cfgErrorIcon {
-		/* The distance-units inside the icon are px even though everything
-		   else is relative units. The SVG has its own coordinate space. */
-
-		@include mixins.cfgRootStyles;
-
-		display: inline-block;
-		width: 100%;
-		height: 100%;
-
-		path,
-		circle {
-			stroke: $color;
-			stroke-linecap: round;
-			stroke-linejoin: round;
-			stroke-width: 1.5;
-		}
-
-		@content;
-	}
-}
+@use "../mixins";
+
+@mixin classes($color) {
+	.cfgErrorIcon {
+		/* The distance-units inside the icon are px even though everything
+		   else is relative units. The SVG has its own coordinate space. */
+
+		@include mixins.cfgRootStyles;
+
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+
+		path,
+		circle {
+			stroke: $color;
+			stroke-linecap: round;
+			stroke-linejoin: round;
+			stroke-width: 1.5;
+		}
+
+		@content;
+	}
+}

package/dist/scss/web-ui.scss

@@ -1,11 +1,11 @@
-/**
-* Web UI Styling
-*/
-
-@use "themed";
-
-@include themed.themed(themed.$lightTheme);
-
-.cfgDarkTheme {
-	@include themed.themed(themed.$darkTheme);
-}
+/**
+* Web UI Styling
+*/
+
+@use "themed";
+
+@include themed.themed(themed.$lightTheme);
+
+.cfgDarkTheme {
+	@include themed.themed(themed.$darkTheme);
+}

package/dist/useCatParams.d.ts

@@ -1,18 +1,18 @@
-import { DtoCatalogueParamsWithCid, DtoCatalogueParamsWithCidAndLang, DtoProductParamsWithCid, DtoProductParamsWithCidAndLang } from "@configura/web-api";
-/**
- * Returns a memozied version of the catParams
- */
-export declare function useMemoCatalogueParams(catParams: DtoCatalogueParamsWithCid): DtoCatalogueParamsWithCid;
-/**
- * Returns a memozied version of the catParams
- */
-export declare function useMemoCatalogueParamsWithLang(catParams: DtoCatalogueParamsWithCidAndLang): DtoCatalogueParamsWithCidAndLang;
-/**
- * Returns a memozied version of the prodParams
- */
-export declare function useMemoProductParams(prodParams: DtoProductParamsWithCid): DtoProductParamsWithCid;
-/**
- * Returns a memozied version of the prodParams
- */
-export declare function useMemoProductParamsWithLang(prodParams: DtoProductParamsWithCidAndLang): DtoProductParamsWithCidAndLang;
+import { DtoCatalogueParamsWithCid, DtoCatalogueParamsWithCidAndLang, DtoProductParamsWithCid, DtoProductParamsWithCidAndLang } from "@configura/web-api";
+/**
+ * Returns a memozied version of the catParams
+ */
+export declare function useMemoCatalogueParams(catParams: DtoCatalogueParamsWithCid): DtoCatalogueParamsWithCid;
+/**
+ * Returns a memozied version of the catParams
+ */
+export declare function useMemoCatalogueParamsWithLang(catParams: DtoCatalogueParamsWithCidAndLang): DtoCatalogueParamsWithCidAndLang;
+/**
+ * Returns a memozied version of the prodParams
+ */
+export declare function useMemoProductParams(prodParams: DtoProductParamsWithCid): DtoProductParamsWithCid;
+/**
+ * Returns a memozied version of the prodParams
+ */
+export declare function useMemoProductParamsWithLang(prodParams: DtoProductParamsWithCidAndLang): DtoProductParamsWithCidAndLang;
 //# sourceMappingURL=useCatParams.d.ts.map

package/dist/useCatParams.js

@@ -1,29 +1,29 @@
-import { useMemo } from "react";
-/**
- * Returns a memozied version of the catParams
- */
-export function useMemoCatalogueParams(catParams) {
-    const { cid, enterprise, prdCat, prdCatVersion, vendor, priceList } = catParams;
-    return useMemo(() => ({ cid, enterprise, prdCat, prdCatVersion, vendor, priceList }), [cid, enterprise, prdCat, prdCatVersion, priceList, vendor]);
-}
-/**
- * Returns a memozied version of the catParams
- */
-export function useMemoCatalogueParamsWithLang(catParams) {
-    const { lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList } = catParams;
-    return useMemo(() => ({ lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList }), [lang, cid, enterprise, prdCat, prdCatVersion, priceList, vendor]);
-}
-/**
- * Returns a memozied version of the prodParams
- */
-export function useMemoProductParams(prodParams) {
-    const { cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber } = prodParams;
-    return useMemo(() => ({ cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber }), [cid, enterprise, prdCat, prdCatVersion, priceList, vendor, partNumber]);
-}
-/**
- * Returns a memozied version of the prodParams
- */
-export function useMemoProductParamsWithLang(prodParams) {
-    const { lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber } = prodParams;
-    return useMemo(() => ({ lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber }), [lang, cid, enterprise, prdCat, prdCatVersion, priceList, vendor, partNumber]);
-}
+import { useMemo } from "react";
+/**
+ * Returns a memozied version of the catParams
+ */
+export function useMemoCatalogueParams(catParams) {
+    const { cid, enterprise, prdCat, prdCatVersion, vendor, priceList } = catParams;
+    return useMemo(() => ({ cid, enterprise, prdCat, prdCatVersion, vendor, priceList }), [cid, enterprise, prdCat, prdCatVersion, priceList, vendor]);
+}
+/**
+ * Returns a memozied version of the catParams
+ */
+export function useMemoCatalogueParamsWithLang(catParams) {
+    const { lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList } = catParams;
+    return useMemo(() => ({ lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList }), [lang, cid, enterprise, prdCat, prdCatVersion, priceList, vendor]);
+}
+/**
+ * Returns a memozied version of the prodParams
+ */
+export function useMemoProductParams(prodParams) {
+    const { cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber } = prodParams;
+    return useMemo(() => ({ cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber }), [cid, enterprise, prdCat, prdCatVersion, priceList, vendor, partNumber]);
+}
+/**
+ * Returns a memozied version of the prodParams
+ */
+export function useMemoProductParamsWithLang(prodParams) {
+    const { lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber } = prodParams;
+    return useMemo(() => ({ lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber }), [lang, cid, enterprise, prdCat, prdCatVersion, priceList, vendor, partNumber]);
+}

package/dist/useObservable.d.ts

@@ -1,5 +1,5 @@
-import { Observable } from "@configura/web-utilities";
-import { Dispatch, SetStateAction } from "react";
-export declare function useObservableWithCallback<T>(o: Observable<T> | undefined | null | false, callback: ((x: T) => void) | undefined): void;
-export declare function useObservableState<T>(o: Observable<T> | undefined, initValue: T): [T, Dispatch<SetStateAction<T>>];
+import { Observable } from "@configura/web-utilities";
+import { Dispatch, SetStateAction } from "react";
+export declare function useObservableWithCallback<T>(o: Observable<T> | undefined | null | false, callback: ((x: T) => void) | undefined): void;
+export declare function useObservableState<T>(o: Observable<T> | undefined, initValue: T): [T, Dispatch<SetStateAction<T>>];
 //# sourceMappingURL=useObservable.d.ts.map

package/dist/useObservable.js

@@ -1,18 +1,18 @@
-import { useEffect, useState } from "react";
-export function useObservableWithCallback(o, callback) {
-    useEffect(() => {
-        if (o === undefined || o === null || o === false || callback === undefined) {
-            return;
-        }
-        o.listen(callback);
-        return () => {
-            o.stopListen(callback);
-        };
-    }, [o, callback]);
-}
-export function useObservableState(o, initValue) {
-    const state = useState(initValue);
-    const [, set] = state;
-    useObservableWithCallback(o, set);
-    return state;
-}
+import { useEffect, useState } from "react";
+export function useObservableWithCallback(o, callback) {
+    useEffect(() => {
+        if (o === undefined || o === null || o === false || callback === undefined) {
+            return;
+        }
+        o.listen(callback);
+        return () => {
+            o.stopListen(callback);
+        };
+    }, [o, callback]);
+}
+export function useObservableState(o, initValue) {
+    const state = useState(initValue);
+    const [, set] = state;
+    useObservableWithCallback(o, set);
+    return state;
+}

package/dist/useRerender.d.ts

@@ -1,2 +1,2 @@
-export declare function useRerender(): () => void;
+export declare function useRerender(): () => void;
 //# sourceMappingURL=useRerender.d.ts.map

package/dist/useRerender.js

@@ -1,5 +1,5 @@
-import { useCallback, useState } from "react";
-export function useRerender() {
-    const [, updateState] = useState({});
-    return useCallback(() => updateState({}), []);
-}
+import { useCallback, useState } from "react";
+export function useRerender() {
+    const [, updateState] = useState({});
+    return useCallback(() => updateState({}), []);
+}

package/dist/useResize.d.ts

@@ -1,7 +1,7 @@
-interface Size {
-    width: number;
-    height: number;
-}
-export declare function useResize(element?: Element): [Size, () => void];
-export {};
+interface Size {
+    width: number;
+    height: number;
+}
+export declare function useResize(element?: Element): [Size, () => void];
+export {};
 //# sourceMappingURL=useResize.d.ts.map