@arsedizioni/ars-utils 18.1.74 → 18.1.76

package/clipper.ui/ui/clipper.scss

@@ -1,153 +1,317 @@
 @import '../../styles/ui.scss';
 
-.item {
-  min-height: 50px !important;
-  border-bottom: 1px dotted #eee !important;
-  line-height: 18px;
+.expired,
+.unread {
+  color: var(--ars-error, #ff5449) !important;
 }
 
-.item:hover {
-  background-color: #fff8e1;
+.expiring {
+  color: var(--ars-warning, #FFC107) !important;
 }
 
-
-.item-cell {
-  padding: 5px 0;
+.error-bg,
+.expired-bg,
+.unread-bg {
+  background-color: var(--ars-error, #ff5449);
 }
 
-.item-line {
-  padding-top: 1px;
-  padding-bottom: 1px;
-  
-  .command a {
-    text-decoration: none;
-    color: #2a91e0;
-    font-weight: 500;
-    cursor: pointer !important;
-  }
+.expiring-bg {
+  background-color: var(--ars-warning, #FFC107);
+}
 
-  .command a:hover {
-    opacity: 0.7;
-  }
+.popular-bg {
+  background-color: #388E3C;
 }
 
-.item-line>a {
-  color: #2a91e0 !important;
-  opacity: 1 !important;
-  cursor: pointer;
+.very-popular-bg {
+  background-color: #4CAF50;
 }
 
-.item-line>a:hover {
-  opacity: 0.7 !important;
+.item-selected {
+  background-color: var(--ars-item-selected-background-color, #ced1d2);
+  border-radius: 0 !important;
 }
 
-.item-line-1 {
-  font-weight: 500;
-  font-size: 1em;
-  color: black;
+.item-unread {
+  font-weight: bolder;
 }
 
-.item-line-2 {
-  font-size: 0.9em;
-  color: black;
+
+.items-group-title {
+  color: var(--ars-accent, #7894ae);
+  font-size: large;
+  font-weight: 700;
+  padding-left: 25px;
+  padding-bottom: 10px;
+  padding-top: 10px;
+
+  .spaced {
+    padding-top: 10px;
+  }
 }
 
-.item-line-3 {
-  font-size: 0.8em;
-  color: black;
+
+.items-footer {
+  padding-top: 10px;
+
 }
 
-.item-line-4 {
-  font-size: 0.7em;
-  color: black;
+
+
+.item {
+  border-radius: 12px;
+  padding: 10px 0 10px 0;
+  min-height: 60px !important;
+  margin-bottom: 2px;
+
+  .item-content {
+    .info-1 {
+      font-size: x-small;
+      font-weight: 700;
+      text-transform: uppercase;
+      color: var(--ars-accent, #7894ae);
+    }
+
+
+    .info-2 {
+      font-size: x-small;
+      font-weight: 700;
+      text-transform: uppercase;
+      color: var(--ars-accent-low, #456179);
+    }
+
+    .title {
+      font-size: small;
+    }
+
+
+    .details {
+      margin-top: 4px;
+      font-size: x-small;
+      font-weight: 700;
+      color: var(--ars-accent-low, #456179);
+      text-transform: uppercase;
+      border-left: 4px solid var(--ars-accent-low, #456179);
+      padding-left: 10px;
+
+      .links {
+        text-transform: none;
+        text-decoration: none;
+
+        a,
+        span,
+        div {
+          margin-right: 8px;
+          font-weight: 600;
+          color: var(--ars-color-text, #191c1b);
+        }
+
+        a {
+          cursor: pointer !important;
+          color: var(--ars-link, #03A9F4);
+          font-weight: 600;
+        }
+      }
+    }
+
+    a.link {
+      color: var(--ars-link, #03A9F4);
+      cursor: pointer !important;
+    }
+  }
 }
 
-.item-line-block-title {
-  font-size: 0.8em;
-  font-weight: 500;
+.item:hover {
+  background-color: var(--ars-item-hover-background-color, #eaecef);
+
+  .item-content {
+    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
+    mask-image: linear-gradient(to right, black 85%, transparent 100%);
+  }
+
 }
 
-.item-line-block {
-  margin-top: 4px;
-  margin-bottom: 4px;
-  margin-left: 10px;
-  padding-left: 10px;
-  border-left: 2px solid #009688;
+.tile:hover {
+  background-color: var(--ars-item-hover-background-color, #eaecef);
+  border-radius: 12px;
 }
 
-.item-line-read {
-  font-weight: normal !important;
+.tile {
+  cursor: pointer;
+  padding: 10px 13px 10px 13px;
+  margin-bottom: 2px;
 
-  .command,
-  a {
-    color: #2a91e0;
-    cursor: pointer !important;
-    opacity: 1 !important;
+  .body {
+    padding: 4px 6px;
   }
 
-  .command:hover,
-  a:hover {
-    opacity: 0.7 !important;
+  .image-mark {
+    border-top: 6px solid transparent;
+    margin: 0 8px;
+
   }
-}
 
-.item-line-red-badge {
-  background-color: red;
-  color: white;
-  padding: 2px 4px;
-  border-radius: 3px;
-  border: 1px solid red
-}
+  .image-mark-unread {
+    border-top-color: var(--ars-error, #ff5449);
+    margin: 0 8px;
+  }
+
+  .image {
+    height: 180px;
+    position: relative;
+    background-color: transparent;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+
+
+    .img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+
+
+
+    .info-1 {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      padding: 4px 8px;
+      background-color: var(--ars-item-opaque-background-color, rgba(255, 255, 255, 0.75));
+      color: var(--ars-color-text, #191c1b);
+      font-size: small;
+      font-weight: 700;
+      text-transform: uppercase;
+    }
+
+    .info-2 {
+      position: absolute;
+      right: 0;
+      top: 0;
+      padding: 4px 8px;
+      background-color: var(--ars-item-opaque-background-color, rgba(255, 255, 255, 0.75));
+      color: var(--ars-accent, #7894ae);
+      font-size: small;
+      font-weight: 700;
+      text-transform: uppercase;
+    }
+
+
+    .check {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 42px;
+      width: 42px;
+      background-color: var(--ars-primary, #00a293);
+      color: var(--ars-color-text-low, #e0e2e5);
+    }
+
+    .check-selected {
+      background-color: var(--ars-primary-hi, #12c0ae);
+    }
+
+    .read {
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 42px;
+      width: 42px;
+      background-color: var(--ars-primary, #00a293);
+      color: var(--ars-color-text-low, #e0e2e5);
+
+
+    }
+  }
+
+  .badge,
+  .badge-red {
+    margin-left: 10px;
+    padding: 1px 4px;
+    border-radius: 3px;
+    font-size: x-small;
+    font-weight: 700;
+    text-align: center;
+    background-color: var(--ars-accent, #7894ae);
+    text-transform: uppercase;
+    white-space: nowrap;
+    color: var(--ars-color-text-low, #e0e2e5);
+  }
+
+  .badge-red {
+    background-color: var(--ars-error, #ff5449);
+    color: var(--ars-color-text-low, #e0e2e5);
+  }
+
+  .date {
+    padding: 8px 0 6px 0;
+    font-weight: 700;
+    text-transform: uppercase;
+
+    .date-day {
+      color: var(--ars-accent, #7894ae);
+    }
+
+    .date-divider {
+      width: 1px;
+      margin: 0 8px;
+      border-left: 1px solid var(--ars-color-divider, #757d87);
+    }
+  }
+
+  .time {
+    font-size: small;
+    font-weight: 700;
+  }
+
+  .title {
+    text-decoration: none;
+    font-size: small;
+    min-height: 72px; // 4 lines;
+    overflow: hidden;
+  }
 
-.items-group-title {
-  line-height: 24px;
-  padding: 20px 10px 10px 20px;
-  font-weight: 500;
-  font-size: 19.2px;
-}
 
-.items-footer {
-  padding-top: 10px;
 }
 
-.sidenav-title-container {
-  min-height: 64px !important;
-  padding-left: 15px;
-  margin-bottom: 4px;
+.busy-backdrop {
+  background-color: rgba(0, 0, 0, 0.32) !important;
 }
 
-.sidenav-title {
-  color: #009688;
+
+.legend-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: x-small;
+  text-transform: uppercase;
   font-weight: 500;
-  font-size: 19.2px;
-}
+  margin-left: 10px;
 
-.item-greyed-1 {
-  color: #607d8b;
-}
 
-.item-greyed-2 {
-  color: #90a4ae;
-}
+  .legend {
+    display: inline-block;
+    height: 8px;
+    width: 8px;
+    margin-right: 4px;
+  }
+
+  .next {
+    margin-left: 8px;
+  }
 
-.item-accent {
-  color: #0d7066;
 }
 
-.item-primary {
-  color: #009688;
+.special-date,
+.special-date-expired {
+  border: 2px var(--ars-accent, #7894ae) solid !important;
+  border-radius: 100% !important;
 }
 
-.item-badge {
-  margin-left: 10px;
-  margin-bottom: 5px;
-  padding: 0 4px;
-  height: 12px;
-  line-height: 12px;
-  border-radius: 3px;
-  font-size: x-small;
-  font-weight: 500;
-  text-align: center;
-  background-color: orange;
-  color: black;
+
+.special-date-expired {
+  border: 2px var(--ars-error, #ff5449) solid !important;
 }

package/clipper.ui/ui/document/document.component.d.ts

@@ -1,56 +1,58 @@
-import { EventEmitter, OnDestroy, OnInit, Renderer2 } from '@angular/core';
-import { MediaObserver } from '@ngbracket/ngx-layout';
-import { MatDialogRef } from '@angular/material/dialog';
-import { MatSidenav } from '@angular/material/sidenav';
-import { DomSanitizer } from '@angular/platform-browser';
-import { Router } from '@angular/router';
-import { BroadcastService } from '@arsedizioni/ars-utils/core';
-import { ClipperService } from '@arsedizioni/ars-utils/clipper.common';
-import { ClipperDocumentBaseComponent } from './base/document-base.component';
-import { DialogService } from '@arsedizioni/ars-utils/ui';
+import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { MatDrawer } from '@angular/material/sidenav';
+import { ClipperDocumentInfo, ClipperDocumentRelevants } from '@arsedizioni/ars-utils/clipper.common';
+import { ClipperDocumentManager } from '../document-manager/document-manager';
 import * as i0 from "@angular/core";
-export declare class ClipperDocumentComponent extends ClipperDocumentBaseComponent implements OnInit, OnDestroy {
-    $broadcast: BroadcastService;
-    $dialog: DialogService;
-    $clipper: ClipperService;
-    media: MediaObserver;
-    renderer: Renderer2;
-    router: Router;
-    sanitizer: DomSanitizer;
-    dialogRef: MatDialogRef<ClipperDocumentComponent>;
-    relevantsSidenav: MatSidenav;
+export interface ClipperDocumentDialogData {
+    selectionMode: number;
+    id: string;
+    query?: string | null;
+}
+export declare class ClipperDocumentComponent extends ClipperDocumentManager implements OnInit, OnDestroy {
+    relevantsPane: MatDrawer;
     closing: EventEmitter<any>;
     opening: EventEmitter<any>;
     onComplianceAnalysis: EventEmitter<any>;
     onCompliancePlanning: EventEmitter<any>;
     onComplianceUsageReport: EventEmitter<any>;
-    private __d$;
+    private unsubscribe;
+    private changeDetector;
+    private breakpointObserver;
+    private renderer;
     private rendererListener1;
-    contentHeight: number;
-    url: any;
-    title: string;
-    busy: boolean;
-    lastQuery: string;
-    lastUrl: string;
-    lastDocument: any;
-    relevants: any;
-    relevantsMode: string;
-    relevantsClosed: boolean;
-    relevantsBusy: boolean;
-    relevantDocumentId: string;
-    selectionMode: number;
-    newModule: number;
-    module: number;
-    mq: string;
-    isDeadline: boolean;
-    isLawInForce: boolean;
-    constructor($broadcast: BroadcastService, $dialog: DialogService, $clipper: ClipperService, media: MediaObserver, renderer: Renderer2, router: Router, sanitizer: DomSanitizer, dialogRef: MatDialogRef<ClipperDocumentComponent>, _data: any);
+    private router;
+    private dialogRef;
+    protected dialogData: ClipperDocumentDialogData;
+    private height;
+    protected url: import("@angular/core").WritableSignal<string>;
+    protected title: import("@angular/core").WritableSignal<string>;
+    protected busy: import("@angular/core").WritableSignal<boolean>;
+    protected lastQuery?: string | null;
+    protected lastDocument?: ClipperDocumentInfo | null;
+    protected relevants: ClipperDocumentRelevants;
+    protected relevantsPaneHasBackdrop: boolean;
+    protected relevantsPaneClosed: boolean;
+    protected relevantsBusy: import("@angular/core").WritableSignal<boolean>;
+    private relevantDocumentId;
+    protected selectionMode?: number | null;
     ngOnInit(): void;
     ngOnDestroy(): void;
+    /**
+     * Resize
+     */
+    private resize;
+    /**
+   * Show hide relevants pane manually
+   */
+    protected toggleRelevantsPane(): void;
+    /**
+     * Handle filter pane visibility
+     */
+    private handleRelevantsPaneVisibility;
     /**
      * Close dialog
      */
-    close(): void;
+    protected close(): void;
     /**
      * Navigate to a new document
      * @param id : the document id
@@ -61,86 +63,51 @@ export declare class ClipperDocumentComponent extends ClipperDocumentBaseCompone
      * @param url : the url  to navigate to
      */
     navigateByUrl(url: string): void;
-    navigated(id: string, // Documnent id
-    title1: string, // Title 1
-    title2: string, // Title 2
-    model: number, // Model
-    moduleId: number, // Module
-    moduleName: string, // Module name
-    date: string, // Date
-    number: string, // Number
-    author: string, // Author
-    origin: string, // Origin
-    originDescription: string, // Origin description
-    bag: string, // Flags
-    validityInfo: string, // Info about validity
-    expiringInfo: string, // Info about expiring date
-    primaryId: string, // Primary document id
-    primaryModel: number, // Primary document model
-    secondaryId: string, // Secondary document id
-    isTrial: boolean): void;
+    /**
+     * Navigated callback
+     */
+    private navigated;
     /**
      * goto previous document in history
      */
-    back(): void;
+    protected back(): void;
     /**
      * Goto next document in history
      */
-    forward(): void;
+    protected forward(): void;
     /**
      * Print current document
      */
-    print(): void;
+    protected print(): void;
     /**
      * Find in current document
      */
-    find(): void;
+    protected find(): void;
     /**
      * Goto next relevant item
      */
-    nextRelevant(): void;
+    protected nextRelevant(): void;
     /**
      * Goto previous relevant item
      */
-    previousRelevant(): void;
+    protected previousRelevant(): void;
     /**
      * Check if current document should show relevants
      */
-    hasRelevants(): any;
+    protected hasRelevants(): ClipperDocumentRelevants;
     /**
      * Goto a relevant item
      * @param item : the item to go to
      */
-    gotoRelevant(item: any): void;
-    /**
-     * Adjust view
-     */
-    adjustView(): void;
-    /**
-     * Update view
-     */
-    updateView(): void;
+    protected gotoRelevant(item: any): void;
     /**
      * Update relevant items
      */
-    updateRelevants(): void;
-    /**
-     * Update relevants sidenav visibility
-     */
-    updateRelevantsVisibility(): void;
-    /**
-     * Open relevant items sidebar
-     */
-    relevantsOpen(): void;
-    /**
-     * Close facets sidebar
-     * @param closedManually : ture if facets has been closed manually by clicking the button
-     */
-    relevantsClose(closedManually?: boolean): void;
+    private updateRelevants;
     /**
      * Display document structure
      */
-    index(documentId: string): void;
+    protected index(documentId: string): void;
     /**
    * Get the id in a query string
    * @param url : the url to process
@@ -152,17 +119,17 @@ export declare class ClipperDocumentComponent extends ClipperDocumentBaseCompone
      * Preview a file if possible
      * @param url : the url to preview
      */
-    previewFile(url: string): void;
+    private previewFile;
     /**
       * Show document comment
       */
-    showComment(): void;
+    protected showComment(): void;
     /**
      * Open an item
      * @param documentId : the document id
      * @param newWindow: true if the document must be open into a new window
      */
-    open(document: any, newWindow?: boolean): void;
+    open(documentId: string, newWindow?: boolean): void;
     /**
      * Open a document
      * @param documentId : the document id
@@ -173,41 +140,20 @@ export declare class ClipperDocumentComponent extends ClipperDocumentBaseCompone
      * @param documentId : the document id
      * @param mode : the mode
      */
-    openReferences(documentId: string, mode?: number, model?: number, anchor?: string, anchorTitle?: string, update?: boolean): void;
+    protected openReferences(documentId: string, mode?: number, model?: number, anchor?: string, anchorTitle?: string, update?: boolean): void;
     /**
      * Display a report
      * @param item
      */
-    displayReport(item: any): void;
+    protected displayReport(item: any): void;
     /**
      * Checks if documents can be selected and returned as message
      */
-    canSelect(): boolean;
+    protected canSelect(): boolean;
     /**
      * Send a message with current selection and close dialog
      */
-    select(): void;
-    /**
-   * Checks if all documents are supported by RS
-   * @param documents : the list of documens
-   * @returns: true if all documents supports RS
-   */
-    RS_enabled(documents: any): boolean;
-    /**
-     * New law
-     * @param document: the law
-     */
-    RS_newLaw(document: any): boolean;
-    /**
-     * New activity
-     * @param document: the law
-     */
-    RS_newActivity(document: any): boolean;
-    /**
-     * Document usage report
-     * @param document: the law
-     */
-    RS_usageReport(document: any): boolean;
+    protected select(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ClipperDocumentComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ClipperDocumentComponent, "ng-component", never, {}, { "closing": "closing"; "opening": "opening"; "onComplianceAnalysis": "onComplianceAnalysis"; "onCompliancePlanning": "onCompliancePlanning"; "onComplianceUsageReport": "onComplianceUsageReport"; }, never, never, true, never>;
 }