dxc-technology · mawelCaballero · Jan 28, 2022 · Jan 26, 2022 · Jan 27, 2022 · Jan 27, 2022
diff --git a/.../dxc-ngx-cdk-site/src/app/components/codesandbox-viewer/codesandbox-viewer.component.html b/.../dxc-ngx-cdk-site/src/app/components/codesandbox-viewer/codesandbox-viewer.component.html
@@ -1,52 +1,32 @@
-<dxc-heading
-  [level]="3"
-  weight="normal"
-  text="Examples"
-  [margin]="{ bottom: 'small' }"
-></dxc-heading>
+<dxc-heading [level]="3" weight="normal" text="Examples" [margin]="{ bottom: 'small' }"></dxc-heading>
 
 <div *ngIf="examples">
   <div *ngFor="let example of examples; first as isFirst">
-    <div [id]="example.iframe.title" class="exampleHeader" [ngClass]="{'first': isFirst}" >
-      <dxc-heading
-        [text]="example.title"
-        [level]="5"
-      ></dxc-heading>
+    <div [id]="example.iframe.title" class="exampleHeader" [ngClass]="{'first': isFirst}">
+      <dxc-heading [text]="example.title" [level]="5"></dxc-heading>
 
       <button class="visibilityButton" (click)="changeVisibility(example)">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="100%"
-          height="100%"
-          viewBox="0 0 24 24"
-          fit=""
-          preserveAspectRatio="xMidYMid meet"
-          focusable="false"
-        >
+        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit=""
+          preserveAspectRatio="xMidYMid meet" focusable="false">
           <path fill="none" d="M0 0h24v24H0V0z"></path>
-          <path
-            _ngcontent-hgo-c501=""
-            d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"
-          ></path>
+          <path _ngcontent-hgo-c501=""
+            d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
         </svg>
         <span *ngIf="!example.visibility">View Example</span>
         <span *ngIf="example.visibility">Hide Example</span>
       </button>
     </div>
 
-    <iframe
-      [src]="example.iframe.src"
-      *ngIf="example.visibility"
-      style="
-        width: 100%;
-        height: 500px;
-        border: 0;
-        border-radius: 4px;
-        overflow: hidden;
-      "
-      title="{{ example.iframe.title }}"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-    ></iframe>
+    <div *ngIf="example.visibility">
+      <iframe [src]="example.iframe.src" style="
+      width: 100%;
+      height: 500px;
+      border: 0;
+      border-radius: 4px;
+      overflow: hidden;
+    " title="{{ example.iframe.title }}" loading="lazy"
+        sandbox="allow-forms allow-presentation allow-same-origin allow-scripts"></iframe>
+    </div>
+
   </div>
 </div>
diff --git a/...ts/dxc-ngx-cdk-site/src/app/components/codesandbox-viewer/codesandbox-viewer.component.ts b/...ts/dxc-ngx-cdk-site/src/app/components/codesandbox-viewer/codesandbox-viewer.component.ts
@@ -1,17 +1,11 @@
-import {
-  Component,
-  OnInit,
-  Input,
-  HostBinding,
-  OnDestroy,
-} from "@angular/core";
+import { Component, OnInit, Input } from "@angular/core";
 import { CodesandboxServiceService } from "../../service/codesandbox-service.service";
-import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
+import { DomSanitizer } from "@angular/platform-browser";
 
 @Component({
   selector: "codesandbox-viewer",
   templateUrl: "./codesandbox-viewer.component.html",
-  styleUrls:["./codesandbox-viewer.component.scss"]
+  styleUrls: ["./codesandbox-viewer.component.scss"],
 })
 export class CodesandboxViewer implements OnInit {
   @Input()
@@ -31,6 +25,7 @@ export class CodesandboxViewer implements OnInit {
       .getExamples(this.path)
       .subscribe((resp) => {
         this.examples = resp;
+        console.log(this.examples);
       });
   }
 
@@ -40,14 +35,16 @@ export class CodesandboxViewer implements OnInit {
 
   changeVisibility(example) {
     example.visibility = !example.visibility;
-    if(example.visibility){
-        const element = document.getElementById(example.iframe.title);
-        element.scrollIntoView({
-          behavior: "auto",
-          block: "start"
-        });
-        setTimeout(()=>{ window.scroll(0,window.pageYOffset+(element.offsetHeight + 25)); }, 10)
-      }
+    if (example.visibility) {
+      const element = document.getElementById(example.iframe.title);
+      element.scrollIntoView({
+        behavior: "auto",
+        block: "start",
+      });
+      setTimeout(() => {
+        window.scroll(0, window.pageYOffset + (element.offsetHeight + 25));
+      }, 10);
+    }
   }
 
   OnDestroy() {

diff --git a/projects/dxc-ngx-cdk-site/src/app/components/codesandbox-viewer/codesandbox-viewer.module.ts b/projects/dxc-ngx-cdk-site/src/app/components/codesandbox-viewer/codesandbox-viewer.module.ts
@@ -1,28 +1,25 @@
 import { NgModule } from "@angular/core";
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { CodesandboxViewer } from './codesandbox-viewer.component';
-import { CodesandboxServiceService } from '../../service/codesandbox-service.service';
-import { DxcHeadingModule } from '@dxc-technology/halstack-angular';
+import { BrowserModule } from "@angular/platform-browser";
+import { FormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import { CodesandboxViewer } from "./codesandbox-viewer.component";
+import { CodesandboxServiceService } from "../../service/codesandbox-service.service";
+import {
+  DxcHeadingModule,
+  DxcSpinnerModule,
+} from "@dxc-technology/halstack-angular";
 
 @NgModule({
-  declarations: [
-    CodesandboxViewer
-  ],
+  declarations: [CodesandboxViewer],
   imports: [
     BrowserModule,
     FormsModule,
     CommonModule,
-    DxcHeadingModule
-  ],
-  exports: [
-    CodesandboxViewer
-  ],
-  entryComponents: [
+    DxcSpinnerModule,
+    DxcHeadingModule,
   ],
-  providers: [
-    CodesandboxServiceService
-  ]
+  exports: [CodesandboxViewer],
+  entryComponents: [],
+  providers: [CodesandboxServiceService],
 })
-export class CodesandboxViewerModule { }
+export class CodesandboxViewerModule {}
diff --git a/projects/dxc-ngx-cdk-site/src/app/service/codesandbox-service.service.ts b/projects/dxc-ngx-cdk-site/src/app/service/codesandbox-service.service.ts
@@ -1,9 +1,8 @@
-import { Injectable, OnDestroy, OnInit } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable, Subscription } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-
+import { Injectable, OnDestroy, OnInit } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { Observable, Subscription } from "rxjs";
+import { map } from "rxjs/operators";
+import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
 
 export interface CodesandboxIframe {
   src: SafeResourceUrl;
@@ -13,34 +12,35 @@ export interface CodesandboxIframe {
 export interface CodeSandboxExample {
   title: string;
   iframe: CodesandboxIframe;
+  visibility: boolean;
 }
 
-
 @Injectable({
-  providedIn: 'root'
+  providedIn: "root",
 })
 export class CodesandboxServiceService {
-
   subscription: Observable<Array<CodeSandboxExample>>;
 
-  constructor(private http: HttpClient, protected _sanitizer: DomSanitizer) {
-  }
+  constructor(private http: HttpClient, protected _sanitizer: DomSanitizer) {}
 
   getExamples(examplePathFile: string): Observable<Array<CodeSandboxExample>> {
-    return this.http.get(examplePathFile).pipe(map((response: any) => {
-      let examples: Array<CodeSandboxExample> = [];
-      if (response?.data && Array.isArray(response?.data)) {
-        examples = response?.data.map((item: any) => ({
-          title: item.title, iframe:
-          {
-            src: this._sanitizer.bypassSecurityTrustResourceUrl(item.iframe.src),
-            title: item.iframe.title
-          },
-          visible: false
-        }));
-      }
-      return examples;
-    }));
+    return this.http.get(examplePathFile).pipe(
+      map((response: any) => {
+        let examples: Array<CodeSandboxExample> = [];
+        if (response?.data && Array.isArray(response?.data)) {
+          examples = response?.data.map((item: any) => ({
+            title: item.title,
+            iframe: {
+              src: this._sanitizer.bypassSecurityTrustResourceUrl(
+                item.iframe.src
+              ),
+              title: item.iframe.title,
+            },
+            visibility: item.visibility ?? false,
+          }));
+        }
+        return examples;
+      })
+    );
   }
-
 }
diff --git a/projects/dxc-ngx-cdk-site/src/assets/examples/accordion-group.json b/projects/dxc-ngx-cdk-site/src/assets/examples/accordion-group.json
@@ -3,23 +3,23 @@
         {
             "title": "Uncontrolled Accordion Group",
             "iframe": {
-                "src": "https://codesandbox.io/embed/defaultaccordiongroup-ggl6p?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+                "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion-group/uncontrolled-accordion-group/uncontrolled-accordion-group.component.html&initialpath=uncontrolledAccordionGroup",
                 "title": "UncontrolledAccordionGroup"
-            }
+            },"visibility":true
         },
         {
             "title": "Controlled Accordion Group",
             "iframe": {
-                "src": "https://codesandbox.io/embed/controlledaccordiongroup-68j5d?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
-                "title": "ControlledAccordionGroup"
+              "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion-group/controlled-accordion-group/controlled-accordion-group.component.html&initialpath=controlledAccordionGroup",
+              "title": "ControlledAccordionGroup"
             }
         },
         {
             "title": "Disabled Accordion Group",
             "iframe": {
-                "src": "https://codesandbox.io/embed/disabledaccordiongroup-gheg4?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+              "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion-group/disabled-accordion-group/disabled-accordion-group.component.html&initialpath=disabledAccordionGroup",
                 "title": "DisabledAccordionGroup"
             }
         }
     ]
-}
+}
diff --git a/projects/dxc-ngx-cdk-site/src/assets/examples/accordion.json b/projects/dxc-ngx-cdk-site/src/assets/examples/accordion.json
@@ -3,37 +3,38 @@
         {
             "title": "Default Accordion",
             "iframe": {
-                "src": "https://codesandbox.io/embed/defaultaccordion-l94dh?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+                "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion/default-accordion/default-accordion.component.html&initialpath=defaultAccordion",
                 "title": "DefaultAccordion"
-            }
+            },
+            "visibility":true
         },
         {
             "title": "Controlled Accordion",
             "iframe": {
-                "src": "https://codesandbox.io/embed/controlledaccordion-ckwrb?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+                "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion/controlled-accordion/controlled-accordion.component.html&initialpath=controlledAccordion",
                 "title": "ControlledAccordion"
             }
         },
         {
             "title": "Accordion with Assistive Text",
             "iframe": {
-                "src": "https://codesandbox.io/embed/assistivetextaccordion-jvolv?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+                "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion/accordion-with-assistive-text/accordion-with-assistive-text.component.html&initialpath=accordionWithAssistiveText",
                 "title": "AssistiveTextAccordion"
             }
         },
         {
             "title": "Accordion with Icon",
             "iframe": {
-                "src": "https://codesandbox.io/embed/iconaccordion-1herc?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+                "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion/accordion-with-icon/accordion-with-icon.component.html&initialpath=accordionWithIcon",
                 "title": "IconAccordion"
             }
         },
         {
             "title": "Disabled Accordion",
             "iframe": {
-                "src": "https://codesandbox.io/embed/disabledaccordion-g4h2e?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+                "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/accordion/disabled-icon/disabled-icon.component.html&initialpath=disabledIconAccordion",
                 "title": "DisabledAccordion"
             }
         }
     ]
-}
+}
diff --git a/projects/dxc-ngx-cdk-site/src/assets/examples/alert.json b/projects/dxc-ngx-cdk-site/src/assets/examples/alert.json
@@ -3,58 +3,58 @@
         {
             "title": "Info Alert",
             "iframe": {
-                "src": "https://codesandbox.io/embed/infoalert-r3bnj?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+                "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/info-alert/info-alert.component.html&initialpath=infoAlert",
                 "title": "InfoAlert"
             }
         },
         {
             "title": "Succes Alert",
             "iframe": {
-                "src": "https://codesandbox.io/embed/succesalert-7k65h?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+                "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/success-alert/success-alert.component.html&initialpath=successAlert",
                 "title": "SuccesAlert"
             }
         },
         {
             "title": "Warning Alert",
             "iframe": {
-                "src": "https://codesandbox.io/embed/warningalert-b5hmo?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+                "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/warning-alert/warning-alert.component.html&initialpath=warningAlert",
                 "title": "WarningAlert"
             }
         },
         {
             "title": "Error Alert",
             "iframe": {
-                "src": "https://codesandbox.io/embed/erroralert-sjgsi?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+                "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/error-alert/error-alert.component.html&initialpath=errorAlert",
                 "title": "ErrorAlert"
             }
         },
         {
             "title": "Sized Alert",
             "iframe": {
-                "src": "https://codesandbox.io/embed/sizedalert-3chkq?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+                "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/sized-alert/sized-alert.component.html&initialpath=sizedAlert",
                 "title": "SizedAlert"
             }
         },
         {
             "title": "Modal Alert",
             "iframe": {
-                "src": "https://codesandbox.io/embed/modalalert-5ond9?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+                "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/modal-alert/modal-alert.component.html&initialpath=modalAlert",
                 "title": "ModalAlert"
             }
         },
         {
             "title": "Closable Inline Alert",
             "iframe": {
-                "src": "https://codesandbox.io/embed/closableinlinealert-oxglr?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+                "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/closable-inline-alert/closable-inline-alert.component.html&initialpath=closableInlineAlert",
                 "title": "ClosableInlineAlert"
             }
         },
         {
             "title": "Alert with children",
             "iframe": {
-                "src": "https://codesandbox.io/embed/alertwithchildren-n7swg?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark",
+                "src": "https://stackblitz.com/edit/halstack-angular-examples?file=src/app/views/alert/alert-with-children/alert-with-children.component.html&initialpath=alertWithChildren",
                 "title": "AlertWithChildren"
             }
         }
     ]
-}
+}