Merge pull request #7339 from IgniteUI/hPopov/new-component

chore(*): Fix failing tests

Author: zdrawku

package-lock.json

@@ -58,6 +58,7 @@
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.6.11",
     "hammerjs": "^2.0.8",
+    "igniteui-trial-watermark": "^1.0.3",
     "jszip": "^3.4.0",
     "resize-observer-polyfill": "^1.5.1",
     "rxjs": "^6.5.4",

package.json

@@ -10,6 +10,7 @@
       "@types/jszip",
       "hammerjs",
       "jszip",
-      "resize-observer-polyfill"
+      "resize-observer-polyfill",
+      "igniteui-trial-watermark"
     ]
 }

projects/igniteui-angular/ng-package.json

@@ -12,6 +12,7 @@
       "@types/jszip",
       "hammerjs",
       "jszip",
-      "resize-observer-polyfill"
+      "resize-observer-polyfill",
+      "igniteui-trial-watermark"
     ]
 }

projects/igniteui-angular/ng-package.prod.json

@@ -70,7 +70,8 @@
         "@types/jszip": "^3.1.7",
         "hammerjs": "^2.0.8",
         "jszip": "^3.3.0",
-        "resize-observer-polyfill": "^1.5.1"
+        "resize-observer-polyfill": "^1.5.1",
+        "igniteui-trial-watermark": "^1.0.3"
     },
     "peerDependencies": {
         "@angular/common": "^9.0.0",

projects/igniteui-angular/package.json

@@ -28,6 +28,7 @@ export const DEPENDENCIES_MAP: PackageEntry[] = [
         { name: 'resize-observer-polyfill', target: PackageTarget.REGULAR },
         { name: '@types/hammerjs', target: PackageTarget.DEV },
         { name: '@types/jszip', target: PackageTarget.DEV },
+        { name: 'igniteui-trial-watermark', target: PackageTarget.NONE },
         // peerDependencies
         { name: '@angular/forms', target: PackageTarget.NONE },
         { name: '@angular/common', target: PackageTarget.NONE },

projects/igniteui-angular/schematics/utils/dependency-handler.ts

@@ -0,0 +1,23 @@
+////
+/// @access privet
+/// @group components
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+
+@include b(igx-watermark) {
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+
+    @extend %igx-watermark !optional;
+
+    @include e(link) {
+        @extend %igx-watermark__link !optional;
+    }
+
+    @include e(background-img) {
+        @extend %igx-watermark__background-img !optional;
+    }
+}

projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-component.scss

@@ -0,0 +1,114 @@
+////
+/// @group themes
+/// @access privet
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// Returns a map containing all style properties related to the theming the watermark directive.
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+///
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires extend
+/// @requires text-contrast
+/// @requires round-borders
+///
+/// @example scss Change the watermark background
+///   $my-watermark-theme: igx-watermark-theme($background: magenta);
+///   // Pass the theme to the igx-watermark component mixin
+///   @include igx-watermark($my-checkbox-theme);
+@function igx-watermark-theme(
+    $palette: $default-palette,
+    $schema: $light-schema,
+
+    $border-radius: null,
+    $background-image: null,
+    $link-background: null,
+    $color: null,
+    $border-color: null,
+) {
+    $name: 'igx-watermark';
+    $watermark-schema: ();
+
+    @if map-has-key($schema, $name) {
+        $watermark-schema: map-get($schema, $name);
+    } @else {
+        $watermark-schema: $schema;
+    }
+
+    $theme: apply-palette($watermark-schema, $palette);
+
+    $border-radius: round-borders(
+        if($border-radius, $border-radius, map-get($watermark-schema, 'border-radius')), 0, 16px
+    );
+
+    @if not($color) and $link-background {
+        $color: text-contrast($link-background);
+    }
+
+    @return extend($theme, (
+        name: $name,
+        palette: $default-palette,
+        background-image: $background-image,
+        link-background: $link-background,
+        border-radius: $border-radius,
+        color: $color,
+        border-color: $border-color,
+    ));
+}
+
+/// @param {Map} $theme - The theme used to style the component.
+/// @requires {mixin} igx-root-css-vars
+/// @requires --var
+@mixin igx-watermark($theme) {
+    @include igx-root-css-vars($theme);
+
+    %igx-watermark {
+        display: block;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 10000;
+        pointer-events: none;
+    }
+
+    %igx-watermark__link {
+        display: inline-flex;
+        align-items: center;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        font-size: rem(14px);
+        padding: rem(2px) rem(4px);
+        line-height: normal;
+        border: 1px solid --var($theme, 'border-color');
+        color: --var($theme, 'color');
+        z-index: 10002;
+        background-color: --var($theme, 'link-background');
+        pointer-events: all;
+        text-decoration: none;
+    }
+
+    %igx-watermark__background-img {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 10001;
+        pointer-events: none;
+        background-image: --var($theme, 'background-image');
+        background-repeat: repeat;
+        background-position: rem(16px) rem(16px);
+        // Target only IE 10,11.
+        @media all and (-ms-high-contrast:none)
+        {
+            background-image: none;
+        }
+        // END Target only IE 10,11.
+    }
+}

projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss

@@ -62,6 +62,7 @@
 @import '../components/toast/toast-component';
 @import '../components/tooltip/tooltip-component';
 @import '../components/time-picker/time-picker-component';
+@import '../components/watermark/watermark-component';
 @import '../print/index';
 
 /// Includes the base for each theme.
@@ -97,3 +98,4 @@
         @include igx-print-layout();
     }
 }
+

projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

@@ -46,6 +46,7 @@
 @import './time-picker';
 @import './toast';
 @import './tooltip';
+@import './watermark';
 
 /// The default dark schema for all components.
 /// @type {Map}
@@ -136,7 +137,8 @@ $dark-schema: (
     igx-tabs: $_dark-tabs,
     igx-time-picker: $_dark-time-picker,
     igx-toast: $_dark-toast,
-    igx-tooltip: $_dark-tooltip
+    igx-tooltip: $_dark-tooltip,
+    igx-watermark: $_dark-watermark,
 );
 
 /// The default dark fluent schema for all components.
@@ -228,7 +230,8 @@ $dark-fluent-schema: (
     igx-tabs: $_dark-fluent-tabs,
     igx-time-picker: $_dark-fluent-time-picker,
     igx-toast: $_dark-fluent-toast,
-    igx-tooltip: $_dark-fluent-tooltip
+    igx-tooltip: $_dark-fluent-tooltip,
+    igx-watermark: $_dark-fluent-watermark
 );
 
 /// The default dark bootstrap schema for all components.
@@ -320,5 +323,6 @@ $dark-bootstrap-schema: (
     igx-tabs: $_dark-bootstrap-tabs,
     igx-time-picker: $_dark-bootstrap-time-picker,
     igx-toast: $_dark-bootstrap-toast,
-    igx-tooltip: $_dark-bootstrap-tooltip
+    igx-tooltip: $_dark-bootstrap-tooltip,
+    igx-watermark: $_dark-bootstrap-watermark
 );