@underlayerdev/ui 0.14.8 → 0.14.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/breakpoints/_index.scss +14 -16
- package/breakpoints/_values.scss +3 -7
- package/containers/_index.scss +19 -21
- package/containers/_values.scss +4 -9
- package/design-tokens/_elevations.scss +11 -13
- package/design-tokens/_index.scss +13 -15
- package/design-tokens/_variables.scss +15 -30
- package/fesm2022/underlayerdev-ui-carousel.mjs +189 -118
- package/fesm2022/underlayerdev-ui-carousel.mjs.map +1 -1
- package/fesm2022/underlayerdev-ui.mjs +12395 -4349
- package/fesm2022/underlayerdev-ui.mjs.map +1 -1
- package/package.json +4 -1
- package/styles/foundations.css +0 -32
- package/types/underlayerdev-ui-carousel.d.ts +39 -29
- package/types/underlayerdev-ui.d.ts +3721 -1718
package/README.md
CHANGED
|
@@ -25,13 +25,13 @@ The library follows an **Industrial Arena Minimal** aesthetic:
|
|
|
25
25
|
|
|
26
26
|
### DFII (Design Feasibility & Impact Index)
|
|
27
27
|
|
|
28
|
-
| Dimension
|
|
29
|
-
|
|
30
|
-
| Aesthetic impact
|
|
31
|
-
| Context fit
|
|
32
|
-
| Implementation feasibility | 4
|
|
33
|
-
| Performance safety
|
|
34
|
-
| Consistency risk
|
|
28
|
+
| Dimension | Score | Notes |
|
|
29
|
+
| -------------------------- | ----- | ----------------------------------------------------------------------------------- |
|
|
30
|
+
| Aesthetic impact | 5 | Highly distinctive neon-on-carbon look with strong brand typography. |
|
|
31
|
+
| Context fit | 4 | Well-suited for gaming, wallet, and marketplace products. |
|
|
32
|
+
| Implementation feasibility | 4 | Built on existing tokens (Underlayer Brand, Underlayer Nunito Sans, dark BG, neon). |
|
|
33
|
+
| Performance safety | 4 | Minimal shadows/blur; motion kept sharp and sparse. |
|
|
34
|
+
| Consistency risk | 2 | Rich token set; requires discipline on spacing, motion, naming. |
|
|
35
35
|
|
|
36
36
|
**DFII score**: (5 + 4 + 4 + 4) − 2 = **15** → _Excellent_. Execute this direction consistently across all components.
|
|
37
37
|
|
package/breakpoints/_index.scss
CHANGED
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
* @angular/build out of the box since Angular CLI 20+).
|
|
16
|
-
*/
|
|
1
|
+
/// Public Sass entry point for @underlayerdev/ui breakpoint media queries.
|
|
2
|
+
///
|
|
3
|
+
/// Consuming apps can import this via the `pkg:` importer:
|
|
4
|
+
///
|
|
5
|
+
/// @use 'pkg:@underlayerdev/ui/breakpoints' as bp;
|
|
6
|
+
///
|
|
7
|
+
/// .my-component {
|
|
8
|
+
/// @include bp.up('md') {
|
|
9
|
+
/// display: flex;
|
|
10
|
+
/// }
|
|
11
|
+
/// }
|
|
12
|
+
///
|
|
13
|
+
/// Requires Dart Sass with the Node package importer enabled (supported by
|
|
14
|
+
/// @angular/build out of the box since Angular CLI 20+).
|
|
17
15
|
@forward './breakpoints';
|
package/breakpoints/_values.scss
CHANGED
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
//
|
|
2
|
-
//
|
|
3
|
-
|
|
4
|
-
// published `./breakpoints` package export stays self-contained: Node's
|
|
5
|
-
// package "exports" boundaries block relative imports that cross from one
|
|
6
|
-
// exported subpath into a different one, so this file can't reach outside
|
|
7
|
-
// its own foundations/breakpoints/ directory once published.
|
|
1
|
+
// Do not edit directly, this file was generated from ui/tokens/tokens/*.json.
|
|
2
|
+
// A self-contained copy of the tokens the published ./breakpoints subpath needs.
|
|
3
|
+
|
|
8
4
|
$breakpoint-xs: 0px !default;
|
|
9
5
|
$breakpoint-sm: 768px !default;
|
|
10
6
|
$breakpoint-md: 1024px !default;
|
package/containers/_index.scss
CHANGED
|
@@ -1,22 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
* @angular/build out of the box since Angular CLI 20+).
|
|
21
|
-
*/
|
|
1
|
+
/// Public Sass entry point for @underlayerdev/ui container mixins.
|
|
2
|
+
///
|
|
3
|
+
/// Consuming apps can import this via the `pkg:` importer to compose their
|
|
4
|
+
/// own responsive container (e.g. fluid on mobile, product on desktop)
|
|
5
|
+
/// instead of duplicating the padding scale by hand:
|
|
6
|
+
///
|
|
7
|
+
/// @use 'pkg:@underlayerdev/ui/containers' as containers;
|
|
8
|
+
/// @use 'pkg:@underlayerdev/ui/breakpoints' as bp;
|
|
9
|
+
///
|
|
10
|
+
/// .my-page {
|
|
11
|
+
/// @include containers.container-fluid;
|
|
12
|
+
///
|
|
13
|
+
/// @include bp.up('md') {
|
|
14
|
+
/// @include containers.container-product;
|
|
15
|
+
/// }
|
|
16
|
+
/// }
|
|
17
|
+
///
|
|
18
|
+
/// Requires Dart Sass with the Node package importer enabled (supported by
|
|
19
|
+
/// @angular/build out of the box since Angular CLI 20+).
|
|
22
20
|
@forward './containers';
|
package/containers/_values.scss
CHANGED
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
//
|
|
2
|
-
//
|
|
3
|
-
// Duplicated (not imported from ../core / ../design-tokens) so the
|
|
4
|
-
// published `./containers` package export stays self-contained: Node's
|
|
5
|
-
// package "exports" boundaries block relative imports that cross from one
|
|
6
|
-
// exported subpath into a different one, so this file can't reach outside
|
|
7
|
-
// its own foundations/containers/ directory once published.
|
|
8
|
-
$breakpoint-md: 1024px !default;
|
|
9
|
-
$breakpoint-xl: 1600px !default;
|
|
1
|
+
// Do not edit directly, this file was generated from ui/tokens/tokens/*.json.
|
|
2
|
+
// A self-contained copy of the tokens the published ./containers subpath needs.
|
|
10
3
|
|
|
11
4
|
$spacing-spacing-4: 16px !default;
|
|
12
5
|
$spacing-spacing-8: 32px !default;
|
|
13
6
|
$spacing-spacing-16: 64px !default;
|
|
14
7
|
$spacing-spacing-48: 192px !default;
|
|
8
|
+
$breakpoint-md: 1024px !default;
|
|
9
|
+
$breakpoint-xl: 1600px !default;
|
|
@@ -1,16 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
* - toast: notifications
|
|
13
|
-
*/
|
|
1
|
+
/// Elevation tokens for z-index layering.
|
|
2
|
+
/// Use these instead of hardcoded values to ensure consistent stacking order.
|
|
3
|
+
///
|
|
4
|
+
/// Stacking order (low to high):
|
|
5
|
+
/// - base, raised: content layers
|
|
6
|
+
/// - navbar: sticky navigation
|
|
7
|
+
/// - dropdown: popovers, dropdowns
|
|
8
|
+
/// - overlay: backdrops (sidebar overlay, modal backdrop)
|
|
9
|
+
/// - drawer: sliding panels (sidebar drawer)
|
|
10
|
+
/// - modal: dialogs
|
|
11
|
+
/// - toast: notifications
|
|
14
12
|
|
|
15
13
|
$elevation-base: 0 !default;
|
|
16
14
|
$elevation-raised: 1 !default;
|
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
* @angular/build out of the box since Angular CLI 20+).
|
|
15
|
-
*/
|
|
1
|
+
/// Public Sass entry point for @underlayerdev/ui design tokens.
|
|
2
|
+
///
|
|
3
|
+
/// Consuming apps can import this via the `pkg:` importer:
|
|
4
|
+
///
|
|
5
|
+
/// @use 'pkg:@underlayerdev/ui/design-tokens' as tokens;
|
|
6
|
+
///
|
|
7
|
+
/// .my-component {
|
|
8
|
+
/// padding: tokens.$spacing-spacing-4;
|
|
9
|
+
/// color: tokens.$color-text-secondary;
|
|
10
|
+
/// }
|
|
11
|
+
///
|
|
12
|
+
/// Requires Dart Sass with the Node package importer enabled (supported by
|
|
13
|
+
/// @angular/build out of the box since Angular CLI 20+).
|
|
16
14
|
@forward 'variables';
|
|
17
15
|
@forward 'elevations';
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
* Do not edit directly, this file was auto-generated.
|
|
3
|
-
*/
|
|
1
|
+
// Do not edit directly, this file was generated from ui/tokens/tokens/*.json.
|
|
4
2
|
|
|
5
3
|
$primitive-color-cyan-transparent-8-30: rgba(88, 183, 188, 0.3) !default;
|
|
6
4
|
$primitive-color-cyan-transparent-8-20: rgba(88, 183, 188, 0.2) !default;
|
|
@@ -367,8 +365,6 @@ $spacing-spacing-1: 4px !default;
|
|
|
367
365
|
$spacing-spacing-2: 8px !default;
|
|
368
366
|
$spacing-spacing-3: 12px !default;
|
|
369
367
|
$spacing-spacing-4: 16px !default;
|
|
370
|
-
// Extended spacing scale for a smoother 4px rhythm
|
|
371
|
-
// Existing components can now migrate magic numbers to these tokens.
|
|
372
368
|
$spacing-spacing-5: 20px !default;
|
|
373
369
|
$spacing-spacing-6: 24px !default;
|
|
374
370
|
$spacing-spacing-7: 28px !default;
|
|
@@ -400,31 +396,6 @@ $spacing-spacing-104: 416px !default;
|
|
|
400
396
|
$spacing-spacing-112: 448px !default;
|
|
401
397
|
$spacing-spacing-120: 480px !default;
|
|
402
398
|
$spacing-spacing-128: 512px !default;
|
|
403
|
-
|
|
404
|
-
// Component control sizing tokens (heights / min-widths / icon-only sizes)
|
|
405
|
-
// These explicitly capture the shared geometry used by buttons, inputs, and other form controls.
|
|
406
|
-
$component-control-height-sm: 32px !default;
|
|
407
|
-
$component-control-height-md: 40px !default;
|
|
408
|
-
$component-control-height-lg: 48px !default;
|
|
409
|
-
$component-control-height-xl: 64px !default;
|
|
410
|
-
|
|
411
|
-
// Avatar-only — deliberately not part of the shared control-height family
|
|
412
|
-
// above (a giant size doesn't make sense on a button or input), so it isn't
|
|
413
|
-
// exposed through UiSize.
|
|
414
|
-
$component-avatar-size-2xl: 128px !default;
|
|
415
|
-
$component-avatar-size-3xl: 160px !default;
|
|
416
|
-
|
|
417
|
-
$component-dropdown-list-max-height: 316px !default;
|
|
418
|
-
|
|
419
|
-
$component-control-min-width-sm: 96px !default;
|
|
420
|
-
$component-control-min-width-md: 112px !default;
|
|
421
|
-
$component-control-min-width-lg: 144px !default;
|
|
422
|
-
|
|
423
|
-
$component-control-vertical-width-lg: 164px !default;
|
|
424
|
-
|
|
425
|
-
$component-icon-only-size-sm: 32px !default;
|
|
426
|
-
$component-icon-only-size-md: 40px !default;
|
|
427
|
-
$component-icon-only-size-lg: 48px !default;
|
|
428
399
|
$radius-radius-1: 4px !default;
|
|
429
400
|
$radius-radius-2: 8px !default;
|
|
430
401
|
$radius-radius-3: 12px !default;
|
|
@@ -457,6 +428,20 @@ $iconography-font-line-height-12: 48px !default;
|
|
|
457
428
|
$iconography-font-line-height-16: 64px !default;
|
|
458
429
|
$iconography-font-line-height-24: 96px !default;
|
|
459
430
|
$iconography-font-line-height-32: 128px !default;
|
|
431
|
+
$component-dropdown-list-max-height: 316px !default;
|
|
432
|
+
$component-control-height-sm: 32px !default;
|
|
433
|
+
$component-control-height-md: 40px !default;
|
|
434
|
+
$component-control-height-lg: 48px !default;
|
|
435
|
+
$component-control-height-xl: 64px !default;
|
|
436
|
+
$component-control-min-width-sm: 96px !default;
|
|
437
|
+
$component-control-min-width-md: 112px !default;
|
|
438
|
+
$component-control-min-width-lg: 144px !default;
|
|
439
|
+
$component-icon-only-size-sm: 32px !default;
|
|
440
|
+
$component-icon-only-size-md: 40px !default;
|
|
441
|
+
$component-icon-only-size-lg: 48px !default;
|
|
442
|
+
$component-control-vertical-width-lg: 164px !default;
|
|
443
|
+
$component-avatar-size-2xl: 128px !default;
|
|
444
|
+
$component-avatar-size-3xl: 160px !default;
|
|
460
445
|
$breakpoint-xs: 0px !default;
|
|
461
446
|
$breakpoint-sm: 768px !default;
|
|
462
447
|
$breakpoint-md: 1024px !default;
|
|
@@ -1,92 +1,137 @@
|
|
|
1
|
-
import * as i0 from
|
|
2
|
-
import { ViewEncapsulation,
|
|
3
|
-
import Splide from
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import { Component, ViewEncapsulation, contentChildren, effect, input, output, viewChild } from "@angular/core";
|
|
3
|
+
import Splide from "@splidejs/splide";
|
|
4
|
+
var CarouselItemComponent = class CarouselItemComponent {
|
|
5
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
6
|
+
minVersion: "12.0.0",
|
|
7
|
+
version: "22.2.2",
|
|
8
|
+
ngImport: i0,
|
|
9
|
+
type: CarouselItemComponent,
|
|
10
|
+
deps: [],
|
|
11
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
12
|
+
});
|
|
13
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
14
|
+
minVersion: "14.0.0",
|
|
15
|
+
version: "22.2.2",
|
|
16
|
+
type: CarouselItemComponent,
|
|
17
|
+
isStandalone: true,
|
|
18
|
+
selector: "ul-carousel-item",
|
|
19
|
+
host: { classAttribute: "splide__slide ul-carousel__item" },
|
|
20
|
+
ngImport: i0,
|
|
21
|
+
template: ` <ng-content /> `,
|
|
22
|
+
isInline: true,
|
|
23
|
+
encapsulation: i0.ViewEncapsulation.None
|
|
24
|
+
});
|
|
25
|
+
};
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
27
|
+
minVersion: "12.0.0",
|
|
28
|
+
version: "22.2.2",
|
|
29
|
+
ngImport: i0,
|
|
30
|
+
type: CarouselItemComponent,
|
|
31
|
+
decorators: [{
|
|
32
|
+
type: Component,
|
|
33
|
+
args: [{
|
|
34
|
+
selector: "ul-carousel-item",
|
|
35
|
+
template: ` <ng-content /> `,
|
|
36
|
+
encapsulation: ViewEncapsulation.None,
|
|
37
|
+
host: { class: "splide__slide ul-carousel__item" }
|
|
38
|
+
}]
|
|
39
|
+
}]
|
|
40
|
+
});
|
|
41
|
+
var CarouselComponent = class CarouselComponent {
|
|
42
|
+
options = input({ autoplay: true }, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
|
|
43
|
+
autoMount = input(true, ...ngDevMode ? [{ debugName: "autoMount" }] : /* istanbul ignore next */ []);
|
|
44
|
+
mounted = output();
|
|
45
|
+
carousel = viewChild("carousel", ...ngDevMode ? [{ debugName: "carousel" }] : /* istanbul ignore next */ []);
|
|
46
|
+
items = contentChildren(CarouselItemComponent, ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
|
|
47
|
+
instance = null;
|
|
48
|
+
constructor() {
|
|
49
|
+
effect(() => {
|
|
50
|
+
this.items();
|
|
51
|
+
this.updateCarouselOnItemsChange();
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
ngAfterViewInit() {
|
|
55
|
+
this.init();
|
|
56
|
+
}
|
|
57
|
+
ngOnDestroy() {
|
|
58
|
+
this.instance?.destroy();
|
|
59
|
+
}
|
|
60
|
+
getInstance() {
|
|
61
|
+
return this.instance;
|
|
62
|
+
}
|
|
63
|
+
goNext() {
|
|
64
|
+
this.instance?.go(">");
|
|
65
|
+
}
|
|
66
|
+
goPrev() {
|
|
67
|
+
this.instance?.go("<");
|
|
68
|
+
}
|
|
69
|
+
goTo(index) {
|
|
70
|
+
this.instance?.go(index);
|
|
71
|
+
}
|
|
72
|
+
mount() {
|
|
73
|
+
if (!this.instance) throw new Error("Carousel instance not found");
|
|
74
|
+
this.instance.mount();
|
|
75
|
+
this.mounted.emit(this.instance);
|
|
76
|
+
}
|
|
77
|
+
init() {
|
|
78
|
+
const carousel = this.carousel();
|
|
79
|
+
if (!carousel) throw new Error("Carousel element not found");
|
|
80
|
+
this.instance = new Splide(carousel.nativeElement, {
|
|
81
|
+
arrows: false,
|
|
82
|
+
classes: { page: "splide__pagination__page ul-carousel__pagination-dot" },
|
|
83
|
+
...this.options()
|
|
84
|
+
});
|
|
85
|
+
if (this.autoMount()) this.mount();
|
|
86
|
+
}
|
|
87
|
+
updateCarouselOnItemsChange() {
|
|
88
|
+
this.instance?.refresh();
|
|
89
|
+
}
|
|
90
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
91
|
+
minVersion: "12.0.0",
|
|
92
|
+
version: "22.2.2",
|
|
93
|
+
ngImport: i0,
|
|
94
|
+
type: CarouselComponent,
|
|
95
|
+
deps: [],
|
|
96
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
97
|
+
});
|
|
98
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
99
|
+
minVersion: "17.2.0",
|
|
100
|
+
version: "22.2.2",
|
|
101
|
+
type: CarouselComponent,
|
|
102
|
+
isStandalone: true,
|
|
103
|
+
selector: "ul-carousel",
|
|
104
|
+
inputs: {
|
|
105
|
+
options: {
|
|
106
|
+
classPropertyName: "options",
|
|
107
|
+
publicName: "options",
|
|
108
|
+
isSignal: true,
|
|
109
|
+
isRequired: false,
|
|
110
|
+
transformFunction: null
|
|
111
|
+
},
|
|
112
|
+
autoMount: {
|
|
113
|
+
classPropertyName: "autoMount",
|
|
114
|
+
publicName: "autoMount",
|
|
115
|
+
isSignal: true,
|
|
116
|
+
isRequired: false,
|
|
117
|
+
transformFunction: null
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
outputs: { mounted: "mounted" },
|
|
121
|
+
queries: [{
|
|
122
|
+
propertyName: "items",
|
|
123
|
+
predicate: CarouselItemComponent,
|
|
124
|
+
isSignal: true
|
|
125
|
+
}],
|
|
126
|
+
viewQueries: [{
|
|
127
|
+
propertyName: "carousel",
|
|
128
|
+
first: true,
|
|
129
|
+
predicate: ["carousel"],
|
|
130
|
+
descendants: true,
|
|
131
|
+
isSignal: true
|
|
132
|
+
}],
|
|
133
|
+
ngImport: i0,
|
|
134
|
+
template: `
|
|
90
135
|
<div class="splide ul-carousel" #carousel role="region" aria-roledescription="carousel">
|
|
91
136
|
<div class="splide__track ul-carousel__track">
|
|
92
137
|
<div class="splide__list">
|
|
@@ -94,11 +139,22 @@ class CarouselComponent {
|
|
|
94
139
|
</div>
|
|
95
140
|
</div>
|
|
96
141
|
</div>
|
|
97
|
-
`,
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
142
|
+
`,
|
|
143
|
+
isInline: true,
|
|
144
|
+
styles: ["@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.ul-carousel{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;position:relative}.ul-carousel .splide__arrows{position:absolute;inset:0;z-index:1;pointer-events:none}.ul-carousel .splide__arrow{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:4096px;background-color:#0000004d;color:#fff;cursor:pointer;transition:background-color .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1)}.ul-carousel .splide__arrow:hover:not(:disabled){background-color:#000000b3}.ul-carousel .splide__arrow svg{width:20px;height:20px;fill:currentColor}.ul-carousel .splide__arrow:disabled{opacity:.3;cursor:default}.ul-carousel .splide__arrow--prev{left:8px}.ul-carousel .splide__arrow--prev svg{transform:scaleX(-1)}.ul-carousel .splide__arrow--next{right:8px}.ul-carousel__pagination-dot{border:0;border-radius:50%;margin:1rem .2rem 0;padding:0;height:6px;width:6px;background-color:#ffffff80}.ul-carousel__pagination-dot.is-active{background-color:#fff}\n"],
|
|
145
|
+
encapsulation: i0.ViewEncapsulation.None
|
|
146
|
+
});
|
|
147
|
+
};
|
|
148
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
149
|
+
minVersion: "12.0.0",
|
|
150
|
+
version: "22.2.2",
|
|
151
|
+
ngImport: i0,
|
|
152
|
+
type: CarouselComponent,
|
|
153
|
+
decorators: [{
|
|
154
|
+
type: Component,
|
|
155
|
+
args: [{
|
|
156
|
+
selector: "ul-carousel",
|
|
157
|
+
template: `
|
|
102
158
|
<div class="splide ul-carousel" #carousel role="region" aria-roledescription="carousel">
|
|
103
159
|
<div class="splide__track ul-carousel__track">
|
|
104
160
|
<div class="splide__list">
|
|
@@ -106,28 +162,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
106
162
|
</div>
|
|
107
163
|
</div>
|
|
108
164
|
</div>
|
|
109
|
-
`,
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
165
|
+
`,
|
|
166
|
+
encapsulation: ViewEncapsulation.None,
|
|
167
|
+
styles: ["@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;contain:strict;display:inline-block;height:20px;inset:0;margin:auto;position:absolute;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.ul-carousel{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;position:relative}.ul-carousel .splide__arrows{position:absolute;inset:0;z-index:1;pointer-events:none}.ul-carousel .splide__arrow{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:4096px;background-color:#0000004d;color:#fff;cursor:pointer;transition:background-color .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1)}.ul-carousel .splide__arrow:hover:not(:disabled){background-color:#000000b3}.ul-carousel .splide__arrow svg{width:20px;height:20px;fill:currentColor}.ul-carousel .splide__arrow:disabled{opacity:.3;cursor:default}.ul-carousel .splide__arrow--prev{left:8px}.ul-carousel .splide__arrow--prev svg{transform:scaleX(-1)}.ul-carousel .splide__arrow--next{right:8px}.ul-carousel__pagination-dot{border:0;border-radius:50%;margin:1rem .2rem 0;padding:0;height:6px;width:6px;background-color:#ffffff80}.ul-carousel__pagination-dot.is-active{background-color:#fff}\n"]
|
|
168
|
+
}]
|
|
169
|
+
}],
|
|
170
|
+
ctorParameters: () => [],
|
|
171
|
+
propDecorators: {
|
|
172
|
+
options: [{
|
|
173
|
+
type: i0.Input,
|
|
174
|
+
args: [{
|
|
175
|
+
isSignal: true,
|
|
176
|
+
alias: "options",
|
|
177
|
+
required: false
|
|
178
|
+
}]
|
|
179
|
+
}],
|
|
180
|
+
autoMount: [{
|
|
181
|
+
type: i0.Input,
|
|
182
|
+
args: [{
|
|
183
|
+
isSignal: true,
|
|
184
|
+
alias: "autoMount",
|
|
185
|
+
required: false
|
|
186
|
+
}]
|
|
187
|
+
}],
|
|
188
|
+
mounted: [{
|
|
189
|
+
type: i0.Output,
|
|
190
|
+
args: ["mounted"]
|
|
191
|
+
}],
|
|
192
|
+
carousel: [{
|
|
193
|
+
type: i0.ViewChild,
|
|
194
|
+
args: ["carousel", { isSignal: true }]
|
|
195
|
+
}],
|
|
196
|
+
items: [{
|
|
197
|
+
type: i0.ContentChildren,
|
|
198
|
+
args: [i0.forwardRef(() => CarouselItemComponent), { isSignal: true }]
|
|
199
|
+
}]
|
|
200
|
+
}
|
|
201
|
+
});
|
|
132
202
|
export { CarouselComponent, CarouselItemComponent };
|
|
133
|
-
|
|
203
|
+
|
|
204
|
+
//# sourceMappingURL=underlayerdev-ui-carousel.mjs.map
|