@arsedizioni/ars-utils 22.1.4 → 22.5.1

package/README.md

@@ -1,10 +1,97 @@
-# Ars Utils
-
-Common tools and components shared among Ars Edizioni Angular based web applications.
-
-## Platform
-
-Angular 9 + Material
-
-## Authors
-Fabio Buscaroli, Alberto Doria
+# ARS Utils
+
+Common tools and standalone components shared among ARS Edizioni Angular based web applications.
+
+Rispetto alla versione monolitica precedente adotta la struttura a entry point
+introdotta con `@fabio.buscaroli/scm-utils`: code splitting e tree shaking sono il criterio di
+ripartizione dei simboli, non un effetto collaterale.
+
+## Platform
+
+Angular 22 + Material
+
+## Entry points
+
+La libreria non espone un barrel unico: l'entry point secondario e' l'unica unita' di
+code splitting riconosciuta da ng-packagr, quindi ogni gruppo di simboli che ha un ciclo
+di vita proprio vive nel suo entry point. Importare sempre dal path specifico.
+
+### Nucleo condiviso
+
+| Livello | Entry point | Contenuto | Note |
+|---|---|---|---|
+| L0 | `core` | `SystemUtils`, models, definitions, pipe, direttive validator, servizi (broadcast, screen, theme, splash, environment), `LoginOAuthType` | nessuna dipendenza da Angular Material |
+| L0 | `core.date` | `provideArsDateFns`, `provideArsLocalDates`, `MAT_DATE_FNS_FORMATS`, `arsLocalDateInterceptor`, `ARS_TIME_ZONE` | isola `@angular/material/core` + `datepicker` |
+| L0 | `core.markdown` | `MarkdownUtils`, `FormatMarkdownPipe` | parser markdown, fuori dal percorso comune |
+| L1 | `ui` | `FlexLayoutModule`, `MediaObserver`, `UIService`, `PaginatorIntl`, tipi dei dialog | kernel: deve restare magro |
+| L1.5 | `ui.dialogs` | `DialogService` + busy, confirm, delete, info, toast | il set sempre usato |
+| L2 | `ui.dialogs.auth` | credentials, reset-password, recover-password, prompt-otp, `OtpInputComponent`, `PasswordStrengthComponent` | solo route di login/account |
+| L2 | `ui.dialogs.prompt` | prompt, prompt-date, prompt-time | porta `@angular/material/datepicker` |
+| L2 | `ui.dialogs.select` | select, select-tree, send-to | porta `mat-tree`, `mat-list`, `mat-chips` |
+| L2 | `ui.files` | file-input, file-preview, select-file, select-picture | |
+| L2 | `ui.controls` | button-selector, button-toggle, chips-selector, tree-picker, calendar-empty-header | |
+| L2 | `ui.filters` | `FilterBarComponent` + modello `Filters` | |
+| L2 | `ui.navigation` | `NavigationBarComponent` + definizioni | shell applicativa |
+| L3 | `ui.application` | `ApplicationDialogService` | facade: carica i dialog pesanti con `import()` |
+
+### Specifici ARS
+
+| Livello | Entry point | Contenuto | Dipendenze pesanti |
+|---|---|---|---|
+| L0.5 | `support.common` | `SupportService`, notifiche, definitions, messages | - |
+| L0.5 | `evolution.common` | `EvolutionService`, account, compliance, login, interceptor auth | - |
+| L2 | `ui.oauth` | `LoginOAuthComponent`, `LoginOAuthOkMSComponent` | `@azure/msal-angular`, `@azure/msal-browser` |
+| L2 | `ui.help` | `HelpService`, `HelpViewerComponent`, modello dei capitoli | - |
+| L2 | `ui.tinymce` | `TinymceUtils`, `FullScreenEditorComponent`, `langs/it.js` | `tinymce`, `@tinymce/tinymce-angular` |
+| L2 | `ui.notifications` | `NotificationsBrowserComponent` (ex `support.ui`) | - |
+| L2 | `clipper.common` | `ClipperService`, archive, calendar, collaboration, documents, login, note, interceptor auth | - |
+| L4 | `clipper.ui` | browser, document, note, references, search-* e `ClipperDocumentsUtils` | `clipper.scss` |
+
+I peer dependency opzionali (`@azure/msal-*`, `tinymce`, `@tinymce/tinymce-angular`) servono
+solo a chi importa rispettivamente `ui.oauth` e `ui.tinymce`: sono dichiarati in
+`peerDependenciesMeta.optional` proprio perche' nessun altro entry point li aggancia.
+
+### Grafo delle dipendenze statiche
+
+```
+core          core.date        core.markdown
+ |
+ ui ------------------------------------------------------------------
+ |         |            |            |                  |             |
+ |    ui.controls  ui.filters  ui.navigation  ui.dialogs.select  clipper.common
+ |
+ui.dialogs
+ |         |                  |              |          |            |
+ |   ui.dialogs.auth   ui.dialogs.prompt  ui.files   ui.help    ui.oauth
+ |                                                   ui.notifications (+ support.common)
+ui.application  --- import() --->  ui.dialogs.{auth,prompt,select}, ui.files
+ |
+clipper.ui  (+ clipper.common, ui.controls, ui.files, ui.dialogs.select)
+```
+
+`evolution.common` e `support.common` dipendono solo da `core`.
+
+### Regole da rispettare
+
+1. Il grafo tra entry point deve restare un DAG. Un entry point di livello L2 non puo'
+   importare `ui.application`, ne' un entry point puo' importare se stesso per package path
+   (ng-packagr lo segnala come `circular dependency on itself`).
+2. I tipi condivisi fra il facade e i dialog pesanti stanno in `ui` (`dialog.definitions.ts`).
+   Se un tipo servisse a entrambi e vivesse nel dialog, l'`import()` del facade tornerebbe statico.
+3. Il facade usa `import type` per i tipi dei componenti e `import()` per i valori: e' quello
+   che tiene i dialog fuori dal bundle iniziale.
+4. Dopo una modifica, verificare che gli `import()` sopravvivano alla build:
+   `grep -o "import('@arsedizioni[^']*')" dist/ars-utils/fesm2022/*ui.application.mjs`
+
+## Differenze rispetto alla versione precedente (22.1.x monolitica)
+
+- Nessun barrel radice: `@arsedizioni/ars-utils` esporta solo `ARS_UTILS_VERSION`.
+- `ui` non contiene piu' i dialog: `DialogService` sta in `ui.dialogs`.
+- `ui.application` resta il solo facade e non riesporta piu' componenti: i controlli sono in
+  `ui.controls`, i file in `ui.files`, i filtri in `ui.filters`, la navigazione in `ui.navigation`.
+- `SystemUtils.markdownToHtml` non esiste piu': usare `MarkdownUtils.toHtml` da `core.markdown`.
+- `SelectableModel` espone `first` e `selectedAny` al posto di `selectedFirst` e `selectedAll`.
+- `support.ui` si chiama `ui.notifications`, `help` si chiama `ui.help`, `tinymce` si chiama `ui.tinymce`.
+
+## Authors
+Fabio Buscaroli, Alberto Doria

package/clipper.ui/clipper.scss

@@ -0,0 +1,564 @@
+@use '../styles/ui.scss';
+
+// ---------------------------------------------------------------------------
+// Shared helpers
+// ---------------------------------------------------------------------------
+// Clamp text to 3 lines (used by item / tile / stripe titles)
+@mixin line-clamp-3 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: initial;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+// Shared text styling for the .item-content info labels
+@mixin item-info-label {
+  font-size: x-small !important;
+  font-weight: 700 !important;
+  line-height: 18px;
+  text-transform: uppercase !important;
+}
+
+.clipper-logo {
+  background-size: 110px 48px;
+  width: 110px;
+  height: 48px;
+
+}
+
+.clipper-selection-button {
+  width: 150px;
+  font-size: small;
+  font-weight: 600;
+}
+
+.clipper-selection-icon-button {
+  background-color: var(--ars-color-primary, #00a293);
+  color: var(--ars-color-text-low, #e0e2e5);
+}
+
+.clipper-selection-icon-button:hover {
+  background-color: var(--ars-color-primary-hi, #12c0ae);
+}
+
+
+
+// State color + background utilities (app-color tokens). name -> fallback
+$state-colors: (
+  unread:   #f7931c,
+  expired:  #ff5449,
+  expiring: #FFC107,
+  closed:   #388E3C,
+);
+
+@each $state, $fallback in $state-colors {
+  .#{$state} {
+    color: var(--app-color-#{$state}, $fallback) !important;
+  }
+
+  .#{$state}-bg {
+    background-color: var(--app-color-#{$state}, $fallback) !important;
+  }
+}
+
+// Background-only variant (uses the ars-color design token)
+.error-bg {
+  background-color: var(--ars-color-error, #ff5449) !important;
+}
+
+// .popular-bg is an alias of .closed-bg
+.popular-bg {
+  background-color: var(--app-color-closed, #388E3C) !important;
+}
+
+.very-popular-bg {
+  background-color: #4CAF50;
+}
+
+.item-selected {
+  background-color: var(--ars-item-selected-background-color, #ced1d2);
+  border-radius: 0 !important;
+}
+
+.item-unread {
+  font-weight: bolder;
+}
+
+
+.items-group-title {
+  color: var(--ars-color-secondary, #4a635f);
+  font-size: large;
+  font-weight: 700;
+  padding-left: 25px;
+  padding-bottom: 10px;
+  padding-top: 10px;
+
+  .group-spaced {
+    padding: 10px 0 0 0 !important;
+  }
+}
+
+
+.items-footer {
+  padding: 10px;
+
+}
+
+
+.item {
+  border-radius: 12px;
+  padding: 10px 10px 10px 0px;
+  min-height: 68px !important;
+  margin-bottom: 2px;
+}
+
+.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%);
+  }
+
+}
+
+@media screen and (min-width: 0px) and (max-width: 430px) {
+  .item:hover {
+    background-color: var(--ars-item-hover-background-color);
+
+    .item-content {
+      -webkit-mask-image: linear-gradient(to right, black 55%, transparent 100%);
+      mask-image: linear-gradient(to right, black 55%, transparent 100%);
+    }
+
+  }
+}
+
+.item-content {
+
+  .item-info-1,
+  .info-1 {
+    @include item-info-label;
+    color: var(--ars-color-accent, #7894ae);
+  }
+
+  .item-info-2,
+  .info-2 {
+    @include item-info-label;
+    color: var(--ars-color-accent-low, #456179);
+  }
+
+  .item-info-3,
+  .info-3 {
+    @include item-info-label;
+    color: var(--ars-color-error, #ff5449);
+  }
+
+  .item-title,
+  .title {
+    font-size: small !important;
+    line-height: 18px;
+    text-decoration: none !important;
+    font-weight: normal;
+    min-height: unset;
+    min-width: unset;
+    white-space: initial !important;
+
+    @supports (-webkit-line-clamp: 3) {
+      @include line-clamp-3;
+    }
+  }
+
+
+  .details {
+    margin-top: 4px;
+    font-size: x-small !important;
+    font-weight: 700;
+    line-height: 15px;
+    color: var(--ars-color-accent-low, #456179);
+    text-transform: uppercase !important;
+    border-left: 4px solid var(--ars-color-accent-low, #456179);
+    padding-left: 10px;
+
+    .links {
+      text-transform: none;
+      text-decoration: none;
+
+      a,
+      span,
+      div {
+        margin-right: 8px;
+        font-weight: 500 !important;
+        font-size: 11px !important;
+        color: var(--ars-color-text, #191c1b);
+      }
+
+      a {
+        cursor: pointer !important;
+        color: var(--ars-color-link, #03A9F4);
+        font-size: 11px !important;
+        font-weight: 500 !important;
+      }
+    }
+  }
+
+  a.link {
+    color: var(--ars-color-link, #03A9F4);
+    cursor: pointer !important;
+    text-decoration: none !important;
+  }
+}
+
+
+.tile:hover {
+  background-color: var(--ars-item-hover-background-color, #eaecef);
+  border-radius: 12px;
+}
+
+.tile {
+  cursor: pointer !important;
+  padding: 10px 13px 10px 13px !important;
+  margin-bottom: 20px !important;
+
+  .body {
+    padding: 4px 6px;
+  }
+
+  .image-mark {
+    border-top: 6px solid transparent;
+    margin: 0 8px;
+
+  }
+
+  .image-mark-unread {
+    border-top-color: var(--app-color-unread, #f7931c);
+    margin: 0 8px;
+  }
+
+  .tile-image,
+  .image {
+    height: 125px;
+    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%;
+    }
+
+
+    .tile-info-1,
+    .info-1 {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      padding: 4px 8px;
+      background-color: var(--ars-color-overlay, rgba(255, 255, 255, 0.75));
+      color: var(--ars-color-text, #191c1b);
+      font-size: small !important;
+      font-weight: 700 !important;
+      text-transform: uppercase !important;
+    }
+
+    .tile-info-2,
+    .info-2 {
+      position: absolute;
+      right: 0;
+      top: 0;
+      padding: 4px 8px;
+      background-color: var(--ars-color-overlay, rgba(255, 255, 255, 0.75));
+      color: var(--ars-color-accent, #7894ae);
+      font-size: small !important;
+      font-weight: 700 !important;
+      text-transform: uppercase !important;
+    }
+
+    .buttons {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 42px;
+
+      .check,
+      .read-button {
+        background-color: var(--ars-color-primary, #00a293) !important;
+        color: var(--ars-color-text-low, #e0e2e5) !important;
+      }
+
+      .unread-button {
+        background-color: var(--app-color-unread, #f7931c) !important;
+        color: var(--ars-color-text-low, #e0e2e5) !important;
+      }
+
+      .check-selected {
+        background-color: var(--ars-color-primary-hi, #12c0ae) !important;
+      }
+    }
+  }
+
+  .tile-date,
+  .date {
+    padding: 8px 0 6px 0 !important;
+    font-weight: 700 !important;
+    text-transform: uppercase !important;
+
+    .date-day {
+      color: var(--ars-color-accent, #7894ae);
+    }
+
+    .date-divider {
+      width: 1px;
+      margin: 0 8px;
+      border-left: 1px solid var(--ars-color-divider, #757d87);
+    }
+  }
+
+  .tile-time,
+  .time {
+    font-size: small !important;
+    font-weight: 700 !important;
+  }
+
+  .tile-title,
+  .title {
+    text-decoration: none !important;
+    font-size: 16px !important;
+    font-weight: 600;
+    min-height: 50px !important; // 2 lines;
+    max-height: 70px !important; // 3 lines;
+    min-width: 100%;
+    white-space: initial !important;
+    overflow: hidden !important;
+
+    @supports (-webkit-line-clamp: 3) {
+      @include line-clamp-3;
+    }
+  }
+
+
+}
+
+
+.stripe:hover {
+  background-color: var(--ars-item-hover-background-color, #eaecef);
+  border-radius: 12px;
+}
+
+.stripe {
+  cursor: pointer !important;
+  padding: 5px 10px 5px 10px !important;
+  margin-bottom: 10px !important;
+
+  .body {
+    padding: 5px 15px !important;
+  }
+
+  .image-mark {
+    min-height: 100% !important;
+    border-left: 6px solid transparent;
+    margin: 8px 0;
+
+  }
+
+  .image-mark-unread {
+    min-height: 100% !important;
+    border-left-color: var(--ars-color-error, #ff5449) !important;
+    margin: 8px 0;
+  }
+
+  .stripe-image,
+  .image {
+    width: 150px !important;
+    height: 70px !important;
+    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%;
+    }
+  }
+
+  .stripe-info-1,
+  .info-1 {
+    margin-top: 8px;
+    padding: 4px 8px !important;
+    background-color: var(--ars-color-overlay, rgba(255, 255, 255, 0.75)) !important;
+    color: var(--ars-color-text, #191c1b) !important;
+    font-size: small !important;
+    font-weight: 700 !important;
+    text-transform: uppercase !important;
+  }
+
+  .stripe-info-2,
+  .info-2 {
+    margin-top: 8px;
+    padding: 4px 8px !important;
+    background-color: var(--ars-color-overlay, rgba(255, 255, 255, 0.75)) !important;
+    color: var(--ars-color-accent, #7894ae) !important;
+    font-size: small !important;
+    font-weight: 700 !important;
+    text-transform: uppercase !important;
+  }
+
+  .buttons {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 42px;
+
+    .check,
+    .read {
+      background-color: var(--ars-color-primary, #00a293);
+      color: var(--ars-color-text-low, #e0e2e5);
+    }
+
+    .check-selected {
+      background-color: var(--ars-color-primary-hi, #12c0ae);
+    }
+  }
+
+
+  .stripe-date,
+  .date {
+    padding: 0 !important;
+    font-weight: 700 !important;
+    text-transform: uppercase !important;
+
+    .date-day {
+      color: var(--ars-color-accent, #7894ae);
+    }
+
+    .date-divider {
+      width: 1px;
+      margin: 0 8px;
+      border-left: 1px solid var(--ars-color-divider, #757d87);
+    }
+  }
+
+  .stripe-time,
+  .time {
+    font-size: small !important;
+    font-weight: 700 !important;
+  }
+
+  .stripe-title,
+  .title {
+    text-decoration: none !important;
+    font-size: 16px !important;
+    font-weight: 600;
+    min-width: 100%;
+    white-space: initial !important;
+    overflow: hidden !important;
+
+    @supports (-webkit-line-clamp: 3) {
+      @include line-clamp-3;
+    }
+  }
+
+
+}
+
+.badge,
+.badge-red {
+  margin-left: 10px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: x-small;
+  font-weight: 600;
+  text-align: center;
+  background-color: #427505;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: #e0e2e5;
+}
+
+.badge-red {
+  background-color: #a80710;
+}
+
+.busy-backdrop {
+  background-color: rgba(0, 0, 0, 0.42) !important;
+}
+
+
+.legend-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: x-small;
+  text-transform: uppercase;
+  font-weight: 500;
+  margin-left: 10px;
+
+
+  .legend {
+    display: inline-block;
+    height: 8px;
+    width: 8px;
+    margin-right: 4px;
+  }
+
+  .legend:not(:first-of-type) {
+    margin-left: 10px;
+  }
+
+}
+
+@media screen and (max-width: 431px) {
+  .legend-container {
+    font-size: 9px !important;
+  }
+}
+
+.special-date,
+.special-date-expired,
+.special-date-expiring {
+  border: 2px var(--ars-color-accent, #7894ae) solid !important;
+  border-radius: 100% !important;
+}
+
+
+.special-date-expired {
+  border: 2px var(--ars-color-error, #ff5449) solid !important;
+}
+
+.special-date-expiring {
+  border: 2px var(--ars-color-warning, #FFC107) solid !important;
+}
+
+/*
+ * Free text search highlighted item
+ */
+.word-hit-chunk,
+.word-hit {
+  display: inline-block;
+  font-size: inherit;
+  background-color: var(--ars-word-hit-background-color, #FFEB3B);
+  color: var(--ars-word-hit-color, #191c1b);
+  padding: 0 4px;
+  margin: 0 4px;
+  border-radius: 4px;
+}
+
+.word-hit-chunk {
+  background-color: var(--ars-word-chunk-hit-background-color, #8AFF59);
+  color: var(--ars-word-hit-chunk-color, #191c1b);
+
+}

package/fesm2022/arsedizioni-ars-utils-clipper.common.mjs

@@ -3781,7 +3781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
 // directly or referenced as types where needed.
 
 /*
- * Public API Surface of ars-utils
+ * Public API Surface of @arsedizioni/ars-utils/clipper.common
  */
 
 /**