@dflat-core/web 1.0.16 → 1.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +157 -157
  2. package/fesm2022/dflat-core-web-system-ux.mjs +2 -2
  3. package/fesm2022/dflat-core-web-system-ux.mjs.map +1 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,157 +1,157 @@
1
- # @dflat-core/web
2
-
3
- Librairies Angular de Dflat, empaquetées en un module npm unique (Angular Package Format, construit avec ng-packagr).
4
-
5
- ## Points d'entrée
6
-
7
- | Import | Contenu |
8
- | -------------------------- | ------------------------------------------------------------ |
9
- | `@dflat-core/web/core` | Utilitaires, `EnvironmentBase` |
10
- | `@dflat-core/web/core-model` | Modèle de base (interfaces générées depuis Dflat.Kernel.Model) |
11
- | `@dflat-core/web/core-services` | Authentification, messages, menus, hub SignalR... |
12
- | `@dflat-core/web/core-data` | `DataService`, `EntityDataService` |
13
- | `@dflat-core/web/core-ux` | Composants, directives et services d'interface |
14
- | `@dflat-core/web/system-model` | Modèle du module System (généré) |
15
- | `@dflat-core/web/system-data` | Services de données du module System (générés) |
16
- | `@dflat-core/web/system-root` | Permissions, clés d'entités et menus du module System |
17
- | `@dflat-core/web/system-ux` | Écrans du module System, et la coquille applicative |
18
-
19
- Ressources non TypeScript livrées dans le package :
20
-
21
- - `assets/` : styles partagés (`site.scss`, `variables.scss`, `text.scss`...), images et polices ;
22
- - `scss/` : styles globaux (`dflat-app.scss`, `core-ux.scss`, `layout/default/default-layout.scss`...).
23
-
24
- ## Coquille applicative
25
-
26
- `system-ux` fournit, en plus des écrans du module System, tout ce qui faisait auparavant
27
- l'ossature de l'application hôte (`system-ux/src/lib/app`) :
28
-
29
- | Symbole | Rôle |
30
- | --------------------------------------------------------- | ----------------------------------------------------------- |
31
- | `DflatAppModule` | Socle du module racine : modules Angular et tiers, intercepteur HTTP, permissions, menus, langue |
32
- | `DFlatLayoutComponent` | Mise en page : barre supérieure, menu latéral, contenu |
33
- | `HomepageComponent`, `SearchComponent`, `SearchResultComponent` | Accueil et recherche globale |
34
- | `UserMenuComponent`, `UserProfileComponent` | Menu et profil de l'utilisateur |
35
- | `AccessDeniedComponent`, `HistoryComponent`, `DFlatSpinnerComponent` | Écrans et composants utilitaires |
36
- | `DflatAppService` | Nom, logo et version de l'application (`EnvironmentBase`) |
37
- | `DFlatAuthInterceptor`, `DFlatPermissionService` | Implémentations par défaut, dérivables |
38
-
39
- Le module racine d'une application se réduit alors à :
40
-
41
- ```ts
42
- @NgModule({
43
- declarations: [AppComponent],
44
- imports: [DflatAppModule.forRoot(environment), routing],
45
- bootstrap: [AppComponent]
46
- })
47
- export class AppModule {}
48
- ```
49
-
50
- `environment` implémente `EnvironmentBase` : URL de l'API, du hub et des fichiers, et, en
51
- option, `appName`, `appLogoUrl` et `appVersion`, affichés par la mise en page et la page
52
- d'accueil. Pour remplacer un service du socle (menus, permissions, intercepteur), il suffit
53
- de le fournir après `DflatAppModule` dans les `providers` du module racine.
54
-
55
- La recherche globale n'interroge que les sources déclarées par l'application : une classe
56
- dérivée de `DflatSearchProvider` par famille d'objets, fournie en `multi` sous le jeton
57
- `DFLAT_SEARCH_PROVIDERS`.
58
-
59
- ## Construire
60
-
61
- ```bash
62
- yarn install
63
- yarn build # <dépôt>/artifacts/nodejs/dflat-web (compilation partielle, publiable)
64
- yarn watch # reconstruction continue pendant le développement
65
- yarn run pack # <dépôt>/artifacts/nodejs/dflat-web-<version>.tgz
66
- ```
67
-
68
- Depuis la racine du dépôt, `scripts/publish-dflat.ps1` enchaîne ces étapes :
69
-
70
- ```powershell
71
- .\scripts\publish-dflat.ps1 -bw # yarn install si besoin, build, vidage du cache Angular de webapps
72
- .\scripts\publish-dflat.ps1 -pn # package versionné + archive .tgz (version calculée depuis npmjs.com)
73
- .\scripts\publish-dflat.ps1 -pn -Push # ... puis publication sur npmjs.com, après confirmation
74
- ```
75
-
76
- `yarn install` applique `tools/patch-ng-packagr.js` : correctif d'un bug de ng-packagr 19.2 sur la réécriture
77
- des `url()` des partials Sass (voir le commentaire du script).
78
-
79
- ## Utiliser dans un espace de travail Angular / Nx
80
-
81
- 1. Dépendance, dans `package.json` : la version publiée sur npmjs.com
82
- (`"@dflat-core/web": "1.0.2"`), cas de toute application, dont celles créées par
83
- `dflat -newhost`.
84
-
85
- `webapps`, dans le dépôt, référence au contraire le dossier de sortie de ng-packagr, pour
86
- développer le package et l'application en même temps :
87
-
88
- ```json
89
- "@dflat-core/web": "link:../web/dflat-web/dist"
90
- ```
91
-
92
- `yarn install` en fait un lien symbolique (`node_modules/@dflat-core/web` → `web/dflat-web/dist`) :
93
- `dist` doit donc exister, produit une fois par `yarn build:dev` ou `yarn watch`. Pour
94
- travailler, deux consoles :
95
-
96
- ```bash
97
- yarn watch:dflat-web # depuis webapps : ng-packagr --watch sur web/dflat-web
98
- yarn start # depuis webapps : nx serve
99
- ```
100
-
101
- Toute modification d'un fichier du package (TypeScript, template, style) est recompilée par
102
- ng-packagr dans `dist`, et `nx serve` la reprend dans la foulée (quelques secondes), sans
103
- vider le cache ni relancer le serveur.
104
-
105
- L'application doit aussi installer les `peerDependencies` du package : les librairies
106
- Angular tierces qu'il utilise (`ngx-bootstrap`, `@swimlane/ngx-datatable`, `ngx-toastr`,
107
- `ng-http-loader`...) et les feuilles de style dont dépendent ses assets (`bootstrap`,
108
- `bootswatch`, `font-awesome`). Le modèle `dflat-webhost` les liste déjà dans le
109
- `package.json` du front qu'il génère.
110
-
111
- 2. Dans les options de build de l'application (`project.json`) :
112
-
113
- ```json
114
- "preserveSymlinks": true,
115
- "stylePreprocessorOptions": { "includePaths": ["node_modules", "node_modules/@dflat-core/web/assets"] },
116
- "assets": [{ "input": "node_modules/@dflat-core/web/assets", "glob": "*/**", "output": "assets" }]
117
- ```
118
-
119
- `preserveSymlinks` évite de résoudre Angular depuis `web/dflat-web/node_modules` (double instance).
120
- `node_modules` dans les `includePaths` permet à `dflat-app.scss` de résoudre Bootstrap et son thème.
121
-
122
- 3. Styles globaux (`styles.scss`) :
123
-
124
- ```scss
125
- @import "../../../node_modules/@dflat-core/web/scss/dflat-app.scss";
126
- ```
127
-
128
- `dflat-app.scss` enchaîne les variables, Bootstrap, le thème Bootswatch, `core-ux.scss`,
129
- `site.scss` et les règles de mise en page plein écran de la coquille. Pour un autre thème,
130
- ne l'importez pas : reprenez son contenu dans l'application en changeant la ligne
131
- `bootswatch`.
132
-
133
- Les feuilles de style tierces qui ne passent pas par Sass (toastr, ngx-datatable,
134
- bs-datepicker, font-awesome) restent dans le tableau `styles` des options de build.
135
-
136
- ## Règles propres à une librairie
137
-
138
- La compilation partielle d'Angular est plus stricte que celle d'une application :
139
-
140
- - **pas d'import par le barrel de sa propre librairie** (`@dflat-core/web/core-ux` depuis core-ux) : utiliser un
141
- chemin relatif. Entre librairies, toujours passer par `@dflat-core/web/<librairie>` ;
142
- - **toute classe déclarée par un NgModule doit être exportée** par le `src/index.ts` de sa librairie (NG3001) ;
143
- - **pas de cycle d'imports entre un composant et ce qu'utilise son template** (NG3003). Pour casser un cycle :
144
- `import type` lorsque le symbole ne sert qu'au typage, ou un `InjectionToken` lorsqu'un type de composant
145
- est nécessaire à l'exécution (voir `core-ux/src/lib/modals/dialog-component.tokens.ts`,
146
- `RowRefHost` dans `row-ref.directive.ts`) ;
147
- - **pas de cycle d'imports entre une classe et sa classe parente**, même indirect : chaque point d'entrée est
148
- aplati en un seul fichier et la classe fille pourrait y être émise avant la parente
149
- (`Cannot access 'X' before initialization` au démarrage de l'application). `tools/check-bundles.js`, lancé par
150
- `npm run build`, le détecte.
151
-
152
- ## Code généré
153
-
154
- `codegenerator -ts -webpkg <dépôt>\web\dflat-web` écrit les librairies Dflat (core-model, system-model,
155
- system-data) dans ce dossier et génère les imports en `@dflat-core/web/<librairie>`. Sans `-webpkg` (application hôte
156
- hors dépôt), ces librairies ne sont pas générées : elles sont fournies par le package. `dbmanager` écrit les
157
- permissions TypeScript du module System dans `system-root/src/lib`.
1
+ # @dflat-core/web
2
+
3
+ Librairies Angular de Dflat, empaquetées en un module npm unique (Angular Package Format, construit avec ng-packagr).
4
+
5
+ ## Points d'entrée
6
+
7
+ | Import | Contenu |
8
+ | -------------------------- | ------------------------------------------------------------ |
9
+ | `@dflat-core/web/core` | Utilitaires, `EnvironmentBase` |
10
+ | `@dflat-core/web/core-model` | Modèle de base (interfaces générées depuis Dflat.Kernel.Model) |
11
+ | `@dflat-core/web/core-services` | Authentification, messages, menus, hub SignalR... |
12
+ | `@dflat-core/web/core-data` | `DataService`, `EntityDataService` |
13
+ | `@dflat-core/web/core-ux` | Composants, directives et services d'interface |
14
+ | `@dflat-core/web/system-model` | Modèle du module System (généré) |
15
+ | `@dflat-core/web/system-data` | Services de données du module System (générés) |
16
+ | `@dflat-core/web/system-root` | Permissions, clés d'entités et menus du module System |
17
+ | `@dflat-core/web/system-ux` | Écrans du module System, et la coquille applicative |
18
+
19
+ Ressources non TypeScript livrées dans le package :
20
+
21
+ - `assets/` : styles partagés (`site.scss`, `variables.scss`, `text.scss`...), images et polices ;
22
+ - `scss/` : styles globaux (`dflat-app.scss`, `core-ux.scss`, `layout/default/default-layout.scss`...).
23
+
24
+ ## Coquille applicative
25
+
26
+ `system-ux` fournit, en plus des écrans du module System, tout ce qui faisait auparavant
27
+ l'ossature de l'application hôte (`system-ux/src/lib/app`) :
28
+
29
+ | Symbole | Rôle |
30
+ | --------------------------------------------------------- | ----------------------------------------------------------- |
31
+ | `DflatAppModule` | Socle du module racine : modules Angular et tiers, intercepteur HTTP, permissions, menus, langue |
32
+ | `DFlatLayoutComponent` | Mise en page : barre supérieure, menu latéral, contenu |
33
+ | `HomepageComponent`, `SearchComponent`, `SearchResultComponent` | Accueil et recherche globale |
34
+ | `UserMenuComponent`, `UserProfileComponent` | Menu et profil de l'utilisateur |
35
+ | `AccessDeniedComponent`, `HistoryComponent`, `DFlatSpinnerComponent` | Écrans et composants utilitaires |
36
+ | `DflatAppService` | Nom, logo et version de l'application (`EnvironmentBase`) |
37
+ | `DFlatAuthInterceptor`, `DFlatPermissionService` | Implémentations par défaut, dérivables |
38
+
39
+ Le module racine d'une application se réduit alors à :
40
+
41
+ ```ts
42
+ @NgModule({
43
+ declarations: [AppComponent],
44
+ imports: [DflatAppModule.forRoot(environment), routing],
45
+ bootstrap: [AppComponent]
46
+ })
47
+ export class AppModule {}
48
+ ```
49
+
50
+ `environment` implémente `EnvironmentBase` : URL de l'API, du hub et des fichiers, et, en
51
+ option, `appName`, `appLogoUrl` et `appVersion`, affichés par la mise en page et la page
52
+ d'accueil. Pour remplacer un service du socle (menus, permissions, intercepteur), il suffit
53
+ de le fournir après `DflatAppModule` dans les `providers` du module racine.
54
+
55
+ La recherche globale n'interroge que les sources déclarées par l'application : une classe
56
+ dérivée de `DflatSearchProvider` par famille d'objets, fournie en `multi` sous le jeton
57
+ `DFLAT_SEARCH_PROVIDERS`.
58
+
59
+ ## Construire
60
+
61
+ ```bash
62
+ yarn install
63
+ yarn build # <dépôt>/artifacts/nodejs/dflat-web (compilation partielle, publiable)
64
+ yarn watch # reconstruction continue pendant le développement
65
+ yarn run pack # <dépôt>/artifacts/nodejs/dflat-web-<version>.tgz
66
+ ```
67
+
68
+ Depuis la racine du dépôt, `scripts/publish-dflat.ps1` enchaîne ces étapes :
69
+
70
+ ```powershell
71
+ .\scripts\publish-dflat.ps1 -bw # yarn install si besoin, build, vidage du cache Angular de webapps
72
+ .\scripts\publish-dflat.ps1 -pn # package versionné + archive .tgz (version calculée depuis npmjs.com)
73
+ .\scripts\publish-dflat.ps1 -pn -Push # ... puis publication sur npmjs.com, après confirmation
74
+ ```
75
+
76
+ `yarn install` applique `tools/patch-ng-packagr.js` : correctif d'un bug de ng-packagr 19.2 sur la réécriture
77
+ des `url()` des partials Sass (voir le commentaire du script).
78
+
79
+ ## Utiliser dans un espace de travail Angular / Nx
80
+
81
+ 1. Dépendance, dans `package.json` : la version publiée sur npmjs.com
82
+ (`"@dflat-core/web": "1.0.2"`), cas de toute application, dont celles créées par
83
+ `dflat -newhost`.
84
+
85
+ `webapps`, dans le dépôt, référence au contraire le dossier de sortie de ng-packagr, pour
86
+ développer le package et l'application en même temps :
87
+
88
+ ```json
89
+ "@dflat-core/web": "link:../web/dflat-web/dist"
90
+ ```
91
+
92
+ `yarn install` en fait un lien symbolique (`node_modules/@dflat-core/web` → `web/dflat-web/dist`) :
93
+ `dist` doit donc exister, produit une fois par `yarn build:dev` ou `yarn watch`. Pour
94
+ travailler, deux consoles :
95
+
96
+ ```bash
97
+ yarn watch:dflat-web # depuis webapps : ng-packagr --watch sur web/dflat-web
98
+ yarn start # depuis webapps : nx serve
99
+ ```
100
+
101
+ Toute modification d'un fichier du package (TypeScript, template, style) est recompilée par
102
+ ng-packagr dans `dist`, et `nx serve` la reprend dans la foulée (quelques secondes), sans
103
+ vider le cache ni relancer le serveur.
104
+
105
+ L'application doit aussi installer les `peerDependencies` du package : les librairies
106
+ Angular tierces qu'il utilise (`ngx-bootstrap`, `@swimlane/ngx-datatable`, `ngx-toastr`,
107
+ `ng-http-loader`...) et les feuilles de style dont dépendent ses assets (`bootstrap`,
108
+ `bootswatch`, `font-awesome`). Le modèle `dflat-webhost` les liste déjà dans le
109
+ `package.json` du front qu'il génère.
110
+
111
+ 2. Dans les options de build de l'application (`project.json`) :
112
+
113
+ ```json
114
+ "preserveSymlinks": true,
115
+ "stylePreprocessorOptions": { "includePaths": ["node_modules", "node_modules/@dflat-core/web/assets"] },
116
+ "assets": [{ "input": "node_modules/@dflat-core/web/assets", "glob": "*/**", "output": "assets" }]
117
+ ```
118
+
119
+ `preserveSymlinks` évite de résoudre Angular depuis `web/dflat-web/node_modules` (double instance).
120
+ `node_modules` dans les `includePaths` permet à `dflat-app.scss` de résoudre Bootstrap et son thème.
121
+
122
+ 3. Styles globaux (`styles.scss`) :
123
+
124
+ ```scss
125
+ @import "../../../node_modules/@dflat-core/web/scss/dflat-app.scss";
126
+ ```
127
+
128
+ `dflat-app.scss` enchaîne les variables, Bootstrap, le thème Bootswatch, `core-ux.scss`,
129
+ `site.scss` et les règles de mise en page plein écran de la coquille. Pour un autre thème,
130
+ ne l'importez pas : reprenez son contenu dans l'application en changeant la ligne
131
+ `bootswatch`.
132
+
133
+ Les feuilles de style tierces qui ne passent pas par Sass (toastr, ngx-datatable,
134
+ bs-datepicker, font-awesome) restent dans le tableau `styles` des options de build.
135
+
136
+ ## Règles propres à une librairie
137
+
138
+ La compilation partielle d'Angular est plus stricte que celle d'une application :
139
+
140
+ - **pas d'import par le barrel de sa propre librairie** (`@dflat-core/web/core-ux` depuis core-ux) : utiliser un
141
+ chemin relatif. Entre librairies, toujours passer par `@dflat-core/web/<librairie>` ;
142
+ - **toute classe déclarée par un NgModule doit être exportée** par le `src/index.ts` de sa librairie (NG3001) ;
143
+ - **pas de cycle d'imports entre un composant et ce qu'utilise son template** (NG3003). Pour casser un cycle :
144
+ `import type` lorsque le symbole ne sert qu'au typage, ou un `InjectionToken` lorsqu'un type de composant
145
+ est nécessaire à l'exécution (voir `core-ux/src/lib/modals/dialog-component.tokens.ts`,
146
+ `RowRefHost` dans `row-ref.directive.ts`) ;
147
+ - **pas de cycle d'imports entre une classe et sa classe parente**, même indirect : chaque point d'entrée est
148
+ aplati en un seul fichier et la classe fille pourrait y être émise avant la parente
149
+ (`Cannot access 'X' before initialization` au démarrage de l'application). `tools/check-bundles.js`, lancé par
150
+ `npm run build`, le détecte.
151
+
152
+ ## Code généré
153
+
154
+ `codegenerator -ts -webpkg <dépôt>\web\dflat-web` écrit les librairies Dflat (core-model, system-model,
155
+ system-data) dans ce dossier et génère les imports en `@dflat-core/web/<librairie>`. Sans `-webpkg` (application hôte
156
+ hors dépôt), ces librairies ne sont pas générées : elles sont fournies par le package. `dbmanager` écrit les
157
+ permissions TypeScript du module System dans `system-root/src/lib`.
package/fesm2022/dflat-core-web-system-ux.mjs CHANGED
@@ -4490,11 +4490,11 @@ class PresentationProfileColumnComponent {
4490
4490
  });
4491
4491
  }
4492
4492
  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 }); }
4493
- 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 }); }
4493
+ 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 }); }
4494
4494
  }
4495
4495
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: PresentationProfileColumnComponent, decorators: [{
4496
4496
  type: Component,
4497
- 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"] }]
4497
+ 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"] }]
4498
4498
  }], ctorParameters: () => [{ type: i2.PresentationProfileDataService }, { type: i2.PresentationProfileItemDataService }] });
4499
4499
 
4500
4500
  class PresentationProfileItemsComponent {