@gouvfr-anct/mediation-numerique
Version:
📚 Bibliothèque pour la cartographie de l’offre de médiation numérique.
273 lines • 119 kB
JavaScript
import { animate, AUTO_STYLE, state, style, transition, trigger } from '@angular/animations';
import { Component, EventEmitter, Inject, Input, Output } from '@angular/core';
import * as _ from 'lodash';
import { Equipment } from '../../../map/models/enum/equipment.enum';
import { Structure } from '../../../map/models/structure.model';
import { AccessModality } from '../../models/enum/access-modality.enum';
import { PublicCategorie } from '../../models/enum/public.enum';
import { SEARCH_TOKEN } from '../../repositories/search.repository';
import { STRUCTURE_TOKEN } from '../../repositories/structure.repository';
import { PrintService } from '../../services/print.service';
import * as i0 from "@angular/core";
import * as i1 from "../../services/print.service";
import * as i2 from "@angular/router";
import * as i3 from "@angular/common";
import * as i4 from "@angular/flex-layout";
import * as i5 from "@gouvfr-anct/mediation-numerique/shared";
import * as i6 from "../logo-card/logo-card.component";
export class StructureDetailsComponent {
constructor(searchService, structureService, printService, route, router, location) {
this.searchService = searchService;
this.structureService = structureService;
this.printService = printService;
this.route = route;
this.router = router;
this.location = location;
this.closeDetails = new EventEmitter();
this.accessModality = AccessModality;
this.showBaseSkills = false;
this.showAccessRights = false;
this.showParentingHelp = false;
this.showSocialAndProfessional = false;
this.showDigitalSecurity = false;
this.printMode = false;
this.isLoading = true;
this.lockdownInfoDisplay = false;
this.structureErrorModalOpenned = false;
this.fullScreen = false;
this.keepOriginalOrder = (a, b) => a.key;
route.url.subscribe((url) => {
if (url[0]?.path === 'structure') {
this.structure = new Structure(this.printService.structure);
this.printMode = true;
// Display formations for printing
this.toggleAccessRights();
this.toggleBaseSkills();
this.toggleDigitalSecurity();
this.toggleParentingHelp();
this.toggleSocialAndProfessional();
this.initForm();
}
});
}
ngOnInit() {
this.isLoading = true;
this.route.queryParams.subscribe((queryParams) => {
if (queryParams.id) {
this.initForm();
}
else if (!this.printMode) {
this.structure = null;
}
});
this.route.data.subscribe((data) => {
if (data.fullScreen) {
this.fullScreen = true;
}
});
}
async initForm() {
this.searchService.getCategoriesTraining().subscribe((referentiels) => {
referentiels.forEach((referentiel) => {
if (referentiel.isBaseSkills()) {
this.baseSkillssReferentiel = referentiel;
}
else if (referentiel.isRigthtsAccess()) {
this.accessRightsReferentiel = referentiel;
}
else if (referentiel.isDigitalCultureSecurity()) {
this.digitalCultureSecuritysReferentiel = referentiel;
}
else if (referentiel.isParentingHelp()) {
this.parentingHelpsReferentiel = referentiel;
}
else if (referentiel.isSocialAndProfessional()) {
this.socialAndProfessionalsReferentiel = referentiel;
}
});
this.setServiceCategories();
if (this.printMode) {
this.printService.onDataReady();
}
this.isLoading = false;
});
const index = this.structure.proceduresAccompaniment.indexOf('autres');
if (index > -1) {
this.structure.proceduresAccompaniment.splice(index, 1);
}
}
getEquipmentsLabel(equipment) {
switch (equipment) {
case Equipment.wifi:
return 'Wifi en accès libre';
case Equipment.bornes:
return this.structure.nbNumericTerminal > 1 ? 'Bornes numériques' : 'Borne numérique';
case Equipment.printer:
return this.structure.nbPrinters > 1 ? 'Imprimantes' : 'Imprimante';
case Equipment.tablet:
return this.structure.nbTablets > 1 ? 'Tablettes' : 'Tablette';
case Equipment.computer:
return this.structure.nbComputers > 1 ? 'Ordinateurs' : 'Ordinateur';
case Equipment.scanner:
return this.structure.nbScanners > 1 ? 'Scanners' : 'Scanner';
default:
return null;
}
}
close() {
this.route.url.subscribe((urls) => {
if (urls.length > 0 && urls[0].path !== 'orientation') {
this.router.navigate(['/acteurs'], {
relativeTo: this.route,
queryParams: {
id: null
},
queryParamsHandling: 'merge'
});
}
else {
this.isLoading = true;
this.location.back();
}
});
}
print() {
this.printService.printDocument('structure', this.structure);
}
getAccessLabel(accessModality) {
switch (accessModality) {
case AccessModality.free:
return 'Accès libre';
case AccessModality.meeting:
return 'Sur rendez-vous';
case AccessModality.meetingOnly:
return 'Uniquement sur RDV';
case AccessModality.numeric:
return 'Téléphone / Visio';
default:
return null;
}
}
getPublicLabel(tagetPublic) {
switch (tagetPublic) {
case PublicCategorie.young:
return 'Jeunes (16 - 25 ans)';
case PublicCategorie.adult:
return 'Adultes';
case PublicCategorie.elderly:
return 'Séniors (+ de 65 ans)';
case PublicCategorie.all:
return 'Tout public';
case PublicCategorie.under16Years:
return 'Moins de 16 ans';
case PublicCategorie.women:
return 'Uniquement femmes';
default:
return null;
}
}
setServiceCategories() {
this.baseSkills = this.structure.baseSkills.map((skill) => _.find(this.baseSkillssReferentiel.modules, { id: skill }));
this.accessRights = this.structure.accessRight.map((rights) => _.find(this.accessRightsReferentiel.modules, { id: rights }));
this.parentingHelp = this.structure.parentingHelp.map((help) => _.find(this.parentingHelpsReferentiel.modules, { id: help }));
this.socialAndProfessional = this.structure.socialAndProfessional.map((skill) => _.find(this.socialAndProfessionalsReferentiel.modules, { id: skill }));
this.digitalCultureSecurity = this.structure.digitalCultureSecurity.map((skill) => _.find(this.digitalCultureSecuritysReferentiel.modules, { id: skill }));
}
isBaseSkills() {
return this.baseSkills && this.baseSkills[0] !== undefined;
}
isAccessRights() {
return this.accessRights && this.accessRights[0] !== undefined;
}
isParentingHelp() {
return this.parentingHelp && this.parentingHelp[0] !== undefined;
}
isSocialAndProfessional() {
return this.socialAndProfessional && this.socialAndProfessional[0] !== undefined;
}
isDigitalSecurity() {
return this.digitalCultureSecurity && this.digitalCultureSecurity[0] !== undefined;
}
filterOnlyEquipments(equipmentsAndServices) {
return equipmentsAndServices.filter((eqpt) => ['ordinateurs', 'tablettes', 'bornesNumeriques', 'imprimantes', 'scanners', 'wifiEnAccesLibre'].includes(eqpt));
}
displayModalError() {
this.structureErrorModalOpenned = !this.structureErrorModalOpenned;
}
sendErrorEmail(modalValue) {
this.displayModalError();
if (modalValue.shouldSend) {
this.structureService.sendMailOnStructureError(this.structure._id, modalValue.content).subscribe(() => { });
}
}
multipleWorkshop() {
if (this.structure.baseSkills.length +
this.structure.accessRight.length +
this.structure.parentingHelp.length +
this.structure.socialAndProfessional.length +
this.structure.digitalCultureSecurity.length >
1) {
return true;
}
return false;
}
toggleBaseSkills() {
this.showBaseSkills = !this.showBaseSkills;
}
toggleAccessRights() {
this.showAccessRights = !this.showAccessRights;
}
toggleParentingHelp() {
this.showParentingHelp = !this.showParentingHelp;
}
toggleSocialAndProfessional() {
this.showSocialAndProfessional = !this.showSocialAndProfessional;
}
toggleDigitalSecurity() {
this.showDigitalSecurity = !this.showDigitalSecurity;
}
goToWebsite() {
window.open(this.structure.website, '_blank');
}
}
StructureDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: StructureDetailsComponent, deps: [{ token: SEARCH_TOKEN }, { token: STRUCTURE_TOKEN }, { token: i1.PrintService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i3.Location }], target: i0.ɵɵFactoryTarget.Component });
StructureDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: StructureDetailsComponent, selector: "app-structure-details", inputs: { structure: "structure" }, outputs: { closeDetails: "closeDetails" }, providers: [PrintService], ngImport: i0, template: "<div class=\"structure-details\" [ngClass]=\"{ fullScreen: fullScreen === true }\" [@slideInOut] *ngIf=\"structure\">\n <div class=\"structure-details-container\">\n <!-- Header info -->\n <div class=\"structure-details-title\" fxLayout=\"row\" fxLayoutGap=\"8px\" fxLayoutAlign=\"space-evenly center\">\n <app-svg-icon [type]=\"'ico'\" [icon]=\"'structureAvatar'\" [iconClass]=\"'icon-52'\"></app-svg-icon>\n <h1 class=\"bold\">{{ structure.structureName }}</h1>\n <div class=\"ico-close\">\n <div (click)=\"close()\" class=\"ico-close-details\"></div>\n </div>\n </div>\n <div class=\"structure-details-content\" fxLayout=\"row\" fxLayoutAlign=\"center center\" *ngIf=\"isLoading\">\n <img class=\"loader-gif\" src=\"/assets/gif/loader_circle.gif\" alt />\n </div>\n <div class=\"structure-details-content\" *ngIf=\"!isLoading\">\n <div class=\"structure-buttons hide-on-print\" fxLayout=\"row\" fxLayoutAlign=\"space-evenly\">\n <div *ngIf=\"structure.website\" class=\"clickableDiv\" role=\"button\" (click)=\"goToWebsite()\" tabindex=\"0\">\n <app-svg-icon class=\"icon\" [type]=\"'ico'\" [icon]=\"'web'\" [iconClass]=\"'icon-32'\"></app-svg-icon>\n <div class=\"iconTitle\">Voir le site</div>\n </div>\n <div role=\"button\" class=\"printButton clickableDiv\" (click)=\"print()\" tabindex=\"0\">\n <app-svg-icon class=\"icon\" [type]=\"'ico'\" [icon]=\"'printStructure'\" [iconClass]=\"'icon-32'\"></app-svg-icon>\n <div class=\"iconTitle\">Imprimer</div>\n </div>\n <div class=\"clickableDiv\" role=\"button\" (click)=\"displayModalError()\" tabindex=\"0\">\n <app-svg-icon class=\"icon\" [type]=\"'ico'\" [icon]=\"'watch'\" [iconClass]=\"'icon-32'\"></app-svg-icon>\n <div class=\"iconTitle\">Signaler une erreur</div>\n </div>\n <ng-content select=\"[slot=structure-details-actions]\"></ng-content>\n </div>\n\n <ng-content select=\"[slot=structure-admin-actions]\"></ng-content>\n\n <div class=\"structure-details-block\">\n <div fxLayout=\"column\" fxLayoutGap=\"10px\">\n <!-- Informations-->\n <div fxLayout=\"column\">\n <h2>Informations</h2>\n <div class=\"info-block\">\n <div>\n {{ structure.getLabelTypeStructure() }}\n </div>\n <div *ngIf=\"structure.address\">\n {{ structure.address.numero }} {{ structure.address.street }},\n {{ structure.address.commune }}\n </div>\n <div *ngIf=\"structure.contactPhone\">\n {{ structure.contactPhone | phone }}\n </div>\n <div *ngIf=\"structure.contactMail && structure.contactMail !== 'unknown@unknown.com'\">\n <a href=\"mailto:{{ structure.contactMail }}\">{{ structure.contactMail }}</a>\n </div>\n </div>\n <!-- Social networks-->\n <div *ngIf=\"structure.hasSocialNetwork()\" fxLayout=\"row\" fxLayoutAlign=\"none baseline\" fxLayoutGap=\"4px\">\n <a\n *ngIf=\"structure.facebook\"\n target=\"_blank\"\n class=\"custom-link\"\n rel=\"noopener noreferrer\"\n [href]=\"'http://' + structure.facebook\">\n <app-svg-icon [type]=\"'ico'\" [icon]=\"'facebook'\" [title]=\"'Facebook'\" [iconClass]=\"'icon-30'\"></app-svg-icon>\n </a>\n <a\n *ngIf=\"structure.twitter\"\n target=\"_blank\"\n class=\"custom-link\"\n rel=\"noopener noreferrer\"\n [href]=\"'http://' + structure.twitter\">\n <app-svg-icon [type]=\"'ico'\" [icon]=\"'twitter'\" [title]=\"'Twitter'\" [iconClass]=\"'icon-30'\"></app-svg-icon>\n </a>\n <a\n *ngIf=\"structure.instagram\"\n target=\"_blank\"\n class=\"custom-link\"\n rel=\"noopener noreferrer\"\n [href]=\"'http://' + structure.instagram\">\n <app-svg-icon [type]=\"'ico'\" [icon]=\"'instagram'\" [title]=\"'Instagram'\" [iconClass]=\"'icon-30'\"></app-svg-icon>\n </a>\n <a\n *ngIf=\"structure.linkedin\"\n target=\"_blank\"\n class=\"custom-link\"\n rel=\"noopener noreferrer\"\n [href]=\"'http://' + structure.linkedin\">\n <app-svg-icon [type]=\"'ico'\" [icon]=\"'linkedin'\" [title]=\"'Linkedin'\" [iconClass]=\"'icon-30'\"></app-svg-icon>\n </a>\n </div>\n </div>\n </div>\n <div *ngIf=\"structure.description\" class=\"description\">\n {{ structure.description }}\n </div>\n <div *ngIf=\"structure.lockdownActivity && lockdownInfoDisplay\" class=\"info\">\n {{ structure.lockdownActivity }}\n </div>\n </div>\n\n <div\n *ngIf=\"structure.accessModality.length > 0 || structure.hours.hasData() || structure.remoteAccompaniment\"\n class=\"structure-details-block\"\n fxLayout=\"column\">\n <div class=\"hours-services-block\">\n <!-- Opening Hours -->\n <div *ngIf=\"structure.hours.hasData()\" fxLayout=\"column\">\n <h2>Horaires</h2>\n <div fxLayout=\"column\" class=\"opening-hours\">\n <div *ngFor=\"let day of structure.hours | keyvalue: keepOriginalOrder\">\n <div *ngIf=\"day.value.open\" class=\"opening-hour\" fxLayout=\"row\" fxLayoutAlign=\"flex-start flex-start\">\n <h4 class=\"day\">{{ day.key | day }}</h4>\n <div class=\"opening-time\" fxLayout=\"column\" fxLayoutAlign=\"none flex-start\">\n <div *ngFor=\"let timeRange of day.value.time\" class=\"daily-opening-time\">\n <p *ngIf=\"timeRange.opening\">\n {{ timeRange.formatOpeningDate() }} -\n {{ timeRange.formatClosingDate() }}\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- services -->\n <div *ngIf=\"structure.accessModality.length > 0\" fxLayout=\"column\">\n <h2>Services</h2>\n <div fxLayout=\"column\" fxLayoutGap=\"10px\" class=\"services-block\">\n <div fxLayout=\"column\" fxLayoutGap=\"8px\">\n <div\n fxLayout=\"row\"\n fxLayoutAlign=\"none flex-end\"\n fxLayoutGap=\"8px\"\n *ngFor=\"let acces of structure.accessModality\">\n <p>{{ getAccessLabel(acces) }}</p>\n </div>\n <p *ngIf=\"structure.pmrAccess\">Accessible aux personnes \u00E0 mobilit\u00E9 r\u00E9duite</p>\n </div>\n <div *ngFor=\"let public of structure.publics\" fxLayout=\"row\" fxLayoutAlign=\"none flex-end\" fxLayoutGap=\"8px\">\n <p>{{ getPublicLabel(public) }}</p>\n </div>\n <div\n *ngFor=\"let accompaniment of structure.publicsAccompaniment\"\n fxLayout=\"row\"\n fxLayoutAlign=\"none flex-end\"\n fxLayoutGap=\"8px\">\n <p>{{ accompaniment }}</p>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"structure.exceptionalClosures\" class=\"bold-info\">\n <p class=\"description\">{{ structure.exceptionalClosures }}</p>\n </div>\n <div *ngIf=\"structure.remoteAccompaniment\" class=\"bold-info\">\n <h3>Cette structure propose un accompagnement \u00E0 distance.</h3>\n </div>\n </div>\n\n <div\n *ngIf=\"structure.labelsQualifications.length\"\n fxLayout=\"column\"\n class=\"structure-details-block\"\n fxLayoutAlign=\"baseline baseline\"\n fxLayoutGap=\"8px\">\n <h2>Labellisations</h2>\n <div class=\"wrapper\">\n <div *ngFor=\"let labels of structure.labelsQualifications\">\n <app-logo-card [name]=\"labels\"></app-logo-card>\n </div>\n </div>\n </div>\n\n <ng-content select=\"[slot=structure-members]\"></ng-content>\n\n <div\n *ngIf=\"structure.proceduresAccompaniment.length || structure.otherDescription\"\n fxLayout=\"column\"\n class=\"structure-details-block\"\n fxLayoutAlign=\"baseline baseline\"\n fxLayoutGap=\"12px\">\n <h2>Aides num\u00E9rique</h2>\n <div fxLayout=\"column\">\n <div class=\"wrapper\">\n <div *ngFor=\"let accompagnement of structure.proceduresAccompaniment.sort()\">\n <app-logo-card *ngIf=\"accompagnement !== 'autres'\" [name]=\"accompagnement\"></app-logo-card>\n </div>\n </div>\n <p *ngIf=\"structure.otherDescription\" fxLayout=\"column\">\n {{ structure.otherDescription }}\n </p>\n </div>\n </div>\n\n <div\n *ngIf=\"isBaseSkills() || isAccessRights() || isParentingHelp() || isSocialAndProfessional() || isDigitalSecurity()\"\n fxLayout=\"column\"\n class=\"structure-details-block noSeparator\"\n fxLayoutAlign=\"baseline baseline\">\n <h2>Formations</h2>\n <div *ngIf=\"structure.freeWorkShop\">\n <span *ngIf=\"multipleWorkshop()\" class=\"bold-info\">L'acc\u00E8s \u00E0 ces formations est gratuit</span>\n <span *ngIf=\"!multipleWorkshop()\" class=\"bold-info\">L'acc\u00E8s \u00E0 cette formation est gratuit</span>\n </div>\n <div class=\"formationDetails\">\n <div *ngIf=\"isBaseSkills()\" class=\"collapse\" [ngClass]=\"{ notCollapsed: !showBaseSkills }\">\n <div fxLayout=\"column\">\n <div\n class=\"collapseHeader\"\n fxLayout=\"row\"\n fxLayoutGap=\"20px\"\n fxLayoutAlign=\" center\"\n (click)=\"toggleBaseSkills()\">\n <div class=\"titleCollapse\">Comp\u00E9tences de base</div>\n <div class=\"logo\">\n <svg class=\"show\" aria-hidden=\"true\">\n <use [attr.xlink:href]=\"'assets/form/sprite.svg#unfold'\"></use>\n </svg>\n <svg class=\"hide\" aria-hidden=\"true\">\n <use [attr.xlink:href]=\"'assets/form/sprite.svg#fold'\"></use>\n </svg>\n </div>\n </div>\n <div class=\"detailsContainer\" [@show]=\"showBaseSkills\">\n <div class=\"details\" *ngFor=\"let skill of baseSkills\">\n {{ skill.text }}\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"isAccessRights()\" class=\"collapse\" [ngClass]=\"{ notCollapsed: !showAccessRights }\">\n <div fxLayout=\"column\">\n <div\n class=\"collapseHeader\"\n fxLayout=\"row\"\n fxLayoutGap=\"20px\"\n fxLayoutAlign=\" center\"\n (click)=\"toggleAccessRights()\">\n <div class=\"titleCollapse\">Acc\u00E8s aux droits</div>\n <div class=\"logo\">\n <svg class=\"show\" aria-hidden=\"true\">\n <use [attr.xlink:href]=\"'assets/form/sprite.svg#unfold'\"></use>\n </svg>\n <svg class=\"hide\" aria-hidden=\"true\">\n <use [attr.xlink:href]=\"'assets/form/sprite.svg#fold'\"></use>\n </svg>\n </div>\n </div>\n <div class=\"detailsContainer\" [@show]=\"showAccessRights\">\n <div class=\"details\" *ngFor=\"let rights of accessRights\">\n {{ rights.text }}\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"isParentingHelp()\" class=\"collapse\" [ngClass]=\"{ notCollapsed: !showParentingHelp }\">\n <div fxLayout=\"column\">\n <div\n class=\"collapseHeader\"\n fxLayout=\"row\"\n fxLayoutGap=\"20px\"\n fxLayoutAlign=\" center\"\n (click)=\"toggleParentingHelp()\">\n <div class=\"titleCollapse\">Aide \u00E0 la parentalit\u00E9</div>\n <div class=\"logo\">\n <svg class=\"show\" aria-hidden=\"true\">\n <use [attr.xlink:href]=\"'assets/form/sprite.svg#unfold'\"></use>\n </svg>\n <svg class=\"hide\" aria-hidden=\"true\">\n <use [attr.xlink:href]=\"'assets/form/sprite.svg#fold'\"></use>\n </svg>\n </div>\n </div>\n <div class=\"detailsContainer\" [@show]=\"showParentingHelp\">\n <div class=\"details\" *ngFor=\"let help of parentingHelp\">\n {{ help.text }}\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"isSocialAndProfessional()\" class=\"collapse\" [ngClass]=\"{ notCollapsed: !showSocialAndProfessional }\">\n <div fxLayout=\"column\">\n <div\n class=\"collapseHeader\"\n fxLayout=\"row\"\n fxLayoutGap=\"20px\"\n fxLayoutAlign=\" center\"\n (click)=\"toggleSocialAndProfessional()\">\n <div class=\"titleCollapse\">Insertion sociale et professionnelle</div>\n <div class=\"logo\">\n <svg class=\"show\" aria-hidden=\"true\">\n <use [attr.xlink:href]=\"'assets/form/sprite.svg#unfold'\"></use>\n </svg>\n <svg class=\"hide\" aria-hidden=\"true\">\n <use [attr.xlink:href]=\"'assets/form/sprite.svg#fold'\"></use>\n </svg>\n </div>\n </div>\n <div class=\"detailsContainer\" [@show]=\"showSocialAndProfessional\">\n <div class=\"details\" *ngFor=\"let skill of socialAndProfessional\">\n {{ skill.text }}\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"isDigitalSecurity()\" class=\"collapse\" [ngClass]=\"{ notCollapsed: !showDigitalSecurity }\">\n <div fxLayout=\"column\">\n <div\n class=\"collapseHeader\"\n fxLayout=\"row\"\n fxLayoutGap=\"20px\"\n fxLayoutAlign=\" center\"\n (click)=\"toggleDigitalSecurity()\">\n <div class=\"titleCollapse\">Culture et s\u00E9curit\u00E9 num\u00E9rique</div>\n <div class=\"logo\">\n <svg class=\"show\" aria-hidden=\"true\">\n <use [attr.xlink:href]=\"'assets/form/sprite.svg#unfold'\"></use>\n </svg>\n <svg class=\"hide\" aria-hidden=\"true\">\n <use [attr.xlink:href]=\"'assets/form/sprite.svg#fold'\"></use>\n </svg>\n </div>\n </div>\n <div class=\"detailsContainer\" [@show]=\"showDigitalSecurity\">\n <div class=\"details\" *ngFor=\"let skill of digitalCultureSecurity\">\n {{ skill.text }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"structure.hasEquipments()\"\n fxLayout=\"column\"\n class=\"structure-details-block\"\n fxLayoutAlign=\"baseline baseline\">\n <h2>Mat\u00E9riel et wifi</h2>\n <div fxLayout=\"column\">\n <div *ngIf=\"filterOnlyEquipments(structure.equipmentsAndServices).includes('wifiEnAccesLibre')\">\n {{ getEquipmentsLabel('wifiEnAccesLibre') }}\n </div>\n <p *ngFor=\"let equipement of filterOnlyEquipments(structure.equipmentsAndServices)\" class=\"no-margin-bottom\">\n <span *ngIf=\"equipement === 'ordinateurs' && structure.nbComputers\">\n {{ getEquipmentsLabel(equipement) }} : {{ structure.nbComputers }}\n </span>\n <span *ngIf=\"equipement === 'tablettes' && structure.nbTablets\">\n {{ getEquipmentsLabel(equipement) }} : {{ structure.nbTablets }}\n </span>\n <span *ngIf=\"equipement === 'bornesNumeriques' && structure.nbNumericTerminal\">\n {{ getEquipmentsLabel(equipement) }} :\n {{ structure.nbNumericTerminal }}\n </span>\n <span *ngIf=\"equipement === 'imprimantes' && structure.nbPrinters\">\n {{ getEquipmentsLabel(equipement) }} : {{ structure.nbPrinters }}\n </span>\n <span *ngIf=\"equipement === 'scanners' && structure.nbScanners\">\n {{ getEquipmentsLabel(equipement) }} : {{ structure.nbScanners }}\n </span>\n </p>\n </div>\n </div>\n <ng-content select=\"[slot=structure-details-access]\"></ng-content>\n <div fxLayout=\"column\" class=\"structure-details-block\" fxLayoutAlign=\"baseline baseline\" fxLayoutGap=\"20px\">\n <div fxLayout=\"row\" fxLayoutAlign=\"none flex-start\" fxLayoutGap=\"13px\">\n <p class=\"updated\">Mise \u00E0 jour le {{ structure.updatedAt | date: 'mediumDate' }}</p>\n </div>\n </div>\n </div>\n\n <ng-content select=\"[slot=structure-details-modals]\"></ng-content>\n <app-text-input-modal\n [openned]=\"structureErrorModalOpenned\"\n [placeholder]=\"'D\u00E9crivez l\\'erreur ici. Ex: Horaires faux...'\"\n [content]=\"\n 'Voulez-vous notifier res\\'in d\\'une erreur sur la fiche de cet acteur ? Votre commentaire sera envoy\u00E9 \u00E0 l\\'acteur en question ainsi qu\\'aux administrateurs.'\n \"\n (closed)=\"sendErrorEmail($event)\"\n (newContent)=\"sendErrorEmail($event)\"></app-text-input-modal>\n </div>\n</div>\n", styles: ["html,body,p,span,label,h1,h2,h3,h4,h5,h6,.card-header-text,.welcome-message,.user-name,.profile-user-name,.project-name,.annuaire-label,.event_title,.objective_title{font-family:Lato,Helvetica,sans-serif}a{padding:unset;text-decoration:underline;font-size:inherit;font-weight:inherit}p:empty{margin:0}h1{font-family:Lato,Helvetica,sans-serif;font-style:normal;font-weight:700;font-size:1.25em;color:#333}h2{font-family:Lato,Helvetica,sans-serif;font-style:normal;font-weight:700;font-size:.875em;color:#696969;text-transform:uppercase;margin-top:0;margin-bottom:12px}h3{font-family:Lato,Helvetica,sans-serif;font-style:normal;font-weight:400;font-size:1em;margin:0 0 8px}.structure-details-container{position:absolute;z-index:1001;height:calc(100vh - 56px);width:100%;background-color:#fff;overflow:hidden;border-bottom:1px solid #dedede;border-right:1px solid #dedede}.structure-details-title{height:65px;border-bottom:1px solid #dedede;padding:2px 16px 2px 24px}.structure-details-title .ico-close{margin-left:auto}.structure-details-content{height:calc(100% - 65px);padding:0 8px;overflow-y:auto;scrollbar-gutter:stable;font-family:Lato,Helvetica,sans-serif;font-style:normal;font-weight:400;font-size:.875em}.structure-buttons{width:100%;margin:0 0 16px;position:relative}.structure-buttons .clickableDiv{text-align:center;height:90px;width:115.2px;display:flex;flex-direction:column;cursor:pointer}.structure-buttons .clickableDiv .icon{margin-top:20px;flex:1;display:flex;justify-content:center;align-items:center}.structure-buttons .clickableDiv .iconTitle{font-family:Lato,Helvetica,sans-serif;font-style:normal;font-weight:400;font-size:.813em;height:36px;display:flex;justify-content:center;align-items:center}.structure-buttons .clickableDiv:hover{text-decoration:underline}@media only screen and (max-width : 980px){.structure-buttons .printButton{display:none!important}}.structure-details-block{margin:0 20px;padding:24px 0;border-bottom:2px solid #f8f8f8}.structure-details-block.noSeparator{border-bottom:none;padding-bottom:0}.structure-details-block .info-block>div{margin-top:4px}.structure-details-block .info-block>div:first-of-type{margin-top:0}.structure-details-block .description{white-space:pre-wrap;margin-top:8px}.structure-details-block .info{color:#f35453;margin-top:8px}.structure-details-block .hours-services-block{display:flex;flex-direction:row}.structure-details-block .hours-services-block>div{flex:1}@media only screen and (max-width : 600px){.structure-details-block .hours-services-block{flex-direction:column}}.structure-details-block .hours-services-block .opening-hours,.structure-details-block .hours-services-block .opening-hours .opening-hour{margin-bottom:8px}.structure-details-block .hours-services-block .opening-hours .opening-hour .day{min-width:70px;margin-top:0;margin-left:0;margin-bottom:0;font-family:Lato,Helvetica,sans-serif;font-style:normal;font-weight:400;font-size:.875em;color:#696969;text-transform:capitalize}.structure-details-block .hours-services-block .opening-hours .opening-hour .daily-opening-time p{margin:0 0 4px}.structure-details-block .services-block{margin-bottom:8px}.structure-details-block .services-block p{display:list-item;margin:0 0 0 25px}.structure-details-block .wrapper{display:grid;grid-template-columns:1fr 1fr}@media only screen and (max-width : 600px){.structure-details-block .wrapper{grid-template-columns:1fr}}.structure-details-block .formationDetails{width:100%}.structure-details-block .formationDetails .collapse{margin-bottom:13px}@media only screen and (max-width : 320px){.structure-details-block .formationDetails .collapse{width:95%!important}}.structure-details-block .formationDetails .collapse.notCollapsed{border-bottom:2px solid #f8f8f8}.structure-details-block .formationDetails .collapse.notCollapsed .logo .hide{display:none}.structure-details-block .formationDetails .collapse.notCollapsed .logo .show{display:block}.structure-details-block .formationDetails .collapse .titleCollapse{width:100%;font-family:Lato,Helvetica,sans-serif;font-style:normal;font-weight:400;font-size:1em}.structure-details-block .formationDetails .collapse .collapseHeader{cursor:pointer}.structure-details-block .formationDetails .collapse .logo{height:24px;width:24px}.structure-details-block .formationDetails .collapse .logo svg{width:100%;height:100%;fill:#333}.structure-details-block .formationDetails .collapse .logo .hide,.structure-details-block .formationDetails .collapse .titleCollapse .hide{display:block}.structure-details-block .formationDetails .collapse .logo .show,.structure-details-block .formationDetails .collapse .titleCollapse .show{display:none}.structure-details-block .formationDetails .collapse .detailsContainer{margin:8px 0;padding:8px 0;background-color:#f8f8f8;overflow:hidden}.structure-details-block .formationDetails .collapse .details{padding:8px 16px}.structure-details-block .updated{font-family:Lato,Helvetica,sans-serif;font-style:normal;font-weight:400;font-size:.875em;color:#696969;font-style:italic}p,.custom-link{font-family:Lato,Helvetica,sans-serif;font-style:normal;font-weight:400;font-size:1em;margin-top:9px;margin-bottom:9px}p.no-margin,.custom-link.no-margin{margin-top:unset;margin-bottom:unset}p.no-margin-bottom,.custom-link.no-margin-bottom{margin-bottom:unset}.custom-link ::ng-deep svg{border:1px solid white;border-radius:20px}.custom-link ::ng-deep svg:hover{border-color:#bdbdbd}.bold-info{font-family:Lato,Helvetica,sans-serif;font-style:normal;font-weight:700;font-size:1em}@media print{.structure-details{height:unset!important;overflow:hidden;z-index:unset;width:unset;position:unset!important}.structure-details-container,.structure-details-content{background-color:unset;z-index:unset;position:unset;top:unset;left:unset;max-width:unset;width:unset;height:unset;padding:unset;overflow:hidden;border-right:0}.hide-on-print{display:none!important}}@keyframes fadeBackground{0%{background-color:#3330}to{background-color:#33333340}}.fullScreen{width:calc(100% + 600px)!important;background-color:#33333340;animation:fadeBackground .5s;max-width:unset!important}@media only screen and (max-width : 980px){.fullScreen{width:100%!important}}.structure-details{position:fixed;z-index:1001;height:calc(100vh - 55px);width:100%;max-width:600px}.structure-details .structure-details-container{max-width:600px;opacity:1!important}@media only screen and (max-width : 980px){.structure-details .structure-details-container{max-width:unset}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i4.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i5.SvgIconComponent, selector: "app-svg-icon", inputs: ["icon", "iconClass", "type", "iconColor", "title"] }, { kind: "component", type: i5.TextInputModalComponent, selector: "app-text-input-modal", inputs: ["openned", "content", "placeholder"], outputs: ["closed", "newContent"] }, { kind: "component", type: i6.LogoCardComponent, selector: "app-logo-card", inputs: ["logoPath", "name"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i5.DayPipe, name: "day" }, { kind: "pipe", type: i5.PhonePipe, name: "phone" }], animations: [
trigger('slideInOut', [
transition(':enter', [style({ left: '-600px' }), animate('200ms ease-in', style({ left: '0' }))]),
transition(':leave', [animate('200ms ease-in', style({ left: '-600px' }))])
]),
trigger('fadeInOut', [
transition(':enter', [
style({ backgroundColor: 'rgb(00, 00, 00, 0)' }),
animate('200ms ease-in', style({ backgroundColor: 'rgb(00, 00, 00, 0.6)' }))
]),
transition(':leave', [animate('200ms ease-in', style({ backgroundColor: 'rgb(00, 00, 00, 0)' }))])
]),
trigger('show', [
state('true', style({ height: AUTO_STYLE, visibility: AUTO_STYLE, margin: '8px 0' })),
state('false', style({ height: '0px', visibility: 'hidden', margin: '0' })),
transition('true => false', animate('300ms ease-out')),
transition('false => true', animate('300ms ease-out'))
])
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: StructureDetailsComponent, decorators: [{
type: Component,
args: [{ selector: 'app-structure-details', animations: [
trigger('slideInOut', [
transition(':enter', [style({ left: '-600px' }), animate('200ms ease-in', style({ left: '0' }))]),
transition(':leave', [animate('200ms ease-in', style({ left: '-600px' }))])
]),
trigger('fadeInOut', [
transition(':enter', [
style({ backgroundColor: 'rgb(00, 00, 00, 0)' }),
animate('200ms ease-in', style({ backgroundColor: 'rgb(00, 00, 00, 0.6)' }))
]),
transition(':leave', [animate('200ms ease-in', style({ backgroundColor: 'rgb(00, 00, 00, 0)' }))])
]),
trigger('show', [
state('true', style({ height: AUTO_STYLE, visibility: AUTO_STYLE, margin: '8px 0' })),
state('false', style({ height: '0px', visibility: 'hidden', margin: '0' })),
transition('true => false', animate('300ms ease-out')),
transition('false => true', animate('300ms ease-out'))
])
], providers: [PrintService], template: "<div class=\"structure-details\" [ngClass]=\"{ fullScreen: fullScreen === true }\" [@slideInOut] *ngIf=\"structure\">\n <div class=\"structure-details-container\">\n <!-- Header info -->\n <div class=\"structure-details-title\" fxLayout=\"row\" fxLayoutGap=\"8px\" fxLayoutAlign=\"space-evenly center\">\n <app-svg-icon [type]=\"'ico'\" [icon]=\"'structureAvatar'\" [iconClass]=\"'icon-52'\"></app-svg-icon>\n <h1 class=\"bold\">{{ structure.structureName }}</h1>\n <div class=\"ico-close\">\n <div (click)=\"close()\" class=\"ico-close-details\"></div>\n </div>\n </div>\n <div class=\"structure-details-content\" fxLayout=\"row\" fxLayoutAlign=\"center center\" *ngIf=\"isLoading\">\n <img class=\"loader-gif\" src=\"/assets/gif/loader_circle.gif\" alt />\n </div>\n <div class=\"structure-details-content\" *ngIf=\"!isLoading\">\n <div class=\"structure-buttons hide-on-print\" fxLayout=\"row\" fxLayoutAlign=\"space-evenly\">\n <div *ngIf=\"structure.website\" class=\"clickableDiv\" role=\"button\" (click)=\"goToWebsite()\" tabindex=\"0\">\n <app-svg-icon class=\"icon\" [type]=\"'ico'\" [icon]=\"'web'\" [iconClass]=\"'icon-32'\"></app-svg-icon>\n <div class=\"iconTitle\">Voir le site</div>\n </div>\n <div role=\"button\" class=\"printButton clickableDiv\" (click)=\"print()\" tabindex=\"0\">\n <app-svg-icon class=\"icon\" [type]=\"'ico'\" [icon]=\"'printStructure'\" [iconClass]=\"'icon-32'\"></app-svg-icon>\n <div class=\"iconTitle\">Imprimer</div>\n </div>\n <div class=\"clickableDiv\" role=\"button\" (click)=\"displayModalError()\" tabindex=\"0\">\n <app-svg-icon class=\"icon\" [type]=\"'ico'\" [icon]=\"'watch'\" [iconClass]=\"'icon-32'\"></app-svg-icon>\n <div class=\"iconTitle\">Signaler une erreur</div>\n </div>\n <ng-content select=\"[slot=structure-details-actions]\"></ng-content>\n </div>\n\n <ng-content select=\"[slot=structure-admin-actions]\"></ng-content>\n\n <div class=\"structure-details-block\">\n <div fxLayout=\"column\" fxLayoutGap=\"10px\">\n <!-- Informations-->\n <div fxLayout=\"column\">\n <h2>Informations</h2>\n <div class=\"info-block\">\n <div>\n {{ structure.getLabelTypeStructure() }}\n </div>\n <div *ngIf=\"structure.address\">\n {{ structure.address.numero }} {{ structure.address.street }},\n {{ structure.address.commune }}\n </div>\n <div *ngIf=\"structure.contactPhone\">\n {{ structure.contactPhone | phone }}\n </div>\n <div *ngIf=\"structure.contactMail && structure.contactMail !== 'unknown@unknown.com'\">\n <a href=\"mailto:{{ structure.contactMail }}\">{{ structure.contactMail }}</a>\n </div>\n </div>\n <!-- Social networks-->\n <div *ngIf=\"structure.hasSocialNetwork()\" fxLayout=\"row\" fxLayoutAlign=\"none baseline\" fxLayoutGap=\"4px\">\n <a\n *ngIf=\"structure.facebook\"\n target=\"_blank\"\n class=\"custom-link\"\n rel=\"noopener noreferrer\"\n [href]=\"'http://' + structure.facebook\">\n <app-svg-icon [type]=\"'ico'\" [icon]=\"'facebook'\" [title]=\"'Facebook'\" [iconClass]=\"'icon-30'\"></app-svg-icon>\n </a>\n <a\n *ngIf=\"structure.twitter\"\n target=\"_blank\"\n class=\"custom-link\"\n rel=\"noopener noreferrer\"\n [href]=\"'http://' + structure.twitter\">\n <app-svg-icon [type]=\"'ico'\" [icon]=\"'twitter'\" [title]=\"'Twitter'\" [iconClass]=\"'icon-30'\"></app-svg-icon>\n </a>\n <a\n *ngIf=\"structure.instagram\"\n target=\"_blank\"\n class=\"custom-link\"\n rel=\"noopener noreferrer\"\n [href]=\"'http://' + structure.instagram\">\n <app-svg-icon [type]=\"'ico'\" [icon]=\"'instagram'\" [title]=\"'Instagram'\" [iconClass]=\"'icon-30'\"></app-svg-icon>\n </a>\n <a\n *ngIf=\"structure.linkedin\"\n target=\"_blank\"\n class=\"custom-link\"\n rel=\"noopener noreferrer\"\n [href]=\"'http://' + structure.linkedin\">\n <app-svg-icon [type]=\"'ico'\" [icon]=\"'linkedin'\" [title]=\"'Linkedin'\" [iconClass]=\"'icon-30'\"></app-svg-icon>\n </a>\n </div>\n </div>\n </div>\n <div *ngIf=\"structure.description\" class=\"description\">\n {{ structure.description }}\n </div>\n <div *ngIf=\"structure.lockdownActivity && lockdownInfoDisplay\" class=\"info\">\n {{ structure.lockdownActivity }}\n </div>\n </div>\n\n <div\n *ngIf=\"structure.accessModality.length > 0 || structure.hours.hasData() || structure.remoteAccompaniment\"\n class=\"structure-details-block\"\n fxLayout=\"column\">\n <div class=\"hours-services-block\">\n <!-- Opening Hours -->\n <div *ngIf=\"structure.hours.hasData()\" fxLayout=\"column\">\n <h2>Horaires</h2>\n <div fxLayout=\"column\" class=\"opening-hours\">\n <div *ngFor=\"let day of structure.hours | keyvalue: keepOriginalOrder\">\n <div *ngIf=\"day.value.open\" class=\"opening-hour\" fxLayout=\"row\" fxLayoutAlign=\"flex-start flex-start\">\n <h4 class=\"day\">{{ day.key | day }}</h4>\n <div class=\"opening-time\" fxLayout=\"column\" fxLayoutAlign=\"none flex-start\">\n <div *ngFor=\"let timeRange of day.value.time\" class=\"daily-opening-time\">\n <p *ngIf=\"timeRange.opening\">\n {{ timeRange.formatOpeningDate() }} -\n {{ timeRange.formatClosingDate() }}\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- services -->\n <div *ngIf=\"structure.accessModality.length > 0\" fxLayout=\"column\">\n <h2>Services</h2>\n <div fxLayout=\"column\" fxLayoutGap=\"10px\" class=\"services-block\">\n <div fxLayout=\"column\" fxLayoutGap=\"8px\">\n <div\n fxLayout=\"row\"\n fxLayoutAlign=\"none flex-end\"\n fxLayoutGap=\"8px\"\n *ngFor=\"let acces of structure.accessModality\">\n <p>{{ getAccessLabel(acces) }}</p>\n </div>\n <p *ngIf=\"structure.pmrAccess\">Accessible aux personnes \u00E0 mobilit\u00E9 r\u00E9duite</p>\n </div>\n <div *ngFor=\"let public of structure.publics\" fxLayout=\"row\" fxLayoutAlign=\"none flex-end\" fxLayoutGap=\"8px\">\n <p>{{ getPublicLabel(public) }}</p>\n </div>\n <div\n *ngFor=\"let accompaniment of structure.publicsAccompaniment\"\n fxLayout=\"row\"\n fxLayoutAlign=\"none flex-end\"\n fxLayoutGap=\"8px\">\n <p>{{ accompaniment }}</p>\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"structure.exceptionalClosures\" class=\"bold-info\">\n <p class=\"description\">{{ structure.exceptionalClosures }}</p>\n </div>\n <div *ngIf=\"structure.remoteAccompaniment\" class=\"bold-info\">\n <h3>Cette structure propose un accompagnement \u00E0 distance.</h3>\n </div>\n </div>\n\n <div\n *ngIf=\"structure.labelsQualifications.length\"\n fxLayout=\"column\"\n class=\"structure-details-block\"\n fxLayoutAlign=\"baseline baseline\"\n fxLayoutGap=\"8px\">\n <h2>Labellisations</h2>\n <div class=\"wrapper\">\n <div *ngFor=\"let labels of structure.labelsQualifications\">\n <app-logo-card [name]=\"labels\"></app-logo-card>\n </div>\n </div>\n </div>\n\n <ng-content select=\"[slot=structure-members]\"></ng-content>\n\n <div\n *ngIf=\"structure.proceduresAccompaniment.length || structure.otherDescription\"\n fxLayout=\"column\"\n class=\"structure-details-block\"\n fxLayoutAlign=\"baseline baseline\"\n fxLayoutGap=\"12px\">\n <h2>Aides num\u00E9rique</h2>\n <div fxLayout=\"column\">\n <div class=\"wrapper\">\n <div *ngFor=\"let accompagnement of structure.proceduresAccompaniment.sort()\">\n <app-logo-card *ngIf=\"accompagnement !== 'autres'\" [name]=\"accompagnement\"></app-logo-card>\n </div>\n </div>\n <p *ngIf=\"structure.otherDescription\" fxLayout=\"column\">\n {{ structure.otherDescription }}\n </p>\n </div>\n </div>\n\n <div\n *ngIf=\"isBaseSkills() || isAccessRights() || isParentingHelp() || isSocialAndProfessional() || isDigitalSecurity()\"\n fxLayout=\"column\"\n class=\"structure-details-block noSeparator\"\n fxLayoutA