monkey-style-guide-v2 0.0.30 → 0.0.31
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/fesm2022/monkey-style-guide-v2.mjs +103 -47
- package/fesm2022/monkey-style-guide-v2.mjs.map +1 -1
- package/lib/components/option/option.component.d.ts +2 -7
- package/lib/components/select/select.component.d.ts +3 -5
- package/monkey-style-guide-v2-0.0.31.tgz +0 -0
- package/package.json +1 -1
- package/monkey-style-guide-v2-0.0.30.tgz +0 -0
|
@@ -3497,6 +3497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3497
3497
|
class MonkeyOptionComponent {
|
|
3498
3498
|
constructor() {
|
|
3499
3499
|
this.idGenerator = inject(IdGenerator);
|
|
3500
|
+
this.value = input();
|
|
3500
3501
|
this.disabled = false;
|
|
3501
3502
|
this.type = 'select';
|
|
3502
3503
|
this.selected = false;
|
|
@@ -3525,11 +3526,25 @@ class MonkeyOptionComponent {
|
|
|
3525
3526
|
}
|
|
3526
3527
|
}
|
|
3527
3528
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3528
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3529
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyOptionComponent, isStandalone: true, selector: "monkey-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-option" }, listeners: { "click": "onClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "attr.id": "id", "class.mecx-option-disabled": "disabled", "class.mecx-option-selected": "selected", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "type" }, classAttribute: "mecx-option" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `
|
|
3530
|
+
@if (type === 'checkbox') {
|
|
3531
|
+
<span class="mecx-option-checkbox">
|
|
3532
|
+
<util-icon class="icon" name="check" />
|
|
3533
|
+
</span>
|
|
3534
|
+
}
|
|
3535
|
+
<div #content><ng-content /></div>
|
|
3536
|
+
`, isInline: true, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:var(--mecx-color-white);cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus{outline:unset;outline-offset:1px}monkey-option.radio:focus:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox .mecx-option-checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3529
3537
|
}
|
|
3530
3538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
|
|
3531
3539
|
type: Component,
|
|
3532
|
-
args: [{ selector: 'monkey-option', standalone: true,
|
|
3540
|
+
args: [{ selector: 'monkey-option', standalone: true, imports: [CommonModule, UtilIconComponent], template: `
|
|
3541
|
+
@if (type === 'checkbox') {
|
|
3542
|
+
<span class="mecx-option-checkbox">
|
|
3543
|
+
<util-icon class="icon" name="check" />
|
|
3544
|
+
</span>
|
|
3545
|
+
}
|
|
3546
|
+
<div #content><ng-content /></div>
|
|
3547
|
+
`, encapsulation: ViewEncapsulation.None, host: {
|
|
3533
3548
|
'data-testid': 'monkey-option',
|
|
3534
3549
|
'[attr.id]': 'id',
|
|
3535
3550
|
class: 'mecx-option',
|
|
@@ -3537,12 +3552,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3537
3552
|
'[class.mecx-option-selected]': 'selected',
|
|
3538
3553
|
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
3539
3554
|
'[class]': 'type'
|
|
3540
|
-
}, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color
|
|
3555
|
+
}, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:var(--mecx-color-white);cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus{outline:unset;outline-offset:1px}monkey-option.radio:focus:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox .mecx-option-checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"] }]
|
|
3541
3556
|
}], propDecorators: { _content: [{
|
|
3542
3557
|
type: ViewChild,
|
|
3543
3558
|
args: ['content', { static: true }]
|
|
3544
|
-
}], value: [{
|
|
3545
|
-
type: Input
|
|
3546
3559
|
}], disabled: [{
|
|
3547
3560
|
type: Input,
|
|
3548
3561
|
args: [{ transform: booleanAttribute }]
|
|
@@ -3604,12 +3617,11 @@ class MonkeySelectComponent {
|
|
|
3604
3617
|
this.formField = formField;
|
|
3605
3618
|
this.tabIndex = 0;
|
|
3606
3619
|
this.onChange = new EventEmitter();
|
|
3607
|
-
this.onSearch = new EventEmitter();
|
|
3608
3620
|
this.placeholder = '';
|
|
3609
3621
|
this.loading = false;
|
|
3610
3622
|
this.showSearch = true;
|
|
3611
3623
|
this.searchPlaceholder = '';
|
|
3612
|
-
this.
|
|
3624
|
+
this.type = 'select';
|
|
3613
3625
|
this._value = null;
|
|
3614
3626
|
this.labelSelected = '';
|
|
3615
3627
|
this.overlayRef = null;
|
|
@@ -3623,7 +3635,6 @@ class MonkeySelectComponent {
|
|
|
3623
3635
|
this.id = this.idGenerator.getId('monkey-select-');
|
|
3624
3636
|
this.percent = false;
|
|
3625
3637
|
this.stateChanges = new Subject();
|
|
3626
|
-
this.type = '';
|
|
3627
3638
|
this.searchHandle = new EventEmitter();
|
|
3628
3639
|
this.searchDictionary = inject(MonkeyDictionaryService).get('NO-DATA');
|
|
3629
3640
|
this.loadingDictionary = inject(MonkeyDictionaryService).get('LOADING');
|
|
@@ -3648,20 +3659,33 @@ class MonkeySelectComponent {
|
|
|
3648
3659
|
}
|
|
3649
3660
|
changeSelected() {
|
|
3650
3661
|
setTimeout(() => {
|
|
3651
|
-
if (this.options)
|
|
3662
|
+
if (!this.options)
|
|
3663
|
+
return;
|
|
3664
|
+
if (this.type === 'checkbox') {
|
|
3665
|
+
const selectedValues = this.getComparationValue();
|
|
3652
3666
|
this.options.forEach((opt) => {
|
|
3653
|
-
|
|
3667
|
+
if (!opt.disabled) {
|
|
3668
|
+
opt.selected = selectedValues.includes(String(opt.value()));
|
|
3669
|
+
}
|
|
3670
|
+
});
|
|
3671
|
+
}
|
|
3672
|
+
else {
|
|
3673
|
+
this.options.forEach((opt) => {
|
|
3674
|
+
opt.selected = String(opt.value()) === this.value;
|
|
3654
3675
|
});
|
|
3655
|
-
this.updateSelectedLabel();
|
|
3656
3676
|
}
|
|
3657
3677
|
this.changeDetectorRef.markForCheck();
|
|
3658
3678
|
});
|
|
3659
3679
|
}
|
|
3660
3680
|
initializeOptions() {
|
|
3661
|
-
|
|
3662
|
-
|
|
3663
|
-
option.
|
|
3664
|
-
|
|
3681
|
+
setTimeout(() => {
|
|
3682
|
+
this.options.forEach((option) => {
|
|
3683
|
+
option.type = this.type;
|
|
3684
|
+
if (!option.action) {
|
|
3685
|
+
option.action = this.selectOption.bind(this, option);
|
|
3686
|
+
}
|
|
3687
|
+
});
|
|
3688
|
+
this.changeDetectorRef.detectChanges();
|
|
3665
3689
|
});
|
|
3666
3690
|
}
|
|
3667
3691
|
openDropdown() {
|
|
@@ -3672,13 +3696,10 @@ class MonkeySelectComponent {
|
|
|
3672
3696
|
}
|
|
3673
3697
|
}
|
|
3674
3698
|
closeDropdown() {
|
|
3675
|
-
this.changeDetectorRef.markForCheck();
|
|
3676
3699
|
this.isOpen = false;
|
|
3677
3700
|
this.focused = false;
|
|
3678
3701
|
this.formField.control.disableToBeDirty = false;
|
|
3679
|
-
|
|
3680
|
-
this.searchData = '';
|
|
3681
|
-
}
|
|
3702
|
+
this.searchData = '';
|
|
3682
3703
|
}
|
|
3683
3704
|
closeOverlay() {
|
|
3684
3705
|
if (this.overlayRef) {
|
|
@@ -3761,10 +3782,29 @@ class MonkeySelectComponent {
|
|
|
3761
3782
|
this.initializeWithOverlay();
|
|
3762
3783
|
}
|
|
3763
3784
|
updateSelectedLabel() {
|
|
3764
|
-
|
|
3765
|
-
return
|
|
3766
|
-
|
|
3767
|
-
|
|
3785
|
+
if (!this.options)
|
|
3786
|
+
return;
|
|
3787
|
+
if (this.type === 'checkbox') {
|
|
3788
|
+
const selectedValues = this.getComparationValue();
|
|
3789
|
+
const selectedOptions = this.options.filter((opt) => {
|
|
3790
|
+
return selectedValues.includes(String(opt.value()));
|
|
3791
|
+
});
|
|
3792
|
+
const maxToShow = 3;
|
|
3793
|
+
const displayContents = selectedOptions.slice(0, maxToShow).map((opt) => {
|
|
3794
|
+
return opt.displayContent;
|
|
3795
|
+
});
|
|
3796
|
+
const hasMore = selectedOptions.length > maxToShow;
|
|
3797
|
+
this.labelSelected = hasMore
|
|
3798
|
+
? `${displayContents.join(', ')}...`
|
|
3799
|
+
: displayContents.join(', ');
|
|
3800
|
+
}
|
|
3801
|
+
else {
|
|
3802
|
+
const selectedOption = this.options.find((opt) => {
|
|
3803
|
+
return String(opt.value()) === this.value;
|
|
3804
|
+
});
|
|
3805
|
+
this.labelSelected = selectedOption ? selectedOption.displayContent : '';
|
|
3806
|
+
}
|
|
3807
|
+
this.changeDetectorRef.markForCheck();
|
|
3768
3808
|
}
|
|
3769
3809
|
executeSearch(search) {
|
|
3770
3810
|
let found = false;
|
|
@@ -3787,21 +3827,24 @@ class MonkeySelectComponent {
|
|
|
3787
3827
|
overlayElement.scrollTop = 0;
|
|
3788
3828
|
}
|
|
3789
3829
|
}
|
|
3830
|
+
getComparationValue() {
|
|
3831
|
+
return (this.value || '')
|
|
3832
|
+
.split(',')
|
|
3833
|
+
.map((v) => {
|
|
3834
|
+
return v.trim();
|
|
3835
|
+
})
|
|
3836
|
+
.filter(Boolean);
|
|
3837
|
+
}
|
|
3790
3838
|
ngOnInit() {
|
|
3791
3839
|
this.searchHandle
|
|
3792
3840
|
.pipe(debounceTime(200), takeUntilDestroyed(this._destroyRef))
|
|
3793
3841
|
.subscribe((search) => {
|
|
3794
|
-
|
|
3795
|
-
this.onSearch.next(search);
|
|
3796
|
-
this.repositionScroll();
|
|
3797
|
-
}
|
|
3798
|
-
else {
|
|
3799
|
-
this.executeSearch(search);
|
|
3800
|
-
}
|
|
3842
|
+
this.executeSearch(search);
|
|
3801
3843
|
});
|
|
3802
3844
|
}
|
|
3803
3845
|
ngAfterContentInit() {
|
|
3804
3846
|
this.initializeOptions();
|
|
3847
|
+
this.updateSelectedLabel();
|
|
3805
3848
|
this.options.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((resp) => {
|
|
3806
3849
|
this.updateSelectedLabel();
|
|
3807
3850
|
this.initializeOptions();
|
|
@@ -3825,20 +3868,36 @@ class MonkeySelectComponent {
|
|
|
3825
3868
|
}
|
|
3826
3869
|
}
|
|
3827
3870
|
selectOption(option) {
|
|
3828
|
-
if (
|
|
3829
|
-
|
|
3830
|
-
|
|
3871
|
+
if (option.disabled || this.disabled)
|
|
3872
|
+
return;
|
|
3873
|
+
if (this.type === 'checkbox') {
|
|
3874
|
+
const values = this.getComparationValue();
|
|
3875
|
+
const index = values.indexOf(`${option.value()}`);
|
|
3876
|
+
if (index === -1) {
|
|
3877
|
+
values.push(`${option.value()}`);
|
|
3878
|
+
option.selected = true;
|
|
3879
|
+
}
|
|
3880
|
+
else {
|
|
3881
|
+
values.splice(index, 1);
|
|
3882
|
+
option.selected = false;
|
|
3883
|
+
}
|
|
3884
|
+
this.value = values.join(',');
|
|
3885
|
+
}
|
|
3886
|
+
else {
|
|
3887
|
+
this.value = `${option.value()}`;
|
|
3888
|
+
this.options.forEach((opt) => {
|
|
3889
|
+
opt.selected = `${opt.value()}` === `${this.value}`;
|
|
3890
|
+
});
|
|
3831
3891
|
this.closeDropdown();
|
|
3832
3892
|
this._onChange(this.value);
|
|
3833
3893
|
this.onChange.emit(this.value);
|
|
3834
|
-
this.options.forEach((opt) => {
|
|
3835
|
-
opt.selected = opt.value === this.value;
|
|
3836
|
-
});
|
|
3837
3894
|
}
|
|
3895
|
+
this.updateSelectedLabel();
|
|
3838
3896
|
}
|
|
3839
3897
|
writeValue(value) {
|
|
3840
3898
|
this.value = value;
|
|
3841
3899
|
this.changeSelected();
|
|
3900
|
+
this.updateSelectedLabel();
|
|
3842
3901
|
}
|
|
3843
3902
|
onContainerClick(event) {
|
|
3844
3903
|
if (this.disabled)
|
|
@@ -3889,7 +3948,7 @@ class MonkeySelectComponent {
|
|
|
3889
3948
|
}
|
|
3890
3949
|
}
|
|
3891
3950
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeySelectComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3892
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeySelectComponent, isStandalone: true, selector: "monkey-select", inputs: { tabIndex: "tabIndex", placeholder: "placeholder", loading: ["loading", "loading", booleanAttribute], showSearch: ["showSearch", "showSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder",
|
|
3951
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeySelectComponent, isStandalone: true, selector: "monkey-select", inputs: { tabIndex: "tabIndex", placeholder: "placeholder", loading: ["loading", "loading", booleanAttribute], showSearch: ["showSearch", "showSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder", type: "type", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-select" }, listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "class.mecx-select-disabled": "_disabled", "class.mecx-select-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-select" }, providers: [
|
|
3893
3952
|
// eslint-disable-next-line no-use-before-define
|
|
3894
3953
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent }
|
|
3895
3954
|
], queries: [{ propertyName: "options", predicate: MonkeyOptionComponent }], viewQueries: [{ propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }, { propertyName: "overlayEl", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"mecx-select-trigger\"\n [class.open]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen\"\n #trigger\n>\n <div class=\"mecx-select-value\" [class.has-value]=\"value\">\n <span>{{ labelSelected || placeholder }}</span>\n </div>\n\n @if (!loading) {\n <util-icon class=\"mecx-select-icon\" name=\"arrowDown\" />\n }\n</div>\n\n<ng-template #overlayTemplate>\n <div class=\"mecx-select-body-overlay\">\n @if (showSearch) {\n <div class=\"mecx-select-search\">\n <util-icon class=\"mecx-select-search-icon\" name=\"search\" />\n <input\n (input)=\"onHandleSearch($event)\"\n type=\"text\"\n [id]=\"id + '-search'\"\n autocomplete=\"off\"\n maxlength=\"50\"\n [placeholder]=\"searchPlaceholder\"\n [(ngModel)]=\"searchData\"\n />\n </div>\n }\n <div\n class=\"mecx-select-overlay\"\n #overlay\n [@animation]=\"isOpen ? 'open' : 'closed'\"\n (@animation.done)=\"onAnimationEnd($event)\"\n >\n <ng-content />\n </div>\n @if (showSearch && showSearchNoData) {\n <div class=\"mecx-select-search-no-data\">\n <util-icon class=\"mecx-select-search-no-data-icon\" name=\"searchFail\" />\n {{ searchDictionary | async }}\n </div>\n }\n @if (loading) {\n <div class=\"mecx-select-search-loading\">\n {{ loadingDictionary | async }}\n </div>\n }\n </div>\n</ng-template>\n", styles: ["monkey-select{display:inline-flex;width:100%;min-width:0;position:relative}monkey-select:focus-visible,monkey-select:focus{outline:none}.mecx-select-trigger{width:100%;display:inline-flex;align-items:center;cursor:pointer;gap:8px;box-sizing:border-box}.mecx-select-trigger .mecx-select-value{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mecx-color-gray-500);font-size:14px;line-height:24px;letter-spacing:.42px}.mecx-select-trigger .mecx-select-value.has-value{color:var(--mecx-color-gray-900)}.mecx-select-trigger .mecx-select-icon{display:flex;transition:all .2s ease-in-out}.mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-theme-main)}.mecx-select-disabled .mecx-select-trigger{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-50);cursor:default}.mecx-select-disabled .mecx-select-trigger .mecx-select-value{color:var(--mecx-color-gray-400)}.mecx-select-disabled .mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-gray-400)}.mecx-select-trigger.open .mecx-select-icon{transform:rotate(180deg)}.mecx-select-body-overlay{width:100%;background:#fff;border:2px solid var(--mecx-color-gray-400);overflow:hidden;border-radius:4px;box-shadow:0 16px 32px 0 var(--mecx-color-box-shadow)}.mecx-select-body-overlay .mecx-select-search{display:flex;gap:4px;border-bottom:2px solid var(--mecx-color-gray-400);padding:8px}.mecx-select-body-overlay .mecx-select-search-icon{width:12px;display:flex}.mecx-select-body-overlay .mecx-select-search-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-body-overlay input{border:none;width:90%;color:var(--mecx-color-gray-600)!important;font-size:12px;letter-spacing:.54px}.mecx-select-body-overlay .mecx-select-search-no-data,.mecx-select-body-overlay .mecx-select-search-loading{padding:12px;display:flex;justify-content:center;flex-direction:column;align-items:center;gap:4px;color:var(--mecx-color-gray-600);font-size:12px;letter-spacing:.54px;text-align:center}.mecx-select-body-overlay .mecx-select-search-no-data-icon svg path,.mecx-select-body-overlay .mecx-select-search-loading-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-overlay{width:100%;background:#fff;overflow:hidden auto;max-height:360px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
|
|
@@ -3963,8 +4022,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3963
4022
|
type: Input
|
|
3964
4023
|
}], onChange: [{
|
|
3965
4024
|
type: Output
|
|
3966
|
-
}], onSearch: [{
|
|
3967
|
-
type: Output
|
|
3968
4025
|
}], placeholder: [{
|
|
3969
4026
|
type: Input,
|
|
3970
4027
|
args: [{ required: true }]
|
|
@@ -3976,9 +4033,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3976
4033
|
args: [{ transform: booleanAttribute }]
|
|
3977
4034
|
}], searchPlaceholder: [{
|
|
3978
4035
|
type: Input
|
|
3979
|
-
}],
|
|
3980
|
-
type: Input
|
|
3981
|
-
args: [{ transform: booleanAttribute }]
|
|
4036
|
+
}], type: [{
|
|
4037
|
+
type: Input
|
|
3982
4038
|
}], disabled: [{
|
|
3983
4039
|
type: Input,
|
|
3984
4040
|
args: [{ transform: booleanAttribute }]
|
|
@@ -4227,7 +4283,7 @@ class MonkeyInputPhoneComponent {
|
|
|
4227
4283
|
(blur)="_onBlur()"
|
|
4228
4284
|
[attr.id]="inputId"
|
|
4229
4285
|
/>
|
|
4230
|
-
`, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host monkey-select{width:164px;border-right:2px solid var(--mecx-color-gray-400)}:host.mecx-input-phone-disabled monkey-select{border-right:2px solid var(--mecx-color-gray-200)}:host input{width:100%;border:none;margin-left:8px}monkey-option .option-flag{font-size:30px}monkey-option .option-name{letter-spacing:.48px;margin-left:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MonkeySelectComponent, selector: "monkey-select", inputs: ["tabIndex", "placeholder", "loading", "showSearch", "searchPlaceholder", "
|
|
4286
|
+
`, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host monkey-select{width:164px;border-right:2px solid var(--mecx-color-gray-400)}:host.mecx-input-phone-disabled monkey-select{border-right:2px solid var(--mecx-color-gray-200)}:host input{width:100%;border:none;margin-left:8px}monkey-option .option-flag{font-size:30px}monkey-option .option-name{letter-spacing:.48px;margin-left:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MonkeySelectComponent, selector: "monkey-select", inputs: ["tabIndex", "placeholder", "loading", "showSearch", "searchPlaceholder", "type", "disabled", "required", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }] }); }
|
|
4231
4287
|
}
|
|
4232
4288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyInputPhoneComponent, decorators: [{
|
|
4233
4289
|
type: Component,
|
|
@@ -5221,7 +5277,7 @@ class MonkeyRadioButtonComponent {
|
|
|
5221
5277
|
setTimeout(() => {
|
|
5222
5278
|
if (this.options) {
|
|
5223
5279
|
this.options.forEach((opt) => {
|
|
5224
|
-
opt.selected = opt.value === this.value;
|
|
5280
|
+
opt.selected = opt.value() === this.value;
|
|
5225
5281
|
});
|
|
5226
5282
|
}
|
|
5227
5283
|
this.changeDetectorRef.markForCheck();
|
|
@@ -5247,11 +5303,11 @@ class MonkeyRadioButtonComponent {
|
|
|
5247
5303
|
}
|
|
5248
5304
|
selectOption(option) {
|
|
5249
5305
|
if (!option.disabled && !this.disabled) {
|
|
5250
|
-
this.value = option.value;
|
|
5306
|
+
this.value = option.value();
|
|
5251
5307
|
this._onChange(this.value);
|
|
5252
5308
|
this.onChange.emit(this.value);
|
|
5253
5309
|
this.options.forEach((opt) => {
|
|
5254
|
-
opt.selected = opt.value === this.value;
|
|
5310
|
+
opt.selected = opt.value() === this.value;
|
|
5255
5311
|
});
|
|
5256
5312
|
}
|
|
5257
5313
|
}
|
|
@@ -5543,7 +5599,7 @@ class MonkeyPaginationSizeComponent {
|
|
|
5543
5599
|
this.id = this.id;
|
|
5544
5600
|
}
|
|
5545
5601
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyPaginationSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5546
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyPaginationSizeComponent, isStandalone: true, selector: "monkey-pagination-size", inputs: { size: "size", disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pagination-size" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationSize"], ngImport: i0, template: "<ng-content></ng-content>\n<monkey-form-field hideClear size=\"sm\">\n <monkey-select\n placeholder=\"''\"\n [ngModel]=\"size\"\n (onChange)=\"onChange.next($event)\"\n [disabled]=\"disabled\"\n [showSearch]=\"false\"\n >\n @for (item of sizes; track item) {\n <monkey-option [value]=\"item\">{{ item }}</monkey-option>\n }\n </monkey-select>\n</monkey-form-field>\n", styles: ["monkey-pagination-size{display:flex;align-items:center;gap:8px}monkey-pagination-size .mecx-form-field-body{height:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MonkeySelectComponent, selector: "monkey-select", inputs: ["tabIndex", "placeholder", "loading", "showSearch", "searchPlaceholder", "
|
|
5602
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyPaginationSizeComponent, isStandalone: true, selector: "monkey-pagination-size", inputs: { size: "size", disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pagination-size" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationSize"], ngImport: i0, template: "<ng-content></ng-content>\n<monkey-form-field hideClear size=\"sm\">\n <monkey-select\n placeholder=\"''\"\n [ngModel]=\"size\"\n (onChange)=\"onChange.next($event)\"\n [disabled]=\"disabled\"\n [showSearch]=\"false\"\n >\n @for (item of sizes; track item) {\n <monkey-option [value]=\"item\">{{ item }}</monkey-option>\n }\n </monkey-select>\n</monkey-form-field>\n", styles: ["monkey-pagination-size{display:flex;align-items:center;gap:8px}monkey-pagination-size .mecx-form-field-body{height:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MonkeySelectComponent, selector: "monkey-select", inputs: ["tabIndex", "placeholder", "loading", "showSearch", "searchPlaceholder", "type", "disabled", "required", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size"], exportAs: ["monkeyFormField"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5547
5603
|
}
|
|
5548
5604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyPaginationSizeComponent, decorators: [{
|
|
5549
5605
|
type: Component,
|