ngx-strata 0.4.4 → 0.5.0
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/styles/components/avatar.scss +42 -2
- package/assets/styles/components/checkbox.scss +66 -5
- package/assets/styles/components/file-upload.scss +52 -0
- package/assets/styles/components/input-field.scss +92 -43
- package/assets/styles/components/radio.scss +59 -4
- package/assets/styles/components/segmented-control.scss +79 -23
- package/assets/styles/components/select.scss +54 -1
- package/assets/styles/components/sidemenu.scss +14 -0
- package/assets/styles/components/slider.scss +67 -1
- package/assets/styles/components/table.scss +2 -2
- package/assets/styles/components/toggle.scss +59 -4
- package/dist/strata/strata.css +1 -1
- package/fesm2022/ngx-strata.mjs +332 -62
- package/fesm2022/ngx-strata.mjs.map +1 -1
- package/package.json +1 -1
- package/skills/ngx-strata/components/card.md +1 -1
- package/skills/ngx-strata/components/checkbox.md +4 -0
- package/skills/ngx-strata/components/file-upload.md +4 -0
- package/skills/ngx-strata/components/input-field.md +9 -3
- package/skills/ngx-strata/components/otp.md +2 -0
- package/skills/ngx-strata/components/radio.md +8 -0
- package/skills/ngx-strata/components/segmented-control.md +4 -0
- package/skills/ngx-strata/components/single-select.md +4 -0
- package/skills/ngx-strata/components/slider.md +4 -0
- package/skills/ngx-strata/components/toggle.md +4 -0
- package/types/ngx-strata.d.ts +101 -13
package/fesm2022/ngx-strata.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Injectable, provideAppInitializer, makeEnvironmentProviders, DOCUMENT, signal, computed, effect, InjectionToken, provideEnvironmentInitializer, ElementRef, input, model, output, Directive, Renderer2, DestroyRef, Pipe, HostBinding, Component, contentChildren, forwardRef, contentChild, HostListener, ViewContainerRef, viewChild,
|
|
2
|
+
import { inject, Injectable, provideAppInitializer, makeEnvironmentProviders, DOCUMENT, signal, computed, effect, InjectionToken, provideEnvironmentInitializer, ElementRef, input, model, output, Directive, Renderer2, DestroyRef, Pipe, HostBinding, Component, contentChildren, booleanAttribute, forwardRef, contentChild, HostListener, ViewContainerRef, viewChild, numberAttribute, Injector, LOCALE_ID, viewChildren, ContentChildren, TemplateRef } from '@angular/core';
|
|
3
3
|
import { Observable, tap, map, fromEvent, switchMap, filter } from 'rxjs';
|
|
4
4
|
import { HttpClient } from '@angular/common/http';
|
|
5
5
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
@@ -630,9 +630,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
630
630
|
args: ['class.standalone']
|
|
631
631
|
}] } });
|
|
632
632
|
|
|
633
|
-
let nextUniqueId = 0;
|
|
633
|
+
let nextUniqueId$1 = 0;
|
|
634
634
|
class StrataCheckboxComponent {
|
|
635
|
-
defaultId = `st-checkbox-${nextUniqueId++}`;
|
|
635
|
+
defaultId = `st-checkbox-${nextUniqueId$1++}`;
|
|
636
636
|
value = model(false, /* @ts-ignore */
|
|
637
637
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
638
638
|
label = input(undefined, /* @ts-ignore */
|
|
@@ -643,12 +643,31 @@ class StrataCheckboxComponent {
|
|
|
643
643
|
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
644
644
|
disabled = input(false, /* @ts-ignore */
|
|
645
645
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
646
|
+
state = input(undefined, /* @ts-ignore */
|
|
647
|
+
...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
648
|
+
error = input(false, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
649
|
+
message = input(undefined, /* @ts-ignore */
|
|
650
|
+
...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
651
|
+
colorMessage = input(true, { ...(ngDevMode ? { debugName: "colorMessage" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
646
652
|
cvaDisabled = signal(false, /* @ts-ignore */
|
|
647
653
|
...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
648
654
|
effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
|
|
649
655
|
...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
|
|
650
656
|
effectiveId = computed(() => this.id() ?? this.name() ?? this.defaultId, /* @ts-ignore */
|
|
651
657
|
...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
|
|
658
|
+
effectiveState = computed(() => {
|
|
659
|
+
if (this.error()) {
|
|
660
|
+
return 'error';
|
|
661
|
+
}
|
|
662
|
+
return this.state() ?? 'default';
|
|
663
|
+
}, /* @ts-ignore */
|
|
664
|
+
...(ngDevMode ? [{ debugName: "effectiveState" }] : /* istanbul ignore next */ []));
|
|
665
|
+
isMessageError = computed(() => this.effectiveState() === 'error' && this.colorMessage(), /* @ts-ignore */
|
|
666
|
+
...(ngDevMode ? [{ debugName: "isMessageError" }] : /* istanbul ignore next */ []));
|
|
667
|
+
isMessageSuccess = computed(() => this.effectiveState() === 'success' && this.colorMessage(), /* @ts-ignore */
|
|
668
|
+
...(ngDevMode ? [{ debugName: "isMessageSuccess" }] : /* istanbul ignore next */ []));
|
|
669
|
+
isMessageWarning = computed(() => this.effectiveState() === 'warning' && this.colorMessage(), /* @ts-ignore */
|
|
670
|
+
...(ngDevMode ? [{ debugName: "isMessageWarning" }] : /* istanbul ignore next */ []));
|
|
652
671
|
onChange = () => undefined;
|
|
653
672
|
onTouched = () => undefined;
|
|
654
673
|
toggle() {
|
|
@@ -681,13 +700,13 @@ class StrataCheckboxComponent {
|
|
|
681
700
|
this.cvaDisabled.set(isDisabled);
|
|
682
701
|
}
|
|
683
702
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
684
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataCheckboxComponent, isStandalone: true, selector: "st-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "checkbox" }, listeners: { "click": "onHostClick($event)", "keydown.space": "onSpaceKey($event)" }, properties: { "attr.tabindex": "effectiveDisabled() ? -1 : 0", "attr.aria-checked": "!!value()", "attr.aria-disabled": "effectiveDisabled()", "attr.data-disabled": "effectiveDisabled()", "class.disabled": "effectiveDisabled()" } }, providers: [
|
|
703
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataCheckboxComponent, isStandalone: true, selector: "st-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, colorMessage: { classPropertyName: "colorMessage", publicName: "colorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "checkbox" }, listeners: { "click": "onHostClick($event)", "keydown.space": "onSpaceKey($event)" }, properties: { "attr.tabindex": "effectiveDisabled() ? -1 : 0", "attr.aria-checked": "!!value()", "attr.aria-disabled": "effectiveDisabled()", "attr.data-disabled": "effectiveDisabled()", "class.disabled": "effectiveDisabled()", "class.st-state-error": "effectiveState() === \"error\"", "class.st-state-success": "effectiveState() === \"success\"", "class.st-state-warning": "effectiveState() === \"warning\"", "class.st-error": "effectiveState() === \"error\"" } }, providers: [
|
|
685
704
|
{
|
|
686
705
|
provide: NG_VALUE_ACCESSOR,
|
|
687
706
|
useExisting: forwardRef(() => StrataCheckboxComponent),
|
|
688
707
|
multi: true
|
|
689
708
|
}
|
|
690
|
-
], ngImport: i0, template: "<input\n
|
|
709
|
+
], ngImport: i0, template: "<div class=\"st-checkbox-row\">\n <input\n type=\"checkbox\"\n [id]=\"effectiveId()\"\n [name]=\"name() ?? effectiveId()\"\n [checked]=\"!!value()\"\n [disabled]=\"effectiveDisabled()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n <div class=\"checkbox-visual\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z\"\n ></path>\n </svg>\n </div>\n @if (label()) {\n <label [for]=\"effectiveId()\"> {{ label() }}</label>\n }\n</div>\n@if (message()) {\n <div\n class=\"st-checkbox-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ message() }}\n </div>\n}\n" });
|
|
691
710
|
}
|
|
692
711
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataCheckboxComponent, decorators: [{
|
|
693
712
|
type: Component,
|
|
@@ -704,10 +723,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
704
723
|
'[attr.aria-disabled]': 'effectiveDisabled()',
|
|
705
724
|
'[attr.data-disabled]': 'effectiveDisabled()',
|
|
706
725
|
'[class.disabled]': 'effectiveDisabled()',
|
|
726
|
+
'[class.st-state-error]': 'effectiveState() === "error"',
|
|
727
|
+
'[class.st-state-success]': 'effectiveState() === "success"',
|
|
728
|
+
'[class.st-state-warning]': 'effectiveState() === "warning"',
|
|
729
|
+
'[class.st-error]': 'effectiveState() === "error"',
|
|
707
730
|
'(click)': 'onHostClick($event)',
|
|
708
731
|
'(keydown.space)': 'onSpaceKey($event)'
|
|
709
|
-
}, template: "<input\n
|
|
710
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
732
|
+
}, template: "<div class=\"st-checkbox-row\">\n <input\n type=\"checkbox\"\n [id]=\"effectiveId()\"\n [name]=\"name() ?? effectiveId()\"\n [checked]=\"!!value()\"\n [disabled]=\"effectiveDisabled()\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n />\n <div class=\"checkbox-visual\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z\"\n ></path>\n </svg>\n </div>\n @if (label()) {\n <label [for]=\"effectiveId()\"> {{ label() }}</label>\n }\n</div>\n@if (message()) {\n <div\n class=\"st-checkbox-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ message() }}\n </div>\n}\n" }]
|
|
733
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], colorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMessage", required: false }] }] } });
|
|
711
734
|
|
|
712
735
|
class StrataToggleComponent {
|
|
713
736
|
_activatable = inject(StrataActivatableDirective);
|
|
@@ -717,11 +740,30 @@ class StrataToggleComponent {
|
|
|
717
740
|
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
718
741
|
labelPosition = input('after', /* @ts-ignore */
|
|
719
742
|
...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
|
|
743
|
+
state = input(undefined, /* @ts-ignore */
|
|
744
|
+
...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
745
|
+
error = input(false, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
746
|
+
message = input(undefined, /* @ts-ignore */
|
|
747
|
+
...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
748
|
+
colorMessage = input(true, { ...(ngDevMode ? { debugName: "colorMessage" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
720
749
|
disabled = this._activatable.disabled;
|
|
721
750
|
cvaDisabled = signal(false, /* @ts-ignore */
|
|
722
751
|
...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
723
752
|
effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
|
|
724
753
|
...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
|
|
754
|
+
effectiveState = computed(() => {
|
|
755
|
+
if (this.error()) {
|
|
756
|
+
return 'error';
|
|
757
|
+
}
|
|
758
|
+
return this.state() ?? 'default';
|
|
759
|
+
}, /* @ts-ignore */
|
|
760
|
+
...(ngDevMode ? [{ debugName: "effectiveState" }] : /* istanbul ignore next */ []));
|
|
761
|
+
isMessageError = computed(() => this.effectiveState() === 'error' && this.colorMessage(), /* @ts-ignore */
|
|
762
|
+
...(ngDevMode ? [{ debugName: "isMessageError" }] : /* istanbul ignore next */ []));
|
|
763
|
+
isMessageSuccess = computed(() => this.effectiveState() === 'success' && this.colorMessage(), /* @ts-ignore */
|
|
764
|
+
...(ngDevMode ? [{ debugName: "isMessageSuccess" }] : /* istanbul ignore next */ []));
|
|
765
|
+
isMessageWarning = computed(() => this.effectiveState() === 'warning' && this.colorMessage(), /* @ts-ignore */
|
|
766
|
+
...(ngDevMode ? [{ debugName: "isMessageWarning" }] : /* istanbul ignore next */ []));
|
|
725
767
|
onChange = () => undefined;
|
|
726
768
|
onTouched = () => undefined;
|
|
727
769
|
onCheckChanged(event) {
|
|
@@ -749,13 +791,13 @@ class StrataToggleComponent {
|
|
|
749
791
|
this.cvaDisabled.set(isDisabled);
|
|
750
792
|
}
|
|
751
793
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
752
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataToggleComponent, isStandalone: true, selector: "st-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "role": "switch" }, listeners: { "click": "onCheckChanged($event)" }, properties: { "attr.aria-checked": "checked()", "attr.aria-disabled": "effectiveDisabled()", "attr.data-checked": "checked()", "attr.data-disabled": "effectiveDisabled()", "class.st-toggle-label-before": "labelPosition() === 'before'", "class.st-toggle-label-after": "labelPosition() === 'after'" } }, providers: [
|
|
794
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataToggleComponent, isStandalone: true, selector: "st-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, colorMessage: { classPropertyName: "colorMessage", publicName: "colorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "role": "switch" }, listeners: { "click": "onCheckChanged($event)" }, properties: { "attr.aria-checked": "checked()", "attr.aria-disabled": "effectiveDisabled()", "attr.data-checked": "checked()", "attr.data-disabled": "effectiveDisabled()", "class.st-toggle-label-before": "labelPosition() === 'before'", "class.st-toggle-label-after": "labelPosition() === 'after'", "class.st-state-error": "effectiveState() === \"error\"", "class.st-state-success": "effectiveState() === \"success\"", "class.st-state-warning": "effectiveState() === \"warning\"", "class.st-error": "effectiveState() === \"error\"", "attr.aria-invalid": "effectiveState() === \"error\" ? \"true\" : null" } }, providers: [
|
|
753
795
|
{
|
|
754
796
|
provide: NG_VALUE_ACCESSOR,
|
|
755
797
|
useExisting: forwardRef(() => StrataToggleComponent),
|
|
756
798
|
multi: true
|
|
757
799
|
}
|
|
758
|
-
], hostDirectives: [{ directive: StrataActivatableDirective, inputs: ["disabled", "disabled"], outputs: ["activated", "activated"] }], ngImport: i0, template: "<div class=\"st-toggle-
|
|
800
|
+
], hostDirectives: [{ directive: StrataActivatableDirective, inputs: ["disabled", "disabled"], outputs: ["activated", "activated"] }], ngImport: i0, template: "<div class=\"st-toggle-row\">\n <div class=\"st-toggle-track\">\n <div class=\"toggle-handle\"></div>\n </div>\n @if (label()) {\n <span class=\"st-toggle-label\">{{ label() }}</span>\n }\n <ng-content></ng-content>\n</div>\n@if (message()) {\n <div\n class=\"st-toggle-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ message() }}\n </div>\n}\n" });
|
|
759
801
|
}
|
|
760
802
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataToggleComponent, decorators: [{
|
|
761
803
|
type: Component,
|
|
@@ -779,9 +821,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
779
821
|
'[attr.data-checked]': 'checked()',
|
|
780
822
|
'[attr.data-disabled]': 'effectiveDisabled()',
|
|
781
823
|
'[class.st-toggle-label-before]': "labelPosition() === 'before'",
|
|
782
|
-
'[class.st-toggle-label-after]': "labelPosition() === 'after'"
|
|
783
|
-
|
|
784
|
-
|
|
824
|
+
'[class.st-toggle-label-after]': "labelPosition() === 'after'",
|
|
825
|
+
'[class.st-state-error]': 'effectiveState() === "error"',
|
|
826
|
+
'[class.st-state-success]': 'effectiveState() === "success"',
|
|
827
|
+
'[class.st-state-warning]': 'effectiveState() === "warning"',
|
|
828
|
+
'[class.st-error]': 'effectiveState() === "error"',
|
|
829
|
+
'[attr.aria-invalid]': 'effectiveState() === "error" ? "true" : null'
|
|
830
|
+
}, template: "<div class=\"st-toggle-row\">\n <div class=\"st-toggle-track\">\n <div class=\"toggle-handle\"></div>\n </div>\n @if (label()) {\n <span class=\"st-toggle-label\">{{ label() }}</span>\n }\n <ng-content></ng-content>\n</div>\n@if (message()) {\n <div\n class=\"st-toggle-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ message() }}\n </div>\n}\n" }]
|
|
831
|
+
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], colorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMessage", required: false }] }] } });
|
|
785
832
|
|
|
786
833
|
class StrataActionMenuItemComponent {
|
|
787
834
|
checkbox = contentChild(StrataCheckboxComponent, { ...(ngDevMode ? { debugName: "checkbox" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
@@ -1232,6 +1279,8 @@ class StrataAvatarComponent {
|
|
|
1232
1279
|
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
1233
1280
|
size = model('md', /* @ts-ignore */
|
|
1234
1281
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1282
|
+
variant = input('circle', /* @ts-ignore */
|
|
1283
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1235
1284
|
imageError = signal(false, /* @ts-ignore */
|
|
1236
1285
|
...(ngDevMode ? [{ debugName: "imageError" }] : /* istanbul ignore next */ []));
|
|
1237
1286
|
constructor() {
|
|
@@ -1240,9 +1289,8 @@ class StrataAvatarComponent {
|
|
|
1240
1289
|
this.imageError.set(false);
|
|
1241
1290
|
});
|
|
1242
1291
|
}
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
}
|
|
1292
|
+
elementClasses = computed(() => `${this.size()} ${this.variant()}`, /* @ts-ignore */
|
|
1293
|
+
...(ngDevMode ? [{ debugName: "elementClasses" }] : /* istanbul ignore next */ []));
|
|
1246
1294
|
onImageError() {
|
|
1247
1295
|
this.imageError.set(true);
|
|
1248
1296
|
}
|
|
@@ -1254,15 +1302,14 @@ class StrataAvatarComponent {
|
|
|
1254
1302
|
});
|
|
1255
1303
|
}
|
|
1256
1304
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataAvatarComponent, isStandalone: true, selector: "st-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class": "
|
|
1305
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataAvatarComponent, isStandalone: true, selector: "st-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange" }, host: { properties: { "class": "elementClasses()" } }, queries: [{ propertyName: "iconComponents", predicate: StrataIconComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (src() && !imageError()) {\n <img [src]=\"src()!\" [alt]=\"alt()\" (error)=\"onImageError()\" />\n} @else if (text() !== null) {\n <span>{{ text() }}</span>\n}\n<ng-content></ng-content>\n" });
|
|
1258
1306
|
}
|
|
1259
1307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAvatarComponent, decorators: [{
|
|
1260
1308
|
type: Component,
|
|
1261
|
-
args: [{ selector: 'st-avatar', imports: [],
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
}] } });
|
|
1309
|
+
args: [{ selector: 'st-avatar', imports: [], host: {
|
|
1310
|
+
'[class]': 'elementClasses()'
|
|
1311
|
+
}, template: "@if (src() && !imageError()) {\n <img [src]=\"src()!\" [alt]=\"alt()\" (error)=\"onImageError()\" />\n} @else if (text() !== null) {\n <span>{{ text() }}</span>\n}\n<ng-content></ng-content>\n" }]
|
|
1312
|
+
}], ctorParameters: () => [], propDecorators: { iconComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataIconComponent), { ...{ descendants: true }, isSignal: true }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
1266
1313
|
|
|
1267
1314
|
class StrataBadgeComponent {
|
|
1268
1315
|
value = input(undefined, /* @ts-ignore */
|
|
@@ -1457,6 +1504,27 @@ class StrataFileUploadComponent {
|
|
|
1457
1504
|
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1458
1505
|
hint = input(undefined, /* @ts-ignore */
|
|
1459
1506
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
1507
|
+
state = input(undefined, /* @ts-ignore */
|
|
1508
|
+
...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
1509
|
+
error = input(false, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1510
|
+
message = input(undefined, /* @ts-ignore */
|
|
1511
|
+
...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
1512
|
+
colorMessage = input(true, { ...(ngDevMode ? { debugName: "colorMessage" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1513
|
+
displayMessage = computed(() => this.message() ?? this.hint(), /* @ts-ignore */
|
|
1514
|
+
...(ngDevMode ? [{ debugName: "displayMessage" }] : /* istanbul ignore next */ []));
|
|
1515
|
+
effectiveState = computed(() => {
|
|
1516
|
+
if (this.error()) {
|
|
1517
|
+
return 'error';
|
|
1518
|
+
}
|
|
1519
|
+
return this.state() ?? 'default';
|
|
1520
|
+
}, /* @ts-ignore */
|
|
1521
|
+
...(ngDevMode ? [{ debugName: "effectiveState" }] : /* istanbul ignore next */ []));
|
|
1522
|
+
isMessageError = computed(() => this.effectiveState() === 'error' && this.colorMessage(), /* @ts-ignore */
|
|
1523
|
+
...(ngDevMode ? [{ debugName: "isMessageError" }] : /* istanbul ignore next */ []));
|
|
1524
|
+
isMessageSuccess = computed(() => this.effectiveState() === 'success' && this.colorMessage(), /* @ts-ignore */
|
|
1525
|
+
...(ngDevMode ? [{ debugName: "isMessageSuccess" }] : /* istanbul ignore next */ []));
|
|
1526
|
+
isMessageWarning = computed(() => this.effectiveState() === 'warning' && this.colorMessage(), /* @ts-ignore */
|
|
1527
|
+
...(ngDevMode ? [{ debugName: "isMessageWarning" }] : /* istanbul ignore next */ []));
|
|
1460
1528
|
fileSelect = output();
|
|
1461
1529
|
filesSelect = output();
|
|
1462
1530
|
fileRejected = output();
|
|
@@ -1465,6 +1533,18 @@ class StrataFileUploadComponent {
|
|
|
1465
1533
|
get hostDisabled() {
|
|
1466
1534
|
return this.disabled();
|
|
1467
1535
|
}
|
|
1536
|
+
get hostError() {
|
|
1537
|
+
return this.effectiveState() === 'error';
|
|
1538
|
+
}
|
|
1539
|
+
get hostSuccess() {
|
|
1540
|
+
return this.effectiveState() === 'success';
|
|
1541
|
+
}
|
|
1542
|
+
get hostWarning() {
|
|
1543
|
+
return this.effectiveState() === 'warning';
|
|
1544
|
+
}
|
|
1545
|
+
get hostAriaInvalid() {
|
|
1546
|
+
return this.effectiveState() === 'error' ? 'true' : null;
|
|
1547
|
+
}
|
|
1468
1548
|
get hostDragOver() {
|
|
1469
1549
|
return this.isDragOver();
|
|
1470
1550
|
}
|
|
@@ -1567,14 +1647,29 @@ class StrataFileUploadComponent {
|
|
|
1567
1647
|
});
|
|
1568
1648
|
}
|
|
1569
1649
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1570
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataFileUploadComponent, isStandalone: true, selector: "st-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelect: "fileSelect", filesSelect: "filesSelect", fileRejected: "fileRejected" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onKeydown($event)", "keydown.space": "onKeydown($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.st-disabled": "this.hostDisabled", "class.st-drag-over": "this.hostDragOver", "attr.role": "this.hostRole", "attr.tabindex": "this.hostTabIndex" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #fileInput\n type=\"file\"\n class=\"st-file-upload-input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onFileChange($event)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n/>\n\n<div class=\"st-file-upload-content\">\n <div class=\"st-file-upload-icon-wrapper\">\n <ng-content select=\"[uploadIcon]\">\n <svg\n class=\"st-file-upload-icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n <polyline points=\"17 8 12 3 7 8\" />\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n </svg>\n </ng-content>\n </div>\n\n <div class=\"st-file-upload-text\">\n <span class=\"st-file-upload-label\">{{ label() }}</span>\n @if (
|
|
1650
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataFileUploadComponent, isStandalone: true, selector: "st-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, colorMessage: { classPropertyName: "colorMessage", publicName: "colorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelect: "fileSelect", filesSelect: "filesSelect", fileRejected: "fileRejected" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onKeydown($event)", "keydown.space": "onKeydown($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.st-disabled": "this.hostDisabled", "class.st-state-error": "this.hostError", "class.st-error": "this.hostError", "class.st-state-success": "this.hostSuccess", "class.st-state-warning": "this.hostWarning", "attr.aria-invalid": "this.hostAriaInvalid", "class.st-drag-over": "this.hostDragOver", "attr.role": "this.hostRole", "attr.tabindex": "this.hostTabIndex" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #fileInput\n type=\"file\"\n class=\"st-file-upload-input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onFileChange($event)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n/>\n\n<div class=\"st-file-upload-content\">\n <div class=\"st-file-upload-icon-wrapper\">\n <ng-content select=\"[uploadIcon]\">\n <svg\n class=\"st-file-upload-icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n <polyline points=\"17 8 12 3 7 8\" />\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n </svg>\n </ng-content>\n </div>\n\n <div class=\"st-file-upload-text\">\n <span class=\"st-file-upload-label\">{{ label() }}</span>\n @if (displayMessage()) {\n <span\n class=\"st-file-upload-hint\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >{{ displayMessage() }}</span>\n }\n </div>\n\n <ng-content></ng-content>\n</div>\n" });
|
|
1571
1651
|
}
|
|
1572
1652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataFileUploadComponent, decorators: [{
|
|
1573
1653
|
type: Component,
|
|
1574
|
-
args: [{ selector: 'st-file-upload', imports: [], template: "<input\n #fileInput\n type=\"file\"\n class=\"st-file-upload-input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onFileChange($event)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n/>\n\n<div class=\"st-file-upload-content\">\n <div class=\"st-file-upload-icon-wrapper\">\n <ng-content select=\"[uploadIcon]\">\n <svg\n class=\"st-file-upload-icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n <polyline points=\"17 8 12 3 7 8\" />\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n </svg>\n </ng-content>\n </div>\n\n <div class=\"st-file-upload-text\">\n <span class=\"st-file-upload-label\">{{ label() }}</span>\n @if (
|
|
1575
|
-
}], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], fileSelect: [{ type: i0.Output, args: ["fileSelect"] }], filesSelect: [{ type: i0.Output, args: ["filesSelect"] }], fileRejected: [{ type: i0.Output, args: ["fileRejected"] }], hostDisabled: [{
|
|
1654
|
+
args: [{ selector: 'st-file-upload', imports: [], template: "<input\n #fileInput\n type=\"file\"\n class=\"st-file-upload-input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onFileChange($event)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n/>\n\n<div class=\"st-file-upload-content\">\n <div class=\"st-file-upload-icon-wrapper\">\n <ng-content select=\"[uploadIcon]\">\n <svg\n class=\"st-file-upload-icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n <polyline points=\"17 8 12 3 7 8\" />\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n </svg>\n </ng-content>\n </div>\n\n <div class=\"st-file-upload-text\">\n <span class=\"st-file-upload-label\">{{ label() }}</span>\n @if (displayMessage()) {\n <span\n class=\"st-file-upload-hint\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >{{ displayMessage() }}</span>\n }\n </div>\n\n <ng-content></ng-content>\n</div>\n" }]
|
|
1655
|
+
}], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], colorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMessage", required: false }] }], fileSelect: [{ type: i0.Output, args: ["fileSelect"] }], filesSelect: [{ type: i0.Output, args: ["filesSelect"] }], fileRejected: [{ type: i0.Output, args: ["fileRejected"] }], hostDisabled: [{
|
|
1576
1656
|
type: HostBinding,
|
|
1577
1657
|
args: ['class.st-disabled']
|
|
1658
|
+
}], hostError: [{
|
|
1659
|
+
type: HostBinding,
|
|
1660
|
+
args: ['class.st-state-error']
|
|
1661
|
+
}, {
|
|
1662
|
+
type: HostBinding,
|
|
1663
|
+
args: ['class.st-error']
|
|
1664
|
+
}], hostSuccess: [{
|
|
1665
|
+
type: HostBinding,
|
|
1666
|
+
args: ['class.st-state-success']
|
|
1667
|
+
}], hostWarning: [{
|
|
1668
|
+
type: HostBinding,
|
|
1669
|
+
args: ['class.st-state-warning']
|
|
1670
|
+
}], hostAriaInvalid: [{
|
|
1671
|
+
type: HostBinding,
|
|
1672
|
+
args: ['attr.aria-invalid']
|
|
1578
1673
|
}], hostDragOver: [{
|
|
1579
1674
|
type: HostBinding,
|
|
1580
1675
|
args: ['class.st-drag-over']
|
|
@@ -1609,12 +1704,31 @@ class StrataSliderComponent {
|
|
|
1609
1704
|
resizeObserver;
|
|
1610
1705
|
value = model(/* @ts-ignore */
|
|
1611
1706
|
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1707
|
+
state = input(undefined, /* @ts-ignore */
|
|
1708
|
+
...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
1709
|
+
error = input(false, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1710
|
+
message = input(undefined, /* @ts-ignore */
|
|
1711
|
+
...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
1712
|
+
colorMessage = input(true, { ...(ngDevMode ? { debugName: "colorMessage" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1612
1713
|
disabled = input(false, /* @ts-ignore */
|
|
1613
1714
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1614
1715
|
cvaDisabled = signal(false, /* @ts-ignore */
|
|
1615
1716
|
...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
1616
1717
|
effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
|
|
1617
1718
|
...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
|
|
1719
|
+
effectiveState = computed(() => {
|
|
1720
|
+
if (this.error()) {
|
|
1721
|
+
return 'error';
|
|
1722
|
+
}
|
|
1723
|
+
return this.state() ?? 'default';
|
|
1724
|
+
}, /* @ts-ignore */
|
|
1725
|
+
...(ngDevMode ? [{ debugName: "effectiveState" }] : /* istanbul ignore next */ []));
|
|
1726
|
+
isMessageError = computed(() => this.effectiveState() === 'error' && this.colorMessage(), /* @ts-ignore */
|
|
1727
|
+
...(ngDevMode ? [{ debugName: "isMessageError" }] : /* istanbul ignore next */ []));
|
|
1728
|
+
isMessageSuccess = computed(() => this.effectiveState() === 'success' && this.colorMessage(), /* @ts-ignore */
|
|
1729
|
+
...(ngDevMode ? [{ debugName: "isMessageSuccess" }] : /* istanbul ignore next */ []));
|
|
1730
|
+
isMessageWarning = computed(() => this.effectiveState() === 'warning' && this.colorMessage(), /* @ts-ignore */
|
|
1731
|
+
...(ngDevMode ? [{ debugName: "isMessageWarning" }] : /* istanbul ignore next */ []));
|
|
1618
1732
|
onChange = () => undefined;
|
|
1619
1733
|
onTouched = () => undefined;
|
|
1620
1734
|
minimum = input.required(/* @ts-ignore */
|
|
@@ -1701,13 +1815,13 @@ class StrataSliderComponent {
|
|
|
1701
1815
|
this.cvaDisabled.set(isDisabled);
|
|
1702
1816
|
}
|
|
1703
1817
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1704
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
1818
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataSliderComponent, isStandalone: true, selector: "st-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, colorMessage: { classPropertyName: "colorMessage", publicName: "colorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minimum: { classPropertyName: "minimum", publicName: "minimum", isSignal: true, isRequired: true, transformFunction: null }, maximum: { classPropertyName: "maximum", publicName: "maximum", isSignal: true, isRequired: true, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled()", "class.st-state-error": "effectiveState() === \"error\"", "class.st-state-success": "effectiveState() === \"success\"", "class.st-state-warning": "effectiveState() === \"warning\"", "class.st-error": "effectiveState() === \"error\"", "attr.aria-invalid": "effectiveState() === \"error\" ? \"true\" : null" } }, providers: [
|
|
1705
1819
|
{
|
|
1706
1820
|
provide: NG_VALUE_ACCESSOR,
|
|
1707
1821
|
useExisting: forwardRef(() => StrataSliderComponent),
|
|
1708
1822
|
multi: true
|
|
1709
1823
|
}
|
|
1710
|
-
], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #wrapper\n class=\"range-wrapper\"\n [style.--steps]=\"steps()\"\n [class.stepped]=\"isStepped()\"\n>\n <input\n type=\"range\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"onModelChange($event)\"\n [disabled]=\"effectiveDisabled()\"\n [min]=\"minimum()\"\n [max]=\"maximum()\"\n [step]=\"computedStep()\"\n />\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1824
|
+
], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #wrapper\n class=\"range-wrapper\"\n [style.--steps]=\"steps()\"\n [class.stepped]=\"isStepped()\"\n>\n <input\n type=\"range\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"onModelChange($event)\"\n [disabled]=\"effectiveDisabled()\"\n [min]=\"minimum()\"\n [max]=\"maximum()\"\n [step]=\"computedStep()\"\n />\n</div>\n@if (message()) {\n <div\n class=\"st-slider-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ message() }}\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1711
1825
|
}
|
|
1712
1826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSliderComponent, decorators: [{
|
|
1713
1827
|
type: Component,
|
|
@@ -1719,9 +1833,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
1719
1833
|
}
|
|
1720
1834
|
], host: {
|
|
1721
1835
|
'[class.st-disabled]': 'effectiveDisabled()',
|
|
1722
|
-
'[attr.aria-disabled]': 'effectiveDisabled()'
|
|
1723
|
-
|
|
1724
|
-
|
|
1836
|
+
'[attr.aria-disabled]': 'effectiveDisabled()',
|
|
1837
|
+
'[class.st-state-error]': 'effectiveState() === "error"',
|
|
1838
|
+
'[class.st-state-success]': 'effectiveState() === "success"',
|
|
1839
|
+
'[class.st-state-warning]': 'effectiveState() === "warning"',
|
|
1840
|
+
'[class.st-error]': 'effectiveState() === "error"',
|
|
1841
|
+
'[attr.aria-invalid]': 'effectiveState() === "error" ? "true" : null'
|
|
1842
|
+
}, template: "<div\n #wrapper\n class=\"range-wrapper\"\n [style.--steps]=\"steps()\"\n [class.stepped]=\"isStepped()\"\n>\n <input\n type=\"range\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"onModelChange($event)\"\n [disabled]=\"effectiveDisabled()\"\n [min]=\"minimum()\"\n [max]=\"maximum()\"\n [step]=\"computedStep()\"\n />\n</div>\n@if (message()) {\n <div\n class=\"st-slider-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ message() }}\n </div>\n}\n" }]
|
|
1843
|
+
}], ctorParameters: () => [], propDecorators: { wrapper: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], colorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minimum: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimum", required: true }] }], maximum: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximum", required: true }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
|
|
1725
1844
|
|
|
1726
1845
|
class StrataImageCropperComponent {
|
|
1727
1846
|
viewportRef = viewChild('viewport', /* @ts-ignore */
|
|
@@ -2025,7 +2144,7 @@ class StrataImageCropperComponent {
|
|
|
2025
2144
|
}
|
|
2026
2145
|
}
|
|
2027
2146
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataImageCropperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2028
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataImageCropperComponent, isStandalone: true, selector: "st-image-cropper", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, maskSize: { classPropertyName: "maskSize", publicName: "maskSize", isSignal: true, isRequired: false, transformFunction: null }, outputWidth: { classPropertyName: "outputWidth", publicName: "outputWidth", isSignal: true, isRequired: false, transformFunction: null }, outputHeight: { classPropertyName: "outputHeight", publicName: "outputHeight", isSignal: true, isRequired: false, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: false, transformFunction: null }, outputQuality: { classPropertyName: "outputQuality", publicName: "outputQuality", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, showZoom: { classPropertyName: "showZoom", publicName: "showZoom", isSignal: true, isRequired: false, transformFunction: null }, showRotate: { classPropertyName: "showRotate", publicName: "showRotate", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, autoCrop: { classPropertyName: "autoCrop", publicName: "autoCrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, rotation: { classPropertyName: "rotation", publicName: "rotation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zoom: "zoomChange", rotation: "rotationChange", crop: "crop", imageLoaded: "imageLoaded", imageError: "imageError", imageCleared: "imageCleared" }, host: { properties: { "class.st-disabled": "this.hostDisabled", "class.st-has-image": "this.hostHasImage", "style.--st-cropper-mask-size": "this.hostMaskSize" } }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "imageRef", first: true, predicate: ["imgElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!hasImage()) {\n <div class=\"st-cropper-empty-state\">\n <ng-content select=\"[emptyState], [placeholder], st-file-upload\">\n <div class=\"st-cropper-empty-placeholder\">\n <svg\n class=\"st-cropper-placeholder-icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\" />\n <polyline points=\"21 15 16 10 5 21\" />\n </svg>\n <span>No image selected</span>\n </div>\n </ng-content>\n </div>\n} @else {\n <div class=\"st-cropper-workspace\">\n <div\n #viewport\n class=\"st-cropper-viewport\"\n [class.st-is-dragging]=\"isDragging()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n (wheel)=\"onWheel($event)\"\n >\n <div class=\"st-cropper-stage\">\n <div class=\"st-cropper-image-layer\">\n <img\n #imgElement\n class=\"st-cropper-image\"\n [src]=\"currentImageSrc()\"\n [style.transform]=\"imageTransform()\"\n alt=\"Image to crop\"\n draggable=\"false\"\n (load)=\"onImageElementLoad($event)\"\n (error)=\"onImageElementError()\"\n />\n </div>\n\n <div\n class=\"st-cropper-mask\"\n [class.st-crop-shape-circle]=\"shape() === 'circle'\"\n [class.st-crop-shape-square]=\"shape() === 'square'\"\n ></div>\n\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"st-cropper-floating-close st-cropper-clear-btn\"\n [disabled]=\"disabled()\"\n (click)=\"clear()\"\n (pointerdown)=\"$event.stopPropagation()\"\n [title]=\"clearLabel() || 'Remove photo'\"\n [attr.aria-label]=\"clearLabel() || 'Remove photo'\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n }\n </div>\n\n @if (showZoom() || showRotate()) {\n <div class=\"st-cropper-overlay-controls\" (pointerdown)=\"$event.stopPropagation()\">\n <div class=\"st-cropper-buttons-row\">\n @if (showRotate()) {\n <st-button-group>\n <button\n type=\"button\"\n stButton\n variant=\"secondary\"\n size=\"sm\"\n class=\"st-cropper-icon-btn\"\n [disabled]=\"disabled()\"\n (click)=\"rotateLeft()\"\n title=\"Rotate Counter-Clockwise\"\n aria-label=\"Rotate Counter-Clockwise\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <path d=\"M2.5 2v6h6\" />\n <path d=\"M2.66 15.57a10 10 0 1 0 .57-8.38L2.5 8\" />\n </svg>\n </button>\n\n <button\n type=\"button\"\n stButton\n variant=\"secondary\"\n size=\"sm\"\n class=\"st-cropper-icon-btn\"\n [disabled]=\"disabled()\"\n (click)=\"rotateRight()\"\n title=\"Rotate Clockwise\"\n aria-label=\"Rotate Clockwise\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <path d=\"M21.5 2v6h-6\" />\n <path d=\"M21.34 15.57a10 10 0 1 1-.57-8.38L21.5 8\" />\n </svg>\n </button>\n </st-button-group>\n }\n\n <div class=\"st-cropper-align-group\">\n <st-button-group>\n <button\n type=\"button\"\n stButton\n variant=\"secondary\"\n size=\"sm\"\n [disabled]=\"disabled() || (panX() === 0 && panY() === 0)\"\n (click)=\"center()\"\n title=\"Realign view to center\"\n aria-label=\"Realign view to center\"\n >\n Center\n </button>\n\n <button\n type=\"button\"\n stButton\n variant=\"secondary\"\n size=\"sm\"\n [disabled]=\"disabled()\"\n (click)=\"reset()\"\n title=\"Reset position, zoom, and rotation\"\n aria-label=\"Reset position, zoom, and rotation\"\n >\n Reset\n </button>\n </st-button-group>\n\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </div>\n\n @if (showZoom()) {\n <div class=\"st-cropper-slider-row\">\n <st-slider\n class=\"st-cropper-slider\"\n [minimum]=\"minZoom()\"\n [maximum]=\"maxZoom()\"\n [step]=\"0.02\"\n [(value)]=\"zoom\"\n [disabled]=\"disabled()\"\n aria-label=\"Image Zoom\"\n ></st-slider>\n </div>\n }\n </div>\n }\n </div>\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "component", type: StrataButtonGroupComponent, selector: "st-button-group", inputs: ["justification"] }, { kind: "component", type: StrataSliderComponent, selector: "st-slider", inputs: ["value", "disabled", "minimum", "maximum", "step"], outputs: ["valueChange"] }] });
|
|
2147
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataImageCropperComponent, isStandalone: true, selector: "st-image-cropper", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, maskSize: { classPropertyName: "maskSize", publicName: "maskSize", isSignal: true, isRequired: false, transformFunction: null }, outputWidth: { classPropertyName: "outputWidth", publicName: "outputWidth", isSignal: true, isRequired: false, transformFunction: null }, outputHeight: { classPropertyName: "outputHeight", publicName: "outputHeight", isSignal: true, isRequired: false, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: false, transformFunction: null }, outputQuality: { classPropertyName: "outputQuality", publicName: "outputQuality", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, showZoom: { classPropertyName: "showZoom", publicName: "showZoom", isSignal: true, isRequired: false, transformFunction: null }, showRotate: { classPropertyName: "showRotate", publicName: "showRotate", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, autoCrop: { classPropertyName: "autoCrop", publicName: "autoCrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, rotation: { classPropertyName: "rotation", publicName: "rotation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zoom: "zoomChange", rotation: "rotationChange", crop: "crop", imageLoaded: "imageLoaded", imageError: "imageError", imageCleared: "imageCleared" }, host: { properties: { "class.st-disabled": "this.hostDisabled", "class.st-has-image": "this.hostHasImage", "style.--st-cropper-mask-size": "this.hostMaskSize" } }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "imageRef", first: true, predicate: ["imgElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!hasImage()) {\n <div class=\"st-cropper-empty-state\">\n <ng-content select=\"[emptyState], [placeholder], st-file-upload\">\n <div class=\"st-cropper-empty-placeholder\">\n <svg\n class=\"st-cropper-placeholder-icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\" />\n <polyline points=\"21 15 16 10 5 21\" />\n </svg>\n <span>No image selected</span>\n </div>\n </ng-content>\n </div>\n} @else {\n <div class=\"st-cropper-workspace\">\n <div\n #viewport\n class=\"st-cropper-viewport\"\n [class.st-is-dragging]=\"isDragging()\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n (wheel)=\"onWheel($event)\"\n >\n <div class=\"st-cropper-stage\">\n <div class=\"st-cropper-image-layer\">\n <img\n #imgElement\n class=\"st-cropper-image\"\n [src]=\"currentImageSrc()\"\n [style.transform]=\"imageTransform()\"\n alt=\"Image to crop\"\n draggable=\"false\"\n (load)=\"onImageElementLoad($event)\"\n (error)=\"onImageElementError()\"\n />\n </div>\n\n <div\n class=\"st-cropper-mask\"\n [class.st-crop-shape-circle]=\"shape() === 'circle'\"\n [class.st-crop-shape-square]=\"shape() === 'square'\"\n ></div>\n\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"st-cropper-floating-close st-cropper-clear-btn\"\n [disabled]=\"disabled()\"\n (click)=\"clear()\"\n (pointerdown)=\"$event.stopPropagation()\"\n [title]=\"clearLabel() || 'Remove photo'\"\n [attr.aria-label]=\"clearLabel() || 'Remove photo'\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n }\n </div>\n\n @if (showZoom() || showRotate()) {\n <div class=\"st-cropper-overlay-controls\" (pointerdown)=\"$event.stopPropagation()\">\n <div class=\"st-cropper-buttons-row\">\n @if (showRotate()) {\n <st-button-group>\n <button\n type=\"button\"\n stButton\n variant=\"secondary\"\n size=\"sm\"\n class=\"st-cropper-icon-btn\"\n [disabled]=\"disabled()\"\n (click)=\"rotateLeft()\"\n title=\"Rotate Counter-Clockwise\"\n aria-label=\"Rotate Counter-Clockwise\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <path d=\"M2.5 2v6h6\" />\n <path d=\"M2.66 15.57a10 10 0 1 0 .57-8.38L2.5 8\" />\n </svg>\n </button>\n\n <button\n type=\"button\"\n stButton\n variant=\"secondary\"\n size=\"sm\"\n class=\"st-cropper-icon-btn\"\n [disabled]=\"disabled()\"\n (click)=\"rotateRight()\"\n title=\"Rotate Clockwise\"\n aria-label=\"Rotate Clockwise\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <path d=\"M21.5 2v6h-6\" />\n <path d=\"M21.34 15.57a10 10 0 1 1-.57-8.38L21.5 8\" />\n </svg>\n </button>\n </st-button-group>\n }\n\n <div class=\"st-cropper-align-group\">\n <st-button-group>\n <button\n type=\"button\"\n stButton\n variant=\"secondary\"\n size=\"sm\"\n [disabled]=\"disabled() || (panX() === 0 && panY() === 0)\"\n (click)=\"center()\"\n title=\"Realign view to center\"\n aria-label=\"Realign view to center\"\n >\n Center\n </button>\n\n <button\n type=\"button\"\n stButton\n variant=\"secondary\"\n size=\"sm\"\n [disabled]=\"disabled()\"\n (click)=\"reset()\"\n title=\"Reset position, zoom, and rotation\"\n aria-label=\"Reset position, zoom, and rotation\"\n >\n Reset\n </button>\n </st-button-group>\n\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </div>\n\n @if (showZoom()) {\n <div class=\"st-cropper-slider-row\">\n <st-slider\n class=\"st-cropper-slider\"\n [minimum]=\"minZoom()\"\n [maximum]=\"maxZoom()\"\n [step]=\"0.02\"\n [(value)]=\"zoom\"\n [disabled]=\"disabled()\"\n aria-label=\"Image Zoom\"\n ></st-slider>\n </div>\n }\n </div>\n }\n </div>\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "component", type: StrataButtonGroupComponent, selector: "st-button-group", inputs: ["justification"] }, { kind: "component", type: StrataSliderComponent, selector: "st-slider", inputs: ["value", "state", "error", "message", "colorMessage", "disabled", "minimum", "maximum", "step"], outputs: ["valueChange"] }] });
|
|
2029
2148
|
}
|
|
2030
2149
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataImageCropperComponent, decorators: [{
|
|
2031
2150
|
type: Component,
|
|
@@ -2059,10 +2178,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
2059
2178
|
}]
|
|
2060
2179
|
}] });
|
|
2061
2180
|
|
|
2181
|
+
let nextUniqueId = 0;
|
|
2062
2182
|
class StrataInputFieldComponent {
|
|
2063
2183
|
hostElement = inject((ElementRef));
|
|
2184
|
+
defaultId = `st-input-${nextUniqueId++}`;
|
|
2064
2185
|
size = input('md', /* @ts-ignore */
|
|
2065
2186
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2187
|
+
label = input(undefined, /* @ts-ignore */
|
|
2188
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2189
|
+
id = input(undefined, /* @ts-ignore */
|
|
2190
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
2191
|
+
name = input(undefined, /* @ts-ignore */
|
|
2192
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
2193
|
+
state = input(undefined, /* @ts-ignore */
|
|
2194
|
+
...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
2195
|
+
error = input(false, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2196
|
+
message = input(undefined, /* @ts-ignore */
|
|
2197
|
+
...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
2198
|
+
colorMessage = input(true, { ...(ngDevMode ? { debugName: "colorMessage" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2066
2199
|
disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null || value === '' ? undefined : booleanAttribute(value) });
|
|
2067
2200
|
maxLength = input(undefined, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null || value === '' ? undefined : numberAttribute(value) });
|
|
2068
2201
|
showCharacterCounter = input(false, { ...(ngDevMode ? { debugName: "showCharacterCounter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -2078,10 +2211,27 @@ class StrataInputFieldComponent {
|
|
|
2078
2211
|
...(ngDevMode ? [{ debugName: "nativeMaxLength" }] : /* istanbul ignore next */ []));
|
|
2079
2212
|
nativeDisabled = signal(false, /* @ts-ignore */
|
|
2080
2213
|
...(ngDevMode ? [{ debugName: "nativeDisabled" }] : /* istanbul ignore next */ []));
|
|
2214
|
+
nativeId = signal(undefined, /* @ts-ignore */
|
|
2215
|
+
...(ngDevMode ? [{ debugName: "nativeId" }] : /* istanbul ignore next */ []));
|
|
2216
|
+
effectiveId = computed(() => this.id() ?? this.name() ?? this.nativeId() ?? this.defaultId, /* @ts-ignore */
|
|
2217
|
+
...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
|
|
2081
2218
|
effectiveMaxLength = computed(() => this.maxLength() ?? this.nativeMaxLength(), /* @ts-ignore */
|
|
2082
2219
|
...(ngDevMode ? [{ debugName: "effectiveMaxLength" }] : /* istanbul ignore next */ []));
|
|
2083
2220
|
effectiveDisabled = computed(() => (this.disabled() ?? false) || this.nativeDisabled(), /* @ts-ignore */
|
|
2084
2221
|
...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
|
|
2222
|
+
effectiveState = computed(() => {
|
|
2223
|
+
if (this.error()) {
|
|
2224
|
+
return 'error';
|
|
2225
|
+
}
|
|
2226
|
+
return this.state() ?? 'default';
|
|
2227
|
+
}, /* @ts-ignore */
|
|
2228
|
+
...(ngDevMode ? [{ debugName: "effectiveState" }] : /* istanbul ignore next */ []));
|
|
2229
|
+
isMessageError = computed(() => this.effectiveState() === 'error' && this.colorMessage(), /* @ts-ignore */
|
|
2230
|
+
...(ngDevMode ? [{ debugName: "isMessageError" }] : /* istanbul ignore next */ []));
|
|
2231
|
+
isMessageSuccess = computed(() => this.effectiveState() === 'success' && this.colorMessage(), /* @ts-ignore */
|
|
2232
|
+
...(ngDevMode ? [{ debugName: "isMessageSuccess" }] : /* istanbul ignore next */ []));
|
|
2233
|
+
isMessageWarning = computed(() => this.effectiveState() === 'warning' && this.colorMessage(), /* @ts-ignore */
|
|
2234
|
+
...(ngDevMode ? [{ debugName: "isMessageWarning" }] : /* istanbul ignore next */ []));
|
|
2085
2235
|
counterText = computed(() => {
|
|
2086
2236
|
const current = this.currentLength();
|
|
2087
2237
|
const max = this.effectiveMaxLength();
|
|
@@ -2143,6 +2293,19 @@ class StrataInputFieldComponent {
|
|
|
2143
2293
|
if (!input) {
|
|
2144
2294
|
return;
|
|
2145
2295
|
}
|
|
2296
|
+
const explicitId = this.id() ?? this.name();
|
|
2297
|
+
if (explicitId !== undefined) {
|
|
2298
|
+
if (input.id !== explicitId) {
|
|
2299
|
+
input.id = explicitId;
|
|
2300
|
+
}
|
|
2301
|
+
}
|
|
2302
|
+
else if (!input.id && this.label()) {
|
|
2303
|
+
input.id = this.defaultId;
|
|
2304
|
+
}
|
|
2305
|
+
const currentId = input.id || undefined;
|
|
2306
|
+
if (this.nativeId() !== currentId) {
|
|
2307
|
+
this.nativeId.set(currentId);
|
|
2308
|
+
}
|
|
2146
2309
|
const explicitMax = this.maxLength();
|
|
2147
2310
|
if (explicitMax !== undefined) {
|
|
2148
2311
|
const maxStr = String(explicitMax);
|
|
@@ -2176,7 +2339,7 @@ class StrataInputFieldComponent {
|
|
|
2176
2339
|
}
|
|
2177
2340
|
}
|
|
2178
2341
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2179
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataInputFieldComponent, isStandalone: true, selector: "st-input-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCounter: { classPropertyName: "showCharacterCounter", publicName: "showCharacterCounter", isSignal: true, isRequired: false, transformFunction: null }, characterCounterFormatter: { classPropertyName: "characterCounterFormatter", publicName: "characterCounterFormatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onNativeInput()", "change": "onNativeInput()" }, properties: { "class.st-size-sm": "size() === \"sm\"", "class.st-size-md": "size() === \"md\"", "class.st-size-lg": "size() === \"lg\"", "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null" } }, queries: [{ propertyName: "iconComponents", predicate: StrataIconComponent, descendants: true, isSignal: true }, { propertyName: "inputField", first: true, predicate: StrataNativeInputRefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<
|
|
2342
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataInputFieldComponent, isStandalone: true, selector: "st-input-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, colorMessage: { classPropertyName: "colorMessage", publicName: "colorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCounter: { classPropertyName: "showCharacterCounter", publicName: "showCharacterCounter", isSignal: true, isRequired: false, transformFunction: null }, characterCounterFormatter: { classPropertyName: "characterCounterFormatter", publicName: "characterCounterFormatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onNativeInput()", "change": "onNativeInput()" }, properties: { "class.st-size-sm": "size() === \"sm\"", "class.st-size-md": "size() === \"md\"", "class.st-size-lg": "size() === \"lg\"", "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null", "class.st-state-error": "effectiveState() === \"error\"", "class.st-state-success": "effectiveState() === \"success\"", "class.st-state-warning": "effectiveState() === \"warning\"", "class.st-error": "effectiveState() === \"error\"", "attr.aria-invalid": "effectiveState() === \"error\" ? \"true\" : null" } }, queries: [{ propertyName: "iconComponents", predicate: StrataIconComponent, descendants: true, isSignal: true }, { propertyName: "inputField", first: true, predicate: StrataNativeInputRefDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <label class=\"st-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n}\n<div class=\"st-input-wrapper\">\n <div class=\"affix\">\n <ng-content select=\"[prefix]\"></ng-content>\n </div>\n <ng-content select=\"input,textarea\"></ng-content>\n <div class=\"affix\">\n <ng-content select=\"[suffix]\"></ng-content>\n </div>\n</div>\n@if (message() || showCharacterCounter()) {\n <div class=\"st-input-field-footer\">\n @if (message()) {\n <span\n class=\"st-input-field-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ message() }}\n </span>\n }\n @if (showCharacterCounter()) {\n <span class=\"st-input-field-counter\" aria-live=\"polite\">{{ counterText() }}</span>\n }\n </div>\n}\n" });
|
|
2180
2343
|
}
|
|
2181
2344
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataInputFieldComponent, decorators: [{
|
|
2182
2345
|
type: Component,
|
|
@@ -2186,10 +2349,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
2186
2349
|
'[class.st-size-lg]': 'size() === "lg"',
|
|
2187
2350
|
'[class.st-disabled]': 'effectiveDisabled()',
|
|
2188
2351
|
'[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
|
|
2352
|
+
'[class.st-state-error]': 'effectiveState() === "error"',
|
|
2353
|
+
'[class.st-state-success]': 'effectiveState() === "success"',
|
|
2354
|
+
'[class.st-state-warning]': 'effectiveState() === "warning"',
|
|
2355
|
+
'[class.st-error]': 'effectiveState() === "error"',
|
|
2356
|
+
'[attr.aria-invalid]': 'effectiveState() === "error" ? "true" : null',
|
|
2189
2357
|
'(input)': 'onNativeInput()',
|
|
2190
2358
|
'(change)': 'onNativeInput()'
|
|
2191
|
-
}, template: "<
|
|
2192
|
-
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCharacterCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCharacterCounter", required: false }] }], characterCounterFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterCounterFormatter", required: false }] }], iconComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataIconComponent), { ...{ descendants: true }, isSignal: true }] }], inputField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataNativeInputRefDirective), { ...{
|
|
2359
|
+
}, template: "@if (label()) {\n <label class=\"st-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n}\n<div class=\"st-input-wrapper\">\n <div class=\"affix\">\n <ng-content select=\"[prefix]\"></ng-content>\n </div>\n <ng-content select=\"input,textarea\"></ng-content>\n <div class=\"affix\">\n <ng-content select=\"[suffix]\"></ng-content>\n </div>\n</div>\n@if (message() || showCharacterCounter()) {\n <div class=\"st-input-field-footer\">\n @if (message()) {\n <span\n class=\"st-input-field-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ message() }}\n </span>\n }\n @if (showCharacterCounter()) {\n <span class=\"st-input-field-counter\" aria-live=\"polite\">{{ counterText() }}</span>\n }\n </div>\n}\n" }]
|
|
2360
|
+
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], colorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCharacterCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCharacterCounter", required: false }] }], characterCounterFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterCounterFormatter", required: false }] }], iconComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataIconComponent), { ...{ descendants: true }, isSignal: true }] }], inputField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataNativeInputRefDirective), { ...{
|
|
2193
2361
|
descendants: true
|
|
2194
2362
|
}, isSignal: true }] }] } });
|
|
2195
2363
|
|
|
@@ -2262,10 +2430,25 @@ class StrataRadioComponent {
|
|
|
2262
2430
|
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
2263
2431
|
disabled = input(false, /* @ts-ignore */
|
|
2264
2432
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2433
|
+
state = input(undefined, /* @ts-ignore */
|
|
2434
|
+
...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
2435
|
+
error = input(false, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2265
2436
|
groupDisabled = signal(false, /* @ts-ignore */
|
|
2266
2437
|
...(ngDevMode ? [{ debugName: "groupDisabled" }] : /* istanbul ignore next */ []));
|
|
2438
|
+
groupState = signal('default', /* @ts-ignore */
|
|
2439
|
+
...(ngDevMode ? [{ debugName: "groupState" }] : /* istanbul ignore next */ []));
|
|
2267
2440
|
effectiveDisabled = computed(() => this.disabled() || this.groupDisabled(), /* @ts-ignore */
|
|
2268
2441
|
...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
|
|
2442
|
+
effectiveState = computed(() => {
|
|
2443
|
+
if (this.error()) {
|
|
2444
|
+
return 'error';
|
|
2445
|
+
}
|
|
2446
|
+
if (this.state()) {
|
|
2447
|
+
return this.state();
|
|
2448
|
+
}
|
|
2449
|
+
return this.groupState();
|
|
2450
|
+
}, /* @ts-ignore */
|
|
2451
|
+
...(ngDevMode ? [{ debugName: "effectiveState" }] : /* istanbul ignore next */ []));
|
|
2269
2452
|
selected = output();
|
|
2270
2453
|
select() {
|
|
2271
2454
|
if (this.effectiveDisabled()) {
|
|
@@ -2283,7 +2466,7 @@ class StrataRadioComponent {
|
|
|
2283
2466
|
this.select();
|
|
2284
2467
|
}
|
|
2285
2468
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2286
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataRadioComponent, isStandalone: true, selector: "st-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", selected: "selected" }, host: { attributes: { "role": "radio" }, listeners: { "click": "onClick($event)", "keydown.space": "onSpaceKey($event)" }, properties: { "attr.tabindex": "effectiveDisabled() ? -1 : (checked() ? 0 : -1)", "attr.aria-checked": "checked()", "attr.aria-disabled": "effectiveDisabled()", "attr.data-checked": "checked()", "attr.data-disabled": "effectiveDisabled()", "class.disabled": "effectiveDisabled()" } }, ngImport: i0, template: "<input type=\"radio\" [checked]=\"checked()\" [disabled]=\"effectiveDisabled()\" tabindex=\"-1\" aria-hidden=\"true\" />\n<div class=\"radio-visual\"></div>\n@if (label()) {\n <label>{{ label() }}</label>\n}\n" });
|
|
2469
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataRadioComponent, isStandalone: true, selector: "st-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", selected: "selected" }, host: { attributes: { "role": "radio" }, listeners: { "click": "onClick($event)", "keydown.space": "onSpaceKey($event)" }, properties: { "attr.tabindex": "effectiveDisabled() ? -1 : (checked() ? 0 : -1)", "attr.aria-checked": "checked()", "attr.aria-disabled": "effectiveDisabled()", "attr.data-checked": "checked()", "attr.data-disabled": "effectiveDisabled()", "class.disabled": "effectiveDisabled()", "class.st-state-error": "effectiveState() === \"error\"", "class.st-state-success": "effectiveState() === \"success\"", "class.st-state-warning": "effectiveState() === \"warning\"", "class.st-error": "effectiveState() === \"error\"" } }, ngImport: i0, template: "<input type=\"radio\" [checked]=\"checked()\" [disabled]=\"effectiveDisabled()\" tabindex=\"-1\" aria-hidden=\"true\" />\n<div class=\"radio-visual\"></div>\n@if (label()) {\n <label>{{ label() }}</label>\n}\n" });
|
|
2287
2470
|
}
|
|
2288
2471
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataRadioComponent, decorators: [{
|
|
2289
2472
|
type: Component,
|
|
@@ -2295,10 +2478,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
2295
2478
|
'[attr.data-checked]': 'checked()',
|
|
2296
2479
|
'[attr.data-disabled]': 'effectiveDisabled()',
|
|
2297
2480
|
'[class.disabled]': 'effectiveDisabled()',
|
|
2481
|
+
'[class.st-state-error]': 'effectiveState() === "error"',
|
|
2482
|
+
'[class.st-state-success]': 'effectiveState() === "success"',
|
|
2483
|
+
'[class.st-state-warning]': 'effectiveState() === "warning"',
|
|
2484
|
+
'[class.st-error]': 'effectiveState() === "error"',
|
|
2298
2485
|
'(click)': 'onClick($event)',
|
|
2299
2486
|
'(keydown.space)': 'onSpaceKey($event)'
|
|
2300
2487
|
}, template: "<input type=\"radio\" [checked]=\"checked()\" [disabled]=\"effectiveDisabled()\" tabindex=\"-1\" aria-hidden=\"true\" />\n<div class=\"radio-visual\"></div>\n@if (label()) {\n <label>{{ label() }}</label>\n}\n" }]
|
|
2301
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
|
|
2488
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
|
|
2302
2489
|
|
|
2303
2490
|
class StrataItemComponent {
|
|
2304
2491
|
element = inject(ElementRef);
|
|
@@ -2565,7 +2752,7 @@ class StrataAlertContentComponent {
|
|
|
2565
2752
|
this.modalService.closeCurrentModal(false);
|
|
2566
2753
|
}
|
|
2567
2754
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAlertContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2568
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataAlertContentComponent, isStandalone: true, selector: "st-alert-content", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, affirmativeButton: { classPropertyName: "affirmativeButton", publicName: "affirmativeButton", isSignal: true, isRequired: true, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"alert-content\">\n @if (icon() !== undefined) {\n <st-avatar size=\"lg\" [stTheme]=\"theme()\">\n <st-icon [name]=\"computedIcon()\"></st-icon>\n </st-avatar>\n }\n\n <p class=\"alert-title\">{{ title() }}</p>\n @if (message()) {\n <p class=\"alert-message\">{{ message() }}</p>\n }\n</div>\n<st-button-group justification=\"expand\">\n @if (cancelButton()) {\n <button stButton (click)=\"onCancel()\">{{ cancelButton() }}</button>\n }\n <button stButton [stTheme]=\"theme()\" variant=\"primary\" (click)=\"onAffirmation()\">{{ affirmativeButton() }}</button>\n</st-button-group>\n", dependencies: [{ kind: "component", type: StrataAvatarComponent, selector: "st-avatar", inputs: ["src", "alt", "text", "size"], outputs: ["sizeChange"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }, { kind: "component", type: StrataButtonGroupComponent, selector: "st-button-group", inputs: ["justification"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
|
|
2755
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataAlertContentComponent, isStandalone: true, selector: "st-alert-content", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, affirmativeButton: { classPropertyName: "affirmativeButton", publicName: "affirmativeButton", isSignal: true, isRequired: true, transformFunction: null }, cancelButton: { classPropertyName: "cancelButton", publicName: "cancelButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"alert-content\">\n @if (icon() !== undefined) {\n <st-avatar size=\"lg\" [stTheme]=\"theme()\">\n <st-icon [name]=\"computedIcon()\"></st-icon>\n </st-avatar>\n }\n\n <p class=\"alert-title\">{{ title() }}</p>\n @if (message()) {\n <p class=\"alert-message\">{{ message() }}</p>\n }\n</div>\n<st-button-group justification=\"expand\">\n @if (cancelButton()) {\n <button stButton (click)=\"onCancel()\">{{ cancelButton() }}</button>\n }\n <button stButton [stTheme]=\"theme()\" variant=\"primary\" (click)=\"onAffirmation()\">{{ affirmativeButton() }}</button>\n</st-button-group>\n", dependencies: [{ kind: "component", type: StrataAvatarComponent, selector: "st-avatar", inputs: ["src", "alt", "text", "size", "variant"], outputs: ["sizeChange"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataThemeDirective, selector: "[stTheme]", inputs: ["stTheme"] }, { kind: "component", type: StrataButtonGroupComponent, selector: "st-button-group", inputs: ["justification"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
|
|
2569
2756
|
}
|
|
2570
2757
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataAlertContentComponent, decorators: [{
|
|
2571
2758
|
type: Component,
|
|
@@ -2940,6 +3127,9 @@ class StrataOtpComponent {
|
|
|
2940
3127
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
2941
3128
|
ariaLabel = input('One-time password', /* @ts-ignore */
|
|
2942
3129
|
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
3130
|
+
message = input(undefined, /* @ts-ignore */
|
|
3131
|
+
...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
3132
|
+
colorMessage = input(true, { ...(ngDevMode ? { debugName: "colorMessage" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2943
3133
|
helperText = input(undefined, /* @ts-ignore */
|
|
2944
3134
|
...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
2945
3135
|
errorMessage = input(undefined, /* @ts-ignore */
|
|
@@ -2986,6 +3176,14 @@ class StrataOtpComponent {
|
|
|
2986
3176
|
return this.errorMessage();
|
|
2987
3177
|
}, /* @ts-ignore */
|
|
2988
3178
|
...(ngDevMode ? [{ debugName: "computedErrorMessage" }] : /* istanbul ignore next */ []));
|
|
3179
|
+
effectiveMessage = computed(() => {
|
|
3180
|
+
return this.message() ?? this.computedErrorMessage() ?? this.helperText();
|
|
3181
|
+
}, /* @ts-ignore */
|
|
3182
|
+
...(ngDevMode ? [{ debugName: "effectiveMessage" }] : /* istanbul ignore next */ []));
|
|
3183
|
+
isMessageError = computed(() => this.effectiveState() === 'error' && this.colorMessage(), /* @ts-ignore */
|
|
3184
|
+
...(ngDevMode ? [{ debugName: "isMessageError" }] : /* istanbul ignore next */ []));
|
|
3185
|
+
isMessageSuccess = computed(() => this.effectiveState() === 'success' && this.colorMessage(), /* @ts-ignore */
|
|
3186
|
+
...(ngDevMode ? [{ debugName: "isMessageSuccess" }] : /* istanbul ignore next */ []));
|
|
2989
3187
|
onChange = () => undefined;
|
|
2990
3188
|
onTouched = () => undefined;
|
|
2991
3189
|
constructor() {
|
|
@@ -3229,13 +3427,13 @@ class StrataOtpComponent {
|
|
|
3229
3427
|
}
|
|
3230
3428
|
}
|
|
3231
3429
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3232
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataOtpComponent, isStandalone: true, selector: "st-otp", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, uppercase: { classPropertyName: "uppercase", publicName: "uppercase", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, clearOnError: { classPropertyName: "clearOnError", publicName: "clearOnError", isSignal: true, isRequired: false, transformFunction: null }, clearOnErrorDelay: { classPropertyName: "clearOnErrorDelay", publicName: "clearOnErrorDelay", isSignal: true, isRequired: false, transformFunction: null }, resetErrorOnInput: { classPropertyName: "resetErrorOnInput", publicName: "resetErrorOnInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", state: "stateChange", completed: "completed", errorReset: "errorReset" }, host: { properties: { "class.st-size-sm": "size() === \"sm\"", "class.st-size-md": "size() === \"md\"", "class.st-size-lg": "size() === \"lg\"", "class.st-state-loading": "effectiveState() === \"loading\"", "class.st-state-error": "effectiveState() === \"error\"", "class.st-state-success": "effectiveState() === \"success\"", "class.st-disabled": "effectiveDisabled()" } }, providers: [
|
|
3430
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataOtpComponent, isStandalone: true, selector: "st-otp", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, uppercase: { classPropertyName: "uppercase", publicName: "uppercase", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, colorMessage: { classPropertyName: "colorMessage", publicName: "colorMessage", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, clearOnError: { classPropertyName: "clearOnError", publicName: "clearOnError", isSignal: true, isRequired: false, transformFunction: null }, clearOnErrorDelay: { classPropertyName: "clearOnErrorDelay", publicName: "clearOnErrorDelay", isSignal: true, isRequired: false, transformFunction: null }, resetErrorOnInput: { classPropertyName: "resetErrorOnInput", publicName: "resetErrorOnInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", state: "stateChange", completed: "completed", errorReset: "errorReset" }, host: { properties: { "class.st-size-sm": "size() === \"sm\"", "class.st-size-md": "size() === \"md\"", "class.st-size-lg": "size() === \"lg\"", "class.st-state-loading": "effectiveState() === \"loading\"", "class.st-state-error": "effectiveState() === \"error\"", "class.st-state-success": "effectiveState() === \"success\"", "class.st-disabled": "effectiveDisabled()" } }, providers: [
|
|
3233
3431
|
{
|
|
3234
3432
|
provide: NG_VALUE_ACCESSOR,
|
|
3235
3433
|
useExisting: forwardRef(() => StrataOtpComponent),
|
|
3236
3434
|
multi: true
|
|
3237
3435
|
}
|
|
3238
|
-
], viewQueries: [{ propertyName: "slotInputs", predicate: ["slotInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"st-otp-container\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n @for (digit of digits(); track $index) {\n <input\n #slotInput\n class=\"st-otp-input\"\n [attr.type]=\"(type() === 'password' || mask()) ? 'password' : 'text'\"\n [attr.inputmode]=\"type() === 'number' ? 'numeric' : 'text'\"\n [attr.pattern]=\"type() === 'number' ? '[0-9]*' : undefined\"\n [attr.autocomplete]=\"'one-time-code'\"\n [attr.aria-label]=\"'Digit ' + ($index + 1) + ' of ' + length()\"\n [attr.aria-invalid]=\"effectiveState() === 'error'\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"effectiveDisabled()\"\n [readonly]=\"readonly()\"\n [value]=\"digit\"\n (keydown)=\"onKeyDown($event, $index)\"\n (input)=\"onInput($event, $index)\"\n (paste)=\"onPaste($event, $index)\"\n (focus)=\"onFocus($index)\"\n (click)=\"onClick($index)\"\n />\n }\n\n @if (effectiveState() === 'loading') {\n <div class=\"st-otp-loading-overlay\" aria-hidden=\"true\">\n <st-spinner size=\"sm\"></st-spinner>\n </div>\n }\n</div>\n\n@if (
|
|
3436
|
+
], viewQueries: [{ propertyName: "slotInputs", predicate: ["slotInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"st-otp-container\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n @for (digit of digits(); track $index) {\n <input\n #slotInput\n class=\"st-otp-input\"\n [attr.type]=\"(type() === 'password' || mask()) ? 'password' : 'text'\"\n [attr.inputmode]=\"type() === 'number' ? 'numeric' : 'text'\"\n [attr.pattern]=\"type() === 'number' ? '[0-9]*' : undefined\"\n [attr.autocomplete]=\"'one-time-code'\"\n [attr.aria-label]=\"'Digit ' + ($index + 1) + ' of ' + length()\"\n [attr.aria-invalid]=\"effectiveState() === 'error'\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"effectiveDisabled()\"\n [readonly]=\"readonly()\"\n [value]=\"digit\"\n (keydown)=\"onKeyDown($event, $index)\"\n (input)=\"onInput($event, $index)\"\n (paste)=\"onPaste($event, $index)\"\n (focus)=\"onFocus($index)\"\n (click)=\"onClick($index)\"\n />\n }\n\n @if (effectiveState() === 'loading') {\n <div class=\"st-otp-loading-overlay\" aria-hidden=\"true\">\n <st-spinner size=\"sm\"></st-spinner>\n </div>\n }\n</div>\n\n@if (effectiveMessage()) {\n <div\n class=\"st-otp-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ effectiveMessage() }}\n </div>\n}\n", dependencies: [{ kind: "component", type: StrataSpinnerComponent, selector: "st-spinner", inputs: ["size"] }] });
|
|
3239
3437
|
}
|
|
3240
3438
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataOtpComponent, decorators: [{
|
|
3241
3439
|
type: Component,
|
|
@@ -3253,8 +3451,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
3253
3451
|
'[class.st-state-error]': 'effectiveState() === "error"',
|
|
3254
3452
|
'[class.st-state-success]': 'effectiveState() === "success"',
|
|
3255
3453
|
'[class.st-disabled]': 'effectiveDisabled()'
|
|
3256
|
-
}, template: "<div class=\"st-otp-container\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n @for (digit of digits(); track $index) {\n <input\n #slotInput\n class=\"st-otp-input\"\n [attr.type]=\"(type() === 'password' || mask()) ? 'password' : 'text'\"\n [attr.inputmode]=\"type() === 'number' ? 'numeric' : 'text'\"\n [attr.pattern]=\"type() === 'number' ? '[0-9]*' : undefined\"\n [attr.autocomplete]=\"'one-time-code'\"\n [attr.aria-label]=\"'Digit ' + ($index + 1) + ' of ' + length()\"\n [attr.aria-invalid]=\"effectiveState() === 'error'\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"effectiveDisabled()\"\n [readonly]=\"readonly()\"\n [value]=\"digit\"\n (keydown)=\"onKeyDown($event, $index)\"\n (input)=\"onInput($event, $index)\"\n (paste)=\"onPaste($event, $index)\"\n (focus)=\"onFocus($index)\"\n (click)=\"onClick($index)\"\n />\n }\n\n @if (effectiveState() === 'loading') {\n <div class=\"st-otp-loading-overlay\" aria-hidden=\"true\">\n <st-spinner size=\"sm\"></st-spinner>\n </div>\n }\n</div>\n\n@if (
|
|
3257
|
-
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], uppercase: [{ type: i0.Input, args: [{ isSignal: true, alias: "uppercase", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], clearOnError: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearOnError", required: false }] }], clearOnErrorDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearOnErrorDelay", required: false }] }], resetErrorOnInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetErrorOnInput", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], errorReset: [{ type: i0.Output, args: ["errorReset"] }], slotInputs: [{ type: i0.ViewChildren, args: ['slotInput', { isSignal: true }] }] } });
|
|
3454
|
+
}, template: "<div class=\"st-otp-container\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n @for (digit of digits(); track $index) {\n <input\n #slotInput\n class=\"st-otp-input\"\n [attr.type]=\"(type() === 'password' || mask()) ? 'password' : 'text'\"\n [attr.inputmode]=\"type() === 'number' ? 'numeric' : 'text'\"\n [attr.pattern]=\"type() === 'number' ? '[0-9]*' : undefined\"\n [attr.autocomplete]=\"'one-time-code'\"\n [attr.aria-label]=\"'Digit ' + ($index + 1) + ' of ' + length()\"\n [attr.aria-invalid]=\"effectiveState() === 'error'\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"effectiveDisabled()\"\n [readonly]=\"readonly()\"\n [value]=\"digit\"\n (keydown)=\"onKeyDown($event, $index)\"\n (input)=\"onInput($event, $index)\"\n (paste)=\"onPaste($event, $index)\"\n (focus)=\"onFocus($index)\"\n (click)=\"onClick($index)\"\n />\n }\n\n @if (effectiveState() === 'loading') {\n <div class=\"st-otp-loading-overlay\" aria-hidden=\"true\">\n <st-spinner size=\"sm\"></st-spinner>\n </div>\n }\n</div>\n\n@if (effectiveMessage()) {\n <div\n class=\"st-otp-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ effectiveMessage() }}\n </div>\n}\n" }]
|
|
3455
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], uppercase: [{ type: i0.Input, args: [{ isSignal: true, alias: "uppercase", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], colorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMessage", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], clearOnError: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearOnError", required: false }] }], clearOnErrorDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearOnErrorDelay", required: false }] }], resetErrorOnInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetErrorOnInput", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], errorReset: [{ type: i0.Output, args: ["errorReset"] }], slotInputs: [{ type: i0.ViewChildren, args: ['slotInput', { isSignal: true }] }] } });
|
|
3258
3456
|
|
|
3259
3457
|
class StrataPaginationComponent {
|
|
3260
3458
|
role = 'navigation';
|
|
@@ -3438,10 +3636,29 @@ class StrataRadioGroupComponent {
|
|
|
3438
3636
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
3439
3637
|
disabled = input(false, /* @ts-ignore */
|
|
3440
3638
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3639
|
+
state = input(undefined, /* @ts-ignore */
|
|
3640
|
+
...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
3641
|
+
error = input(false, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3642
|
+
message = input(undefined, /* @ts-ignore */
|
|
3643
|
+
...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
3644
|
+
colorMessage = input(true, { ...(ngDevMode ? { debugName: "colorMessage" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3441
3645
|
cvaDisabled = signal(false, /* @ts-ignore */
|
|
3442
3646
|
...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
3443
3647
|
effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
|
|
3444
3648
|
...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
|
|
3649
|
+
effectiveState = computed(() => {
|
|
3650
|
+
if (this.error()) {
|
|
3651
|
+
return 'error';
|
|
3652
|
+
}
|
|
3653
|
+
return this.state() ?? 'default';
|
|
3654
|
+
}, /* @ts-ignore */
|
|
3655
|
+
...(ngDevMode ? [{ debugName: "effectiveState" }] : /* istanbul ignore next */ []));
|
|
3656
|
+
isMessageError = computed(() => this.effectiveState() === 'error' && this.colorMessage(), /* @ts-ignore */
|
|
3657
|
+
...(ngDevMode ? [{ debugName: "isMessageError" }] : /* istanbul ignore next */ []));
|
|
3658
|
+
isMessageSuccess = computed(() => this.effectiveState() === 'success' && this.colorMessage(), /* @ts-ignore */
|
|
3659
|
+
...(ngDevMode ? [{ debugName: "isMessageSuccess" }] : /* istanbul ignore next */ []));
|
|
3660
|
+
isMessageWarning = computed(() => this.effectiveState() === 'warning' && this.colorMessage(), /* @ts-ignore */
|
|
3661
|
+
...(ngDevMode ? [{ debugName: "isMessageWarning" }] : /* istanbul ignore next */ []));
|
|
3445
3662
|
radios = contentChildren(StrataRadioComponent, { ...(ngDevMode ? { debugName: "radios" } : /* istanbul ignore next */ {}), descendants: true });
|
|
3446
3663
|
onChange = () => undefined;
|
|
3447
3664
|
onTouched = () => undefined;
|
|
@@ -3458,6 +3675,12 @@ class StrataRadioGroupComponent {
|
|
|
3458
3675
|
radio.groupDisabled.set(isDisabled);
|
|
3459
3676
|
});
|
|
3460
3677
|
});
|
|
3678
|
+
effect(() => {
|
|
3679
|
+
const currentState = this.effectiveState();
|
|
3680
|
+
this.radios().forEach((radio) => {
|
|
3681
|
+
radio.groupState.set(currentState);
|
|
3682
|
+
});
|
|
3683
|
+
});
|
|
3461
3684
|
effect((onCleanup) => {
|
|
3462
3685
|
const radios = this.radios();
|
|
3463
3686
|
const subs = radios.map((radio) => radio.selected.subscribe(() => {
|
|
@@ -3484,34 +3707,33 @@ class StrataRadioGroupComponent {
|
|
|
3484
3707
|
this.cvaDisabled.set(isDisabled);
|
|
3485
3708
|
}
|
|
3486
3709
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3487
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
3710
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataRadioGroupComponent, isStandalone: true, selector: "st-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, colorMessage: { classPropertyName: "colorMessage", publicName: "colorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.aria-disabled": "effectiveDisabled()", "class.disabled": "effectiveDisabled()", "class.st-state-error": "effectiveState() === \"error\"", "class.st-state-success": "effectiveState() === \"success\"", "class.st-state-warning": "effectiveState() === \"warning\"", "class.st-error": "effectiveState() === \"error\"", "attr.aria-invalid": "effectiveState() === \"error\" ? \"true\" : null" } }, providers: [
|
|
3488
3711
|
{
|
|
3489
3712
|
provide: NG_VALUE_ACCESSOR,
|
|
3490
3713
|
useExisting: forwardRef(() => StrataRadioGroupComponent),
|
|
3491
3714
|
multi: true
|
|
3492
3715
|
}
|
|
3493
|
-
], queries: [{ propertyName: "radios", predicate: StrataRadioComponent, descendants: true, isSignal: true }], ngImport: i0, template:
|
|
3716
|
+
], queries: [{ propertyName: "radios", predicate: StrataRadioComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"st-radio-group-radios\">\n <ng-content></ng-content>\n</div>\n@if (message()) {\n <div\n class=\"st-radio-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ message() }}\n </div>\n}\n" });
|
|
3494
3717
|
}
|
|
3495
3718
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataRadioGroupComponent, decorators: [{
|
|
3496
3719
|
type: Component,
|
|
3497
|
-
args: [{
|
|
3498
|
-
selector: 'st-radio-group',
|
|
3499
|
-
imports: [],
|
|
3500
|
-
template: `<ng-content></ng-content>`,
|
|
3501
|
-
providers: [
|
|
3720
|
+
args: [{ selector: 'st-radio-group', imports: [], providers: [
|
|
3502
3721
|
{
|
|
3503
3722
|
provide: NG_VALUE_ACCESSOR,
|
|
3504
3723
|
useExisting: forwardRef(() => StrataRadioGroupComponent),
|
|
3505
3724
|
multi: true
|
|
3506
3725
|
}
|
|
3507
|
-
],
|
|
3508
|
-
host: {
|
|
3726
|
+
], host: {
|
|
3509
3727
|
role: 'radiogroup',
|
|
3510
3728
|
'[attr.aria-disabled]': 'effectiveDisabled()',
|
|
3511
|
-
'[class.disabled]': 'effectiveDisabled()'
|
|
3512
|
-
|
|
3513
|
-
|
|
3514
|
-
|
|
3729
|
+
'[class.disabled]': 'effectiveDisabled()',
|
|
3730
|
+
'[class.st-state-error]': 'effectiveState() === "error"',
|
|
3731
|
+
'[class.st-state-success]': 'effectiveState() === "success"',
|
|
3732
|
+
'[class.st-state-warning]': 'effectiveState() === "warning"',
|
|
3733
|
+
'[class.st-error]': 'effectiveState() === "error"',
|
|
3734
|
+
'[attr.aria-invalid]': 'effectiveState() === "error" ? "true" : null'
|
|
3735
|
+
}, template: "<div class=\"st-radio-group-radios\">\n <ng-content></ng-content>\n</div>\n@if (message()) {\n <div\n class=\"st-radio-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ message() }}\n </div>\n}\n" }]
|
|
3736
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], colorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMessage", required: false }] }], radios: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataRadioComponent), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
3515
3737
|
|
|
3516
3738
|
class StrataSegmentedControlItemComponent {
|
|
3517
3739
|
text = input.required(/* @ts-ignore */
|
|
@@ -3580,6 +3802,25 @@ class StrataSegmentedControlComponent {
|
|
|
3580
3802
|
size = input('md', /* @ts-ignore */
|
|
3581
3803
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
3582
3804
|
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3805
|
+
state = input(undefined, /* @ts-ignore */
|
|
3806
|
+
...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
3807
|
+
error = input(false, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3808
|
+
message = input(undefined, /* @ts-ignore */
|
|
3809
|
+
...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
3810
|
+
colorMessage = input(true, { ...(ngDevMode ? { debugName: "colorMessage" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3811
|
+
effectiveState = computed(() => {
|
|
3812
|
+
if (this.error()) {
|
|
3813
|
+
return 'error';
|
|
3814
|
+
}
|
|
3815
|
+
return this.state() ?? 'default';
|
|
3816
|
+
}, /* @ts-ignore */
|
|
3817
|
+
...(ngDevMode ? [{ debugName: "effectiveState" }] : /* istanbul ignore next */ []));
|
|
3818
|
+
isMessageError = computed(() => this.effectiveState() === 'error' && this.colorMessage(), /* @ts-ignore */
|
|
3819
|
+
...(ngDevMode ? [{ debugName: "isMessageError" }] : /* istanbul ignore next */ []));
|
|
3820
|
+
isMessageSuccess = computed(() => this.effectiveState() === 'success' && this.colorMessage(), /* @ts-ignore */
|
|
3821
|
+
...(ngDevMode ? [{ debugName: "isMessageSuccess" }] : /* istanbul ignore next */ []));
|
|
3822
|
+
isMessageWarning = computed(() => this.effectiveState() === 'warning' && this.colorMessage(), /* @ts-ignore */
|
|
3823
|
+
...(ngDevMode ? [{ debugName: "isMessageWarning" }] : /* istanbul ignore next */ []));
|
|
3583
3824
|
cvaDisabled = signal(false, /* @ts-ignore */
|
|
3584
3825
|
...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
3585
3826
|
effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
|
|
@@ -3707,13 +3948,13 @@ class StrataSegmentedControlComponent {
|
|
|
3707
3948
|
this.cvaDisabled.set(isDisabled);
|
|
3708
3949
|
}
|
|
3709
3950
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3710
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
3951
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataSegmentedControlComponent, isStandalone: true, selector: "st-segmented-control", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, colorMessage: { classPropertyName: "colorMessage", publicName: "colorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "tablist" }, properties: { "class.st-segmented-control-full-width": "fullWidth()", "class.st-size-sm": "size() === \"sm\"", "class.st-size-md": "size() === \"md\"", "class.st-size-lg": "size() === \"lg\"", "class.st-state-error": "effectiveState() === \"error\"", "class.st-state-success": "effectiveState() === \"success\"", "class.st-state-warning": "effectiveState() === \"warning\"", "class.st-error": "effectiveState() === \"error\"", "attr.aria-invalid": "effectiveState() === \"error\" ? \"true\" : null", "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled()" } }, providers: [
|
|
3711
3952
|
{
|
|
3712
3953
|
provide: NG_VALUE_ACCESSOR,
|
|
3713
3954
|
useExisting: forwardRef(() => StrataSegmentedControlComponent),
|
|
3714
3955
|
multi: true
|
|
3715
3956
|
}
|
|
3716
|
-
], queries: [{ propertyName: "segmentItems", predicate: StrataSegmentedControlItemComponent, isSignal: true }, { propertyName: "segmentItemsRefs", predicate: StrataSegmentedControlItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-content select=\"st-segmented-control-item\"></ng-content>\n<div class=\"selection-item\" id=\"selection-indicator\" \n
|
|
3957
|
+
], queries: [{ propertyName: "segmentItems", predicate: StrataSegmentedControlItemComponent, isSignal: true }, { propertyName: "segmentItemsRefs", predicate: StrataSegmentedControlItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"st-segmented-control-track\">\n <ng-content select=\"st-segmented-control-item\"></ng-content>\n <div class=\"selection-item\" id=\"selection-indicator\" \n [style.left]=\"this.offset() + 'px'\"\n [style.top]=\"this.indicatorTop() + 'px'\"\n [style.width]=\"this.indicatorWidth() + 'px'\"\n [style.height]=\"this.indicatorHeight() + 'px'\">\n {{ this.selectedItem()?.text() }}\n </div>\n</div>\n@if (message()) {\n <div\n class=\"st-segmented-control-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ message() }}\n </div>\n}\n\n" });
|
|
3717
3958
|
}
|
|
3718
3959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSegmentedControlComponent, decorators: [{
|
|
3719
3960
|
type: Component,
|
|
@@ -3729,10 +3970,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
3729
3970
|
'[class.st-size-sm]': 'size() === "sm"',
|
|
3730
3971
|
'[class.st-size-md]': 'size() === "md"',
|
|
3731
3972
|
'[class.st-size-lg]': 'size() === "lg"',
|
|
3973
|
+
'[class.st-state-error]': 'effectiveState() === "error"',
|
|
3974
|
+
'[class.st-state-success]': 'effectiveState() === "success"',
|
|
3975
|
+
'[class.st-state-warning]': 'effectiveState() === "warning"',
|
|
3976
|
+
'[class.st-error]': 'effectiveState() === "error"',
|
|
3977
|
+
'[attr.aria-invalid]': 'effectiveState() === "error" ? "true" : null',
|
|
3732
3978
|
'[class.st-disabled]': 'effectiveDisabled()',
|
|
3733
3979
|
'[attr.aria-disabled]': 'effectiveDisabled()'
|
|
3734
|
-
}, template: "<ng-content select=\"st-segmented-control-item\"></ng-content>\n<div class=\"selection-item\" id=\"selection-indicator\" \n
|
|
3735
|
-
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], segmentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSegmentedControlItemComponent), { isSignal: true }] }], segmentItemsRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSegmentedControlItemComponent), { ...{
|
|
3980
|
+
}, template: "<div class=\"st-segmented-control-track\">\n <ng-content select=\"st-segmented-control-item\"></ng-content>\n <div class=\"selection-item\" id=\"selection-indicator\" \n [style.left]=\"this.offset() + 'px'\"\n [style.top]=\"this.indicatorTop() + 'px'\"\n [style.width]=\"this.indicatorWidth() + 'px'\"\n [style.height]=\"this.indicatorHeight() + 'px'\">\n {{ this.selectedItem()?.text() }}\n </div>\n</div>\n@if (message()) {\n <div\n class=\"st-segmented-control-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ message() }}\n </div>\n}\n\n" }]
|
|
3981
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], colorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMessage", required: false }] }], segmentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSegmentedControlItemComponent), { isSignal: true }] }], segmentItemsRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSegmentedControlItemComponent), { ...{
|
|
3736
3982
|
read: ElementRef
|
|
3737
3983
|
}, isSignal: true }] }] } });
|
|
3738
3984
|
|
|
@@ -3979,12 +4225,31 @@ class StrataSingleSelectComponent {
|
|
|
3979
4225
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
3980
4226
|
placement = input('bottom-start', /* @ts-ignore */
|
|
3981
4227
|
...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
4228
|
+
state = input(undefined, /* @ts-ignore */
|
|
4229
|
+
...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
4230
|
+
error = input(false, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4231
|
+
message = input(undefined, /* @ts-ignore */
|
|
4232
|
+
...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
4233
|
+
colorMessage = input(true, { ...(ngDevMode ? { debugName: "colorMessage" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3982
4234
|
disabled = input(false, /* @ts-ignore */
|
|
3983
4235
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3984
4236
|
cvaDisabled = signal(false, /* @ts-ignore */
|
|
3985
4237
|
...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
3986
4238
|
effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
|
|
3987
4239
|
...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
|
|
4240
|
+
effectiveState = computed(() => {
|
|
4241
|
+
if (this.error()) {
|
|
4242
|
+
return 'error';
|
|
4243
|
+
}
|
|
4244
|
+
return this.state() ?? 'default';
|
|
4245
|
+
}, /* @ts-ignore */
|
|
4246
|
+
...(ngDevMode ? [{ debugName: "effectiveState" }] : /* istanbul ignore next */ []));
|
|
4247
|
+
isMessageError = computed(() => this.effectiveState() === 'error' && this.colorMessage(), /* @ts-ignore */
|
|
4248
|
+
...(ngDevMode ? [{ debugName: "isMessageError" }] : /* istanbul ignore next */ []));
|
|
4249
|
+
isMessageSuccess = computed(() => this.effectiveState() === 'success' && this.colorMessage(), /* @ts-ignore */
|
|
4250
|
+
...(ngDevMode ? [{ debugName: "isMessageSuccess" }] : /* istanbul ignore next */ []));
|
|
4251
|
+
isMessageWarning = computed(() => this.effectiveState() === 'warning' && this.colorMessage(), /* @ts-ignore */
|
|
4252
|
+
...(ngDevMode ? [{ debugName: "isMessageWarning" }] : /* istanbul ignore next */ []));
|
|
3988
4253
|
onChange = () => undefined;
|
|
3989
4254
|
onTouched = () => undefined;
|
|
3990
4255
|
fullWidth = input(false, /* @ts-ignore */
|
|
@@ -4083,13 +4348,13 @@ class StrataSingleSelectComponent {
|
|
|
4083
4348
|
this.open.set(false);
|
|
4084
4349
|
}
|
|
4085
4350
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4086
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataSingleSelectComponent, isStandalone: true, selector: "st-single-select", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", searchQuery: "searchQueryChange", itemSelected: "itemSelected" }, host: { properties: { "class.st-size-sm": "size() === \"sm\"", "class.st-size-md": "size() === \"md\"", "class.st-size-lg": "size() === \"lg\"", "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled()" } }, providers: [
|
|
4351
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataSingleSelectComponent, isStandalone: true, selector: "st-single-select", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, colorMessage: { classPropertyName: "colorMessage", publicName: "colorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", searchQuery: "searchQueryChange", itemSelected: "itemSelected" }, host: { properties: { "class.st-size-sm": "size() === \"sm\"", "class.st-size-md": "size() === \"md\"", "class.st-size-lg": "size() === \"lg\"", "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled()", "class.st-state-error": "effectiveState() === \"error\"", "class.st-state-success": "effectiveState() === \"success\"", "class.st-state-warning": "effectiveState() === \"warning\"", "class.st-error": "effectiveState() === \"error\"", "attr.aria-invalid": "effectiveState() === \"error\" ? \"true\" : null" } }, providers: [
|
|
4087
4352
|
{
|
|
4088
4353
|
provide: NG_VALUE_ACCESSOR,
|
|
4089
4354
|
useExisting: forwardRef(() => StrataSingleSelectComponent),
|
|
4090
4355
|
multi: true
|
|
4091
4356
|
}
|
|
4092
|
-
], queries: [{ propertyName: "selectItems", predicate: StrataSelectItemComponent, isSignal: true }, { propertyName: "triggerTemplate", first: true, predicate: StrataSelectTriggerDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputField", first: true, predicate: StrataInputFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [class.disabled]=\"effectiveDisabled()\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" (keydown.space)=\"toggle($event)\" (keydown.enter)=\"toggle($event)\" (keydown.escape)=\"open.set(false)\" [attr.data-open]=\"open()\"\n [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" [stOverlay]=\"selector\" [overlayOpen]=\"open()\" [overlayPlacement]=\"placement()\">\n @if (selectedItem()) {\n @if (triggerTemplate()) {\n <ng-container *ngTemplateOutlet=\"triggerTemplate()!\"></ng-container>\n } @else {\n {{ selectedItem()!.text() }}\n }\n } @else {\n <span class=\"placeholder-text\">{{ placeholder() }}</span>\n }\n\n <st-icon name=\"expand-up-down\"></st-icon>\n</div>\n\n<ng-template #selector>\n <div class=\"single-select-selector\" #singleSelectSelector [class.full-width]=\"fullWidth()\">\n @if (searchable()) {\n <st-input-field>\n <input stInput #searchField type=\"text\" [value]=\"searchQuery() || ''\" (input)=\"searchQuery.set($any($event.target).value); onSearchChange(searchQuery())\" [placeholder]=\"searchPlaceholder()\" />\n <button stButton variant=\"ghost\" [class.visible]=\"searchQuery() !== undefined && searchQuery()!.length > 0\" suffix\n size=\"sm\" (click)=\"searchQuery.set(undefined); onSearchChange(undefined)\">\n x\n </button>\n </st-input-field>\n }\n <div class=\"single-select-items-container\">\n <ng-content select=\"st-select-item\"></ng-content>\n </div>\n </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataInputFieldComponent, selector: "st-input-field", inputs: ["size", "disabled", "maxLength", "showCharacterCounter", "characterCounterFormatter"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: StrataNativeInputRefDirective, selector: "input[stInput], textarea[stInput]" }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
|
|
4357
|
+
], queries: [{ propertyName: "selectItems", predicate: StrataSelectItemComponent, isSignal: true }, { propertyName: "triggerTemplate", first: true, predicate: StrataSelectTriggerDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputField", first: true, predicate: StrataInputFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [class.disabled]=\"effectiveDisabled()\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" (keydown.space)=\"toggle($event)\" (keydown.enter)=\"toggle($event)\" (keydown.escape)=\"open.set(false)\" [attr.data-open]=\"open()\"\n [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" [stOverlay]=\"selector\" [overlayOpen]=\"open()\" [overlayPlacement]=\"placement()\">\n @if (selectedItem()) {\n @if (triggerTemplate()) {\n <ng-container *ngTemplateOutlet=\"triggerTemplate()!\"></ng-container>\n } @else {\n {{ selectedItem()!.text() }}\n }\n } @else {\n <span class=\"placeholder-text\">{{ placeholder() }}</span>\n }\n\n <st-icon name=\"expand-up-down\"></st-icon>\n</div>\n@if (message()) {\n <div\n class=\"st-select-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ message() }}\n </div>\n}\n\n<ng-template #selector>\n <div class=\"single-select-selector\" #singleSelectSelector [class.full-width]=\"fullWidth()\">\n @if (searchable()) {\n <st-input-field>\n <input stInput #searchField type=\"text\" [value]=\"searchQuery() || ''\" (input)=\"searchQuery.set($any($event.target).value); onSearchChange(searchQuery())\" [placeholder]=\"searchPlaceholder()\" />\n <button stButton variant=\"ghost\" [class.visible]=\"searchQuery() !== undefined && searchQuery()!.length > 0\" suffix\n size=\"sm\" (click)=\"searchQuery.set(undefined); onSearchChange(undefined)\">\n x\n </button>\n </st-input-field>\n }\n <div class=\"single-select-items-container\">\n <ng-content select=\"st-select-item\"></ng-content>\n </div>\n </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataInputFieldComponent, selector: "st-input-field", inputs: ["size", "label", "id", "name", "state", "error", "message", "colorMessage", "disabled", "maxLength", "showCharacterCounter", "characterCounterFormatter"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: StrataNativeInputRefDirective, selector: "input[stInput], textarea[stInput]" }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
|
|
4093
4358
|
}
|
|
4094
4359
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSingleSelectComponent, decorators: [{
|
|
4095
4360
|
type: Component,
|
|
@@ -4112,9 +4377,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
4112
4377
|
'[class.st-size-md]': 'size() === "md"',
|
|
4113
4378
|
'[class.st-size-lg]': 'size() === "lg"',
|
|
4114
4379
|
'[class.st-disabled]': 'effectiveDisabled()',
|
|
4115
|
-
'[attr.aria-disabled]': 'effectiveDisabled()'
|
|
4116
|
-
|
|
4117
|
-
|
|
4380
|
+
'[attr.aria-disabled]': 'effectiveDisabled()',
|
|
4381
|
+
'[class.st-state-error]': 'effectiveState() === "error"',
|
|
4382
|
+
'[class.st-state-success]': 'effectiveState() === "success"',
|
|
4383
|
+
'[class.st-state-warning]': 'effectiveState() === "warning"',
|
|
4384
|
+
'[class.st-error]': 'effectiveState() === "error"',
|
|
4385
|
+
'[attr.aria-invalid]': 'effectiveState() === "error" ? "true" : null'
|
|
4386
|
+
}, template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [class.disabled]=\"effectiveDisabled()\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" (keydown.space)=\"toggle($event)\" (keydown.enter)=\"toggle($event)\" (keydown.escape)=\"open.set(false)\" [attr.data-open]=\"open()\"\n [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" [stOverlay]=\"selector\" [overlayOpen]=\"open()\" [overlayPlacement]=\"placement()\">\n @if (selectedItem()) {\n @if (triggerTemplate()) {\n <ng-container *ngTemplateOutlet=\"triggerTemplate()!\"></ng-container>\n } @else {\n {{ selectedItem()!.text() }}\n }\n } @else {\n <span class=\"placeholder-text\">{{ placeholder() }}</span>\n }\n\n <st-icon name=\"expand-up-down\"></st-icon>\n</div>\n@if (message()) {\n <div\n class=\"st-select-message\"\n [class.st-message-error]=\"isMessageError()\"\n [class.st-message-success]=\"isMessageSuccess()\"\n [class.st-message-warning]=\"isMessageWarning()\"\n [attr.role]=\"isMessageError() ? 'alert' : null\"\n >\n {{ message() }}\n </div>\n}\n\n<ng-template #selector>\n <div class=\"single-select-selector\" #singleSelectSelector [class.full-width]=\"fullWidth()\">\n @if (searchable()) {\n <st-input-field>\n <input stInput #searchField type=\"text\" [value]=\"searchQuery() || ''\" (input)=\"searchQuery.set($any($event.target).value); onSearchChange(searchQuery())\" [placeholder]=\"searchPlaceholder()\" />\n <button stButton variant=\"ghost\" [class.visible]=\"searchQuery() !== undefined && searchQuery()!.length > 0\" suffix\n size=\"sm\" (click)=\"searchQuery.set(undefined); onSearchChange(undefined)\">\n x\n </button>\n </st-input-field>\n }\n <div class=\"single-select-items-container\">\n <ng-content select=\"st-select-item\"></ng-content>\n </div>\n </div>\n</ng-template>" }]
|
|
4387
|
+
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], colorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], selectItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSelectItemComponent), { isSignal: true }] }], triggerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataSelectTriggerDirective), { ...{ read: TemplateRef }, isSignal: true }] }], inputField: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataInputFieldComponent), { isSignal: true }] }] } });
|
|
4118
4388
|
|
|
4119
4389
|
class StrataStepComponent {
|
|
4120
4390
|
label = input.required(/* @ts-ignore */
|