@lucca-front/ng 20.2.0-rc.4 → 20.3.0-rc.1

package/src/components/_popup.scss

@@ -2,166 +2,174 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 @include namespace.appendRootVars {
-	--components-popup-XS: 25rem;
-	--components-popup-S: 30rem;
-	--components-popup-M: 40rem;
-	--components-popup-L: 50rem;
-	--components-popup-XL: 60rem;
-	--components-popup-padding-horizontal: var(--pr-t-spacings-300);
-	--components-popup-padding-vertical: var(--pr-t-spacings-200);
+	@layer components {
+		--components-popup-XS: 25rem;
+		--components-popup-S: 30rem;
+		--components-popup-M: 40rem;
+		--components-popup-L: 50rem;
+		--components-popup-XL: 60rem;
+		--components-popup-padding-horizontal: var(--pr-t-spacings-300);
+		--components-popup-padding-vertical: var(--pr-t-spacings-200);
+	}
 }
 
 .lu-popup-panel {
-	position: relative;
-	box-shadow: var(--pr-t-elevation-shadow-overlay);
-	background-color: var(--pr-t-elevation-surface-raised);
-	border-radius: var(--pr-t-border-radius-structure);
-	inline-size: var(--components-popup-M);
-	max-inline-size: 95%;
-	max-block-size: 90vh;
-	overflow: auto;
-	animation: popup var(--commons-animations-durations-standard) cubic-bezier(0.25, 0.8, 0.25, 1);
-
-	&.mod-XS {
-		inline-size: var(--components-popup-XS);
+	@layer components {
+		position: relative;
+		box-shadow: var(--pr-t-elevation-shadow-overlay);
+		background-color: var(--pr-t-elevation-surface-raised);
+		border-radius: var(--pr-t-border-radius-structure);
+		inline-size: var(--components-popup-M);
+		max-inline-size: 95%;
+		max-block-size: 90vh;
+		overflow: auto;
+		animation: popup var(--commons-animations-durations-standard) cubic-bezier(0.25, 0.8, 0.25, 1);
 	}
 
-	&.mod-S {
-		inline-size: var(--components-popup-S);
-	}
+	@layer mods {
+		&.mod-XS {
+			inline-size: var(--components-popup-XS);
+		}
 
-	&.mod-L {
-		inline-size: var(--components-popup-L);
-	}
+		&.mod-S {
+			inline-size: var(--components-popup-S);
+		}
 
-	&.mod-XL {
-		inline-size: var(--components-popup-XL);
-	}
+		&.mod-L {
+			inline-size: var(--components-popup-L);
+		}
 
-	&.mod-commInApp {
-		inline-size: 30rem;
+		&.mod-XL {
+			inline-size: var(--components-popup-XL);
+		}
 
-		.lu-modal-content {
-			text-align: center;
+		&.mod-commInApp {
+			inline-size: 30rem;
 
-			&::after {
-				content: none;
+			.lu-modal-content {
+				text-align: center;
+
+				&::after {
+					content: none;
+				}
 			}
-		}
 
-		.lu-modal-content-title {
-			color: var(--pr-t-color-text-heading);
-			font-size: var(--pr-t-font-heading-2-fontSize);
-			margin-block-start: 2.5rem;
-		}
+			.lu-modal-content-title {
+				color: var(--pr-t-color-text-heading);
+				font-size: var(--pr-t-font-heading-2-fontSize);
+				margin-block-start: 2.5rem;
+			}
 
-		.button {
-			margin-block-end: 2.5rem;
-		}
+			.button {
+				margin-block-end: 2.5rem;
+			}
 
-		.modal-visual {
-			margin-block: 4.5rem 0;
-			margin-inline: calc(var(--pr-t-spacings-400) * -1);
-		}
+			.modal-visual {
+				margin-block: 4.5rem 0;
+				margin-inline: calc(var(--pr-t-spacings-400) * -1);
+			}
 
-		.modal-visual-illustration {
-			vertical-align: bottom;
-		}
+			.modal-visual-illustration {
+				vertical-align: bottom;
+			}
 
-		.lu-modal-footer {
-			display: none;
+			.lu-modal-footer {
+				display: none;
+			}
 		}
 	}
 }
 
-.lu-modal-panel-inner {
-	display: flex;
-	flex-flow: column;
-	max-block-size: 90vh;
-}
+@layer components {
+	.lu-modal-panel-inner {
+		display: flex;
+		flex-flow: column;
+		max-block-size: 90vh;
+	}
 
-.lu-modal-container {
-	display: flex;
-	flex-flow: column;
-	flex-grow: 1;
-}
+	.lu-modal-container {
+		display: flex;
+		flex-flow: column;
+		flex-grow: 1;
+	}
 
-.lu-modal-header {
-	position: sticky;
-	inset-block-start: 0;
-	z-index: 5;
-	background-color: var(--pr-t-elevation-surface-raised);
-	padding-block: var(--components-popup-padding-vertical);
-	padding-inline: var(--components-popup-padding-horizontal) var(--pr-t-spacings-800);
-	border-block-end: 1px solid var(--commons-border-100);
-}
+	.lu-modal-header {
+		position: sticky;
+		inset-block-start: 0;
+		z-index: 5;
+		background-color: var(--pr-t-elevation-surface-raised);
+		padding-block: var(--components-popup-padding-vertical);
+		padding-inline: var(--components-popup-padding-horizontal) var(--pr-t-spacings-800);
+		border-block-end: 1px solid var(--commons-border-100);
+	}
 
-.lu-modal-header-title {
-	font: var(--pr-t-font-heading-2);
-	margin: 0;
-	padding: 0;
-}
+	.lu-modal-header-title {
+		font: var(--pr-t-font-heading-2);
+		margin: 0;
+		padding: 0;
+	}
 
-.button.lu-modal-header-close {
-	position: absolute;
-	inset-inline-end: 1.25rem;
-	inset-block-start: var(--pr-t-spacings-150);
-}
+	.button.lu-modal-header-close {
+		position: absolute;
+		inset-inline-end: 1.25rem;
+		inset-block-start: var(--pr-t-spacings-150);
+	}
 
-.lu-modal-content {
-	padding-block: var(--components-popup-padding-vertical);
-	padding-inline: var(--components-popup-padding-horizontal);
-	overflow: auto;
-	block-size: auto;
+	.lu-modal-content {
+		padding-block: var(--components-popup-padding-vertical);
+		padding-inline: var(--components-popup-padding-horizontal);
+		overflow: auto;
+		block-size: auto;
 
-	&.mod-noPadding {
-		padding: 0;
+		&.mod-noPadding {
+			padding: 0;
 
-		&::after {
-			padding-block-end: 0;
+			&::after {
+				padding-block-end: 0;
+			}
 		}
 	}
-}
-
-.lu-modal-footer {
-	position: sticky;
-	inset-block-end: 0;
-	z-index: 5;
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	background-color: var(--pr-t-elevation-surface-raised);
-	box-shadow: var(--pr-t-elevation-shadow-overflow);
-	margin-block-start: auto;
-	padding-block: var(--components-popup-padding-vertical);
-	padding-inline: var(--components-popup-padding-horizontal);
-}
 
-@include media.max('XXS') {
-	.lu-popup-panel {
-		border-radius: 0;
-		max-inline-size: none;
-		max-block-size: 100vh;
-		inline-size: 100%;
-		inline-size: stretch;
-		block-size: 100vh;
-		block-size: stretch;
+	.lu-modal-footer {
+		position: sticky;
+		inset-block-end: 0;
+		z-index: 5;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		background-color: var(--pr-t-elevation-surface-raised);
+		box-shadow: var(--pr-t-elevation-shadow-overflow);
+		margin-block-start: auto;
+		padding-block: var(--components-popup-padding-vertical);
+		padding-inline: var(--components-popup-padding-horizontal);
 	}
 
-	.lu-modal-panel-inner {
-		max-block-size: 100vh;
-		max-block-size: stretch;
-		block-size: 100vh;
-		block-size: stretch;
-	}
-}
+	@include media.max('XXS') {
+		.lu-popup-panel {
+			border-radius: 0;
+			max-inline-size: none;
+			max-block-size: 100vh;
+			inline-size: 100%;
+			inline-size: stretch;
+			block-size: 100vh;
+			block-size: stretch;
+		}
 
-@keyframes popup {
-	0% {
-		transform: scale(0.7);
+		.lu-modal-panel-inner {
+			max-block-size: 100vh;
+			max-block-size: stretch;
+			block-size: 100vh;
+			block-size: stretch;
+		}
 	}
 
-	100% {
-		transform: none;
+	@keyframes popup {
+		0% {
+			transform: scale(0.7);
+		}
+
+		100% {
+			transform: none;
+		}
 	}
 }

package/src/components/_sidepanel.scss

@@ -1,65 +1,75 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @include namespace.appendRootVars {
-	--components-sidepanel-XS: 25rem;
-	--components-sidepanel-S: 30rem;
-	--components-sidepanel-M: 40rem;
-	--components-sidepanel-L: 50rem;
-	--components-sidepanel-XL: 60rem;
+	@layer components {
+		--components-sidepanel-XS: 25rem;
+		--components-sidepanel-S: 30rem;
+		--components-sidepanel-M: 40rem;
+		--components-sidepanel-L: 50rem;
+		--components-sidepanel-XL: 60rem;
+	}
 }
 
-.lu-popup-panel {
-	&.mod-sidepanel {
-		position: fixed !important;
-		inset-block: 0;
-		inset-inline-end: 0;
-		inline-size: var(--components-sidepanel-M);
-		max-inline-size: 100%;
-		max-block-size: 100vh;
-		border-radius: 0;
-		animation-name: sidepanel;
-		transform-origin: center center;
+@layer mods {
+	.lu-popup-panel {
+		&.mod-sidepanel {
+			position: fixed !important;
+			inset-block: 0;
+			inset-inline-end: 0;
+			inline-size: var(--components-sidepanel-M);
+			max-inline-size: 100%;
+			max-block-size: 100vh;
+			border-radius: 0;
+			animation-name: sidepanel;
+			transform-origin: center center;
 
-		&.mod-XS {
-			inline-size: var(--components-sidepanel-XS);
-		}
+			&.mod-XS {
+				inline-size: var(--components-sidepanel-XS);
+			}
 
-		&.mod-S {
-			inline-size: var(--components-sidepanel-S);
-		}
+			&.mod-S {
+				inline-size: var(--components-sidepanel-S);
+			}
 
-		&.mod-L {
-			inline-size: var(--components-sidepanel-L);
-		}
+			&.mod-L {
+				inline-size: var(--components-sidepanel-L);
+			}
 
-		&.mod-XL {
-			inline-size: var(--components-sidepanel-XL);
+			&.mod-XL {
+				inline-size: var(--components-sidepanel-XL);
+			}
 		}
 	}
 }
 
 .lu-sidepanel-panel-inner,
 .lu-sidepanel-container {
-	display: flex;
-	flex-flow: column;
-	flex-grow: 1;
-	block-size: 100%;
-
-	.lu-modal-content {
+	@layer components {
+		display: flex;
+		flex-flow: column;
+		flex-grow: 1;
 		block-size: 100%;
+
+		.lu-modal-content {
+			block-size: 100%;
+		}
 	}
 }
 
 .lu-sidepanel-container {
-	overflow: auto;
+	@layer components {
+		overflow: auto;
+	}
 }
 
-@keyframes sidepanel {
-	0% {
-		transform: translate(100%, 0);
-	}
+@layer components {
+	@keyframes sidepanel {
+		0% {
+			transform: translate(100%, 0);
+		}
 
-	100% {
-		transform: translate(0, 0);
+		100% {
+			transform: translate(0, 0);
+		}
 	}
 }

package/src/components/cdk/_dragDrop.scss

@@ -1,66 +1,68 @@
 @use '@lucca-front/scss/src/commons/utils/form';
 
-.cdk-drag-placeholder {
-	box-shadow: form.fakeBorderOverlay(var(--palettes-neutral-200));
-	background-color: var(--palettes-neutral-100);
+@layer components {
+	.cdk-drag-placeholder {
+		box-shadow: form.fakeBorderOverlay(var(--palettes-neutral-200));
+		background-color: var(--palettes-neutral-100);
 
-	* {
-		opacity: 0;
+		* {
+			opacity: 0;
+		}
 	}
-}
 
-.cdk-drag-handle,
-.cdk-drag-placeholder {
-	cursor: move;
-}
+	.cdk-drag-handle,
+	.cdk-drag-placeholder {
+		cursor: move;
+	}
 
-.dragDrop-card {
-	z-index: 1;
-}
+	.dragDrop-card {
+		z-index: 1;
+	}
 
-.dragDrop-list {
-	border-radius: var(--pr-t-border-radius-default);
-}
+	.dragDrop-list {
+		border-radius: var(--pr-t-border-radius-default);
+	}
+
+	.dragDrop-item {
+		cursor: grab;
 
-.dragDrop-item {
-	cursor: grab;
+		&:not(.cdk-drag-placeholder) {
+			&:first-of-type {
+				border-start-start-radius: var(--pr-t-border-radius-default);
+				border-start-end-radius: var(--pr-t-border-radius-default);
+			}
 
-	&:not(.cdk-drag-placeholder) {
-		&:first-of-type {
-			border-start-start-radius: var(--pr-t-border-radius-default);
-			border-start-end-radius: var(--pr-t-border-radius-default);
+			&:last-of-type {
+				border-end-start-radius: var(--pr-t-border-radius-default);
+				border-end-end-radius: var(--pr-t-border-radius-default);
+			}
 		}
 
-		&:last-of-type {
-			border-end-start-radius: var(--pr-t-border-radius-default);
-			border-end-end-radius: var(--pr-t-border-radius-default);
+		&:active {
+			cursor: grabbing;
 		}
 	}
 
-	&:active {
-		cursor: grabbing;
+	.dragDrop-item-content {
+		padding: var(--pr-t-spacings-100);
 	}
-}
-
-.dragDrop-item-content {
-	padding: var(--pr-t-spacings-100);
-}
-
-.cdk-drag-preview {
-	z-index: 9999 !important;
-	box-sizing: border-box;
-	box-shadow: form.fakeBorderOverlay(var(--palettes-product-200));
-	background-color: var(--palettes-product-50);
-	border-radius: var(--pr-t-border-radius-default);
-	cursor: grabbing;
-}
 
-.cdk-drop-list-dragging {
-	.dragDrop-item {
+	.cdk-drag-preview {
+		z-index: 9999 !important;
+		box-sizing: border-box;
+		box-shadow: form.fakeBorderOverlay(var(--palettes-product-200));
+		background-color: var(--palettes-product-50);
+		border-radius: var(--pr-t-border-radius-default);
 		cursor: grabbing;
 	}
 
-	.cdk-drag:not(.cdk-drag-placeholder) {
-		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+	.cdk-drop-list-dragging {
+		.dragDrop-item {
+			cursor: grabbing;
+		}
+
+		.cdk-drag:not(.cdk-drag-placeholder) {
+			transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+		}
 	}
 }

package/src/components/cdk/_global.scss

@@ -1,19 +1,21 @@
 @use '@lucca-front/scss/src/commons/utils/overflow';
 
-.cdk-global-overlay-wrapper {
-	block-size: 100%;
-	inset-inline-start: 0;
-	inset-block-start: 0;
-	pointer-events: none;
-	inline-size: 100%;
-	display: flex;
-	position: absolute;
-	z-index: 1000;
-}
+@layer components {
+	.cdk-global-overlay-wrapper {
+		block-size: 100%;
+		inset-inline-start: 0;
+		inset-block-start: 0;
+		pointer-events: none;
+		inline-size: 100%;
+		display: flex;
+		position: absolute;
+		z-index: 1000;
+	}
 
-.cdk-global-scrollblock {
-	position: static !important;
-	inline-size: auto !important;
+	.cdk-global-scrollblock {
+		position: static !important;
+		inline-size: auto !important;
 
-	@include overflow.scrollblock('!important');
+		@include overflow.scrollblock('!important');
+	}
 }

package/src/components/cdk/_misc.scss

@@ -1,12 +1,14 @@
 .cdk-visually-hidden {
-	border: 0 !important;
-	clip: rect(1px, 1px, 1px, 1px) !important;
-	block-size: 1px !important;
-	inline-size: 1px !important;
-	margin: -1px !important;
-	overflow: hidden !important;
-	padding: 0 !important;
-	position: absolute !important;
-	white-space: nowrap !important;
-	contain: paint !important;
+	@layer utils {
+		border: 0 !important;
+		clip: rect(1px, 1px, 1px, 1px) !important;
+		block-size: 1px !important;
+		inline-size: 1px !important;
+		margin: -1px !important;
+		overflow: hidden !important;
+		padding: 0 !important;
+		position: absolute !important;
+		white-space: nowrap !important;
+		contain: paint !important;
+	}
 }