@cerema/cadriciel 0.5.0

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/components/input/_autocomplete.scss

@@ -0,0 +1,117 @@
+@use 'sass:math';
+
+.p-autocomplete {
+  .p-autocomplete-loader {
+    right: nth($inputPadding, 2);
+  }
+
+  &.p-autocomplete-dd {
+    .p-autocomplete-loader {
+      right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
+    }
+  }
+
+  .p-autocomplete-multiple-container {
+    padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+
+    &:not(.p-disabled):hover {
+      border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+      @include focused-input();
+    }
+
+    .p-autocomplete-input-token {
+      padding: math.div(nth($inputPadding, 1), 2) 0;
+
+      input {
+        font-family: $fontFamily;
+        font-size: $fontSize;
+        color: $textColor;
+        padding: 0;
+        margin: 0;
+      }
+    }
+
+    .p-autocomplete-token {
+      padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+      margin-right: $inlineSpacing;
+      background: $highlightBg;
+      color: $highlightTextColor;
+      border-radius: $borderRadius;
+
+      .p-autocomplete-token-icon {
+        margin-left: $inlineSpacing;
+      }
+    }
+  }
+}
+
+p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
+  @include invalid-input();
+}
+
+.p-autocomplete-panel {
+  background: $inputOverlayBg;
+  color: $inputListTextColor;
+  border: $inputOverlayBorder;
+  border-radius: $borderRadius;
+  box-shadow: $inputOverlayShadow;
+
+  .p-autocomplete-items {
+    padding: $inputListPadding;
+
+    .p-autocomplete-item {
+      margin: $inputListItemMargin;
+      padding: $inputListItemPadding;
+      border: $inputListItemBorder;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+      transition: $listItemTransition;
+      border-radius: $inputListItemBorderRadius;
+
+      &:hover {
+        color: $inputListItemTextHoverColor;
+        background: $inputListItemHoverBg;
+      }
+
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
+      }
+    }
+
+    .p-autocomplete-empty-message {
+      padding: $inputListItemPadding;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+    }
+
+    .p-autocomplete-item-group {
+      margin: $submenuHeaderMargin;
+      padding: $submenuHeaderPadding;
+      color: $submenuHeaderTextColor;
+      background: $submenuHeaderBg;
+      font-weight: $submenuHeaderFontWeight;
+    }
+  }
+}
+
+p-autocomplete.p-autocomplete-clearable {
+  .p-inputtext {
+    padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+  }
+
+  .p-autocomplete-clear-icon {
+    color: $inputIconColor;
+    right: nth($inputPadding, 2);
+  }
+}
+
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd {
+  .p-autocomplete-clear-icon {
+    color: $inputIconColor;
+    right: $buttonIconOnlyWidth + nth($inputPadding, 2);
+  }
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/components/input/_calendar.scss

@@ -0,0 +1,263 @@
+p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
+  @include invalid-input();
+}
+
+.p-datepicker {
+  padding: $calendarPadding;
+  background: $calendarInlineBg;
+  color: $calendarTextColor;
+  border: $calendarBorder;
+  border-radius: $borderRadius;
+
+  &:not(.p-datepicker-inline) {
+    background: $calendarBg;
+    border: $calendarOverlayBorder;
+    box-shadow: $inputOverlayShadow;
+
+    .p-datepicker-header {
+      background: $calendarHeaderBg;
+    }
+  }
+
+  .p-datepicker-header {
+    padding: $calendarHeaderPadding;
+    color: $calendarHeaderTextColor;
+    background: $calendarInlineHeaderBg;
+    font-weight: $calendarHeaderFontWeight;
+    margin: $inputListHeaderMargin;
+    border-bottom: $calendarHeaderBorder;
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+
+    .p-datepicker-prev,
+    .p-datepicker-next {
+      @include action-icon();
+    }
+
+    .p-datepicker-title {
+      line-height: $actionIconHeight;
+
+      .p-datepicker-year,
+      .p-datepicker-month {
+        color: $calendarHeaderTextColor;
+        transition: $actionIconTransition;
+        font-weight: $calendarHeaderFontWeight;
+        padding: $calendarHeaderCellPadding;
+
+        &:enabled:hover {
+          color: $calendarMonthYearHeaderHoverTextColor;
+        }
+      }
+
+      .p-datepicker-month {
+        margin-right: $inlineSpacing;
+      }
+    }
+  }
+
+  table {
+    font-size: $fontSize;
+    margin: $calendarTableMargin;
+
+    th {
+      padding: $calendarHeaderCellPadding;
+
+      > span {
+        width: $calendarCellDateWidth;
+        height: $calendarCellDateHeight;
+      }
+    }
+
+    td {
+      padding: $calendarCellDatePadding;
+
+      > span {
+        width: $calendarCellDateWidth;
+        height: $calendarCellDateHeight;
+        border-radius: $calendarCellDateBorderRadius;
+        transition: $listItemTransition;
+        border: $calendarCellDateBorder;
+
+        &.p-highlight {
+          color: $highlightTextColor;
+          background: $highlightBg;
+        }
+
+        &:focus {
+          @include focused();
+        }
+      }
+
+      &.p-datepicker-today {
+        > span {
+          background: $calendarCellDateTodayBg;
+          color: $calendarCellDateTodayTextColor;
+          border-color: $calendarCellDateTodayBorderColor;
+
+          &.p-highlight {
+            color: $highlightTextColor;
+            background: $highlightBg;
+          }
+        }
+      }
+    }
+  }
+
+  .p-datepicker-buttonbar {
+    padding: $calendarButtonBarPadding;
+    border-top: $divider;
+
+    .p-button {
+      width: auto;
+    }
+  }
+
+  .p-timepicker {
+    border-top: $divider;
+    padding: $calendarTimePickerPadding;
+
+    button {
+      @include action-icon();
+
+      &:last-child {
+        margin-top: .2em;
+      }
+    }
+
+    span {
+      font-size: $calendarTimePickerTimeFontSize;
+    }
+
+    > div {
+      padding: $calendarTimePickerElementPadding;
+    }
+  }
+
+  &.p-datepicker-timeonly {
+    .p-timepicker {
+      border-top: 0 none;
+    }
+  }
+
+  .p-monthpicker {
+    margin: $calendarTableMargin;
+
+    .p-monthpicker-month {
+      padding: $calendarCellDatePadding;
+      transition: $listItemTransition;
+      border-radius: $borderRadius;
+
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
+      }
+    }
+  }
+
+  .p-yearpicker {
+    margin: $calendarTableMargin;
+
+    .p-yearpicker-year {
+      padding: $calendarCellDatePadding;
+      transition: $listItemTransition;
+      border-radius: $borderRadius;
+
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
+      }
+    }
+  }
+
+  &.p-datepicker-multiple-month {
+    .p-datepicker-group {
+      border-left: $divider;
+      padding-right: $calendarPadding;
+      padding-left: $calendarPadding;
+      padding-top: 0;
+      padding-bottom: 0;
+
+      &:first-child {
+        padding-left: 0;
+        border-left: 0 none;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+
+  &:not(.p-disabled) {
+    table {
+      td {
+        span:not(.p-highlight):not(.p-disabled) {
+          &:hover {
+            background: $calendarCellDateHoverBg;
+          }
+
+          &:focus {
+            @include focused();
+          }
+        }
+      }
+    }
+
+    .p-monthpicker {
+      .p-monthpicker-month {
+        &:not(.p-disabled) {
+          &:not(.p-highlight):hover {
+            background: $calendarCellDateHoverBg;
+          }
+
+          &:focus {
+            @include focused();
+          }
+        }
+      }
+    }
+
+    .p-yearpicker {
+      .p-yearpicker-year {
+        &:not(.p-disabled) {
+          &:not(.p-highlight):hover {
+            background: $calendarCellDateHoverBg;
+          }
+
+          &:focus {
+            @include focused();
+          }
+        }
+      }
+    }
+  }
+
+}
+
+p-calendar.p-calendar-clearable {
+  .p-inputtext {
+    padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+  }
+
+  .p-calendar-clear-icon {
+    color: $inputIconColor;
+    right: nth($inputPadding, 2);
+  }
+}
+
+p-calendar.p-calendar-clearable.p-calendar-w-btn {
+  .p-calendar-clear-icon {
+    color: $inputIconColor;
+    right: $buttonIconOnlyWidth + nth($inputPadding, 2);
+  }
+}
+
+@media screen and (max-width: $calendarBreakpoint) {
+  .p-datepicker {
+    table {
+      th, td {
+        padding: $calendarCellDatePaddingSM;
+      }
+    }
+  }
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/components/input/_cascadeselect.scss

@@ -0,0 +1,109 @@
+.p-cascadeselect {
+  background: $inputBg;
+  border: $inputBorder;
+  transition: $formElementTransition;
+  border-radius: $borderRadius;
+
+  &:not(.p-disabled):hover {
+    border-color: $inputHoverBorderColor;
+  }
+
+  &:not(.p-disabled).p-focus {
+    @include focused-input();
+  }
+
+  .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: $inputPadding;
+
+    &.p-placeholder {
+      color: $inputPlaceholderTextColor;
+    }
+
+    &:enabled:focus {
+      outline: 0 none;
+      box-shadow: none;
+    }
+  }
+
+  .p-cascadeselect-trigger {
+    background: transparent;
+    color: $inputIconColor;
+    width: $inputGroupAddOnMinWidth;
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+  }
+}
+
+.p-cascadeselect-panel {
+  background: $inputOverlayBg;
+  color: $inputListTextColor;
+  border: $inputOverlayBorder;
+  border-radius: $borderRadius;
+  box-shadow: $inputOverlayShadow;
+
+  .p-cascadeselect-items {
+    padding: $inputListPadding;
+
+    .p-cascadeselect-item {
+      margin: $inputListItemMargin;
+      border: $inputListItemBorder;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+      transition: $listItemTransition;
+      border-radius: $inputListItemBorderRadius;
+
+      .p-cascadeselect-item-content {
+        padding: $inputListItemPadding;
+
+        &:focus {
+          @include focused-listitem();
+        }
+      }
+
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
+      }
+
+      &:not(.p-highlight):not(.p-disabled):hover {
+        color: $inputListItemTextHoverColor;
+        background: $inputListItemHoverBg;
+      }
+
+      .p-cascadeselect-group-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+      }
+    }
+  }
+}
+
+p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
+  @include invalid-input();
+}
+
+.p-input-filled {
+  .p-cascadeselect {
+    background: $inputFilledBg;
+
+    &:not(.p-disabled):hover {
+      background-color: $inputFilledHoverBg;
+    }
+
+    &:not(.p-disabled).p-focus {
+      background-color: $inputFilledFocusBg;
+    }
+  }
+}
+
+p-cascadeselect.p-cascadeselect-clearable {
+  .p-cascadeselect-label {
+    padding-right: nth($inputPadding, 2);
+  }
+
+  .p-cascadeselect-clear-icon {
+    color: $inputIconColor;
+    right: $inputGroupAddOnMinWidth;
+  }
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/components/input/_checkbox.scss

@@ -0,0 +1,85 @@
+.p-checkbox {
+  width: $checkboxWidth;
+  height: $checkboxHeight;
+
+  .p-checkbox-box {
+    border: $checkboxBorder;
+    background: $inputBg;
+    width: $checkboxWidth;
+    height: $checkboxHeight;
+    color: $textColor;
+    border-radius: $borderRadius;
+    transition: $formElementTransition;
+
+    .p-checkbox-icon {
+      transition-duration: $transitionDuration;
+      color: $checkboxIconActiveColor;
+      font-size: $checkboxIconFontSize;
+    }
+
+    &.p-highlight {
+      border-color: $checkboxActiveBorderColor;
+      background: $checkboxActiveBg;
+    }
+  }
+
+  &:not(.p-checkbox-disabled) {
+    .p-checkbox-box {
+      &:hover {
+        border-color: $inputHoverBorderColor;
+      }
+
+      &.p-focus {
+        @include focused-input();
+      }
+
+      &.p-highlight:hover {
+        border-color: $checkboxActiveHoverBorderColor;
+        background: $checkboxActiveHoverBg;
+        color: $checkboxIconActiveHoverColor;
+      }
+    }
+  }
+}
+
+p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
+  @include invalid-input();
+}
+
+.p-input-filled {
+  .p-checkbox {
+    .p-checkbox-box {
+      background-color: $inputFilledBg;
+
+      &.p-highlight {
+        background: $checkboxActiveBg;
+      }
+    }
+
+    &:not(.p-checkbox-disabled) {
+      .p-checkbox-box {
+        &:hover {
+          background-color: $inputFilledHoverBg;
+        }
+
+        &.p-highlight:hover {
+          background: $checkboxActiveHoverBg;
+        }
+      }
+    }
+  }
+}
+
+.p-checkbox-label {
+  margin-left: $inlineSpacing;
+}
+
+@if ($highlightBg == $checkboxActiveBg) {
+  .p-highlight {
+    .p-checkbox {
+      .p-checkbox-box {
+        border-color: $checkboxIconActiveColor;
+      }
+    }
+  }
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/components/input/_chips.scss

@@ -0,0 +1,54 @@
+@use 'sass:math';
+
+.p-chips {
+  .p-chips-multiple-container {
+    padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+
+    &:not(.p-disabled):hover {
+      border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+      @include focused-input();
+    }
+
+    .p-chips-token {
+      padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+      margin-right: $inlineSpacing;
+      background: $highlightBg;
+      color: $highlightTextColor;
+      border-radius: $borderRadius;
+
+      .p-chips-token-icon {
+        margin-left: $inlineSpacing;
+      }
+    }
+
+    .p-chips-input-token {
+      padding: math.div(nth($inputPadding, 1), 2) 0;
+
+      input {
+        font-family: $fontFamily;
+        font-size: $fontSize;
+        color: $textColor;
+        padding: 0;
+        margin: 0;
+      }
+    }
+  }
+}
+
+p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
+  @include invalid-input();
+}
+
+p-chips.p-chips-clearable {
+  .p-inputtext {
+    padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+  }
+
+  .p-chips-clear-icon {
+    color: $inputIconColor;
+    right: nth($inputPadding, 2);
+  }
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/components/input/_colorpicker.scss

@@ -0,0 +1,19 @@
+.p-colorpicker-preview,
+.p-fluid .p-colorpicker-preview.p-inputtext {
+  width: $colorPickerPreviewWidth;
+  height: $colorPickerPreviewHeight;
+}
+
+.p-colorpicker-panel {
+  background: $colorPickerBg;
+  border: $colorPickerBorder;
+
+  .p-colorpicker-color-handle,
+  .p-colorpicker-hue-handle {
+    border-color: $colorPickerHandleColor;
+  }
+}
+
+.p-colorpicker-overlay-panel {
+  box-shadow: $inputOverlayShadow;
+}