wcs-core 2.6.0 → 2.10.0

package/dist/collection/components/form-field/form-field.js

@@ -65,22 +65,19 @@ export class FormField {
     this.updateLabelRequiredFlag(isRequired, label);
   }
   initSpiedElement() {
-    var _a;
+    var _a, _b;
     const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox'];
-    this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements()[0];
+    this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements().filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];
     // If the component is used in another web component
-    if (this.spiedElement.tagName === 'SLOT') {
+    if (((_b = this.spiedElement) === null || _b === void 0 ? void 0 : _b.tagName) === 'SLOT') {
       this.spiedElement = (this.spiedElement
         .assignedElements()
         .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]);
     }
-    if (!this.spiedElement)
-      throw new Error('You must provide a slotted element in form field');
-    if (SUPPORTED_COMPONENTS
-      .map(x => x.toUpperCase())
-      .indexOf(this.spiedElement.tagName) === -1) {
+    if (!this.spiedElement) {
       // tslint:disable-next-line:no-console
-      console.warn('form-field component support ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component (component ' + this.spiedElement.tagName + ' not natively supported).');
+      console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');
+      return;
     }
   }
   updateLabelRequiredFlag(isRequired, label) {
@@ -143,23 +140,6 @@ export class FormField {
       "attribute": "is-error",
       "reflect": true,
       "defaultValue": "false"
-    },
-    "icon": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Name of the material icon to add to the field"
-      },
-      "attribute": "icon",
-      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/grid/grid.js

@@ -83,6 +83,19 @@ export class Grid {
     if (this.selectedItems) {
       this.updateSelectionWithValues(this.selectedItems);
     }
+    this.applyInitialSortConfig();
+  }
+  /**
+   * Handle existing column's filters (defined before the grid is instantiated)
+   * @private
+   */
+  applyInitialSortConfig() {
+    const [first, ...other] = this.columns.filter(c => c.sortOrder !== 'none');
+    // We keep only one active sorted column
+    other === null || other === void 0 ? void 0 : other.forEach(o => o.sortOrder = 'none');
+    if (first && !this.serverMode) {
+      this.sortBy(first);
+    }
   }
   getGridColumnsFromTemplate() {
     const slotted = this.el.shadowRoot.querySelector('slot[name="grid-column"]');
@@ -93,22 +106,32 @@ export class Grid {
     return slotted.assignedElements();
   }
   sortChangeEventHandler(event) {
+    if (event.detail.order === 'none')
+      return;
     // We keep only one active sort column
     this.columns.filter(c => c !== event.detail.column).forEach(c => c.sortOrder = 'none');
     if (this.serverMode)
       return;
-    if (event.detail.sortFn) {
+    this.sortBy(event.detail.column);
+    this.updatePageIndex();
+  }
+  /**
+   * Sorts the grid rows according to the given column's configuration
+   * @param colmun Column from which to extract the sorting configuration
+   * @private
+   */
+  sortBy(colmun) {
+    if (colmun.sortFn) {
       this.rows = _.cloneDeep(this.rows)
-        .sort((a, b) => event.detail.sortFn(a.data, b.data, event.detail.column) * getSortOrderInteger(event.detail.order));
+        .sort((a, b) => colmun.sortFn(a.data, b.data, colmun) * getSortOrderInteger(colmun.sortOrder));
     }
     else {
       this.rows = _.cloneDeep(this.rows)
         .sort((a, b) => {
-        const path = event.detail.column.path;
-        return ((_.get(a.data, path) < _.get(b.data, path)) ? -1 : (_.get(a.data, path) > _.get(b.data, path)) ? 1 : 0) * getSortOrderInteger(event.detail.order);
+        const path = colmun.path;
+        return ((_.get(a.data, path) < _.get(b.data, path)) ? -1 : (_.get(a.data, path) > _.get(b.data, path)) ? 1 : 0) * getSortOrderInteger(colmun.sortOrder);
       });
     }
-    this.updatePageIndex();
   }
   /**
    * Update the page's number of all rows

package/dist/collection/components/grid-column/grid-column.js

@@ -1,4 +1,4 @@
-import { Component, Event, h, Host, Prop, Element, Watch } from '@stencil/core';
+import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
 import { GridSortArrow } from './grid-sort-arrow';
 export class GridColumn {
   constructor() {
@@ -10,6 +10,9 @@ export class GridColumn {
   parseMyObjectProp(newValue) {
     this.wcsHiddenChange.emit(newValue);
   }
+  sortOrderChange(_) {
+    this.emitSortConfig();
+  }
   emitSortConfig() {
     if (!this.sort)
       return;
@@ -27,8 +30,8 @@ export class GridColumn {
           this.sort ? h(GridSortArrow, { state: this.sortOrder }) : ''))));
   }
   onSortClick() {
+    // @Watch on sortOrder property will trigger wcsSortChange event
     this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';
-    this.emitSortConfig();
   }
   static get is() { return "wcs-grid-column"; }
   static get encapsulation() { return "shadow"; }
@@ -151,7 +154,7 @@ export class GridColumn {
         "text": ""
       },
       "attribute": "sort-order",
-      "reflect": true,
+      "reflect": false,
       "defaultValue": "'none'"
     },
     "width": {
@@ -248,5 +251,8 @@ export class GridColumn {
   static get watchers() { return [{
       "propName": "hidden",
       "methodName": "parseMyObjectProp"
+    }, {
+      "propName": "sortOrder",
+      "methodName": "sortOrderChange"
     }]; }
 }

package/dist/collection/components/horizontal-stepper/horizontal-stepper.js

@@ -133,9 +133,14 @@ export class HorizontalStepper {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'linear' | 'nonLinear'",
+        "original": "HorizontalStepperMode",
         "resolved": "\"linear\" | \"nonLinear\"",
-        "references": {}
+        "references": {
+          "HorizontalStepperMode": {
+            "location": "import",
+            "path": "./horizontal-stepper-interface"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/input/input.css

@@ -37,14 +37,62 @@
   margin-left: 8px;
   margin-right: -8px;
 }
+:host .prefix, :host .suffix {
+  color: var(--wcs-white);
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+  padding: 0 calc(var(--wcs-padding) / 2);
+  font-weight: var(--wcs-font-weight-form-value) !important;
+  background-color: var(--wcs-text-disabled);
+}
+:host .prefix {
+  border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);
+  margin: -1px 0 -1px -1px;
+  border-left: solid 1px transparent;
+  border-top: solid 1px transparent;
+  border-bottom: solid 1px transparent;
+}
+:host .suffix {
+  border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;
+  margin: -1px -1px -1px 0px;
+  border-right: solid 1px transparent;
+  border-top: solid 1px transparent;
+  border-bottom: solid 1px transparent;
+}
 
 :host([state=error]) {
   border-color: var(--wcs-red) !important;
 }
 
+:host([data-has-prefix]) input {
+  padding-left: calc(var(--wcs-padding) / 2);
+}
+
+:host([data-has-suffix]) input {
+  padding-left: calc(var(--wcs-padding) / 2);
+}
+
+:host([disabled]) input {
+  color: var(--wcs-text-disabled);
+}
+:host([disabled]) .prefix, :host([disabled]) .suffix {
+  color: var(--wcs-light);
+}
+
 :host(:focus-within) {
   border: solid 1px var(--wcs-primary);
 }
+:host(:focus-within) .prefix {
+  border-left: solid 1px var(--wcs-primary);
+  border-top: solid 1px var(--wcs-primary);
+  border-bottom: solid 1px var(--wcs-primary);
+}
+:host(:focus-within) .suffix {
+  border-right: solid 1px var(--wcs-primary);
+  border-top: solid 1px var(--wcs-primary);
+  border-bottom: solid 1px var(--wcs-primary);
+}
 :host(:focus-within) wcs-mat-icon {
   color: var(--wcs-primary);
 }

package/dist/collection/components/input/input.js

@@ -205,9 +205,11 @@ export class Input {
     if (label) {
       label.id = labelId;
     }
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null },
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel },
+      this.prefixLabel ? (h("span", { class: "prefix" }, this.prefixLabel)) : null,
       this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null,
-      h("input", Object.assign({ class: "native-input", ref: input => this.nativeInput = input, "aria-labelledby": label ? labelId : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes))));
+      h("input", Object.assign({ class: "native-input", ref: input => this.nativeInput = input, "aria-labelledby": label ? labelId : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)),
+      this.suffixLabel ? (h("span", { class: "suffix" }, this.suffixLabel)) : null));
   }
   static get is() { return "wcs-input"; }
   static get encapsulation() { return "shadow"; }
@@ -386,6 +388,40 @@ export class Input {
       "reflect": false,
       "defaultValue": "0"
     },
+    "prefixLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Prefix displayed before the text field contents. This is not included in the value."
+      },
+      "attribute": "prefix-label",
+      "reflect": false
+    },
+    "suffixLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Suffix displayed after the text field contents. This is not included in the value."
+      },
+      "attribute": "suffix-label",
+      "reflect": false
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/mat-icon/mat-icon.css

@@ -1,5 +1,5 @@
 :host {
-  display: flex;
+  display: inline-block;
 }
 :host .size-s {
   font-size: 18px;

package/dist/collection/components/mat-icon/mat-icon.js

@@ -88,9 +88,14 @@ export class MatIcon {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'s' | 'm' | 'l' | 'xl'",
+        "original": "MaterialIconSize",
         "resolved": "\"l\" | \"m\" | \"s\" | \"xl\"",
-        "references": {}
+        "references": {
+          "MaterialIconSize": {
+            "location": "import",
+            "path": "./mat-icon-interface"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/modal/modal-interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/modal/modal.css

@@ -20,7 +20,14 @@ wcs-modal[show] {
 /**
 Backdrop
  */
-wcs-modal[backdrop] .wcs-modal-backdrop {
+wcs-modal[without-backdrop] .wcs-modal-backdrop {
+  display: none;
+}
+wcs-modal[without-backdrop] .wcs-modal-container {
+  border: solid 1px var(--wcs-text-light);
+}
+
+.wcs-modal-backdrop {
   display: block;
   position: fixed;
   top: 0;
@@ -31,10 +38,6 @@ wcs-modal[backdrop] .wcs-modal-backdrop {
   background-color: var(--wcs-black);
 }
 
-.wcs-modal-backdrop {
-  display: none;
-}
-
 /**
 Modal window
  */
@@ -42,8 +45,8 @@ Modal window
   position: fixed;
   top: 50%;
   left: 50%;
-  min-width: 400px;
-  max-width: 480px;
+  box-sizing: border-box;
+  max-width: 100%;
   /* bring your own prefixes */
   transform: translate(-50%, -50%);
   pointer-events: auto;
@@ -57,6 +60,22 @@ Modal window
   padding: 1.375rem 1.875rem 1.875rem 1.875rem;
 }
 
+.wcs-modal-container[data-size=s] {
+  width: 288px;
+}
+
+.wcs-modal-container[data-size=m] {
+  width: 480px;
+}
+
+.wcs-modal-container[data-size=l] {
+  width: 864px;
+}
+
+.wcs-modal-container[data-size=xl] {
+  width: 1200px;
+}
+
 .wcs-modal-header {
   margin-bottom: 8px;
   display: flex;

package/dist/collection/components/modal/modal.js

@@ -4,7 +4,7 @@ export class Modal {
     /**
      * Specifies whether the component should display a backdrop on the entire page
      */
-    this.backdrop = true;
+    this.withoutBackdrop = false;
     /**
      * Displays the modal
      */
@@ -14,15 +14,20 @@ export class Modal {
      * if false, it won't close the modal when the escape key is pressed.
      */
     this.showCloseButton = false;
+    /**
+     * There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the
+     * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.
+     */
+    this.size = 'm';
   }
   render() {
     return (h(Host, null,
       h("div", { class: "wcs-modal-backdrop" }),
-      h("div", { class: "wcs-modal-container" },
+      h("div", { class: "wcs-modal-container", "data-size": this.size },
         h("div", { class: "wcs-modal-header" },
           h("h5", null,
             h("slot", { name: "header" })),
-          this.showCloseButton && (h("wcs-button", { shape: "round", mode: "stroked", class: "wcs-dark", onClick: ($event) => this.onCloseButtonClick($event) },
+          this.showCloseButton && (h("wcs-button", { shape: "round", mode: "clear", class: "wcs-dark", onClick: ($event) => this.onCloseButtonClick($event) },
             h("i", { class: "material-icons" }, "close")))),
         h("div", { class: "wcs-modal-content" },
           h("slot", null)),
@@ -49,7 +54,7 @@ export class Modal {
     "$": ["modal.css"]
   }; }
   static get properties() { return {
-    "backdrop": {
+    "withoutBackdrop": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -63,13 +68,13 @@ export class Modal {
         "tags": [],
         "text": "Specifies whether the component should display a backdrop on the entire page"
       },
-      "attribute": "backdrop",
+      "attribute": "without-backdrop",
       "reflect": true,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
     "show": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -102,6 +107,29 @@ export class Modal {
       "attribute": "show-close-button",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ModalSize",
+        "resolved": "\"l\" | \"m\" | \"s\" | \"xl\"",
+        "references": {
+          "ModalSize": {
+            "location": "import",
+            "path": "./modal-interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\nsize best suited for the content and screen size displaying the modal. Remember to test responsiveness."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'m'"
     }
   }; }
   static get events() { return [{

package/dist/collection/components/nav-item/nav-item.js

@@ -39,7 +39,7 @@ export class NavItem {
     },
     "href": {
       "type": "string",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "string",
         "resolved": "string",

package/dist/collection/components/progress-bar/progress-bar.js

@@ -1,4 +1,4 @@
-import { Component, Prop, h } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 /**
  * Component displaying progress as a bar.
  */
@@ -50,7 +50,7 @@ export class ProgressBar {
   static get properties() { return {
     "small": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -68,7 +68,7 @@ export class ProgressBar {
     },
     "showLabel": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -86,7 +86,7 @@ export class ProgressBar {
     },
     "value": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",

package/dist/collection/components/radio/radio.component.js

@@ -31,7 +31,7 @@ export class Radio {
   }
   render() {
     return (h(Host, { slot: "option" },
-      h("input", { id: this.inputId, type: "radio", value: this.value, checked: this.checked, "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}` }),
+      h("input", { id: this.inputId, type: "radio", value: this.value, checked: this.checked, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}` }),
       h("label", { htmlFor: `${this.inputId}` }, this.label)));
   }
   static get is() { return "wcs-radio"; }
@@ -47,9 +47,14 @@ export class Radio {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'radio' | 'option'",
-        "resolved": "\"option\" | \"radio\"",
-        "references": {}
+        "original": "RadioGroupMode",
+        "resolved": "\"horizontal\" | \"option\" | \"radio\"",
+        "references": {
+          "RadioGroupMode": {
+            "location": "import",
+            "path": "../radio-group/radio-group-interface"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/radio/radio.css

@@ -1,32 +1,27 @@
-:host([mode=radio]) input {
+:host([mode=radio]) input,
+:host([mode=horizontal]) input {
   display: none;
 }
-:host([mode=radio]) label {
-  padding: 0.125rem 0 0;
+:host([mode=radio]) label,
+:host([mode=horizontal]) label {
   margin-bottom: 0;
   color: var(--wcs-text-medium);
-  cursor: pointer;
   background-color: transparent;
-  border: none;
   font-weight: 500 !important;
-  transition: 0.175s ease-in-out;
 }
-:host([mode=radio]) label:before {
-  transition: 0.175s ease-in-out;
+:host([mode=radio]) label:before,
+:host([mode=horizontal]) label:before {
   border-radius: 50%;
-  margin-right: var(--wcs-base-margin);
   border: 2px solid var(--wcs-text-disabled);
   position: relative;
-  display: inline-block;
-  top: 3px;
   width: 1.125rem;
   height: 1.125rem;
   pointer-events: none;
   content: "";
   background-color: var(--wcs-white);
-  box-sizing: border-box;
 }
-:host([mode=radio]) label:after {
+:host([mode=radio]) label:after,
+:host([mode=horizontal]) label:after {
   transition: 0.175s ease-in-out;
   position: relative;
   width: 1.125rem;
@@ -35,21 +30,52 @@
   background: no-repeat 50%/50% 50%;
 }
 
-:host([mode=radio][checked]) label {
+:host([disabled]) label {
+  color: var(--wcs-text-disabled);
+}
+
+:host(:not([disabled])) label {
+  cursor: pointer;
+}
+
+:host([mode=radio][checked]) label,
+:host([mode=horizontal][checked]) label {
   color: var(--wcs-primary);
 }
-:host([mode=radio][checked]) label:before {
+:host([mode=radio][checked]) label:before,
+:host([mode=horizontal][checked]) label:before {
   border-color: var(--wcs-primary);
   background-color: var(--wcs-primary);
 }
 
-:host([mode=radio]:hover) label {
+:host([mode=radio]:hover):not([disabled]) label,
+:host([mode=horizontal]:hover):not([disabled]) label {
   color: var(--wcs-primary);
 }
-:host([mode=radio]:hover) label:before {
+:host([mode=radio]:hover):not([disabled]) label:before,
+:host([mode=horizontal]:hover):not([disabled]) label:before {
   border-color: var(--wcs-primary);
 }
 
+:host([mode=radio]) label {
+  padding: 0.125rem 0 0;
+  border: none;
+  transition: 0.175s ease-in-out;
+}
+:host([mode=radio]) label:before {
+  transition: 0.175s ease-in-out;
+  margin-right: var(--wcs-base-margin);
+  display: inline-block;
+  top: 3px;
+  box-sizing: border-box;
+}
+
+:host([mode=horizontal]) label:before {
+  transition: background-color 0.175s ease-in-out;
+  margin: auto auto var(--wcs-base-margin);
+  display: block;
+}
+
 :host([mode=option]) {
   padding: var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);
   font-weight: 500 !important;
@@ -62,11 +88,10 @@
   padding: 0;
 }
 :host([mode=option]) label {
-  padding: 0.375rem 1.25rem 0.3125rem;
+  padding: 5px calc(2 * var(--wcs-base-margin));
   margin-bottom: 0;
   color: var(--wcs-white);
   white-space: nowrap;
-  cursor: pointer;
   border-radius: 0.4375rem;
 }
 

package/dist/collection/components/radio-group/radio-group.css

@@ -19,7 +19,11 @@
 :host([mode=option]) {
   display: inline-flex;
   flex-direction: row;
-  padding: calc(var(--wcs-base-margin) / 2);
+  padding: calc(var(--wcs-base-margin) / 4);
   background-color: #4d4f53;
   border-radius: 0.6875rem;
+}
+
+:host([mode=horizontal]) {
+  justify-content: space-between;
 }