@lucca-front/ng 8.2.2 → 9.0.0-alpha.1

package/material/style/components/_datepicker.scss

@@ -1,116 +1,116 @@
-.mat-datepicker-content {
-	@include box-shadow-override();
-	@extend .card;
-	display: block;
-	margin-top: 2px;
-}
-
-.mat-datepicker-toggle {
-	@extend .textfield-suffix;
-	pointer-events: auto;
-
-	button {
-		background: none !important;
-		border-radius: 0;
-		height: auto;
-		line-height: 1;
-		width: auto;
-
-		&::after {
-			@include makeIcon('calendar');
-		}
-
-		mat-icon {
-			display: none;
-		}
-	}
-}
-
-
-// CALENDAR
-.mat-calendar {
-	width: 296px;
-
-	.mat-button {
-		@extend .button, .mod-text;
-		font-size: 1em;
-		text-decoration: none;
-	}
-
-	.mat-calendar-arrow {
-		display: none;
-	}
-
-	.mat-icon-button {
-		@extend .button, .mod-text;
-		border-radius: 3px;
-	}
-
-	.mat-calendar-content {
-		padding: 0 0.5em 0.5em 0.5em;
-	}
-}
-
-// CALENDAR HEADER
-.mat-calendar-controls {
-	margin-top: 0 !important;
-	.mat-icon-button[disabled] {
-		opacity: .4
-	}
-	.mat-calendar-period-button {
-		flex: 1;
-		order: 1;
-	}
-
-	.mat-calendar-next-button {
-		order: 2;
-	}
-
-	.mat-calendar-spacer {
-		display: none;
-	}
-}
-
-// TABLE
-.mat-calendar-body-cell {
-	.mat-calendar-body-cell-content {
-		box-shadow: fakeborderoverlay(_theme('commons.divider.color'));
-		border: none;
-		border-radius: 0;
-		color: _color("text.light");
-		height: 100%;
-		left: 0;
-		top: 0;
-		width: 100%;
-
-		&:hover,
-		&.mat-calendar-body-selected {
-			background-color: _color('primary');
-			color: _color('primary', 'text');
-		}
-	}
-
-	&.mat-calendar-body-disabled {
-		opacity: 0.5;
-		pointer-events: none;
-	}
-}
-
-// SPECIFIC MONTH-VIEW
-md-month-view,
-mat-month-view {
-	.mat-calendar-table-header th {
-		color: _color("text.light");
-		font-size: 0.9em;
-		padding-bottom: 0.4em;
-	}
-
-	.mat-calendar-body-label {
-		overflow: hidden;
-		text-indent: -999px;
-
-		&[colspan='7'] {
-			display: none; // REMOVE MONTH LABEL ABOVE NUMBERS IF FULL WIDTH
-		}
-	}
-}
+// .mat-datepicker-content {
+// 	@include box-shadow-override();
+// 	@extend .card;
+// 	display: block;
+// 	margin-top: 2px;
+// }
+
+// .mat-datepicker-toggle {
+// 	@extend .textfield-suffix;
+// 	pointer-events: auto;
+
+// 	button {
+// 		background: none !important;
+// 		border-radius: 0;
+// 		height: auto;
+// 		line-height: 1;
+// 		width: auto;
+
+// 		&::after {
+// 			@include makeIcon('calendar');
+// 		}
+
+// 		mat-icon {
+// 			display: none;
+// 		}
+// 	}
+// }
+
+
+// // CALENDAR
+// .mat-calendar {
+// 	width: 296px;
+
+// 	.mat-button {
+// 		@extend .button, .mod-text;
+// 		font-size: 1em;
+// 		text-decoration: none;
+// 	}
+
+// 	.mat-calendar-arrow {
+// 		display: none;
+// 	}
+
+// 	.mat-icon-button {
+// 		@extend .button, .mod-text;
+// 		border-radius: 3px;
+// 	}
+
+// 	.mat-calendar-content {
+// 		padding: 0 0.5em 0.5em 0.5em;
+// 	}
+// }
+
+// // CALENDAR HEADER
+// .mat-calendar-controls {
+// 	margin-top: 0 !important;
+// 	.mat-icon-button[disabled] {
+// 		opacity: .4
+// 	}
+// 	.mat-calendar-period-button {
+// 		flex: 1;
+// 		order: 1;
+// 	}
+
+// 	.mat-calendar-next-button {
+// 		order: 2;
+// 	}
+
+// 	.mat-calendar-spacer {
+// 		display: none;
+// 	}
+// }
+
+// // TABLE
+// .mat-calendar-body-cell {
+// 	.mat-calendar-body-cell-content {
+// 		box-shadow: fakeborderoverlay(_theme('commons.divider.color'));
+// 		border: none;
+// 		border-radius: 0;
+// 		color: _color("text.light");
+// 		height: 100%;
+// 		left: 0;
+// 		top: 0;
+// 		width: 100%;
+
+// 		&:hover,
+// 		&.mat-calendar-body-selected {
+// 			background-color: _color('primary');
+// 			color: _color('primary', 'text');
+// 		}
+// 	}
+
+// 	&.mat-calendar-body-disabled {
+// 		opacity: 0.5;
+// 		pointer-events: none;
+// 	}
+// }
+
+// // SPECIFIC MONTH-VIEW
+// md-month-view,
+// mat-month-view {
+// 	.mat-calendar-table-header th {
+// 		color: _color("text.light");
+// 		font-size: 0.9em;
+// 		padding-bottom: 0.4em;
+// 	}
+
+// 	.mat-calendar-body-label {
+// 		overflow: hidden;
+// 		text-indent: -999px;
+
+// 		&[colspan='7'] {
+// 			display: none; // REMOVE MONTH LABEL ABOVE NUMBERS IF FULL WIDTH
+// 		}
+// 	}
+// }

package/material/style/components/_dialog.scss

@@ -1,29 +1,29 @@
-.mat-dialog-container {
-	@extend .card;
+// .mat-dialog-container {
+// 	@extend .card;
 
-	background: white;
-	max-width: 80vw; // MIGHT BE CHANGED INTO A THEME VARIABLE
-	overflow: visible !important;
-	padding: 0 !important;
-}
+// 	background: white;
+// 	max-width: 80vw; // MIGHT BE CHANGED INTO A THEME VARIABLE
+// 	overflow: visible !important;
+// 	padding: 0 !important;
+// }
 
-.cdk-overlay-pane {
-	&.mod-sidePanel {
-		position: fixed !important;
-		top: _theme('commons.banner-height');
-		right: 0;
-		bottom: 0;
-		width: 60%;
-		max-width: 800px;
-		@include media_smaller_than("s") {
-			width: 80%;
-		}
-		@include media_smaller_than("xs") {
-			width: 100%;
-		}
+// .cdk-overlay-pane {
+// 	&.mod-sidePanel {
+// 		position: fixed !important;
+// 		top: _theme('commons.banner-height');
+// 		right: 0;
+// 		bottom: 0;
+// 		width: 60%;
+// 		max-width: 800px;
+// 		@include media_smaller_than("s") {
+// 			width: 80%;
+// 		}
+// 		@include media_smaller_than("xs") {
+// 			width: 100%;
+// 		}
 
-		.mat-dialog-container {
-			max-width: 100%;
-		}
-	}
-}
+// 		.mat-dialog-container {
+// 			max-width: 100%;
+// 		}
+// 	}
+// }

package/material/style/components/_input.scss

@@ -1,3 +1,3 @@
-input.mat-input-element {
-	margin-top: 0 !important;
-}
+// input.mat-input-element {
+// 	margin-top: 0 !important;
+// }

package/material/style/components/_menu.scss

@@ -1,21 +1,21 @@
-.mat-menu-item {
-	@extend .textfield-options-entry;
-	background-color: transparent;
-	&.mat-selected,
-	&.mat-active {
-		@extend .is-focus;
-	}
-}
+// .mat-menu-item {
+// 	@extend .textfield-options-entry;
+// 	background-color: transparent;
+// 	&.mat-selected,
+// 	&.mat-active {
+// 		@extend .is-focus;
+// 	}
+// }
 
-.mat-menu-panel {
-	@extend .textfield-options;
-	position: relative;
-	top: auto;
-	opacity: 1;
-	transform: none;
-}
+// .mat-menu-panel {
+// 	@extend .textfield-options;
+// 	position: relative;
+// 	top: auto;
+// 	opacity: 1;
+// 	transform: none;
+// }
 
-.mat-menu-content {
-	padding-top: 0 !important;
-	padding-bottom: 0 !important;
-}
+// .mat-menu-content {
+// 	padding-top: 0 !important;
+// 	padding-bottom: 0 !important;
+// }

package/material/style/components/_mixins.scss

@@ -1,8 +1,8 @@
-@mixin box-shadow-override($hasHover: false) {
-	box-shadow: unquote(_theme('commons.elevations.elevation-1')) !important;
-	@if $hasHover {
-		&:hover {
-			box-shadow: unquote(_theme('commons.elevations.elevation-3')) !important;
-		}
-	}
-}
+// @mixin box-shadow-override($hasHover: false) {
+// 	box-shadow: unquote(_theme('commons.elevations.elevation-1')) !important;
+// 	@if $hasHover {
+// 		&:hover {
+// 			box-shadow: unquote(_theme('commons.elevations.elevation-3')) !important;
+// 		}
+// 	}
+// }

package/material/style/components/_options.scss

@@ -1,24 +1,24 @@
-.mat-option {
-	@extend .textfield-options-entry;
+// .mat-option {
+// 	@extend .textfield-options-entry;
 
-	display: block;
-	line-height: unset !important;
-	outline: none;
-	&.mat-selected,
-	&.mat-active {
-		@extend .textfield-options-entry, .is-focus;
-	}
+// 	display: block;
+// 	line-height: unset !important;
+// 	outline: none;
+// 	&.mat-selected,
+// 	&.mat-active {
+// 		@extend .textfield-options-entry, .is-focus;
+// 	}
 
-	.mat-option-ripple {
-		bottom: 0;
-		left: 0;
-		pointer-events: none;
-		position: absolute;
-		right: 0;
-		top: 0;
-	}
+// 	.mat-option-ripple {
+// 		bottom: 0;
+// 		left: 0;
+// 		pointer-events: none;
+// 		position: absolute;
+// 		right: 0;
+// 		top: 0;
+// 	}
 
-	.mat-ripple {
-		overflow: hidden;
-	}
-}
+// 	.mat-ripple {
+// 		overflow: hidden;
+// 	}
+// }

package/material/style/components/_select.scss

@@ -1,42 +1,42 @@
-mat-select {
-	@extend .textfield;
-}
+// mat-select {
+// 	@extend .textfield;
+// }
 
-.textfield.mod-framed mat-select {
-	padding: 0 !important;
-	.mat-select-trigger {
-		font-size: 1rem;
-		margin: 2.2rem 1rem 0.7rem;
-		&::after {
-			bottom: -0.7rem;
-			content: '';
-			display: block;
-			left: -1rem;
-			position: absolute;
-			right: -1rem;
-			top: -2.2rem;
-		}
-	}
-}
+// .textfield.mod-framed mat-select {
+// 	padding: 0 !important;
+// 	.mat-select-trigger {
+// 		font-size: 1rem;
+// 		margin: 2.2rem 1rem 0.7rem;
+// 		&::after {
+// 			bottom: -0.7rem;
+// 			content: '';
+// 			display: block;
+// 			left: -1rem;
+// 			position: absolute;
+// 			right: -1rem;
+// 			top: -2.2rem;
+// 		}
+// 	}
+// }
 
-.textfield:not(.mod-compact) mat-select {
-	padding-top: 0 !important;
-}
+// .textfield:not(.mod-compact) mat-select {
+// 	padding-top: 0 !important;
+// }
 
-.mat-select-trigger {
-	height: 1.1rem !important;
-	min-width: 0 !important;
-	text-overflow: ellipsis;
-}
+// .mat-select-trigger {
+// 	height: 1.1rem !important;
+// 	min-width: 0 !important;
+// 	text-overflow: ellipsis;
+// }
 
-.mat-select-placeholder {
-	width: auto !important;
-}
-.mat-select-panel {
-	@extend .textfield-options;
+// .mat-select-placeholder {
+// 	width: auto !important;
+// }
+// .mat-select-panel {
+// 	@extend .textfield-options;
 
-	position: relative;
-	top: auto;
-	transform: none;
-	opacity: 1;
-}
+// 	position: relative;
+// 	top: auto;
+// 	transform: none;
+// 	opacity: 1;
+// }

package/material/style/components/_tooltip.scss

@@ -1,21 +1,21 @@
-.mat-tooltip {
-	border-radius: _theme("commons.border.radius");
-	background-color: _component("tooltip.background-color");
-	color: _component("tooltip.color");
-	font-size: _theme("sizes.smaller.font-size") !important;
-	margin: 0.5em !important;
-	padding: .25rem .5rem !important;
-	line-height: 1rem;
+// .mat-tooltip {
+// 	border-radius: _theme("commons.border.radius");
+// 	background-color: _component("tooltip.background-color");
+// 	color: _component("tooltip.color");
+// 	font-size: _theme("sizes.smaller.font-size") !important;
+// 	margin: 0.5em !important;
+// 	padding: .25rem .5rem !important;
+// 	line-height: 1rem;
 
-	@mixin tooltipColoring($palette) {
-		background: _color($palette);
-		color: _color($palette, "text");
-	}
+// 	@mixin tooltipColoring($palette) {
+// 		background: _color($palette);
+// 		color: _color($palette, "text");
+// 	}
 
-	// palette colors
-	@each $name, $palette in _getMap("palettes") {
-		&.palette-#{$name} {
-			@include tooltipColoring($name);
-		}
-	}
-}
+// 	// palette colors
+// 	@each $name, $palette in _getMap("palettes") {
+// 		&.palette-#{$name} {
+// 			@include tooltipColoring($name);
+// 		}
+// 	}
+// }

package/material/style/main-v11.overridable.scss

@@ -1,15 +1,15 @@
-/*
- * @deprecated
- * This entry point will be deprecated in LF 8.
- * This file uses old @angular/material syntax and is not working on v12+.
- */
+// /*
+//  * @deprecated
+//  * This entry point will be deprecated in LF 8.
+//  * This file uses old @angular/material syntax and is not working on v12+.
+//  */
 
-@import '@angular/material/theming';
+// @import '@angular/material/theming';
 
-@import 'theming.overridable';
-@import 'components';
+// @import 'theming.overridable';
+// @import 'components';
 
-// CHANGE DEFAULT FONTS TO LUCCA-FRONT FONTS
-@include angular-material-typography(
-	mat-typography-config($font-family: _theme('commons.font.family', true))
-);
+// // CHANGE DEFAULT FONTS TO LUCCA-FRONT FONTS
+// @include angular-material-typography(
+// 	mat-typography-config($font-family: _theme('commons.font.family', true))
+// );

package/material/style/main-v11.scss

@@ -1,15 +1,15 @@
-/*
- * @deprecated
- * This entry point will be deprecated in LF 8.
- * This file uses old @angular/material syntax and is not working on v12+.
- */
+// /*
+//  * @deprecated
+//  * This entry point will be deprecated in LF 8.
+//  * This file uses old @angular/material syntax and is not working on v12+.
+//  */
 
-@import '@angular/material/theming';
+// @import '@angular/material/theming';
 
-@import 'theming';
-@import 'components';
+// @import 'theming';
+// @import 'components';
 
-// CHANGE DEFAULT FONTS TO LUCCA-FRONT FONTS
-@include angular-material-typography(
-	mat-typography-config($font-family: _theme('commons.font.family', true))
-);
+// // CHANGE DEFAULT FONTS TO LUCCA-FRONT FONTS
+// @include angular-material-typography(
+// 	mat-typography-config($font-family: _theme('commons.font.family', true))
+// );

package/material/style/main.overridable.scss

@@ -1,11 +1,11 @@
-@use '@angular/material' as mat;
+// @use '@angular/material' as mat;
 
-@import 'theming.overridable';
-@import 'components';
+// @import 'theming.overridable';
+// @import 'components';
 
-// CHANGE DEFAULT FONTS TO LUCCA-FRONT FONTS
-$lucca-front-mat-typography: mat.define-typography-config(
-  $font-family: _theme('commons.font.family', true),
-);
+// // CHANGE DEFAULT FONTS TO LUCCA-FRONT FONTS
+// $lucca-front-mat-typography: mat.define-typography-config(
+//   $font-family: _theme('commons.font.family', true),
+// );
 
-@include mat.all-component-typographies($lucca-front-mat-typography);
+// @include mat.all-component-typographies($lucca-front-mat-typography);

package/material/style/main.scss

@@ -1,11 +1,11 @@
-@use '@angular/material' as mat;
+// @use '@angular/material' as mat;
 
-@import 'theming';
-@import 'components';
+// @import 'theming';
+// @import 'components';
 
-// CHANGE DEFAULT FONTS TO LUCCA-FRONT FONTS
-$lucca-front-mat-typography: mat.define-typography-config(
-  $font-family: _theme('commons.font.family', true),
-);
+// // CHANGE DEFAULT FONTS TO LUCCA-FRONT FONTS
+// $lucca-front-mat-typography: mat.define-typography-config(
+//   $font-family: _theme('commons.font.family', true),
+// );
 
-@include mat.all-component-typographies($lucca-front-mat-typography);
+// @include mat.all-component-typographies($lucca-front-mat-typography);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/ng",
-  "version": "8.2.2",
+  "version": "9.0.0-alpha.1",
   "description": "A library of icons made by the team @Lucca",
   "repository": {
     "type": "git",

package/style/_components.scss

@@ -1,12 +1,11 @@
-@import 'components/input';
-@import 'components/picker';
-@import 'components/popover';
+// @import 'components/input';
+// @import 'components/picker';
+// @import 'components/popover';
 @import 'components/popup';
-@import 'components/dropdown';
-@import 'components/sidepanel';
+// @import 'components/dropdown';
+// @import 'components/sidepanel';
 @import 'components/cdk/overlay';
-@import 'components/cdk/textarea';
-@import 'components/cdk/misc';
+// @import 'components/cdk/textarea';
+// @import 'components/cdk/misc';
 @import 'components/cdk/global';
-@import 'components/cdk/dragDrop';
-
+// @import 'components/cdk/dragDrop';