feat(demo): use shoelace instead of material for dynamic examples

Author: tomastrajan

projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html

@@ -36,38 +36,37 @@ <h2 id="dynamic-element-tag">Dynamic element tag</h2>
         <ng-template #loading>Loading...</ng-template>
         <ax-lazy-element
           *axLazyElementDynamic="
-            'mwc-button';
-            url: 'https://unpkg.com/&#64;material/mwc-button&#64;0.27.0/mwc-button.js?module';
+            'sl-button';
+            url: 'https://cdn.jsdelivr.net/npm/&#64;shoelace-style/shoelace&#64;2.3.0/dist/components/button/button.js';
             loadingTemplate: loading;
             module: true
           "
-          [outlined]="buttonTypeIsOutlined"
-          [raised]="!buttonTypeIsOutlined"
+          [variant]="isButtonVariantPrimary ? 'primary' : 'default'"
           (click)="increment1()"
         >
           Increment
         </ax-lazy-element>
         <p>Counter: {{ counter1 }}</p>
         <div class="controls">
-          <span>Raised button</span>
+          <span>Default button</span>
           <mat-slide-toggle
-            [(ngModel)]="buttonTypeIsOutlined"
+            [(ngModel)]="isButtonVariantPrimary"
           ></mat-slide-toggle>
-          <span>Outline button</span>
+          <span>Primary button</span>
         </div>
       </ng-template>
     </demo-example>
     <div class="description">
       <p>
         In this example we're loading
-        <code>&#60;mwc-button></code>
+        <code>&#60;sl-button></code>
         using the
         <code>*axLazyElementDynamic</code>
         directive. Please notice that the original HTML element used in the
         template is
         <code>&#60;ax-lazy-element></code>
         and we're specifying the desired tag as the first parameter of
-        <code>*axLazyElementDynamic='mwc-button'</code>
+        <code>*axLazyElementDynamic='sl-button'</code>
         . Please, feel free to open your browsers dev tools to check resulting
         element tag!
       </p>
@@ -142,9 +141,11 @@ <h2 id="multiple-different-dynamic-elements">
                 loadingTemplate: loading
               "
               (click)="performAction(c.actionName)"
-              raised
+              [name]="c.name ? c.name : undefined"
             >
-              {{ c.content }}
+              @if (c.content) {
+                {{ c.content }}
+              }
             </ax-lazy-element>
           }
         </div>

projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.scss

@@ -42,6 +42,12 @@
       flex: 1.5;
     }
 
+    .actions {
+      display: flex;
+      gap: 20px;
+      align-items: center;
+    }
+
     .controls {
       display: flex;
       align-items: center;

projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts

@@ -37,15 +37,15 @@ export class DynamicComponent implements OnInit {
   codeExample3html = CODE_EXAMPLE_3_HTML;
 
   // example state
-  buttonTypeIsOutlined = true;
+  isButtonVariantPrimary = true;
   counter1 = 0;
   counter2 = 0;
   counter3 = 0;
 
   dynamicConfigs = [
     {
-      tag: 'mwc-button',
-      url: 'https://unpkg.com/@material/[email protected].0/mwc-button.js?module',
+      tag: 'sl-button',
+      url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/button/button.js',
       isModule: true,
       content: 'Increment',
       actionName: 'increment',
@@ -57,9 +57,10 @@ export class DynamicComponent implements OnInit {
       actionName: 'decrement',
     },
     {
-      tag: 'mwc-icon',
-      url: 'https://unpkg.com/@material/[email protected]/mwc-icon.js?module',
-      content: 'replay',
+      tag: 'sl-icon',
+      url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/components/icon/icon.js',
+      isModule: true,
+      name: 'reset',
       actionName: 'reset',
     },
   ];
@@ -89,15 +90,15 @@ export class DynamicComponent implements OnInit {
   }
 }
 
-export const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/[email protected].0/mwc-button.js?module' -->;
-<ax-lazy-element *axLazyElementDynamic="'mwc-button', url: url; module: true"
-     [outlined]="true"
+export const CODE_EXAMPLE_1 = `<!-- url = 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/button/button.js' -->;
+<ax-lazy-element *axLazyElementDynamic="'sl-button', url: url; module: true"
+     variant="primary"
      (click)="increment()">
   Increment
 </ax-lazy-element>
 
 <!-- will be rendered as ...
-  <mwc-button outlined (click)="increment()">Increment</mwc-button>
+  <sl-button variant="primary" (click)="increment()">Increment</sl-button>
 -->`;
 
 export const CODE_EXAMPLE_2_HTML = `<ax-lazy-element *axLazyElementDynamic="'wired-button'" (click)="increment()">
@@ -156,8 +157,8 @@ export const CODE_EXAMPLE_3_HTML = `&#64;for(c of dynamicConfigs; track c.url) {
 <!--
 dynamicConfigs = [
   {
-    tag: 'mwc-button',
-    url: 'https://unpkg.com/@material/[email protected].0/mwc-button.js?module',
+    tag: 'sl-button',
+    url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/button/button.js',
     isModule: true,
     content: 'Increment',
     actionName: 'increment'
@@ -169,9 +170,9 @@ dynamicConfigs = [
     actionName: 'decrement'
   },
   {
-    tag: 'mwc-icon',
-    url: 'https://unpkg.com/@material/[email protected].0/mwc-icon.js?module',
-    content: 'replay',
+    tag: 'sl-icon',
+    url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/icon/icon.js',
+    name: 'reset',
     actionName: 'reset'
   }
 ];