@inseefr/lunatic 3.0.0-rc.5 → 3.0.0-rc.8

package/lib/css/components/Combobox.scss

@@ -0,0 +1,206 @@
+@mixin preventSelect() {
+	-moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+}
+
+@mixin placeholder {
+	color: gray;
+	@include defaultFont();
+	font-size: 15px;
+	line-height: 34px;
+	vertical-align: middle;
+	font-weight: normal;
+}
+
+@mixin defaultFont {
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+@mixin selection() {
+	@include defaultFont();
+}
+
+.lunatic-combo-box-container {
+	position: relative;
+	width: 100%;
+
+	&.default-style {
+		--color-combo-box-selected: Cornsilk;
+		--color-primary-dark: DarkGreen;
+		--color-primary-main: FloralWhite;
+		--color-combo-box-background: snow;
+		--color-disabled: Gainsboro;
+		--color-primary-light: GreenYellow;
+
+		margin-bottom: 10px;
+		.lunatic-combo-box {
+			min-height: 30px;
+			min-width: 260px;
+			width: 100%;
+			.lunatic-combo-box-content {
+				.lunatic-combo-box-selection {
+					border-radius: 5px;
+					border: 2px solid var(--color-primary-dark);
+					background-color: var(--color-combo-box-background);
+					&:hover {
+						border-color: var(--color-primary-main);
+					}
+					.lunatic-combo-box-input {
+						height: 34px;
+						line-height: 34px;
+						font-size: 15px;
+						padding-left: 4px;
+						@include selection();
+
+						&::placeholder {
+							@include placeholder();
+						}
+					}
+
+					.lunatic-combo-box-selected {
+						height: 42px;
+						line-height: 34px;
+						background-color: var(--color-combo-box-background);
+						border-radius: 5px;
+						padding-left: 4px;
+						@include selection();
+						outline: none;
+						overflow-y: hidden;
+						display: block;
+						@include placeholder();
+
+						.selection {
+							display: inline-block;
+							line-height: 34px;
+							font-size: 15px;
+						}
+
+						&.disabled {
+							background-color: var(--color-disabled);
+						}
+					}
+				}
+
+				.lunatic-combo-box-panel {
+					@include defaultFont();
+					height: 0;
+					opacity: 0;
+					background-color: var(--color-combo-box-background);
+					transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+						transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+					&.expanded {
+						border: solid 1px var(--color-primary-light);
+						opacity: 1;
+						min-height: 30px;
+						height: max-content;
+						box-shadow: 0 2px 2px grey;
+						border-radius: 4px;
+					}
+					.lunatic-combo-box-option {
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						overflow: hidden;
+						margin-bottom: 0.1em;
+						line-height: 2rem;
+						display: block;
+
+						&.selected {
+							color: var(--color-primary-dark);
+							background-color: var(--color-combo-box-selected);
+						}
+						&:hover {
+							background-color: var(--color-primary-main);
+							color: var(--color-combo-box-background);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.lunatic-combo-box-fab {
+		position: absolute;
+		right: 4px;
+		top: 8px;
+		z-index: 0;
+		&.focused {
+			z-index: 1;
+		}
+
+		.lunatic-icon {
+			svg {
+				fill: white;
+				width: 16px;
+				height: 16px;
+				margin: auto;
+			}
+		}
+	}
+
+	.lunatic-combo-box {
+		position: relative;
+		z-index: 0;
+
+		&:focus {
+			outline: none;
+		}
+
+		&.focused {
+			z-index: 1;
+		}
+
+		.lunatic-combo-box-content {
+			position: absolute;
+			width: 100%;
+
+			.lunatic-combo-box-selection {
+				position: relative;
+				.lunatic-combo-box-input {
+					border: none;
+					margin: 0;
+					padding: 0;
+					background-color: transparent;
+					&:focus {
+						outline: none;
+					}
+
+					width: 100%;
+				}
+
+				.lunatic-combo-box-selected {
+					// position: absolute;
+					top: 0;
+					white-space: nowrap;
+					overflow-x: hidden;
+					width: 100%;
+					display: none;
+					&.displayed {
+						display: block;
+					}
+				}
+			}
+
+			ul,
+			li,
+			div,
+			span {
+				margin: 0;
+				padding: 0;
+				border: none;
+				list-style: none;
+			}
+
+			.lunatic-combo-box-panel {
+				&:focus {
+					outline: none;
+				}
+				.lunatic-combo-box-option {
+					white-space: nowrap;
+					@include preventSelect();
+				}
+			}
+		}
+	}
+}

package/lib/css/components/ComponentErrors.scss

@@ -0,0 +1,5 @@
+.lunatic-errors {
+	.lunatic-error {
+		color: red;
+	}
+}

package/lib/css/components/Datepicker.scss

@@ -0,0 +1,19 @@
+.lunaticDatepickerFields {
+  display: flex;
+  align-items: flex-end;
+  gap: 1rem;
+}
+
+.lunaticDatepickerField input {
+  width: 3.5em;
+}
+
+.lunaticDatepickerFieldLarge input {
+  width: 4.5em;
+}
+
+.lunaticDatepickerHint {
+  display: block;
+  font-weight: 400;
+  font-size: .9em;
+}

package/lib/css/components/Declarations.scss

@@ -0,0 +1,42 @@
+.lunatic-component {
+	.lunatic-declarations {
+		margin-bottom: 0.4rem;
+	}
+
+	.declaration-instruction {
+		font-style: italic;
+		font-size: 80%;
+	}
+
+	.declaration-statement {
+		font-style: italic;
+		font-size: 80%;
+		color: blue;
+	}
+
+	.declaration-help {
+		font-style: italic;
+		font-size: 80%;
+		color: green;
+	}
+
+	.CODECARD {
+		font-style: bold;
+		font-size: 80%;
+		color: grey;
+		border: solid 1px grey;
+		width: fit-content;
+		padding: 1em;
+		&:before {
+			content: "→ "
+		}
+	}
+
+	.declaration-message_filter {
+		font-size: 100%;
+		color: rgb(73, 66, 66);
+		&:before {
+			content: '→ ';
+		}
+	}
+}

package/lib/css/components/Dragger.scss

@@ -0,0 +1,8 @@
+.lunatic-dragger {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+}

package/lib/css/components/Dropdown.scss

@@ -0,0 +1,38 @@
+@mixin defaultFont {
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+@mixin disableSelect {
+	-moz-user-select: none; /* Firefox */
+	-ms-user-select: none; /* Internet Explorer */
+	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
+	-webkit-user-select: none; /* Chrome, Safari, and Opera */
+	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
+}
+
+.lunatic-component {
+	.lunatic-dropdown {
+		.lunatic-dropdown-option {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+			margin-bottom: 0.1em;
+			line-height: 2rem;
+			display: block;
+
+			&.selected {
+				color: var(--color-primary-dark);
+				background-color: goldenrod;
+			}
+
+			&:hover {
+				background-color: var(--color-primary-main);
+				color: white;
+			}
+
+			.prefix {
+				color: red;
+			}
+		}
+	}
+}

package/lib/css/components/Duration.scss

@@ -0,0 +1,9 @@
+.duration-fields,
+.duration-field {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.duration-field {
+  gap: .5rem;
+}

package/lib/css/components/Fieldset.scss

@@ -0,0 +1,5 @@
+fieldset {
+	border: 0;
+	margin: 0;
+	padding: 0;
+}

package/lib/css/components/IconButton.scss

@@ -0,0 +1,38 @@
+.lunatic-icon {
+	display: flex;
+	align-items: center;
+}
+
+// floating action button
+.lunatic-fab {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	margin: 0;
+	padding: 0;
+	outline: inherit;
+	border: none;
+	background-color: royalblue;
+	box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%),
+		0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
+
+	&:hover {
+		cursor: pointer;
+		background-color: navy;
+		transition: background-color 1s;
+	}
+
+	&.mini {
+		width: 18px;
+		height: 18px;
+	}
+
+	&:focus {
+		border: solid 1px black;
+	}
+
+	&:disabled {
+		cursor: default;
+		background-color: darkgray;
+	}
+}

package/lib/css/components/Input.scss

@@ -0,0 +1,42 @@
+.lunatic-component {
+	.lunatic-input,
+	.lunatic-datepicker,
+	.lunatic-textarea,
+	.lunatic-input-number {
+		label {
+			font-size: 12px;
+			.label-description {
+				font-size: 12px;
+				font-weight: lighter;
+				display: block;
+			}
+		}
+		input {
+			font: inherit;
+			border: 0;
+			border-bottom: 0.125rem double rgba(0, 0, 0, 0.42);
+			margin: 0;
+			padding: 0.375rem 0 0.375rem 0.4375rem;
+			display: inline-block;
+			min-width: 0;
+			box-sizing: content-box;
+			background: none;
+			&:focus {
+				outline: none;
+				border-bottom: 0.125rem solid var(--color-primary-main);
+			}
+			&:hover {
+				border-bottom: 0.125rem solid black;
+			}
+			&:read-only {
+				background-color: var(--color-disabled);
+			}
+		}
+
+		.warning {
+			box-sizing: border-box;
+			border: solid 2px var(--color-error);
+			background-color: var(--color-error);
+		}
+	}
+}

package/lib/css/components/InputNumber.scss

@@ -0,0 +1,11 @@
+// see input.scss
+
+.lunatic-component {
+	.lunatic-input-number {
+		display: inline-block;
+
+		.label-description {
+			display: block;
+		}
+	}
+}

package/lib/css/components/Label.scss

@@ -0,0 +1,6 @@
+.lunatic-label {
+	.label-description {
+		font-weight: lighter;
+		display: block;
+	}
+}

package/lib/css/components/Missing.scss

@@ -0,0 +1,27 @@
+.missing-buttons {
+	margin-top: 1em;
+}
+.missing-buttons .button-lunatic {
+	width: 4em;
+	font-size: 1em;
+	font-weight: normal;
+}
+.missing-buttons .button-lunatic {
+	background-color: var(--color-very-very-light);
+	color: var(--color-primary-dark);
+}
+.missing-buttons .button-lunatic:not(:disabled):hover {
+	background-color: white;
+	color: var(--color-primary-main);
+}
+.missing-buttons .button-lunatic:disabled {
+	opacity: .5;
+}
+.missing-button-active .button-lunatic {
+	background-color: var(--color-primary-dark);
+	color: var(--color-very-very-light);
+}
+.missing-buttons .missing-button-active .button-lunatic:hover {
+	background-color: var(--color-primary-main);
+	color: white;
+}

package/lib/css/components/ModalControls.scss

@@ -0,0 +1,48 @@
+.lunatic-modal-controls {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(50, 50, 50, 0.5);
+	z-index: 101;
+
+	.modal-content {
+		background-color: snow;
+		height: fit-content;
+		width: 50%;
+		margin: auto;
+		margin-top: 38vh;
+		display: flex;
+		flex-direction: column;
+		border-radius: 8px;
+		overflow-wrap: break-word;
+		.body {
+			color: black;
+			font-size: 16px;
+			font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+		}
+
+		.modal-buttons {
+			align-self: end;
+			margin: 0 0.2em 0.2em 0;
+			:first-child {
+				margin-right: 0.5em;
+			}
+		}
+	}
+
+	.errors {
+		ul,
+		li,
+		div,
+		span {
+			border: none;
+			list-style: none;
+		}
+	}
+	ul {
+		margin: 1em;
+		padding: 0;
+	}
+}

package/lib/css/components/RadioGroup.scss

@@ -0,0 +1,21 @@
+.lunatic-radio-group {
+	legend {
+		.label-description {
+			font-weight: lighter;
+		}
+	}
+	.lunatic-input-radio {
+		display: flex;
+
+		.label-description {
+			font-weight: lighter;
+		}
+
+		.lunatic-label {
+			font-weight: normal;
+			display: flex;
+			align-items: center;
+			gap: 0.5em;
+		}
+	}
+}

package/lib/css/components/RosterForLoop.scss

@@ -0,0 +1,39 @@
+// .lunatic-component {
+// 	.table-lunatic {
+// 		table-layout: fixed;
+// 		border-collapse: collapse;
+// 		margin-top: 0.3em;
+// 		margin-bottom: 0.3em;
+// 		& td,
+// 		th {
+// 			border: 0.15em solid var(--color-primary-dark);
+// 			padding: 0.2em;
+// 		}
+// 		& td {
+// 			.field,
+// 			.field-with-tooltip {
+// 				display: flex;
+// 				justify-content: center;
+// 				align-items: center;
+// 			}
+// 		}
+// 	}
+
+// 	.table-lunatic .tooltip-lunatic img {
+// 		height: 20px;
+// 		width: 20px;
+// 	}
+// }
+
+.lunatic-table {
+	table-layout: fixed;
+	border-collapse: collapse;
+	margin-top: 0.3em;
+	margin-bottom: 0.3em;
+	.lunatic-table-thead {
+		.lunatic-table-th {
+			border: 0.15em solid var(--color-primary-dark);
+			padding: 0.2em;
+		}
+	}
+}

package/lib/css/components/Roundabout.scss

@@ -0,0 +1,13 @@
+.lunatic-roundabout {
+	background-color: transparent;
+
+	.roundabout-it-button {
+		&.complete {
+			background-color: lightgreen;
+		}
+
+		&.partial {
+			background-color: cornflowerblue;
+		}
+	}
+}

package/lib/css/components/Sequence.scss

@@ -0,0 +1,10 @@
+.lunatic-component {
+	.sequence-lunatic {
+		padding: 0;
+		font-size: 0.875rem;
+		color: var(--color-primary-light);
+		background-color: var(--color-secondary-contrast-text);
+		border: 0;
+		height: 1.875rem;
+	}
+}