@colijnit/sharedcomponents 261.20.0 → 261.20.1

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ElementRef, EventEmitter, ChangeDetectorRef, OnDestroy, OnInit, AfterViewInit, PipeTransform, Renderer2, DoCheck, AfterContentChecked, NgZone, ViewContainerRef, ComponentFactoryResolver, TemplateRef, QueryList } from '@angular/core';
+import { ElementRef, EventEmitter, ChangeDetectorRef, OnDestroy, OnInit, AfterViewInit, PipeTransform, Renderer2, DoCheck, AfterContentChecked, NgZone, OnChanges, SimpleChanges, ViewContainerRef, ComponentFactoryResolver, TemplateRef, QueryList } from '@angular/core';
 import { PDFDocument } from 'pdf-lib';
 import SignaturePad from 'signature_pad';
 import * as i2 from '@angular/common';
@@ -2191,6 +2191,7 @@ declare class SimpleTagsComponent {
     showClass(): boolean;
     constructor(iconCacheService: IconCacheService, sharedService: SharedService);
     handleSaveTags(): void;
+    handleAddRecentTag(tag: TagTreeItem$1): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SimpleTagsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SimpleTagsComponent, "co-simple-tags", never, { "tags": { "alias": "tags"; "required": false; }; "linkedTags": { "alias": "linkedTags"; "required": false; }; }, { "closeClick": "closeClick"; "saveClick": "saveClick"; }, never, never, false, never>;
 }
@@ -2227,9 +2228,44 @@ declare class SimpleTagsFormModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<SimpleTagsFormModule>;
 }
 
+declare class SimpleTagsRecentComponent implements OnInit, OnChanges {
+    iconCacheService: IconCacheService;
+    sharedService: SharedService;
+    readonly icon: typeof Icon;
+    private readonly _storageKey;
+    private _prevLinkedIds;
+    set tags(tags: TagTreeItem$1[]);
+    set linkedTags(tags: TagTreeItem$1[]);
+    get linkedTags(): TagTreeItem$1[];
+    addTagClick: EventEmitter<TagTreeItem$1>;
+    recentTags: TagTreeItem$1[];
+    private _tags;
+    private _linkedTags;
+    showClass(): boolean;
+    constructor(iconCacheService: IconCacheService, sharedService: SharedService);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    handleRecentTagClick(tag: TagTreeItem$1): void;
+    isAlreadyLinked(tag: TagTreeItem$1): boolean;
+    private _addToRecent;
+    private _rehydrateFromStorage;
+    private _toStorageItem;
+    private _readStorage;
+    private _writeStorage;
+    private _loadThumbnail;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SimpleTagsRecentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SimpleTagsRecentComponent, "co-simple-tags-recent", never, { "tags": { "alias": "tags"; "required": false; }; "linkedTags": { "alias": "linkedTags"; "required": false; }; }, { "addTagClick": "addTagClick"; }, never, never, false, never>;
+}
+
+declare class SimpleTagsRecentModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SimpleTagsRecentModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SimpleTagsRecentModule, [typeof SimpleTagsRecentComponent], [typeof i2.CommonModule, typeof i3.CoDialogModule, typeof i3.InputSearchModule, typeof i3.IconModule, typeof i4.DragDropModule, typeof i3.ButtonModule, typeof SharedComponentsTranslationModule], [typeof SimpleTagsRecentComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SimpleTagsRecentModule>;
+}
+
 declare class SimpleTagsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SimpleTagsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SimpleTagsModule, [typeof SimpleTagsComponent], [typeof i2.CommonModule, typeof i3.CoDialogModule, typeof i3.InputSearchModule, typeof i3.IconModule, typeof i4.DragDropModule, typeof i3.ButtonModule, typeof SimpleTagsFormModule], [typeof SimpleTagsComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SimpleTagsModule, [typeof SimpleTagsComponent], [typeof i2.CommonModule, typeof i3.CoDialogModule, typeof i3.InputSearchModule, typeof i3.IconModule, typeof i4.DragDropModule, typeof i3.ButtonModule, typeof SimpleTagsFormModule, typeof SimpleTagsRecentModule], [typeof SimpleTagsComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SimpleTagsModule>;
 }
 

package/lib/components/simple-tags/style/_layout.scss

@@ -18,8 +18,7 @@
     .dialog-content-wrapper {
       display: flex;
       flex-direction: row;
-      width: 600px;
-      height: 600px;
+      width: $sc-co-simple-tags-content-width;
       max-width: 100%;
       column-gap: $sc-co-simple-tags-content-column-gap;
 
@@ -30,7 +29,7 @@
         row-gap: $sc-co-simple-tags-navigation-column-gap;
         overflow-x: hidden;
         padding-right: 3px;
-
+        height: $sc-co-simple-tags-navigation-column-max-height;
         .co-input-search {
           display: block;
           .co-input-text {
@@ -38,6 +37,9 @@
             &:before {
               display: none;
             }
+            .input-wrapper {
+              background: #f5f5fc;
+            }
           }
         }
 
@@ -188,6 +190,59 @@
       }
     }
 
+    .co-simple-tags-recent {
+      padding: 15px 0;
+      display: flex;
+      border-style: solid;
+      border-width: $sc-co-simple-tags-recent-collection-border-width;
+      border-color: $sc-co-simple-tags-recent-collection-border-color;
+      margin: $sc-co-simple-tags-recent-collection-margin;
+      .title {
+        padding: $sc-co-simple-tags-recent-collection-title-padding;
+        font-weight: $sc-co-simple-tags-recent-collection-title-weight;
+        display: flex;
+      }
+      .recent-tags-list {
+        display: grid;
+        grid-template-columns: $sc-co-simple-tags-recent-collection-tags-list-grid;
+        gap: $sc-co-simple-tags-recent-collection-tags-list-gap;
+        justify-content: start;
+        .recent-tag-item {
+          width: 100%;
+          min-width: $sc-co-simple-tags-recent-collection-tags-list-item-min-width;
+          max-width: $sc-co-simple-tags-recent-collection-tags-list-item-max-width;
+          cursor: pointer;
+          box-sizing: border-box;
+          background: $sc-co-simple-tags-recent-collection-tags-list-item-background;
+          border-radius: $sc-co-simple-tags-recent-collection-tags-list-item-border-radius;
+          padding: $sc-co-simple-tags-recent-collection-tags-list-item-padding;
+          display: flex;
+          align-items: center;
+        }
+        .thumbnail-description {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          max-width: 100%;
+          .co-icon {
+            width: $sc-co-simple-tags-recent-collection-tags-list-item-icon-size;
+            height: $sc-co-simple-tags-recent-collection-tags-list-item-icon-size;
+          }
+        }
+        .description-wrapper {
+          font-size: $sc-co-simple-tags-recent-collection-tags-list-item-font-size;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          -moz-hyphens: auto;
+          -ms-hyphens: auto;
+          -webkit-hyphens: auto;
+          hyphens: auto;
+          max-width: 100%;
+        }
+      }
+    }
+
     .dialog-footer {
       background-color: $sc-co-simple-tags-dialog-footer-background;
       border-width: $sc-co-simple-tags-dialog-footer-border-width;
@@ -261,10 +316,17 @@
     }
     .co-dialog {
       .co-dialog-wrapper {
-        background: #f8f8fa;
+        background: $sc-co-simple-tags-dialog-wrapper-background;
         max-height: 90vh;
         .dialog-header, .dialog-content, .dialog-footer {
-          background: #f8f8fa;
+          background: $sc-co-simple-tags-dialog-wrapper-background;
+        }
+        .dialog-header {
+          .dialog-header-caption {
+            .header-wrapper {
+              margin: $sc-co-simple-tags-dialog-header-margin;
+            }
+          }
         }
       }
     }

package/lib/components/simple-tags/style/_material-definition.scss

@@ -2,7 +2,9 @@ $sc-co-simple-tags-header-column-gap: 10px !default;
 $sc-co-simple-tags-header-margin-bottom: 25px !default;
 $sc-co-simple-tags-header-icon-size: 20px !default;
 $sc-co-simple-tags-content-column-gap: 40px !default;
+$sc-co-simple-tags-content-width: 100% !default;
 $sc-co-simple-tags-navigation-column-gap: 15px !default;
+$sc-co-simple-tags-navigation-column-max-height: 300px !default;
 $sc-co-simple-tags-navigation-width: 30% !default;
 $sc-co-simple-tags-navigation-home-icon-size: 15px !default;
 $sc-co-simple-tags-navigation-collection-row-gap: 4px !default;
@@ -10,14 +12,32 @@ $sc-co-simple-tags-linked-tags-width: 70% !default;
 $sc-co-simple-tags-linked-tags-row-gap: 15px !default;
 $sc-co-simple-tags-linked-tags-tag-height: 40px !default;
 $sc-co-simple-tags-linked-tags-gap-size: 10px !default;
-$sc-co-simple-tags-collection-item-border-radius: 7px !default;
+$sc-co-simple-tags-collection-item-border-radius: 5px !default;
 $sc-co-simple-tags-collection-item-padding: 6px !default;
-$sc-co-simple-tags-collection-item-border: 0px solid #dcdcdc !default;
+$sc-co-simple-tags-collection-item-border: 1px solid #dcdcdc !default;
 $sc-co-simple-tags-collection-item-background-color: #ffffff !default;
 $sc-co-simple-tags-collection-item-icon-size: 15px !default;
 $sc-co-simple-tags-linked-tag-delete-icon-size: 10px !default;
 $sc-co-simple-tags-linked-tag-delete-icon-margin: 10px !default;
 $sc-co-simple-tags-collection-tag-icon-size: 20px !default;
+$sc-co-simple-tags-dialog-header-margin: 0 0 15px 0 !default;
+$sc-co-simple-tags-dialog-wrapper-background: #ffffff !default;
+
+$sc-co-simple-tags-recent-collection-padding: 15px !default;
+$sc-co-simple-tags-recent-collection-border-width: 2px 0 0 0 !default;
+$sc-co-simple-tags-recent-collection-border-color: #f5f5fc !default;
+$sc-co-simple-tags-recent-collection-margin: 20px 0 0 0 !default;
+$sc-co-simple-tags-recent-collection-title-padding: 0 0 10px 0 !default;
+$sc-co-simple-tags-recent-collection-title-weight: 600 !default;
+$sc-co-simple-tags-recent-collection-tags-list-grid: repeat(3, minmax(75px, 200px)) !default;
+$sc-co-simple-tags-recent-collection-tags-list-gap: 8px !default;
+$sc-co-simple-tags-recent-collection-tags-list-item-min-width: 75px !default;
+$sc-co-simple-tags-recent-collection-tags-list-item-max-width: 200px !default;
+$sc-co-simple-tags-recent-collection-tags-list-item-background: #f5f5fc !default;
+$sc-co-simple-tags-recent-collection-tags-list-item-border-radius: 5px !default;
+$sc-co-simple-tags-recent-collection-tags-list-item-padding: 5px 10px !default;
+$sc-co-simple-tags-recent-collection-tags-list-item-icon-size: 12px !default;
+$sc-co-simple-tags-recent-collection-tags-list-item-font-size: 10px !default;
 
 $sc-co-simple-tags-dialog-footer-border-width: 5px 0 0 0 !default;
 $sc-co-simple-tags-dialog-footer-border-color: #ffffff !default;

package/lib/components/simple-tags-form/style/_layout.scss

@@ -1,10 +1,10 @@
 @include export-module('co-simple-tags-form-layout') {
   .co-simple-tags-form {
+    width: $sc-co-simple-tags-content-width;
     .form-content-wrapper {
       display: flex;
       flex-direction: row;
-      width: 600px;
-      height: 600px;
+      width: $sc-co-simple-tags-content-width;
       max-width: 100%;
       column-gap: $sc-co-simple-tags-content-column-gap;
 

package/lib/components/simple-tags-form/style/_material-definition.scss

@@ -3,6 +3,8 @@ $sc-co-simple-tags-header-margin-bottom: 25px !default;
 $sc-co-simple-tags-header-icon-size: 20px !default;
 $sc-co-simple-tags-content-column-gap: 40px !default;
 $sc-co-simple-tags-navigation-column-gap: 15px !default;
+$sc-co-simple-tags-content-width: 100% !default;
+$sc-co-simple-tags-navigation-column-max-height: 300px !default;
 $sc-co-simple-tags-navigation-width: 30% !default;
 $sc-co-simple-tags-navigation-home-icon-size: 15px !default;
 $sc-co-simple-tags-navigation-collection-row-gap: 4px !default;
@@ -10,14 +12,32 @@ $sc-co-simple-tags-linked-tags-width: 70% !default;
 $sc-co-simple-tags-linked-tags-row-gap: 15px !default;
 $sc-co-simple-tags-linked-tags-tag-height: 40px !default;
 $sc-co-simple-tags-linked-tags-gap-size: 10px !default;
-$sc-co-simple-tags-collection-item-border-radius: 7px !default;
+$sc-co-simple-tags-collection-item-border-radius: 5px !default;
 $sc-co-simple-tags-collection-item-padding: 6px !default;
-$sc-co-simple-tags-collection-item-border: 0px solid #dcdcdc !default;
+$sc-co-simple-tags-collection-item-border: 1px solid #dcdcdc !default;
 $sc-co-simple-tags-collection-item-background-color: #ffffff !default;
 $sc-co-simple-tags-collection-item-icon-size: 15px !default;
 $sc-co-simple-tags-linked-tag-delete-icon-size: 10px !default;
 $sc-co-simple-tags-linked-tag-delete-icon-margin: 10px !default;
 $sc-co-simple-tags-collection-tag-icon-size: 20px !default;
+$sc-co-simple-tags-dialog-header-margin: 0 0 15px 0 !default;
+$sc-co-simple-tags-dialog-wrapper-background: #ffffff !default;
+
+$sc-co-simple-tags-recent-collection-padding: 15px !default;
+$sc-co-simple-tags-recent-collection-border-width: 2px 0 0 0 !default;
+$sc-co-simple-tags-recent-collection-border-color: #f5f5fc !default;
+$sc-co-simple-tags-recent-collection-margin: 20px 0 0 0 !default;
+$sc-co-simple-tags-recent-collection-title-padding: 0 0 10px 0 !default;
+$sc-co-simple-tags-recent-collection-title-weight: 600 !default;
+$sc-co-simple-tags-recent-collection-tags-list-grid: repeat(3, minmax(75px, 200px)) !default;
+$sc-co-simple-tags-recent-collection-tags-list-gap: 8px !default;
+$sc-co-simple-tags-recent-collection-tags-list-item-min-width: 75px !default;
+$sc-co-simple-tags-recent-collection-tags-list-item-max-width: 200px !default;
+$sc-co-simple-tags-recent-collection-tags-list-item-background: #f5f5fc !default;
+$sc-co-simple-tags-recent-collection-tags-list-item-border-radius: 5px !default;
+$sc-co-simple-tags-recent-collection-tags-list-item-padding: 5px 10px !default;
+$sc-co-simple-tags-recent-collection-tags-list-item-icon-size: 12px !default;
+$sc-co-simple-tags-recent-collection-tags-list-item-font-size: 10px !default;
 
 $sc-co-simple-tags-dialog-footer-border-width: 5px 0 0 0 !default;
 $sc-co-simple-tags-dialog-footer-border-color: #ffffff !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/sharedcomponents",
-  "version": "261.20.0",
+  "version": "261.20.1",
   "private": false,
   "dependencies": {
     "chart.js": "4.3.0",

package/prerendered-routes.json

@@ -0,0 +1,3 @@
+{
+  "routes": {}
+}