4. Dialog maximisable: #{item.produit} #{item.quantite} #{item.prix} FCFA 5. Dialog avec position personnalisée: Attributs disponibles: - header: Titre du dialog - widgetVar: Variable JS pour contrôle programmatique (REQUIS) - modal: true/false - Dialog modal avec backdrop (défaut: false) - visible: true/false - Visible au chargement (défaut: false) - width: Largeur (px, %, auto) - défaut: auto - height: Hauteur (px, %, auto) - défaut: auto - minWidth: Largeur minimale en px (défaut: 150) - minHeight: Hauteur minimale en px (défaut: 150) - draggable: true/false - Déplaçable par le header (défaut: false) - resizable: true/false - Redimensionnable (défaut: false) - maximizable: true/false - Bouton maximiser (défaut: false) - minimizable: true/false - Bouton minimiser (défaut: false) - closable: true/false - Bouton fermer (défaut: true) - closeOnEscape: true/false - Fermer avec Échap (défaut: false) - position: Position - "center", "top", "bottom", "left", "right" (défaut: center) - showEffect: Effet d'apparition - "fade", "slide", "explode", etc. - hideEffect: Effet de disparition - "fade", "slide", "explode", etc. - appendTo: Sélecteur de l'élément parent (défaut: @(body)) - responsive: true/false - Responsive sur mobile (défaut: true) - styleClass: Classes CSS additionnelles - style: Styles CSS inline Facets disponibles: - header: Header personnalisé (remplace l'attribut header) - footer: Footer avec boutons d'action Contrôle JavaScript (widgetVar): ```javascript // Afficher le dialog PF('dlg').show(); // Masquer le dialog PF('dlg').hide(); // Basculer l'affichage PF('dlg').toggle(); // Maximiser PF('dlg').maximize(); // Minimiser PF('dlg').minimize(); // Restaurer PF('dlg').restore(); ``` Events AJAX disponibles: - open: Déclenché à l'ouverture - close: Déclenché à la fermeture - maximize: Déclenché à la maximisation - minimize: Déclenché à la minimisation - move: Déclenché au déplacement - resize: Déclenché au redimensionnement Exemple avec AJAX: Positions disponibles: - center: Centre de l'écran (défaut) - top: En haut centré - bottom: En bas centré - left: À gauche centré - right: À droite centré - top-left, top-right, bottom-left, bottom-right: Coins Notes: - widgetVar est REQUIS pour contrôler le dialog via JS - Modal true bloque l'interaction avec la page (backdrop) - Backdrop avec blur 3px pour effet moderne - Animation fade-in/fade-out fluide - Header avec gradient bleu Lions.dev - Footer avec gradient gris - Responsive: max 95vw/95vh sur mobile - Support drag & drop du header si draggable="true" - Redimensionnable par coin inférieur droit si resizable="true" - Échap pour fermer si closeOnEscape="true" - Support ARIA pour accessibilité - Focus trap automatique en mode modal -->