@slafon51/subject-search-button NPM

Esup Subject-Search-Button

Subject-Search-Button est un webcomponent s'appuyant sur la librairie Lit pour rechercher et sélectionner une personne/d'un groupe.

Ce webcomponent utilise les webcomponents suivants :

@gip-recia/js-tree

Installation

Installation via npm :

npm install @gip-recia/subject-search-button

Importation du composant :

Dans un module JavaScript :

import '@gip-recia/subject-search-button';

Dans une page HTML :

<script type="module">
  import './path/to/subject-search-button.js'
</script>

Ou directement la verion minifiée :

<script src="./path/to/subject-search-button.bundle.min.js"></script>

Ajout du composant sur une page HTML :

const subjectSearchButton = document.createElement('esup-subject-search-button');
subjectSearchButton.searchId = '...';
subjectSearchButton.config = {...};
document.body.appendChild(subjectSearchButton);

Paramètres

Le webcomponent Subject-Search-Button accepte les paramètres suivants :

searchType - Type de données recherchées. Valeur possible : 'PERSON', 'GROUP'. Si non reseignée, recherche de tous les types de données.
withExtended - Indique si l'on souhaite affichée la recherche étendue.
searchId - Identifiant unique du composant.
multiSelection - Active ou non la multisélection.
config - Objet contenant la configuration du composant.

Propriétés disponibles :

Nom	Type	Obligatoire	Description
lang	String	Non	Langue du composant. Valeur initialement disponible : 'fr', 'en'. Possibilité de rajouter des langues via la propriété labels.
labels	Object	Non	Permet de surcharger les labels affichés ou de définir de nouvelles langues.
treeGroupDatas	Array	Oui	Tableau des donnés affichées dans l'arborescence des groupes (cf. propriété datas du composant @gip-recia/js-tree, les noeuds de l'arbre doivent contenir en plus les propriétés `a_attr.model.modelId.keyId` et `a_attr.model.modelId.KeyType` représentant l'identifiant et le type du noeud).
userDisplayedAttrs	Array	Oui	Tableau des propriétés de la personne/du groupe à afficher.
extendedAttrs	Array	Non	Tableau des attributs disponibles pour la recherhce étendue (obligatoire si withExtended est à true).
searchUsers	Function	Oui	Fonction retournant une promise permettant de rechercher des personnes à partir d'un texte.
getGroupMembers	Function	Oui	Fonction retournant une promise permettant de rechercher les personnes appartenant à un groupe.

onSelection - Fonction appelée lors de la sélection de personnes/groupes.

Variables CSS

Modification de style

Plusieurs variables CSS peuvent être définis pour personnaliser le webcomponent :

Nom	Description
--text-color-pagination	Permet de modifier la couleur du texte des éléments de pagination
--selected-text-color-pagination	Permet de modifier la couleur du texte de la page sélectionnée
--selected-background-color-pagination	Permet de modifier la couleur de fond de la page sélectionnée
--validate-button-text-color	Permet de modifier la couleur du texte du bouton de validation
--validate-button-background-color	Permet de modifier la couleur de fond du bouton de validation
--validate-button-border-color	Permet de modifier la couleur de bordure du bouton de validation

Par défaut le webcomponent Subject-Search-Button s'appuie sur les fonts Font-Awesome pour afficher des icônes (via des pseudo-elements). Il est cependant possible de personnaliser les icônes affichées via les propriétés suivantes :

Nom	Description
--icon-plus-font-family	Permet de configurer la famille de police de caractères de l'icône des boutons principaux
--icon-plus-font-weight	Permet de configurer poids de la police de caractères de l'icône des boutons principaux
--icon-plus-content	Caractère unicode dans la famille de police de caractères utilisée pour l'icône des boutons principaux
--icon-cancel-font-family	Permet de configurer la famille de police de caractères de l'icône du bouton d'annulation
--icon-cancel-font-weight	Permet de configurer poids de la police de caractères de l'icône du bouton d'annulation
--icon-cancel-content	Caractère unicode dans la famille de police de caractères utilisée pour l'icône du bouton d'annulation
--icon-validate-font-family	Permet de configurer la famille de police de caractères de l'icône du bouton de validation
--icon-validate-font-weight	Permet de configurer poids de la police de caractères de l'icône du bouton de validation
--icon-validate-content	Caractère unicode dans la famille de police de caractères utilisée pour l'icône du bouton de validation
--icon-question-font-family	Permet de configurer la famille de police de caractères de l'icône d'information de la recherche utilisateur
--icon-question-font-weight	Permet de configurer poids de la police de caractères de l'icône d'information de la recherche utilisateur
--icon-question-content	Caractère unicode dans la famille de police de caractères utilisée pour l'icône d'information de la recherche utilisateur
--icon-search-font-family	Permet de configurer la famille de police de caractères de l'icône du bouton de recherche
--icon-search-font-weight	Permet de configurer poids de la police de caractères de l'icône du bouton de recherche
--icon-search-content	Caractère unicode dans la famille de police de caractères utilisée pour l'icône du bouton de recherche

Les variables CSS définies dans le webcomponent @gip-recia/js-tree peuvent être utilisées pour également personnaliser le webcomponent.

Utilisation

Exemple de configuration des variables css dans un fichier de style :

esup-subject-search-button {
  --icon-plus-font-family: 'Font Awesome 5 Free';
  --icon-plus-font-weight: 900;
  --icon-plus-font-content: '\\f128';
}