suis 0.25.0 → 0.26.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/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
|