@colijnit/sharedcomponents 1.0.47 → 1.0.48

package/lib/components/screen-config-generator/style/_layout.scss

@@ -20,11 +20,17 @@
           background: #f6f6f6;
         }
 
-        &.level2 {
-          margin-left: 25px;
+        .level2 {
+          margin-left: 10px;
         }
-        &.level3 {
-          margin-left: 50px;
+        .level3 {
+          margin-left: 20px;
+        }
+        .level4 {
+          margin-left: 30px;
+        }
+        .level5 {
+          margin-left: 40px;
         }
       }
     }

package/lib/components/simple-tags/simple-tags.component.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from "@angular/core";
+import { IconCacheService } from "../../service/icon-cache.service";
+import { Icon } from "../../enum/icon.enum";
+import { CdkDragDrop } from "@angular/cdk/drag-drop";
+import { SharedService } from "../../service/shared.service";
+import { TagTreeItem } from "@colijnit/mainapi/build/model/tag-tree-item.bo";
+export declare class SimpleTagsComponent {
+    iconCacheService: IconCacheService;
+    sharedService: SharedService;
+    readonly icon: typeof Icon;
+    set tags(tags: TagTreeItem[]);
+    set linkedTags(tags: TagTreeItem[]);
+    get linkedTags(): TagTreeItem[];
+    closeClick: EventEmitter<void>;
+    saveClick: EventEmitter<TagTreeItem[]>;
+    breadCrumbs: TagTreeItem[];
+    displayTags: TagTreeItem[];
+    searchString: string;
+    private _tags;
+    private _linkedTags;
+    showClass(): boolean;
+    constructor(iconCacheService: IconCacheService, sharedService: SharedService);
+    setRootDisplayTags(): void;
+    handleTagSelected(selectedTag: TagTreeItem): void;
+    handleCrumbClicked(tag: TagTreeItem, index: number): void;
+    handleAddTag(event: CdkDragDrop<TagTreeItem[], any>): void;
+    deleteLinkedTag(tag: TagTreeItem): void;
+    searchCollection(): void;
+    handleSaveTags(): void;
+    private _loadThumbnail;
+}

package/lib/components/simple-tags/simple-tags.module.d.ts

@@ -0,0 +1,2 @@
+export declare class SimpleTagsModule {
+}

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

@@ -0,0 +1,232 @@
+@include export-module('cc-simple-tags-layout') {
+  .co-simple-tags {
+
+    .header-wrapper {
+      display: flex;
+      column-gap: $sc-co-simple-tags-header-column-gap;
+      align-items: center;
+      margin-bottom: $sc-co-simple-tags-header-margin-bottom;
+      .co-dialog-header-title {
+        margin: 0;
+      }
+      .co-icon {
+        width: $sc-co-simple-tags-header-icon-size;
+        height: $sc-co-simple-tags-header-icon-size;
+      }
+    }
+
+    .dialog-content-wrapper {
+      display: flex;
+      flex-direction: row;
+      width: 50vw;
+      height: 50vh;
+      column-gap: $sc-co-simple-tags-content-column-gap;
+
+      .collection-navigation {
+        width: $sc-co-simple-tags-navigation-width;
+        display: flex;
+        flex-direction: column;
+        row-gap: $sc-co-simple-tags-navigation-column-gap;
+        overflow-x: hidden;
+        padding-right: 3px;
+
+        .co-input-search {
+          display: block;
+        }
+
+        .breadcrumbs {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+
+          .co-icon {
+            cursor: pointer;
+            width: $sc-co-simple-tags-navigation-home-icon-size;
+            height: $sc-co-simple-tags-navigation-home-icon-size;
+          }
+
+          .crumbs {
+            display: flex;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            .crumb {
+              cursor: pointer;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+
+            .spacer {
+              margin: 0 5px;
+            }
+          }
+        }
+
+        .collection-view {
+          display: flex;
+          flex-direction: column;
+          row-gap: $sc-co-simple-tags-navigation-collection-row-gap;
+        }
+      }
+
+      .linked-tags-view {
+        width: $sc-co-simple-tags-linked-tags-width;
+        display: flex;
+        flex-direction: column;
+        row-gap: $sc-co-simple-tags-linked-tags-row-gap;
+
+        .view-wrapper {
+          display: grid;
+          grid-template-columns: 50% 50%;
+          grid-auto-rows: $sc-co-simple-tags-linked-tags-tag-height;
+          column-gap: $sc-co-simple-tags-linked-tags-gap-size;
+          row-gap: $sc-co-simple-tags-linked-tags-gap-size;
+          width: calc(100% - #{$sc-co-simple-tags-linked-tags-gap-size});
+          height: 100%;
+
+          .collection-item {
+            visibility: hidden;
+          }
+        }
+      }
+
+      .collection-item {
+        border-radius: $sc-co-simple-tags-collection-item-border-radius;
+        padding: $sc-co-simple-tags-collection-item-padding;
+        border: $sc-co-simple-tags-collection-item-border;
+        display: flex;
+        cursor: pointer;
+        &:hover {
+          background-color: $sc-co-simple-tags-collection-item-background-color;
+        }
+        &.draggable {
+          cursor: move;
+        }
+        &.disabled {
+          background-color: $sc-co-simple-tags-collection-item-background-color;
+          cursor: default;
+        }
+
+        span {
+          margin-left: 10px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .co-icon {
+          width: $sc-co-simple-tags-collection-item-icon-size;
+          height: $sc-co-simple-tags-collection-item-icon-size;
+        }
+      }
+
+      .tag-item {
+        display: flex;
+        border: $sc-co-simple-tags-collection-item-border;
+        border-radius: $sc-co-simple-tags-collection-item-border-radius;
+        align-items: center;
+        justify-content: space-between;
+        overflow: hidden;
+
+        .thumbnail-description {
+          display: flex;
+          height: 100%;
+          align-items: center;
+          overflow: hidden;
+
+          .thumbnail-wrapper {
+            height: inherit;
+
+            img {
+              height: inherit;
+              padding: 5px;
+              border-radius: $sc-co-simple-tags-collection-item-border-radius;
+            }
+          }
+
+          .co-icon {
+            margin: 0 8px;
+          }
+
+          .description-wrapper {
+            display: flex;
+            flex-direction: column;
+            row-gap: 2px;
+            justify-content: center;
+            overflow: hidden;
+
+            .description {
+              font-weight: bold;
+            }
+
+            span {
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+
+        .delete-tag {
+          cursor: pointer;
+          margin: $sc-co-simple-tags-linked-tag-delete-icon-margin;
+          width: $sc-co-simple-tags-linked-tag-delete-icon-size;
+          height: $sc-co-simple-tags-linked-tag-delete-icon-size;
+        }
+      }
+    }
+
+    .commit-button-wrapper {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      column-gap: 4px;
+
+      co-button {
+        height: auto;
+        width: auto;
+        background-color: #f5f5fc;
+        border-bottom: 2px solid #DCE4EA;
+        cursor: pointer;
+
+        &:not(.circle) {
+          padding: 10px;
+        }
+
+        &.cancel-button {
+          padding: 5px;
+          co-icon {
+            width: 15px;
+            height: 15px;
+            svg { // for fontawesome icons
+              fill: #475060;
+            }
+            & [fill] { // for own icons
+              fill: #475060;
+            }
+          }
+        }
+      }
+
+      co-icon {
+        width: 20px;
+        height: 20px;
+        svg { // for fontawesome icons
+          fill: #1A73E8;
+        }
+        & [fill] { // for own icons
+          fill: #1A73E8;
+        }
+      }
+    }
+    .disabled {
+      cursor: default;
+      opacity: 0.6;
+    }
+    .clickable {
+      cursor: pointer;
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+$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-navigation-column-gap: 15px !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;
+$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: 50px !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-padding: 6px !default;
+$sc-co-simple-tags-collection-item-border: 1px solid #dcdcdc !default;
+$sc-co-simple-tags-collection-item-background-color: #f8f8f8 !default;
+$sc-co-simple-tags-collection-item-icon-size: 15px !default;
+$sc-co-simple-tags-linked-tag-delete-icon-size: 15px !default;
+$sc-co-simple-tags-linked-tag-delete-icon-margin: 10px !default;

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

@@ -0,0 +1,4 @@
+@include export-module('cc-simple-tags-theme') {
+  .co-simple-tags {
+  }
+}

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

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/enum/icon.enum.d.ts

@@ -8,6 +8,7 @@ export declare enum Icon {
     ArrowPointRight = "arrow_point_right",
     AtSolid = "at_solid",
     BringForwardRegular = "bring_forward_regular",
+    CheckDuotone = "check_duotone",
     CheckRound = "check_round",
     DeleteLeftRegular = "delete_left_regular",
     DeliveryTruck = "delivery_truck",
@@ -19,6 +20,7 @@ export declare enum Icon {
     FilePdfRegular = "file_pdf_regular",
     FilePdfSolid = "file_pdf_solid",
     FileSignatureRegular = "file_signature_regular",
+    HouseBlankRegular = "house_blank_regular",
     Lock = "lock",
     MessageSmsRegular = "message_sms_regular",
     MessageSmsSolid = "message_sms_solid",
@@ -27,5 +29,7 @@ export declare enum Icon {
     PrintRegular = "print_regular",
     PrintSolid = "print_solid",
     SignatureField = "signature_field",
-    Xml = "xml"
+    TagRegular = "tag_regular",
+    Xml = "xml",
+    XSolid = "x_solid"
 }

package/lib/service/shared-connector.service.d.ts

@@ -17,6 +17,8 @@ import { Printer } from '@colijnit/mainapi/build/model/printer.bo';
 import { DataServiceResponseData } from '@colijnit/ioneconnector/build/model/data-service-response-data';
 import { SendMethod } from '@colijnit/mainapi/build/model/send-method.bo';
 import { StockForecast } from "@colijnit/articleapi/build/model/stock-forecast.bo";
+import { TagCategory } from "@colijnit/mainapi/build/enum/tab-category.enum";
+import { TagTreeItem } from "@colijnit/mainapi/build/model/tag-tree-item.bo";
 export declare class SharedConnectorService {
     private _optionsService;
     articleConnector: Articles;
@@ -29,6 +31,8 @@ export declare class SharedConnectorService {
     getSendMethods(): Promise<SendMethod[]>;
     getScreenConfigTree(): Promise<any>;
     getScreenConfigSubRubric(parentRubricId: number, configId: number, fixedKey: string): Promise<any>;
+    getTagsFullTree(category: TagCategory, includeTags: boolean): Promise<TagTreeItem[]>;
+    getDocumentContent(id: number, thumbnail?: boolean): Promise<string>;
     getStockHistory(request: GetStockHistoryRequest): Promise<StockHistoryBo[]>;
     getStockInformation(data: ArticleStock): Promise<ArticleStockBo[]>;
     getArtStockStatus(goodId: number, branchNo?: string, requestedAmount?: number, warehouseId?: number): Promise<number>;

package/lib/service/shared.service.d.ts

@@ -2,6 +2,8 @@ import { SharedConnectorService } from "./shared-connector.service";
 import { OptionsService } from "./options.service";
 import { Printer } from '@colijnit/mainapi/build/model/printer.bo';
 import { SendMethod } from '@colijnit/mainapi/build/model/send-method.bo';
+import { TagCategory } from "@colijnit/mainapi/build/enum/tab-category.enum";
+import { TagTreeItem } from "@colijnit/mainapi/build/model/tag-tree-item.bo";
 export declare class SharedService {
     protected options: OptionsService;
     protected connector: SharedConnectorService;
@@ -11,4 +13,6 @@ export declare class SharedService {
     getSendMethods(): Promise<SendMethod[]>;
     getScreenConfigTree(): Promise<any>;
     getScreenConfigSubRubric(parentRubricId: number, configId: number, fixedKey: string): Promise<any>;
+    getTagsFullTree(category: TagCategory, includeTags?: boolean): Promise<TagTreeItem[]>;
+    getDocumentContent(docId: number, thumbnail?: boolean): Promise<string>;
 }

package/package.json

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

package/public-api.d.ts

@@ -15,4 +15,6 @@ export * from './lib/components/statusbar/statusbar.component';
 export * from './lib/components/statusbar/statusbar.module';
 export * from './lib/components/date-planning/date-planning.component';
 export * from './lib/components/date-planning/date-planning.module';
+export * from './lib/components/simple-tags/simple-tags.component';
+export * from './lib/components/simple-tags/simple-tags.module';
 export * from './lib/service/shared.service';