@colijnit/sharedcomponents 1.0.46 → 1.0.48

package/lib/components/key-pad/style/_layout.scss

@@ -5,32 +5,76 @@
     font-family: $sc-key-pad-font-family;
     font-size: $sc-key-pad-font-size;
     display: flex;
+    width: 100%;
+    aspect-ratio: 1/1;
     .key-pad-wrapper {
       display: flex;
+      width: 100%;
       flex-direction: column;
       row-gap: $sc-key-pad-button-gap;
       padding: $sc-key-pad-button-gap;
       border-radius: $sc-key-pad-border-radius;
     }
     .key-pad-model-wrapper {
+      position: relative;
       font-family: $sc-font-family-digital;
-      font-size: $sc-key-pad-model-font-size;
+      //font-size: $sc-key-pad-model-font-size;
       display: flex;
+      flex-basis: 10%;
       justify-content: flex-end;
       padding: $sc-key-pad-model-padding;
       box-shadow: inset 0px 0px 3px 1px darken($sc-key-pad-button-background-color, 30%);
     }
+    .co-scalable-text {
+      display: flex;
+      width: 100%;
+      justify-content: flex-end;
+    }
     .key-pad-model {
       user-select: none;
+      pointer-events: none;
+      display: block;
+      position: absolute;
+      width: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      //right: 10%;
+      //transform: translate(50%, -50%);
+      //foreignObject {
+      //  overflow: visible;
+      //}
+      svg {
+        position: relative;
+        width: 100%;
+      }
+      .text {
+        font-size: $sc-key-pad-model-font-size;
+        font-weight: bold;
+        /* display: flex; */
+        /* align-items: center; */
+        /* justify-content: flex-end; */
+        /* align-self: auto; */
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+      }
+    }
+    .key-pad-button-flex-wrapper {
+      display: flex;
+      flex-basis: 100%;
     }
     .key-pad-button-wrapper {
       display: grid;
+      height: 100%;
+      width: 100%;
       grid-template-columns: $sc-key-pad-button-size $sc-key-pad-button-size $sc-key-pad-button-size $sc-key-pad-button-size;
       grid-template-rows: $sc-key-pad-button-size $sc-key-pad-button-size $sc-key-pad-button-size $sc-key-pad-button-size;
       row-gap: $sc-key-pad-button-gap;
       column-gap: $sc-key-pad-button-gap;
     }
     .key-pad-button {
+      position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -41,6 +85,17 @@
         width: 45%;
         height: 45%;
       }
+      .key-pad-button-text {
+        position: absolute;
+      }
+      .text {
+        display: flex;
+        //width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        font-size: $sc-key-pad-button-font-size;
+      }
     }
     .button-7 {
       grid-column: 1 / 1;

package/lib/components/key-pad/style/_material-definition.scss

@@ -3,7 +3,7 @@ $sc-key-pad-model-font-family: $sc-font-family-digital !default;
 $sc-key-pad-font-size: $sc-font-size !default;
 $sc-key-pad-border-radius: 5px !default;
 
-$sc-key-pad-button-size: 40px !default;
+$sc-key-pad-button-size: 4fr !default;
 $sc-key-pad-button-gap: 10px !default;
 $sc-key-pad-button-border-radius: 5px !default;
 
@@ -11,7 +11,9 @@ $sc-key-pad-background-color: #d8d8d8 !default;
 $sc-key-pad-button-background-color: #555555 !default;
 $sc-key-pad-button-font-color: white !default;
 
-$sc-key-pad-model-font-size: 30px !default;
+$sc-key-pad-model-font-size: 12px !default;
 $sc-key-pad-model-padding: 10px !default;
 $sc-key-pad-model-font-color-positive: #00dc00 !default;
 $sc-key-pad-model-font-color-negative: red !default;
+
+$sc-key-pad-button-font-size: 20px !default;

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

@@ -3,6 +3,37 @@
     display: flex;
     overflow: auto;
     height: 93vh;
+    column-gap: 20px;
+
+    .tree-wrapper {
+
+      .tree-entry {
+        display: flex;
+        flex-direction: column;
+
+        span {
+          padding: 7px;
+          border: 1px solid #dddddd;
+          border-radius: 5px;
+          margin-bottom: 6px;
+          cursor: pointer;
+          background: #f6f6f6;
+        }
+
+        .level2 {
+          margin-left: 10px;
+        }
+        .level3 {
+          margin-left: 20px;
+        }
+        .level4 {
+          margin-left: 30px;
+        }
+        .level5 {
+          margin-left: 40px;
+        }
+      }
+    }
 
     .category-wrapper {
       display: flex;

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;
@@ -27,6 +29,10 @@ export declare class SharedConnectorService {
     connect(): Promise<void>;
     getAllPrinters(): Promise<Printer[]>;
     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;
@@ -9,4 +11,8 @@ export declare class SharedService {
     init(options: any): Promise<void>;
     getAllPrinters(): Promise<Printer[]>;
     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.46",
+  "version": "1.0.48",
   "private": false,
   "dependencies": {
     "chart.js": "4.3.0",
@@ -11,7 +11,7 @@
     "@angular/core": ">=12.2.0",
     "@colijnit/articleapi": ">=1.0.17",
     "@colijnit/mainapi": ">=1.0.15",
-    "@colijnit/corecomponents_v12": ">=12.1.0",
+    "@colijnit/corecomponents_v12": ">=12.1.4",
     "@colijnit/ioneconnector": ">=2.1.15",
     "@colijnit/sharedapi": ">=1.0.11",
     "pdf-lib": ">=1.17.1",

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';