@configura/web-ui 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/index.d.ts

@@ -1,24 +1,30 @@
-export * from "./components/CanvasWrapper.js";
-export * from "./components/Configurator.js";
-export * from "./components/ConfiguratorWrapper.js";
-export * from "./components/CurrencyPrice.js";
-export * from "./components/ErrorContext.js";
-export * from "./components/ExpandableHeadingRow.js";
-export * from "./components/icons/Checkmark.js";
-export * from "./components/icons/Chevron.js";
-export * from "./components/Loading.js";
-export * from "./components/productConfiguration/CfgCheckboxesView.js";
-export * from "./components/productConfiguration/CfgCheckboxView.js";
-export * from "./components/productConfiguration/CfgDropdownOptionView.js";
-export * from "./components/productConfiguration/CfgDropdownView.js";
-export * from "./components/productConfiguration/CfgFeatureView.js";
-export * from "./components/productConfiguration/CfgGroupView.js";
-export * from "./components/productConfiguration/CfgProductConfigurationView.js";
-export * from "./components/ProductInformation.js";
-export * from "./components/TaskListView.js";
-export * from "./components/TaskStartView.js";
-export * from "./useObservable.js";
-export * from "./useRerender.js";
-export * from "./useResize.js";
-export * from "./useUniqueId.js";
+export * from "./components/CanvasWrapper.js";
+export * from "./components/Configurator.js";
+export * from "./components/ConfiguratorWrapper.js";
+export * from "./components/CurrencyPrice.js";
+export * from "./components/ErrorContext.js";
+export * from "./components/ExpandableHeadingRow.js";
+export * from "./components/icons/Checkmark.js";
+export * from "./components/icons/Chevron.js";
+export * from "./components/icons/CircleXmarkIcon.js";
+export * from "./components/icons/DownloadIcon.js";
+export * from "./components/icons/ErrorIcon.js";
+export * from "./components/Loading.js";
+export * from "./components/productConfiguration/CfgCheckboxesView.js";
+export * from "./components/productConfiguration/CfgCheckboxView.js";
+export * from "./components/productConfiguration/CfgDropdownOptionView.js";
+export * from "./components/productConfiguration/CfgDropdownView.js";
+export * from "./components/productConfiguration/CfgFeatureView.js";
+export * from "./components/productConfiguration/CfgGroupView.js";
+export * from "./components/productConfiguration/CfgProductConfigurationView.js";
+export * from "./components/ProductInformation.js";
+export * from "./components/ResetButton.js";
+export * from "./components/ShareView.js";
+export * from "./components/TaskListView.js";
+export * from "./components/TaskStartView.js";
+export * from "./useCatParams.js";
+export * from "./useObservable.js";
+export * from "./useRerender.js";
+export * from "./useResize.js";
+export * from "./useUniqueId.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,23 +1,29 @@
-export * from "./components/CanvasWrapper.js";
-export * from "./components/Configurator.js";
-export * from "./components/ConfiguratorWrapper.js";
-export * from "./components/CurrencyPrice.js";
-export * from "./components/ErrorContext.js";
-export * from "./components/ExpandableHeadingRow.js";
-export * from "./components/icons/Checkmark.js";
-export * from "./components/icons/Chevron.js";
-export * from "./components/Loading.js";
-export * from "./components/productConfiguration/CfgCheckboxesView.js";
-export * from "./components/productConfiguration/CfgCheckboxView.js";
-export * from "./components/productConfiguration/CfgDropdownOptionView.js";
-export * from "./components/productConfiguration/CfgDropdownView.js";
-export * from "./components/productConfiguration/CfgFeatureView.js";
-export * from "./components/productConfiguration/CfgGroupView.js";
-export * from "./components/productConfiguration/CfgProductConfigurationView.js";
-export * from "./components/ProductInformation.js";
-export * from "./components/TaskListView.js";
-export * from "./components/TaskStartView.js";
-export * from "./useObservable.js";
-export * from "./useRerender.js";
-export * from "./useResize.js";
-export * from "./useUniqueId.js";
+export * from "./components/CanvasWrapper.js";
+export * from "./components/Configurator.js";
+export * from "./components/ConfiguratorWrapper.js";
+export * from "./components/CurrencyPrice.js";
+export * from "./components/ErrorContext.js";
+export * from "./components/ExpandableHeadingRow.js";
+export * from "./components/icons/Checkmark.js";
+export * from "./components/icons/Chevron.js";
+export * from "./components/icons/CircleXmarkIcon.js";
+export * from "./components/icons/DownloadIcon.js";
+export * from "./components/icons/ErrorIcon.js";
+export * from "./components/Loading.js";
+export * from "./components/productConfiguration/CfgCheckboxesView.js";
+export * from "./components/productConfiguration/CfgCheckboxView.js";
+export * from "./components/productConfiguration/CfgDropdownOptionView.js";
+export * from "./components/productConfiguration/CfgDropdownView.js";
+export * from "./components/productConfiguration/CfgFeatureView.js";
+export * from "./components/productConfiguration/CfgGroupView.js";
+export * from "./components/productConfiguration/CfgProductConfigurationView.js";
+export * from "./components/ProductInformation.js";
+export * from "./components/ResetButton.js";
+export * from "./components/ShareView.js";
+export * from "./components/TaskListView.js";
+export * from "./components/TaskStartView.js";
+export * from "./useCatParams.js";
+export * from "./useObservable.js";
+export * from "./useRerender.js";
+export * from "./useResize.js";
+export * from "./useUniqueId.js";

package/dist/scss/_button.scss

@@ -1,52 +1,52 @@
-/**
- * Web UI Product information
- */
-@use "mixins";
-
-@mixin styles($textColor, $borderColor, $focusOutlineInnerColor, $focusOutlineOuterColor) {
-	@include mixins.cfgRootStyles;
-	display: inline-block;
-	background-color: transparent;
-	color: $textColor;
-	border-radius: 0.3em;
-	border: 0.1em solid $borderColor;
-	font-size: 1.3em;
-	font-weight: 500;
-	outline: none;
-	padding: 0.4em 0.8em;
-
-	&:focus {
-		@include mixins.focusOutline($focusOutlineInnerColor, $focusOutlineOuterColor);
-	}
-}
-
-@mixin classes(
-	$textColor,
-	$borderColor,
-	$focusOutlineInnerColor,
-	$focusOutlineOuterColor,
-	$disabledTextColor,
-	$disabledBorderColor
-) {
-	.cfgButton {
-		@include styles($textColor, $borderColor, $focusOutlineInnerColor, $focusOutlineOuterColor);
-
-		&[disabled] {
-			@include styles(
-				$disabledTextColor,
-				$disabledBorderColor,
-				$focusOutlineInnerColor,
-				$focusOutlineOuterColor
-			);
-		}
-	}
-
-	.cfgButtonRow {
-		@include mixins.cfgRootStyles;
-		&__button {
-			&:nth-child(n + 2) {
-				margin-left: 1em;
-			}
-		}
-	}
-}
+/**
+ * Web UI Product information
+ */
+@use "mixins";
+
+@mixin styles($textColor, $borderColor, $focusOutlineInnerColor, $focusOutlineOuterColor) {
+	@include mixins.cfgRootStyles;
+	display: inline-block;
+	background-color: transparent;
+	color: $textColor;
+	border-radius: 0.3em;
+	border: 0.1em solid $borderColor;
+	font-size: 1.3em;
+	font-weight: 500;
+	outline: none;
+	padding: 0.4em 0.8em;
+
+	&:focus {
+		@include mixins.focusOutline($focusOutlineInnerColor, $focusOutlineOuterColor);
+	}
+}
+
+@mixin classes(
+	$textColor,
+	$borderColor,
+	$focusOutlineInnerColor,
+	$focusOutlineOuterColor,
+	$disabledTextColor,
+	$disabledBorderColor
+) {
+	.cfgButton {
+		@include styles($textColor, $borderColor, $focusOutlineInnerColor, $focusOutlineOuterColor);
+
+		&[disabled] {
+			@include styles(
+				$disabledTextColor,
+				$disabledBorderColor,
+				$focusOutlineInnerColor,
+				$focusOutlineOuterColor
+			);
+		}
+	}
+
+	.cfgButtonRow {
+		@include mixins.cfgRootStyles;
+		&__button {
+			&:nth-child(n + 2) {
+				margin-left: 1em;
+			}
+		}
+	}
+}

package/dist/scss/_configurator.scss

@@ -1,88 +1,125 @@
-/**
- * Web UI Configurator
- */
-
-@use "mixins";
-
-@mixin classes($fontSize, $textColor, $headerUnderlineColor) {
-	.cfgConfiguratorWrapper {
-		@include mixins.cfgRootStyles;
-		color: $textColor;
-		display: flex;
-		height: 85vh;
-		flex-direction: column;
-
-		@media screen and (orientation: landscape) {
-			flex-direction: row;
-		}
-
-		.cfgTaskStart {
-			margin-top: 0.5em;
-			font-size: 1.2em;
-			font-weight: 500;
-
-			.cfgFormSelect {
-				padding: 0.5em;
-
-				&::after {
-					right: 0.5em;
-				}
-			}
-		}
-	}
-
-	.cfgCanvasWrapper {
-		@include mixins.cfgRootStyles;
-		position: relative;
-		height: 50rem;
-		user-select: none;
-
-		flex: 1 1 auto;
-		overflow: hidden;
-
-		& canvas {
-			outline: none;
-		}
-
-		@media screen and (orientation: landscape) {
-			height: 100%;
-			flex: 0 1 60%;
-		}
-	}
-
-	.cfgConfigurator {
-		@include mixins.cfgRootStyles;
-		@include mixins.cfgDefaultFont;
-		font-size: $fontSize;
-		color: $textColor;
-		min-width: 0;
-
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		flex: 0 0 50%;
-		overflow: auto;
-
-		@media screen and (orientation: landscape) {
-			height: 100%;
-			flex: 0 1 40%;
-		}
-	}
-
-	.cfgConfiguratorHeader {
-		border-bottom: 0.1em solid $headerUnderlineColor;
-		padding: 1.7em 1.7em 1.9em;
-		position: relative;
-
-		&__actions {
-			margin-top: 1em;
-		}
-	}
-
-	.cfgConfiguratorTree {
-		padding-top: 1em;
-		padding-top: 0.5em;
-		overflow-y: auto;
-		-webkit-overflow-scrolling: touch;
-	}
-}
+/**
+ * Web UI Configurator
+ */
+
+@use "mixins";
+
+@mixin classes($fontSize, $textColor, $grayTextColor, $headerUnderlineColor) {
+	.cfgConfiguratorWrapper {
+		@include mixins.cfgRootStyles;
+		color: $textColor;
+		display: flex;
+		height: 85vh;
+		flex-direction: column;
+
+		@media screen and (orientation: landscape) {
+			flex-direction: row;
+		}
+
+		.cfgTaskStart,
+		.cfgShare,
+		.cfgReset {
+			margin-top: 0.5em;
+			font-size: 1.2em;
+			font-weight: 500;
+
+			.cfgInput,
+			.cfgFormSelect,
+			button {
+				padding: 0.5em;
+			}
+		}
+
+		.cfgTaskStart {
+			.cfgFormSelect {
+				&::after {
+					right: 0.5em;
+				}
+			}
+		}
+
+		.cfgShare .cfgInput,
+		.cfgReset button {
+			appearance: none;
+			margin: 0;
+
+			background-color: transparent;
+			font-family: inherit;
+			font-size: inherit;
+			font-weight: inherit;
+			cursor: inherit;
+			line-height: inherit;
+			outline: none;
+		}
+
+		.cfgShare {
+			&__error {
+				display: inline-block;
+				.cfgErrorIcon {
+					padding-left: 0.25em;
+					margin-right: 0.75em;
+					width: 1.25em;
+					height: 1em;
+				}
+			}
+			&__grayed {
+				color: $grayTextColor;
+			}
+		}
+	}
+
+	.cfgCanvasWrapper {
+		@include mixins.cfgRootStyles;
+		position: relative;
+		height: 50rem;
+		user-select: none;
+
+		flex: 1 1 auto;
+		overflow: hidden;
+
+		& canvas {
+			outline: none;
+		}
+
+		@media screen and (orientation: landscape) {
+			height: 100%;
+			flex: 0 1 60%;
+		}
+	}
+
+	.cfgConfigurator {
+		@include mixins.cfgRootStyles;
+		@include mixins.cfgDefaultFont;
+		font-size: $fontSize;
+		color: $textColor;
+		min-width: 0;
+
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		flex: 0 0 50%;
+		overflow: auto;
+
+		@media screen and (orientation: landscape) {
+			height: 100%;
+			flex: 0 1 40%;
+		}
+	}
+
+	.cfgConfiguratorHeader {
+		border-bottom: 0.1em solid $headerUnderlineColor;
+		padding: 1.7em 1.7em 1.9em;
+		position: relative;
+
+		&__actions {
+			margin-top: 1em;
+		}
+	}
+
+	.cfgConfiguratorTree {
+		padding-top: 1em;
+		padding-top: 0.5em;
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+}

package/dist/scss/_expandable.scss

@@ -1,37 +1,37 @@
-@use "mixins";
-
-@mixin classes {
-	.cfgExpandableHeadingRow {
-		@include mixins.cfgRootStyles;
-		@include mixins.noButtonLook;
-		align-items: stretch;
-		display: flex;
-		height: 3.9em;
-		outline: 0;
-		position: relative;
-		width: 100%;
-
-		&--expandable {
-			cursor: pointer;
-		}
-
-		&__title {
-			align-items: center;
-			display: flex;
-			flex: 1 1 auto;
-			font-size: 1.5em;
-			font-weight: 500;
-			justify-content: flex-start;
-		}
-
-		&__icon {
-			align-items: center;
-			display: flex;
-			flex: 0 0 5em;
-			justify-content: center;
-			padding: 0 1.5em;
-		}
-
-		@content;
-	}
-}
+@use "mixins";
+
+@mixin classes {
+	.cfgExpandableHeadingRow {
+		@include mixins.cfgRootStyles;
+		@include mixins.noButtonLook;
+		align-items: stretch;
+		display: flex;
+		height: 3.9em;
+		outline: 0;
+		position: relative;
+		width: 100%;
+
+		&--expandable {
+			cursor: pointer;
+		}
+
+		&__title {
+			align-items: center;
+			display: flex;
+			flex: 1 1 auto;
+			font-size: 1.5em;
+			font-weight: 500;
+			justify-content: flex-start;
+		}
+
+		&__icon {
+			align-items: center;
+			display: flex;
+			flex: 0 0 5em;
+			justify-content: center;
+			padding: 0 1.5em;
+		}
+
+		@content;
+	}
+}