Skip to content

Commit 348f506

Browse files
tomastrajantomastrajan
committed
feat(demo): use shoelace instead of material for advanced examples
1 parent f18f9fe commit 348f506

File tree

3 files changed

+39
-39
lines changed

3 files changed

+39
-39
lines changed

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -95,11 +95,11 @@ <h2 id="inline-options">
9595
<demo-example>
9696
<ng-template>
9797
<ng-template #loading>Loading...</ng-template>
98-
<mwc-checkbox
98+
<sl-checkbox
9999
*axLazyElement="null; module: true; loadingTemplate: loading"
100100
>
101101
Click me
102-
</mwc-checkbox>
102+
</sl-checkbox>
103103
</ng-template>
104104
</demo-example>
105105

@@ -136,9 +136,9 @@ <h2 id="is-module-option">
136136
<demo-example>
137137
<ng-template>
138138
<ng-template #loading>Loading...</ng-template>
139-
<mwc-switch *axLazyElement="null; loadingTemplate: loading">
139+
<sl-switch *axLazyElement="null; loadingTemplate: loading">
140140
Click me
141-
</mwc-switch>
141+
</sl-switch>
142142
</ng-template>
143143
</demo-example>
144144
<div class="description">
@@ -161,7 +161,7 @@ <h2 id="is-module-option">
161161
<h2 id="global-pre-configuration">Global preconfiguration</h2>
162162
<div class="content">
163163
<demo-example>
164-
<ng-template><mwc-fab icon="code" *axLazyElement></mwc-fab></ng-template>
164+
<ng-template><sl-avatar *axLazyElement></sl-avatar></ng-template>
165165
</demo-example>
166166
<div class="description">
167167
<p>
@@ -200,9 +200,9 @@ <h2 id="preloading">Preloading</h2>
200200
class="additional-btn"
201201
mat-flat-button
202202
color="accent"
203-
(click)="preloadFab()"
203+
(click)="preloadSome()"
204204
>
205-
Preload "fab" only (the previous example)
205+
Preload "sl-avatar" only (the previous example)
206206
</button>
207207
</div>
208208
<div class="description">
@@ -227,7 +227,7 @@ <h2 id="preloading">Preloading</h2>
227227
<h2 id="hooks">Hooks</h2>
228228
<div class="content">
229229
<demo-example>
230-
<ng-template><mwc-slider *axLazyElement></mwc-slider></ng-template>
230+
<ng-template><sl-range *axLazyElement></sl-range></ng-template>
231231
</demo-example>
232232
<div class="description">
233233
<p>

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

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,8 @@ export class AdvancedComponent implements OnInit {
8080
this.lazyElementLoaderService.preload();
8181
}
8282

83-
preloadFab() {
84-
this.lazyElementLoaderService.preload(['mwc-fab']);
83+
preloadSome() {
84+
this.lazyElementLoaderService.preload(['sl-avatar']);
8585
}
8686
}
8787

@@ -139,8 +139,8 @@ const CODE_EXAMPLE_2_MODULE = `// pre-configured LazyElementsModule in FeatureMo
139139
const options: LazyElementModuleOptions = {
140140
elementConfigs: [
141141
{
142-
tag: 'mwc-checkbox',
143-
url: 'https://unpkg.com/@material/[email protected].0/mwc-checkbox.js?module'
142+
tag: 'sl-checkbox',
143+
url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/checkbox/checkbox.js'
144144
}
145145
]
146146
};
@@ -157,8 +157,8 @@ export class FeatureModule { }
157157
const CODE_EXAMPLE_2_STANDALONE = `// pre-configured routes based lazy feature
158158
const configs: ElementConfig[] = [
159159
{
160-
tag: 'wired-button',
161-
url: 'https://unpkg.com/@material/[email protected].0/mwc-checkbox.js?module',
160+
tag: 'sl-checkbox',
161+
url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/checkbox/checkbox.js',
162162
}
163163
];
164164
@@ -177,14 +177,14 @@ export default <Routes>[
177177
},
178178
];`;
179179
const CODE_EXAMPLE_2_HTML = `<!-- We have to specify null; url to be able to pass in additional options -->
180-
<mwc-checkbox *axLazyElement="null; module: true; loadingTemplate: loading;"></mwc-checkbox>`;
180+
<sl-checkbox *axLazyElement="null; module: true; loadingTemplate: loading;"></sl-checkbox>`;
181181

182182
const CODE_EXAMPLE_3_MODULE = `// pre-configured LazyElementsModule
183183
const options: LazyElementModuleOptions = {
184184
elementConfigs: [
185185
{
186-
tag: 'mwc-switch',
187-
url: 'https://unpkg.com/@material/[email protected].0/mwc-switch.js?module',
186+
tag: 'sl-switch',
187+
url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/switch/switch.js',
188188
isModule: true
189189
}
190190
]
@@ -202,8 +202,8 @@ export class FeatureModule { }
202202
const CODE_EXAMPLE_3_STANDALONE = `// pre-configured routes based lazy feature
203203
const configs: ElementConfig[] = [
204204
{
205-
tag: 'wired-button',
206-
url: 'https://unpkg.com/@material/[email protected].0/mwc-checkbox.js?module',
205+
tag: 'sl-switch',
206+
url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/switch/switch.js',
207207
isModule: true
208208
}
209209
];
@@ -223,10 +223,10 @@ export default <Routes>[
223223
},
224224
];`;
225225
const CODE_EXAMPLE_3_HTML = `<!-- We have to specify null; url to be able to pass in additional options -->
226-
<mwc-switch *axLazyElement="null; loadingTemplate: loading;"></mwc-switch>`;
226+
<sl-switch *axLazyElement="null; loadingTemplate: loading;"></sl-switch>`;
227227

228228
const CODE_EXAMPLE_4_HTML = `<!-- This can be used in any place in the whole application -->
229-
<mwc-fab icon="code" *axLazyElement></mwc-fab>`;
229+
<sl-avatar *axLazyElement></sl-avatar>`;
230230
const CODE_EXAMPLE_4_CORE_MODULE = `// pre-configured LazyElementsModule in CoreModule or AppModule
231231
const options: LazyElementModuleRootOptions = {
232232
rootOptions: {
@@ -236,8 +236,8 @@ const options: LazyElementModuleRootOptions = {
236236
},
237237
elementConfigs: [
238238
{
239-
tag: 'mwc-switch',
240-
url: 'https://unpkg.com/@material/[email protected].0/mwc-switch.js?module'
239+
tag: 'sl-avatar',
240+
url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/avatar/avatar.js'
241241
}
242242
]
243243
};
@@ -262,8 +262,8 @@ bootstrapApplication(AppComponent, {
262262
},
263263
elementConfigs: [
264264
{
265-
tag: 'mwc-switch',
266-
url: 'https://unpkg.com/@material/[email protected].0/mwc-switch.js?module'
265+
tag: 'sl-avatar',
266+
url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/avatar/avatar.js'
267267
}
268268
]
269269
}),
@@ -280,7 +280,7 @@ class LazyFeatureComponent {
280280
}
281281
282282
preloadFab() {
283-
this.lazyElementLoaderService.preload(['mwc-fab']);
283+
this.lazyElementLoaderService.preload(['sl-avatar']);
284284
}
285285
}
286286
`;
@@ -292,8 +292,8 @@ const CODE_EXAMPLE_6_STANDALONE = `export function beforeLoadHook(tag: string):
292292
293293
const options: ElementConfig[] = [
294294
{
295-
tag: 'mwc-slider',
296-
url: 'https://unpkg.com/@material/[email protected]/mwc-slider.js?module',
295+
tag: 'sl-range',
296+
url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/components/range/range.js',
297297
isModule: true,
298298
hooks: {
299299
beforeLoad: beforeLoadHook
@@ -325,8 +325,8 @@ export function beforeLoadHook(tag: string): Promise<void> {
325325
const options: LazyElementModuleOptions = {
326326
elementConfigs: [
327327
{
328-
tag: 'mwc-slider',
329-
url: 'https://unpkg.com/@material/[email protected]/mwc-slider.js?module',
328+
tag: 'sl-range',
329+
url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/components/range/range.js',
330330
isModule: true,
331331
hooks: {
332332
beforeLoad: beforeLoadHook
@@ -346,7 +346,7 @@ const options: LazyElementModuleOptions = {
346346
})
347347
export class FeatureModule { }
348348
`;
349-
const CODE_EXAMPLE_6_HTML = `<mwc-slider *axLazyElement></mwc-slider>`;
349+
const CODE_EXAMPLE_6_HTML = `<sl-range *axLazyElement></sl-range>`;
350350

351351
const CODE_EXAMPLE_7_HTML = `<!-- No need to specify url -->
352352
<wired-toggle *axLazyElement (change)="toggle()"></wired-toggle>`;

‎projects/elements-demo/src/app/features/examples/advanced/advanced.routes.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,24 +36,24 @@ const configs: ElementConfig[] = [
3636
preload: true,
3737
},
3838
{
39-
tag: 'mwc-switch',
40-
url: 'https://unpkg.com/@material/[email protected].0/mwc-switch.js?module',
39+
tag: 'sl-switch',
40+
url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/switch/switch.js',
4141
isModule: true,
4242
},
4343
{
44-
tag: 'mwc-checkbox',
45-
url: 'https://unpkg.com/@material/[email protected].0/mwc-checkbox.js?module',
44+
tag: 'sl-checkbox',
45+
url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/checkbox/checkbox.js',
4646
isModule: true,
4747
},
4848
{
49-
tag: 'mwc-fab',
50-
url: 'https://unpkg.com/@material/[email protected].0/mwc-fab.js?module',
49+
tag: 'sl-avatar',
50+
url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected].0/dist/components/avatar/avatar.js',
5151
isModule: true,
5252
loadingComponent: SpinnerComponent,
5353
},
5454
{
55-
tag: 'mwc-slider',
56-
url: 'https://unpkg.com/@material/[email protected]/mwc-slider.js?module',
55+
tag: 'sl-range',
56+
url: 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/components/range/range.js',
5757
isModule: true,
5858
hooks: {
5959
beforeLoad: beforeLoadHook,

0 commit comments

Comments
 (0)