@colijnit/corecomponents_v12 254.1.2 → 254.1.4

package/lib/components/list-of-icons/list-of-icons.component.d.ts

@@ -0,0 +1,16 @@
+import { OnInit } from "@angular/core";
+import { IconCacheService } from "../icon/icon-cache.service";
+export declare class ListOfIconsComponent implements OnInit {
+    icons: IconCacheService;
+    set collection(value: any[]);
+    get collection(): any[];
+    showClass(): boolean;
+    readonly Icon: any;
+    showMenu: boolean;
+    activeItem: any;
+    private _collection;
+    constructor(icons: IconCacheService);
+    ngOnInit(): void;
+    toggleMenu(): void;
+    selectItem(item: any): void;
+}

package/lib/components/list-of-icons/list-of-icons.module.d.ts

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

package/lib/components/list-of-icons/style/_layout.scss

@@ -0,0 +1,71 @@
+@include export-module('co-list-of-icons-layout') {
+  .co-list-of-icons {
+    display: block;
+    padding: 8px;
+    font-family: $cc-co-input-text-font-family;
+    font-size: $cc-co-input-text-font-size;
+    background: $cc-co-list-of-values-background-color;
+  }
+
+  .icon-item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+
+    .drop-arrow {
+      position: absolute;
+      top: 8px;
+      right: -14px;
+    }
+
+    .co-icon svg {
+      fill: $color-menu;
+    }
+
+    .label {
+      margin-top: 2px;
+    }
+
+    &.menu-opened {
+      .drop-arrow {
+        transform: rotate(180deg);
+      }
+    }
+
+    &:hover,
+    &.menu-opened {
+      .co-icon svg {
+        fill: $color-action;
+      }
+
+      .label {
+        color: $color-action;
+      }
+    }
+  }
+
+  .dropdown-menu {
+    padding-top: 10px;
+
+    .icon-item {
+      margin-bottom: 8px;
+
+      &:last-of-type {
+        margin: 0;
+      }
+
+      &.active {
+        .co-icon svg {
+          fill: $color-action;
+        }
+
+        .label {
+          color: $color-action;
+        }
+      }
+    }
+  }
+}
+

package/lib/components/list-of-icons/style/_material-definition.scss

@@ -0,0 +1,20 @@
+$cc-co-input-text-font-family: $cc-font-family !default;
+$cc-co-input-text-font-size: $cc-font-size-default !default;
+$cc-co-input-text-font-color: $cc-color-dark !default;
+$cc-co-input-text-background-color: white !default;
+$cc-co-input-text-border-color: $cc-color-border !default;
+$cc-co-input-placeholder-color: $cc-color-border !default;
+$cc-co-input-placeholder-font-style: italic !default;
+$cc-co-input-text-small-height: 45px !default;
+$cc-co-input-text-icon-max-height: $cc-item-size !default;
+$cc-co-input-text-icon-size: 50% !default;
+$cc-co-input-text-icon-margin-number: 0 !default;
+$cc-co-input-text-spacer-width: $cc-input-border-width !default;
+$cc-co-input-text-right-spacer-width: 0 !default;
+$cc-co-input-text-spacer-color: $cc-input-border-color !default;
+$cc-co-list-of-values-background-color: white !default;
+$cc-co-list-of-values-lov-options-border: 1px solid $cc-input-border-color !default;
+$color-menu: #6b6e8a;
+$color-action: #1A73E8;
+//$cc-co-input-label-color: $cc-color-border !default;
+//$cc-co-input-label-font-style: normal !default;

package/lib/components/list-of-icons/style/_theme.scss

@@ -0,0 +1,5 @@
+@include export-module('co-list-of-icons-theme') {
+  .co-list-of-icons {
+
+  }
+}

package/lib/components/list-of-icons/style/material.scss

@@ -0,0 +1,7 @@
+@import "../../../style/mixin";
+@import "../../../style/input.mixins";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../validation-error/style/material";
+@import "../../base/commit-buttons/style/material";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/corecomponents_v12",
-  "version": "254.1.2",
+  "version": "254.1.4",
   "description": "Colijn IT core components for Angular 12",
   "private": false,
   "peerDependencies": {

package/public-api.d.ts

@@ -74,6 +74,8 @@ export * from './lib/components/view-mode-buttons/content-view-mode.enum';
 export * from './lib/components/list-of-values/list-of-values.component';
 export * from './lib/components/list-of-values/list-of-values-popup.component';
 export * from './lib/components/list-of-values/list-of-values.module';
+export * from './lib/components/list-of-icons/list-of-icons.component';
+export * from './lib/components/list-of-icons/list-of-icons.module';
 export * from './lib/components/responsive-text/responsive-text.component';
 export * from './lib/components/responsive-text/responsive-text.module';
 export * from './lib/components/color-picker/color-picker.component';