Skip to content

Commit f18f9fe

Browse files
tomastrajantomastrajan
committed
feat(demo): use shoelace instead of material for basic examples
1 parent 46621a9 commit f18f9fe

File tree

5 files changed

+42
-33
lines changed

5 files changed

+42
-33
lines changed

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

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,20 @@ <h2 id="basic-usage">Basic usage</h2>
1919
<div class="content">
2020
<demo-example>
2121
<ng-template>
22-
<mwc-icon
22+
<sl-icon
23+
style="font-size: 24px"
24+
name="heart"
2325
*axLazyElement="
24-
'https://unpkg.com/&#64;material/mwc-icon&#64;0.27.0/mwc-icon.js?module';
26+
'https://cdn.jsdelivr.net/npm/&#64;shoelace-style/shoelace&#64;2.3.0/dist/components/icon/icon.js';
2527
module: true
2628
"
27-
>
28-
favorite
29-
</mwc-icon>
29+
/>
3030
</ng-template>
3131
</demo-example>
3232
<div class="description">
3333
<p>
3434
The most simple example, all we need is to use element tag, for example
35-
<code>&#60;mwc-icon></code>
35+
<code>&#60;sl-icon></code>
3636
and add
3737
<code>*axLazyElement</code>
3838
directive with the url pointing to the element implementation.
@@ -49,24 +49,24 @@ <h2 id="loading-template">
4949
<demo-example>
5050
<ng-template>
5151
<ng-template #loading><demo-spinner /></ng-template>
52-
<mwc-button
52+
<sl-button
53+
variant="default"
5354
*axLazyElement="
54-
'https://unpkg.com/&#64;material/mwc-button&#64;0.27.0/mwc-button.js?module';
55+
'https://cdn.jsdelivr.net/npm/&#64;shoelace-style/shoelace&#64;2.3.0/dist/components/button/button.js';
5556
loadingTemplate: loading;
5657
module: true
5758
"
58-
raised
5959
(click)="increment()"
6060
>
6161
Increment
62-
</mwc-button>
62+
</sl-button>
6363
<p>Counter: {{ counter }}</p>
6464
</ng-template>
6565
</demo-example>
6666
<div class="description">
6767
<p>
6868
In this example we're loading
69-
<code>&#60;mwc-button></code>
69+
<code>&#60;sl-button></code>
7070
using the
7171
<code>*axLazyElement</code>
7272
directive but we're also adding
@@ -184,16 +184,15 @@ <h2 id="import-maps">Using import maps (SystemJS is required)</h2>
184184
<div class="content">
185185
<demo-example>
186186
<ng-template>
187-
<mwc-switch
188-
checked
189-
*axLazyElement="'mwc-switch'; module: true; importMap: true"
190-
></mwc-switch>
187+
<sl-switch
188+
*axLazyElement="'sl-switch'; module: true; importMap: true"
189+
></sl-switch>
191190
</ng-template>
192191
</demo-example>
193192
<div class="description">
194193
<p>
195194
In this example we are using axLazyElement with Import Maps to load
196-
<code>&#60;mwc-switch></code>
195+
<code>&#60;sl-switch></code>
197196
. Any key can be used in the URL that is mapped to a import map. For
198197
this feature to work properly a peer dependency of having
199198
<a href="https://github.com/systemjs/systemjs" target="_blank">
@@ -205,7 +204,7 @@ <h2 id="import-maps">Using import maps (SystemJS is required)</h2>
205204
<demo-example-code [example]="codeExample5ImportMap" />
206205
<p>
207206
So when adding
208-
<code>&#60;mwc-switch></code>
207+
<code>&#60;sl-switch></code>
209208
with
210209
<code>*axLazyElement</code>
211210
with the

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

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -60,39 +60,37 @@ export class BasicComponent {
6060
}
6161
}
6262

63-
const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/[email protected]/mwc-icon.js?module'; -->
64-
<mwc-icon *axLazyElement="url; module: true">
65-
favorite
66-
</mwc-icon>`;
63+
const CODE_EXAMPLE_1 = `<!-- url = 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/components/icon/icon.js'; -->
64+
<sl-icon name="heart" *axLazyElement="url; module: true" />`;
6765

68-
const CODE_EXAMPLE_2 = `<!-- url = 'https://unpkg.com/@material/[email protected].0/mwc-button.js?module' -->;
66+
const CODE_EXAMPLE_2 = `<!-- url = 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/button/button.js' -->;
6967
<ng-template #loading>Loading...</ng-template>
70-
<mwc-button *axLazyElement="url; loadingTemplate: loading; module: true"
68+
<sl-button *axLazyElement="url; loadingTemplate: loading; module: true"
7169
(click)="increment()">
7270
Increment
73-
</mwc-button>`;
71+
</sl-button>`;
7472

7573
const CODE_EXAMPLE_3 = `<!-- url = 'https://unpkg.com/wrong-url.js?module' -->;
7674
<ng-template #error>Loading failed...</ng-template>
77-
<mwc-button *axLazyElement="url; errorTemplate: error; module: true">
75+
<sl-button *axLazyElement="url; errorTemplate: error; module: true">
7876
Submit
79-
</mwc-button>`;
77+
</sl-button>`;
8078

8179
const CODE_EXAMPLE_4 = `<!-- https://unpkg.com/ink-components' -->;
8280
<!-- xAxis = [-6.28, 6.28] -->;
8381
<ink-chart *axLazyElement="url" [xlim]="xAxis">
8482
<ink-chart-eqn eqn="Math.sin(x)"></ink-chart-eqn>
8583
</ink-chart>`;
8684

87-
const CODE_EXAMPLE_5 = `<!-- url = 'https://unpkg.com/@material/[email protected].0//mwc-switch.js?module'; -->
88-
<mwc-switch checked *axLazyElement="'mwc-switch'; module: true; importMap: true"></mwc-switch>`;
85+
const CODE_EXAMPLE_5 = `<!-- url = 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/switch/switch.js'; -->
86+
<sl-switch checked *axLazyElement="'sl-switch'; module: true; importMap: true"></sl-switch>`;
8987

9088
const CODE_EXAMPLE_5_IMPORT_MAP = `
9189
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.6.1/system.min.js"></script>
9290
<script type="systemjs-importmap">
9391
{
9492
"imports": {
95-
"mwc-switch": "https://unpkg.com/@material/[email protected].0/mwc-switch.js?module"
93+
"sl-switch": "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/switch/switch.js"
9694
}
9795
}
9896
</script>`;

‎projects/elements-demo/src/assets/CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
44

5+
### [19.0.1](https://github.com/angular-extensions/elements/compare/v19.0.0...v19.0.1) (2025-04-29)
6+
57
## [19.0.0](https://github.com/angular-extensions/elements/compare/v18.2.1...v19.0.0) (2025-04-28)
68

79
### ⚠ BREAKING CHANGES

‎projects/elements-demo/src/assets/icons/heart.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎projects/elements-demo/src/index.html‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,22 +40,27 @@
4040
href="https://fonts.googleapis.com/icon?family=Material+Icons"
4141
rel="stylesheet"
4242
/>
43+
<link
44+
rel="stylesheet"
45+
href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css"
46+
/>
47+
4348
<link rel="manifest" href="manifest.webmanifest" />
4449
<meta name="theme-color" content="#1976d2" />
4550
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.6.1/system.min.js"></script>
4651
<script type="systemjs-importmap">
4752
{
4853
"imports": {
49-
"mwc-switch": "https://unpkg.com/@material/[email protected].0/mwc-switch.js?module"
54+
"sl-switch": "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/switch/switch.js"
5055
}
5156
}
5257
</script>
5358
</head>
5459
<body class="mat-typography">
5560
<demo-root></demo-root>
56-
<noscript
57-
>Please enable JavaScript to continue using this application.</noscript
58-
>
61+
<noscript>
62+
Please enable JavaScript to continue using this application.
63+
</noscript>
5964
</body>
6065
<script
6166
async

0 commit comments

Comments
 (0)