@provoly/dashboard 0.25.0 → 0.25.2

package/assets/svgs/format_bold.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M272-200v-560h221q65 0 120 40t55 111q0 51-23 78.5T602-491q25 11 55.5 41t30.5 90q0 89-65 124.5T501-200H272Zm121-112h104q48 0 58.5-24.5T566-372q0-11-10.5-35.5T494-432H393v120Zm0-228h93q33 0 48-17t15-38q0-24-17-39t-44-15h-95v109Z"/></svg>

package/assets/svgs/format_details.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-280h560v-80H200v80Zm0-160h560v-80H200v80Zm0-160h400v-80H200v80Zm-40 440q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z"/></svg>

package/assets/svgs/format_italic.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-200v-100h160l120-360H320v-100h400v100H580L460-300h140v100H200Z"/></svg>

package/assets/svgs/format_list_bulleted.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M360-200v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm0-240q-33 0-56.5-23.5T120-720q0-33 23.5-56.5T200-800q33 0 56.5 23.5T280-720q0 33-23.5 56.5T200-640Z"/></svg>

package/assets/svgs/format_list_numbered.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-80v-60h100v-30h-60v-60h60v-30H120v-60h120q17 0 28.5 11.5T280-280v40q0 17-11.5 28.5T240-200q17 0 28.5 11.5T280-160v40q0 17-11.5 28.5T240-80H120Zm0-280v-110q0-17 11.5-28.5T160-510h60v-30H120v-60h120q17 0 28.5 11.5T280-560v70q0 17-11.5 28.5T240-450h-60v30h100v60H120Zm60-280v-180h-60v-60h120v240h-60Zm180 440v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360Z"/></svg>

package/assets/svgs/format_quote.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m228-240 92-160q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-5.5 42.5T458-480L320-240h-92Zm360 0 92-160q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-5.5 42.5T818-480L680-240h-92ZM320-500q25 0 42.5-17.5T380-560q0-25-17.5-42.5T320-620q-25 0-42.5 17.5T260-560q0 25 17.5 42.5T320-500Zm360 0q25 0 42.5-17.5T740-560q0-25-17.5-42.5T680-620q-25 0-42.5 17.5T620-560q0 25 17.5 42.5T680-500Zm0-60Zm-360 0Z"/></svg>

package/assets/svgs/format_strikethrough.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M80-400v-80h800v80H80Zm340-160v-120H200v-120h560v120H540v120H420Zm0 400v-160h120v160H420Z"/></svg>

package/assets/svgs/format_table.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200q-33 0-56.5-23.5T120-200Zm80-400h560v-160H200v160Zm213 200h134v-120H413v120Zm0 200h134v-120H413v120ZM200-400h133v-120H200v120Zm427 0h133v-120H627v120ZM200-200h133v-120H200v120Zm427 0h133v-120H627v120Z"/></svg>

package/assets/svgs/format_title.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M420-160v-520H200v-120h560v120H540v520H420Z"/></svg>

package/assets/svgs/format_underlined.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120v-80h560v80H200Zm280-160q-101 0-157-63t-56-167v-330h103v336q0 56 28 91t82 35q54 0 82-35t28-91v-336h103v330q0 104-56 167t-157 63Z"/></svg>

package/components/text-editor/component/text-editor.component.d.ts

@@ -0,0 +1,38 @@
+import { ElementRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { MdStyle, TextEditorService } from '../service/text-editor.service';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class PryTextEditorComponent implements ControlValueAccessor {
+    private service;
+    value: string;
+    onChange: (value: string) => void;
+    onTouched: () => void;
+    touched: boolean;
+    disabled: boolean;
+    valueChanged$: Subject<string>;
+    tabView: boolean;
+    tabs: string[];
+    activeTab: string;
+    textareaRef?: ElementRef<HTMLTextAreaElement>;
+    buttons: {
+        style: MdStyle;
+        icon: string;
+    }[];
+    constructor(service: TextEditorService);
+    writeValue(value: string): void;
+    registerOnChange(onChange: any): void;
+    registerOnTouched(onTouched: any): void;
+    markAsTouched(): void;
+    setDisabledState(disabled: boolean): void;
+    onValueChange($event: string): void;
+    get textarea(): HTMLTextAreaElement;
+    getActiveTabIndex(): number;
+    formatText(style: MdStyle): void;
+    getUpdatedValue(value: string, lineStart?: number): string;
+    getSelectionLineIndex(): number;
+    focusSelection(start: number, end: number): void;
+    insertListStyleCharacter(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PryTextEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PryTextEditorComponent, "pry-text-editor", never, { "tabView": { "alias": "tabView"; "required": false; }; }, {}, never, never, false, never>;
+}

package/components/text-editor/i18n/en.translations.d.ts

@@ -0,0 +1,22 @@
+export declare const enTranslations: {
+    '@pry': {
+        component: {
+            textEditor: {
+                textAreaLabel: string;
+                preview: string;
+                write: string;
+                h3: string;
+                bold: string;
+                italic: string;
+                underline: string;
+                strikeThrough: string;
+                blockquote: string;
+                list: string;
+                orderedList: string;
+                table: string;
+                details: string;
+                more: string;
+            };
+        };
+    };
+};

package/components/text-editor/i18n/fr.translations.d.ts

@@ -0,0 +1,22 @@
+export declare const frTranslations: {
+    '@pry': {
+        component: {
+            textEditor: {
+                textAreaLabel: string;
+                preview: string;
+                write: string;
+                h3: string;
+                bold: string;
+                italic: string;
+                underline: string;
+                strikeThrough: string;
+                blockquote: string;
+                list: string;
+                orderedList: string;
+                table: string;
+                details: string;
+                more: string;
+            };
+        };
+    };
+};

package/components/text-editor/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@provoly/dashboard/components/text-editor" />
+export * from './public-api';

package/components/text-editor/mdToHtml.pipe.d.ts

@@ -0,0 +1,7 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class MdToHtmlPipe implements PipeTransform {
+    transform(value?: string): string | Promise<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MdToHtmlPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<MdToHtmlPipe, "mdToHtml", false>;
+}

package/components/text-editor/public-api.d.ts

@@ -0,0 +1,5 @@
+export * from './text-editor.module';
+export * from './component/text-editor.component';
+export * from './service/text-editor.service';
+export * from './mdToHtml.pipe';
+export * from './style/css.component';

package/components/text-editor/service/text-editor.service.d.ts

@@ -0,0 +1,40 @@
+import * as i0 from "@angular/core";
+export declare const mdStyles: {
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    bold: string;
+    italic: string;
+    underline: string;
+    strikeThrough: string;
+    code: string;
+    blockquote: string;
+    list: string;
+    orderedList: string;
+    table: string;
+    details: string;
+};
+export type MdStyle = keyof typeof mdStyles;
+export declare const wrapperStyles: MdStyle[];
+export declare const selfClosingStyles: MdStyle[];
+export declare const listStyles: MdStyle[];
+export declare const otherStyles: MdStyle[];
+export declare class TextEditorService {
+    constructor();
+    getClosingTag(style: MdStyle): string;
+    addMarkdown(text: string, style: MdStyle): string;
+    toggleWrapperStyle(text: string, style: MdStyle): string;
+    toggleSelfClosingStyle(text: string, style: MdStyle): string;
+    toggleListStyle(text: string, style: MdStyle): string;
+    insertOtherStyle(text: string, style: MdStyle): string;
+    escapeRegExp(text: string): string;
+    isListLine(line: string): boolean;
+    isOrderedListLine(text: string): boolean;
+    getListCharacter(previousLine: string): string;
+    updateOrderedListLines(text: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextEditorService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TextEditorService>;
+}

package/components/text-editor/style/_o-text-editor.scss

@@ -0,0 +1,120 @@
+@use '../../../styles/abstracts/index' as *;
+@use '../../../styles/components/o-text-panel' as *;
+@use '../../../styles/components/o-draggable-menu' as *;
+@use '../../../styles-theme/components-theme/o-draggable-menu.theme' as *;
+
+/* Organism - text editor */
+
+.o-text-editor {
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    > .a-tooltip:last-child {
+      // indent tooltip
+      &.a-tooltip[data-tooltip][data-tooltip-position=bottom]::after {
+        left: calc(50% - 15px);
+      }
+    }
+  }
+
+  &__tabs {
+    display: flex;
+    gap: toRem(5);
+  }
+
+  &__tab {
+    padding: 0 toRem(10);
+    font-size: toRem(10);
+    height: toRem(18);
+    margin-top: -3px;
+
+    &.-active {
+      margin-top: -1px;
+      background-color: white;
+      border: 1px solid #BCCAD8;
+      border-top: none;
+      border-radius: 0 0 4px 4px;
+      font-weight: bold;
+      z-index: 2;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  &__button {
+    padding: toRem(5) toRem(5);
+    overflow: visible;
+    color: #113b6e;
+
+    &:hover {
+      @include changeBgColor(
+        $targetBgColor: #D8E7F7
+      );
+    }
+  }
+
+  &__content {
+    display: flex;
+    gap: toRem(10);
+    min-height: toRem(203);
+    width: 100%;
+  }
+
+  &__tab-panel {
+    width: 100%;
+  }
+
+  &__textarea {
+    &.-half-width {
+      flex-grow: 0;
+      width: auto;
+    }
+    &.-full-width {
+      flex-grow: 1;
+      width: 100%;
+    }
+
+    &.-remove-corner-radius {
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  &__preview {
+    flex: 1;
+    background-color: white;
+    padding: toRem(7) toRem(12) toRem(4);
+    border: 1px solid #BCCAD8;
+    border-radius: 4px;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+
+    @extend %o-text-panel;
+  }
+}
+
+.o-draggable-menu--text-editor {
+  @extend .o-draggable-menu;
+  display: flex;
+  flex-direction: column;
+
+  .o-draggable-menu__list__item {
+    width: 100%;
+    font-size: toRem(14);
+  }
+
+  .o-text-editor__button {
+    display: flex;
+    align-items: center;
+    gap: toRem(5);
+  }
+}

package/components/text-editor/style/css.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class PryTextEditorCssComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PryTextEditorCssComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PryTextEditorCssComponent, "pry-text-editor-css", never, {}, {}, never, never, false, never>;
+}

package/components/text-editor/text-editor.module.d.ts

@@ -0,0 +1,17 @@
+import { PryI18nService } from '@provoly/dashboard';
+import * as i0 from "@angular/core";
+import * as i1 from "./component/text-editor.component";
+import * as i2 from "./style/css.component";
+import * as i3 from "./mdToHtml.pipe";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/forms";
+import * as i6 from "@provoly/dashboard";
+import * as i7 from "@angular/cdk/overlay";
+import * as i8 from "@provoly/dashboard/toolbox";
+export declare class PryTextEditorModule {
+    private pryTranslateService;
+    constructor(pryTranslateService: PryI18nService);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PryTextEditorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PryTextEditorModule, [typeof i1.PryTextEditorComponent, typeof i2.PryTextEditorCssComponent, typeof i3.MdToHtmlPipe], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.PryCoreModule, typeof i6.PryIconModule, typeof i6.PryI18nModule, typeof i7.CdkOverlayOrigin, typeof i7.CdkConnectedOverlay, typeof i8.PryToolboxModule], [typeof i1.PryTextEditorComponent, typeof i3.MdToHtmlPipe]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PryTextEditorModule>;
+}

package/dataset/components/dataset-detail/dataset-detail.component.d.ts

@@ -1,9 +1,9 @@
 import { EventEmitter, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Dataset, DatasetVersion, ResultSets, ViewMode, WidgetManifest } from '@provoly/dashboard';
+import { Dataset, DatasetVersion, ResultSets, SubscriptionnerDirective, ViewMode, WidgetManifest } from '@provoly/dashboard';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class PryDatasetDetailComponent implements OnInit {
+export declare class PryDatasetDetailComponent extends SubscriptionnerDirective implements OnInit {
     private store;
     dataset: Dataset;
     goToCatalog: EventEmitter<any>;
@@ -13,12 +13,15 @@ export declare class PryDatasetDetailComponent implements OnInit {
     protected readonly ViewMode: typeof ViewMode;
     compId: number;
     tab: number;
-    datasetItems$: Observable<ResultSets | null> | undefined;
+    datasetItems$: Observable<ResultSets | null>;
     datasetVersions$: Observable<DatasetVersion[]>;
     showModalStatus: boolean;
     selectedDatasetVersion?: DatasetVersion;
     selectedMode: ViewMode;
-    activeVersion$: Observable<string>;
+    activeVersion$: Observable<DatasetVersion | undefined>;
+    isEditingVersion: boolean;
+    isPanelOpen: boolean;
+    selectedVersion?: DatasetVersion;
     constructor(store: Store);
     ngOnInit(): void;
     goBack(): void;
@@ -30,6 +33,10 @@ export declare class PryDatasetDetailComponent implements OnInit {
     getVersionTooltipContent(version: DatasetVersion, activeVersionId: string): "error" | "active" | "inactive" | "loading" | "invalid" | "unknown";
     private deactivateVersion;
     private activateVersion;
+    onTabSwitch($event: number): void;
+    togglePanel(selectedVersion?: DatasetVersion): void;
+    editVersion(): void;
+    formValidated($event: Partial<DatasetVersion>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PryDatasetDetailComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PryDatasetDetailComponent, "pry-dataset-detail", never, { "dataset": { "alias": "dataset"; "required": false; }; }, { "goToCatalog": "goToCatalog"; }, never, never, false, never>;
 }

package/dataset/components/dataset-version-form/dataset-version-form.component.d.ts

@@ -0,0 +1,23 @@
+import { DatasetVersion } from '@provoly/dashboard';
+import { EventEmitter, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import * as i0 from "@angular/core";
+interface DatasetVersionInfoForm {
+    productionDate: FormControl<string>;
+    producer: FormControl<string>;
+    additionalInformation: FormControl<string>;
+}
+export declare class PryDatasetVersionFormComponent implements OnInit {
+    private store;
+    version?: DatasetVersion;
+    form: FormGroup<DatasetVersionInfoForm>;
+    maxDate: string;
+    formValidated: EventEmitter<Partial<DatasetVersion>>;
+    constructor(store: Store);
+    ngOnInit(): void;
+    onSubmit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PryDatasetVersionFormComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PryDatasetVersionFormComponent, "pry-dataset-version-form", never, { "version": { "alias": "version"; "required": false; }; }, { "formValidated": "formValidated"; }, never, never, false, never>;
+}
+export {};

package/dataset/dataset.module.d.ts

@@ -4,14 +4,16 @@ import * as i1 from "./components/dataset.component";
 import * as i2 from "./style/css.component";
 import * as i3 from "./components/dataset-card/dataset-card.component";
 import * as i4 from "./components/dataset-detail/dataset-detail.component";
-import * as i5 from "@angular/common";
-import * as i6 from "@provoly/dashboard";
-import * as i7 from "@angular/forms";
-import * as i8 from "@provoly/dashboard/components/sinceDate";
+import * as i5 from "./components/dataset-version-form/dataset-version-form.component";
+import * as i6 from "@angular/common";
+import * as i7 from "@provoly/dashboard";
+import * as i8 from "@angular/forms";
+import * as i9 from "@provoly/dashboard/components/sinceDate";
+import * as i10 from "@provoly/dashboard/components/text-editor";
 export declare class PryDatasetModule {
     private pryTranslateService;
     constructor(pryTranslateService: PryI18nService);
     static ɵfac: i0.ɵɵFactoryDeclaration<PryDatasetModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PryDatasetModule, [typeof i1.PryDatasetComponent, typeof i2.PryDatasetCssComponent, typeof i3.PryDatasetCardComponent, typeof i4.PryDatasetDetailComponent], [typeof i5.CommonModule, typeof i6.PryIconModule, typeof i6.PryCoreModule, typeof i6.PryOverlayModule, typeof i6.PryI18nModule, typeof i7.FormsModule, typeof i6.PryDashboardModule, typeof i8.PrySinceDateModule, typeof i6.PryModalStatusModule], [typeof i1.PryDatasetComponent, typeof i2.PryDatasetCssComponent, typeof i3.PryDatasetCardComponent, typeof i4.PryDatasetDetailComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PryDatasetModule, [typeof i1.PryDatasetComponent, typeof i2.PryDatasetCssComponent, typeof i3.PryDatasetCardComponent, typeof i4.PryDatasetDetailComponent, typeof i5.PryDatasetVersionFormComponent], [typeof i6.CommonModule, typeof i7.PryIconModule, typeof i7.PryCoreModule, typeof i7.PryOverlayModule, typeof i7.PryI18nModule, typeof i8.FormsModule, typeof i7.PryDashboardModule, typeof i9.PrySinceDateModule, typeof i7.PryModalStatusModule, typeof i8.ReactiveFormsModule, typeof i10.PryTextEditorModule], [typeof i1.PryDatasetComponent, typeof i2.PryDatasetCssComponent, typeof i3.PryDatasetCardComponent, typeof i4.PryDatasetDetailComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PryDatasetModule>;
 }

package/dataset/i18n/en.translations.d.ts

@@ -4,9 +4,11 @@ export declare const enTranslations: {
             consult: string;
             title: string;
             search: string;
+            description: string;
             date: string;
             status: string;
             versionHistory: string;
+            information: string;
             data: string;
             table: string;
             map: string;
@@ -18,6 +20,10 @@ export declare const enTranslations: {
             noActiveVersion: string;
             version: {
                 title: string;
+                productionDate: string;
+                producer: string;
+                additionalInformation: string;
+                notProvided: string;
                 INDEXING: string;
                 LOADING: string;
                 INACTIVE: string;

package/dataset/i18n/fr.translations.d.ts

@@ -4,9 +4,11 @@ export declare const frTranslations: {
             consult: string;
             title: string;
             search: string;
+            description: string;
             date: string;
             status: string;
             versionHistory: string;
+            information: string;
             data: string;
             table: string;
             map: string;
@@ -18,6 +20,10 @@ export declare const frTranslations: {
             noActiveVersion: string;
             version: {
                 title: string;
+                productionDate: string;
+                producer: string;
+                additionalInformation: string;
+                notProvided: string;
                 INDEXING: string;
                 LOADING: string;
                 INACTIVE: string;

package/dataset/style/_o-pry-dataset-detail.scss

@@ -1,4 +1,6 @@
 @use '../../styles/abstracts/index' as *;
+@use '../../styles-theme/abstracts-theme/variables.theme' as *;
+@use '../../styles/components/o-text-panel' as *;
 
 /* Organism - pry-dataset-detail */
 
@@ -6,19 +8,35 @@ pry-dataset-detail {
   height: 100%;
   width: 100%;
 
-  .dataset-detail {
-    height: 80%;
+  .o-dataset-layout {
     display: flex;
-    flex-direction: column;
-    flex: 1 1;
-    padding: toRem(25);
 
-    pry-tab-group {
+    &__content {
+      overflow: hidden;
       height: 100%;
+      padding-left: 2rem;
+      padding-top: toRem(20);
+      flex: 1;
+    }
 
-      .o-tabs__panel__content {
-        height: 100%;
+    &__panel {
+      width: toRem(330);
+      border-left: solid 1px themed($theme-map, 'color', 'primary', 300);
+      padding: toRem(10);
+      font-size: 0.875rem;
+      color: #263340;
+
+      .a-label {
+        font-weight: 700;
       }
+
+      .version-information {
+        @extend %o-text-panel;
+      }
+    }
+
+    .panel__content {
+      gap: toRem(15);
     }
   }
 
@@ -44,25 +62,43 @@ pry-dataset-detail {
   }
 }
 
-.o-tabs {
-  padding-left: 2rem;
-  padding-right: 2rem;
-  height: 100%;
-}
+.o-dataset-detail {
+  height: 80%;
 
-.o-dataset-layout__content {
-  overflow:hidden;
-  height: 100%;
-  padding-left: 2rem;
-  padding-top: toRem(20);
-}
+  &__information {
+    padding: toRem(10);
+    font-size: 0.875rem;
+    color: #263340;
+    background: white;
+    border-radius: 4px;
+    gap: toRem(15);
 
-tr {
-  height: toRem(30);
-}
+    .a-label {
+      font-weight: 700;
+    }
+  }
+
+  pry-tab-group {
+    height: 100%;
 
-td {
-  .a-btn + .a-btn {
-    margin-left: toRem(10);
+    .o-tabs {
+      padding-left: 2rem;
+      padding-right: 2rem;
+      height: 100%;
+
+      &__panel__content {
+        height: 100%;
+      }
+    }
+  }
+
+  tr {
+    height: toRem(30);
+  }
+
+  td {
+    .a-btn + .a-btn {
+      margin-left: toRem(10);
+    }
   }
 }

package/dataset/style/_o-pry-dataset-version-form.scss

@@ -0,0 +1,7 @@
+@use '../../styles/abstracts/index' as *;
+
+.o-dataset-version-form {
+  .a-label {
+    font-weight: 700;
+  }
+}

package/esm2022/admin/components/admin-classes/admin-classes-customize/admin-classes-customize.component.mjs

@@ -83,7 +83,7 @@ export class AdminClassesCustomizeComponent extends SubscriptionnerDirective {
         return this.defaultTileAttributes.length > 0 && this.defaultTileAttributes.length <= this.maxTilesAttributes;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminClassesCustomizeComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AdminClassesCustomizeComponent, selector: "pry-admin-classes-customize", usesInheritance: true, ngImport: i0, template: "<div class=\"o-pry-admin-classes-customize\">\n  <h1 class=\"a-h1\" id=\"tab-custom\">{{ '@pry.admin.customize.title' | i18n }}</h1>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"customizeTemplate\" name=\"customize.template\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTable\" name=\"customize.table\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeSymbol\" name=\"classes.rules\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTile\" name=\"customize.tile\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #customizeTemplate>\n    <pry-admin-classes-customize-tooltip\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-tooltip>\n  </ng-template>\n  <ng-template #customizeTable>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of defaultAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultList=\"cdkDropList\"\n        [cdkDropListData]=\"otherAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of otherAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTableAttrs()\">\n        {{ '@pry.admin.customize.updateTable' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n  <ng-template #customizeSymbol>\n    <pry-admin-classes-customize-symbol\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-symbol>\n  </ng-template>\n  <ng-template #customizeTile>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tile' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultTileAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of defaultTileAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTileAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"otherTileAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of otherTileAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div>\n      <ng-container *ngIf=\"!isTileConfValid()\">\n        <p>{{ '@pry.admin.customize.tileHint' | i18n : { max: maxTilesAttributes } }}</p>\n      </ng-container>\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTileAttrs()\" [disabled]=\"!isTileConfValid()\">\n        {{ '@pry.admin.customize.updateTile' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i6.AdminClassesCustomizeTooltipComponent, selector: "pry-admin-classes-customize-tooltip", inputs: ["currentClass"], outputs: ["backPressed"] }, { kind: "component", type: i7.AdminClassesCustomizeSymbolComponent, selector: "pry-admin-classes-customize-symbol", inputs: ["currentClass"], outputs: ["backPressed"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AdminClassesCustomizeComponent, selector: "pry-admin-classes-customize", usesInheritance: true, ngImport: i0, template: "<div class=\"o-pry-admin-classes-customize\">\n  <h1 class=\"a-h1\" id=\"tab-custom\">{{ '@pry.admin.customize.title' | i18n }}</h1>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"customizeTemplate\" name=\"customize.template\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTable\" name=\"customize.table\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeSymbol\" name=\"classes.rules\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTile\" name=\"customize.tile\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #customizeTemplate>\n    <pry-admin-classes-customize-tooltip\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-tooltip>\n  </ng-template>\n  <ng-template #customizeTable>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of defaultAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultList=\"cdkDropList\"\n        [cdkDropListData]=\"otherAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of otherAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTableAttrs()\">\n        {{ '@pry.admin.customize.updateTable' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n  <ng-template #customizeSymbol>\n    <pry-admin-classes-customize-symbol\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-symbol>\n  </ng-template>\n  <ng-template #customizeTile>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tile' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultTileAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of defaultTileAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTileAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"otherTileAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of otherTileAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div>\n      <ng-container *ngIf=\"!isTileConfValid()\">\n        <p>{{ '@pry.admin.customize.tileHint' | i18n : { max: maxTilesAttributes } }}</p>\n      </ng-container>\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTileAttrs()\" [disabled]=\"!isTileConfValid()\">\n        {{ '@pry.admin.customize.updateTile' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i6.AdminClassesCustomizeTooltipComponent, selector: "pry-admin-classes-customize-tooltip", inputs: ["currentClass"], outputs: ["backPressed"] }, { kind: "component", type: i7.AdminClassesCustomizeSymbolComponent, selector: "pry-admin-classes-customize-symbol", inputs: ["currentClass"], outputs: ["backPressed"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminClassesCustomizeComponent, decorators: [{
             type: Component,