diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index fd63850335655032145d9569a1af0f469f55b975..af03d1b8e635c785fa204c37abbcc4696d6835a4 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -28,7 +28,7 @@ import { ModalV3Component } from './v3/modal/modal.component';
import { RadioV3Component } from './v3/radio/radio.component';
import { SearchBarV3Component } from './v3/search-bar/search-bar.component';
import { SwitchComponent } from './v3/switch/switch.component';
-import { TagItemV3Component } from './v3/tag/tag-item/tag-item.component';
+import { TagItemV3Component } from './v3/tag-item/tag-item.component';
import { TextareaV3Component } from './v3/textarea/textarea.component';
export {
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.ts b/src/app/shared/components/svg-icon/svg-icon.component.ts
index 59fd5650fe345a44f075fec0007a4d127a44903e..ec06e80776349aaf0ed2e2ef2614ef495614ee13 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.ts
+++ b/src/app/shared/components/svg-icon/svg-icon.component.ts
@@ -6,9 +6,13 @@ import { Component, Input } from '@angular/core';
styleUrls: ['./svg-icon.component.scss'],
})
export class SvgIconComponent {
- @Input() icon: string;
+ /** Id of svg to use */
+ @Input({ required: true }) icon: string;
+
+ /** Folder of the sprite to use */
+ @Input({ required: true }) type: string;
+
@Input() iconClass: string;
- @Input() type: string;
@Input() iconColor = 'none';
@Input() title: string = null;
}
diff --git a/src/app/shared/components/v3/button/button.component.ts b/src/app/shared/components/v3/button/button.component.ts
index 58c195f635c019b32af9b44e29257b90d34deac8..1402a9f783c87ee525c10d27c2de133b79cf196c 100644
--- a/src/app/shared/components/v3/button/button.component.ts
+++ b/src/app/shared/components/v3/button/button.component.ts
@@ -7,12 +7,12 @@ import { ButtonTypeV3 } from './button-type.enum';
styleUrls: ['./button.component.scss'],
})
export class ButtonV3Component {
+ /** Button label */
+ @Input({ required: true }) label: string;
+
/** HTML type of the button */
@Input() type: 'submit' | 'button' | 'reset' = 'button';
- /** Button label */
- @Input() label = 'Bouton';
-
/** What variant should be the button ? */
@Input() variant?: ButtonTypeV3 = ButtonTypeV3.Primary;
diff --git a/src/app/shared/components/v3/button/icon-button/icon-button.component.ts b/src/app/shared/components/v3/button/icon-button/icon-button.component.ts
index 5e7d0dea305d39bb3ddd0364e6b871d83604b5e7..ca6afba81023bb6c5f834c46bd31dee6340c797b 100644
--- a/src/app/shared/components/v3/button/icon-button/icon-button.component.ts
+++ b/src/app/shared/components/v3/button/icon-button/icon-button.component.ts
@@ -7,6 +7,9 @@ import { ButtonTypeV3 } from '../button-type.enum';
styleUrls: ['../button.component.scss'],
})
export class IconButtonV3Component {
+ /** Icon name */
+ @Input({ required: true }) iconName: string;
+
/** HTML type of the button */
@Input() type: 'submit' | 'button' | 'reset' = 'button';
@@ -22,9 +25,6 @@ export class IconButtonV3Component {
/** Folder of the icon ex: assets/ico */
@Input() iconFolder = 'ico';
- /** Icon name */
- @Input() iconName: string;
-
/** Icon color, defaults to none as the svg-icon does */
@Input() iconColor = 'none';
diff --git a/src/app/shared/components/v3/checkbox/checkbox.component.ts b/src/app/shared/components/v3/checkbox/checkbox.component.ts
index 8fb73ea6f850d854952face78e7df4a1eb03da0e..6328818c279f39aadd16ce14bb361c9ebc83bdf1 100644
--- a/src/app/shared/components/v3/checkbox/checkbox.component.ts
+++ b/src/app/shared/components/v3/checkbox/checkbox.component.ts
@@ -10,7 +10,7 @@ export class CheckboxV3Component {
@Input() id: string;
/** Checked ? */
- @Input() checked: boolean;
+ @Input({ required: true }) checked: boolean;
/** Indeterminate (half-checked) ? */
@Input() indeterminate?: boolean;
diff --git a/src/app/shared/components/v3/collapse/collapse.component.ts b/src/app/shared/components/v3/collapse/collapse.component.ts
index 9680242edd6a2c1e67032402e6ae837c11b1a790..2d4275e96ae4a084efbd42dd73d01953f96011b8 100644
--- a/src/app/shared/components/v3/collapse/collapse.component.ts
+++ b/src/app/shared/components/v3/collapse/collapse.component.ts
@@ -13,11 +13,15 @@ import { CollapseType } from './collapse.type';
export class CollapseComponent implements AfterContentInit {
@ContentChild(CollapseHeaderComponent) title: CollapseHeaderComponent;
@ContentChild(CollapseContentComponent) content: CollapseContentComponent;
+
@Input() variant?: CollapseType = CollapseType.Regular;
+
/** Adapts border-radius and right padding */
@Input() size?: 'small' | 'medium' = 'small';
+
/** Box-shadow when expanded? */
@Input() boxShadow? = false;
+
/** Default expanded value */
@Input() expanded? = false;
diff --git a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts b/src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts
index b8662ab3cdf816a3b40b3670f817615b60ef2867..5e8b003d5cc45cbd926781ae2a9b4dbd36109f75 100644
--- a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts
+++ b/src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts
@@ -7,15 +7,15 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
})
export class LabelCheckboxV3Component {
/** Label text to display */
- @Input() label: string;
+ @Input({ required: true }) label: string;
/** HTML for that will control checkbox */
- @Input() for: string;
+ @Input({ required: true }) for: string;
/** What size should the checkbox be ? */
@Input() size?: 'small' | 'medium' = 'small';
- @Input() checked: boolean;
+ @Input({ required: true }) checked: boolean;
@Input() indeterminate?: boolean;
diff --git a/src/app/shared/components/v3/modal/modal.component.ts b/src/app/shared/components/v3/modal/modal.component.ts
index 83a6f73cf36a8077c7ec0b4593c8f1958b308b0a..5fcdd7c9996616c8c88d7ce36592241c9dde437a 100644
--- a/src/app/shared/components/v3/modal/modal.component.ts
+++ b/src/app/shared/components/v3/modal/modal.component.ts
@@ -7,8 +7,8 @@ import { ButtonTypeV3 } from '../button/button-type.enum';
styleUrls: ['./modal.component.scss'],
})
export class ModalV3Component {
- /* Is modal openned ? */
- @Input() public opened: boolean;
+ /* Is modal opened ? */
+ @Input({ required: true }) public opened: boolean;
/* Content of the modal (between title and buttons) */
@Input() public content: string;
diff --git a/src/app/shared/components/v3/radio/radio.component.ts b/src/app/shared/components/v3/radio/radio.component.ts
index 2d0e01ba625963c38737b0219570df16a76a3b00..3ee99023f42d87906f1408ef20871c7eb38d5ade 100644
--- a/src/app/shared/components/v3/radio/radio.component.ts
+++ b/src/app/shared/components/v3/radio/radio.component.ts
@@ -10,7 +10,7 @@ export class RadioV3Component {
@Input() id: string;
/** Checked ? */
- @Input() checked: boolean;
+ @Input({ required: true }) checked: boolean;
/** What size should the checkbox be ? */
@Input() size?: 'small' | 'medium' = 'medium';
diff --git a/src/app/shared/components/v3/search-bar/search-bar.component.ts b/src/app/shared/components/v3/search-bar/search-bar.component.ts
index 2c8f5db93a27a6af3479ceb028d9ac586ec30d27..70586f4a38ceb737d1d9b8a7a7da83e46b7b9204 100644
--- a/src/app/shared/components/v3/search-bar/search-bar.component.ts
+++ b/src/app/shared/components/v3/search-bar/search-bar.component.ts
@@ -8,9 +8,11 @@ import { ButtonTypeV3 } from '../button/button-type.enum';
})
export class SearchBarV3Component {
@Input() placeholder = 'Rechercher';
- @Input() value = '';
+ @Input({ required: true }) value = '';
+
/** Triggers when input changes */
@Output() valueChange = new EventEmitter<string>();
+
/** Triggers when button is clicked or Enter is pressed on input */
@Output() search = new EventEmitter<string>();
diff --git a/src/app/shared/components/v3/switch/switch.component.ts b/src/app/shared/components/v3/switch/switch.component.ts
index 962a0ba5fa259ab9e9028be0895117b7aee80481..73cce916122607785773ca2b9ce28a0271c56d3d 100644
--- a/src/app/shared/components/v3/switch/switch.component.ts
+++ b/src/app/shared/components/v3/switch/switch.component.ts
@@ -7,10 +7,10 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
})
export class SwitchComponent {
/** Label text to display */
- @Input() label: string;
+ @Input({ required: true }) label: string;
/** Switch checked value */
- @Input() checked: boolean;
+ @Input({ required: true }) checked: boolean;
/** Status text for the switch */
@Input() checkedText?: string = 'Activé';
diff --git a/src/app/shared/components/v3/tag/tag-item/tag-item.component.html b/src/app/shared/components/v3/tag-item/tag-item.component.html
similarity index 100%
rename from src/app/shared/components/v3/tag/tag-item/tag-item.component.html
rename to src/app/shared/components/v3/tag-item/tag-item.component.html
diff --git a/src/app/shared/components/v3/tag/tag-item/tag-item.component.scss b/src/app/shared/components/v3/tag-item/tag-item.component.scss
similarity index 100%
rename from src/app/shared/components/v3/tag/tag-item/tag-item.component.scss
rename to src/app/shared/components/v3/tag-item/tag-item.component.scss
diff --git a/src/app/shared/components/v3/tag/tag-item/tag-item.component.ts b/src/app/shared/components/v3/tag-item/tag-item.component.ts
similarity index 100%
rename from src/app/shared/components/v3/tag/tag-item/tag-item.component.ts
rename to src/app/shared/components/v3/tag-item/tag-item.component.ts
diff --git a/src/app/shared/components/v3/tag/tag-item/tag-item.stories.ts b/src/app/shared/components/v3/tag-item/tag-item.stories.ts
similarity index 96%
rename from src/app/shared/components/v3/tag/tag-item/tag-item.stories.ts
rename to src/app/shared/components/v3/tag-item/tag-item.stories.ts
index 7ffe085f81ac6fb27df605b4151af10f6272513d..00bc172cc8245ac2e30880741853dc30954e35b1 100644
--- a/src/app/shared/components/v3/tag/tag-item/tag-item.stories.ts
+++ b/src/app/shared/components/v3/tag-item/tag-item.stories.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
import { EventEmitter } from '@angular/core';
import type { Meta, StoryObj } from '@storybook/angular';
import { moduleMetadata } from '@storybook/angular';
-import { SvgIconComponent } from '../../../svg-icon/svg-icon.component';
+import { SvgIconComponent } from '../../svg-icon/svg-icon.component';
import { TagItemV3Component } from './tag-item.component';
// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction