@lucca-front/ng 16.4.2 → 16.4.3

package/src/components/cdk/_overlay.scss

@@ -1,72 +1,72 @@
-@use '@lucca-front/scss/src/components/keyframe/exports' as keyframe;
-
-:root {
-	--components-cdk-backdrop-opacity: 0.4;
-}
-
-.cdk-overlay-container {
-	position: fixed;
-	z-index: 1000;
-	height: 100%;
-	left: 0;
-	pointer-events: none;
-	top: 0;
-	width: 100%;
-}
-
-.cdk-overlay-connected-position-bounding-box {
-	position: absolute;
-	z-index: 1000;
-	display: flex;
-	flex-direction: column;
-	min-width: 1px;
-	min-height: 1px;
-}
-
-.cdk-overlay-pane {
-	box-sizing: border-box;
-	position: absolute;
-	pointer-events: auto;
-	z-index: 1000;
-}
-
-.cdk-overlay-backdrop {
-	bottom: 0;
-	left: 0;
-	opacity: 0;
-	pointer-events: auto;
-	position: absolute;
-	right: 0;
-	top: 0;
-	transition: opacity var(--commons-animations-durations-fast) ease-in-out;
-	z-index: 1000;
-
-	&.cdk-overlay-backdrop-showing {
-		opacity: 0.4;
-	}
-
-	&.cdk-overlay-dark-backdrop {
-		background-color: rgba(var(--colors-grey-900-rgb), 0.6);
-	}
-	&.cdk-overlay-transparent-backdrop {
-		background: 0 0;
-	}
-}
-
-.cdk-overlay-backdrop.cdk-overlay-backdrop-showing.lu-popup-backdrop {
-	@include keyframe.fadeIn;
-
-	opacity: var(--components-cdk-backdrop-opacity);
-}
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.cdk-overlay-pane {
-	// Option picker
-
-	&.mod-optionPicker {
-		min-width: 13rem;
-		max-width: 30rem;
-	}
-}
+@use '@lucca-front/scss/src/components/keyframe/exports' as keyframe;
+
+:root {
+	--components-cdk-backdrop-opacity: 0.4;
+}
+
+.cdk-overlay-container {
+	position: fixed;
+	z-index: 1000;
+	height: 100%;
+	left: 0;
+	pointer-events: none;
+	top: 0;
+	width: 100%;
+}
+
+.cdk-overlay-connected-position-bounding-box {
+	position: absolute;
+	z-index: 1000;
+	display: flex;
+	flex-direction: column;
+	min-width: 1px;
+	min-height: 1px;
+}
+
+.cdk-overlay-pane {
+	box-sizing: border-box;
+	position: absolute;
+	pointer-events: auto;
+	z-index: 1000;
+}
+
+.cdk-overlay-backdrop {
+	bottom: 0;
+	left: 0;
+	opacity: 0;
+	pointer-events: auto;
+	position: absolute;
+	right: 0;
+	top: 0;
+	transition: opacity var(--commons-animations-durations-fast) ease-in-out;
+	z-index: 1000;
+
+	&.cdk-overlay-backdrop-showing {
+		opacity: 0.4;
+	}
+
+	&.cdk-overlay-dark-backdrop {
+		background-color: rgba(var(--colors-grey-900-rgb), 0.6);
+	}
+	&.cdk-overlay-transparent-backdrop {
+		background: 0 0;
+	}
+}
+
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing.lu-popup-backdrop {
+	@include keyframe.fadeIn;
+
+	opacity: var(--components-cdk-backdrop-opacity);
+}
+
+// MODS
+// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+
+.cdk-overlay-pane {
+	// Option picker
+
+	&.mod-optionPicker {
+		min-width: 13rem;
+		max-width: 30rem;
+	}
+}

package/src/components/cdk/_textarea.scss

@@ -1,17 +1,17 @@
-:root {
-	--components-cdk-textarea-input-padding-horizontal: var(--spacings-XS);
-}
-
-.cdk-textarea-autosize {
-	resize: none;
-	line-height: 1.3;
-	box-sizing: content-box;
-	width: calc(100% - (2 * var(--components-cdk-textarea-input-padding-horizontal)));
-}
-
-.cdk-textarea-autosize-measuring {
-	height: auto !important;
-	overflow: hidden !important;
-	padding: 2px 0 !important;
-	box-sizing: content-box !important;
-}
+:root {
+	--components-cdk-textarea-input-padding-horizontal: var(--spacings-XS);
+}
+
+.cdk-textarea-autosize {
+	resize: none;
+	line-height: 1.3;
+	box-sizing: content-box;
+	width: calc(100% - (2 * var(--components-cdk-textarea-input-padding-horizontal)));
+}
+
+.cdk-textarea-autosize-measuring {
+	height: auto !important;
+	overflow: hidden !important;
+	padding: 2px 0 !important;
+	box-sizing: content-box !important;
+}

package/src/definitions/option/_option-item.scss

@@ -1,165 +1,165 @@
-@use '@lucca-front/icons/src/commons/utils/icon';
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-:root {
-	--components-options-item-padding-vertical: var(--spacings-XS);
-	--components-options-item-padding-horizontal: var(--spacings-XS);
-	--components-options-item-multiple-padding: 2.25rem;
-	--components-options-item-icon-color: var(--palettes-grey-800);
-
-	--components-options-checkbox-left: 0.5rem;
-	--components-options-checkbox-size: 1.25rem;
-	--components-options-checkbox-color: var(--palettes-primary-700);
-	--components-options-checkbox-border-radius: 6px;
-	--components-options-checkbox-border-color: var(--palettes-grey-700);
-	--components-options-establishment-multiple-padding: 2rem;
-}
-
-@mixin optionItemStyle {
-	:host {
-		display: block;
-	}
-
-	.optionItem {
-		position: relative;
-	}
-
-	.optionItem-value {
-		border-radius: var(--commons-borderRadius-M);
-		display: block;
-		padding: var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);
-		transition: background-color 50ms;
-		cursor: pointer;
-
-		&.is-selected {
-			background-color: var(--palettes-primary-50);
-
-			&:hover {
-				background-color: var(--palettes-primary-100);
-			}
-
-			&:active {
-				background-color: var(--palettes-primary-200);
-			}
-
-			&.is-highlighted {
-				background-color: var(--palettes-primary-100);
-
-				&:hover {
-					background-color: var(--palettes-primary-200);
-				}
-			}
-		}
-
-		&:hover {
-			background-color: var(--palettes-grey-50);
-		}
-
-		&.is-highlighted,
-		&.is-focus {
-			background-color: var(--palettes-grey-50);
-
-			&:hover {
-				background-color: var(--palettes-grey-50);
-			}
-
-			&:active {
-				background-color: var(--palettes-grey-100);
-			}
-		}
-
-		&:active {
-			background-color: var(--palettes-grey-100);
-		}
-	}
-
-	:host-context(.lu-select-value) {
-		.optionItem-value {
-			padding: 0;
-			overflow: hidden;
-			text-overflow: ellipsis;
-
-			&:hover,
-			&.is-focus,
-			&.is-highlighted {
-				background-color: inherit;
-			}
-		}
-	}
-
-	:host-context(.mod-multiple) {
-		.optionItem-value {
-			position: relative;
-			padding-left: var(--components-options-item-multiple-padding);
-
-			&::after,
-			&::before {
-				display: block;
-				position: absolute;
-				left: var(--components-options-checkbox-left);
-				top: 50%;
-				transform: translateY(-50%);
-			}
-
-			&::before {
-				content: '';
-				border-radius: var(--components-options-checkbox-border-radius);
-				box-shadow: inset 0 0 0 2px var(--components-options-checkbox-border-color);
-				display: block;
-				height: var(--components-options-checkbox-size);
-				transition-property: background-color, box-shadow;
-				transition-duration: var(--commons-animations-durations-fast);
-				width: var(--components-options-checkbox-size);
-			}
-
-			&::after {
-				@include icon.generate('sign_confirm');
-
-				color: transparent;
-				font-size: var(--sizes-S-lineHeight);
-				line-height: var(--components-options-checkbox-size);
-				position: absolute;
-				text-align: center;
-				transform: translateY(-50%) scale(0);
-				transition: all 100ms;
-				width: var(--components-options-checkbox-size);
-			}
-
-			&.is-selected {
-				&::before {
-					background-color: var(--components-options-checkbox-color);
-					box-shadow: inset 0 0 0 2px var(--components-options-checkbox-color);
-				}
-
-				&::after {
-					color: var(--colors-white-color);
-					transform: translateY(-50%) scale(1);
-				}
-			}
-
-			&.is-disabled {
-				--components-options-checkbox-border-color: var(--palettes-grey-500);
-			}
-
-			&:not(.is-disabled):hover {
-				&::before {
-					box-shadow: inset 0 0 0 2px var(--components-options-checkbox-color);
-				}
-			}
-		}
-
-		&.establishmentOption {
-			.optionItem-value {
-				position: relative;
-				padding-left: calc(var(--components-options-checkbox-size) + var(--spacings-XS) * 2);
-			}
-
-			.optionItem-value {
-				&::before,
-				&::after {
-					left: var(--spacings-XS);
-				}
-			}
-		}
-	}
-}
+@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+:root {
+	--components-options-item-padding-vertical: var(--spacings-XS);
+	--components-options-item-padding-horizontal: var(--spacings-XS);
+	--components-options-item-multiple-padding: 2.25rem;
+	--components-options-item-icon-color: var(--palettes-grey-800);
+
+	--components-options-checkbox-left: 0.5rem;
+	--components-options-checkbox-size: 1.25rem;
+	--components-options-checkbox-color: var(--palettes-primary-700);
+	--components-options-checkbox-border-radius: 6px;
+	--components-options-checkbox-border-color: var(--palettes-grey-700);
+	--components-options-establishment-multiple-padding: 2rem;
+}
+
+@mixin optionItemStyle {
+	:host {
+		display: block;
+	}
+
+	.optionItem {
+		position: relative;
+	}
+
+	.optionItem-value {
+		border-radius: var(--commons-borderRadius-M);
+		display: block;
+		padding: var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);
+		transition: background-color 50ms;
+		cursor: pointer;
+
+		&.is-selected {
+			background-color: var(--palettes-primary-50);
+
+			&:hover {
+				background-color: var(--palettes-primary-100);
+			}
+
+			&:active {
+				background-color: var(--palettes-primary-200);
+			}
+
+			&.is-highlighted {
+				background-color: var(--palettes-primary-100);
+
+				&:hover {
+					background-color: var(--palettes-primary-200);
+				}
+			}
+		}
+
+		&:hover {
+			background-color: var(--palettes-grey-50);
+		}
+
+		&.is-highlighted,
+		&.is-focus {
+			background-color: var(--palettes-grey-50);
+
+			&:hover {
+				background-color: var(--palettes-grey-50);
+			}
+
+			&:active {
+				background-color: var(--palettes-grey-100);
+			}
+		}
+
+		&:active {
+			background-color: var(--palettes-grey-100);
+		}
+	}
+
+	:host-context(.lu-select-value) {
+		.optionItem-value {
+			padding: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+
+			&:hover,
+			&.is-focus,
+			&.is-highlighted {
+				background-color: inherit;
+			}
+		}
+	}
+
+	:host-context(.mod-multiple) {
+		.optionItem-value {
+			position: relative;
+			padding-left: var(--components-options-item-multiple-padding);
+
+			&::after,
+			&::before {
+				display: block;
+				position: absolute;
+				left: var(--components-options-checkbox-left);
+				top: 50%;
+				transform: translateY(-50%);
+			}
+
+			&::before {
+				content: '';
+				border-radius: var(--components-options-checkbox-border-radius);
+				box-shadow: inset 0 0 0 2px var(--components-options-checkbox-border-color);
+				display: block;
+				height: var(--components-options-checkbox-size);
+				transition-property: background-color, box-shadow;
+				transition-duration: var(--commons-animations-durations-fast);
+				width: var(--components-options-checkbox-size);
+			}
+
+			&::after {
+				@include icon.generate('sign_confirm');
+
+				color: transparent;
+				font-size: var(--sizes-S-lineHeight);
+				line-height: var(--components-options-checkbox-size);
+				position: absolute;
+				text-align: center;
+				transform: translateY(-50%) scale(0);
+				transition: all 100ms;
+				width: var(--components-options-checkbox-size);
+			}
+
+			&.is-selected {
+				&::before {
+					background-color: var(--components-options-checkbox-color);
+					box-shadow: inset 0 0 0 2px var(--components-options-checkbox-color);
+				}
+
+				&::after {
+					color: var(--colors-white-color);
+					transform: translateY(-50%) scale(1);
+				}
+			}
+
+			&.is-disabled {
+				--components-options-checkbox-border-color: var(--palettes-grey-500);
+			}
+
+			&:not(.is-disabled):hover {
+				&::before {
+					box-shadow: inset 0 0 0 2px var(--components-options-checkbox-color);
+				}
+			}
+		}
+
+		&.establishmentOption {
+			.optionItem-value {
+				position: relative;
+				padding-left: calc(var(--components-options-checkbox-size) + var(--spacings-XS) * 2);
+			}
+
+			.optionItem-value {
+				&::before,
+				&::after {
+					left: var(--spacings-XS);
+				}
+			}
+		}
+	}
+}

package/src/definitions/option/_option-placeholder.scss

@@ -1,8 +1,8 @@
-@mixin optionPlaceholderStyle {
-	.optionPlaceholder {
-		display: block;
-		padding: var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);
-		font-style: italic;
-		color: var(--palettes-grey-600);
-	}
-}
+@mixin optionPlaceholderStyle {
+	.optionPlaceholder {
+		display: block;
+		padding: var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);
+		font-style: italic;
+		color: var(--palettes-grey-600);
+	}
+}

package/src/definitions/option/_option-searcher.scss

@@ -1,16 +1,16 @@
-@mixin optionSearcherStyle {
-	.textfield.mod-search {
-		width: 100%;
-	}
-
-	.textfield-input {
-		outline: none;
-	}
-
-	.checkbox.mod-formerEmployee {
-		padding: var(--spacings-XXS) var(--components-options-item-padding-horizontal);
-		border-bottom: var(--commons-divider-width) solid var(--commons-divider-color);
-		background-color: var(--palettes-grey-50);
-		font-style: italic;
-	}
-}
+@mixin optionSearcherStyle {
+	.textfield.mod-search {
+		width: 100%;
+	}
+
+	.textfield-input {
+		outline: none;
+	}
+
+	.checkbox.mod-formerEmployee {
+		padding: var(--spacings-XXS) var(--components-options-item-padding-horizontal);
+		border-bottom: var(--commons-divider-width) solid var(--commons-divider-color);
+		background-color: var(--palettes-grey-50);
+		font-style: italic;
+	}
+}

package/src/definitions/option/_option-selector.scss

@@ -1,11 +1,11 @@
-@mixin optionSelectorStyle {
-	.selectAll-button {
-		color: var(--palettes-grey-600);
-		font-size: var(--sizes-S-fontSize);
-		outline: none;
-
-		&:hover {
-			color: var(--palettes-grey-800);
-		}
-	}
-}
+@mixin optionSelectorStyle {
+	.selectAll-button {
+		color: var(--palettes-grey-600);
+		font-size: var(--sizes-S-fontSize);
+		outline: none;
+
+		&:hover {
+			color: var(--palettes-grey-800);
+		}
+	}
+}

package/src/definitions/select/_select-clearer.scss

@@ -1,14 +1,14 @@
-@mixin selectClearerStyle {
-	:host {
-		display: none;
-	}
-
-	:host-context(.textfield-input.is-filled) {
-		display: block;
-	}
-
-	// Disabled
-	:host-context(.textfield-input.is-disabled, .textfield-input[disabled]) {
-		display: none;
-	}
-}
+@mixin selectClearerStyle {
+	:host {
+		display: none;
+	}
+
+	:host-context(.textfield-input.is-filled) {
+		display: block;
+	}
+
+	// Disabled
+	:host-context(.textfield-input.is-disabled, .textfield-input[disabled]) {
+		display: none;
+	}
+}