@dflat-core/web 1.0.16 → 1.0.17

package/README.md

@@ -1,157 +1,157 @@
-# @dflat-core/web
-
-Librairies Angular de Dflat, empaquetées en un module npm unique (Angular Package Format, construit avec ng-packagr).
-
-## Points d'entrée
-
-| Import                     | Contenu                                                      |
-| -------------------------- | ------------------------------------------------------------ |
-| `@dflat-core/web/core`          | Utilitaires, `EnvironmentBase`                               |
-| `@dflat-core/web/core-model`    | Modèle de base (interfaces générées depuis Dflat.Kernel.Model) |
-| `@dflat-core/web/core-services` | Authentification, messages, menus, hub SignalR...            |
-| `@dflat-core/web/core-data`     | `DataService`, `EntityDataService`                           |
-| `@dflat-core/web/core-ux`       | Composants, directives et services d'interface               |
-| `@dflat-core/web/system-model`  | Modèle du module System (généré)                             |
-| `@dflat-core/web/system-data`   | Services de données du module System (générés)               |
-| `@dflat-core/web/system-root`   | Permissions, clés d'entités et menus du module System        |
-| `@dflat-core/web/system-ux`     | Écrans du module System, et la coquille applicative          |
-
-Ressources non TypeScript livrées dans le package :
-
-- `assets/` : styles partagés (`site.scss`, `variables.scss`, `text.scss`...), images et polices ;
-- `scss/` : styles globaux (`dflat-app.scss`, `core-ux.scss`, `layout/default/default-layout.scss`...).
-
-## Coquille applicative
-
-`system-ux` fournit, en plus des écrans du module System, tout ce qui faisait auparavant
-l'ossature de l'application hôte (`system-ux/src/lib/app`) :
-
-| Symbole                                                   | Rôle                                                        |
-| --------------------------------------------------------- | ----------------------------------------------------------- |
-| `DflatAppModule`                                           | Socle du module racine : modules Angular et tiers, intercepteur HTTP, permissions, menus, langue |
-| `DFlatLayoutComponent`                                     | Mise en page : barre supérieure, menu latéral, contenu      |
-| `HomepageComponent`, `SearchComponent`, `SearchResultComponent` | Accueil et recherche globale                           |
-| `UserMenuComponent`, `UserProfileComponent`                | Menu et profil de l'utilisateur                             |
-| `AccessDeniedComponent`, `HistoryComponent`, `DFlatSpinnerComponent` | Écrans et composants utilitaires                  |
-| `DflatAppService`                                          | Nom, logo et version de l'application (`EnvironmentBase`)   |
-| `DFlatAuthInterceptor`, `DFlatPermissionService`           | Implémentations par défaut, dérivables                      |
-
-Le module racine d'une application se réduit alors à :
-
-```ts
-@NgModule({
-    declarations: [AppComponent],
-    imports: [DflatAppModule.forRoot(environment), routing],
-    bootstrap: [AppComponent]
-})
-export class AppModule {}
-```
-
-`environment` implémente `EnvironmentBase` : URL de l'API, du hub et des fichiers, et, en
-option, `appName`, `appLogoUrl` et `appVersion`, affichés par la mise en page et la page
-d'accueil. Pour remplacer un service du socle (menus, permissions, intercepteur), il suffit
-de le fournir après `DflatAppModule` dans les `providers` du module racine.
-
-La recherche globale n'interroge que les sources déclarées par l'application : une classe
-dérivée de `DflatSearchProvider` par famille d'objets, fournie en `multi` sous le jeton
-`DFLAT_SEARCH_PROVIDERS`.
-
-## Construire
-
-```bash
-yarn install
-yarn build           # <dépôt>/artifacts/nodejs/dflat-web (compilation partielle, publiable)
-yarn watch           # reconstruction continue pendant le développement
-yarn run pack        # <dépôt>/artifacts/nodejs/dflat-web-<version>.tgz
-```
-
-Depuis la racine du dépôt, `scripts/publish-dflat.ps1` enchaîne ces étapes :
-
-```powershell
-.\scripts\publish-dflat.ps1 -bw                  # yarn install si besoin, build, vidage du cache Angular de webapps
-.\scripts\publish-dflat.ps1 -pn                  # package versionné + archive .tgz (version calculée depuis npmjs.com)
-.\scripts\publish-dflat.ps1 -pn -Push            # ... puis publication sur npmjs.com, après confirmation
-```
-
-`yarn install` applique `tools/patch-ng-packagr.js` : correctif d'un bug de ng-packagr 19.2 sur la réécriture
-des `url()` des partials Sass (voir le commentaire du script).
-
-## Utiliser dans un espace de travail Angular / Nx
-
-1. Dépendance, dans `package.json` : la version publiée sur npmjs.com
-   (`"@dflat-core/web": "1.0.2"`), cas de toute application, dont celles créées par
-   `dflat -newhost`.
-
-   `webapps`, dans le dépôt, référence au contraire le dossier de sortie de ng-packagr, pour
-   développer le package et l'application en même temps :
-
-   ```json
-   "@dflat-core/web": "link:../web/dflat-web/dist"
-   ```
-
-   `yarn install` en fait un lien symbolique (`node_modules/@dflat-core/web` → `web/dflat-web/dist`) :
-   `dist` doit donc exister, produit une fois par `yarn build:dev` ou `yarn watch`. Pour
-   travailler, deux consoles :
-
-   ```bash
-   yarn watch:dflat-web         # depuis webapps : ng-packagr --watch sur web/dflat-web
-   yarn start                   # depuis webapps : nx serve
-   ```
-
-   Toute modification d'un fichier du package (TypeScript, template, style) est recompilée par
-   ng-packagr dans `dist`, et `nx serve` la reprend dans la foulée (quelques secondes), sans
-   vider le cache ni relancer le serveur.
-
-   L'application doit aussi installer les `peerDependencies` du package : les librairies
-   Angular tierces qu'il utilise (`ngx-bootstrap`, `@swimlane/ngx-datatable`, `ngx-toastr`,
-   `ng-http-loader`...) et les feuilles de style dont dépendent ses assets (`bootstrap`,
-   `bootswatch`, `font-awesome`). Le modèle `dflat-webhost` les liste déjà dans le
-   `package.json` du front qu'il génère.
-
-2. Dans les options de build de l'application (`project.json`) :
-
-   ```json
-   "preserveSymlinks": true,
-   "stylePreprocessorOptions": { "includePaths": ["node_modules", "node_modules/@dflat-core/web/assets"] },
-   "assets": [{ "input": "node_modules/@dflat-core/web/assets", "glob": "*/**", "output": "assets" }]
-   ```
-
-   `preserveSymlinks` évite de résoudre Angular depuis `web/dflat-web/node_modules` (double instance).
-   `node_modules` dans les `includePaths` permet à `dflat-app.scss` de résoudre Bootstrap et son thème.
-
-3. Styles globaux (`styles.scss`) :
-
-   ```scss
-   @import "../../../node_modules/@dflat-core/web/scss/dflat-app.scss";
-   ```
-
-   `dflat-app.scss` enchaîne les variables, Bootstrap, le thème Bootswatch, `core-ux.scss`,
-   `site.scss` et les règles de mise en page plein écran de la coquille. Pour un autre thème,
-   ne l'importez pas : reprenez son contenu dans l'application en changeant la ligne
-   `bootswatch`.
-
-   Les feuilles de style tierces qui ne passent pas par Sass (toastr, ngx-datatable,
-   bs-datepicker, font-awesome) restent dans le tableau `styles` des options de build.
-
-## Règles propres à une librairie
-
-La compilation partielle d'Angular est plus stricte que celle d'une application :
-
-- **pas d'import par le barrel de sa propre librairie** (`@dflat-core/web/core-ux` depuis core-ux) : utiliser un
-  chemin relatif. Entre librairies, toujours passer par `@dflat-core/web/<librairie>` ;
-- **toute classe déclarée par un NgModule doit être exportée** par le `src/index.ts` de sa librairie (NG3001) ;
-- **pas de cycle d'imports entre un composant et ce qu'utilise son template** (NG3003). Pour casser un cycle :
-  `import type` lorsque le symbole ne sert qu'au typage, ou un `InjectionToken` lorsqu'un type de composant
-  est nécessaire à l'exécution (voir `core-ux/src/lib/modals/dialog-component.tokens.ts`,
-  `RowRefHost` dans `row-ref.directive.ts`) ;
-- **pas de cycle d'imports entre une classe et sa classe parente**, même indirect : chaque point d'entrée est
-  aplati en un seul fichier et la classe fille pourrait y être émise avant la parente
-  (`Cannot access 'X' before initialization` au démarrage de l'application). `tools/check-bundles.js`, lancé par
-  `npm run build`, le détecte.
-
-## Code généré
-
-`codegenerator -ts -webpkg <dépôt>\web\dflat-web` écrit les librairies Dflat (core-model, system-model,
-system-data) dans ce dossier et génère les imports en `@dflat-core/web/<librairie>`. Sans `-webpkg` (application hôte
-hors dépôt), ces librairies ne sont pas générées : elles sont fournies par le package. `dbmanager` écrit les
-permissions TypeScript du module System dans `system-root/src/lib`.
+# @dflat-core/web
+
+Librairies Angular de Dflat, empaquetées en un module npm unique (Angular Package Format, construit avec ng-packagr).
+
+## Points d'entrée
+
+| Import                     | Contenu                                                      |
+| -------------------------- | ------------------------------------------------------------ |
+| `@dflat-core/web/core`          | Utilitaires, `EnvironmentBase`                               |
+| `@dflat-core/web/core-model`    | Modèle de base (interfaces générées depuis Dflat.Kernel.Model) |
+| `@dflat-core/web/core-services` | Authentification, messages, menus, hub SignalR...            |
+| `@dflat-core/web/core-data`     | `DataService`, `EntityDataService`                           |
+| `@dflat-core/web/core-ux`       | Composants, directives et services d'interface               |
+| `@dflat-core/web/system-model`  | Modèle du module System (généré)                             |
+| `@dflat-core/web/system-data`   | Services de données du module System (générés)               |
+| `@dflat-core/web/system-root`   | Permissions, clés d'entités et menus du module System        |
+| `@dflat-core/web/system-ux`     | Écrans du module System, et la coquille applicative          |
+
+Ressources non TypeScript livrées dans le package :
+
+- `assets/` : styles partagés (`site.scss`, `variables.scss`, `text.scss`...), images et polices ;
+- `scss/` : styles globaux (`dflat-app.scss`, `core-ux.scss`, `layout/default/default-layout.scss`...).
+
+## Coquille applicative
+
+`system-ux` fournit, en plus des écrans du module System, tout ce qui faisait auparavant
+l'ossature de l'application hôte (`system-ux/src/lib/app`) :
+
+| Symbole                                                   | Rôle                                                        |
+| --------------------------------------------------------- | ----------------------------------------------------------- |
+| `DflatAppModule`                                           | Socle du module racine : modules Angular et tiers, intercepteur HTTP, permissions, menus, langue |
+| `DFlatLayoutComponent`                                     | Mise en page : barre supérieure, menu latéral, contenu      |
+| `HomepageComponent`, `SearchComponent`, `SearchResultComponent` | Accueil et recherche globale                           |
+| `UserMenuComponent`, `UserProfileComponent`                | Menu et profil de l'utilisateur                             |
+| `AccessDeniedComponent`, `HistoryComponent`, `DFlatSpinnerComponent` | Écrans et composants utilitaires                  |
+| `DflatAppService`                                          | Nom, logo et version de l'application (`EnvironmentBase`)   |
+| `DFlatAuthInterceptor`, `DFlatPermissionService`           | Implémentations par défaut, dérivables                      |
+
+Le module racine d'une application se réduit alors à :
+
+```ts
+@NgModule({
+    declarations: [AppComponent],
+    imports: [DflatAppModule.forRoot(environment), routing],
+    bootstrap: [AppComponent]
+})
+export class AppModule {}
+```
+
+`environment` implémente `EnvironmentBase` : URL de l'API, du hub et des fichiers, et, en
+option, `appName`, `appLogoUrl` et `appVersion`, affichés par la mise en page et la page
+d'accueil. Pour remplacer un service du socle (menus, permissions, intercepteur), il suffit
+de le fournir après `DflatAppModule` dans les `providers` du module racine.
+
+La recherche globale n'interroge que les sources déclarées par l'application : une classe
+dérivée de `DflatSearchProvider` par famille d'objets, fournie en `multi` sous le jeton
+`DFLAT_SEARCH_PROVIDERS`.
+
+## Construire
+
+```bash
+yarn install
+yarn build           # <dépôt>/artifacts/nodejs/dflat-web (compilation partielle, publiable)
+yarn watch           # reconstruction continue pendant le développement
+yarn run pack        # <dépôt>/artifacts/nodejs/dflat-web-<version>.tgz
+```
+
+Depuis la racine du dépôt, `scripts/publish-dflat.ps1` enchaîne ces étapes :
+
+```powershell
+.\scripts\publish-dflat.ps1 -bw                  # yarn install si besoin, build, vidage du cache Angular de webapps
+.\scripts\publish-dflat.ps1 -pn                  # package versionné + archive .tgz (version calculée depuis npmjs.com)
+.\scripts\publish-dflat.ps1 -pn -Push            # ... puis publication sur npmjs.com, après confirmation
+```
+
+`yarn install` applique `tools/patch-ng-packagr.js` : correctif d'un bug de ng-packagr 19.2 sur la réécriture
+des `url()` des partials Sass (voir le commentaire du script).
+
+## Utiliser dans un espace de travail Angular / Nx
+
+1. Dépendance, dans `package.json` : la version publiée sur npmjs.com
+   (`"@dflat-core/web": "1.0.2"`), cas de toute application, dont celles créées par
+   `dflat -newhost`.
+
+   `webapps`, dans le dépôt, référence au contraire le dossier de sortie de ng-packagr, pour
+   développer le package et l'application en même temps :
+
+   ```json
+   "@dflat-core/web": "link:../web/dflat-web/dist"
+   ```
+
+   `yarn install` en fait un lien symbolique (`node_modules/@dflat-core/web` → `web/dflat-web/dist`) :
+   `dist` doit donc exister, produit une fois par `yarn build:dev` ou `yarn watch`. Pour
+   travailler, deux consoles :
+
+   ```bash
+   yarn watch:dflat-web         # depuis webapps : ng-packagr --watch sur web/dflat-web
+   yarn start                   # depuis webapps : nx serve
+   ```
+
+   Toute modification d'un fichier du package (TypeScript, template, style) est recompilée par
+   ng-packagr dans `dist`, et `nx serve` la reprend dans la foulée (quelques secondes), sans
+   vider le cache ni relancer le serveur.
+
+   L'application doit aussi installer les `peerDependencies` du package : les librairies
+   Angular tierces qu'il utilise (`ngx-bootstrap`, `@swimlane/ngx-datatable`, `ngx-toastr`,
+   `ng-http-loader`...) et les feuilles de style dont dépendent ses assets (`bootstrap`,
+   `bootswatch`, `font-awesome`). Le modèle `dflat-webhost` les liste déjà dans le
+   `package.json` du front qu'il génère.
+
+2. Dans les options de build de l'application (`project.json`) :
+
+   ```json
+   "preserveSymlinks": true,
+   "stylePreprocessorOptions": { "includePaths": ["node_modules", "node_modules/@dflat-core/web/assets"] },
+   "assets": [{ "input": "node_modules/@dflat-core/web/assets", "glob": "*/**", "output": "assets" }]
+   ```
+
+   `preserveSymlinks` évite de résoudre Angular depuis `web/dflat-web/node_modules` (double instance).
+   `node_modules` dans les `includePaths` permet à `dflat-app.scss` de résoudre Bootstrap et son thème.
+
+3. Styles globaux (`styles.scss`) :
+
+   ```scss
+   @import "../../../node_modules/@dflat-core/web/scss/dflat-app.scss";
+   ```
+
+   `dflat-app.scss` enchaîne les variables, Bootstrap, le thème Bootswatch, `core-ux.scss`,
+   `site.scss` et les règles de mise en page plein écran de la coquille. Pour un autre thème,
+   ne l'importez pas : reprenez son contenu dans l'application en changeant la ligne
+   `bootswatch`.
+
+   Les feuilles de style tierces qui ne passent pas par Sass (toastr, ngx-datatable,
+   bs-datepicker, font-awesome) restent dans le tableau `styles` des options de build.
+
+## Règles propres à une librairie
+
+La compilation partielle d'Angular est plus stricte que celle d'une application :
+
+- **pas d'import par le barrel de sa propre librairie** (`@dflat-core/web/core-ux` depuis core-ux) : utiliser un
+  chemin relatif. Entre librairies, toujours passer par `@dflat-core/web/<librairie>` ;
+- **toute classe déclarée par un NgModule doit être exportée** par le `src/index.ts` de sa librairie (NG3001) ;
+- **pas de cycle d'imports entre un composant et ce qu'utilise son template** (NG3003). Pour casser un cycle :
+  `import type` lorsque le symbole ne sert qu'au typage, ou un `InjectionToken` lorsqu'un type de composant
+  est nécessaire à l'exécution (voir `core-ux/src/lib/modals/dialog-component.tokens.ts`,
+  `RowRefHost` dans `row-ref.directive.ts`) ;
+- **pas de cycle d'imports entre une classe et sa classe parente**, même indirect : chaque point d'entrée est
+  aplati en un seul fichier et la classe fille pourrait y être émise avant la parente
+  (`Cannot access 'X' before initialization` au démarrage de l'application). `tools/check-bundles.js`, lancé par
+  `npm run build`, le détecte.
+
+## Code généré
+
+`codegenerator -ts -webpkg <dépôt>\web\dflat-web` écrit les librairies Dflat (core-model, system-model,
+system-data) dans ce dossier et génère les imports en `@dflat-core/web/<librairie>`. Sans `-webpkg` (application hôte
+hors dépôt), ces librairies ne sont pas générées : elles sont fournies par le package. `dbmanager` écrit les
+permissions TypeScript du module System dans `system-root/src/lib`.

package/fesm2022/dflat-core-web-system-ux.mjs

@@ -4490,11 +4490,11 @@ class PresentationProfileColumnComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PresentationProfileColumnComponent, deps: [{ token: i2.PresentationProfileDataService }, { token: i2.PresentationProfileItemDataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: PresentationProfileColumnComponent, isStandalone: false, selector: "alg-pp-column", ngImport: i0, template: "<div class=\"gcc\">\n\n  <!-- \u2500\u2500 SCOPE SECTION TABS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"gcc__sections\">\n    <button *ngFor=\"let sec of scopeSections\"\n            class=\"gcc__section-tab\"\n            [class.gcc__section-tab--active]=\"activeSection === sec.scope\"\n            type=\"button\"\n            (click)=\"setSection(sec.scope)\">\n      <i class=\"fa\" [ngClass]=\"'fa-' + sec.icon\"></i>&nbsp;{{ sec.label }}\n    </button>\n  </div>\n\n  <!-- \u2500\u2500 FILTER TOOLBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"gcc__toolbar\">\n    <div class=\"gcc__field\">\n      <label>Finalit\u00E9</label>\n      <select [(ngModel)]=\"filterPurpose\" (ngModelChange)=\"search()\">\n        <option *ngFor=\"let p of purposeOptions\" [ngValue]=\"p.value\">{{ p.label }}</option>\n      </select>\n    </div>\n    <div class=\"gcc__field\">\n      <label>Cl\u00E9 de grille</label>\n      <input type=\"text\" [(ngModel)]=\"filterKey\" placeholder=\"ex. PDTV\" (keydown.enter)=\"search()\" />\n    </div>\n    <div class=\"gcc__field\" *ngIf=\"filterIsPerimeter\">\n      <label>{{ scopeIdLabel }}</label>\n      <input type=\"number\" [(ngModel)]=\"filterScopeId\" (keydown.enter)=\"search()\" />\n    </div>\n    <button class=\"btn btn-secondary\" (click)=\"search()\" [disabled]=\"isLoadingList\">\n      <i class=\"fa fa-search\"></i>&nbsp;Rechercher\n    </button>\n  </div>\n\n  <div *ngIf=\"message\" class=\"gcc__message\">{{ message }}</div>\n\n  <!-- \u2500\u2500 4-PANEL BODY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"gcc__body\">\n\n    <!-- \u2500\u2500 Panel 1: Profile list (left sidebar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"gcc__configs\">\n      <div class=\"gcc__panel-hd\">\n        <span class=\"gcc__panel-title\">\n          Profils&nbsp;<span class=\"gcc__count\">{{ profiles.length }}</span>\n        </span>\n        <button class=\"btn btn-sm btn-primary\" (click)=\"newProfile()\" title=\"Nouveau profil\">\n          <i class=\"fa fa-plus\"></i>\n        </button>\n      </div>\n\n      <div class=\"gcc__list-scroll\">\n        <div *ngIf=\"isLoadingList\" class=\"gcc__spinner\">\n          <i class=\"fa fa-circle-o-notch fa-spin\"></i>&nbsp;Chargement\u2026\n        </div>\n        <p *ngIf=\"!isLoadingList && profiles.length === 0\" class=\"gcc__empty\">\n          Aucun profil trouv\u00E9.\n        </p>\n        <table *ngIf=\"!isLoadingList && profiles.length > 0\" class=\"gcc__table\">\n          <thead>\n            <tr>\n              <th>Cl\u00E9</th>\n              <th>Finalit\u00E9</th>\n              <th *ngIf=\"filterIsPerimeter\">P\u00E9rim\u00E8tre</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let p of profiles\"\n                class=\"gcc__config-row\"\n                [class.gcc__config-row--selected]=\"activeProfile?.Id === p.Id\"\n                (click)=\"selectProfile(p)\">\n              <td class=\"gcc__key\">{{ p.MetaEntityKey }}</td>\n              <td class=\"gcc__muted\">{{ getPurposeLabel(p.PresentationProfilePurpose) }}</td>\n              <td *ngIf=\"filterIsPerimeter\" class=\"gcc__muted\">#{{ p.ScopeId }}</td>\n              <td class=\"gcc__actions-cell\">\n                <button class=\"gcc__del-btn\" (click)=\"deleteProfile(p, $event)\" title=\"Supprimer\">\n                  <i class=\"fa fa-trash\"></i>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Panels 2/3/4: only when a profile is active \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <ng-container *ngIf=\"activeProfile; else noProfileTpl\">\n\n      <div class=\"gcc__editor\">\n\n        <div class=\"gcc__editor-hd\">\n          <span class=\"gcc__panel-title\">\n            {{ activeProfile.MetaEntityKey }}\n            <span class=\"gcc__muted gcc__fw-normal\">\u00B7 {{ getPurposeLabel(activeProfile.PresentationProfilePurpose) }}</span>\n            <span *ngIf=\"activeProfile.ScopeId != null\" class=\"gcc__muted gcc__fw-normal\">&nbsp;#{{ activeProfile.ScopeId }}</span>\n            <span *ngIf=\"selectedCount > 0\" class=\"gcc__badge gcc__badge--primary\">{{ selectedCount }}</span>\n          </span>\n        </div>\n\n        <div *ngIf=\"isLoading\" class=\"gcc__loading\">\n          <span class=\"gcc__spinner-icon fa fa-circle-o-notch fa-spin\"></span>\n          Chargement des colonnes\u2026\n        </div>\n\n        <div *ngIf=\"!isLoading\" class=\"gcc__panels\">\n\n          <!-- \u2500\u2500 Panel 2: Group selector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          <div class=\"gcc__groups\">\n            <div class=\"gcc__panel-hd\">\n              <span class=\"gcc__panel-label\">Sections</span>\n            </div>\n            <ul class=\"gcc__group-list\">\n              <li class=\"gcc__group-item\"\n                  [class.gcc__group-item--active]=\"selectedGroup === null\"\n                  (click)=\"selectGroup(null)\">\n                <span class=\"gcc__group-item__name\">Toutes les colonnes</span>\n                <span class=\"gcc__badge\">{{ allItems.length }}</span>\n              </li>\n              <li *ngFor=\"let group of groups\"\n                  class=\"gcc__group-item\"\n                  [class.gcc__group-item--active]=\"selectedGroup?.id === group.id\"\n                  [class.gcc__group-item--standard]=\"group.id === 'standard'\"\n                  [class.gcc__group-item--custom]=\"group.isCustom\"\n                  (click)=\"selectGroup(group)\">\n                <span class=\"gcc__group-item__name\">{{ group.label }}</span>\n                <div class=\"gcc__group-meta\">\n                  <span *ngIf=\"getGroupSelectedCount(group) > 0\" class=\"gcc__badge gcc__badge--primary\">{{ getGroupSelectedCount(group) }}</span>\n                  <span class=\"gcc__badge\">{{ getGroupCount(group) }}</span>\n                </div>\n              </li>\n            </ul>\n          </div>\n\n          <!-- \u2500\u2500 Panel 3: Catalog browse \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          <div class=\"gcc__browse\">\n            <div class=\"gcc__panel-hd\">\n              <span class=\"gcc__panel-label\">\n                {{ selectedGroup == null ? 'Toutes' : selectedGroup.label }}\n              </span>\n              <input class=\"gcc__search\" type=\"text\" placeholder=\"Rechercher\u2026\"\n                     [(ngModel)]=\"searchText\" (ngModelChange)=\"onSearch()\">\n            </div>\n\n            <div class=\"gcc__table-wrap\">\n              <table class=\"gcc__browse-table\">\n                <thead>\n                  <tr>\n                    <th class=\"gcc__col-check\">\n                      <input type=\"checkbox\"\n                             [checked]=\"allVisibleSelected\"\n                             [indeterminate]=\"someVisibleSelected\"\n                             (change)=\"toggleAll()\"\n                             title=\"Tout s\u00E9lectionner / d\u00E9s\u00E9lectionner\">\n                    </th>\n                    <th class=\"gcc__col-key\">Cl\u00E9</th>\n                    <th>Colonne</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let item of filteredItems\"\n                      class=\"gcc__browse-row\"\n                      [class.gcc__browse-row--selected]=\"isSelected(item)\"\n                      [class.gcc__browse-row--custom]=\"item.ColumnSourceType === 2\"\n                      (click)=\"toggleItem(item)\">\n                    <td class=\"gcc__col-check\" (click)=\"$event.stopPropagation()\">\n                      <input type=\"checkbox\" [checked]=\"isSelected(item)\" (change)=\"toggleItem(item)\">\n                    </td>\n                    <td class=\"gcc__col-key\">{{ item.ColumnKey }}</td>\n                    <td class=\"gcc__col-name\">{{ item.Label ?? item.ColumnKey }}</td>\n                  </tr>\n                  <tr *ngIf=\"filteredItems.length === 0\">\n                    <td colspan=\"3\" class=\"gcc__browse-empty\">Aucune colonne trouv\u00E9e</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n          </div>\n\n          <!-- \u2500\u2500 Panel 4: Ordered selection with admin flags \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          <div class=\"gcc__selection\">\n            <div class=\"gcc__panel-hd\">\n              <span class=\"gcc__panel-label\">Colonnes s\u00E9lectionn\u00E9es</span>\n              <span *ngIf=\"selectedCount > 0\" class=\"gcc__badge gcc__badge--primary\">{{ selectedCount }}</span>\n            </div>\n\n            <div *ngIf=\"orderedSelection.length > 0\" class=\"gcc__sel-legend\">\n              <span class=\"gcc__sel-legend__drag\"></span>\n              <span class=\"gcc__sel-legend__pos\">#</span>\n              <span class=\"gcc__sel-legend__code\">Cl\u00E9</span>\n              <span class=\"gcc__sel-legend__label\">\u00C9tiquette</span>\n              <ng-container *ngIf=\"isPerimeter\">\n                <span class=\"gcc__sel-legend__flag\">Aut.</span>\n              </ng-container>\n              <span class=\"gcc__sel-legend__flag\">Ver.</span>\n              <span class=\"gcc__sel-legend__remove\"></span>\n            </div>\n\n            <div *ngIf=\"orderedSelection.length === 0\" class=\"gcc__sel-empty\">\n              <span class=\"fa fa-columns gcc__sel-empty__icon\"></span>\n              <p>Cochez des colonnes \u00E0 gauche</p>\n            </div>\n\n            <div *ngIf=\"orderedSelection.length > 0\"\n                 class=\"gcc__sel-list\"\n                 cdkDropList\n                 [cdkDropListData]=\"orderedSelection\"\n                 (cdkDropListDropped)=\"onDrop($event)\">\n\n              <div *ngFor=\"let item of orderedSelection; let i = index\"\n                   class=\"gcc__sel-item\"\n                   cdkDrag\n                   [cdkDragData]=\"item\">\n\n                <div class=\"gcc__sel-item__placeholder\" *cdkDragPlaceholder></div>\n\n                <span class=\"gcc__sel-item__drag\" cdkDragHandle>\n                  <i class=\"fa fa-bars\"></i>\n                </span>\n\n                <span class=\"gcc__sel-item__pos\">{{ i + 1 }}</span>\n\n                <span class=\"gcc__sel-item__code\"\n                      [class.gcc__sel-item__code--cf]=\"item.ColumnSourceType === 2\"\n                      [title]=\"item.ColumnKey\">\n                  {{ item.ColumnKey }}\n                </span>\n\n                <input class=\"gcc__sel-item__label\" type=\"text\"\n                       [placeholder]=\"getCatalogLabel(item)\"\n                       [(ngModel)]=\"item.Label\"\n                       (click)=\"$event.stopPropagation()\"\n                       title=\"\u00C9tiquette personnalis\u00E9e\">\n\n                <!-- Perimeter scope: allowed flag -->\n                <ng-container *ngIf=\"isPerimeter\">\n                  <label class=\"gcc__flag\" (click)=\"$event.stopPropagation()\">\n                    <input type=\"checkbox\" [(ngModel)]=\"item.IsAllowed\" title=\"Autoris\u00E9\">\n                  </label>\n                </ng-container>\n\n                <!-- Always: locked flag -->\n                <label class=\"gcc__flag\" (click)=\"$event.stopPropagation()\">\n                  <input type=\"checkbox\" [(ngModel)]=\"item.IsLocked\" title=\"Verrouill\u00E9\">\n                </label>\n\n                <button class=\"gcc__sel-item__remove\" type=\"button\"\n                        (click)=\"removeFromSelection(item); $event.stopPropagation()\"\n                        title=\"Retirer\">&#x2715;</button>\n              </div>\n\n            </div>\n\n            <!-- Footer / save -->\n            <div class=\"gcc__sel-footer\">\n              <span class=\"gcc__sel-footer__info\">\n                <ng-container *ngIf=\"selectedCount > 0\">\n                  {{ selectedCount }} colonne(s) \u2014 glissez pour r\u00E9ordonner\n                </ng-container>\n              </span>\n              <button class=\"btn btn-primary btn-sm\" type=\"button\" (click)=\"save()\" [disabled]=\"!canSave\">\n                <i class=\"fa\"\n                   [class.fa-save]=\"!isSaving\"\n                   [class.fa-circle-o-notch]=\"isSaving\"\n                   [class.fa-spin]=\"isSaving\"></i>\n                &nbsp;Enregistrer\n              </button>\n            </div>\n          </div>\n\n        </div><!-- /.gcc__panels -->\n      </div><!-- /.gcc__editor -->\n\n    </ng-container>\n\n    <ng-template #noProfileTpl>\n      <div class=\"gcc__hint\">\n        <i class=\"fa fa-arrow-left\"></i>&nbsp;S\u00E9lectionnez ou cr\u00E9ez un profil\n      </div>\n    </ng-template>\n\n  </div><!-- /.gcc__body -->\n</div>\n", styles: [".gcc{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:1rem;box-sizing:border-box;gap:.75rem}.gcc__toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem;flex-shrink:0}.gcc__field{display:flex;flex-direction:column;gap:.25rem}.gcc__field label{font-size:.75rem;font-weight:600;color:#6c757d}.gcc__field input,.gcc__field select{min-width:9rem;padding:.35rem .5rem;border:1px solid #ced4da;border-radius:.25rem;font-size:.85rem}.gcc__message{padding:.5rem .75rem;background:#eef3f8;border-left:3px solid #4465C9;border-radius:.25rem;font-size:.85rem;flex-shrink:0}.gcc__body{flex:1;display:flex;gap:0;overflow:hidden;min-height:0;border:1px solid #e9ecef;border-radius:.25rem;background:#fff}.gcc__panel-hd{display:flex;align-items:center;justify-content:space-between;padding:.4rem .75rem;background:#f8f9fa;border-bottom:1px solid #e9ecef;flex-shrink:0}.gcc__panel-title{font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:6px}.gcc__panel-label{font-size:.75rem;font-weight:600;color:#495057}.gcc__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:16px;padding:0 5px;background:#4465c91f;color:#4465c9;border-radius:20px;font-size:10px;font-weight:700}.gcc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 5px;background:#4465c91a;color:#4465c9;border-radius:20px;font-size:10px;font-weight:700}.gcc__badge--primary{background:#4465c9;color:#fff}.gcc__muted{color:#6c757d;font-size:.8rem}.gcc__fw-normal{font-weight:400}.gcc__configs{display:flex;flex-direction:column;flex:0 0 220px;border-right:1px solid #e9ecef;overflow:hidden}.gcc__list-scroll{flex:1;overflow:auto}.gcc__table{width:100%;border-collapse:collapse}.gcc__table th,.gcc__table td{padding:.35rem .6rem;border-bottom:1px solid #e9ecef;text-align:left;font-size:.78rem}.gcc__table th{font-weight:600;color:#495057;background:#f8f9fa;position:sticky;top:0;z-index:1}.gcc__config-row{cursor:pointer;transition:background .1s}.gcc__config-row:hover{background:#4465c90a}.gcc__config-row--selected{background:#4465c914;border-left:3px solid #4465C9}.gcc__config-row--selected td:first-child{padding-left:calc(.6rem - 3px)}.gcc__key{font-family:monospace;font-weight:600;color:#4465c9;font-size:.78rem}.gcc__scope-badge{display:inline-block;padding:1px 5px;border-radius:20px;background:#4465c91a;color:#4465c9;font-size:9px;font-weight:700;text-transform:uppercase}.gcc__actions-cell{text-align:right;width:28px}.gcc__del-btn{background:none;border:none;color:#adb5bd;cursor:pointer;padding:2px 4px;border-radius:3px;font-size:.72rem;transition:color .1s}.gcc__del-btn:hover{color:#dc3545}.gcc__spinner{display:flex;align-items:center;gap:8px;padding:1rem .75rem;color:#6c757d;font-size:.8rem}.gcc__empty{padding:1.25rem .75rem;color:#6c757d;font-style:italic;font-size:.8rem}.gcc__editor{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.gcc__editor-hd{display:flex;align-items:center;padding:.4rem .75rem;background:#f8f9fa;border-bottom:1px solid #e9ecef;flex-shrink:0}.gcc__loading{display:flex;align-items:center;gap:8px;padding:1.5rem 1rem;color:#6c757d;font-size:.85rem;flex-shrink:0}.gcc__spinner-icon{font-size:1rem}.gcc__panels{flex:1;display:flex;overflow:hidden;min-height:0}.gcc__groups{display:flex;flex-direction:column;flex:0 0 160px;border-right:1px solid #e9ecef;overflow:hidden}.gcc__group-list{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto}.gcc__group-item{display:flex;align-items:center;justify-content:space-between;padding:.4rem .6rem;cursor:pointer;font-size:.78rem;border-bottom:1px solid #e9ecef;transition:background .1s}.gcc__group-item:hover{background:#4465c90a}.gcc__group-item--active{background:#4465c914;font-weight:600;color:#4465c9}.gcc__group-item--standard .gcc__group-item__name{color:#4465c9}.gcc__group-item--custom .gcc__group-item__name{color:#6b7fd4}.gcc__group-item__name{flex:1}.gcc__group-meta{display:flex;align-items:center;gap:3px}.gcc__browse{display:flex;flex-direction:column;flex:1;border-right:1px solid #e9ecef;overflow:hidden;min-width:0}.gcc__search{height:26px;padding:0 .5rem;border:1px solid #ced4da;border-radius:.2rem;font-size:.78rem;width:140px}.gcc__table-wrap{flex:1;overflow:auto}.gcc__table-wrap::-webkit-scrollbar{width:5px}.gcc__table-wrap::-webkit-scrollbar-track{background:transparent}.gcc__table-wrap::-webkit-scrollbar-thumb{background:#e9ecef;border-radius:3px}.gcc__browse-table{width:100%;border-collapse:collapse}.gcc__browse-table th,.gcc__browse-table td{padding:.3rem .5rem;border-bottom:1px solid #e9ecef;text-align:left;font-size:.78rem}.gcc__browse-table th{font-weight:600;color:#495057;background:#f8f9fa;position:sticky;top:0;z-index:1}.gcc__browse-row{cursor:pointer;transition:background .1s}.gcc__browse-row:hover{background:#4465c90a}.gcc__browse-row--selected{background:#4465c914}.gcc__browse-row--custom .gcc__col-key{color:#6b7fd4}.gcc__col-check{width:28px;text-align:center}.gcc__col-key{font-family:monospace;font-size:11px;font-weight:600;color:#4465c9;width:130px}.gcc__browse-empty{padding:1rem .75rem;color:#6c757d;font-style:italic;font-size:.78rem}.gcc__selection{display:flex;flex-direction:column;flex:0 0 380px;overflow:hidden}.gcc__sel-legend{display:flex;align-items:center;padding:3px .5rem;background:#f8f9fa;border-bottom:1px solid #e9ecef;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6c757d;flex-shrink:0;gap:0}.gcc__sel-legend__drag{width:20px;flex-shrink:0}.gcc__sel-legend__pos{width:22px;flex-shrink:0;text-align:center}.gcc__sel-legend__code{width:80px;flex-shrink:0;padding-left:2px}.gcc__sel-legend__label{flex:1;min-width:0}.gcc__sel-legend__flag{width:36px;text-align:center;flex-shrink:0}.gcc__sel-legend__width{width:50px;flex-shrink:0;padding-left:2px}.gcc__sel-legend__remove{width:22px;flex-shrink:0}.gcc__sel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:#6c757d;gap:.5rem;font-size:.8rem}.gcc__sel-empty__icon{font-size:2rem;opacity:.3}.gcc__sel-empty p{margin:0}.gcc__sel-list{flex:1;overflow-y:auto}.gcc__sel-list::-webkit-scrollbar{width:4px}.gcc__sel-list::-webkit-scrollbar-track{background:transparent}.gcc__sel-list::-webkit-scrollbar-thumb{background:#e9ecef;border-radius:3px}.gcc__sel-item{display:flex;align-items:center;padding:4px .5rem;border-bottom:1px solid #e9ecef;background:#fff;-webkit-user-select:none;user-select:none;gap:0;transition:background .1s}.gcc__sel-item:hover{background:#4465c908}.gcc__sel-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.gcc__sel-item__placeholder{height:32px;background:#4465c90f;border:1px dashed #4465C9;border-radius:2px;flex:1}.gcc__sel-item__drag{width:20px;flex-shrink:0;color:#ced4da;cursor:grab;font-size:11px;display:flex;align-items:center;justify-content:center}.gcc__sel-item__drag:hover{color:#4465c9}.gcc__sel-item__drag:active{cursor:grabbing}.gcc__sel-item__pos{width:22px;flex-shrink:0;font-size:9px;color:#6c757d;text-align:center}.gcc__sel-item__code{width:80px;flex-shrink:0;font-family:monospace;font-size:10px;font-weight:600;color:#4465c9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px}.gcc__sel-item__code--cf{color:#6b7fd4}.gcc__sel-item__label{flex:1;min-width:0;height:22px;padding:0 4px;border:1px solid transparent;border-radius:3px;font-size:11px;color:#343a40;background:transparent;outline:none;transition:border-color .1s,background .1s}.gcc__sel-item__label::placeholder{color:#6c757d;font-style:italic}.gcc__sel-item__label:hover{border-color:#d1d8de;background:#f8f9fa}.gcc__sel-item__label:focus{border-color:#4465c9;background:#fff}.gcc__sel-item__remove{width:22px;flex-shrink:0;background:none;border:none;color:#adb5bd;cursor:pointer;font-size:11px;padding:0;text-align:center;transition:color .1s}.gcc__sel-item__remove:hover{color:#dc3545}.gcc__sel-list.cdk-drop-list-dragging .gcc__sel-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.gcc__flag{width:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0}.gcc__flag input[type=checkbox]{cursor:pointer}.gcc__item-width{width:46px;flex-shrink:0;padding:1px 3px;border:1px solid #ced4da;border-radius:3px;font-size:10px;text-align:right}.gcc__sel-footer{display:flex;align-items:center;justify-content:space-between;padding:.4rem .75rem;background:#f8f9fa;border-top:1px solid #e9ecef;flex-shrink:0}.gcc__sel-footer__info{font-size:.75rem;color:#6c757d;font-style:italic}.gcc__hint{display:flex;align-items:center;justify-content:center;flex:1;color:#6c757d;font-style:italic;font-size:.85rem}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { 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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: PresentationProfileColumnComponent, isStandalone: false, selector: "alg-pp-column", ngImport: i0, template: "<div class=\"gcc\">\r\n\r\n  <!-- \u2500\u2500 SCOPE SECTION TABS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"gcc__sections\">\r\n    <button *ngFor=\"let sec of scopeSections\"\r\n            class=\"gcc__section-tab\"\r\n            [class.gcc__section-tab--active]=\"activeSection === sec.scope\"\r\n            type=\"button\"\r\n            (click)=\"setSection(sec.scope)\">\r\n      <i class=\"fa\" [ngClass]=\"'fa-' + sec.icon\"></i>&nbsp;{{ sec.label }}\r\n    </button>\r\n  </div>\r\n\r\n  <!-- \u2500\u2500 FILTER TOOLBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"gcc__toolbar\">\r\n    <div class=\"gcc__field\">\r\n      <label>Finalit\u00E9</label>\r\n      <select [(ngModel)]=\"filterPurpose\" (ngModelChange)=\"search()\">\r\n        <option *ngFor=\"let p of purposeOptions\" [ngValue]=\"p.value\">{{ p.label }}</option>\r\n      </select>\r\n    </div>\r\n    <div class=\"gcc__field\">\r\n      <label>Cl\u00E9 de grille</label>\r\n      <input type=\"text\" [(ngModel)]=\"filterKey\" placeholder=\"ex. PDTV\" (keydown.enter)=\"search()\" />\r\n    </div>\r\n    <div class=\"gcc__field\" *ngIf=\"filterIsPerimeter\">\r\n      <label>{{ scopeIdLabel }}</label>\r\n      <input type=\"number\" [(ngModel)]=\"filterScopeId\" (keydown.enter)=\"search()\" />\r\n    </div>\r\n    <button class=\"btn btn-secondary\" (click)=\"search()\" [disabled]=\"isLoadingList\">\r\n      <i class=\"fa fa-search\"></i>&nbsp;Rechercher\r\n    </button>\r\n  </div>\r\n\r\n  <div *ngIf=\"message\" class=\"gcc__message\">{{ message }}</div>\r\n\r\n  <!-- \u2500\u2500 4-PANEL BODY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"gcc__body\">\r\n\r\n    <!-- \u2500\u2500 Panel 1: Profile list (left sidebar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"gcc__configs\">\r\n      <div class=\"gcc__panel-hd\">\r\n        <span class=\"gcc__panel-title\">\r\n          Profils&nbsp;<span class=\"gcc__count\">{{ profiles.length }}</span>\r\n        </span>\r\n        <button class=\"btn btn-sm btn-primary\" (click)=\"newProfile()\" title=\"Nouveau profil\">\r\n          <i class=\"fa fa-plus\"></i>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"gcc__list-scroll\">\r\n        <div *ngIf=\"isLoadingList\" class=\"gcc__spinner\">\r\n          <i class=\"fa fa-circle-o-notch fa-spin\"></i>&nbsp;Chargement\u2026\r\n        </div>\r\n        <p *ngIf=\"!isLoadingList && profiles.length === 0\" class=\"gcc__empty\">\r\n          Aucun profil trouv\u00E9.\r\n        </p>\r\n        <table *ngIf=\"!isLoadingList && profiles.length > 0\" class=\"gcc__table\">\r\n          <thead>\r\n            <tr>\r\n              <th>Cl\u00E9</th>\r\n              <th>Finalit\u00E9</th>\r\n              <th *ngIf=\"filterIsPerimeter\">P\u00E9rim\u00E8tre</th>\r\n              <th></th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let p of profiles\"\r\n                class=\"gcc__config-row\"\r\n                [class.gcc__config-row--selected]=\"activeProfile?.Id === p.Id\"\r\n                (click)=\"selectProfile(p)\">\r\n              <td class=\"gcc__key\">{{ p.MetaEntityKey }}</td>\r\n              <td class=\"gcc__muted\">{{ getPurposeLabel(p.PresentationProfilePurpose) }}</td>\r\n              <td *ngIf=\"filterIsPerimeter\" class=\"gcc__muted\">#{{ p.ScopeId }}</td>\r\n              <td class=\"gcc__actions-cell\">\r\n                <button class=\"gcc__del-btn\" (click)=\"deleteProfile(p, $event)\" title=\"Supprimer\">\r\n                  <i class=\"fa fa-trash\"></i>\r\n                </button>\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- \u2500\u2500 Panels 2/3/4: only when a profile is active \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <ng-container *ngIf=\"activeProfile; else noProfileTpl\">\r\n\r\n      <div class=\"gcc__editor\">\r\n\r\n        <div class=\"gcc__editor-hd\">\r\n          <span class=\"gcc__panel-title\">\r\n            {{ activeProfile.MetaEntityKey }}\r\n            <span class=\"gcc__muted gcc__fw-normal\">\u00B7 {{ getPurposeLabel(activeProfile.PresentationProfilePurpose) }}</span>\r\n            <span *ngIf=\"activeProfile.ScopeId != null\" class=\"gcc__muted gcc__fw-normal\">&nbsp;#{{ activeProfile.ScopeId }}</span>\r\n            <span *ngIf=\"selectedCount > 0\" class=\"gcc__badge gcc__badge--primary\">{{ selectedCount }}</span>\r\n          </span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isLoading\" class=\"gcc__loading\">\r\n          <span class=\"gcc__spinner-icon fa fa-circle-o-notch fa-spin\"></span>\r\n          Chargement des colonnes\u2026\r\n        </div>\r\n\r\n        <div *ngIf=\"!isLoading\" class=\"gcc__panels\">\r\n\r\n          <!-- \u2500\u2500 Panel 2: Group selector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n          <div class=\"gcc__groups\">\r\n            <div class=\"gcc__panel-hd\">\r\n              <span class=\"gcc__panel-label\">Sections</span>\r\n            </div>\r\n            <ul class=\"gcc__group-list\">\r\n              <li class=\"gcc__group-item\"\r\n                  [class.gcc__group-item--active]=\"selectedGroup === null\"\r\n                  (click)=\"selectGroup(null)\">\r\n                <span class=\"gcc__group-item__name\">Toutes les colonnes</span>\r\n                <span class=\"gcc__badge\">{{ allItems.length }}</span>\r\n              </li>\r\n              <li *ngFor=\"let group of groups\"\r\n                  class=\"gcc__group-item\"\r\n                  [class.gcc__group-item--active]=\"selectedGroup?.id === group.id\"\r\n                  [class.gcc__group-item--standard]=\"group.id === 'standard'\"\r\n                  [class.gcc__group-item--custom]=\"group.isCustom\"\r\n                  (click)=\"selectGroup(group)\">\r\n                <span class=\"gcc__group-item__name\">{{ group.label }}</span>\r\n                <div class=\"gcc__group-meta\">\r\n                  <span *ngIf=\"getGroupSelectedCount(group) > 0\" class=\"gcc__badge gcc__badge--primary\">{{ getGroupSelectedCount(group) }}</span>\r\n                  <span class=\"gcc__badge\">{{ getGroupCount(group) }}</span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n\r\n          <!-- \u2500\u2500 Panel 3: Catalog browse \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n          <div class=\"gcc__browse\">\r\n            <div class=\"gcc__panel-hd\">\r\n              <span class=\"gcc__panel-label\">\r\n                {{ selectedGroup == null ? 'Toutes' : selectedGroup.label }}\r\n              </span>\r\n              <input class=\"gcc__search\" type=\"text\" placeholder=\"Rechercher\u2026\"\r\n                     [(ngModel)]=\"searchText\" (ngModelChange)=\"onSearch()\">\r\n            </div>\r\n\r\n            <div class=\"gcc__table-wrap\">\r\n              <table class=\"gcc__browse-table\">\r\n                <thead>\r\n                  <tr>\r\n                    <th class=\"gcc__col-check\">\r\n                      <input type=\"checkbox\"\r\n                             [checked]=\"allVisibleSelected\"\r\n                             [indeterminate]=\"someVisibleSelected\"\r\n                             (change)=\"toggleAll()\"\r\n                             title=\"Tout s\u00E9lectionner / d\u00E9s\u00E9lectionner\">\r\n                    </th>\r\n                    <th class=\"gcc__col-key\">Cl\u00E9</th>\r\n                    <th>Colonne</th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of filteredItems\"\r\n                      class=\"gcc__browse-row\"\r\n                      [class.gcc__browse-row--selected]=\"isSelected(item)\"\r\n                      [class.gcc__browse-row--custom]=\"item.ColumnSourceType === 2\"\r\n                      (click)=\"toggleItem(item)\">\r\n                    <td class=\"gcc__col-check\" (click)=\"$event.stopPropagation()\">\r\n                      <input type=\"checkbox\" [checked]=\"isSelected(item)\" (change)=\"toggleItem(item)\">\r\n                    </td>\r\n                    <td class=\"gcc__col-key\">{{ item.ColumnKey }}</td>\r\n                    <td class=\"gcc__col-name\">{{ item.Label ?? item.ColumnKey }}</td>\r\n                  </tr>\r\n                  <tr *ngIf=\"filteredItems.length === 0\">\r\n                    <td colspan=\"3\" class=\"gcc__browse-empty\">Aucune colonne trouv\u00E9e</td>\r\n                  </tr>\r\n                </tbody>\r\n              </table>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- \u2500\u2500 Panel 4: Ordered selection with admin flags \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n          <div class=\"gcc__selection\">\r\n            <div class=\"gcc__panel-hd\">\r\n              <span class=\"gcc__panel-label\">Colonnes s\u00E9lectionn\u00E9es</span>\r\n              <span *ngIf=\"selectedCount > 0\" class=\"gcc__badge gcc__badge--primary\">{{ selectedCount }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"orderedSelection.length > 0\" class=\"gcc__sel-legend\">\r\n              <span class=\"gcc__sel-legend__drag\"></span>\r\n              <span class=\"gcc__sel-legend__pos\">#</span>\r\n              <span class=\"gcc__sel-legend__code\">Cl\u00E9</span>\r\n              <span class=\"gcc__sel-legend__label\">\u00C9tiquette</span>\r\n              <ng-container *ngIf=\"isPerimeter\">\r\n                <span class=\"gcc__sel-legend__flag\">Aut.</span>\r\n              </ng-container>\r\n              <span class=\"gcc__sel-legend__flag\">Ver.</span>\r\n              <span class=\"gcc__sel-legend__remove\"></span>\r\n            </div>\r\n\r\n            <div *ngIf=\"orderedSelection.length === 0\" class=\"gcc__sel-empty\">\r\n              <span class=\"fa fa-columns gcc__sel-empty__icon\"></span>\r\n              <p>Cochez des colonnes \u00E0 gauche</p>\r\n            </div>\r\n\r\n            <div *ngIf=\"orderedSelection.length > 0\"\r\n                 class=\"gcc__sel-list\"\r\n                 cdkDropList\r\n                 [cdkDropListData]=\"orderedSelection\"\r\n                 (cdkDropListDropped)=\"onDrop($event)\">\r\n\r\n              <div *ngFor=\"let item of orderedSelection; let i = index\"\r\n                   class=\"gcc__sel-item\"\r\n                   cdkDrag\r\n                   [cdkDragData]=\"item\">\r\n\r\n                <div class=\"gcc__sel-item__placeholder\" *cdkDragPlaceholder></div>\r\n\r\n                <span class=\"gcc__sel-item__drag\" cdkDragHandle>\r\n                  <i class=\"fa fa-bars\"></i>\r\n                </span>\r\n\r\n                <span class=\"gcc__sel-item__pos\">{{ i + 1 }}</span>\r\n\r\n                <span class=\"gcc__sel-item__code\"\r\n                      [class.gcc__sel-item__code--cf]=\"item.ColumnSourceType === 2\"\r\n                      [title]=\"item.ColumnKey\">\r\n                  {{ item.ColumnKey }}\r\n                </span>\r\n\r\n                <input class=\"gcc__sel-item__label\" type=\"text\"\r\n                       [placeholder]=\"getCatalogLabel(item)\"\r\n                       [(ngModel)]=\"item.Label\"\r\n                       (click)=\"$event.stopPropagation()\"\r\n                       title=\"\u00C9tiquette personnalis\u00E9e\">\r\n\r\n                <!-- Perimeter scope: allowed flag -->\r\n                <ng-container *ngIf=\"isPerimeter\">\r\n                  <label class=\"gcc__flag\" (click)=\"$event.stopPropagation()\">\r\n                    <input type=\"checkbox\" [(ngModel)]=\"item.IsAllowed\" title=\"Autoris\u00E9\">\r\n                  </label>\r\n                </ng-container>\r\n\r\n                <!-- Always: locked flag -->\r\n                <label class=\"gcc__flag\" (click)=\"$event.stopPropagation()\">\r\n                  <input type=\"checkbox\" [(ngModel)]=\"item.IsLocked\" title=\"Verrouill\u00E9\">\r\n                </label>\r\n\r\n                <button class=\"gcc__sel-item__remove\" type=\"button\"\r\n                        (click)=\"removeFromSelection(item); $event.stopPropagation()\"\r\n                        title=\"Retirer\">&#x2715;</button>\r\n              </div>\r\n\r\n            </div>\r\n\r\n            <!-- Footer / save -->\r\n            <div class=\"gcc__sel-footer\">\r\n              <span class=\"gcc__sel-footer__info\">\r\n                <ng-container *ngIf=\"selectedCount > 0\">\r\n                  {{ selectedCount }} colonne(s) \u2014 glissez pour r\u00E9ordonner\r\n                </ng-container>\r\n              </span>\r\n              <button class=\"btn btn-primary btn-sm\" type=\"button\" (click)=\"save()\" [disabled]=\"!canSave\">\r\n                <i class=\"fa\"\r\n                   [class.fa-save]=\"!isSaving\"\r\n                   [class.fa-circle-o-notch]=\"isSaving\"\r\n                   [class.fa-spin]=\"isSaving\"></i>\r\n                &nbsp;Enregistrer\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n        </div><!-- /.gcc__panels -->\r\n      </div><!-- /.gcc__editor -->\r\n\r\n    </ng-container>\r\n\r\n    <ng-template #noProfileTpl>\r\n      <div class=\"gcc__hint\">\r\n        <i class=\"fa fa-arrow-left\"></i>&nbsp;S\u00E9lectionnez ou cr\u00E9ez un profil\r\n      </div>\r\n    </ng-template>\r\n\r\n  </div><!-- /.gcc__body -->\r\n</div>\r\n", styles: [".gcc{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:1rem;box-sizing:border-box;gap:.75rem}.gcc__toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem;flex-shrink:0}.gcc__field{display:flex;flex-direction:column;gap:.25rem}.gcc__field label{font-size:.75rem;font-weight:600;color:#6c757d}.gcc__field input,.gcc__field select{min-width:9rem;padding:.35rem .5rem;border:1px solid #ced4da;border-radius:.25rem;font-size:.85rem}.gcc__message{padding:.5rem .75rem;background:#eef3f8;border-left:3px solid #4465C9;border-radius:.25rem;font-size:.85rem;flex-shrink:0}.gcc__body{flex:1;display:flex;gap:0;overflow:hidden;min-height:0;border:1px solid #e9ecef;border-radius:.25rem;background:#fff}.gcc__panel-hd{display:flex;align-items:center;justify-content:space-between;padding:.4rem .75rem;background:#f8f9fa;border-bottom:1px solid #e9ecef;flex-shrink:0}.gcc__panel-title{font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:6px}.gcc__panel-label{font-size:.75rem;font-weight:600;color:#495057}.gcc__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:16px;padding:0 5px;background:#4465c91f;color:#4465c9;border-radius:20px;font-size:10px;font-weight:700}.gcc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 5px;background:#4465c91a;color:#4465c9;border-radius:20px;font-size:10px;font-weight:700}.gcc__badge--primary{background:#4465c9;color:#fff}.gcc__muted{color:#6c757d;font-size:.8rem}.gcc__fw-normal{font-weight:400}.gcc__configs{display:flex;flex-direction:column;flex:0 0 220px;border-right:1px solid #e9ecef;overflow:hidden}.gcc__list-scroll{flex:1;overflow:auto}.gcc__table{width:100%;border-collapse:collapse}.gcc__table th,.gcc__table td{padding:.35rem .6rem;border-bottom:1px solid #e9ecef;text-align:left;font-size:.78rem}.gcc__table th{font-weight:600;color:#495057;background:#f8f9fa;position:sticky;top:0;z-index:1}.gcc__config-row{cursor:pointer;transition:background .1s}.gcc__config-row:hover{background:#4465c90a}.gcc__config-row--selected{background:#4465c914;border-left:3px solid #4465C9}.gcc__config-row--selected td:first-child{padding-left:calc(.6rem - 3px)}.gcc__key{font-family:monospace;font-weight:600;color:#4465c9;font-size:.78rem}.gcc__scope-badge{display:inline-block;padding:1px 5px;border-radius:20px;background:#4465c91a;color:#4465c9;font-size:9px;font-weight:700;text-transform:uppercase}.gcc__actions-cell{text-align:right;width:28px}.gcc__del-btn{background:none;border:none;color:#adb5bd;cursor:pointer;padding:2px 4px;border-radius:3px;font-size:.72rem;transition:color .1s}.gcc__del-btn:hover{color:#dc3545}.gcc__spinner{display:flex;align-items:center;gap:8px;padding:1rem .75rem;color:#6c757d;font-size:.8rem}.gcc__empty{padding:1.25rem .75rem;color:#6c757d;font-style:italic;font-size:.8rem}.gcc__editor{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.gcc__editor-hd{display:flex;align-items:center;padding:.4rem .75rem;background:#f8f9fa;border-bottom:1px solid #e9ecef;flex-shrink:0}.gcc__loading{display:flex;align-items:center;gap:8px;padding:1.5rem 1rem;color:#6c757d;font-size:.85rem;flex-shrink:0}.gcc__spinner-icon{font-size:1rem}.gcc__panels{flex:1;display:flex;overflow:hidden;min-height:0}.gcc__groups{display:flex;flex-direction:column;flex:0 0 160px;border-right:1px solid #e9ecef;overflow:hidden}.gcc__group-list{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto}.gcc__group-item{display:flex;align-items:center;justify-content:space-between;padding:.4rem .6rem;cursor:pointer;font-size:.78rem;border-bottom:1px solid #e9ecef;transition:background .1s}.gcc__group-item:hover{background:#4465c90a}.gcc__group-item--active{background:#4465c914;font-weight:600;color:#4465c9}.gcc__group-item--standard .gcc__group-item__name{color:#4465c9}.gcc__group-item--custom .gcc__group-item__name{color:#6b7fd4}.gcc__group-item__name{flex:1}.gcc__group-meta{display:flex;align-items:center;gap:3px}.gcc__browse{display:flex;flex-direction:column;flex:1;border-right:1px solid #e9ecef;overflow:hidden;min-width:0}.gcc__search{height:26px;padding:0 .5rem;border:1px solid #ced4da;border-radius:.2rem;font-size:.78rem;width:140px}.gcc__table-wrap{flex:1;overflow:auto}.gcc__table-wrap::-webkit-scrollbar{width:5px}.gcc__table-wrap::-webkit-scrollbar-track{background:transparent}.gcc__table-wrap::-webkit-scrollbar-thumb{background:#e9ecef;border-radius:3px}.gcc__browse-table{width:100%;border-collapse:collapse}.gcc__browse-table th,.gcc__browse-table td{padding:.3rem .5rem;border-bottom:1px solid #e9ecef;text-align:left;font-size:.78rem}.gcc__browse-table th{font-weight:600;color:#495057;background:#f8f9fa;position:sticky;top:0;z-index:1}.gcc__browse-row{cursor:pointer;transition:background .1s}.gcc__browse-row:hover{background:#4465c90a}.gcc__browse-row--selected{background:#4465c914}.gcc__browse-row--custom .gcc__col-key{color:#6b7fd4}.gcc__col-check{width:28px;text-align:center}.gcc__col-key{font-family:monospace;font-size:11px;font-weight:600;color:#4465c9;width:130px}.gcc__browse-empty{padding:1rem .75rem;color:#6c757d;font-style:italic;font-size:.78rem}.gcc__selection{display:flex;flex-direction:column;flex:0 0 380px;overflow:hidden}.gcc__sel-legend{display:flex;align-items:center;padding:3px .5rem;background:#f8f9fa;border-bottom:1px solid #e9ecef;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6c757d;flex-shrink:0;gap:0}.gcc__sel-legend__drag{width:20px;flex-shrink:0}.gcc__sel-legend__pos{width:22px;flex-shrink:0;text-align:center}.gcc__sel-legend__code{width:80px;flex-shrink:0;padding-left:2px}.gcc__sel-legend__label{flex:1;min-width:0}.gcc__sel-legend__flag{width:36px;text-align:center;flex-shrink:0}.gcc__sel-legend__width{width:50px;flex-shrink:0;padding-left:2px}.gcc__sel-legend__remove{width:22px;flex-shrink:0}.gcc__sel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:#6c757d;gap:.5rem;font-size:.8rem}.gcc__sel-empty__icon{font-size:2rem;opacity:.3}.gcc__sel-empty p{margin:0}.gcc__sel-list{flex:1;overflow-y:auto}.gcc__sel-list::-webkit-scrollbar{width:4px}.gcc__sel-list::-webkit-scrollbar-track{background:transparent}.gcc__sel-list::-webkit-scrollbar-thumb{background:#e9ecef;border-radius:3px}.gcc__sel-item{display:flex;align-items:center;padding:4px .5rem;border-bottom:1px solid #e9ecef;background:#fff;-webkit-user-select:none;user-select:none;gap:0;transition:background .1s}.gcc__sel-item:hover{background:#4465c908}.gcc__sel-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.gcc__sel-item__placeholder{height:32px;background:#4465c90f;border:1px dashed #4465C9;border-radius:2px;flex:1}.gcc__sel-item__drag{width:20px;flex-shrink:0;color:#ced4da;cursor:grab;font-size:11px;display:flex;align-items:center;justify-content:center}.gcc__sel-item__drag:hover{color:#4465c9}.gcc__sel-item__drag:active{cursor:grabbing}.gcc__sel-item__pos{width:22px;flex-shrink:0;font-size:9px;color:#6c757d;text-align:center}.gcc__sel-item__code{width:80px;flex-shrink:0;font-family:monospace;font-size:10px;font-weight:600;color:#4465c9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px}.gcc__sel-item__code--cf{color:#6b7fd4}.gcc__sel-item__label{flex:1;min-width:0;height:22px;padding:0 4px;border:1px solid transparent;border-radius:3px;font-size:11px;color:#343a40;background:transparent;outline:none;transition:border-color .1s,background .1s}.gcc__sel-item__label::placeholder{color:#6c757d;font-style:italic}.gcc__sel-item__label:hover{border-color:#d1d8de;background:#f8f9fa}.gcc__sel-item__label:focus{border-color:#4465c9;background:#fff}.gcc__sel-item__remove{width:22px;flex-shrink:0;background:none;border:none;color:#adb5bd;cursor:pointer;font-size:11px;padding:0;text-align:center;transition:color .1s}.gcc__sel-item__remove:hover{color:#dc3545}.gcc__sel-list.cdk-drop-list-dragging .gcc__sel-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.gcc__flag{width:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0}.gcc__flag input[type=checkbox]{cursor:pointer}.gcc__item-width{width:46px;flex-shrink:0;padding:1px 3px;border:1px solid #ced4da;border-radius:3px;font-size:10px;text-align:right}.gcc__sel-footer{display:flex;align-items:center;justify-content:space-between;padding:.4rem .75rem;background:#f8f9fa;border-top:1px solid #e9ecef;flex-shrink:0}.gcc__sel-footer__info{font-size:.75rem;color:#6c757d;font-style:italic}.gcc__hint{display:flex;align-items:center;justify-content:center;flex:1;color:#6c757d;font-style:italic;font-size:.85rem}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { 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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PresentationProfileColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'alg-pp-column', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"gcc\">\n\n  <!-- \u2500\u2500 SCOPE SECTION TABS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"gcc__sections\">\n    <button *ngFor=\"let sec of scopeSections\"\n            class=\"gcc__section-tab\"\n            [class.gcc__section-tab--active]=\"activeSection === sec.scope\"\n            type=\"button\"\n            (click)=\"setSection(sec.scope)\">\n      <i class=\"fa\" [ngClass]=\"'fa-' + sec.icon\"></i>&nbsp;{{ sec.label }}\n    </button>\n  </div>\n\n  <!-- \u2500\u2500 FILTER TOOLBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"gcc__toolbar\">\n    <div class=\"gcc__field\">\n      <label>Finalit\u00E9</label>\n      <select [(ngModel)]=\"filterPurpose\" (ngModelChange)=\"search()\">\n        <option *ngFor=\"let p of purposeOptions\" [ngValue]=\"p.value\">{{ p.label }}</option>\n      </select>\n    </div>\n    <div class=\"gcc__field\">\n      <label>Cl\u00E9 de grille</label>\n      <input type=\"text\" [(ngModel)]=\"filterKey\" placeholder=\"ex. PDTV\" (keydown.enter)=\"search()\" />\n    </div>\n    <div class=\"gcc__field\" *ngIf=\"filterIsPerimeter\">\n      <label>{{ scopeIdLabel }}</label>\n      <input type=\"number\" [(ngModel)]=\"filterScopeId\" (keydown.enter)=\"search()\" />\n    </div>\n    <button class=\"btn btn-secondary\" (click)=\"search()\" [disabled]=\"isLoadingList\">\n      <i class=\"fa fa-search\"></i>&nbsp;Rechercher\n    </button>\n  </div>\n\n  <div *ngIf=\"message\" class=\"gcc__message\">{{ message }}</div>\n\n  <!-- \u2500\u2500 4-PANEL BODY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"gcc__body\">\n\n    <!-- \u2500\u2500 Panel 1: Profile list (left sidebar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"gcc__configs\">\n      <div class=\"gcc__panel-hd\">\n        <span class=\"gcc__panel-title\">\n          Profils&nbsp;<span class=\"gcc__count\">{{ profiles.length }}</span>\n        </span>\n        <button class=\"btn btn-sm btn-primary\" (click)=\"newProfile()\" title=\"Nouveau profil\">\n          <i class=\"fa fa-plus\"></i>\n        </button>\n      </div>\n\n      <div class=\"gcc__list-scroll\">\n        <div *ngIf=\"isLoadingList\" class=\"gcc__spinner\">\n          <i class=\"fa fa-circle-o-notch fa-spin\"></i>&nbsp;Chargement\u2026\n        </div>\n        <p *ngIf=\"!isLoadingList && profiles.length === 0\" class=\"gcc__empty\">\n          Aucun profil trouv\u00E9.\n        </p>\n        <table *ngIf=\"!isLoadingList && profiles.length > 0\" class=\"gcc__table\">\n          <thead>\n            <tr>\n              <th>Cl\u00E9</th>\n              <th>Finalit\u00E9</th>\n              <th *ngIf=\"filterIsPerimeter\">P\u00E9rim\u00E8tre</th>\n              <th></th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let p of profiles\"\n                class=\"gcc__config-row\"\n                [class.gcc__config-row--selected]=\"activeProfile?.Id === p.Id\"\n                (click)=\"selectProfile(p)\">\n              <td class=\"gcc__key\">{{ p.MetaEntityKey }}</td>\n              <td class=\"gcc__muted\">{{ getPurposeLabel(p.PresentationProfilePurpose) }}</td>\n              <td *ngIf=\"filterIsPerimeter\" class=\"gcc__muted\">#{{ p.ScopeId }}</td>\n              <td class=\"gcc__actions-cell\">\n                <button class=\"gcc__del-btn\" (click)=\"deleteProfile(p, $event)\" title=\"Supprimer\">\n                  <i class=\"fa fa-trash\"></i>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Panels 2/3/4: only when a profile is active \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <ng-container *ngIf=\"activeProfile; else noProfileTpl\">\n\n      <div class=\"gcc__editor\">\n\n        <div class=\"gcc__editor-hd\">\n          <span class=\"gcc__panel-title\">\n            {{ activeProfile.MetaEntityKey }}\n            <span class=\"gcc__muted gcc__fw-normal\">\u00B7 {{ getPurposeLabel(activeProfile.PresentationProfilePurpose) }}</span>\n            <span *ngIf=\"activeProfile.ScopeId != null\" class=\"gcc__muted gcc__fw-normal\">&nbsp;#{{ activeProfile.ScopeId }}</span>\n            <span *ngIf=\"selectedCount > 0\" class=\"gcc__badge gcc__badge--primary\">{{ selectedCount }}</span>\n          </span>\n        </div>\n\n        <div *ngIf=\"isLoading\" class=\"gcc__loading\">\n          <span class=\"gcc__spinner-icon fa fa-circle-o-notch fa-spin\"></span>\n          Chargement des colonnes\u2026\n        </div>\n\n        <div *ngIf=\"!isLoading\" class=\"gcc__panels\">\n\n          <!-- \u2500\u2500 Panel 2: Group selector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          <div class=\"gcc__groups\">\n            <div class=\"gcc__panel-hd\">\n              <span class=\"gcc__panel-label\">Sections</span>\n            </div>\n            <ul class=\"gcc__group-list\">\n              <li class=\"gcc__group-item\"\n                  [class.gcc__group-item--active]=\"selectedGroup === null\"\n                  (click)=\"selectGroup(null)\">\n                <span class=\"gcc__group-item__name\">Toutes les colonnes</span>\n                <span class=\"gcc__badge\">{{ allItems.length }}</span>\n              </li>\n              <li *ngFor=\"let group of groups\"\n                  class=\"gcc__group-item\"\n                  [class.gcc__group-item--active]=\"selectedGroup?.id === group.id\"\n                  [class.gcc__group-item--standard]=\"group.id === 'standard'\"\n                  [class.gcc__group-item--custom]=\"group.isCustom\"\n                  (click)=\"selectGroup(group)\">\n                <span class=\"gcc__group-item__name\">{{ group.label }}</span>\n                <div class=\"gcc__group-meta\">\n                  <span *ngIf=\"getGroupSelectedCount(group) > 0\" class=\"gcc__badge gcc__badge--primary\">{{ getGroupSelectedCount(group) }}</span>\n                  <span class=\"gcc__badge\">{{ getGroupCount(group) }}</span>\n                </div>\n              </li>\n            </ul>\n          </div>\n\n          <!-- \u2500\u2500 Panel 3: Catalog browse \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          <div class=\"gcc__browse\">\n            <div class=\"gcc__panel-hd\">\n              <span class=\"gcc__panel-label\">\n                {{ selectedGroup == null ? 'Toutes' : selectedGroup.label }}\n              </span>\n              <input class=\"gcc__search\" type=\"text\" placeholder=\"Rechercher\u2026\"\n                     [(ngModel)]=\"searchText\" (ngModelChange)=\"onSearch()\">\n            </div>\n\n            <div class=\"gcc__table-wrap\">\n              <table class=\"gcc__browse-table\">\n                <thead>\n                  <tr>\n                    <th class=\"gcc__col-check\">\n                      <input type=\"checkbox\"\n                             [checked]=\"allVisibleSelected\"\n                             [indeterminate]=\"someVisibleSelected\"\n                             (change)=\"toggleAll()\"\n                             title=\"Tout s\u00E9lectionner / d\u00E9s\u00E9lectionner\">\n                    </th>\n                    <th class=\"gcc__col-key\">Cl\u00E9</th>\n                    <th>Colonne</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let item of filteredItems\"\n                      class=\"gcc__browse-row\"\n                      [class.gcc__browse-row--selected]=\"isSelected(item)\"\n                      [class.gcc__browse-row--custom]=\"item.ColumnSourceType === 2\"\n                      (click)=\"toggleItem(item)\">\n                    <td class=\"gcc__col-check\" (click)=\"$event.stopPropagation()\">\n                      <input type=\"checkbox\" [checked]=\"isSelected(item)\" (change)=\"toggleItem(item)\">\n                    </td>\n                    <td class=\"gcc__col-key\">{{ item.ColumnKey }}</td>\n                    <td class=\"gcc__col-name\">{{ item.Label ?? item.ColumnKey }}</td>\n                  </tr>\n                  <tr *ngIf=\"filteredItems.length === 0\">\n                    <td colspan=\"3\" class=\"gcc__browse-empty\">Aucune colonne trouv\u00E9e</td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n          </div>\n\n          <!-- \u2500\u2500 Panel 4: Ordered selection with admin flags \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n          <div class=\"gcc__selection\">\n            <div class=\"gcc__panel-hd\">\n              <span class=\"gcc__panel-label\">Colonnes s\u00E9lectionn\u00E9es</span>\n              <span *ngIf=\"selectedCount > 0\" class=\"gcc__badge gcc__badge--primary\">{{ selectedCount }}</span>\n            </div>\n\n            <div *ngIf=\"orderedSelection.length > 0\" class=\"gcc__sel-legend\">\n              <span class=\"gcc__sel-legend__drag\"></span>\n              <span class=\"gcc__sel-legend__pos\">#</span>\n              <span class=\"gcc__sel-legend__code\">Cl\u00E9</span>\n              <span class=\"gcc__sel-legend__label\">\u00C9tiquette</span>\n              <ng-container *ngIf=\"isPerimeter\">\n                <span class=\"gcc__sel-legend__flag\">Aut.</span>\n              </ng-container>\n              <span class=\"gcc__sel-legend__flag\">Ver.</span>\n              <span class=\"gcc__sel-legend__remove\"></span>\n            </div>\n\n            <div *ngIf=\"orderedSelection.length === 0\" class=\"gcc__sel-empty\">\n              <span class=\"fa fa-columns gcc__sel-empty__icon\"></span>\n              <p>Cochez des colonnes \u00E0 gauche</p>\n            </div>\n\n            <div *ngIf=\"orderedSelection.length > 0\"\n                 class=\"gcc__sel-list\"\n                 cdkDropList\n                 [cdkDropListData]=\"orderedSelection\"\n                 (cdkDropListDropped)=\"onDrop($event)\">\n\n              <div *ngFor=\"let item of orderedSelection; let i = index\"\n                   class=\"gcc__sel-item\"\n                   cdkDrag\n                   [cdkDragData]=\"item\">\n\n                <div class=\"gcc__sel-item__placeholder\" *cdkDragPlaceholder></div>\n\n                <span class=\"gcc__sel-item__drag\" cdkDragHandle>\n                  <i class=\"fa fa-bars\"></i>\n                </span>\n\n                <span class=\"gcc__sel-item__pos\">{{ i + 1 }}</span>\n\n                <span class=\"gcc__sel-item__code\"\n                      [class.gcc__sel-item__code--cf]=\"item.ColumnSourceType === 2\"\n                      [title]=\"item.ColumnKey\">\n                  {{ item.ColumnKey }}\n                </span>\n\n                <input class=\"gcc__sel-item__label\" type=\"text\"\n                       [placeholder]=\"getCatalogLabel(item)\"\n                       [(ngModel)]=\"item.Label\"\n                       (click)=\"$event.stopPropagation()\"\n                       title=\"\u00C9tiquette personnalis\u00E9e\">\n\n                <!-- Perimeter scope: allowed flag -->\n                <ng-container *ngIf=\"isPerimeter\">\n                  <label class=\"gcc__flag\" (click)=\"$event.stopPropagation()\">\n                    <input type=\"checkbox\" [(ngModel)]=\"item.IsAllowed\" title=\"Autoris\u00E9\">\n                  </label>\n                </ng-container>\n\n                <!-- Always: locked flag -->\n                <label class=\"gcc__flag\" (click)=\"$event.stopPropagation()\">\n                  <input type=\"checkbox\" [(ngModel)]=\"item.IsLocked\" title=\"Verrouill\u00E9\">\n                </label>\n\n                <button class=\"gcc__sel-item__remove\" type=\"button\"\n                        (click)=\"removeFromSelection(item); $event.stopPropagation()\"\n                        title=\"Retirer\">&#x2715;</button>\n              </div>\n\n            </div>\n\n            <!-- Footer / save -->\n            <div class=\"gcc__sel-footer\">\n              <span class=\"gcc__sel-footer__info\">\n                <ng-container *ngIf=\"selectedCount > 0\">\n                  {{ selectedCount }} colonne(s) \u2014 glissez pour r\u00E9ordonner\n                </ng-container>\n              </span>\n              <button class=\"btn btn-primary btn-sm\" type=\"button\" (click)=\"save()\" [disabled]=\"!canSave\">\n                <i class=\"fa\"\n                   [class.fa-save]=\"!isSaving\"\n                   [class.fa-circle-o-notch]=\"isSaving\"\n                   [class.fa-spin]=\"isSaving\"></i>\n                &nbsp;Enregistrer\n              </button>\n            </div>\n          </div>\n\n        </div><!-- /.gcc__panels -->\n      </div><!-- /.gcc__editor -->\n\n    </ng-container>\n\n    <ng-template #noProfileTpl>\n      <div class=\"gcc__hint\">\n        <i class=\"fa fa-arrow-left\"></i>&nbsp;S\u00E9lectionnez ou cr\u00E9ez un profil\n      </div>\n    </ng-template>\n\n  </div><!-- /.gcc__body -->\n</div>\n", styles: [".gcc{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:1rem;box-sizing:border-box;gap:.75rem}.gcc__toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem;flex-shrink:0}.gcc__field{display:flex;flex-direction:column;gap:.25rem}.gcc__field label{font-size:.75rem;font-weight:600;color:#6c757d}.gcc__field input,.gcc__field select{min-width:9rem;padding:.35rem .5rem;border:1px solid #ced4da;border-radius:.25rem;font-size:.85rem}.gcc__message{padding:.5rem .75rem;background:#eef3f8;border-left:3px solid #4465C9;border-radius:.25rem;font-size:.85rem;flex-shrink:0}.gcc__body{flex:1;display:flex;gap:0;overflow:hidden;min-height:0;border:1px solid #e9ecef;border-radius:.25rem;background:#fff}.gcc__panel-hd{display:flex;align-items:center;justify-content:space-between;padding:.4rem .75rem;background:#f8f9fa;border-bottom:1px solid #e9ecef;flex-shrink:0}.gcc__panel-title{font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:6px}.gcc__panel-label{font-size:.75rem;font-weight:600;color:#495057}.gcc__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:16px;padding:0 5px;background:#4465c91f;color:#4465c9;border-radius:20px;font-size:10px;font-weight:700}.gcc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 5px;background:#4465c91a;color:#4465c9;border-radius:20px;font-size:10px;font-weight:700}.gcc__badge--primary{background:#4465c9;color:#fff}.gcc__muted{color:#6c757d;font-size:.8rem}.gcc__fw-normal{font-weight:400}.gcc__configs{display:flex;flex-direction:column;flex:0 0 220px;border-right:1px solid #e9ecef;overflow:hidden}.gcc__list-scroll{flex:1;overflow:auto}.gcc__table{width:100%;border-collapse:collapse}.gcc__table th,.gcc__table td{padding:.35rem .6rem;border-bottom:1px solid #e9ecef;text-align:left;font-size:.78rem}.gcc__table th{font-weight:600;color:#495057;background:#f8f9fa;position:sticky;top:0;z-index:1}.gcc__config-row{cursor:pointer;transition:background .1s}.gcc__config-row:hover{background:#4465c90a}.gcc__config-row--selected{background:#4465c914;border-left:3px solid #4465C9}.gcc__config-row--selected td:first-child{padding-left:calc(.6rem - 3px)}.gcc__key{font-family:monospace;font-weight:600;color:#4465c9;font-size:.78rem}.gcc__scope-badge{display:inline-block;padding:1px 5px;border-radius:20px;background:#4465c91a;color:#4465c9;font-size:9px;font-weight:700;text-transform:uppercase}.gcc__actions-cell{text-align:right;width:28px}.gcc__del-btn{background:none;border:none;color:#adb5bd;cursor:pointer;padding:2px 4px;border-radius:3px;font-size:.72rem;transition:color .1s}.gcc__del-btn:hover{color:#dc3545}.gcc__spinner{display:flex;align-items:center;gap:8px;padding:1rem .75rem;color:#6c757d;font-size:.8rem}.gcc__empty{padding:1.25rem .75rem;color:#6c757d;font-style:italic;font-size:.8rem}.gcc__editor{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.gcc__editor-hd{display:flex;align-items:center;padding:.4rem .75rem;background:#f8f9fa;border-bottom:1px solid #e9ecef;flex-shrink:0}.gcc__loading{display:flex;align-items:center;gap:8px;padding:1.5rem 1rem;color:#6c757d;font-size:.85rem;flex-shrink:0}.gcc__spinner-icon{font-size:1rem}.gcc__panels{flex:1;display:flex;overflow:hidden;min-height:0}.gcc__groups{display:flex;flex-direction:column;flex:0 0 160px;border-right:1px solid #e9ecef;overflow:hidden}.gcc__group-list{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto}.gcc__group-item{display:flex;align-items:center;justify-content:space-between;padding:.4rem .6rem;cursor:pointer;font-size:.78rem;border-bottom:1px solid #e9ecef;transition:background .1s}.gcc__group-item:hover{background:#4465c90a}.gcc__group-item--active{background:#4465c914;font-weight:600;color:#4465c9}.gcc__group-item--standard .gcc__group-item__name{color:#4465c9}.gcc__group-item--custom .gcc__group-item__name{color:#6b7fd4}.gcc__group-item__name{flex:1}.gcc__group-meta{display:flex;align-items:center;gap:3px}.gcc__browse{display:flex;flex-direction:column;flex:1;border-right:1px solid #e9ecef;overflow:hidden;min-width:0}.gcc__search{height:26px;padding:0 .5rem;border:1px solid #ced4da;border-radius:.2rem;font-size:.78rem;width:140px}.gcc__table-wrap{flex:1;overflow:auto}.gcc__table-wrap::-webkit-scrollbar{width:5px}.gcc__table-wrap::-webkit-scrollbar-track{background:transparent}.gcc__table-wrap::-webkit-scrollbar-thumb{background:#e9ecef;border-radius:3px}.gcc__browse-table{width:100%;border-collapse:collapse}.gcc__browse-table th,.gcc__browse-table td{padding:.3rem .5rem;border-bottom:1px solid #e9ecef;text-align:left;font-size:.78rem}.gcc__browse-table th{font-weight:600;color:#495057;background:#f8f9fa;position:sticky;top:0;z-index:1}.gcc__browse-row{cursor:pointer;transition:background .1s}.gcc__browse-row:hover{background:#4465c90a}.gcc__browse-row--selected{background:#4465c914}.gcc__browse-row--custom .gcc__col-key{color:#6b7fd4}.gcc__col-check{width:28px;text-align:center}.gcc__col-key{font-family:monospace;font-size:11px;font-weight:600;color:#4465c9;width:130px}.gcc__browse-empty{padding:1rem .75rem;color:#6c757d;font-style:italic;font-size:.78rem}.gcc__selection{display:flex;flex-direction:column;flex:0 0 380px;overflow:hidden}.gcc__sel-legend{display:flex;align-items:center;padding:3px .5rem;background:#f8f9fa;border-bottom:1px solid #e9ecef;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6c757d;flex-shrink:0;gap:0}.gcc__sel-legend__drag{width:20px;flex-shrink:0}.gcc__sel-legend__pos{width:22px;flex-shrink:0;text-align:center}.gcc__sel-legend__code{width:80px;flex-shrink:0;padding-left:2px}.gcc__sel-legend__label{flex:1;min-width:0}.gcc__sel-legend__flag{width:36px;text-align:center;flex-shrink:0}.gcc__sel-legend__width{width:50px;flex-shrink:0;padding-left:2px}.gcc__sel-legend__remove{width:22px;flex-shrink:0}.gcc__sel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:#6c757d;gap:.5rem;font-size:.8rem}.gcc__sel-empty__icon{font-size:2rem;opacity:.3}.gcc__sel-empty p{margin:0}.gcc__sel-list{flex:1;overflow-y:auto}.gcc__sel-list::-webkit-scrollbar{width:4px}.gcc__sel-list::-webkit-scrollbar-track{background:transparent}.gcc__sel-list::-webkit-scrollbar-thumb{background:#e9ecef;border-radius:3px}.gcc__sel-item{display:flex;align-items:center;padding:4px .5rem;border-bottom:1px solid #e9ecef;background:#fff;-webkit-user-select:none;user-select:none;gap:0;transition:background .1s}.gcc__sel-item:hover{background:#4465c908}.gcc__sel-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.gcc__sel-item__placeholder{height:32px;background:#4465c90f;border:1px dashed #4465C9;border-radius:2px;flex:1}.gcc__sel-item__drag{width:20px;flex-shrink:0;color:#ced4da;cursor:grab;font-size:11px;display:flex;align-items:center;justify-content:center}.gcc__sel-item__drag:hover{color:#4465c9}.gcc__sel-item__drag:active{cursor:grabbing}.gcc__sel-item__pos{width:22px;flex-shrink:0;font-size:9px;color:#6c757d;text-align:center}.gcc__sel-item__code{width:80px;flex-shrink:0;font-family:monospace;font-size:10px;font-weight:600;color:#4465c9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px}.gcc__sel-item__code--cf{color:#6b7fd4}.gcc__sel-item__label{flex:1;min-width:0;height:22px;padding:0 4px;border:1px solid transparent;border-radius:3px;font-size:11px;color:#343a40;background:transparent;outline:none;transition:border-color .1s,background .1s}.gcc__sel-item__label::placeholder{color:#6c757d;font-style:italic}.gcc__sel-item__label:hover{border-color:#d1d8de;background:#f8f9fa}.gcc__sel-item__label:focus{border-color:#4465c9;background:#fff}.gcc__sel-item__remove{width:22px;flex-shrink:0;background:none;border:none;color:#adb5bd;cursor:pointer;font-size:11px;padding:0;text-align:center;transition:color .1s}.gcc__sel-item__remove:hover{color:#dc3545}.gcc__sel-list.cdk-drop-list-dragging .gcc__sel-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.gcc__flag{width:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0}.gcc__flag input[type=checkbox]{cursor:pointer}.gcc__item-width{width:46px;flex-shrink:0;padding:1px 3px;border:1px solid #ced4da;border-radius:3px;font-size:10px;text-align:right}.gcc__sel-footer{display:flex;align-items:center;justify-content:space-between;padding:.4rem .75rem;background:#f8f9fa;border-top:1px solid #e9ecef;flex-shrink:0}.gcc__sel-footer__info{font-size:.75rem;color:#6c757d;font-style:italic}.gcc__hint{display:flex;align-items:center;justify-content:center;flex:1;color:#6c757d;font-style:italic;font-size:.85rem}\n"] }]
+            args: [{ selector: 'alg-pp-column', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"gcc\">\r\n\r\n  <!-- \u2500\u2500 SCOPE SECTION TABS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"gcc__sections\">\r\n    <button *ngFor=\"let sec of scopeSections\"\r\n            class=\"gcc__section-tab\"\r\n            [class.gcc__section-tab--active]=\"activeSection === sec.scope\"\r\n            type=\"button\"\r\n            (click)=\"setSection(sec.scope)\">\r\n      <i class=\"fa\" [ngClass]=\"'fa-' + sec.icon\"></i>&nbsp;{{ sec.label }}\r\n    </button>\r\n  </div>\r\n\r\n  <!-- \u2500\u2500 FILTER TOOLBAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"gcc__toolbar\">\r\n    <div class=\"gcc__field\">\r\n      <label>Finalit\u00E9</label>\r\n      <select [(ngModel)]=\"filterPurpose\" (ngModelChange)=\"search()\">\r\n        <option *ngFor=\"let p of purposeOptions\" [ngValue]=\"p.value\">{{ p.label }}</option>\r\n      </select>\r\n    </div>\r\n    <div class=\"gcc__field\">\r\n      <label>Cl\u00E9 de grille</label>\r\n      <input type=\"text\" [(ngModel)]=\"filterKey\" placeholder=\"ex. PDTV\" (keydown.enter)=\"search()\" />\r\n    </div>\r\n    <div class=\"gcc__field\" *ngIf=\"filterIsPerimeter\">\r\n      <label>{{ scopeIdLabel }}</label>\r\n      <input type=\"number\" [(ngModel)]=\"filterScopeId\" (keydown.enter)=\"search()\" />\r\n    </div>\r\n    <button class=\"btn btn-secondary\" (click)=\"search()\" [disabled]=\"isLoadingList\">\r\n      <i class=\"fa fa-search\"></i>&nbsp;Rechercher\r\n    </button>\r\n  </div>\r\n\r\n  <div *ngIf=\"message\" class=\"gcc__message\">{{ message }}</div>\r\n\r\n  <!-- \u2500\u2500 4-PANEL BODY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"gcc__body\">\r\n\r\n    <!-- \u2500\u2500 Panel 1: Profile list (left sidebar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"gcc__configs\">\r\n      <div class=\"gcc__panel-hd\">\r\n        <span class=\"gcc__panel-title\">\r\n          Profils&nbsp;<span class=\"gcc__count\">{{ profiles.length }}</span>\r\n        </span>\r\n        <button class=\"btn btn-sm btn-primary\" (click)=\"newProfile()\" title=\"Nouveau profil\">\r\n          <i class=\"fa fa-plus\"></i>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"gcc__list-scroll\">\r\n        <div *ngIf=\"isLoadingList\" class=\"gcc__spinner\">\r\n          <i class=\"fa fa-circle-o-notch fa-spin\"></i>&nbsp;Chargement\u2026\r\n        </div>\r\n        <p *ngIf=\"!isLoadingList && profiles.length === 0\" class=\"gcc__empty\">\r\n          Aucun profil trouv\u00E9.\r\n        </p>\r\n        <table *ngIf=\"!isLoadingList && profiles.length > 0\" class=\"gcc__table\">\r\n          <thead>\r\n            <tr>\r\n              <th>Cl\u00E9</th>\r\n              <th>Finalit\u00E9</th>\r\n              <th *ngIf=\"filterIsPerimeter\">P\u00E9rim\u00E8tre</th>\r\n              <th></th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let p of profiles\"\r\n                class=\"gcc__config-row\"\r\n                [class.gcc__config-row--selected]=\"activeProfile?.Id === p.Id\"\r\n                (click)=\"selectProfile(p)\">\r\n              <td class=\"gcc__key\">{{ p.MetaEntityKey }}</td>\r\n              <td class=\"gcc__muted\">{{ getPurposeLabel(p.PresentationProfilePurpose) }}</td>\r\n              <td *ngIf=\"filterIsPerimeter\" class=\"gcc__muted\">#{{ p.ScopeId }}</td>\r\n              <td class=\"gcc__actions-cell\">\r\n                <button class=\"gcc__del-btn\" (click)=\"deleteProfile(p, $event)\" title=\"Supprimer\">\r\n                  <i class=\"fa fa-trash\"></i>\r\n                </button>\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- \u2500\u2500 Panels 2/3/4: only when a profile is active \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <ng-container *ngIf=\"activeProfile; else noProfileTpl\">\r\n\r\n      <div class=\"gcc__editor\">\r\n\r\n        <div class=\"gcc__editor-hd\">\r\n          <span class=\"gcc__panel-title\">\r\n            {{ activeProfile.MetaEntityKey }}\r\n            <span class=\"gcc__muted gcc__fw-normal\">\u00B7 {{ getPurposeLabel(activeProfile.PresentationProfilePurpose) }}</span>\r\n            <span *ngIf=\"activeProfile.ScopeId != null\" class=\"gcc__muted gcc__fw-normal\">&nbsp;#{{ activeProfile.ScopeId }}</span>\r\n            <span *ngIf=\"selectedCount > 0\" class=\"gcc__badge gcc__badge--primary\">{{ selectedCount }}</span>\r\n          </span>\r\n        </div>\r\n\r\n        <div *ngIf=\"isLoading\" class=\"gcc__loading\">\r\n          <span class=\"gcc__spinner-icon fa fa-circle-o-notch fa-spin\"></span>\r\n          Chargement des colonnes\u2026\r\n        </div>\r\n\r\n        <div *ngIf=\"!isLoading\" class=\"gcc__panels\">\r\n\r\n          <!-- \u2500\u2500 Panel 2: Group selector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n          <div class=\"gcc__groups\">\r\n            <div class=\"gcc__panel-hd\">\r\n              <span class=\"gcc__panel-label\">Sections</span>\r\n            </div>\r\n            <ul class=\"gcc__group-list\">\r\n              <li class=\"gcc__group-item\"\r\n                  [class.gcc__group-item--active]=\"selectedGroup === null\"\r\n                  (click)=\"selectGroup(null)\">\r\n                <span class=\"gcc__group-item__name\">Toutes les colonnes</span>\r\n                <span class=\"gcc__badge\">{{ allItems.length }}</span>\r\n              </li>\r\n              <li *ngFor=\"let group of groups\"\r\n                  class=\"gcc__group-item\"\r\n                  [class.gcc__group-item--active]=\"selectedGroup?.id === group.id\"\r\n                  [class.gcc__group-item--standard]=\"group.id === 'standard'\"\r\n                  [class.gcc__group-item--custom]=\"group.isCustom\"\r\n                  (click)=\"selectGroup(group)\">\r\n                <span class=\"gcc__group-item__name\">{{ group.label }}</span>\r\n                <div class=\"gcc__group-meta\">\r\n                  <span *ngIf=\"getGroupSelectedCount(group) > 0\" class=\"gcc__badge gcc__badge--primary\">{{ getGroupSelectedCount(group) }}</span>\r\n                  <span class=\"gcc__badge\">{{ getGroupCount(group) }}</span>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n\r\n          <!-- \u2500\u2500 Panel 3: Catalog browse \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n          <div class=\"gcc__browse\">\r\n            <div class=\"gcc__panel-hd\">\r\n              <span class=\"gcc__panel-label\">\r\n                {{ selectedGroup == null ? 'Toutes' : selectedGroup.label }}\r\n              </span>\r\n              <input class=\"gcc__search\" type=\"text\" placeholder=\"Rechercher\u2026\"\r\n                     [(ngModel)]=\"searchText\" (ngModelChange)=\"onSearch()\">\r\n            </div>\r\n\r\n            <div class=\"gcc__table-wrap\">\r\n              <table class=\"gcc__browse-table\">\r\n                <thead>\r\n                  <tr>\r\n                    <th class=\"gcc__col-check\">\r\n                      <input type=\"checkbox\"\r\n                             [checked]=\"allVisibleSelected\"\r\n                             [indeterminate]=\"someVisibleSelected\"\r\n                             (change)=\"toggleAll()\"\r\n                             title=\"Tout s\u00E9lectionner / d\u00E9s\u00E9lectionner\">\r\n                    </th>\r\n                    <th class=\"gcc__col-key\">Cl\u00E9</th>\r\n                    <th>Colonne</th>\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  <tr *ngFor=\"let item of filteredItems\"\r\n                      class=\"gcc__browse-row\"\r\n                      [class.gcc__browse-row--selected]=\"isSelected(item)\"\r\n                      [class.gcc__browse-row--custom]=\"item.ColumnSourceType === 2\"\r\n                      (click)=\"toggleItem(item)\">\r\n                    <td class=\"gcc__col-check\" (click)=\"$event.stopPropagation()\">\r\n                      <input type=\"checkbox\" [checked]=\"isSelected(item)\" (change)=\"toggleItem(item)\">\r\n                    </td>\r\n                    <td class=\"gcc__col-key\">{{ item.ColumnKey }}</td>\r\n                    <td class=\"gcc__col-name\">{{ item.Label ?? item.ColumnKey }}</td>\r\n                  </tr>\r\n                  <tr *ngIf=\"filteredItems.length === 0\">\r\n                    <td colspan=\"3\" class=\"gcc__browse-empty\">Aucune colonne trouv\u00E9e</td>\r\n                  </tr>\r\n                </tbody>\r\n              </table>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- \u2500\u2500 Panel 4: Ordered selection with admin flags \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n          <div class=\"gcc__selection\">\r\n            <div class=\"gcc__panel-hd\">\r\n              <span class=\"gcc__panel-label\">Colonnes s\u00E9lectionn\u00E9es</span>\r\n              <span *ngIf=\"selectedCount > 0\" class=\"gcc__badge gcc__badge--primary\">{{ selectedCount }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"orderedSelection.length > 0\" class=\"gcc__sel-legend\">\r\n              <span class=\"gcc__sel-legend__drag\"></span>\r\n              <span class=\"gcc__sel-legend__pos\">#</span>\r\n              <span class=\"gcc__sel-legend__code\">Cl\u00E9</span>\r\n              <span class=\"gcc__sel-legend__label\">\u00C9tiquette</span>\r\n              <ng-container *ngIf=\"isPerimeter\">\r\n                <span class=\"gcc__sel-legend__flag\">Aut.</span>\r\n              </ng-container>\r\n              <span class=\"gcc__sel-legend__flag\">Ver.</span>\r\n              <span class=\"gcc__sel-legend__remove\"></span>\r\n            </div>\r\n\r\n            <div *ngIf=\"orderedSelection.length === 0\" class=\"gcc__sel-empty\">\r\n              <span class=\"fa fa-columns gcc__sel-empty__icon\"></span>\r\n              <p>Cochez des colonnes \u00E0 gauche</p>\r\n            </div>\r\n\r\n            <div *ngIf=\"orderedSelection.length > 0\"\r\n                 class=\"gcc__sel-list\"\r\n                 cdkDropList\r\n                 [cdkDropListData]=\"orderedSelection\"\r\n                 (cdkDropListDropped)=\"onDrop($event)\">\r\n\r\n              <div *ngFor=\"let item of orderedSelection; let i = index\"\r\n                   class=\"gcc__sel-item\"\r\n                   cdkDrag\r\n                   [cdkDragData]=\"item\">\r\n\r\n                <div class=\"gcc__sel-item__placeholder\" *cdkDragPlaceholder></div>\r\n\r\n                <span class=\"gcc__sel-item__drag\" cdkDragHandle>\r\n                  <i class=\"fa fa-bars\"></i>\r\n                </span>\r\n\r\n                <span class=\"gcc__sel-item__pos\">{{ i + 1 }}</span>\r\n\r\n                <span class=\"gcc__sel-item__code\"\r\n                      [class.gcc__sel-item__code--cf]=\"item.ColumnSourceType === 2\"\r\n                      [title]=\"item.ColumnKey\">\r\n                  {{ item.ColumnKey }}\r\n                </span>\r\n\r\n                <input class=\"gcc__sel-item__label\" type=\"text\"\r\n                       [placeholder]=\"getCatalogLabel(item)\"\r\n                       [(ngModel)]=\"item.Label\"\r\n                       (click)=\"$event.stopPropagation()\"\r\n                       title=\"\u00C9tiquette personnalis\u00E9e\">\r\n\r\n                <!-- Perimeter scope: allowed flag -->\r\n                <ng-container *ngIf=\"isPerimeter\">\r\n                  <label class=\"gcc__flag\" (click)=\"$event.stopPropagation()\">\r\n                    <input type=\"checkbox\" [(ngModel)]=\"item.IsAllowed\" title=\"Autoris\u00E9\">\r\n                  </label>\r\n                </ng-container>\r\n\r\n                <!-- Always: locked flag -->\r\n                <label class=\"gcc__flag\" (click)=\"$event.stopPropagation()\">\r\n                  <input type=\"checkbox\" [(ngModel)]=\"item.IsLocked\" title=\"Verrouill\u00E9\">\r\n                </label>\r\n\r\n                <button class=\"gcc__sel-item__remove\" type=\"button\"\r\n                        (click)=\"removeFromSelection(item); $event.stopPropagation()\"\r\n                        title=\"Retirer\">&#x2715;</button>\r\n              </div>\r\n\r\n            </div>\r\n\r\n            <!-- Footer / save -->\r\n            <div class=\"gcc__sel-footer\">\r\n              <span class=\"gcc__sel-footer__info\">\r\n                <ng-container *ngIf=\"selectedCount > 0\">\r\n                  {{ selectedCount }} colonne(s) \u2014 glissez pour r\u00E9ordonner\r\n                </ng-container>\r\n              </span>\r\n              <button class=\"btn btn-primary btn-sm\" type=\"button\" (click)=\"save()\" [disabled]=\"!canSave\">\r\n                <i class=\"fa\"\r\n                   [class.fa-save]=\"!isSaving\"\r\n                   [class.fa-circle-o-notch]=\"isSaving\"\r\n                   [class.fa-spin]=\"isSaving\"></i>\r\n                &nbsp;Enregistrer\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n        </div><!-- /.gcc__panels -->\r\n      </div><!-- /.gcc__editor -->\r\n\r\n    </ng-container>\r\n\r\n    <ng-template #noProfileTpl>\r\n      <div class=\"gcc__hint\">\r\n        <i class=\"fa fa-arrow-left\"></i>&nbsp;S\u00E9lectionnez ou cr\u00E9ez un profil\r\n      </div>\r\n    </ng-template>\r\n\r\n  </div><!-- /.gcc__body -->\r\n</div>\r\n", styles: [".gcc{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:1rem;box-sizing:border-box;gap:.75rem}.gcc__toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem;flex-shrink:0}.gcc__field{display:flex;flex-direction:column;gap:.25rem}.gcc__field label{font-size:.75rem;font-weight:600;color:#6c757d}.gcc__field input,.gcc__field select{min-width:9rem;padding:.35rem .5rem;border:1px solid #ced4da;border-radius:.25rem;font-size:.85rem}.gcc__message{padding:.5rem .75rem;background:#eef3f8;border-left:3px solid #4465C9;border-radius:.25rem;font-size:.85rem;flex-shrink:0}.gcc__body{flex:1;display:flex;gap:0;overflow:hidden;min-height:0;border:1px solid #e9ecef;border-radius:.25rem;background:#fff}.gcc__panel-hd{display:flex;align-items:center;justify-content:space-between;padding:.4rem .75rem;background:#f8f9fa;border-bottom:1px solid #e9ecef;flex-shrink:0}.gcc__panel-title{font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:6px}.gcc__panel-label{font-size:.75rem;font-weight:600;color:#495057}.gcc__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:16px;padding:0 5px;background:#4465c91f;color:#4465c9;border-radius:20px;font-size:10px;font-weight:700}.gcc__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 5px;background:#4465c91a;color:#4465c9;border-radius:20px;font-size:10px;font-weight:700}.gcc__badge--primary{background:#4465c9;color:#fff}.gcc__muted{color:#6c757d;font-size:.8rem}.gcc__fw-normal{font-weight:400}.gcc__configs{display:flex;flex-direction:column;flex:0 0 220px;border-right:1px solid #e9ecef;overflow:hidden}.gcc__list-scroll{flex:1;overflow:auto}.gcc__table{width:100%;border-collapse:collapse}.gcc__table th,.gcc__table td{padding:.35rem .6rem;border-bottom:1px solid #e9ecef;text-align:left;font-size:.78rem}.gcc__table th{font-weight:600;color:#495057;background:#f8f9fa;position:sticky;top:0;z-index:1}.gcc__config-row{cursor:pointer;transition:background .1s}.gcc__config-row:hover{background:#4465c90a}.gcc__config-row--selected{background:#4465c914;border-left:3px solid #4465C9}.gcc__config-row--selected td:first-child{padding-left:calc(.6rem - 3px)}.gcc__key{font-family:monospace;font-weight:600;color:#4465c9;font-size:.78rem}.gcc__scope-badge{display:inline-block;padding:1px 5px;border-radius:20px;background:#4465c91a;color:#4465c9;font-size:9px;font-weight:700;text-transform:uppercase}.gcc__actions-cell{text-align:right;width:28px}.gcc__del-btn{background:none;border:none;color:#adb5bd;cursor:pointer;padding:2px 4px;border-radius:3px;font-size:.72rem;transition:color .1s}.gcc__del-btn:hover{color:#dc3545}.gcc__spinner{display:flex;align-items:center;gap:8px;padding:1rem .75rem;color:#6c757d;font-size:.8rem}.gcc__empty{padding:1.25rem .75rem;color:#6c757d;font-style:italic;font-size:.8rem}.gcc__editor{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.gcc__editor-hd{display:flex;align-items:center;padding:.4rem .75rem;background:#f8f9fa;border-bottom:1px solid #e9ecef;flex-shrink:0}.gcc__loading{display:flex;align-items:center;gap:8px;padding:1.5rem 1rem;color:#6c757d;font-size:.85rem;flex-shrink:0}.gcc__spinner-icon{font-size:1rem}.gcc__panels{flex:1;display:flex;overflow:hidden;min-height:0}.gcc__groups{display:flex;flex-direction:column;flex:0 0 160px;border-right:1px solid #e9ecef;overflow:hidden}.gcc__group-list{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto}.gcc__group-item{display:flex;align-items:center;justify-content:space-between;padding:.4rem .6rem;cursor:pointer;font-size:.78rem;border-bottom:1px solid #e9ecef;transition:background .1s}.gcc__group-item:hover{background:#4465c90a}.gcc__group-item--active{background:#4465c914;font-weight:600;color:#4465c9}.gcc__group-item--standard .gcc__group-item__name{color:#4465c9}.gcc__group-item--custom .gcc__group-item__name{color:#6b7fd4}.gcc__group-item__name{flex:1}.gcc__group-meta{display:flex;align-items:center;gap:3px}.gcc__browse{display:flex;flex-direction:column;flex:1;border-right:1px solid #e9ecef;overflow:hidden;min-width:0}.gcc__search{height:26px;padding:0 .5rem;border:1px solid #ced4da;border-radius:.2rem;font-size:.78rem;width:140px}.gcc__table-wrap{flex:1;overflow:auto}.gcc__table-wrap::-webkit-scrollbar{width:5px}.gcc__table-wrap::-webkit-scrollbar-track{background:transparent}.gcc__table-wrap::-webkit-scrollbar-thumb{background:#e9ecef;border-radius:3px}.gcc__browse-table{width:100%;border-collapse:collapse}.gcc__browse-table th,.gcc__browse-table td{padding:.3rem .5rem;border-bottom:1px solid #e9ecef;text-align:left;font-size:.78rem}.gcc__browse-table th{font-weight:600;color:#495057;background:#f8f9fa;position:sticky;top:0;z-index:1}.gcc__browse-row{cursor:pointer;transition:background .1s}.gcc__browse-row:hover{background:#4465c90a}.gcc__browse-row--selected{background:#4465c914}.gcc__browse-row--custom .gcc__col-key{color:#6b7fd4}.gcc__col-check{width:28px;text-align:center}.gcc__col-key{font-family:monospace;font-size:11px;font-weight:600;color:#4465c9;width:130px}.gcc__browse-empty{padding:1rem .75rem;color:#6c757d;font-style:italic;font-size:.78rem}.gcc__selection{display:flex;flex-direction:column;flex:0 0 380px;overflow:hidden}.gcc__sel-legend{display:flex;align-items:center;padding:3px .5rem;background:#f8f9fa;border-bottom:1px solid #e9ecef;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6c757d;flex-shrink:0;gap:0}.gcc__sel-legend__drag{width:20px;flex-shrink:0}.gcc__sel-legend__pos{width:22px;flex-shrink:0;text-align:center}.gcc__sel-legend__code{width:80px;flex-shrink:0;padding-left:2px}.gcc__sel-legend__label{flex:1;min-width:0}.gcc__sel-legend__flag{width:36px;text-align:center;flex-shrink:0}.gcc__sel-legend__width{width:50px;flex-shrink:0;padding-left:2px}.gcc__sel-legend__remove{width:22px;flex-shrink:0}.gcc__sel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:#6c757d;gap:.5rem;font-size:.8rem}.gcc__sel-empty__icon{font-size:2rem;opacity:.3}.gcc__sel-empty p{margin:0}.gcc__sel-list{flex:1;overflow-y:auto}.gcc__sel-list::-webkit-scrollbar{width:4px}.gcc__sel-list::-webkit-scrollbar-track{background:transparent}.gcc__sel-list::-webkit-scrollbar-thumb{background:#e9ecef;border-radius:3px}.gcc__sel-item{display:flex;align-items:center;padding:4px .5rem;border-bottom:1px solid #e9ecef;background:#fff;-webkit-user-select:none;user-select:none;gap:0;transition:background .1s}.gcc__sel-item:hover{background:#4465c908}.gcc__sel-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.gcc__sel-item__placeholder{height:32px;background:#4465c90f;border:1px dashed #4465C9;border-radius:2px;flex:1}.gcc__sel-item__drag{width:20px;flex-shrink:0;color:#ced4da;cursor:grab;font-size:11px;display:flex;align-items:center;justify-content:center}.gcc__sel-item__drag:hover{color:#4465c9}.gcc__sel-item__drag:active{cursor:grabbing}.gcc__sel-item__pos{width:22px;flex-shrink:0;font-size:9px;color:#6c757d;text-align:center}.gcc__sel-item__code{width:80px;flex-shrink:0;font-family:monospace;font-size:10px;font-weight:600;color:#4465c9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px}.gcc__sel-item__code--cf{color:#6b7fd4}.gcc__sel-item__label{flex:1;min-width:0;height:22px;padding:0 4px;border:1px solid transparent;border-radius:3px;font-size:11px;color:#343a40;background:transparent;outline:none;transition:border-color .1s,background .1s}.gcc__sel-item__label::placeholder{color:#6c757d;font-style:italic}.gcc__sel-item__label:hover{border-color:#d1d8de;background:#f8f9fa}.gcc__sel-item__label:focus{border-color:#4465c9;background:#fff}.gcc__sel-item__remove{width:22px;flex-shrink:0;background:none;border:none;color:#adb5bd;cursor:pointer;font-size:11px;padding:0;text-align:center;transition:color .1s}.gcc__sel-item__remove:hover{color:#dc3545}.gcc__sel-list.cdk-drop-list-dragging .gcc__sel-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.gcc__flag{width:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0}.gcc__flag input[type=checkbox]{cursor:pointer}.gcc__item-width{width:46px;flex-shrink:0;padding:1px 3px;border:1px solid #ced4da;border-radius:3px;font-size:10px;text-align:right}.gcc__sel-footer{display:flex;align-items:center;justify-content:space-between;padding:.4rem .75rem;background:#f8f9fa;border-top:1px solid #e9ecef;flex-shrink:0}.gcc__sel-footer__info{font-size:.75rem;color:#6c757d;font-style:italic}.gcc__hint{display:flex;align-items:center;justify-content:center;flex:1;color:#6c757d;font-style:italic;font-size:.85rem}\n"] }]
         }], ctorParameters: () => [{ type: i2.PresentationProfileDataService }, { type: i2.PresentationProfileItemDataService }] });
 
 class PresentationProfileItemsComponent {