npm - @colijnit/sharedcomponents - Versions diffs - 254.1.1 → 254.1.3 - Mend

@colijnit/sharedcomponents 254.1.1 → 254.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html><html lang="en"><head>
+  <meta charset="utf-8">
+  <title>Sharedcomponents</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+<style>@charset "UTF-8";@import url(https://fonts.googleapis.com/css2?family=Public+Sans:wght@100;200;300;400;500;600;800;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;800;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Public+Sans&display=swap);body,html{margin:0;overflow:hidden}body,html{width:100%;height:100%}*{box-sizing:border-box;padding:0;margin:0}</style><link rel="stylesheet" href="styles.051675db76590b099897.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.051675db76590b099897.css"></noscript></head>
+<body>
+  <app-root></app-root>
+<script src="runtime.8aac21847ed3d3829cca.js" defer></script><script src="polyfills.907fe9d1887c5de17993.js" defer></script><script src="main.b62bfdc80736ecda90e4.js" defer></script>
+</body></html>

package/lib/components/activity-list/style/_layout.scss CHANGED Viewed

@@ -13,7 +13,7 @@
           display: flex;
           flex-direction: column;
           row-gap: 5px;
-          width: 75%;
+          width: 70%;
           .activity-display-title {
             display: flex;
@@ -22,7 +22,7 @@
             align-items: center;
             justify-content: flex-end;
             padding-right: 5px;
+            font-size: 11px;
             .co-icon {
               width: 20px;
               height: 20px;
@@ -33,9 +33,14 @@
             display: flex;
             flex-direction: column;
             border-radius: 5px;
-            background-color: $sc-color-action;
-            padding: 10px;
+            background-color: $sc-color-activity;
+            padding: 15px;
+            color: #FFFFFF;
+            .co-icon {
+              svg {
+                fill: #FFFFFF;
+              }
+            }
             .activity-display-body {
               display: flex;
               align-items: center;
@@ -44,7 +49,7 @@
             .activity-display-footer {
               display: flex;
               flex-direction: row;
-              column-gap: 10px;
+              column-gap: 5px;
               align-items: center;
               justify-content: flex-end;
@@ -57,6 +62,12 @@
           .customer-reply-content {
             background-color: $sc-color-light-accent;
+            color: #171721;
+            .co-icon {
+              svg {
+                fill: #FFFFFF;
+              }
+            }
           }
         }
       }

package/lib/components/activity-overview-component/component-activity-overview.component.d.ts CHANGED Viewed

@@ -3,11 +3,13 @@ import { BaseActivityOverviewComponent } from "./components/base-activity-overvi
 import { Icon } from "../../enum/icon.enum";
 import { IconCacheService } from "../../service/icon-cache.service";
 import { DictionaryService } from "../../service/dictionary.service";
+import { SharedService } from "../../service/shared.service";
 export declare class ComponentActivityOverviewComponent extends BaseActivityOverviewComponent {
     iconCacheService: IconCacheService;
     dialogService: CoreDialogService;
     dictionaryService: DictionaryService;
+    protected sharedService: SharedService;
     readonly Icon: typeof Icon;
     showClass(): boolean;
-    constructor(iconCacheService: IconCacheService, dialogService: CoreDialogService, dictionaryService: DictionaryService);
+    constructor(iconCacheService: IconCacheService, dialogService: CoreDialogService, dictionaryService: DictionaryService, sharedService: SharedService);
 }

package/lib/components/activity-overview-component/components/base-activity-overview.component.d.ts CHANGED Viewed

@@ -10,12 +10,13 @@ import { Icon } from "../../../enum/icon.enum";
 import { ActivityCfgName } from "../../../enum/activity-cfg-name.enum";
 import { ActivitiesTaskConfigNames } from "../../../interface/activities-task-config-names";
 import { OperationCallbackSimpleFunction } from "../../../interface/operation-callback-simple-function";
-import { OperationCallbackFunctionWithValidation } from "../../../interface/operation-callback-function-with-validation";
 import { DictionaryService } from "../../../service/dictionary.service";
 import { TaskModifierComponent } from "../../task-modifyer/task-modifier.component";
+import { SharedService } from "../../../service/shared.service";
 export declare abstract class BaseActivityOverviewComponent {
     private _dialogService;
     private _dictionaryService;
+    private _sharedService;
     readonly icon: typeof Icon;
     readonly cfgNames: typeof ActivityCfgName;
     readonly taskCfgNames: ActivitiesTaskConfigNames;
@@ -23,13 +24,7 @@ export declare abstract class BaseActivityOverviewComponent {
     set viewModel(value: ActivityViewModel);
     set triggerToFireOnSave(value: WorkflowTrigger);
     get triggerToFireOnSave(): WorkflowTrigger;
-    canFireTriggerOperation: OperationCallbackSimpleFunction;
     prepareWorkflowOperation: OperationCallbackSimpleFunction;
-    lockTaskOperation: OperationCallbackSimpleFunction;
-    deleteActivityOperation: OperationCallbackSimpleFunction;
-    upsertActivityOperation: OperationCallbackSimpleFunction;
-    fireGenericTriggerOperation: OperationCallbackFunctionWithValidation;
-    fireTriggerOperation: OperationCallbackFunctionWithValidation;
     userRelationId: number;
     userGroupId: number;
     handleOpenLinkSidebar: boolean;
@@ -67,7 +62,7 @@ export declare abstract class BaseActivityOverviewComponent {
     private _activity;
     private _viewModel;
     private _triggerToFireOnSave;
-    constructor(_dialogService: CoreDialogService, _dictionaryService: DictionaryService);
+    constructor(_dialogService: CoreDialogService, _dictionaryService: DictionaryService, _sharedService: SharedService);
     handleButtonEndClick(): void;
     handleGenericTriggerClick(event: WorkflowGenericTransition): Promise<void>;
     handleTriggerClick(eventTrigger: WorkflowTrigger): Promise<void>;

package/lib/components/modify-task-form/components/base-activity-summary.component.d.ts CHANGED Viewed

@@ -7,10 +7,11 @@ import { CoreDialogService, ScreenConfigAdapterComponent } from "@colijnit/corec
 import { DictionaryService } from "../../../service/dictionary.service";
 import { OperationCallbackSimpleFunction } from "../../../interface/operation-callback-simple-function";
 import { ActivityWorkflow } from "@colijnit/mainapi/build/model/activity-workflow";
-import { OperationCallbackFunctionWithValidation } from "../../../interface/operation-callback-function-with-validation";
+import { SharedService } from "../../../service/shared.service";
 export declare abstract class BaseActivitySummaryComponent implements ScreenConfigAdapterComponent {
     protected dictionaryService: DictionaryService;
     protected dialogService: CoreDialogService;
+    private _sharedService;
     decimals: number;
     forceReadonly: boolean;
     maxLength: number;
@@ -28,8 +29,6 @@ export declare abstract class BaseActivitySummaryComponent implements ScreenConf
     expanded: boolean;
     noBorder: boolean;
     readonly: boolean;
-    canFireTriggerOperation: OperationCallbackSimpleFunction;
-    fireTriggerOperation: OperationCallbackFunctionWithValidation;
     prepareWorkflowOperation: OperationCallbackSimpleFunction;
     loadTaskOperation: OperationCallbackSimpleFunction;
     set triggerToFireOnSave(value: WorkflowTrigger);
@@ -42,7 +41,7 @@ export declare abstract class BaseActivitySummaryComponent implements ScreenConf
     private _workFlow;
     private _task;
     private _triggerToFireOnSave;
-    constructor(dictionaryService: DictionaryService, dialogService: CoreDialogService);
+    constructor(dictionaryService: DictionaryService, dialogService: CoreDialogService, _sharedService: SharedService);
     handleSave(event: MouseEvent): void;
     handleCancel(event: MouseEvent): void;
     handleTriggerClick(trigger: WorkflowTrigger): Promise<void>;

package/lib/components/modify-task-form/components/executive-summary-block/executive-summary-block.component.d.ts CHANGED Viewed

@@ -13,12 +13,12 @@ export declare enum RelationType {
 export declare class ExecutiveSummaryBlockComponent extends BaseActivitySummaryComponent implements OnInit {
     protected dictionaryService: DictionaryService;
     protected dialogService: CoreDialogService;
-    private _sharedService;
+    protected sharedService: SharedService;
     readonly RelationType: typeof RelationType;
     readonly Icon: typeof Icon;
     showClass(): boolean;
     private _textSearchParams;
     personnel: RelationListObject[];
-    constructor(dictionaryService: DictionaryService, dialogService: CoreDialogService, _sharedService: SharedService);
+    constructor(dictionaryService: DictionaryService, dialogService: CoreDialogService, sharedService: SharedService);
     ngOnInit(): Promise<void>;
 }

package/lib/components/modify-task-form/components/status-summary-block/status-summary-block.component.d.ts CHANGED Viewed

@@ -4,12 +4,14 @@ import { BaseActivitySummaryComponent } from "../base-activity-summary.component
 import { Icon } from "../../../../enum/icon.enum";
 import { DictionaryService } from "../../../../service/dictionary.service";
 import { IconCacheService } from "../../../../service/icon-cache.service";
+import { SharedService } from "../../../../service/shared.service";
 export declare class StatusSummaryBlockComponent extends BaseActivitySummaryComponent implements OnInit {
     protected dictionaryService: DictionaryService;
     protected dialogService: CoreDialogService;
     iconService: IconCacheService;
+    protected sharedService: SharedService;
     showClass(): boolean;
     readonly Icon: typeof Icon;
-    constructor(dictionaryService: DictionaryService, dialogService: CoreDialogService, iconService: IconCacheService);
+    constructor(dictionaryService: DictionaryService, dialogService: CoreDialogService, iconService: IconCacheService, sharedService: SharedService);
     ngOnInit(): Promise<void>;
 }

package/lib/components/modify-task-form/components/task-details/task-details.component.d.ts CHANGED Viewed

@@ -5,17 +5,19 @@ import { CoreDialogService } from "@colijnit/corecomponents_v12";
 import { DictionaryService } from "../../../../service/dictionary.service";
 import { Icon } from "../../../../enum/icon.enum";
 import { IconCacheService } from "../../../../service/icon-cache.service";
+import { SharedService } from "../../../../service/shared.service";
 export declare class TaskDetailsComponent extends BaseActivitySummaryComponent {
     protected dictionaryService: DictionaryService;
     protected dialogService: CoreDialogService;
     iconCacheService: IconCacheService;
+    protected sharedService: SharedService;
     readonly Icon: typeof Icon;
     readonly blackListValidatorsArray: AsyncValidatorFn[];
     showStatusDropdown: boolean;
     set activity(value: Activity);
     showClass(): boolean;
     get activity(): Activity;
-    constructor(dictionaryService: DictionaryService, dialogService: CoreDialogService, iconCacheService: IconCacheService);
+    constructor(dictionaryService: DictionaryService, dialogService: CoreDialogService, iconCacheService: IconCacheService, sharedService: SharedService);
     toggleStatusDropdown(): void;
     handleTriggerClickAndClose(trigger: any): void;
 }

package/lib/components/modify-task-form/modify-task-form.component.d.ts CHANGED Viewed

@@ -1,16 +1,16 @@
 import { EventEmitter, OnInit } from "@angular/core";
 import { Activity } from "@colijnit/mainapi/build/model/activity.bo";
-import { Icon } from "../../enum/icon.enum";
-import { ScreenConfigAdapterComponent } from "@colijnit/corecomponents_v12";
+import { IconCacheService, ScreenConfigAdapterComponent } from "@colijnit/corecomponents_v12";
 import { TableName } from "@colijnit/mainapi/build/enum/table-name.enum";
 import { CoDocument } from "@colijnit/mainapi/build/model/co-document";
 import { ActivitiesTaskConfigNames } from "../../interface/activities-task-config-names";
 import { BusinessObjectFactory } from "@colijnit/ioneconnector/build/service/business-object-factory";
 import { SharedService } from "../../service/shared.service";
+import { TagTreeItem } from "@colijnit/mainapi/build/model/tag-tree-item.bo";
 export declare class ModifyTaskFormComponent implements OnInit, ScreenConfigAdapterComponent {
     private _boFactory;
     private sharedService;
-    readonly Icon: typeof Icon;
+    iconCacheService: IconCacheService;
     readonly TableNames: typeof TableName;
     set activity(value: Activity);
     showClass(): boolean;
@@ -34,16 +34,21 @@ export declare class ModifyTaskFormComponent implements OnInit, ScreenConfigAdap
     maxLength: number;
     decimals: number;
     redErrorBackground: boolean;
+    showTagPopup: boolean;
+    allTags: TagTreeItem[];
     private _activity;
     handleAddDocuments(docs: CoDocument[]): void;
     handleAddDocument(doc: CoDocument): void;
-    constructor(_boFactory: BusinessObjectFactory, sharedService: SharedService);
+    constructor(_boFactory: BusinessObjectFactory, sharedService: SharedService, iconCacheService: IconCacheService);
     ngOnInit(): void;
     showContent(menu: string): void;
     handleRegisterWork(): void;
     handleSaveActivity(activity: Activity): void;
     handleDeleteActivity(activity: Activity): void;
     handleShowWorkLow(): void;
+    handleEditTags(): void;
+    handleSaveTags(tags: TagTreeItem[]): void;
     private _updateTaskObject;
     private _getActivities;
+    private _getTags;
 }

package/lib/components/modify-task-form/style/_layout.scss CHANGED Viewed

@@ -34,6 +34,10 @@
     }
     .content-menu-wrapper {
       padding: 30px 0;
+      .co-simple-tags {
+        height: 300px;
+      }
     }
     .content-row-wrapper {
       display: flex;

package/lib/components/open-activity-list/component-activity-list.component.d.ts CHANGED Viewed

@@ -8,30 +8,28 @@ import { ActivitySortType } from "@colijnit/mainapi/build/enum/activity-sort-typ
 import { OperationCallbackSimpleFunction } from "../../interface/operation-callback-simple-function";
 import { PersonalActivityOverviewComponent } from "./components/personal-activity-overview/personal-activity-overview.component";
 import { OperationCallbackFunctionWithValidation } from "../../interface/operation-callback-function-with-validation";
+import { SharedService } from "../../service/shared.service";
+import { TableName } from "@colijnit/mainapi/build/enum/table-name.enum";
 export declare class ComponentActivityListComponent extends BaseActivityListComponent implements OnDestroy {
+    protected sharedService: SharedService;
     readonly tabs: typeof PersonalActivityTabEnum;
     readonly icons: typeof Icon;
     readonly activityClass: typeof Activity;
     readonly activitySortType: typeof ActivitySortType;
     activityOverviewList: QueryList<PersonalActivityOverviewComponent>;
     showClass(): boolean;
-    set table(value: string);
-    get table(): string;
+    set table(value: TableName);
+    get table(): TableName;
     set key(value: string);
     get key(): string;
+    showActivityHeader: boolean;
     hideTitle: boolean;
     noFreeTasks: boolean;
     customTitle: string;
     userGroupId: number;
     relationId: number;
     componentActivitiesMethod: OperationCallbackSimpleFunction;
-    fireGenericTriggerOperation: OperationCallbackFunctionWithValidation;
-    fireTriggerOperation: OperationCallbackFunctionWithValidation;
-    canFireTriggerOperation: OperationCallbackSimpleFunction;
     setHasPausedNotificationsForWorkflowProcessOperation: OperationCallbackFunctionWithValidation;
-    lockTaskOperation: OperationCallbackSimpleFunction;
-    deleteActivityOperation: OperationCallbackSimpleFunction;
-    upsertActivityOperation: OperationCallbackSimpleFunction;
     openLinkClick: EventEmitter<Activity>;
     amountActivityChanged: EventEmitter<number>;
     linkClicked: EventEmitter<{
@@ -39,8 +37,7 @@ export declare class ComponentActivityListComponent extends BaseActivityListComp
         id: string;
     }>;
     formCreated: EventEmitter<void>;
-    genericTriggerFired: EventEmitter<Activity>;
-    triggerFired: EventEmitter<Activity>;
+    refreshRequested: EventEmitter<void>;
     showUsergroupActivitiesChanged: EventEmitter<void>;
     activeTab: PersonalActivityTabEnum;
     activityList: ActivityViewModel[];
@@ -49,8 +46,10 @@ export declare class ComponentActivityListComponent extends BaseActivityListComp
     private _key;
     private _subs;
     private _activitiesList;
-    constructor();
+    constructor(sharedService: SharedService);
+    ngOnInit(): Promise<void>;
     ngOnDestroy(): void;
+    getActivities(): Promise<void>;
     set activitiesList(allActivities: Activity[]);
     get activitiesList(): Activity[];
     getDelegatedActivities(): Promise<void>;

package/lib/components/open-activity-list/components/base-open-activity-list.component.d.ts CHANGED Viewed

@@ -17,6 +17,7 @@ export declare abstract class BaseActivityListComponent implements OnDestroy {
     privateDelegatedActivityListViewModels: ActivityListViewModel[];
     filteredActivityListViewModels: ActivityListViewModel[];
     filteredDelegatedActivityListViewModels: ActivityListViewModel[];
+    private _showUsergroupActivities;
     get showUsergroupActivities(): boolean;
     set showUsergroupActivities(value: boolean);
     private _activities;
@@ -24,6 +25,7 @@ export declare abstract class BaseActivityListComponent implements OnDestroy {
     private _updateInterval;
     constructor();
     ngOnDestroy(): void;
+    abstract getActivities(): any;
     abstract getDelegatedActivities(): any;
     reset(): void;
     applyFilter(): void;

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

@@ -1,7 +1,6 @@
 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 {
@@ -9,6 +8,7 @@ export declare class SimpleTagsComponent {
     sharedService: SharedService;
     readonly icon: typeof Icon;
     set tags(tags: TagTreeItem[]);
+    get tags(): TagTreeItem[];
     set linkedTags(tags: TagTreeItem[]);
     get linkedTags(): TagTreeItem[];
     closeClick: EventEmitter<void>;
@@ -20,12 +20,5 @@ export declare class SimpleTagsComponent {
     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-form/simple-tags-form.component.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+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 SimpleTagsFormComponent {
+    iconCacheService: IconCacheService;
+    sharedService: SharedService;
+    readonly icon: typeof Icon;
+    set tags(tags: TagTreeItem[]);
+    set linkedTags(tags: TagTreeItem[]);
+    get linkedTags(): TagTreeItem[];
+    readonly linkedTagsChange: 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;
+    private _loadThumbnail;
+}

package/lib/components/simple-tags-form/simple-tags-form.module.d.ts ADDED Viewed

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

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

@@ -0,0 +1,257 @@
+@include export-module('co-simple-tags-form-layout') {
+  .co-simple-tags-form {
+    .form-content-wrapper {
+      display: flex;
+      flex-direction: row;
+      width: 600px;
+      height: 600px;
+      max-width: 100%;
+      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;
+          .co-input-text {
+            height: 30px;
+            &:before {
+              display: none;
+            }
+          }
+        }
+        .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;
+        background: $sc-co-simple-tags-collection-item-background-color;
+        &: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;
+        background: $sc-co-simple-tags-collection-item-background-color;
+        .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;
+            width: $sc-co-simple-tags-collection-tag-icon-size;
+            height: $sc-co-simple-tags-collection-tag-icon-size;
+          }
+          .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;
+        }
+      }
+    }
+    .dialog-footer {
+      background-color: $sc-co-simple-tags-dialog-footer-background;
+      border-width: $sc-co-simple-tags-dialog-footer-border-width;
+      border-style: solid;
+      border-color: $sc-co-simple-tags-dialog-footer-border-color;
+      padding: $sc-co-simple-tags-dialog-footer-padding;
+      .co-dialog-footer-button-wrapper {
+        gap: $sc-co-simple-tags-dialog-footer-button-wrapper-gap;
+      }
+    }
+    .save-button {
+      height: $sc-co-simple-tags-dialog-save-button-size;
+      width: $sc-co-simple-tags-dialog-save-button-size;
+      border-color: $sc-co-simple-tags-dialog-button-border-color;
+      border-style: $sc-co-simple-tags-dialog-button-border-style;
+      border-width: $sc-co-simple-tags-dialog-button-border-width;
+      background-color: $sc-co-simple-tags-dialog-button-background-color;
+      padding: $sc-co-simple-tags-dialog-button-padding;
+      box-shadow: $sc-co-simple-tags-dialog-button-box-shadow;
+      cursor: pointer;
+      .co-icon {
+        height: $sc-co-simple-tags-dialog-save-button-icon-size;
+        width: $sc-co-simple-tags-dialog-save-button-icon-size;
+        svg {
+          fill: $sc-co-simple-tags-dialog-save-button-icon-color;
+        }
+      }
+    }
+    .close-button {
+      height: $sc-co-simple-tags-dialog-close-button-size;
+      width: $sc-co-simple-tags-dialog-close-button-size;
+      border-color: $sc-co-simple-tags-dialog-button-border-color;
+      border-style: $sc-co-simple-tags-dialog-button-border-style;
+      border-width: $sc-co-simple-tags-dialog-button-border-width;
+      background-color: $sc-co-simple-tags-dialog-close-button-background-color;
+      padding: $sc-co-simple-tags-dialog-button-padding;
+      box-shadow: $sc-co-simple-tags-dialog-button-box-shadow;
+      cursor: pointer;
+      .co-icon {
+        height: $sc-co-simple-tags-dialog-save-button-icon-size;
+        width: $sc-co-simple-tags-dialog-save-button-icon-size;
+        svg {
+          fill: $sc-co-simple-tags-dialog-save-button-icon-color;
+        }
+        [fill] {
+          fill: $sc-co-simple-tags-dialog-save-button-icon-color;
+        }
+      }
+    }
+    .co-input-checkbox {
+      .checkbox {
+        border-color: #FFFFFF;
+        background-color: #FFFFFF;
+        &.checked {
+          border-color: $sc-co-simple-tags-checkbox-checked-background-color;
+          background-color: $sc-co-simple-tags-checkbox-checked-background-color;
+        }
+        .checkmark {
+          &.show {
+            border-color: #FFFFFF;
+          }
+        }
+      }
+    }
+    .disabled {
+      cursor: default;
+      opacity: 0.6;
+    }
+    .clickable {
+      cursor: pointer;
+    }
+    .co-dialog {
+      .co-dialog-wrapper {
+        background: #f8f8fa;
+        max-height: 90vh;
+        .dialog-header, .dialog-content, .dialog-footer {
+          background: #f8f8fa;
+        }
+      }
+    }
+  }
+}