angular-exemplify - npm Package Compare versions

Comparing version 1.0.0-rc.2 to 1.0.0

CHANGELOG.md

 Release History
 ---------------
 ## [Unreleased]
+# [1.0.0] - 2017-01-03
+
+### Added
+- Added show/hide toggle function
+
+### Changed
+- Behaviour for nested elements, ie. if element becomes nested due to `*ngIf` or other directives
+
 # [1.0.0-rc.1] - 2017-01-03
@@ -5,0 +13,0 @@

exemplify/directives/add-example.directive.d.ts

@@ -18,3 +18,6 @@ import { ElementRef, Renderer, AfterContentInit } from '@angular/core';
     keepInputs: boolean;
+    nested: boolean;
+    visibility: boolean;
     private copyMarkup;
+    private hideMarkup;
     private hostElement;
@@ -34,2 +37,3 @@ private element;
     private lastClass;
+    private toggleState;
     constructor(el: ElementRef, renderer: Renderer, winRef: WindowRef, _viewContainerRef: ViewContainerRef, sourceService: SourceService);
@@ -44,2 +48,3 @@ /**
     private addLink;
+    private addHide;
     private addCopy;
@@ -50,2 +55,3 @@ private getHtmlMarkup;
     private removeActiveClass;
+    private toggleVisibility;
     ngOnDestroy(): void;
@@ -52,0 +58,0 @@ }

exemplify/directives/add-example.directive.js

@@ -38,2 +38,4 @@ "use strict";
         this.keepInputs = false;
+        this.nested = false;
+        this.visibility = true;
         this.activeListeners = [];
@@ -98,2 +100,3 @@ /**
             }
+            this.toggleVisibility(this.pre, true);
         };
@@ -125,2 +128,18 @@ this.addLink = function (hostElement, name, code, language) {
         };
+        this.addHide = function (hostElement, navElement) {
+            var _this = this;
+            /** Create link for copying markup */
+            this.toggleState = this.renderer.createElement(navElement, 'a');
+            var toggleState = this.renderer.createText(this.toggleState, 'Hide');
+            this.renderer.setElementAttribute(this.toggleState, 'href', '#');
+            this.renderer.setElementClass(this.toggleState, 'link-hide', true);
+            this.renderer.setElementClass(this.toggleState, 'text-muted', true);
+            /** Add click listener for copying markup example */
+            this.hideMarkup = this.renderer.listen(this.toggleState, 'click', function (event) {
+                event.preventDefault();
+                //let content = this.parser.parseFromString(this.code.innerHTML,"text/html").body.childNodes[0].textContent;
+                _this.toggleVisibility(toggleState);
+            });
+            this.activeListeners.push(this.hideMarkup);
+        };
         this.addCopy = function (hostElement, navElement) {
@@ -141,4 +160,2 @@ var _this = this;
             this.activeListeners.push(this.copyMarkup);
-            // ...add code container
-            this.addCodeContainer(hostElement);
         };
@@ -148,4 +165,5 @@ this.getHtmlMarkup = function () {
             var markupExampleCode;
+            console.log(markupExampleCode);
             // check if directive is nested...
-            if (this._viewContainerRef._element.parentView.parentIndex === 0) {
+            if (!this.nested) {
                 markupExampleCode = Reflect.getMetadata('annotations', Object.getPrototypeOf(this._viewContainerRef._element.parentView.context).constructor);
@@ -161,4 +179,8 @@ }
                 markupExampleCode = this.parser.parseFromString(markupExampleCode[0].template, "text/html").querySelectorAll('[addexample]')[0];
-                console.log('no id attribute set for example element, returning first match.');
+                console.log('Exemplify warning! No id set for example element, returning first match.');
             }
+            if (typeof markupExampleCode === 'undefined') {
+                console.log('Exemplify warning! Component not found, have you applied ngIf*? If so try adding [nested]="true"');
+                return;
+            }
             if (this.keepInputs !== true) {
@@ -173,2 +195,3 @@ markupExampleCode.removeAttribute("addexample");
                 markupExampleCode.removeAttribute("[useprism]");
+                markupExampleCode.removeAttribute("[nested]");
             }
@@ -205,2 +228,22 @@ /** Add markup content */
         };
+        this.toggleVisibility = function (element, forceShow) {
+            if (forceShow) {
+                this.renderer.setElementStyle(this.pre, 'display', 'block');
+                this.toggleState.innerHTML = "Hide";
+                this.visibility = true;
+                return;
+            }
+            if (this.visibility) {
+                this.removeActiveClass();
+                this.renderer.setElementStyle(this.pre, 'display', 'none');
+            }
+            else {
+                if (this.activeItem) {
+                    this.renderer.setElementClass(this.activeItem, 'active', true);
+                }
+                this.renderer.setElementStyle(this.pre, 'display', 'block');
+            }
+            this.visibility = !this.visibility;
+            this.renderer.setText(element, this.visibility ? 'Hide' : 'Show');
+        };
         this.hostElement = el.nativeElement;
@@ -229,2 +272,6 @@ this.renderer = renderer;
         var nav = this.renderer.createElement(hostElement, 'ul');
+        var func = this.renderer.createElement(nav, 'div');
+        var funcSpan = this.renderer.createElement(func, 'span');
+        this.renderer.createText(funcSpan, 'Example:');
+        this.renderer.setElementClass(funcSpan, ('exemplify-label'), true);
         this.renderer.setElementClass(nav, ('nav'), true);
@@ -249,7 +296,13 @@ this.renderer.setElementClass(nav, ('nav-' + this.navStyle), true);
             rxjs_1.Observable.forkJoin(links).subscribe(function (res) {
-                _this.addCopy(hostElement, nav);
+                _this.addCopy(hostElement, func);
+                _this.addHide(hostElement, func);
+                // ...add code container
+                _this.addCodeContainer(hostElement);
             });
         }
         else {
-            this.addCopy(hostElement, nav);
+            this.addCopy(hostElement, func);
+            this.addHide(hostElement, func);
+            // ...add code container
+            this.addCodeContainer(hostElement);
         }
@@ -282,2 +335,4 @@ };
         'keepInputs': [{ type: core_2.Input },],
+        'nested': [{ type: core_2.Input },],
+        'visibility': [{ type: core_2.Input },],
     };
@@ -284,0 +339,0 @@ return AddExampleDirective;

exemplify/directives/add-example.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"WindowRef":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}]},"AddExampleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[AddExample]"}]}],"members":{"target":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"source":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"customClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"externalSources":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"usePrism":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"navStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"keepInputs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","name":"WindowRef"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","module":"../services/source.service","name":"SourceService"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"WindowRef":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}]},"AddExampleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[AddExample]"}]}],"members":{"target":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"source":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"customClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"externalSources":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"usePrism":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"navStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"keepInputs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","name":"WindowRef"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","module":"../services/source.service","name":"SourceService"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"WindowRef":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}]},"AddExampleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[AddExample]"}]}],"members":{"target":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"source":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"customClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"externalSources":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"usePrism":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"navStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"keepInputs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"nested":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"visibility":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","name":"WindowRef"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","module":"../services/source.service","name":"SourceService"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"WindowRef":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}]},"AddExampleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[AddExample]"}]}],"members":{"target":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"source":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"customClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"externalSources":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"usePrism":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"navStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"keepInputs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"nested":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"visibility":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","name":"WindowRef"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","module":"../services/source.service","name":"SourceService"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]

exemplify/directives/add-example.directive.ngsummary.json

@@ -1,1 +0,1 @@
-{"summaries":[{"symbol":{"__symbol":0},"metadata":{"__symbolic":"class"},"type":{"summaryKind":3,"type":{"reference":{"__symbol":0},"diDeps":[],"lifecycleHooks":[]}}},{"symbol":{"__symbol":1},"metadata":{"__symbolic":"class"},"type":{"summaryKind":1,"type":{"reference":{"__symbol":1},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":2}}}},{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":3}}}},{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":0}}}},{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":4}}}},{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":5}}}}],"lifecycleHooks":[1,4]},"isComponent":false,"selector":"[AddExample]","inputs":{"target":"target","source":"source","customClass":"customClass","externalSources":"externalSources","usePrism":"usePrism","navStyle":"navStyle","keepInputs":"keepInputs"},"outputs":{},"hostListeners":{},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[],"entryComponents":[],"changeDetection":null,"template":null}}],"symbols":[{"__symbol":0,"name":"WindowRef","filePath":"C:/dev/angular-exemplify/src/exemplify/directives/add-example.directive.d.ts"},{"__symbol":1,"name":"AddExampleDirective","filePath":"C:/dev/angular-exemplify/src/exemplify/directives/add-example.directive.d.ts"},{"__symbol":2,"name":"ElementRef","filePath":"C:/dev/angular-exemplify/node_modules/@angular/core/src/linker/element_ref.d.ts"},{"__symbol":3,"name":"Renderer","filePath":"C:/dev/angular-exemplify/node_modules/@angular/core/src/render/api.d.ts"},{"__symbol":4,"name":"ViewContainerRef","filePath":"C:/dev/angular-exemplify/node_modules/@angular/core/src/linker/view_container_ref.d.ts"},{"__symbol":5,"name":"SourceService","filePath":"C:/dev/angular-exemplify/src/exemplify/services/source.service.d.ts"}]}
+{"summaries":[{"symbol":{"__symbol":0},"metadata":{"__symbolic":"class"},"type":{"summaryKind":3,"type":{"reference":{"__symbol":0},"diDeps":[],"lifecycleHooks":[]}}},{"symbol":{"__symbol":1},"metadata":{"__symbolic":"class"},"type":{"summaryKind":1,"type":{"reference":{"__symbol":1},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":2}}}},{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":3}}}},{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":0}}}},{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":4}}}},{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":5}}}}],"lifecycleHooks":[1,4]},"isComponent":false,"selector":"[AddExample]","inputs":{"target":"target","source":"source","customClass":"customClass","externalSources":"externalSources","usePrism":"usePrism","navStyle":"navStyle","keepInputs":"keepInputs","nested":"nested","visibility":"visibility"},"outputs":{},"hostListeners":{},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[],"entryComponents":[],"changeDetection":null,"template":null}}],"symbols":[{"__symbol":0,"name":"WindowRef","filePath":"C:/dev/angular-exemplify/src/exemplify/directives/add-example.directive.d.ts"},{"__symbol":1,"name":"AddExampleDirective","filePath":"C:/dev/angular-exemplify/src/exemplify/directives/add-example.directive.d.ts"},{"__symbol":2,"name":"ElementRef","filePath":"C:/dev/angular-exemplify/node_modules/@angular/core/src/linker/element_ref.d.ts"},{"__symbol":3,"name":"Renderer","filePath":"C:/dev/angular-exemplify/node_modules/@angular/core/src/render/api.d.ts"},{"__symbol":4,"name":"ViewContainerRef","filePath":"C:/dev/angular-exemplify/node_modules/@angular/core/src/linker/view_container_ref.d.ts"},{"__symbol":5,"name":"SourceService","filePath":"C:/dev/angular-exemplify/src/exemplify/services/source.service.d.ts"}]}

package.json

 {
   "name": "angular-exemplify",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -50,3 +50,3 @@ # Angular Exemplify
 import { AppComponent } from './app.component';
-import { ExemplifyModule } from "../exemplify/exemplify.module";
+import { ExemplifyModule } from "angular-exemplify";
 
@@ -88,2 +88,3 @@ @NgModule({
 | keepInputs      | boolean | keep attributes attached to the directive element                                                                                                                     | false             |
+| nested          | boolean | is example element nested inside `*ngIf` etc.                                                                                                                         | false             |
 
@@ -90,0 +91,0 @@ **Using external sources**

src/exemplify/directives/add-example.directive.ts

@@ -33,4 +33,7 @@ import {Directive, ElementRef, Renderer, AfterContentInit} from '@angular/core';
   @Input() keepInputs:boolean = false;
+  @Input() nested:boolean = false;
+  @Input() visibility:boolean = true;
 
   private copyMarkup: Function;
+  private hideMarkup: Function;
   private hostElement;
@@ -50,2 +53,3 @@ private element;
   private lastClass;
+  private toggleState;
   constructor(el: ElementRef, renderer: Renderer, private winRef: WindowRef, private _viewContainerRef: ViewContainerRef, private sourceService:SourceService) {
@@ -106,2 +110,6 @@
     const nav = this.renderer.createElement(hostElement, 'ul');
+    const func = this.renderer.createElement(nav, 'div');
+    const funcSpan = this.renderer.createElement(func, 'span');
+    this.renderer.createText(funcSpan,'Example:');
+    this.renderer.setElementClass(funcSpan, ('exemplify-label'),true);
     this.renderer.setElementClass(nav, ('nav'),true);
@@ -127,8 +135,13 @@ this.renderer.setElementClass(nav, ('nav-'+this.navStyle),true);
         res => {
-          this.addCopy(hostElement,nav);
-
+          this.addCopy(hostElement,func);
+          this.addHide(hostElement,func);
+          // ...add code container
+          this.addCodeContainer(hostElement);
         }
       );
     } else {
-      this.addCopy(hostElement,nav);
+      this.addCopy(hostElement,func);
+      this.addHide(hostElement,func);
+      // ...add code container
+      this.addCodeContainer(hostElement);
     }
@@ -167,2 +180,3 @@
     }
+    this.toggleVisibility(this.pre,true);
   };
@@ -199,2 +213,19 @@
 
+  private addHide = function(hostElement,navElement) {
+    /** Create link for copying markup */
+    this.toggleState = this.renderer.createElement(navElement, 'a');
+    let toggleState = this.renderer.createText(this.toggleState,'Hide');
+    this.renderer.setElementAttribute(this.toggleState,'href','#');
+    this.renderer.setElementClass(this.toggleState, 'link-hide',true);
+    this.renderer.setElementClass(this.toggleState, 'text-muted',true);
+
+    /** Add click listener for copying markup example */
+    this.hideMarkup = this.renderer.listen(this.toggleState, 'click', (event) => {
+      event.preventDefault();
+      //let content = this.parser.parseFromString(this.code.innerHTML,"text/html").body.childNodes[0].textContent;
+      this.toggleVisibility(toggleState);
+    });
+    this.activeListeners.push(this.hideMarkup);
+  };
+
   private addCopy = function(hostElement,navElement) {
@@ -215,5 +246,2 @@ /** Create link for copying markup */
     this.activeListeners.push(this.copyMarkup);
-
-    // ...add code container
-    this.addCodeContainer(hostElement);
   };
@@ -228,4 +256,5 @@
 
+    console.log(markupExampleCode);
     // check if directive is nested...
-    if((<any>this._viewContainerRef)._element.parentView.parentIndex === 0){
+    if(!this.nested){
      markupExampleCode = Reflect.getMetadata('annotations', Object.getPrototypeOf((<any>this._viewContainerRef)._element.parentView.context).constructor);
@@ -242,4 +271,8 @@
       markupExampleCode = this.parser.parseFromString(markupExampleCode[0].template,"text/html").querySelectorAll('[addexample]')[0];
-      console.log('no id attribute set for example element, returning first match.');
+      console.log('Exemplify warning! No id set for example element, returning first match.');
     }
+    if(typeof markupExampleCode === 'undefined'){
+      console.log('Exemplify warning! Component not found, have you applied ngIf*? If so try adding [nested]="true"');
+      return
+    }
     if(this.keepInputs !== true) {
@@ -254,2 +287,3 @@ markupExampleCode.removeAttribute("addexample");
       markupExampleCode.removeAttribute("[useprism]");
+      markupExampleCode.removeAttribute("[nested]");
     }
@@ -292,2 +326,23 @@
 
+  private toggleVisibility = function(element, forceShow?:boolean) {
+    if(forceShow){
+      this.renderer.setElementStyle(this.pre, 'display','block');
+      this.toggleState.innerHTML = "Hide";
+      this.visibility = true;
+      return
+    }
+    if(this.visibility){
+      this.removeActiveClass();
+      this.renderer.setElementStyle(this.pre, 'display','none');
+    } else {
+      if(this.activeItem) {
+        this.renderer.setElementClass(this.activeItem, 'active', true);
+      }
+      this.renderer.setElementStyle(this.pre, 'display','block');
+    }
+    this.visibility = !this.visibility;
+    this.renderer.setText(element,this.visibility ? 'Hide':'Show');
+
+  };
+
   ngOnDestroy() {
@@ -294,0 +349,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

71525

increased by14.47%

Lines of code

895

increased by15.78%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

106

increased by0.95%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes