@onemrvapublic/design-system 20.11.3 → 21.0.0-develop.2

package/theme/utilities/_spacing.scss

@@ -0,0 +1,86 @@
+@use '../utilities/variables' as variables;
+@use '../utilities/media' as media;
+@use 'sass:map';
+@use 'sass:list';
+
+@mixin padmarrules($name, $selector, $suffix, $value) {
+  .#{$selector}l#{$suffix},
+  .#{$selector}s#{$suffix} {
+    #{$name}-left: #{$value} !important;
+  }
+  .#{$selector}r#{$suffix},
+  .#{$selector}e#{$suffix} {
+    #{$name}-right: #{$value} !important;
+  }
+  .#{$selector}t#{$suffix} {
+    #{$name}-top: #{$value} !important;
+  }
+  .#{$selector}b#{$suffix} {
+    #{$name}-bottom: #{$value} !important;
+  }
+  .#{$selector}x#{$suffix} {
+    #{$name}-right: #{$value} !important;
+    #{$name}-left: #{$value} !important;
+  }
+  .#{$selector}y#{$suffix} {
+    #{$name}-top: #{$value} !important;
+    #{$name}-bottom: #{$value} !important;
+  }
+  .#{$selector}#{$suffix} {
+    #{$name}: #{$value} !important;
+  }
+}
+@mixin gaprules($suffix, $value) {
+  .g#{$suffix} {
+    gap: $value !important;
+  }
+  .gc#{$suffix} {
+    column-gap: $value !important;
+  }
+  .gr#{$suffix} {
+    row-gap: $value !important;
+  }
+}
+
+@mixin spacing() {
+  @each $spacer in variables.$spacers {
+    @include padmarrules(
+      $name: 'padding',
+      $selector: 'p',
+      $suffix: list.nth($spacer, 1),
+      $value: list.nth($spacer, 2)
+    );
+    @include padmarrules(
+      $name: 'margin',
+      $selector: 'm',
+      $suffix: list.nth($spacer, 1),
+      $value: list.nth($spacer, 2)
+    );
+
+    @include gaprules(
+      $suffix: list.nth($spacer, 1),
+      $value: list.nth($spacer, 2)
+    );
+
+    @each $breakpoint in variables.$breakpoints {
+      //@media (min-width: list.nth($breakpoint, 2)) {
+      @include media.media(variables.$breakpoints, list.nth($breakpoint, 1)) {
+        $sfx: #{list.nth($spacer, 1)}-#{list.nth($breakpoint, 1)};
+        @include padmarrules(
+          $name: 'padding',
+          $selector: 'p',
+          $suffix: $sfx,
+          $value: list.nth($spacer, 2)
+        );
+        @include padmarrules(
+          $name: 'margin',
+          $selector: 'm',
+          $suffix: $sfx,
+          $value: list.nth($spacer, 2)
+        );
+
+        @include gaprules($suffix: $sfx, $value: list.nth($spacer, 2));
+      }
+    }
+  }
+}

package/theme/utilities/_tokens.scss

@@ -0,0 +1,123 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme() {
+  & {
+    --icon-size-xsmall: 0.75rem;
+    --icon-size-small: 1rem;
+    --icon-size-medium: 1.25rem;
+    --icon-size-large: 1.5rem;
+    --icon-size-xlarge: 3rem;
+    --icon-size-xxlarge: 4rem;
+
+    --layout-header-height: 80px;
+    --layout-footer-height: 30px;
+
+    --box-shadow: 0 2px 6px #00000026;
+
+    --border-radius: 16px;
+    --half-border-radius: 8px;
+    --small-border-radius: 4px;
+
+    --input-height: 46px;
+    --paginator-height: 37px;
+    --page-size-width: 80px;
+
+    // Sizes based on 16px base rem
+    --quad-spacer: 2rem; // 32px
+    --triple-spacer: 1.5rem; // 24px
+    --double-spacer: 1rem; // 16px
+    --spacer-and-half: 0.75rem; // 12px
+    --spacer: 0.5rem; // 8px
+    --half-spacer: 0.25rem; // 4px
+    --quarter-spacer: 0.125rem; // 2px
+
+    --text-font: Source Sans Pro, sans-serif;
+    --brand-font: Poppins, sans-serif;
+    --icon-font: Material Icons;
+    --button-border-radius: 500px;
+
+    --background-error-page: url('https://cdn.services.rvaonem.fgov.be/img/404/background.svg');
+
+    --on-background-gradient: white;
+    --background-gradient: transparent
+      linear-gradient(90deg, #de2174 0%, #eb142a 100%) 0% 0% no-repeat
+      padding-box;
+
+    --toc-width: 280px;
+
+    --message-icon: '';
+
+    --breakpoint-small: 600px;
+    --breakpoint-medium: 960px;
+    --breakpoint-large: 1280px;
+    --breakpoint-xlarge: 1536px;
+    --breakpoint-xxlarge: 1920px;
+
+    .mat-info {
+      --message-icon: '\e88e';
+    }
+    .mat-success {
+      --message-icon: '\e86c';
+    }
+    .mat-error {
+      --message-icon: '\e000';
+    }
+    .mat-warn {
+      --message-icon: '\e002';
+    }
+
+    --avatar-size: 3.5rem;
+    --avatar-font-size: 1.5rem;
+    --avatar-resize: 0.75rem;
+
+    .onemrva-mat-avatar--text {
+      --avatar-font-size: 1rem;
+    }
+
+    .onemrva-mat-avatar.xsmall {
+      --avatar-size: 2rem;
+      --avatar-font-size: 0.75rem;
+      --avatar-resize: 0.25rem;
+      &.onemrva-mat-avatar--text {
+        --avatar-font-size: 0.5rem;
+      }
+    }
+    .onemrva-mat-avatar.small {
+      --avatar-size: 2.5rem;
+      --avatar-font-size: 1rem;
+      --avatar-resize: 0.5rem;
+      &.onemrva-mat-avatar--text {
+        --avatar-font-size: 0.75rem;
+      }
+    }
+    .onemrva-mat-avatar.large {
+      --avatar-size: 4.5rem;
+      --avatar-font-size: 2rem;
+      --avatar-resize: 1rem;
+      &.onemrva-mat-avatar--text {
+        --avatar-font-size: 1.25rem;
+      }
+    }
+    .onemrva-mat-avatar.xlarge {
+      --avatar-resize: 1.5rem;
+      --avatar-size: 8rem;
+      --avatar-font-size: 4rem;
+      &.onemrva-mat-avatar--text {
+        --avatar-font-size: 2rem;
+      }
+    }
+
+    //&:not(.light-theme) {
+    //  @media (prefers-color-scheme: dark) {
+    //    // TODO : dark mode
+    //    --background-error-page: url('https://cdn.services.rvaonem.fgov.be/img/404/background-dark.svg');
+    //  }
+    //}
+
+    &.dark-theme {
+      // TODO : dark mode
+      --background-error-page: url('https://cdn.services.rvaonem.fgov.be/img/404/background-dark.svg');
+    }
+  }
+}

package/theme/utilities/_utilities.scss

@@ -0,0 +1,351 @@
+@use '../utilities/variables' as variables;
+@use '../utilities/media' as media;
+@use 'sass:map';
+@use 'sass:list';
+
+@mixin utilities() {
+  // text
+  .text-center {
+    text-align: center !important;
+  }
+  .text-right,
+  .text-end {
+    text-align: right !important;
+  }
+  .text-left,
+  .text-start {
+    text-align: left !important;
+  }
+  //@each $breakpoint in variables.$breakpoints {
+  //  @include media.media(variables.$breakpoints, list.nth($breakpoint, 1)) {
+  //    .text-center-#{list.nth($breakpoint, 1)} {
+  //      text-align: center !important;
+  //    }
+  //    .text-right-#{list.nth($breakpoint, 1)},
+  //    .text-end-#{list.nth($breakpoint, 1)} {
+  //      text-align: right !important;
+  //    }
+  //    .text-left-#{list.nth($breakpoint, 1)},
+  //    .text-start-#{list.nth($breakpoint, 1)} {
+  //      text-align: left !important;
+  //    }
+  //  }
+  //}
+
+  .text-lowercase {
+    text-transform: lowercase !important;
+  }
+  .text-uppercase {
+    text-transform: uppercase !important;
+  }
+  .text-capitalize {
+    text-transform: capitalize !important;
+  }
+
+  .rotate-0 {
+    transform: rotate(0deg);
+    transition: transform 0.3s ease;
+  }
+  .rotate-45 {
+    transform: rotate(45deg);
+    transition: transform 0.3s ease;
+  }
+  .rotate-90 {
+    transform: rotate(90deg);
+    transition: transform 0.3s ease;
+  }
+  .rotate-135 {
+    transform: rotate(135deg);
+    transition: transform 0.3s ease;
+  }
+  .rotate-180 {
+    transform: rotate(180deg);
+    transition: transform 0.3s ease;
+  }
+  .rotate-225 {
+    transform: rotate(225deg);
+    transition: transform 0.3s ease;
+  }
+  .rotate-270 {
+    transform: rotate(270deg);
+    transition: transform 0.3s ease;
+  }
+
+  // align
+  .align-baseline {
+    vertical-align: baseline !important;
+  }
+  .align-top {
+    vertical-align: top !important;
+  }
+  .align-middle {
+    vertical-align: middle !important;
+  }
+  .align-bottom {
+    vertical-align: bottom !important;
+  }
+  .align-text-top {
+    vertical-align: text-top !important;
+  }
+  .align-text-bottom {
+    vertical-align: text-bottom !important;
+  }
+
+  // overflow
+  .overflow-auto {
+    overflow: auto !important;
+  }
+  .overflow-hidden {
+    overflow: hidden !important;
+  }
+  .overflow-visible {
+    overflow: visible !important;
+  }
+  .overflow-scroll {
+    overflow: scroll !important;
+  }
+
+  // float
+  .float-right,
+  .float-end {
+    float: right !important;
+  }
+  .float-left,
+  .float-start {
+    float: left !important;
+  }
+  //@each $breakpoint in variables.$breakpoints {
+  //  @include media.media(variables.$breakpoints, list.nth($breakpoint, 1)) {
+  //    .float-right-#{list.nth($breakpoint, 1)},
+  //    .float-end-#{list.nth($breakpoint, 1)} {
+  //      float: right !important;
+  //    }
+  //    .float-left-#{list.nth($breakpoint, 1)},
+  //    .float-start-#{list.nth($breakpoint, 1)} {
+  //      float: left !important;
+  //    }
+  //  }
+  //}
+
+  // display
+  .d-none {
+    display: none !important;
+  }
+  .d-inline {
+    display: inline !important;
+  }
+  .d-inline-block {
+    display: inline-block !important;
+  }
+  .d-block {
+    display: block !important;
+  }
+  .d-grid {
+    display: grid !important;
+  }
+  .d-table {
+    display: table !important;
+  }
+  .d-table-cell {
+    display: table-cell !important;
+  }
+  .d-table-row {
+    display: table-row !important;
+  }
+  .d-flex {
+    display: flex !important;
+  }
+  .d-inline-flex {
+    display: inline-flex !important;
+  }
+  .flex-column {
+    flex-direction: column;
+  }
+  .flex-column-reverse {
+    flex-direction: column-reverse;
+  }
+  .flex-row {
+    flex-direction: row;
+  }
+  .flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .flex-revert {
+    flex-direction: revert;
+  }
+  .flex-revert-layer {
+    flex-direction: revert-layer;
+  }
+
+  @each $breakpoint in variables.$breakpoints {
+    @include media.media(variables.$breakpoints, list.nth($breakpoint, 1)) {
+      .d-none-#{list.nth($breakpoint, 1)} {
+        display: none !important;
+      }
+      .d-inline-#{list.nth($breakpoint, 1)} {
+        display: inline !important;
+      }
+      .d-inline-block-#{list.nth($breakpoint, 1)} {
+        display: inline-block !important;
+      }
+      .d-block-#{list.nth($breakpoint, 1)} {
+        display: block !important;
+      }
+      .d-grid-#{list.nth($breakpoint, 1)} {
+        display: grid !important;
+      }
+      .d-table-#{list.nth($breakpoint, 1)} {
+        display: table !important;
+      }
+      .d-table-cell-#{list.nth($breakpoint, 1)} {
+        display: table-cell !important;
+      }
+      .d-table-row-#{list.nth($breakpoint, 1)} {
+        display: table-row !important;
+      }
+      .d-flex-#{list.nth($breakpoint, 1)} {
+        display: flex !important;
+      }
+      .d-inline-flex-#{list.nth($breakpoint, 1)} {
+        display: inline-flex !important;
+      }
+    }
+  }
+
+  .flex-center {
+    display: flex;
+    align-items: center;
+  }
+
+  // positions
+  .position-relative {
+    position: relative !important;
+  }
+  .position-absolute {
+    position: absolute !important;
+  }
+  .position-fixed {
+    position: fixed !important;
+  }
+  .position-static {
+    position: static !important;
+  }
+  .position-sticky {
+    position: sticky !important;
+  }
+  .clickable {
+    cursor: pointer;
+  }
+  // visibility
+  .visible {
+    visibility: visible !important;
+  }
+  .invisible {
+    visibility: hidden !important;
+  }
+  .hidden {
+    display: none;
+  }
+
+  // Sizing
+  @for $i from 0 through 100 {
+    .w-#{$i} {
+      width: '#{$i}%' !important;
+    }
+    .h-#{$i} {
+      height: '#{$i}%' !important;
+    }
+    .vw-#{$i} {
+      width: '#{$i}vw' !important;
+    }
+    .vh-#{$i} {
+      height: '#{$i}vh' !important;
+    }
+    .mw-#{$i} {
+      max-width: '#{$i}%' !important;
+    }
+    .mh-#{$i} {
+      max-height: '#{$i}%' !important;
+    }
+  }
+  .w-auto {
+    width: auto !important;
+  }
+  .h-auto {
+    height: auto !important;
+  }
+
+  .mat-elevation-z0 {
+    box-shadow: var(--mat-sys-level0);
+  }
+  .mat-elevation-z1 {
+    box-shadow: var(--mat-sys-level1);
+  }
+  .mat-elevation-z2 {
+    box-shadow: var(--mat-sys-level2);
+  }
+  .mat-elevation-z3 {
+    box-shadow: var(--mat-sys-level3);
+  }
+  .mat-elevation-z4 {
+    box-shadow: var(--mat-sys-level4);
+  }
+  .mat-elevation-z5 {
+    box-shadow: var(--mat-sys-level5);
+  }
+
+  .show-icon {
+    &:not(.mat-grayscale):before {
+      font-family: var(--icon-font);
+      position: relative;
+      float: left;
+      //margin-left: calc(var(--spacer) * -4.25);
+      height: 100%;
+      line-height: 100%;
+      vertical-align: middle;
+      //left: var(--spacer);
+      font-size: 1.25rem;
+      font-variation-settings:
+        'FILL' 1,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 48;
+      color: var(--mat-sys-primary);
+    }
+    &.small {
+    }
+    &.large {
+    }
+  }
+
+  .show-icon.mat-info,
+  .mat-info .show-icon {
+    &:before {
+      content: '\e88e';
+    }
+  }
+  .show-icon.mat-success,
+  .mat-success .show-icon {
+    &:before {
+      content: '\e86c';
+    }
+  }
+  .show-icon.mat-warn,
+  .mat-warn .show-icon {
+    &:before {
+      content: '\e002';
+    }
+  }
+  .show-icon.mat-grayscale,
+  .mat-grayscale .show-icon,
+  .show-icon.mat-neutral,
+  .mat-grayscale .mat-neutral {
+    padding: var(--spacer);
+  }
+  .show-icon.mat-error,
+  .mat-error .show-icon {
+    &:before {
+      content: '\e000';
+    }
+  }
+}

package/theme/utilities/_variables.scss

@@ -0,0 +1,42 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './palettes';
+
+$spacer: 8px !default;
+$spacers:
+  '-0' 0,
+  '-2xs' $spacer * 0.25,
+  '-xs' $spacer * 0.5,
+  '-s' $spacer,
+  '' $spacer,
+  '-m' $spacer * 2,
+  '-l' $spacer * 3,
+  '-xl' $spacer * 4,
+  '-2xl' $spacer * 5,
+  '-3xl' $spacer * 7,
+  '-auto' 'auto';
+
+$breakpoints: (
+  xsmall: (
+    max: 599.99,
+  ),
+  small: (
+    min: 600,
+    max: 959.99,
+  ),
+  medium: (
+    min: 960,
+    max: 1279.99,
+  ),
+  large: (
+    min: 1280,
+    max: 1535.99,
+  ),
+  xlarge: (
+    min: 1536,
+    max: 1919.99,
+  ),
+  xxlarge: (
+    min: 1920,
+  ),
+);

package/types/onemrvapublic-design-system-flag-icon.d.ts

@@ -0,0 +1,18 @@
+import * as _angular_core from '@angular/core';
+
+declare class FlagIconComponent {
+    readonly countryCode: _angular_core.InputSignal<string | null | undefined>;
+    readonly mode: _angular_core.InputSignal<"square" | "rectangle">;
+    readonly width: _angular_core.InputSignal<number>;
+    height: number;
+    private readonly cdnUrl;
+    private cdn;
+    constructor();
+    get normalizedCountryCode(): string;
+    get modeValue(): "4x3" | "1x1";
+    get url(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FlagIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FlagIconComponent, "flag-icon", never, { "countryCode": { "alias": "countryCode"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { FlagIconComponent };