suis 0.25.0 → 0.26.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +3 -1
- package/esm2022/lib/components/index.mjs +3 -2
- package/esm2022/lib/components/suis-input/index.mjs +3 -0
- package/esm2022/lib/components/suis-input/suis-input.component.mjs +66 -0
- package/esm2022/lib/components/suis-input/suis-input.types.mjs +2 -0
- package/esm2022/lib/components/suis-input-checkbox/index.mjs +2 -0
- package/esm2022/lib/components/suis-input-checkbox/suis-input-checkbox.component.mjs +55 -0
- package/esm2022/lib/components/suis-input-chips/suis-input-chips.component.mjs +5 -5
- package/esm2022/lib/components/suis-input-number/suis-input-number.component.mjs +3 -3
- package/esm2022/lib/components/suis-label/suis-label.component.mjs +18 -4
- package/esm2022/lib/shared/classes/suis-input.base.mjs +7 -3
- package/fesm2022/suis.mjs +99 -35
- package/fesm2022/suis.mjs.map +1 -1
- package/lib/components/index.d.ts +2 -1
- package/lib/components/suis-input/index.d.ts +2 -0
- package/lib/components/suis-input/suis-input.component.d.ts +25 -0
- package/lib/components/suis-input/suis-input.types.d.ts +1 -0
- package/lib/components/suis-input-checkbox/index.d.ts +1 -0
- package/lib/components/suis-input-checkbox/suis-input-checkbox.component.d.ts +17 -0
- package/lib/components/suis-label/suis-label.component.d.ts +13 -1
- package/lib/shared/classes/suis-input.base.d.ts +9 -1
- package/package.json +1 -1
- package/esm2022/lib/components/suis-input-text/index.mjs +0 -3
- package/esm2022/lib/components/suis-input-text/suis-input-text.component.mjs +0 -66
- package/esm2022/lib/components/suis-input-text/suis-input-text.types.mjs +0 -2
- package/lib/components/suis-input-text/index.d.ts +0 -2
- package/lib/components/suis-input-text/suis-input-text.component.d.ts +0 -25
- package/lib/components/suis-input-text/suis-input-text.types.d.ts +0 -1
package/fesm2022/suis.mjs
CHANGED
|
@@ -445,11 +445,15 @@ class SuisInputBase {
|
|
|
445
445
|
this.cdRef.markForCheck();
|
|
446
446
|
}
|
|
447
447
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
448
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputBase, inputs: { readonly: "readonly", invalid: "invalid" }, outputs: { changed: "changed", touched: "touched" }, ngImport: i0 }); }
|
|
448
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputBase, inputs: { id: "id", name: "name", readonly: "readonly", invalid: "invalid" }, outputs: { changed: "changed", touched: "touched" }, ngImport: i0 }); }
|
|
449
449
|
}
|
|
450
450
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputBase, decorators: [{
|
|
451
451
|
type: Directive
|
|
452
|
-
}], propDecorators: {
|
|
452
|
+
}], propDecorators: { id: [{
|
|
453
|
+
type: Input
|
|
454
|
+
}], name: [{
|
|
455
|
+
type: Input
|
|
456
|
+
}], readonly: [{
|
|
453
457
|
type: Input
|
|
454
458
|
}], invalid: [{
|
|
455
459
|
type: Input
|
|
@@ -459,11 +463,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
459
463
|
type: Output
|
|
460
464
|
}] } });
|
|
461
465
|
|
|
462
|
-
class
|
|
466
|
+
class SuisInputComponent extends SuisInputBase {
|
|
463
467
|
constructor() {
|
|
464
468
|
super(...arguments);
|
|
465
469
|
/**
|
|
466
|
-
* Sets input's type to one of the accepted values -
|
|
470
|
+
* Sets input's type to one of the accepted values - type of SuisInputType. By default set to 'text'.
|
|
467
471
|
*/
|
|
468
472
|
this.type = 'text';
|
|
469
473
|
/**
|
|
@@ -493,24 +497,24 @@ class SuisInputTextComponent extends SuisInputBase {
|
|
|
493
497
|
onEnter() {
|
|
494
498
|
this.enterPressed.emit();
|
|
495
499
|
}
|
|
496
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type:
|
|
497
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type:
|
|
500
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
501
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputComponent, isStandalone: true, selector: "suis-input", inputs: { type: "type", placeholder: "placeholder" }, outputs: { enterPressed: "enterPressed" }, providers: [
|
|
498
502
|
{
|
|
499
503
|
provide: NG_VALUE_ACCESSOR,
|
|
500
504
|
multi: true,
|
|
501
|
-
useExisting: forwardRef(() =>
|
|
505
|
+
useExisting: forwardRef(() => SuisInputComponent),
|
|
502
506
|
},
|
|
503
|
-
], usesInheritance: true, ngImport: i0, template: "<input\n class=\"suis-input
|
|
507
|
+
], usesInheritance: true, ngImport: i0, template: "<input\n class=\"suis-input\"\n [class.suis-input--invalid]=\"invalid\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem}.suis-input:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
504
508
|
}
|
|
505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type:
|
|
509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputComponent, decorators: [{
|
|
506
510
|
type: Component,
|
|
507
|
-
args: [{ selector: 'suis-input
|
|
511
|
+
args: [{ selector: 'suis-input', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
508
512
|
{
|
|
509
513
|
provide: NG_VALUE_ACCESSOR,
|
|
510
514
|
multi: true,
|
|
511
|
-
useExisting: forwardRef(() =>
|
|
515
|
+
useExisting: forwardRef(() => SuisInputComponent),
|
|
512
516
|
},
|
|
513
|
-
], template: "<input\n class=\"suis-input
|
|
517
|
+
], template: "<input\n class=\"suis-input\"\n [class.suis-input--invalid]=\"invalid\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem}.suis-input:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
514
518
|
}], propDecorators: { type: [{
|
|
515
519
|
type: Input
|
|
516
520
|
}], placeholder: [{
|
|
@@ -519,6 +523,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
519
523
|
type: Output
|
|
520
524
|
}] } });
|
|
521
525
|
|
|
526
|
+
class SuisLabelComponent {
|
|
527
|
+
constructor() {
|
|
528
|
+
/**
|
|
529
|
+
* Adds a red colored asterisk after the label. By default set to false.
|
|
530
|
+
*/
|
|
531
|
+
this.required = false;
|
|
532
|
+
/**
|
|
533
|
+
* Shows the pointer cursor when hovered. By default set to false.
|
|
534
|
+
*/
|
|
535
|
+
this.pointer = false;
|
|
536
|
+
/**
|
|
537
|
+
* Grays out the label content and removes cursor pointer behavior. By default set to false.
|
|
538
|
+
*/
|
|
539
|
+
this.readonly = false;
|
|
540
|
+
}
|
|
541
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
542
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisLabelComponent, isStandalone: true, selector: "suis-label", inputs: { for: "for", required: "required", pointer: "pointer", readonly: "readonly" }, ngImport: i0, template: "<label\n class=\"suis-label\"\n [class.suis-label--pointer]=\"!readonly && pointer\"\n [class.suis-label--readonly]=\"readonly\"\n [htmlFor]=\"for ? for : undefined\"\n>\n <ng-content></ng-content>\n <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-label{font-size:.875rem;display:flex;align-items:center}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}.suis-label--pointer{cursor:pointer}.suis-label--readonly{color:#dcdde1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
543
|
+
}
|
|
544
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, decorators: [{
|
|
545
|
+
type: Component,
|
|
546
|
+
args: [{ selector: 'suis-label', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n class=\"suis-label\"\n [class.suis-label--pointer]=\"!readonly && pointer\"\n [class.suis-label--readonly]=\"readonly\"\n [htmlFor]=\"for ? for : undefined\"\n>\n <ng-content></ng-content>\n <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-label{font-size:.875rem;display:flex;align-items:center}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}.suis-label--pointer{cursor:pointer}.suis-label--readonly{color:#dcdde1}\n"] }]
|
|
547
|
+
}], propDecorators: { for: [{
|
|
548
|
+
type: Input
|
|
549
|
+
}], required: [{
|
|
550
|
+
type: Input
|
|
551
|
+
}], pointer: [{
|
|
552
|
+
type: Input
|
|
553
|
+
}], readonly: [{
|
|
554
|
+
type: Input
|
|
555
|
+
}] } });
|
|
556
|
+
|
|
557
|
+
class SuisInputCheckboxComponent extends SuisInputBase {
|
|
558
|
+
constructor() {
|
|
559
|
+
super(...arguments);
|
|
560
|
+
/** @internal */
|
|
561
|
+
this.SuisIconType = SuisIconType;
|
|
562
|
+
/** @internal */
|
|
563
|
+
this.value = false;
|
|
564
|
+
/**
|
|
565
|
+
* Adds a red colored asterisk after the label. By default set to false.
|
|
566
|
+
*/
|
|
567
|
+
this.required = false;
|
|
568
|
+
}
|
|
569
|
+
writeValue(obj) {
|
|
570
|
+
this.value = obj;
|
|
571
|
+
this._onChange(this.value);
|
|
572
|
+
this.cdRef.markForCheck();
|
|
573
|
+
}
|
|
574
|
+
onChange(event) {
|
|
575
|
+
const target = event.target;
|
|
576
|
+
this.value = target.checked;
|
|
577
|
+
this._onChange(this.value);
|
|
578
|
+
this.changed.emit(this.value);
|
|
579
|
+
this.cdRef.markForCheck();
|
|
580
|
+
}
|
|
581
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
582
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisInputCheckboxComponent, isStandalone: true, selector: "suis-input-checkbox", inputs: { required: "required" }, providers: [
|
|
583
|
+
{
|
|
584
|
+
provide: NG_VALUE_ACCESSOR,
|
|
585
|
+
multi: true,
|
|
586
|
+
useExisting: forwardRef(() => SuisInputCheckboxComponent),
|
|
587
|
+
},
|
|
588
|
+
], usesInheritance: true, ngImport: i0, template: "<input\n type=\"checkbox\"\n class=\"suis-input-checkbox\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n\n<suis-label\n [for]=\"id\"\n [required]=\"required\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-input-checkbox__check\"\n [class.suis-input-checkbox__check--invalid]=\"invalid\"\n [class.suis-input-checkbox__check--readonly]=\"readonly\"\n >\n <suis-icon\n *ngIf=\"value\"\n [type]=\"SuisIconType.CHECK\"\n [color]=\"readonly ? 'tertiary' : 'primary'\"\n ></suis-icon>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-checkbox{display:none}.suis-input-checkbox__check{width:1.25rem;height:1.25rem;border:.0625rem solid #192a56;display:flex;justify-content:center;align-items:center;margin-right:.5rem;background-color:#fff}.suis-input-checkbox__check:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-checkbox__check--readonly{border:.0625rem solid #dcdde1}.suis-input-checkbox__check--readonly:focus{box-shadow:none}.suis-input-checkbox__check--invalid{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SuisLabelComponent, selector: "suis-label", inputs: ["for", "required", "pointer", "readonly"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
589
|
+
}
|
|
590
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputCheckboxComponent, decorators: [{
|
|
591
|
+
type: Component,
|
|
592
|
+
args: [{ selector: 'suis-input-checkbox', standalone: true, imports: [CommonModule, SuisLabelComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
593
|
+
{
|
|
594
|
+
provide: NG_VALUE_ACCESSOR,
|
|
595
|
+
multi: true,
|
|
596
|
+
useExisting: forwardRef(() => SuisInputCheckboxComponent),
|
|
597
|
+
},
|
|
598
|
+
], template: "<input\n type=\"checkbox\"\n class=\"suis-input-checkbox\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n\n<suis-label\n [for]=\"id\"\n [required]=\"required\"\n [pointer]=\"true\"\n [readonly]=\"readonly\"\n>\n <div\n [tabindex]=\"readonly ? -1 : 0\"\n class=\"suis-input-checkbox__check\"\n [class.suis-input-checkbox__check--invalid]=\"invalid\"\n [class.suis-input-checkbox__check--readonly]=\"readonly\"\n >\n <suis-icon\n *ngIf=\"value\"\n [type]=\"SuisIconType.CHECK\"\n [color]=\"readonly ? 'tertiary' : 'primary'\"\n ></suis-icon>\n </div>\n <ng-content></ng-content>\n</suis-label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:flex}.suis-input-checkbox{display:none}.suis-input-checkbox__check{width:1.25rem;height:1.25rem;border:.0625rem solid #192a56;display:flex;justify-content:center;align-items:center;margin-right:.5rem;background-color:#fff}.suis-input-checkbox__check:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-checkbox__check--readonly{border:.0625rem solid #dcdde1}.suis-input-checkbox__check--readonly:focus{box-shadow:none}.suis-input-checkbox__check--invalid{border:.0625rem solid #ff4757;box-shadow:0 2px 5px #ff4757bf}\n"] }]
|
|
599
|
+
}], propDecorators: { required: [{
|
|
600
|
+
type: Input
|
|
601
|
+
}] } });
|
|
602
|
+
|
|
522
603
|
class SuisInputChipsComponent extends SuisInputBase {
|
|
523
604
|
constructor() {
|
|
524
605
|
super(...arguments);
|
|
@@ -571,7 +652,7 @@ class SuisInputChipsComponent extends SuisInputBase {
|
|
|
571
652
|
multi: true,
|
|
572
653
|
useExisting: forwardRef(() => SuisInputChipsComponent),
|
|
573
654
|
},
|
|
574
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-input-chips\">\n <div #input class=\"suis-input-chips__input\">\n <suis-input
|
|
655
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-input-chips\">\n <div #input class=\"suis-input-chips__input\">\n <suis-input\n [id]=\"id\"\n [name]=\"name\"\n [formControl]=\"inputControl\"\n [readonly]=\"readonly\"\n [invalid]=\"invalid\"\n [placeholder]=\"placeholder\"\n (touched)=\"onTouch()\"\n (enterPressed)=\"submitValue()\"\n ></suis-input>\n </div>\n <div *ngIf=\"value.length\" class=\"suis-input-chips__chips\">\n <suis-chip\n [removable]=\"readonly ? false : true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"removeItem(item)\"\n *ngFor=\"let item of value\"\n >\n {{ item }}\n </suis-chip>\n </div>\n</div>\n", styles: [":host{display:block}.suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisInputComponent, selector: "suis-input", inputs: ["type", "placeholder"], outputs: ["enterPressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
575
656
|
}
|
|
576
657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputChipsComponent, decorators: [{
|
|
577
658
|
type: Component,
|
|
@@ -579,14 +660,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
579
660
|
CommonModule,
|
|
580
661
|
ReactiveFormsModule,
|
|
581
662
|
SuisChipComponent,
|
|
582
|
-
|
|
663
|
+
SuisInputComponent,
|
|
583
664
|
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
584
665
|
{
|
|
585
666
|
provide: NG_VALUE_ACCESSOR,
|
|
586
667
|
multi: true,
|
|
587
668
|
useExisting: forwardRef(() => SuisInputChipsComponent),
|
|
588
669
|
},
|
|
589
|
-
], template: "<div class=\"suis-input-chips\">\n <div #input class=\"suis-input-chips__input\">\n <suis-input
|
|
670
|
+
], template: "<div class=\"suis-input-chips\">\n <div #input class=\"suis-input-chips__input\">\n <suis-input\n [id]=\"id\"\n [name]=\"name\"\n [formControl]=\"inputControl\"\n [readonly]=\"readonly\"\n [invalid]=\"invalid\"\n [placeholder]=\"placeholder\"\n (touched)=\"onTouch()\"\n (enterPressed)=\"submitValue()\"\n ></suis-input>\n </div>\n <div *ngIf=\"value.length\" class=\"suis-input-chips__chips\">\n <suis-chip\n [removable]=\"readonly ? false : true\"\n [color]=\"chipColor\"\n [iconColor]=\"chipIconColor\"\n (remove)=\"removeItem(item)\"\n *ngFor=\"let item of value\"\n >\n {{ item }}\n </suis-chip>\n </div>\n</div>\n", styles: [":host{display:block}.suis-input-chips__chips{margin-top:.375rem;display:flex;flex-wrap:wrap}.suis-input-chips__chips suis-chip:not(:last-child){margin-right:.25rem}\n"] }]
|
|
590
671
|
}], propDecorators: { inputEl: [{
|
|
591
672
|
type: ViewChild,
|
|
592
673
|
args: ['input']
|
|
@@ -728,7 +809,7 @@ class SuisInputNumberComponent extends SuisInputBase {
|
|
|
728
809
|
multi: true,
|
|
729
810
|
useExisting: forwardRef(() => SuisInputNumberComponent),
|
|
730
811
|
},
|
|
731
|
-
], usesInheritance: true, ngImport: i0, template: "<input\n class=\"suis-input-number\"\n [class.suis-input-number--invalid]=\"invalid\"\n
|
|
812
|
+
], usesInheritance: true, ngImport: i0, template: "<input\n type=\"number\"\n class=\"suis-input-number\"\n [class.suis-input-number--invalid]=\"invalid\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-number{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;-moz-appearance:textfield}.suis-input-number:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
732
813
|
}
|
|
733
814
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputNumberComponent, decorators: [{
|
|
734
815
|
type: Component,
|
|
@@ -738,28 +819,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
738
819
|
multi: true,
|
|
739
820
|
useExisting: forwardRef(() => SuisInputNumberComponent),
|
|
740
821
|
},
|
|
741
|
-
], template: "<input\n class=\"suis-input-number\"\n [class.suis-input-number--invalid]=\"invalid\"\n
|
|
822
|
+
], template: "<input\n type=\"number\"\n class=\"suis-input-number\"\n [class.suis-input-number--invalid]=\"invalid\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly\"\n (input)=\"onChange($event)\"\n (focus)=\"onTouch()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-input-number{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000040;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;-moz-appearance:textfield}.suis-input-number:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input-number--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-input-number::-webkit-outer-spin-button,.suis-input-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
|
|
742
823
|
}], propDecorators: { placeholder: [{
|
|
743
824
|
type: Input
|
|
744
825
|
}] } });
|
|
745
826
|
|
|
746
|
-
class SuisLabelComponent {
|
|
747
|
-
constructor() {
|
|
748
|
-
/**
|
|
749
|
-
* Adds a red colored asterisk after the label. By default set to false.
|
|
750
|
-
*/
|
|
751
|
-
this.required = false;
|
|
752
|
-
}
|
|
753
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
754
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisLabelComponent, isStandalone: true, selector: "suis-label", inputs: { required: "required" }, ngImport: i0, template: "<label class=\"suis-label\">\n <ng-content></ng-content>\n <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-label{font-size:.875rem;display:flex}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
755
|
-
}
|
|
756
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, decorators: [{
|
|
757
|
-
type: Component,
|
|
758
|
-
args: [{ selector: 'suis-label', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"suis-label\">\n <ng-content></ng-content>\n <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-label{font-size:.875rem;display:flex}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"] }]
|
|
759
|
-
}], propDecorators: { required: [{
|
|
760
|
-
type: Input
|
|
761
|
-
}] } });
|
|
762
|
-
|
|
763
827
|
class SuisNavigationItemComponent {
|
|
764
828
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
765
829
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNavigationItemComponent, isStandalone: true, selector: "suis-navigation-item", inputs: { item: "item", templateRef: "templateRef" }, ngImport: i0, template: "<a\n *ngIf=\"item\"\n class=\"suis-navigation-item\"\n [routerLink]=\"item.link\"\n routerLinkActive=\"active\"\n>\n <div class=\"suis-navigation-item__content\">\n <ng-container *ngIf=\"templateRef; else label\">\n <ng-container\n *ngTemplateOutlet=\"templateRef; context: { $implicit: item }\"\n ></ng-container>\n </ng-container>\n <ng-template #label>\n {{ item.label }}\n </ng-template>\n </div>\n</a>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;width:100%}.suis-navigation-item{display:flex;justify-content:space-between;padding:1rem;color:#fff;font-size:.875rem;text-decoration:none;text-transform:uppercase;width:100%;position:relative;cursor:pointer;padding:.75rem 1rem .75rem 2rem}.suis-navigation-item:hover{background-color:#273c75d9}.suis-navigation-item.active{background-color:#273c75;color:#fff;font-weight:600}.suis-navigation-item.active:hover{background-color:#273c75}.suis-navigation-item.active:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:.1875rem;height:100%;background-color:#dcdde1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
@@ -1895,5 +1959,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1895
1959
|
* Generated bundle index. Do not edit.
|
|
1896
1960
|
*/
|
|
1897
1961
|
|
|
1898
|
-
export { SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent,
|
|
1962
|
+
export { SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputCheckboxComponent, SuisInputChipsComponent, SuisInputComponent, SuisInputNumberComponent, SuisLabelComponent, SuisNavigationComponent, SuisNavigationGroupComponent, SuisNavigationGroupItemComponent, SuisNavigationItemComponent, SuisNavigationItemDirective, SuisNavigationModule, SuisNgClassPipe, SuisNotificationComponent, SuisNotificationService, SuisNotificationsComponent, SuisPaginationComponent, SuisProgressBarComponent, SuisSelectComponent, SuisSelectModule, SuisSelectMultiComponent, SuisSelectMultiModule, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent, SuisTabDirective, SuisTableCellDirective, SuisTableColumnDirective, SuisTableComponent, SuisTableModule, SuisTabsComponent, SuisTabsModule, SuisTitleComponent, SuisToolbarComponent };
|
|
1899
1963
|
//# sourceMappingURL=suis.mjs.map
|