@ship-ui/core 0.16.19 → 0.17.2
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/assets/mcp/components.json +3484 -0
- package/bin/mcp/index.js +13757 -0
- package/fesm2022/ship-ui-core.mjs +311 -102
- package/fesm2022/ship-ui-core.mjs.map +1 -1
- package/package.json +6 -3
- package/snippets/ship-ui.code-snippets +472 -0
- package/types/ship-ui-core.d.ts +116 -27
|
@@ -1,13 +1,82 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { InjectionToken, inject, computed, ElementRef, Renderer2, input, ChangeDetectionStrategy, Component, viewChild, effect, HostListener, NgModule, signal, Injectable, DOCUMENT, model, output, ApplicationRef, createComponent, isSignal, OutputEmitterRef, DestroyRef, PLATFORM_ID, ViewChild, contentChild, contentChildren, afterNextRender, Injector, HostBinding, TemplateRef, runInInjectionContext, Directive, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
|
|
3
3
|
import { isPlatformBrowser, JsonPipe, DatePipe, isPlatformServer, NgTemplateOutlet } from '@angular/common';
|
|
4
4
|
import { NgModel } from '@angular/forms';
|
|
5
5
|
import { SIGNAL } from '@angular/core/primitives/signals';
|
|
6
6
|
|
|
7
|
+
const SHIP_CONFIG = new InjectionToken('Ship UI Config');
|
|
8
|
+
|
|
9
|
+
function shipComponentClasses(componentName, inputs) {
|
|
10
|
+
const config = inject(SHIP_CONFIG, { optional: true });
|
|
11
|
+
return computed(() => {
|
|
12
|
+
const componentConfig = config?.[componentName];
|
|
13
|
+
// Resolve variant (Input > Component Config > Global Legacy Mappings > empty)
|
|
14
|
+
let variant = inputs.variant?.();
|
|
15
|
+
if (!variant) {
|
|
16
|
+
variant = componentConfig?.variant;
|
|
17
|
+
}
|
|
18
|
+
// Legacy mapping for alert
|
|
19
|
+
if (!variant && componentName === 'alert' && config?.alertVariant) {
|
|
20
|
+
variant = config.alertVariant;
|
|
21
|
+
}
|
|
22
|
+
// Legacy mapping for card
|
|
23
|
+
if (!variant && componentName === 'card' && config?.cardType) {
|
|
24
|
+
variant = config.cardType;
|
|
25
|
+
}
|
|
26
|
+
// Legacy mapping for table
|
|
27
|
+
if (!variant && componentName === 'table' && config?.tableType) {
|
|
28
|
+
variant = config.tableType;
|
|
29
|
+
}
|
|
30
|
+
// Resolve color (Input > Component Config > empty)
|
|
31
|
+
const color = inputs.color?.() || componentConfig?.color;
|
|
32
|
+
// Resolve size (Input > Component Config > empty)
|
|
33
|
+
const size = inputs.size?.() || componentConfig?.size;
|
|
34
|
+
// Resolve sharp (Input > Component Config > false)
|
|
35
|
+
const sharp = (inputs.sharp?.() ?? componentConfig?.sharp) || false;
|
|
36
|
+
// Resolve dynamic (Input > Component Config > false)
|
|
37
|
+
const dynamic = (inputs.dynamic?.() ?? componentConfig?.dynamic) || false;
|
|
38
|
+
// Resolve readonly (Input > Component Config > false)
|
|
39
|
+
const readonly = (inputs.readonly?.() ?? componentConfig?.readonly) || false;
|
|
40
|
+
const classList = [];
|
|
41
|
+
if (color)
|
|
42
|
+
classList.push(color);
|
|
43
|
+
if (variant) {
|
|
44
|
+
// Handle type-a, type-b etc. If it doesn't already have the prefix but it's meant to be one of those
|
|
45
|
+
if (['a', 'b', 'c', 'd'].includes(variant)) {
|
|
46
|
+
classList.push(`type-${variant}`);
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
classList.push(variant);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
if (size)
|
|
53
|
+
classList.push(size);
|
|
54
|
+
if (sharp)
|
|
55
|
+
classList.push('sharp');
|
|
56
|
+
if (dynamic)
|
|
57
|
+
classList.push('dynamic');
|
|
58
|
+
if (readonly)
|
|
59
|
+
classList.push('readonly');
|
|
60
|
+
return classList.join(' ');
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
|
|
7
64
|
const iconTypes = ['bold', 'thin', 'light', 'fill', 'duotone'];
|
|
8
65
|
class ShipIcon {
|
|
9
|
-
|
|
10
|
-
|
|
66
|
+
constructor() {
|
|
67
|
+
this.#selfRef = inject(ElementRef);
|
|
68
|
+
this.#renderer = inject(Renderer2);
|
|
69
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
70
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
71
|
+
this.size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
72
|
+
this.hostClasses = shipComponentClasses('icon', {
|
|
73
|
+
color: this.color,
|
|
74
|
+
variant: this.variant,
|
|
75
|
+
size: this.size,
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
#selfRef;
|
|
79
|
+
#renderer;
|
|
11
80
|
ngAfterContentInit() {
|
|
12
81
|
const textContent = this.#selfRef.nativeElement.textContent?.trim();
|
|
13
82
|
if (!textContent)
|
|
@@ -18,7 +87,7 @@ class ShipIcon {
|
|
|
18
87
|
}
|
|
19
88
|
}
|
|
20
89
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
90
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipIcon, isStandalone: true, selector: "sh-icon", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
|
|
22
91
|
<ng-content />
|
|
23
92
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24
93
|
}
|
|
@@ -32,58 +101,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
32
101
|
<ng-content />
|
|
33
102
|
`,
|
|
34
103
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
104
|
+
host: {
|
|
105
|
+
'[class]': 'hostClasses()',
|
|
106
|
+
},
|
|
35
107
|
}]
|
|
36
|
-
}] });
|
|
108
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
37
109
|
|
|
38
|
-
function classMutationSignal(_element = null) {
|
|
39
|
-
const element = _element ?? inject(ElementRef).nativeElement;
|
|
40
|
-
if (!element)
|
|
41
|
-
return signal('');
|
|
42
|
-
const classListSignal = signal(element.className, ...(ngDevMode ? [{ debugName: "classListSignal" }] : []));
|
|
43
|
-
if (typeof MutationObserver === 'undefined')
|
|
44
|
-
return classListSignal.asReadonly();
|
|
45
|
-
const destroyRef = inject(DestroyRef);
|
|
46
|
-
const observer = new MutationObserver((mutations) => {
|
|
47
|
-
for (const mutation of mutations) {
|
|
48
|
-
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
|
49
|
-
const target = mutation.target;
|
|
50
|
-
classListSignal.set(target.className);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
observer.observe(element, { attributes: true, attributeFilter: ['class'] });
|
|
55
|
-
destroyRef.onDestroy(() => observer.disconnect());
|
|
56
|
-
return classListSignal.asReadonly();
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
const SHIP_CONFIG = new InjectionToken('Ship UI Config');
|
|
60
|
-
|
|
61
|
-
const POSSIBLE_VARIANTS = ['simple', 'outlined', 'flat', 'raised'];
|
|
62
110
|
class ShipAlert {
|
|
63
111
|
constructor() {
|
|
64
|
-
this
|
|
65
|
-
this.variant =
|
|
112
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
113
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
114
|
+
this.hostClasses = shipComponentClasses('alert', {
|
|
115
|
+
color: this.color,
|
|
116
|
+
variant: this.variant,
|
|
117
|
+
});
|
|
66
118
|
this._el = inject(ElementRef); // Used by alert container
|
|
67
119
|
this.alertService = input(null, ...(ngDevMode ? [{ debugName: "alertService" }] : []));
|
|
68
120
|
this.id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
69
|
-
this.currentClasses = classMutationSignal();
|
|
70
|
-
this.activeClass = computed(() => {
|
|
71
|
-
const variant = this.variant();
|
|
72
|
-
const _current = `${this.currentClasses()} sh-sheet`;
|
|
73
|
-
if (!variant)
|
|
74
|
-
return _current;
|
|
75
|
-
const hasVariant = POSSIBLE_VARIANTS.find((x) => this.currentClasses().includes(x));
|
|
76
|
-
return hasVariant ? _current : `${_current} ${variant}`;
|
|
77
|
-
}, ...(ngDevMode ? [{ debugName: "activeClass" }] : []));
|
|
78
121
|
}
|
|
79
|
-
#shConfig;
|
|
80
122
|
removeAlert() {
|
|
81
123
|
if (this.id() && this.alertService()) {
|
|
82
124
|
this.alertService()?.removeAlert(this.id());
|
|
83
125
|
}
|
|
84
126
|
}
|
|
85
127
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
86
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipAlert, isStandalone: true, selector: "sh-alert", inputs: { alertService: { classPropertyName: "alertService", publicName: "alertService", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "
|
|
128
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipAlert, isStandalone: true, selector: "sh-alert", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, alertService: { classPropertyName: "alertService", publicName: "alertService", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "sh-sheet" }, ngImport: i0, template: `
|
|
87
129
|
<div class="alert">
|
|
88
130
|
<div #ref class="icon" [style.display]="!ref.children.length ? 'none' : 'block'">
|
|
89
131
|
<ng-content select="[icon]" />
|
|
@@ -91,7 +133,7 @@ class ShipAlert {
|
|
|
91
133
|
</div>
|
|
92
134
|
|
|
93
135
|
<div class="icon">
|
|
94
|
-
@let _alertClasses =
|
|
136
|
+
@let _alertClasses = hostClasses();
|
|
95
137
|
|
|
96
138
|
@if (_alertClasses.includes('primary')) {
|
|
97
139
|
<sh-icon class="state-icon">info</sh-icon>
|
|
@@ -119,6 +161,7 @@ class ShipAlert {
|
|
|
119
161
|
|
|
120
162
|
<div class="actions">
|
|
121
163
|
<ng-content select="button" />
|
|
164
|
+
<ng-content select="[actions]" />
|
|
122
165
|
</div>
|
|
123
166
|
|
|
124
167
|
<div class="content">
|
|
@@ -126,7 +169,7 @@ class ShipAlert {
|
|
|
126
169
|
<ng-content select="p" />
|
|
127
170
|
</div>
|
|
128
171
|
</div>
|
|
129
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
172
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
130
173
|
}
|
|
131
174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipAlert, decorators: [{
|
|
132
175
|
type: Component,
|
|
@@ -141,7 +184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
141
184
|
</div>
|
|
142
185
|
|
|
143
186
|
<div class="icon">
|
|
144
|
-
@let _alertClasses =
|
|
187
|
+
@let _alertClasses = hostClasses();
|
|
145
188
|
|
|
146
189
|
@if (_alertClasses.includes('primary')) {
|
|
147
190
|
<sh-icon class="state-icon">info</sh-icon>
|
|
@@ -169,6 +212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
169
212
|
|
|
170
213
|
<div class="actions">
|
|
171
214
|
<ng-content select="button" />
|
|
215
|
+
<ng-content select="[actions]" />
|
|
172
216
|
</div>
|
|
173
217
|
|
|
174
218
|
<div class="content">
|
|
@@ -179,10 +223,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
179
223
|
`,
|
|
180
224
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
181
225
|
host: {
|
|
182
|
-
|
|
226
|
+
class: 'sh-sheet',
|
|
227
|
+
'[class]': 'hostClasses()',
|
|
183
228
|
},
|
|
184
229
|
}]
|
|
185
|
-
}], propDecorators: { alertService: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertService", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
230
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], alertService: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertService", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
186
231
|
|
|
187
232
|
class ShipAlertContainer {
|
|
188
233
|
constructor() {
|
|
@@ -244,7 +289,7 @@ class ShipAlertContainer {
|
|
|
244
289
|
: (this.numberOfOpenAlerts() - i) * 40 + 'ms';
|
|
245
290
|
}
|
|
246
291
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipAlertContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
247
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipAlertContainer, isStandalone: true, selector: "ship-alert-container", inputs: { inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, alertService: { classPropertyName: "alertService", publicName: "alertService", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, viewQueries: [{ propertyName: "alerts", first: true, predicate: ["alerts"], descendants: true, isSignal: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"scroller\" #scroller>\n <div class=\"container\">\n @for (alert of this.alertService().alertHistory(); track $index) {\n <sh-alert\n #alerts\n [class]=\"alert.type\"\n [id]=\"alert.id\"\n [alertService]=\"alertService()\"\n [style.transition-delay]=\"transitionDelay($index, true)\"\n [class.animate-in]=\"alert.animateIn\"\n [class.animate-out]=\"alert.animateOut\"\n [class.is-hidden]=\"this.alertService().alertHistoryIsHidden() && !alert.isOpen\">\n <div title>{{ alert.title }}</div>\n\n @if (alert.content) {\n <div content>\n {{ alert.content }}\n </div>\n }\n </sh-alert>\n }\n </div>\n</div>\n<div\n class=\"tray\"\n [class.tray-is-hidden]=\"!this.alertService().alertHistoryIsHidden()\"\n (mouseover)=\"this.onMouseOver()\"\n (mouseout)=\"this.onMouseOut()\">\n <sh-icon class=\"small\">info</sh-icon>\n</div>\n", dependencies: [{ kind: "component", type: ShipAlert, selector: "sh-alert", inputs: ["alertService", "id"] }, { kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
292
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipAlertContainer, isStandalone: true, selector: "ship-alert-container", inputs: { inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, alertService: { classPropertyName: "alertService", publicName: "alertService", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, viewQueries: [{ propertyName: "alerts", first: true, predicate: ["alerts"], descendants: true, isSignal: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"scroller\" #scroller>\n <div class=\"container\">\n @for (alert of this.alertService().alertHistory(); track $index) {\n <sh-alert\n #alerts\n [class]=\"alert.type\"\n [id]=\"alert.id\"\n [alertService]=\"alertService()\"\n [style.transition-delay]=\"transitionDelay($index, true)\"\n [class.animate-in]=\"alert.animateIn\"\n [class.animate-out]=\"alert.animateOut\"\n [class.is-hidden]=\"this.alertService().alertHistoryIsHidden() && !alert.isOpen\">\n <div title>{{ alert.title }}</div>\n\n @if (alert.content) {\n <div content>\n {{ alert.content }}\n </div>\n }\n </sh-alert>\n }\n </div>\n</div>\n<div\n class=\"tray\"\n [class.tray-is-hidden]=\"!this.alertService().alertHistoryIsHidden()\"\n (mouseover)=\"this.onMouseOver()\"\n (mouseout)=\"this.onMouseOut()\">\n <sh-icon class=\"small\">info</sh-icon>\n</div>\n", dependencies: [{ kind: "component", type: ShipAlert, selector: "sh-alert", inputs: ["color", "variant", "alertService", "id"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
248
293
|
}
|
|
249
294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipAlertContainer, decorators: [{
|
|
250
295
|
type: Component,
|
|
@@ -583,6 +628,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
583
628
|
}]
|
|
584
629
|
}] });
|
|
585
630
|
|
|
631
|
+
function classMutationSignal(_element = null) {
|
|
632
|
+
const element = _element ?? inject(ElementRef).nativeElement;
|
|
633
|
+
if (!element)
|
|
634
|
+
return signal('');
|
|
635
|
+
const classListSignal = signal(element.className, ...(ngDevMode ? [{ debugName: "classListSignal" }] : []));
|
|
636
|
+
if (typeof MutationObserver === 'undefined')
|
|
637
|
+
return classListSignal.asReadonly();
|
|
638
|
+
const destroyRef = inject(DestroyRef);
|
|
639
|
+
const observer = new MutationObserver((mutations) => {
|
|
640
|
+
for (const mutation of mutations) {
|
|
641
|
+
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
|
642
|
+
const target = mutation.target;
|
|
643
|
+
classListSignal.set(target.className);
|
|
644
|
+
}
|
|
645
|
+
}
|
|
646
|
+
});
|
|
647
|
+
observer.observe(element, { attributes: true, attributeFilter: ['class'] });
|
|
648
|
+
destroyRef.onDestroy(() => observer.disconnect());
|
|
649
|
+
return classListSignal.asReadonly();
|
|
650
|
+
}
|
|
651
|
+
|
|
586
652
|
function layoutNodes(nodes) {
|
|
587
653
|
if (!nodes || nodes.length === 0)
|
|
588
654
|
return nodes;
|
|
@@ -1577,7 +1643,7 @@ class ShipBlueprint {
|
|
|
1577
1643
|
</div>
|
|
1578
1644
|
}
|
|
1579
1645
|
</div>
|
|
1580
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ShipCard, selector: "sh-card" }, { kind: "component", type: ShipIcon, selector: "sh-icon" }, { kind: "component", type: ShipButton, selector: "[shButton]" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1646
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ShipCard, selector: "sh-card", inputs: ["color", "variant"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }, { kind: "component", type: ShipButton, selector: "[shButton]", inputs: ["color", "variant", "size", "readonly"] }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1581
1647
|
}
|
|
1582
1648
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipBlueprint, decorators: [{
|
|
1583
1649
|
type: Component,
|
|
@@ -1699,9 +1765,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
1699
1765
|
class ShipButtonGroup {
|
|
1700
1766
|
constructor() {
|
|
1701
1767
|
this.id = '--' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 12);
|
|
1768
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
1769
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
1770
|
+
this.size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1771
|
+
this.hostClasses = shipComponentClasses('buttonGroup', {
|
|
1772
|
+
color: this.color,
|
|
1773
|
+
variant: this.variant,
|
|
1774
|
+
size: this.size,
|
|
1775
|
+
});
|
|
1702
1776
|
}
|
|
1703
1777
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1704
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1778
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipButtonGroup, isStandalone: true, selector: "sh-button-group", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.--btng-id": "id" } }, ngImport: i0, template: `
|
|
1705
1779
|
<ng-content />
|
|
1706
1780
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1707
1781
|
}
|
|
@@ -1715,14 +1789,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
1715
1789
|
`,
|
|
1716
1790
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1717
1791
|
host: {
|
|
1792
|
+
'[class]': 'hostClasses()',
|
|
1718
1793
|
'[style.--btng-id]': 'id',
|
|
1719
1794
|
},
|
|
1720
1795
|
}]
|
|
1721
|
-
}] });
|
|
1796
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
1722
1797
|
|
|
1723
1798
|
class ShipButton {
|
|
1799
|
+
constructor() {
|
|
1800
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
1801
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
1802
|
+
this.size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1803
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1804
|
+
this.hostClasses = shipComponentClasses('button', {
|
|
1805
|
+
color: this.color,
|
|
1806
|
+
variant: this.variant,
|
|
1807
|
+
size: this.size,
|
|
1808
|
+
readonly: this.readonly,
|
|
1809
|
+
});
|
|
1810
|
+
}
|
|
1724
1811
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1725
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1812
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipButton, isStandalone: true, selector: "[shButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "sh-sheet-h" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1726
1813
|
}
|
|
1727
1814
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipButton, decorators: [{
|
|
1728
1815
|
type: Component,
|
|
@@ -1733,18 +1820,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
1733
1820
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1734
1821
|
host: {
|
|
1735
1822
|
class: 'sh-sheet-h',
|
|
1823
|
+
'[class]': 'hostClasses()',
|
|
1736
1824
|
},
|
|
1737
1825
|
}]
|
|
1738
|
-
}] });
|
|
1826
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
|
|
1739
1827
|
|
|
1740
1828
|
class ShipCard {
|
|
1741
1829
|
constructor() {
|
|
1742
|
-
this
|
|
1743
|
-
this.
|
|
1830
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
1831
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
1832
|
+
this.hostClasses = shipComponentClasses('card', {
|
|
1833
|
+
color: this.color,
|
|
1834
|
+
variant: this.variant,
|
|
1835
|
+
});
|
|
1744
1836
|
}
|
|
1745
|
-
#shConfig;
|
|
1746
1837
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1747
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1838
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipCard, isStandalone: true, selector: "sh-card", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
|
|
1748
1839
|
<ng-content />
|
|
1749
1840
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1750
1841
|
}
|
|
@@ -1758,17 +1849,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
1758
1849
|
`,
|
|
1759
1850
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1760
1851
|
host: {
|
|
1761
|
-
'[class]': '
|
|
1852
|
+
'[class]': 'hostClasses()',
|
|
1762
1853
|
},
|
|
1763
1854
|
}]
|
|
1764
|
-
}] });
|
|
1855
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
1765
1856
|
|
|
1766
1857
|
class ShipCheckbox {
|
|
1767
1858
|
constructor() {
|
|
1768
1859
|
this.currentClassList = classMutationSignal();
|
|
1860
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
1861
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
1862
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1863
|
+
this.hostClasses = shipComponentClasses('checkbox', {
|
|
1864
|
+
color: this.color,
|
|
1865
|
+
variant: this.variant,
|
|
1866
|
+
readonly: this.readonly,
|
|
1867
|
+
});
|
|
1769
1868
|
}
|
|
1770
1869
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1771
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1870
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipCheckbox, isStandalone: true, selector: "sh-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
|
|
1772
1871
|
<div class="box sh-sheet" [class]="currentClassList()">
|
|
1773
1872
|
<sh-icon class="inherit default-indicator">check-bold</sh-icon>
|
|
1774
1873
|
<sh-icon class="inherit indeterminate-indicator">minus-bold</sh-icon>
|
|
@@ -1777,7 +1876,7 @@ class ShipCheckbox {
|
|
|
1777
1876
|
<div class="label">
|
|
1778
1877
|
<ng-content />
|
|
1779
1878
|
</div>
|
|
1780
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1879
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1781
1880
|
}
|
|
1782
1881
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipCheckbox, decorators: [{
|
|
1783
1882
|
type: Component,
|
|
@@ -1795,12 +1894,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
1795
1894
|
</div>
|
|
1796
1895
|
`,
|
|
1797
1896
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1897
|
+
host: {
|
|
1898
|
+
'[class]': 'hostClasses()',
|
|
1899
|
+
},
|
|
1798
1900
|
}]
|
|
1799
|
-
}] });
|
|
1901
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
|
|
1800
1902
|
|
|
1801
1903
|
class ShipChip {
|
|
1904
|
+
constructor() {
|
|
1905
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
1906
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
1907
|
+
this.size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1908
|
+
this.sharp = input(undefined, ...(ngDevMode ? [{ debugName: "sharp" }] : []));
|
|
1909
|
+
this.dynamic = input(undefined, ...(ngDevMode ? [{ debugName: "dynamic" }] : []));
|
|
1910
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1911
|
+
this.hostClasses = shipComponentClasses('chip', {
|
|
1912
|
+
color: this.color,
|
|
1913
|
+
variant: this.variant,
|
|
1914
|
+
size: this.size,
|
|
1915
|
+
sharp: this.sharp,
|
|
1916
|
+
dynamic: this.dynamic,
|
|
1917
|
+
readonly: this.readonly,
|
|
1918
|
+
});
|
|
1919
|
+
}
|
|
1802
1920
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipChip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1803
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1921
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipChip, isStandalone: true, selector: "sh-chip", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sharp: { classPropertyName: "sharp", publicName: "sharp", isSignal: true, isRequired: false, transformFunction: null }, dynamic: { classPropertyName: "dynamic", publicName: "dynamic", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "sh-sheet" }, ngImport: i0, template: '<div><ng-content /></div>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1804
1922
|
}
|
|
1805
1923
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipChip, decorators: [{
|
|
1806
1924
|
type: Component,
|
|
@@ -1812,9 +1930,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
1812
1930
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1813
1931
|
host: {
|
|
1814
1932
|
class: 'sh-sheet',
|
|
1933
|
+
'[class]': 'hostClasses()',
|
|
1815
1934
|
},
|
|
1816
1935
|
}]
|
|
1817
|
-
}] });
|
|
1936
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sharp: [{ type: i0.Input, args: [{ isSignal: true, alias: "sharp", required: false }] }], dynamic: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamic", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
|
|
1818
1937
|
|
|
1819
1938
|
// TODOS
|
|
1820
1939
|
// - Add a color picker input
|
|
@@ -2434,7 +2553,7 @@ class ShipDatepicker {
|
|
|
2434
2553
|
</div>
|
|
2435
2554
|
}
|
|
2436
2555
|
</section>
|
|
2437
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2556
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2438
2557
|
}
|
|
2439
2558
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipDatepicker, decorators: [{
|
|
2440
2559
|
type: Component,
|
|
@@ -2975,7 +3094,7 @@ class ShipDatepickerInput {
|
|
|
2975
3094
|
</sh-form-field-popover>
|
|
2976
3095
|
|
|
2977
3096
|
<ng-template #defaultIndicator></ng-template>
|
|
2978
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3097
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2979
3098
|
}
|
|
2980
3099
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipDatepickerInput, decorators: [{
|
|
2981
3100
|
type: Component,
|
|
@@ -3147,7 +3266,7 @@ class ShipDaterangeInput {
|
|
|
3147
3266
|
}
|
|
3148
3267
|
</div>
|
|
3149
3268
|
</sh-form-field-popover>
|
|
3150
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3269
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3151
3270
|
}
|
|
3152
3271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipDaterangeInput, decorators: [{
|
|
3153
3272
|
type: Component,
|
|
@@ -3210,8 +3329,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
3210
3329
|
}] });
|
|
3211
3330
|
|
|
3212
3331
|
class ShipEventCard {
|
|
3332
|
+
constructor() {
|
|
3333
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
3334
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
3335
|
+
this.hostClasses = shipComponentClasses('event-card', {
|
|
3336
|
+
color: this.color,
|
|
3337
|
+
variant: this.variant,
|
|
3338
|
+
});
|
|
3339
|
+
}
|
|
3213
3340
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipEventCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3214
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3341
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipEventCard, isStandalone: true, selector: "sh-event-card", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "sh-sheet" }, ngImport: i0, template: `
|
|
3215
3342
|
<div class="content">
|
|
3216
3343
|
<ng-content />
|
|
3217
3344
|
</div>
|
|
@@ -3240,12 +3367,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
3240
3367
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3241
3368
|
host: {
|
|
3242
3369
|
class: 'sh-sheet',
|
|
3370
|
+
'[class]': 'hostClasses()',
|
|
3243
3371
|
},
|
|
3244
3372
|
}]
|
|
3245
|
-
}] });
|
|
3373
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
3246
3374
|
|
|
3247
3375
|
class ShipFormField {
|
|
3248
|
-
#selfRef
|
|
3376
|
+
#selfRef;
|
|
3249
3377
|
onClick() {
|
|
3250
3378
|
if (this.#selfRef.nativeElement.querySelector('input')) {
|
|
3251
3379
|
this.#selfRef.nativeElement.querySelector('input').focus();
|
|
@@ -3255,6 +3383,17 @@ class ShipFormField {
|
|
|
3255
3383
|
}
|
|
3256
3384
|
}
|
|
3257
3385
|
constructor() {
|
|
3386
|
+
this.#selfRef = inject(ElementRef);
|
|
3387
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
3388
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
3389
|
+
this.size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
3390
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
3391
|
+
this.hostClasses = shipComponentClasses('formField', {
|
|
3392
|
+
color: this.color,
|
|
3393
|
+
variant: this.variant,
|
|
3394
|
+
size: this.size,
|
|
3395
|
+
readonly: this.readonly,
|
|
3396
|
+
});
|
|
3258
3397
|
afterNextRender(() => {
|
|
3259
3398
|
const supportFieldSizing = typeof CSS !== 'undefined' && CSS.supports('field-sizing', 'content');
|
|
3260
3399
|
const text = this.#selfRef.nativeElement.querySelector('textarea');
|
|
@@ -3279,7 +3418,7 @@ class ShipFormField {
|
|
|
3279
3418
|
});
|
|
3280
3419
|
}
|
|
3281
3420
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3282
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipFormField, isStandalone: true, selector: "sh-form-field", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
|
|
3283
3422
|
<ng-content select="label"></ng-content>
|
|
3284
3423
|
|
|
3285
3424
|
<div class="input-wrap">
|
|
@@ -3346,8 +3485,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
3346
3485
|
</div>
|
|
3347
3486
|
`,
|
|
3348
3487
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3488
|
+
host: {
|
|
3489
|
+
'[class]': 'hostClasses()',
|
|
3490
|
+
},
|
|
3349
3491
|
}]
|
|
3350
|
-
}], ctorParameters: () => [], propDecorators: { onClick: [{
|
|
3492
|
+
}], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], onClick: [{
|
|
3351
3493
|
type: HostListener,
|
|
3352
3494
|
args: ['click']
|
|
3353
3495
|
}] } });
|
|
@@ -3420,7 +3562,7 @@ class ShipFileUpload {
|
|
|
3420
3562
|
|
|
3421
3563
|
<sh-icon suffix>upload-simple</sh-icon>
|
|
3422
3564
|
</sh-form-field>
|
|
3423
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ShipFormField, selector: "sh-form-field" }, { kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3565
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ShipFormField, selector: "sh-form-field", inputs: ["color", "variant", "size", "readonly"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3424
3566
|
}
|
|
3425
3567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipFileUpload, decorators: [{
|
|
3426
3568
|
type: Component,
|
|
@@ -3907,7 +4049,7 @@ class ShipMenu {
|
|
|
3907
4049
|
<ng-content select="[menu]" />
|
|
3908
4050
|
</div>
|
|
3909
4051
|
</sh-popover>
|
|
3910
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field" }, { kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4052
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field", inputs: ["color", "variant", "size", "readonly"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3911
4053
|
}
|
|
3912
4054
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipMenu, decorators: [{
|
|
3913
4055
|
type: Component,
|
|
@@ -3960,9 +4102,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
3960
4102
|
class ShipProgressBar {
|
|
3961
4103
|
constructor() {
|
|
3962
4104
|
this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
4105
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
4106
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
4107
|
+
this.hostClasses = shipComponentClasses('progressBar', {
|
|
4108
|
+
color: this.color,
|
|
4109
|
+
variant: this.variant,
|
|
4110
|
+
});
|
|
3963
4111
|
}
|
|
3964
4112
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3965
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipProgressBar, isStandalone: true, selector: "sh-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
4113
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipProgressBar, isStandalone: true, selector: "sh-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
|
|
3966
4114
|
<div class="progress-bar" [style.width.%]="value()"></div>
|
|
3967
4115
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3968
4116
|
}
|
|
@@ -3975,15 +4123,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
3975
4123
|
<div class="progress-bar" [style.width.%]="value()"></div>
|
|
3976
4124
|
`,
|
|
3977
4125
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4126
|
+
host: {
|
|
4127
|
+
'[class]': 'hostClasses()',
|
|
4128
|
+
},
|
|
3978
4129
|
}]
|
|
3979
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
|
|
4130
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
3980
4131
|
|
|
3981
4132
|
class ShipRadio {
|
|
3982
4133
|
constructor() {
|
|
3983
4134
|
this.currentClassList = classMutationSignal();
|
|
4135
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
4136
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
4137
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
4138
|
+
this.hostClasses = shipComponentClasses('radio', {
|
|
4139
|
+
color: this.color,
|
|
4140
|
+
variant: this.variant,
|
|
4141
|
+
readonly: this.readonly,
|
|
4142
|
+
});
|
|
3984
4143
|
}
|
|
3985
4144
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipRadio, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3986
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4145
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipRadio, isStandalone: true, selector: "sh-radio", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
|
|
3987
4146
|
<div class="radio sh-sheet" [class]="currentClassList()"></div>
|
|
3988
4147
|
|
|
3989
4148
|
<ng-content />
|
|
@@ -4000,8 +4159,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
4000
4159
|
<ng-content />
|
|
4001
4160
|
`,
|
|
4002
4161
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4162
|
+
host: {
|
|
4163
|
+
'[class]': 'hostClasses()',
|
|
4164
|
+
},
|
|
4003
4165
|
}]
|
|
4004
|
-
}] });
|
|
4166
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
|
|
4005
4167
|
|
|
4006
4168
|
class ShipRangeSlider {
|
|
4007
4169
|
constructor() {
|
|
@@ -4249,8 +4411,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
4249
4411
|
}] } });
|
|
4250
4412
|
|
|
4251
4413
|
class ShipSpinner {
|
|
4414
|
+
constructor() {
|
|
4415
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
4416
|
+
this.hostClasses = shipComponentClasses('spinner', {
|
|
4417
|
+
color: this.color,
|
|
4418
|
+
});
|
|
4419
|
+
}
|
|
4252
4420
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4253
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipSpinner, isStandalone: true, selector: "sh-spinner", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4254
4422
|
}
|
|
4255
4423
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipSpinner, decorators: [{
|
|
4256
4424
|
type: Component,
|
|
@@ -4259,8 +4427,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
4259
4427
|
imports: [],
|
|
4260
4428
|
template: ``,
|
|
4261
4429
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4430
|
+
host: {
|
|
4431
|
+
'[class]': 'hostClasses()',
|
|
4432
|
+
},
|
|
4262
4433
|
}]
|
|
4263
|
-
}] });
|
|
4434
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
4264
4435
|
|
|
4265
4436
|
class ShipSelect {
|
|
4266
4437
|
constructor() {
|
|
@@ -4979,7 +5150,7 @@ class ShipSelect {
|
|
|
4979
5150
|
}
|
|
4980
5151
|
</div>
|
|
4981
5152
|
</sh-popover>
|
|
4982
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field" }, { kind: "component", type: ShipIcon, selector: "sh-icon" }, { kind: "component", type: ShipCheckbox, selector: "sh-checkbox" }, { kind: "component", type: ShipSpinner, selector: "sh-spinner" }, { kind: "component", type: ShipChip, selector: "sh-chip" }, { kind: "component", type: ShipDivider, selector: "sh-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5153
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field", inputs: ["color", "variant", "size", "readonly"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }, { kind: "component", type: ShipCheckbox, selector: "sh-checkbox", inputs: ["color", "variant", "readonly"] }, { kind: "component", type: ShipSpinner, selector: "sh-spinner", inputs: ["color"] }, { kind: "component", type: ShipChip, selector: "sh-chip", inputs: ["color", "variant", "size", "sharp", "dynamic", "readonly"] }, { kind: "component", type: ShipDivider, selector: "sh-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4983
5154
|
}
|
|
4984
5155
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipSelect, decorators: [{
|
|
4985
5156
|
type: Component,
|
|
@@ -5674,8 +5845,14 @@ function moveIndex(array, event) {
|
|
|
5674
5845
|
}
|
|
5675
5846
|
|
|
5676
5847
|
class ShipStepper {
|
|
5848
|
+
constructor() {
|
|
5849
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
5850
|
+
this.hostClasses = shipComponentClasses('stepper', {
|
|
5851
|
+
color: this.color,
|
|
5852
|
+
});
|
|
5853
|
+
}
|
|
5677
5854
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipStepper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5678
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5855
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipStepper, isStandalone: true, selector: "sh-stepper", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
|
|
5679
5856
|
<ng-content />
|
|
5680
5857
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5681
5858
|
}
|
|
@@ -5688,8 +5865,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
5688
5865
|
<ng-content />
|
|
5689
5866
|
`,
|
|
5690
5867
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5868
|
+
host: {
|
|
5869
|
+
'[class]': 'hostClasses()',
|
|
5870
|
+
},
|
|
5691
5871
|
}]
|
|
5692
|
-
}] });
|
|
5872
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5693
5873
|
|
|
5694
5874
|
class ShipResize {
|
|
5695
5875
|
constructor() {
|
|
@@ -5868,17 +6048,21 @@ const SCROLL_TOLERANCE = 1.5;
|
|
|
5868
6048
|
class ShipTable {
|
|
5869
6049
|
constructor() {
|
|
5870
6050
|
this.#el = inject(ElementRef);
|
|
5871
|
-
this.#shConfig = inject(SHIP_CONFIG, { optional: true });
|
|
5872
6051
|
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
5873
6052
|
this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
5874
6053
|
this.dataChange = output();
|
|
5875
6054
|
this.sortByColumn = model(null, ...(ngDevMode ? [{ debugName: "sortByColumn" }] : []));
|
|
5876
|
-
this.
|
|
6055
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
6056
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
6057
|
+
this.hostClasses = shipComponentClasses('table', {
|
|
6058
|
+
color: this.color,
|
|
6059
|
+
variant: this.variant,
|
|
6060
|
+
});
|
|
5877
6061
|
this.thead = viewChild('thead', ...(ngDevMode ? [{ debugName: "thead" }] : []));
|
|
5878
6062
|
this.tbody = viewChild('tbody', ...(ngDevMode ? [{ debugName: "tbody" }] : []));
|
|
5879
6063
|
this.columns = observeChildren(this.thead, ['tr:first-child th']);
|
|
5880
6064
|
this.stickyHeaderHeight = computed(() => {
|
|
5881
|
-
const _ = this.
|
|
6065
|
+
const _ = this.hostClasses();
|
|
5882
6066
|
const height = this.thead()?.nativeElement?.clientHeight;
|
|
5883
6067
|
return height ?? 0;
|
|
5884
6068
|
}, ...(ngDevMode ? [{ debugName: "stickyHeaderHeight" }] : []));
|
|
@@ -5899,7 +6083,6 @@ class ShipTable {
|
|
|
5899
6083
|
}
|
|
5900
6084
|
});
|
|
5901
6085
|
}, ...(ngDevMode ? [{ debugName: "bodyEffect" }] : []));
|
|
5902
|
-
this.class = signal(this.#shConfig?.tableType ?? 'default', ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
5903
6086
|
this.resizing = signal(false, ...(ngDevMode ? [{ debugName: "resizing" }] : []));
|
|
5904
6087
|
this.sizeTrigger = signal(true, ...(ngDevMode ? [{ debugName: "sizeTrigger" }] : []));
|
|
5905
6088
|
this.#initialData = null;
|
|
@@ -5957,7 +6140,6 @@ class ShipTable {
|
|
|
5957
6140
|
}, ...(ngDevMode ? [{ debugName: "e" }] : []));
|
|
5958
6141
|
}
|
|
5959
6142
|
#el;
|
|
5960
|
-
#shConfig;
|
|
5961
6143
|
#initialData;
|
|
5962
6144
|
#initialDataSet;
|
|
5963
6145
|
updateColumnSizes() {
|
|
@@ -6009,7 +6191,7 @@ class ShipTable {
|
|
|
6009
6191
|
this.canScrollY.set(canScrollY);
|
|
6010
6192
|
}
|
|
6011
6193
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6012
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipTable, isStandalone: true, selector: "sh-table", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortByColumn: { classPropertyName: "sortByColumn", publicName: "sortByColumn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataChange: "dataChange", sortByColumn: "sortByColumnChange" }, host: { listeners: { "scroll": "onScroll()", "window:resize": "onResize($event)" }, properties: { "class": "
|
|
6194
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipTable, isStandalone: true, selector: "sh-table", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortByColumn: { classPropertyName: "sortByColumn", publicName: "sortByColumn", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataChange: "dataChange", sortByColumn: "sortByColumnChange" }, host: { listeners: { "scroll": "onScroll()", "window:resize": "onResize($event)" }, properties: { "class": "hostClasses()", "style.grid-template-columns": "columnSizes()", "class.resizing": "resizing()", "class.can-scroll-x": "canScrollX()", "class.can-scroll-y": "canScrollY()", "class.scrolled-x": "scrollXState() >= 0", "class.scrolled-x-end": "scrollXState() === 1", "class.scrolled-y": "scrollYState() >= 0", "class.scrolled-y-end": "scrollYState() === 1" } }, viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true, isSignal: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
6013
6195
|
<div class="actionbar">
|
|
6014
6196
|
<ng-content select="[actionbar]" />
|
|
6015
6197
|
</div>
|
|
@@ -6032,7 +6214,7 @@ class ShipTable {
|
|
|
6032
6214
|
<ng-content select="[table-no-rows]" />
|
|
6033
6215
|
</div>
|
|
6034
6216
|
}
|
|
6035
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ShipProgressBar, selector: "sh-progress-bar", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6217
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ShipProgressBar, selector: "sh-progress-bar", inputs: ["value", "color", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6036
6218
|
}
|
|
6037
6219
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipTable, decorators: [{
|
|
6038
6220
|
type: Component,
|
|
@@ -6065,7 +6247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
6065
6247
|
`,
|
|
6066
6248
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6067
6249
|
host: {
|
|
6068
|
-
'[class]': '
|
|
6250
|
+
'[class]': 'hostClasses()',
|
|
6069
6251
|
'[style.grid-template-columns]': 'columnSizes()',
|
|
6070
6252
|
'[class.resizing]': 'resizing()',
|
|
6071
6253
|
'(scroll)': 'onScroll()',
|
|
@@ -6077,7 +6259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
6077
6259
|
'[class.scrolled-y-end]': 'scrollYState() === 1',
|
|
6078
6260
|
},
|
|
6079
6261
|
}]
|
|
6080
|
-
}], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], sortByColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortByColumn", required: false }] }, { type: i0.Output, args: ["sortByColumnChange"] }], thead: [{ type: i0.ViewChild, args: ['thead', { isSignal: true }] }], tbody: [{ type: i0.ViewChild, args: ['tbody', { isSignal: true }] }], onResize: [{
|
|
6262
|
+
}], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], sortByColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortByColumn", required: false }] }, { type: i0.Output, args: ["sortByColumnChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], thead: [{ type: i0.ViewChild, args: ['thead', { isSignal: true }] }], tbody: [{ type: i0.ViewChild, args: ['tbody', { isSignal: true }] }], onResize: [{
|
|
6081
6263
|
type: HostListener,
|
|
6082
6264
|
args: ['window:resize', ['$event']]
|
|
6083
6265
|
}] } });
|
|
@@ -6085,9 +6267,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
6085
6267
|
class ShipTabs {
|
|
6086
6268
|
constructor() {
|
|
6087
6269
|
this.id = '--' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 12);
|
|
6270
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
6271
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
6272
|
+
this.hostClasses = shipComponentClasses('tabs', {
|
|
6273
|
+
color: this.color,
|
|
6274
|
+
variant: this.variant,
|
|
6275
|
+
});
|
|
6088
6276
|
}
|
|
6089
6277
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6090
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
6278
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipTabs, isStandalone: true, selector: "sh-tabs", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.--tabs-id": "id" } }, ngImport: i0, template: `
|
|
6091
6279
|
<ng-content />
|
|
6092
6280
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6093
6281
|
}
|
|
@@ -6101,10 +6289,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
6101
6289
|
`,
|
|
6102
6290
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6103
6291
|
host: {
|
|
6292
|
+
'[class]': 'hostClasses()',
|
|
6104
6293
|
'[style.--tabs-id]': 'id',
|
|
6105
6294
|
},
|
|
6106
6295
|
}]
|
|
6107
|
-
}] });
|
|
6296
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
6108
6297
|
|
|
6109
6298
|
const THEME_ORDER = ['light', 'dark', null];
|
|
6110
6299
|
const WINDOW = new InjectionToken('WindowToken', {
|
|
@@ -6183,7 +6372,7 @@ class ShipThemeToggle {
|
|
|
6183
6372
|
}
|
|
6184
6373
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipThemeToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6185
6374
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipThemeToggle, isStandalone: true, selector: "ship-theme-toggle", ngImport: i0, template: `
|
|
6186
|
-
<button shButton
|
|
6375
|
+
<button shButton size="small" (click)="toggleTheme()">
|
|
6187
6376
|
@if (theme() === 'dark') {
|
|
6188
6377
|
<sh-icon>moon-bold</sh-icon>
|
|
6189
6378
|
} @else if (theme() === 'light') {
|
|
@@ -6193,7 +6382,7 @@ class ShipThemeToggle {
|
|
|
6193
6382
|
<sh-icon class="small-icon">moon-bold</sh-icon>
|
|
6194
6383
|
}
|
|
6195
6384
|
</button>
|
|
6196
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon" }, { kind: "component", type: ShipButton, selector: "[shButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6385
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }, { kind: "component", type: ShipButton, selector: "[shButton]", inputs: ["color", "variant", "size", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6197
6386
|
}
|
|
6198
6387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipThemeToggle, decorators: [{
|
|
6199
6388
|
type: Component,
|
|
@@ -6201,7 +6390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
6201
6390
|
selector: 'ship-theme-toggle',
|
|
6202
6391
|
imports: [ShipIcon, ShipButton],
|
|
6203
6392
|
template: `
|
|
6204
|
-
<button shButton
|
|
6393
|
+
<button shButton size="small" (click)="toggleTheme()">
|
|
6205
6394
|
@if (theme() === 'dark') {
|
|
6206
6395
|
<sh-icon>moon-bold</sh-icon>
|
|
6207
6396
|
} @else if (theme() === 'light') {
|
|
@@ -6220,6 +6409,12 @@ class ShipToggleCard {
|
|
|
6220
6409
|
constructor() {
|
|
6221
6410
|
this.isActive = model(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
|
|
6222
6411
|
this.disallowToggle = input(false, ...(ngDevMode ? [{ debugName: "disallowToggle" }] : []));
|
|
6412
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
6413
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
6414
|
+
this.hostClasses = shipComponentClasses('card', {
|
|
6415
|
+
color: this.color,
|
|
6416
|
+
variant: this.variant,
|
|
6417
|
+
});
|
|
6223
6418
|
}
|
|
6224
6419
|
ngOnInit() {
|
|
6225
6420
|
if (this.disallowToggle()) {
|
|
@@ -6230,7 +6425,7 @@ class ShipToggleCard {
|
|
|
6230
6425
|
this.isActive.set(!this.isActive());
|
|
6231
6426
|
}
|
|
6232
6427
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipToggleCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6233
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipToggleCard, isStandalone: true, selector: "sh-toggle-card", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, disallowToggle: { classPropertyName: "disallowToggle", publicName: "disallowToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isActive: "isActiveChange" }, host: { properties: { "class.active": "isActive()" } }, ngImport: i0, template: `
|
|
6428
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ShipToggleCard, isStandalone: true, selector: "sh-toggle-card", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, disallowToggle: { classPropertyName: "disallowToggle", publicName: "disallowToggle", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isActive: "isActiveChange" }, host: { properties: { "class.active": "isActive()", "class": "hostClasses()" } }, ngImport: i0, template: `
|
|
6234
6429
|
<h3 (click)="disallowToggle() || toggle()">
|
|
6235
6430
|
<ng-content select="[title]">Title</ng-content>
|
|
6236
6431
|
|
|
@@ -6244,7 +6439,7 @@ class ShipToggleCard {
|
|
|
6244
6439
|
<ng-content />
|
|
6245
6440
|
</div>
|
|
6246
6441
|
</div>
|
|
6247
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6442
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "variant", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6248
6443
|
}
|
|
6249
6444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipToggleCard, decorators: [{
|
|
6250
6445
|
type: Component,
|
|
@@ -6269,13 +6464,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
6269
6464
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6270
6465
|
host: {
|
|
6271
6466
|
'[class.active]': 'isActive()',
|
|
6467
|
+
'[class]': 'hostClasses()',
|
|
6272
6468
|
},
|
|
6273
6469
|
}]
|
|
6274
|
-
}], propDecorators: { isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }, { type: i0.Output, args: ["isActiveChange"] }], disallowToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "disallowToggle", required: false }] }] } });
|
|
6470
|
+
}], propDecorators: { isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }, { type: i0.Output, args: ["isActiveChange"] }], disallowToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "disallowToggle", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
6275
6471
|
|
|
6276
6472
|
class ShipToggle {
|
|
6473
|
+
constructor() {
|
|
6474
|
+
this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
6475
|
+
this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
6476
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
6477
|
+
this.hostClasses = shipComponentClasses('toggle', {
|
|
6478
|
+
color: this.color,
|
|
6479
|
+
variant: this.variant,
|
|
6480
|
+
readonly: this.readonly,
|
|
6481
|
+
});
|
|
6482
|
+
}
|
|
6277
6483
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ShipToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6278
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
6484
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: ShipToggle, isStandalone: true, selector: "sh-toggle", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
|
|
6279
6485
|
<div class="box">
|
|
6280
6486
|
<div class="knob"></div>
|
|
6281
6487
|
</div>
|
|
@@ -6296,8 +6502,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
6296
6502
|
<ng-content />
|
|
6297
6503
|
`,
|
|
6298
6504
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6505
|
+
host: {
|
|
6506
|
+
'[class]': 'hostClasses()',
|
|
6507
|
+
},
|
|
6299
6508
|
}]
|
|
6300
|
-
}] });
|
|
6509
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
|
|
6301
6510
|
|
|
6302
6511
|
class ShipVirtualScroll {
|
|
6303
6512
|
constructor() {
|