@cnamts/synapse 1.0.1 → 1.0.3

package/dist/utils/amelipro/dateHelper/dateHelper.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Formats a single-digit number as a two-digit string with a leading zero.
+ * @param {number} num - The number to format.
+ * @returns {string} The formatted two-digit string.
+ */
+export declare const padTo2Digits: (num: number) => string;
+/**
+ * Checks if a given string matches the ISO 8601 basic date format (YYYY-MM-DD).
+ * @param {string | null | undefined} date - The date string to check.
+ * @returns {boolean} True if the string matches the format, false otherwise.
+ */
+export declare const dateMatchIso: (date: string | null | undefined) => boolean;
+/**
+ * Checks if a given string matches the French date format (DD/MM/YYYY).
+ * @param {string | null | undefined} date - The date string to check.
+ * @returns {boolean} True if the string matches the format, false otherwise.
+ */
+export declare const dateMatchFrIso: (date: string | null | undefined) => boolean;
+/**
+ * Parses a string in the format 'YYYY-MM-DD' into an array of year, month, and day strings.
+ * @param {string} date - The date string to parse.
+ * @returns {string[]} An array containing [year, month, day].
+ */
+export declare const parseDate: (date: string) => string[];
+/**
+ * Parses a string in the format 'DD/MM/YYYY' into an array of year, month, and day strings.
+ * @param {string} date - The date string to parse.
+ * @returns {string[]} An array containing [day, month, year].
+ */
+export declare const parseDateToFr: (date: string) => string[];
+/**
+ * Formats a date string in the ISO 8601 basic format (YYYY-MM-DD) to the French format (DD/MM/YYYY).
+ * @param {string} date - The date string to format.
+ * @returns {string} The formatted date string in French format, or an empty string if invalid input is provided.
+ */
+export declare const dateToFormatFr: (date: string) => string;
+/**
+ * Formats a date string in the French format (DD/MM/YYYY) to the ISO 8601 basic format (YYYY-MM-DD).
+ * @param {string} date - The date string to format.
+ * @returns {string} The formatted date string in French format, or an empty string if invalid input is provided.
+ */
+export declare const dateToBasicFormat: (date: string) => string;
+/**
+ * Converts a string value in the ISO 8601 basic format (YYYY-MM-DD) to a JavaScript Date object.
+ * @param {string} value - The string value to convert.
+ * @returns {Date | undefined} A Date object representing the date, or undefined if the string is not in valid format.
+ */
+export declare const stringToDate: (value: string) => Date | undefined;

package/dist/utils/amelipro/numberHelper/numberHelper.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Checks if a given string matches the regex.
+ * @param {number | string | null | undefined} value - The value to check.
+ * @returns {boolean} True if the string matches the format, false otherwise.
+ */
+export declare const numberMatchRegex: (value: number | string | null | undefined) => boolean;
+export declare const parseToNumber: (value: number | string) => number;
+export declare const parseToFrNumberFormat: (value: number | string) => string;

package/dist/utils/amelipro/rules/maxNumber/index.d.ts

@@ -0,0 +1,3 @@
+import { ValidationRule } from '../../../rules/types';
+export type Value = string;
+export declare function maxNumberRule(maxNumber: string | number): ValidationRule<Value>;

package/dist/utils/amelipro/rules/minNumber/index.d.ts

@@ -0,0 +1,3 @@
+import { ValidationRule } from '../../../rules/types';
+export type Value = string;
+export declare function minNumberRule(minNumber: string | number): ValidationRule<Value>;

package/dist/utils/amelipro/rules/notAfterDate/index.d.ts

@@ -0,0 +1,3 @@
+import { ValidationRule } from '../../../rules/types';
+export type Value = string;
+export declare function notAfterDate(maxDate: string, fieldType: string): ValidationRule<Value>;

package/dist/utils/amelipro/rules/notBeforeDate/index.d.ts

@@ -0,0 +1,3 @@
+import { ValidationRule } from '../../../rules/types';
+export type Value = string;
+export declare function notBeforeDate(minDate: string, fieldType: string): ValidationRule<Value>;

package/dist/utils/functions/ameliproColors/ameliproColors.d.ts

@@ -0,0 +1,2 @@
+import { AmeliproColorsTypes } from './types';
+export declare const AmeliproColors: AmeliproColorsTypes;

package/dist/utils/functions/ameliproColors/types.d.ts

@@ -0,0 +1,5 @@
+export interface AmeliproColorsTypes {
+	[key: string]: {
+		hexColor: string
+	}
+}

package/dist/utils/functions/classToHex.d.ts

@@ -0,0 +1 @@
+export declare function classToHex(color: string): string;

package/dist/utils/functions/convertToHex.d.ts

@@ -0,0 +1 @@
+export declare const convertToHex: (color: string | undefined) => string;

package/dist/utils/functions/isCssColor.d.ts

@@ -0,0 +1 @@
+export declare function isCssColor(color?: string | false): boolean;

package/dist/utils/index.d.ts

@@ -0,0 +1,19 @@
+import { isDateValid as isDateValidUtil } from './functions/validation/isDateValid';
+import { default as throttleDisplayFn } from './functions/throttleDisplayFn/throttleDisplayFn';
+export { LocalStorageUtility } from './localStorageUtility';
+export { calcHumanFileSize } from './calcHumanFileSize';
+export { convertToUnit } from './convertToUnit';
+export { formatDate } from './formatDate';
+export { parseDate } from './parseDate';
+export { propValidator } from './propValidator';
+export { ruleMessage } from './ruleMessage';
+export { isDateAfter } from './functions/validation/isDateAfter';
+export { isDateBefore } from './functions/validation/isDateBefore';
+export { isDateInRange } from './functions/validation/isDateInRange';
+export { isDateValidUtil };
+export { isWeekend } from './functions/validation/isWeekend';
+export { isEmailValid } from './functions/validation/isEmailValid';
+export { copyToClipboard } from './functions/copyToClipboard';
+export { downloadFile } from './functions/downloadFile';
+export { throttleDisplayFn };
+export { deepCopy } from './functions/deepCopy';

package/dist/vuetifyConfig.d.ts

@@ -16,6 +16,7 @@ export declare const createVuetifyInstance: () => {
         rtl: import('vue').Ref<Record<string, boolean>, Record<string, boolean>>;
         rtlClasses: import('vue').Ref<string, string>;
         name: string;
+        decimalSeparator: import('vue').ShallowRef<string>;
         messages: import('vue').Ref<import('vuetify').LocaleMessages, import('vuetify').LocaleMessages>;
         current: import('vue').Ref<string, string>;
         fallback: import('vue').Ref<string, string>;
@@ -48,10 +49,10 @@ export declare const createVuetifyInstance: () => {
             startOfYear: (date: unknown) => unknown;
             endOfYear: (date: unknown) => unknown;
             isAfter: (date: unknown, comparing: unknown) => boolean;
-            isAfterDay: (value: unknown, comparing: unknown) => boolean;
+            isAfterDay: (date: unknown, comparing: unknown) => boolean;
             isSameDay: (date: unknown, comparing: unknown) => boolean;
             isSameMonth: (date: unknown, comparing: unknown) => boolean;
-            isSameYear: (value: unknown, comparing: unknown) => boolean;
+            isSameYear: (date: unknown, comparing: unknown) => boolean;
             isBefore: (date: unknown, comparing: unknown) => boolean;
             isEqual: (date: unknown, comparing: unknown) => boolean;
             isValid: (date: any) => boolean;
@@ -65,7 +66,7 @@ export declare const createVuetifyInstance: () => {
             setYear: (date: unknown, year: number) => unknown;
             getDiff: (date: unknown, comparing: unknown, unit?: string | undefined) => number;
             getWeekArray: (date: unknown, firstDayOfWeek?: string | number | undefined) => unknown[][];
-            getWeekdays: (firstDayOfWeek?: string | number | undefined) => string[];
+            getWeekdays: (firstDayOfWeek?: string | number | undefined, weekdayFormat?: "long" | "short" | "narrow" | undefined) => string[];
             getWeek: (date: unknown, firstDayOfWeek?: string | number | undefined, firstWeekMinSize?: number | undefined) => number;
             getMonth: (date: unknown) => number;
             setMonth: (date: unknown, month: number) => unknown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",

package/src/assets/_elevations.scss

@@ -1,6 +1,7 @@
 // Define theme elevation adjustments
 $elevation-cnam: 2px;
 $elevation-pa: 2px;
+$elevation-ap: 0px;
 
 // Modify elevations to include $elevation-cnam and $elevation-pa dynamically
 $cnam-elevation: (
@@ -45,11 +46,33 @@ $pa-elevation: (
 	28: 0 14px calc(28px + #{$elevation-pa}) rgb(0 0 0 / 72%),
 	32: 0 16px calc(32px + #{$elevation-pa}) rgb(0 0 0 / 76%)
 );
+$ap-elevation: (
+	0: none,
+	1: 0 1px calc(3px + #{$elevation-ap}) rgb(0 0 0 / 10%),
+	2: 0 1px calc(5px + #{$elevation-ap}) rgb(0 0 0 / 14%),
+	3: 0 1px calc(8px + #{$elevation-ap}) rgb(0 0 0 / 20%),
+	4: 0 2px calc(4px + #{$elevation-ap}) rgb(0 0 0 / 20%),
+	5: 0 2px calc(6px + #{$elevation-ap}) rgb(0 0 0 / 24%),
+	6: 0 3px calc(6px + #{$elevation-ap}) rgb(0 0 0 / 28%),
+	7: 0 3px calc(8px + #{$elevation-ap}) rgb(0 0 0 / 32%),
+	8: 0 4px calc(8px + #{$elevation-ap}) rgb(0 0 0 / 36%),
+	9: 0 4px calc(10px + #{$elevation-ap}) rgb(0 0 0 / 40%),
+	10: 0 5px calc(10px + #{$elevation-ap}) rgb(0 0 0 / 44%),
+	12: 0 6px calc(12px + #{$elevation-ap}) rgb(0 0 0 / 48%),
+	14: 0 7px calc(14px + #{$elevation-ap}) rgb(0 0 0 / 52%),
+	16: 0 8px calc(16px + #{$elevation-ap}) rgb(0 0 0 / 56%),
+	18: 0 9px calc(18px + #{$elevation-ap}) rgb(0 0 0 / 60%),
+	20: 0 10px calc(20px + #{$elevation-ap}) rgb(0 0 0 / 64%),
+	24: 0 12px calc(24px + #{$elevation-ap}) rgb(0 0 0 / 68%),
+	28: 0 14px calc(28px + #{$elevation-ap}) rgb(0 0 0 / 72%),
+	32: 0 16px calc(32px + #{$elevation-ap}) rgb(0 0 0 / 76%)
+);
 
 // Define CSS variables globally
 :root {
 	--elevation-cnam: #{$elevation-cnam};
 	--elevation-pa: #{$elevation-pa};
+	--elevation-ap: #{$elevation-ap};
 
 	@each $key, $value in $cnam-elevation {
 		--elevation-#{$key}: #{$value};
@@ -70,6 +93,13 @@ $pa-elevation: (
 	}
 }
 
+// Apply theme-based AP
+.theme-ap {
+	@each $key, $value in $ap-elevation {
+		--elevation-#{$key}: #{$value};
+	}
+}
+
 // Mixin to generate elevation classes dynamically
 @mixin generate-elevation-classes($prefix) {
 	@each $key, $value in $cnam-elevation {

package/src/assets/_radius.scss

@@ -1,6 +1,7 @@
 // Define theme radius separately
 $border-radius-cnam: 4px;
 $border-radius-pa: 4px;
+$border-radius-ap: 12px;
 $cnam-radius: (
 	0: 0px,
 	'sm': calc($border-radius-cnam / 2),
@@ -19,6 +20,15 @@ $pa-radius: (
 	'pill': 9999px,
 	'circle': 50%
 );
+$ap-radius: (
+	0: 0px,
+	'sm': calc($border-radius-ap / 2),
+	'md': $border-radius-ap,
+	'lg': calc($border-radius-ap * 2),
+	'xl': calc($border-radius-ap * 4),
+	'pill': 9999px,
+	'circle': 50%
+);
 
 // Define all possible radius keys to ensure consistent class generation
 $radius-keys: (0, 'sm', 'md', 'lg', 'xl', 'pill', 'circle');
@@ -44,6 +54,13 @@ $radius-keys: (0, 'sm', 'md', 'lg', 'xl', 'pill', 'circle');
 	}
 }
 
+// ✅ Apply theme-based ap
+.theme-ap {
+	@each $key, $value in $ap-radius {
+		--radius-#{$key}: #{$value};
+	}
+}
+
 // ✅ Mixin to generate border-radius classes
 @mixin generate-radius-classes($prefix) {
 	@each $key in $radius-keys {

package/src/assets/_spacers.scss

@@ -1,6 +1,7 @@
 // Define base spacer values
 $base-spacer-cnam: 4px;
 $base-spacer-pa: 4px;
+$base-spacer-ap: 4px;
 
 // Define theme spacers using base values
 $cnam-spacers: (
@@ -71,6 +72,40 @@ $pa-spacers: (
 	60: $base-spacer-pa * 60,
 	64: $base-spacer-pa * 64,
 );
+$ap-spacers: (
+	0: 0px,
+	1: $base-spacer-ap,
+	2: $base-spacer-ap * 2,
+	3: $base-spacer-ap * 3,
+	4: $base-spacer-ap * 4,
+	5: $base-spacer-ap * 5,
+	6: $base-spacer-ap * 6,
+	7: $base-spacer-ap * 7,
+	8: $base-spacer-ap * 8,
+	9: $base-spacer-ap * 9,
+	10: $base-spacer-ap * 10,
+	11: $base-spacer-ap * 11,
+	12: $base-spacer-ap * 12,
+	13: $base-spacer-ap * 13,
+	14: $base-spacer-ap * 14,
+	15: $base-spacer-ap * 15,
+	16: $base-spacer-ap * 16,
+	17: $base-spacer-ap * 17,
+	18: $base-spacer-ap * 18,
+	19: $base-spacer-ap * 19,
+	20: $base-spacer-ap * 20,
+	24: $base-spacer-ap * 24,
+	28: $base-spacer-ap * 28,
+	32: $base-spacer-ap * 32,
+	36: $base-spacer-ap * 36,
+	40: $base-spacer-ap * 40,
+	44: $base-spacer-ap * 44,
+	48: $base-spacer-ap * 48,
+	52: $base-spacer-ap * 52,
+	56: $base-spacer-ap * 56,
+	60: $base-spacer-ap * 60,
+	64: $base-spacer-ap * 64,
+);
 
 // Define CSS variables for spacers dynamically
 :root {
@@ -92,6 +127,12 @@ $pa-spacers: (
 	}
 }
 
+.theme-ap {
+	@each $key, $value in $ap-spacers {
+		--spacing-#{$key}: #{$value};
+	}
+}
+
 // Mixin to generate padding and margin classes
 @mixin generate-spacing-classes($property, $prefix) {
 	@for $i from 0 through 64 {
@@ -172,10 +213,26 @@ $breakpoints: (
 @include generate-breakpoint-spacing-classes(padding-top, pt);
 @include generate-breakpoint-spacing-classes(margin-bottom, mb);
 @include generate-breakpoint-spacing-classes(padding-bottom, pb);
-@include generate-breakpoint-spacing-classes(margin, mx);
-@include generate-breakpoint-spacing-classes(padding, px);
-@include generate-breakpoint-spacing-classes(margin, my);
-@include generate-breakpoint-spacing-classes(padding, py);
+
+// Mixin for X (left & right) and Y (top & bottom) spacing with breakpoints
+@mixin generate-breakpoint-axis-spacing-classes($property, $prefix, $side1, $side2) {
+	@each $breakpoint, $value in $breakpoints {
+		@for $i from 0 through 64 {
+			.#{$prefix}-#{$breakpoint}-#{$i} {
+				@media (min-width: #{$value}) {
+					#{$property}-#{$side1}: var(--spacing-#{$i}) !important;
+					#{$property}-#{$side2}: var(--spacing-#{$i}) !important;
+				}
+			}
+		}
+	}
+}
+
+// Generate px, py, mx, my breakpoints spacing classes
+@include generate-breakpoint-axis-spacing-classes(padding, px, left, right);
+@include generate-breakpoint-axis-spacing-classes(padding, py, top, bottom);
+@include generate-breakpoint-axis-spacing-classes(margin, mx, left, right);
+@include generate-breakpoint-axis-spacing-classes(margin, my, top, bottom);
 
 // Additional classes for specific spacing
 

package/src/assets/amelipro/apTokens.scss

@@ -0,0 +1,315 @@
+// MEDIA QUERIES
+$xs: 599.99;
+$sm: 959.99;
+$md: 1263.99;
+$lg: 1903.99;
+$media-up-sm: '(min-width: #{$xs + 0.01}px)'; // >=600px
+$media-up-md: '(min-width: #{$sm + 0.01}px)'; // >=960px
+$media-up-lg: '(min-width: #{$md + 0.01}px)'; // >=1264px
+$media-up-xl: '(min-width: #{$lg + 0.01}px)'; // >=1904px
+
+$media-down-xl: '(max-width: #{$lg}px)'; // 0px - 1903px
+$media-down-lg: '(max-width: #{$md}px)'; // 0px - 1263px
+$media-down-md: '(max-width: #{$sm}px)'; // 0px - 959px
+$media-down-sm: '(max-width: #{$xs}px)'; // 0px - 599px
+
+$media-only-xs: '(max-width: #{$xs}px)'; // 0px - 599px
+$media-only-sm: '(min-width: #{$xs + 0.01}px) and (max-width: #{$sm}px)'; // 600px - 959px
+$media-only-md: '(min-width: #{$sm + 0.01}px) and (max-width: #{$md}px)'; // 600px - 1263px
+$media-only-lg: '(min-width: #{$md + 0.01}px) and (max-width: #{$lg}px)'; // 1264px - 1903px
+$media-only-xl: '(min-width: #{$lg + 0.01}px)'; // >= 1904px
+
+// AMELIPRO COLORS
+$ap-primary: #00749c; // bleu-4
+$ap-secondary: #00516d; // bleu-1
+$ap-error: #b33f2e; // rouge-3
+$ap-informations: #4d547d; // parme-1
+$ap-succes: #007863; // turquoise-3
+$ap-warning: #906c16; // ocre-1
+$ap-black: #000; // noir
+$ap-white: #fff; // blanc
+$ap-grey: #545859; // gris-2
+$ap-blue: #0c419a; // bleu-9
+$ap-yellow: #f0b323; // jaune-2
+$ap-green: #56c271; // vert-3
+$ap-red: #b33f2e; // rouge-3
+$ap-turquoise: #33bca5; // turquoise-4
+$ap-parme: #dde6fb; // parme-2
+$ap-pink: #d00063; // rose-1
+
+// AMELIPRO GREY VARIANT
+// DARKEN
+$ap-grey-darken1: #1a1b1b; // gris-1 app text color
+// LIGHTEN
+$ap-grey-lighten1: #cccdce; // gris-3
+$ap-grey-lighten2: #dddede; // gris-4
+$ap-grey-lighten3: #eee; // gris-5
+$ap-grey-lighten4: #f3f4f4; // gris-6
+$ap-grey-lighten5: #fafafa; // gris-7
+$ap-grey-lighten6: #f4f8f9; // gris-8 app background
+
+// AMELIPRO BLUE VARIANT
+// DARKEN
+$ap-blue-darken1: #00749c; // bleu-4
+$ap-blue-darken2: #00516d; // bleu-1
+// LIGHTEN
+$ap-blue-lighten1: #99dbf2; // bleu-6
+$ap-blue-lighten2: #ccedf9; // bleu-7
+$ap-blue-lighten3: #e6f6fc; // bleu-8
+$ap-blue-lighten4: #f3fbfe; // bleu-9
+
+// AMELIPRO YELLOW VARIANT
+// DARKEN
+$ap-yellow-darken1: #d8a120; // jaune-1
+$ap-yellow-darken2: #c08f1c; // ocre-3
+$ap-yellow-darken3: #a87d19; // ocre-2
+$ap-yellow-darken4: #906c16; // ocre-1
+// LIGHTEN
+$ap-yellow-lighten1: #f3c24f; // jaune-3
+$ap-yellow-lighten2: #fed66d; // jaune-4
+$ap-yellow-lighten3: #f7d990; // ocre-4
+$ap-yellow-lighten4: #f9e1a7; // ocre-5
+$ap-yellow-lighten5: #fcf0d3; // jaune-5
+
+// AMELIPRO GREEN VARIANT
+// DARKEN
+$ap-green-darken1: #459b5a; // vert-2
+$ap-green-darken2: #337343; // vert-1
+// LIGHTEN
+$ap-green-lighten1: #78ce8d; // vert-4
+$ap-green-lighten2: #ddf3e3; // vert-5
+
+// AMELIPRO RED VARIANT
+// DARKEN
+$ap-red-darken1: #9d3728; // rouge-2
+$ap-red-darken2: #70281c; // rouge-1
+// LIGHTEN
+$ap-red-lighten1: #e67261; // rouge-4
+$ap-red-lighten2: #ec9588; // rouge-5
+$ap-red-lighten3: #f9dcd7; // rouge-6
+$ap-red-lighten4: #fdf0ee; // rouge-7
+
+// AMELIPRO TURQUOISE VARIANT
+// DARKEN
+$ap-turquoise-darken1: #007863; // turquoise-3
+$ap-turquoise-darken2: #006654; // turquoise-2
+$ap-turquoise-darken3: #005647; // turquoise-1
+// LIGHTEN
+$ap-turquoise-lighten1: #cceee8; // turquoise-5
+$ap-turquoise-lighten2: #e6f7f4; // turquoise-6
+
+// AMELIPRO PARME VARIANT
+// DARKEN
+$ap-parme-darken1: #4d547d; // parme-1
+
+// font-weight global values
+$ap-font-weight-regular: 400; // regular
+$ap-font-weight-bold: 700; // bold
+
+// font size variables
+$font-size-xxs: 0.75rem; // 12px only for btn badges
+$font-size-xs: 0.875rem; // 14px
+$font-size-sm: 1rem; // 16px
+$font-size-md: 1.125rem; // 18px
+$font-size-lg: 1.25rem; // 20px
+$font-size-xl: 1.375rem; // 22px
+$font-size-xxl: 1.5rem; // 24px
+
+// button style values (used for AmeliproBtn and all similar shaped clickable elements)
+$btn-padding-x: 1rem;
+$btn-padding-y: 0.5rem;
+$btn-min-height: 2.5rem;
+$btn-radius: 0.75rem;
+
+// card default styles values (also valid for card like component as accordion)
+$card-radius: 0.75rem;
+$card-padding-desktop: 1rem;
+$card-padding-tablet: 1rem;
+$card-padding-mobile: 0.75rem;
+
+// dialog default style
+$dialog-padding: 1.5rem;
+
+// set switch style
+$switch-track-height: 2rem;
+$switch-track-width: 3.5rem;
+$switch-track-top: 0;
+$switch-thumb-height: 1.5rem;
+$switch-thumb-width: 1.5rem;
+$switch-thumb-top: 0.25rem;
+$switch-thumb-elevation: 0;
+$switch-width: 3.5rem;
+$switch-track-opacity: 1;
+
+// set filters and pills styles
+$filter-padding-x: 2rem;
+$filter-padding-y: 0.75rem;
+$filter-radius: 0.75rem;
+$filter-font-weight: $ap-font-weight-bold;
+
+// set tabs pills styles
+$tabs-pill-padding-x: 2rem;
+$tabs-pill-padding-y: 0.5rem;
+$tabs-pill-radius: 0.75rem;
+$tabs-pill-font-weight: $ap-font-weight-bold;
+
+// multiple folding cards btn styles
+$multi-folding-btn-padding-x: 2rem;
+$multi-folding-btn-padding-y: 0.5rem;
+$multi-folding-btn-radius: 0.75rem;
+$multi-folding-btn-font-weight: $ap-font-weight-bold;
+
+// default styles for form inputs
+$input-radius: 0.5rem;
+$text-field-border-radius: $input-radius;
+$label-font-weight: $ap-font-weight-bold;
+$input-min-height: 2.625rem;
+$tooltip-background-color: #fff;
+
+.border-0 {
+	border: 0;
+}
+
+// Font Styles
+.theme--ap.v-sheet {
+	color: $ap-grey-darken1;
+}
+
+.theme-ap {
+	p {
+		font-size: $font-size-xs;
+	}
+
+	[class*='text-'] {
+		font-family: Arial, Helvetica, sans-serif !important;
+		font-weight: $ap-font-weight-regular;
+		line-height: 1.3 !important;
+	}
+
+	// sets the service title text style
+	[class*='text-service-title'] {
+		font-family: Arial, Helvetica, sans-serif !important;
+		font-size: $font-size-xxl !important;
+		font-weight: $ap-font-weight-bold !important;
+		text-transform: uppercase !important;
+
+		@media #{$media-down-md} {
+			font-size: $font-size-md !important;
+		}
+	}
+
+	// sets classes font sizes
+	[class*='text-'][class*='-h1'],
+	h1 {
+		font-size: $font-size-xxl !important;
+		font-weight: $ap-font-weight-bold !important;
+	}
+
+	[class*='text-'][class*='-h2'],
+	h2 {
+		font-size: $font-size-lg !important;
+		font-weight: $ap-font-weight-bold;
+	}
+
+	[class*='text-'][class*='-h3'],
+	h3 {
+		font-size: $font-size-md !important;
+	}
+
+	[class*='text-'][class*='-h4'],
+	h4 {
+		font-size: $font-size-sm !important;
+		font-weight: $ap-font-weight-bold;
+	}
+
+	[class*='text-'][class*='-h5'],
+	[class*='text-'][class*='-h6'],
+	h5,
+	h6 {
+		font-size: $font-size-sm !important;
+		font-weight: $ap-font-weight-bold;
+	}
+
+	[class*='text-'][class*='-subtitle-1'],
+	[class*='text-'][class*='-subtitle-2'],
+	[class*='text-'][class*='-body-1'],
+	[class*='text-'][class*='-body-2'],
+	[class*='text-'][class*='-button'],
+	[class*='text-'][class*='-overline'] {
+		font-size: $font-size-xs !important;
+	}
+
+	[class*='text-'][class*='-caption'] {
+		font-size: $font-size-xxs !important;
+	}
+
+	// sets font weight
+	[class*='text-'][class*='-subtitle-1'],
+	[class*='text-'][class*='-subtitle-2'] {
+		font-weight: $ap-font-weight-bold;
+	}
+
+	[class*='font-weight-bold'] {
+		font-weight: $ap-font-weight-bold !important;
+	}
+
+	.font-size-xxs {
+		font-size: $font-size-xxs;
+	}
+
+	.font-size-xs {
+		font-size: $font-size-xs;
+	}
+
+	.font-size-sm {
+		font-size: $font-size-sm;
+	}
+
+	.font-size-md {
+		font-size: $font-size-md;
+	}
+
+	.font-size-lg {
+		font-size: $font-size-lg;
+	}
+
+	.font-size-xl {
+		font-size: $font-size-xl;
+	}
+
+	.font-size-xxl {
+		font-size: $font-size-xxl;
+	}
+
+	.relative {
+		position: relative;
+	}
+
+	.list-style-none {
+		margin: 0;
+		padding: 0 !important;
+		list-style: none !important;
+	}
+
+	.w-100 {
+		width: 100%;
+	}
+
+	.h-100 {
+		height: 100%;
+	}
+
+	.pointer {
+		cursor: pointer;
+	}
+}
+
+.theme-ap a {
+	font-size: $font-size-xs;
+	color: $ap-blue-darken1;
+
+	&:hover {
+		color: $ap-blue-darken2;
+		text-decoration: underline;
+	}
+}

package/src/assets/amelipro/icons/btn_structures.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="btn_structures" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#EDEDED;}
+	.st1{fill:#0087CF;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#0087CF;}
+</style>
+<circle id="Ellipse_248" class="st0" cx="17" cy="17" r="17"/>
+<g>
+	<path id="Tracé_17173" class="st1" d="M26.8,14.8L26.8,14.8l-2.5-2.5V8.1h-2.1v2.1L16.9,5L7,14.8c-0.8,0.8-0.9,2.1,0,3
+		c0.8,0.8,2.1,0.9,3,0c0,0,0,0,0,0l0,0l6.9-6.9l6.9,6.9c0.8,0.8,2.1,0.9,3,0C27.6,17.1,27.6,15.7,26.8,14.8
+		C26.8,14.9,26.8,14.9,26.8,14.8L26.8,14.8z"/>
+	<path id="Tracé_373" class="st2" d="M16.8,23c-1.2,0-2.2-1.1-2.2-2.3c0-1.2,1-2.2,2.2-2.2c1.2,0,2.2,1.1,2.2,2.3
+		C19,22,18,23,16.8,23z M16.8,15.9c-2.7,0-4.9,2.2-4.9,4.9c0,0,0,0,0,0.1c0,2.6,2.2,5.9,3.7,7.5c0.6,0.6,1.2,1.4,1.2,1.4
+		s0.7-0.8,1.3-1.4c1.5-1.6,3.6-4.7,3.6-7.5C21.8,18.1,19.6,15.9,16.8,15.9C16.8,15.9,16.8,15.9,16.8,15.9z"/>
+</g>
+</svg>