demo fixes

demos/cardview/settings/src/app/app.component.html

@@ -1,28 +1,24 @@
 <div class="options" style="position: absolute; right: 10px;">
-  <smart-check-box #collapsible id="collapsible" [checked]="true"
-    >Collapsible cards</smart-check-box
-  >
-  <smart-check-box #icons id="icons" [checked]="true">Icons</smart-check-box>
+  <smart-check-box id="collapsible" [checked]="true" (onChange)="handleCollapsibleChange($event)">Collapsible
+    cards</smart-check-box>
+  <smart-check-box id="icons" [checked]="true" (onChange)="handleIconsChange()">Icons</smart-check-box>
   <div>
     <p>Cell orientation:</p>
-    <smart-radio-button #horizontal id="horizontal" [checked]="true"
-      >horizontal</smart-radio-button
-    >
-    <smart-radio-button #vertical id="vertical">vertical</smart-radio-button>
+    <smart-radio-button id="horizontal" [checked]="true"
+      (onChange)="handleCellsOrientationChange('horizontal')">horizontal</smart-radio-button>
+    <smart-radio-button id="vertical"
+      (onChange)="handleCellsOrientationChange('vertical')">vertical</smart-radio-button>
   </div>
   <div>
     <p>Cover mode:</p>
-    <smart-radio-button #crop id="crop" [checked]="true"
-      >crop</smart-radio-button
-    >
-    <smart-radio-button #fit id="fit">fit</smart-radio-button>
+    <smart-radio-button id="crop" [checked]="true"
+      (onChange)="handleImageCoverModeChange('crop')">crop</smart-radio-button>
+    <smart-radio-button id="fit" (onChange)="handleImageCoverModeChange('fit')">fit</smart-radio-button>
   </div>
   <p>Title:</p>
-  <smart-drop-down-list
-    #titleField
-    id="titleField"
-    data-source='["First name", "Last name", "Pet name"]'
-    selected-indexes="[0]"
-  ></smart-drop-down-list>
+  <smart-drop-down-list #titleFieldComponent id="titleField" data-source='["First name", "Last name", "Pet name"]'
+    selected-indexes="[0]"></smart-drop-down-list>
 </div>
-<smart-card-view #cardview id="cardView"></smart-card-view>
+<smart-card-view #cardview id="cardView" [dataSource]="dataSource" [columns]="columns"
+  [cellOrientation]="cellOrientation" [collapsible]="collapsible" [coverField]="coverField"
+  [titleField]="titleField"></smart-card-view>

demos/cardview/settings/src/app/app.component.ts

@@ -1,44 +1,139 @@
-import { Component, ViewChild, OnInit, AfterViewInit } from "@angular/core";
+import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from "@angular/core";
 import {
   CardViewComponent,
   Smart
 } from "@smart-webcomponents-angular/cardview";
-import { CheckBoxComponent } from "@smart-webcomponents-angular/checkbox";
 import { DropDownListComponent } from "@smart-webcomponents-angular/dropdownlist";
-import { RadioButtonComponent } from "@smart-webcomponents-angular/radiobutton";
 
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.css"]
+  styleUrls: ["./app.component.css"],
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent implements AfterViewInit, OnInit {
   @ViewChild("cardview", { read: CardViewComponent, static: false })
-  cardview: CardViewComponent;
-  @ViewChild("collapsible", { read: CheckBoxComponent, static: false })
-  collapsible: CheckBoxComponent;
-  @ViewChild("icons", { read: CheckBoxComponent, static: false })
-  icons: CheckBoxComponent;
-  @ViewChild("titleField", { read: DropDownListComponent, static: false })
-  titleField: DropDownListComponent;
-  @ViewChild("horizontal", { read: RadioButtonComponent, static: false })
-  horizontal: RadioButtonComponent;
-  @ViewChild("vertical", { read: RadioButtonComponent, static: false })
-  vertical: RadioButtonComponent;
-  @ViewChild("crop", { read: RadioButtonComponent, static: false })
-  crop: RadioButtonComponent;
-  @ViewChild("fit", { read: RadioButtonComponent, static: false })
-  fit: RadioButtonComponent;
+  cardview!: CardViewComponent;
+  @ViewChild("titleFieldComponent", { read: DropDownListComponent, static: false })
+  titleFieldComponent!: DropDownListComponent;
 
-  photoFormatFunction(settings) {
+  dataSource = new Smart.DataAdapter({
+    dataSource: this.sampleData,
+    dataFields: [
+      "firstName: string",
+      "lastName: string",
+      "birthday: date",
+      "petName: string",
+      "productName: string",
+      "price: number",
+      "quantity: number",
+      "timeOfPurchase: date",
+      "travelPhotos: string",
+      "contactPhotos: string"
+    ]
+  });
+
+  columns = [
+    { label: "First Name", dataField: "firstName", icon: "firstName" },
+    { label: "Last Name", dataField: "lastName", icon: "lastName" },
+    {
+      label: "Birthday",
+      dataField: "birthday",
+      icon: "birthday",
+      formatSettings: { formatString: "d" }
+    },
+    { label: "Pet Name", dataField: "petName", icon: "petName" },
+    { label: "Product Name", dataField: "productName", icon: "productName" },
+    {
+      label: "Price",
+      dataField: "price",
+      icon: "price",
+      formatSettings: { formatString: "c2" }
+    },
+    {
+      label: "Quantity",
+      dataField: "quantity",
+      icon: "quantity",
+      formatFunction: function (settings: any) {
+        const value = settings.value;
+        let className;
+        if (value < 20) {
+          className = "red";
+        } else if (value < 35) {
+          className = "yellow";
+        } else {
+          className = "green";
+        }
+        settings.template = `<div class="${className}">${value}</div>`;
+      }
+    },
+    {
+      label: "Time of Purchase",
+      dataField: "timeOfPurchase",
+      icon: "timeOfPurchase",
+      formatSettings: { formatString: "hh:mm tt" }
+    },
+    {
+      label: "Travel photos",
+      dataField: "travelPhotos",
+      icon: "photo",
+      formatFunction: this.photoFormatFunction,
+      image: true
+    },
+    {
+      label: "Contact photos",
+      dataField: "contactPhotos",
+      icon: "photo",
+      formatFunction: this.photoFormatFunction,
+      image: true
+    }
+  ];
+
+  cellOrientation = "horizontal";
+  collapsible = true;
+  coverField = "travelPhotos";
+  titleField = "firstName";
+
+  photoFormatFunction(settings: any) {
     const photoList = settings.value.split(",");
     let htmlResult = "";
-    photoList.forEach(photoUrl => {
+    photoList.forEach((photoUrl: string) => {
       htmlResult += `<img class="thumb" src="${photoUrl}" />`;
     });
     settings.template = htmlResult;
   }
 
+  handleCollapsibleChange(event: CustomEvent) {
+    this.cardview.collapsible = event.detail.value;
+  }
+
+  handleIconsChange() {
+    this.cardview.nativeElement.classList.toggle("disabled-icons");
+  }
+
+  handleCellsOrientationChange(orientation: string) {
+    this.cardview.cellOrientation = orientation;
+  }
+
+  handleImageCoverModeChange(mode: string) {
+    this.cardview.coverMode = mode;
+  }
+
+  handleTitleChange(event: CustomEvent) {
+
+    switch (event.detail.index) {
+      case 0:
+        this.cardview.titleField = "firstName";
+        break;
+      case 1:
+        this.cardview.titleField = "lastName";
+        break;
+      case 2:
+        this.cardview.titleField = "petName";
+        break;
+    }
+  }
+
   ngOnInit(): void {
     // onInit code.
   }
@@ -165,8 +260,7 @@ export class AppComponent implements AfterViewInit, OnInit {
           `https://htmlelements.com/demos/images/travel/${Math.floor(Math.random() * 36) + 1}.jpg`
         );
         row.contactPhotos.push(
-          `https://htmlelements.com/demos/images/phonebook/${
-            contactImages[Math.floor(Math.random() * contactImages.length)]
+          `https://htmlelements.com/demos/images/phonebook/${contactImages[Math.floor(Math.random() * contactImages.length)]
           }`
         );
       }
@@ -177,123 +271,10 @@ export class AppComponent implements AfterViewInit, OnInit {
 
     return sampleData;
   }
+
   init(): void {
     // init code.
-    const that = this;
 
-    that.cardview.dataSource = new Smart.DataAdapter({
-      dataSource: that.sampleData,
-      dataFields: [
-        "firstName: string",
-        "lastName: string",
-        "birthday: date",
-        "petName: string",
-        "productName: string",
-        "price: number",
-        "quantity: number",
-        "timeOfPurchase: date",
-        "travelPhotos: string",
-        "contactPhotos: string"
-      ]
-    });
-
-    that.cardview.columns = [
-      { label: "First Name", dataField: "firstName", icon: "firstName" },
-      { label: "Last Name", dataField: "lastName", icon: "lastName" },
-      {
-        label: "Birthday",
-        dataField: "birthday",
-        icon: "birthday",
-        formatSettings: { formatString: "d" }
-      },
-      { label: "Pet Name", dataField: "petName", icon: "petName" },
-      { label: "Product Name", dataField: "productName", icon: "productName" },
-      {
-        label: "Price",
-        dataField: "price",
-        icon: "price",
-        formatSettings: { formatString: "c2" }
-      },
-      {
-        label: "Quantity",
-        dataField: "quantity",
-        icon: "quantity",
-        formatFunction: function(settings) {
-          const value = settings.value;
-          let className;
-          if (value < 20) {
-            className = "red";
-          } else if (value < 35) {
-            className = "yellow";
-          } else {
-            className = "green";
-          }
-          settings.template = `<div class="${className}">${value}</div>`;
-        }
-      },
-      {
-        label: "Time of Purchase",
-        dataField: "timeOfPurchase",
-        icon: "timeOfPurchase",
-        formatSettings: { formatString: "hh:mm tt" }
-      },
-      {
-        label: "Travel photos",
-        dataField: "travelPhotos",
-        icon: "photo",
-        formatFunction: that.photoFormatFunction,
-        image: true
-      },
-      {
-        label: "Contact photos",
-        dataField: "contactPhotos",
-        icon: "photo",
-        formatFunction: that.photoFormatFunction,
-        image: true
-      }
-    ];
-
-    that.cardview.cellOrientation = "horizontal";
-    that.cardview.collapsible = true;
-    that.cardview.coverField = "travelPhotos";
-    that.cardview.titleField = "firstName";
-
-    that.collapsible.addEventListener("change", function(event: CustomEvent) {
-      that.cardview.collapsible = event.detail.value;
-    });
-
-    that.icons.addEventListener("change", function() {
-      that.cardview.nativeElement.classList.toggle("disabled-icons");
-    });
-
-    that.horizontal.addEventListener("change", function() {
-      that.cardview.cellOrientation = "horizontal";
-    });
-
-    that.vertical.addEventListener("change", function() {
-      that.cardview.cellOrientation = "vertical";
-    });
-
-    that.crop.addEventListener("change", function() {
-      that.cardview.coverMode = "crop";
-    });
-
-    that.fit.addEventListener("change", function() {
-      that.cardview.coverMode = "fit";
-    });
-
-    that.titleField.addEventListener("change", function() {
-      switch (this.selectedIndexes[0]) {
-        case 0:
-          that.cardview.titleField = "firstName";
-          break;
-        case 1:
-          that.cardview.titleField = "lastName";
-          break;
-        case 2:
-          that.cardview.titleField = "petName";
-          break;
-      }
-    });
+    this.titleFieldComponent.addEventListener('change', this.handleTitleChange.bind(this) as EventListenerOrEventListenerObject)
   }
-}
+}

demos/chart/background-image/src/app/app.component.ts

@@ -32,7 +32,7 @@ export class AppComponent implements AfterViewInit, OnInit {
         { Year: 2010, Population: 7.422e6 },
         { Year: 2017, Population: 7.102e6 }
     ];
-    backgroundImage = 'https://htmlelements.com/demos/images/bulgaria.png';
+    backgroundImage = 'https://www.htmlelements.com/demos/chart/background-image/bulgaria.png';
     caption = 'Top Ten Largest Cities in Bulgaria';
     description = '(source: www.nsi.bg)';
     showLegend = false;

demos/chart/color-schemes/src/app/app.component.html

@@ -6,7 +6,7 @@
 <div>
     <smart-chart #chart2 id="chart2" [caption]="caption" [description]="descriptionPie"
         [borderLineWidth]="borderLineWidthPie" [showLegend]="showLegend" [showBorderLine]="showBorderLinePie"
-        [legendPosition]="legendPositionPie" [padding]="paddingPie" [titlePadding]="titlePaddingPie"
+        [padding]="paddingPie" [titlePadding]="titlePaddingPie"
         [dataSource]="dataSourcePie" [colorScheme]="colorSchemePie" [seriesGroups]="seriesGroupsPie"></smart-chart>
 </div>
 <br />

demos/chart/custom-styling/src/app/app.component.html

@@ -2,4 +2,4 @@
     [caption]="caption" [description]="description" [showLegend]="showLegend" [padding]="padding"
     [titlePadding]="titlePadding" [dataSource]="dataSource" [xAxis]="xAxis" [valueAxis]="valueAxis"
     [seriesGroups]="seriesGroups"></smart-chart>
-<img src="./../../../src/images/wind.png" />
+<img src="https://www.htmlelements.com/demos/images/wind.png" />