@syncfusion/ej2-angular-navigations 20.2.50 → 20.3.47

package/schematics/generators/sidebar-backdrop/schema.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "EJ2SchemaTemplateID",
+  "title": "sidebar-backdrop",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path to create the component.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "inlineStyle": {
+      "description": "Specifies if the style will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "s"
+    },
+    "inlineTemplate": {
+      "description": "Specifies if the template will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "t"
+    },
+    "viewEncapsulation": {
+      "description": "Specifies the view encapsulation strategy.",
+      "enum": [
+        "Emulated",
+        "Native",
+        "None",
+        "ShadowDom"
+      ],
+      "type": "string",
+      "alias": "v"
+    },
+    "changeDetection": {
+      "description": "Specifies the change detection strategy.",
+      "enum": [
+        "Default",
+        "OnPush"
+      ],
+      "type": "string",
+      "default": "Default",
+      "alias": "c"
+    },
+    "prefix": {
+      "type": "string",
+      "description": "The prefix to apply to generated selectors.",
+      "alias": "p",
+      "oneOf": [
+        {
+          "maxLength": 0
+        },
+        {
+          "minLength": 1,
+          "format": "html-selector"
+        }
+      ]
+    },
+    "styleext": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css"
+    },
+    "spec": {
+      "type": "boolean",
+      "description": "Specifies if a spec file is generated.",
+      "default": true
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Flag to indicate if a dir is created.",
+      "default": false
+    },
+    "skipImport": {
+      "type": "boolean",
+      "description": "Flag to skip the module import.",
+      "default": false
+    },
+    "selector": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The selector to use for the component."
+    },
+    "module": {
+      "type": "string",
+      "description": "Allows specification of the declaring module.",
+      "alias": "m"
+    },
+    "export": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if declaring module exports the component."
+    },
+    "entryComponent": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if the component is an entry component of declaring module."
+    },
+    "lintFix": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies whether to apply lint fixes after generating the component."
+    }
+  },
+  "required": [
+    "name"
+  ],
+  "id": "sidebar-backdrop"
+}

package/schematics/generators/sidebar-dock/index.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from '@angular-devkit/schematics';
+import { Schema } from './schema';
+export default function (options: Schema): Rule;

package/schematics/generators/sidebar-dock/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const schematics_1 = require("@syncfusion/ej2-angular-base/schematics");
+const sampleDetails = require("./sample-details");
+function default_1(options) {
+    return schematics_1.componentBuilder(options, sampleDetails);
+}
+exports.default = default_1;

package/schematics/generators/sidebar-dock/sample-details.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName: string;
+export declare const sampleName: string;
+export declare const diModules: string;
+export declare const packageName: string;
+export declare const libModules: string;

package/schematics/generators/sidebar-dock/sample-details.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentName = 'sidebar';
+exports.sampleName = 'dock';
+exports.diModules = null;
+exports.packageName = '@syncfusion/ej2-angular-navigations';
+exports.libModules = 'SidebarModule';

package/schematics/generators/sidebar-dock/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css

@@ -0,0 +1,170 @@
+ /* Content area styles */
+
+ .title {
+   text-align: center;
+   font-size: 20px;
+   padding: 15px;
+}
+
+.sub-title {
+   text-align: center;
+   font-size: 16px;
+   padding: 10px;
+}
+
+#wrapper .column {
+   display: inline-block;
+   padding: 10px;
+}
+
+.center {
+   text-align: center;
+   display: none;
+   font-size: 13px;
+   font-weight: 400;
+   margin-top: 20px;
+}
+
+.sb-content-tab .center {
+   display: block;
+}
+/* end of content area styles */
+/* Sidebar styles */
+
+.sb-content-tab #wrapper {
+   display: none;
+}
+
+#dockSidebar.e-sidebar.e-right.e-close {
+   visibility: visible;
+   transform: translateX(0%);
+}
+
+#dockSidebar .e-icons::before {
+   font-size: 25px;
+}
+/* dockbar icon Style */
+
+#dockSidebar .home::before {
+   content: '\e102';
+}
+
+#dockSidebar .profile::before {
+   content: '\e10c';
+}
+
+#dockSidebar .info::before {
+   content: '\e11b';
+}
+
+#dockSidebar .settings::before {
+   content: '\e10b';
+}
+
+#dockSidebar.e-sidebar .expand::before,
+#dockSidebar.e-sidebar.e-right.e-open .expand::before {
+   content: '\e10f';
+}
+
+#dockSidebar.e-sidebar.e-open .expand::before,
+#dockSidebar.e-sidebar.e-right .expand::before {
+   content: '\e10e';
+}
+/* end of dockbar icon Style */
+
+#dockSidebar.e-close .sidebar-item {
+   padding: 5px 20px;
+}
+
+#dockSidebar.e-dock.e-close span.e-text {
+   display: none;
+}
+
+#dockSidebar.e-dock.e-open span.e-text {
+   display: inline-block;
+}
+
+#dockSidebar li {
+   list-style-type: none;
+   cursor: pointer;
+}
+
+#dockSidebar ul {
+   padding: 0px;
+}
+
+#dockSidebar.e-sidebar ul li:hover span {
+   color: white
+}
+
+#dockSidebar.e-sidebar.e-open .e-text {
+   overflow: hidden;
+   text-overflow: ellipsis;
+   line-height: 23px;
+   font-size: 15px;
+}
+
+#dockSidebar.e-sidebar.e-open .e-icons {
+   margin-right: 16px;
+}
+
+#dockSidebar.e-sidebar span.e-icons {
+   color: #c0c2c5;
+   line-height: 2
+}
+
+#dockSidebar.e-sidebar .e-open .e-icons {
+   margin-right: 16px;
+}
+
+#dockSidebar.e-sidebar .e-open .e-text {
+   overflow: hidden;
+   text-overflow: ellipsis;
+   line-height: 23px;
+   font-size: 15px;
+}
+
+.sidebar-item {
+   text-align: center;
+   border-bottom: 1px #e5e5e58a solid;
+}
+
+#dockSidebar.e-sidebar.e-open .sidebar-item {
+   text-align: left;
+   padding-left: 15px;
+   color: #c0c2c5;
+}
+
+#dockSidebar.e-sidebar {
+   background: #2d323e;
+   overflow: hidden;
+}
+
+#left, #right{
+ margin: 3px 3px 0px 5px;
+}
+
+/* custom generated icons styles */
+@font-face {
+   font-family: 'e-icons';
+  src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
+   font-weight: normal;
+   font-style: normal;
+}
+/* end of custom generated icons styles */
+
+.ej2-new #sample-header, .ej2-new .sb-bread-crumb,
+.ej2-new #action-description, .ej2-new #description-section,
+.ej2-new #description, .center,
+.sb-content-tab #wrapper {
+   display: none
+}
+
+.ej2-new .container-fluid, .ej2-new .control-section, #sidebar-section{
+padding: 0px;
+}
+
+.ej2-new .sample-browser .content.e-view {
+top: 0px;
+}
+/* end of sidebar styles */

package/schematics/generators/sidebar-dock/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -0,0 +1,41 @@
+<ejs-sidebar #dockBar id="dockSidebar" [enableDock]='enableDock' [width]='width' [dockSize]='dockSize'>
+    <div class="dock">
+        <ul>
+            <li class="sidebar-item" id="toggle" (click)="toggleClick()">
+                <span class="e-icons expand"></span>
+                <span class="e-text" title="menu">Menu</span>
+            </li>
+            <li class="sidebar-item">
+                <span class="e-icons home"></span>
+                <span class="e-text" title="home">Home</span>
+            </li>
+            <li class="sidebar-item">
+                <span class="e-icons profile"></span>
+                <span class="e-text" title="profile">Profile</span>
+            </li>
+            <li class="sidebar-item">
+                <span class="e-icons info"></span>
+                <span class="e-text" title="info">Info</span>
+            </li>
+            <li class="sidebar-item">
+                <span class="e-icons settings"></span>
+                <span class="e-text" title="settings">Settings</span>
+            </li>
+        </ul>
+    </div>
+</ejs-sidebar>
+<div id="main-content container-fluid col-md-12 ">
+    <div class="title">Main content</div>
+    <div class="sub-title">Click the radio button to switch the sidebar position
+        <div className="center-align">
+            <div class="column">
+              <input type="radio" id="left" name="state" value="left" (change)="positionChange($event)" checked="true">Left<br/>
+            </div>
+            <div class="column">
+          <input type="radio" id="right" name="state" value="right" (change)="positionChange($event)" >Right<br/>
+            </div>
+        </div>
+    </div>
+</div>
+<div>
+</div>

package/schematics/generators/sidebar-dock/schema.d.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+export interface Schema extends ComponentSchema {
+}

package/schematics/generators/sidebar-dock/schema.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/schematics/generators/sidebar-dock/schema.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "EJ2SchemaTemplateID",
+  "title": "sidebar-dock",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path to create the component.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "inlineStyle": {
+      "description": "Specifies if the style will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "s"
+    },
+    "inlineTemplate": {
+      "description": "Specifies if the template will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "t"
+    },
+    "viewEncapsulation": {
+      "description": "Specifies the view encapsulation strategy.",
+      "enum": [
+        "Emulated",
+        "Native",
+        "None",
+        "ShadowDom"
+      ],
+      "type": "string",
+      "alias": "v"
+    },
+    "changeDetection": {
+      "description": "Specifies the change detection strategy.",
+      "enum": [
+        "Default",
+        "OnPush"
+      ],
+      "type": "string",
+      "default": "Default",
+      "alias": "c"
+    },
+    "prefix": {
+      "type": "string",
+      "description": "The prefix to apply to generated selectors.",
+      "alias": "p",
+      "oneOf": [
+        {
+          "maxLength": 0
+        },
+        {
+          "minLength": 1,
+          "format": "html-selector"
+        }
+      ]
+    },
+    "styleext": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css"
+    },
+    "spec": {
+      "type": "boolean",
+      "description": "Specifies if a spec file is generated.",
+      "default": true
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Flag to indicate if a dir is created.",
+      "default": false
+    },
+    "skipImport": {
+      "type": "boolean",
+      "description": "Flag to skip the module import.",
+      "default": false
+    },
+    "selector": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The selector to use for the component."
+    },
+    "module": {
+      "type": "string",
+      "description": "Allows specification of the declaring module.",
+      "alias": "m"
+    },
+    "export": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if declaring module exports the component."
+    },
+    "entryComponent": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if the component is an entry component of declaring module."
+    },
+    "lintFix": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies whether to apply lint fixes after generating the component."
+    }
+  },
+  "required": [
+    "name"
+  ],
+  "id": "sidebar-dock"
+}

package/schematics/generators/sidebar-target/index.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from '@angular-devkit/schematics';
+import { Schema } from './schema';
+export default function (options: Schema): Rule;

package/schematics/generators/sidebar-target/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const schematics_1 = require("@syncfusion/ej2-angular-base/schematics");
+const sampleDetails = require("./sample-details");
+function default_1(options) {
+    return schematics_1.componentBuilder(options, sampleDetails);
+}
+exports.default = default_1;

package/schematics/generators/sidebar-target/sample-details.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName: string;
+export declare const sampleName: string;
+export declare const diModules: string;
+export declare const packageName: string;
+export declare const libModules: string;

package/schematics/generators/sidebar-target/sample-details.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentName = 'sidebar';
+exports.sampleName = 'target';
+exports.diModules = null;
+exports.packageName = '@syncfusion/ej2-angular-navigations';
+exports.libModules = 'SidebarModule';

package/schematics/generators/sidebar-target/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css

@@ -0,0 +1,91 @@
+header {
+   width: 100%;
+   height: 40px;
+   font-size: 20px;
+   line-height: 40px;
+   font-weight: 500;
+   background: #eee;
+   display: inline-block;
+}
+
+.center-align {
+   text-align: center;
+   padding: 20px;
+}
+
+
+.title {
+   text-align: center;
+   font-size: 20px;
+   padding: 15px;
+}
+
+#head {
+   border: 1px solid #424242;
+   border-bottom-color: transparent;
+   background: #00897B;
+}
+
+#toggle,
+#container .e-btn.e-info:hover,
+#toggle:focus {
+   /* csslint allow: adjoining-classes*/
+   background: #00695C;
+   box-shadow: none;
+   border-radius: 0;
+   height: 39px;
+   width: 100px;
+}
+
+#close,
+#close:hover,
+#close:active,
+#close:focus {
+   /* csslint allow: adjoining-classes*/
+   background: #fafafa;
+   color: black
+}
+
+.sub-title {
+   text-align: center;
+   font-size: 16px;
+   padding: 10px;
+}
+
+.center {
+   text-align: center;
+   display: none;
+   font-size: 13px;
+   font-weight: 400;
+   margin-top: 20px;
+}
+
+#wrapper {
+   display: block;
+}
+
+.right {
+   float: right;
+}
+
+body {
+   margin: 0;
+}
+
+#default-sidebar {
+   background-color: #26A69A;
+   color: #ffffff;
+}
+
+.content {
+   height: 325px;
+   border: 1px solid grey;
+}
+
+.close-btn:hover {
+   color: #fafafa;
+}
+
+#toggle {
+   color: white;
+}

package/schematics/generators/sidebar-target/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -0,0 +1,20 @@
+<ejs-sidebar id="default-sidebar" #sidebar [type]='type' [target]='target' >
+    <div class="title"> Sidebar content</div>
+    <div class="sub-title">
+        Click the button to close the Sidebar.
+    </div>
+    <div class="center-align">
+              <input type="button" id="close"  (click)="closeClick()"  class="e-btn close-btn" value="Close Sidebar"/>
+    </div>
+</ejs-sidebar>
+<div id="head">
+    <input type="button" id="toggle"  (click)="btnClick()"  class="e-btn e-flat" value="Open"/>
+
+</div>
+<div  id="maincontent" class="content">
+<div>
+    <div class="title">Main content</div>
+    <div class="sub-title"> Click the button to open/close the Sidebar.</div>
+</div>
+<!--end of main content declaration -->
+</div>

package/schematics/generators/sidebar-target/schema.d.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+export interface Schema extends ComponentSchema {
+}

package/schematics/generators/sidebar-target/schema.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });