matcha-components 20.280.0 → 20.281.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.
|
@@ -10509,7 +10509,7 @@ class MatchaPeriodComponent {
|
|
|
10509
10509
|
useExisting: forwardRef(() => MatchaPeriodComponent),
|
|
10510
10510
|
multi: true
|
|
10511
10511
|
}
|
|
10512
|
-
], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }, { propertyName: "customEditorRef", first: true, predicate: ["customEditor"], descendants: true }], ngImport: i0, template: "<div class=\"position-relative d-inline-block w-100-p\">\n <div class=\"matcha-period-trigger d-flex flex-align-center flex-space-between cursor-pointer\"\n [class.matcha-period-disabled]=\"isCurrentlyDisabled\" (click)=\"onTriggerClick()\"\n (keydown)=\"onTriggerKeyDown($event)\" [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\" role=\"combobox\"\n [attr.aria-expanded]=\"open\" [attr.aria-haspopup]=\"true\" [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n <span class=\"matcha-period-value\" [class.matcha-period-placeholder]=\"!hasValue\">\n {{ triggerLabel }}\n </span>\n\n <span class=\"matcha-period-arrow\" [class.matcha-period-arrow-open]=\"open\">\n <span class=\"i-matcha-action_arrow_down\"></span>\n </span>\n </div>\n\n <matcha-panel #panel [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\" [open]=\"open\"\n [portalToBody]=\"true\" [ignoreClickOutsideElements]=\"calendarOverlays\" (closed)=\"closePanel()\">\n\n <div class=\"py-4\" role=\"listbox\">\n <!-- Lista de presets -->\n <div *ngFor=\"let preset of presets; let i = index\" class=\"matcha-period-option\" role=\"option\"\n [class.matcha-period-option-selected]=\"isPresetSelected(preset)\"\n [class.matcha-period-option-active]=\"isActiveIndex(i)\" [attr.aria-selected]=\"isPresetSelected(preset)\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label }}\n </div>\n\n <!-- Op\u00E7\u00E3o \"Personalizado\" -->\n <ng-container *ngIf=\"allowCustom\">\n <matcha-divider gap=\"8\"></matcha-divider>\n\n <div class=\"matcha-period-option\" role=\"option\"\n [class.matcha-period-option-selected]=\"isCustomSelected || showingCustom\"\n [class.matcha-period-option-active]=\"isCustomActive\" [attr.aria-selected]=\"isCustomSelected\"\n (click)=\"toggleCustom()\">\n {{ customLabel }}\n </div>\n\n <!-- Editor de per\u00EDodo personalizado (reaproveita matcha-date-range + matcha-date) -->\n <div class=\"pt-8 px-16 pb-12\" *ngIf=\"showingCustom\" [formGroup]=\"customForm\">\n <matcha-date-range class=\"flex-wrap\">\n <matcha-form-field class=\"min-w-156\">\n <matcha-label>Data in\u00EDcio</matcha-label>\n <matcha-date formControlName=\"start\" placeholder=\"__/__/____\" [useNativePicker]=\"false\"\n [max]=\"customStartMax\" [suppressPanelGlobalClose]=\"true\"\n (calendarPanelOpened)=\"registerCalendarOverlay($event)\"></matcha-date>\n </matcha-form-field>\n <matcha-form-field class=\"min-w-156\">\n <matcha-label>Data fim</matcha-label>\n <matcha-date formControlName=\"end\" placeholder=\"__/__/____\" [useNativePicker]=\"false\"\n [min]=\"customEndMin\" [suppressPanelGlobalClose]=\"true\"\n (calendarPanelOpened)=\"registerCalendarOverlay($event)\"></matcha-date>\n </matcha-form-field>\n </matcha-date-range>\n\n <div class=\"color-red fs-12 mt-8\" *ngIf=\"customError\">{{ customError }}</div>\n\n <button matcha-button color=\"accent\" size=\"small\" type=\"button\" class=\"w-100-p mt-12\"\n (click)=\"applyCustom()\">\n Aplicar\n </button>\n </div>\n </ng-container>\n </div>\n </matcha-panel>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "widthMode", "offset", "triggerElement", "open", "hasOverlay", "ignoreClickOutsideElements", "suppressGlobalClose", "portalToBody"], outputs: ["opened", "closed"] }, { kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "gap", "color", "basic", "outline", "alpha", "pill", "link", "icon", "badge"] }, { kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "direction"] }, { kind: "component", type: MatchaDateComponent, selector: "matcha-date", inputs: ["placeholder", "min", "max", "disabled", "showNativePicker", "useNativePicker", "suppressPanelGlobalClose"], outputs: ["calendarPanelOpened", "calendarPanelClosed"] }, { kind: "component", type: MatchaDateRangeComponent, selector: "matcha-date-range" }, { kind: "component", type: MatchaFormFieldComponent, selector: "matcha-form-field", inputs: ["color", "size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl"] }, { kind: "component", type: MatchaLabelComponent, selector: "matcha-label", inputs: ["color"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
10512
|
+
], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }, { propertyName: "customEditorRef", first: true, predicate: ["customEditor"], descendants: true }], ngImport: i0, template: "<div class=\"position-relative d-inline-block w-100-p\">\n <div class=\"matcha-period-trigger d-flex flex-align-center flex-space-between cursor-pointer\"\n [class.matcha-period-disabled]=\"isCurrentlyDisabled\" (click)=\"onTriggerClick()\"\n (keydown)=\"onTriggerKeyDown($event)\" [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\" role=\"combobox\"\n [attr.aria-expanded]=\"open\" [attr.aria-haspopup]=\"true\" [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n <span class=\"matcha-period-value\" [class.matcha-period-placeholder]=\"!hasValue\">\n {{ triggerLabel }}\n </span>\n\n <span class=\"matcha-period-arrow\" [class.matcha-period-arrow-open]=\"open\">\n <span class=\"i-matcha-action_arrow_down\"></span>\n </span>\n </div>\n\n <matcha-panel #panel [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\" [open]=\"open\"\n [portalToBody]=\"true\" [ignoreClickOutsideElements]=\"calendarOverlays\" (closed)=\"closePanel()\">\n\n <div class=\"py-4\" role=\"listbox\">\n <!-- Lista de presets -->\n <div *ngFor=\"let preset of presets; let i = index\" class=\"matcha-period-option\" role=\"option\"\n [class.matcha-period-option-selected]=\"isPresetSelected(preset)\"\n [class.matcha-period-option-active]=\"isActiveIndex(i)\" [attr.aria-selected]=\"isPresetSelected(preset)\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label }}\n </div>\n\n <!-- Op\u00E7\u00E3o \"Personalizado\" -->\n <ng-container *ngIf=\"allowCustom\">\n <matcha-divider gap=\"8\"></matcha-divider>\n\n <div class=\"matcha-period-option\" role=\"option\"\n [class.matcha-period-option-selected]=\"isCustomSelected || showingCustom\"\n [class.matcha-period-option-active]=\"isCustomActive\" [attr.aria-selected]=\"isCustomSelected\"\n (click)=\"toggleCustom()\">\n {{ customLabel }}\n </div>\n\n <!-- Editor de per\u00EDodo personalizado (reaproveita matcha-date-range + matcha-date) -->\n <div #customEditor class=\"pt-8 px-16 pb-12\" *ngIf=\"showingCustom\" [formGroup]=\"customForm\">\n <matcha-date-range class=\"flex-wrap\">\n <matcha-form-field class=\"min-w-156\">\n <matcha-label>Data in\u00EDcio</matcha-label>\n <matcha-date formControlName=\"start\" placeholder=\"__/__/____\" [useNativePicker]=\"false\"\n [max]=\"customStartMax\" [suppressPanelGlobalClose]=\"true\"\n (calendarPanelOpened)=\"registerCalendarOverlay($event)\"></matcha-date>\n </matcha-form-field>\n <matcha-form-field class=\"min-w-156\">\n <matcha-label>Data fim</matcha-label>\n <matcha-date formControlName=\"end\" placeholder=\"__/__/____\" [useNativePicker]=\"false\"\n [min]=\"customEndMin\" [suppressPanelGlobalClose]=\"true\"\n (calendarPanelOpened)=\"registerCalendarOverlay($event)\"></matcha-date>\n </matcha-form-field>\n </matcha-date-range>\n\n <div class=\"color-red fs-12 mt-8\" *ngIf=\"customError\">{{ customError }}</div>\n\n <button matcha-button color=\"accent\" size=\"small\" type=\"button\" class=\"w-100-p mt-12\"\n (click)=\"applyCustom()\">\n Aplicar\n </button>\n </div>\n </ng-container>\n </div>\n </matcha-panel>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "widthMode", "offset", "triggerElement", "open", "hasOverlay", "ignoreClickOutsideElements", "suppressGlobalClose", "portalToBody"], outputs: ["opened", "closed"] }, { kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "gap", "color", "basic", "outline", "alpha", "pill", "link", "icon", "badge"] }, { kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "direction"] }, { kind: "component", type: MatchaDateComponent, selector: "matcha-date", inputs: ["placeholder", "min", "max", "disabled", "showNativePicker", "useNativePicker", "suppressPanelGlobalClose"], outputs: ["calendarPanelOpened", "calendarPanelClosed"] }, { kind: "component", type: MatchaDateRangeComponent, selector: "matcha-date-range" }, { kind: "component", type: MatchaFormFieldComponent, selector: "matcha-form-field", inputs: ["color", "size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl"] }, { kind: "component", type: MatchaLabelComponent, selector: "matcha-label", inputs: ["color"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
10513
10513
|
}
|
|
10514
10514
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatchaPeriodComponent, decorators: [{
|
|
10515
10515
|
type: Component,
|
|
@@ -10519,7 +10519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
10519
10519
|
useExisting: forwardRef(() => MatchaPeriodComponent),
|
|
10520
10520
|
multi: true
|
|
10521
10521
|
}
|
|
10522
|
-
], template: "<div class=\"position-relative d-inline-block w-100-p\">\n <div class=\"matcha-period-trigger d-flex flex-align-center flex-space-between cursor-pointer\"\n [class.matcha-period-disabled]=\"isCurrentlyDisabled\" (click)=\"onTriggerClick()\"\n (keydown)=\"onTriggerKeyDown($event)\" [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\" role=\"combobox\"\n [attr.aria-expanded]=\"open\" [attr.aria-haspopup]=\"true\" [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n <span class=\"matcha-period-value\" [class.matcha-period-placeholder]=\"!hasValue\">\n {{ triggerLabel }}\n </span>\n\n <span class=\"matcha-period-arrow\" [class.matcha-period-arrow-open]=\"open\">\n <span class=\"i-matcha-action_arrow_down\"></span>\n </span>\n </div>\n\n <matcha-panel #panel [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\" [open]=\"open\"\n [portalToBody]=\"true\" [ignoreClickOutsideElements]=\"calendarOverlays\" (closed)=\"closePanel()\">\n\n <div class=\"py-4\" role=\"listbox\">\n <!-- Lista de presets -->\n <div *ngFor=\"let preset of presets; let i = index\" class=\"matcha-period-option\" role=\"option\"\n [class.matcha-period-option-selected]=\"isPresetSelected(preset)\"\n [class.matcha-period-option-active]=\"isActiveIndex(i)\" [attr.aria-selected]=\"isPresetSelected(preset)\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label }}\n </div>\n\n <!-- Op\u00E7\u00E3o \"Personalizado\" -->\n <ng-container *ngIf=\"allowCustom\">\n <matcha-divider gap=\"8\"></matcha-divider>\n\n <div class=\"matcha-period-option\" role=\"option\"\n [class.matcha-period-option-selected]=\"isCustomSelected || showingCustom\"\n [class.matcha-period-option-active]=\"isCustomActive\" [attr.aria-selected]=\"isCustomSelected\"\n (click)=\"toggleCustom()\">\n {{ customLabel }}\n </div>\n\n <!-- Editor de per\u00EDodo personalizado (reaproveita matcha-date-range + matcha-date) -->\n <div class=\"pt-8 px-16 pb-12\" *ngIf=\"showingCustom\" [formGroup]=\"customForm\">\n <matcha-date-range class=\"flex-wrap\">\n <matcha-form-field class=\"min-w-156\">\n <matcha-label>Data in\u00EDcio</matcha-label>\n <matcha-date formControlName=\"start\" placeholder=\"__/__/____\" [useNativePicker]=\"false\"\n [max]=\"customStartMax\" [suppressPanelGlobalClose]=\"true\"\n (calendarPanelOpened)=\"registerCalendarOverlay($event)\"></matcha-date>\n </matcha-form-field>\n <matcha-form-field class=\"min-w-156\">\n <matcha-label>Data fim</matcha-label>\n <matcha-date formControlName=\"end\" placeholder=\"__/__/____\" [useNativePicker]=\"false\"\n [min]=\"customEndMin\" [suppressPanelGlobalClose]=\"true\"\n (calendarPanelOpened)=\"registerCalendarOverlay($event)\"></matcha-date>\n </matcha-form-field>\n </matcha-date-range>\n\n <div class=\"color-red fs-12 mt-8\" *ngIf=\"customError\">{{ customError }}</div>\n\n <button matcha-button color=\"accent\" size=\"small\" type=\"button\" class=\"w-100-p mt-12\"\n (click)=\"applyCustom()\">\n Aplicar\n </button>\n </div>\n </ng-container>\n </div>\n </matcha-panel>\n</div>\n" }]
|
|
10522
|
+
], template: "<div class=\"position-relative d-inline-block w-100-p\">\n <div class=\"matcha-period-trigger d-flex flex-align-center flex-space-between cursor-pointer\"\n [class.matcha-period-disabled]=\"isCurrentlyDisabled\" (click)=\"onTriggerClick()\"\n (keydown)=\"onTriggerKeyDown($event)\" [attr.tabindex]=\"isCurrentlyDisabled ? -1 : 0\" role=\"combobox\"\n [attr.aria-expanded]=\"open\" [attr.aria-haspopup]=\"true\" [attr.aria-disabled]=\"isCurrentlyDisabled\">\n\n <span class=\"matcha-period-value\" [class.matcha-period-placeholder]=\"!hasValue\">\n {{ triggerLabel }}\n </span>\n\n <span class=\"matcha-period-arrow\" [class.matcha-period-arrow-open]=\"open\">\n <span class=\"i-matcha-action_arrow_down\"></span>\n </span>\n </div>\n\n <matcha-panel #panel [placement]=\"placement\" [maxHeight]=\"maxHeight\" [minWidth]=\"minWidth\" [open]=\"open\"\n [portalToBody]=\"true\" [ignoreClickOutsideElements]=\"calendarOverlays\" (closed)=\"closePanel()\">\n\n <div class=\"py-4\" role=\"listbox\">\n <!-- Lista de presets -->\n <div *ngFor=\"let preset of presets; let i = index\" class=\"matcha-period-option\" role=\"option\"\n [class.matcha-period-option-selected]=\"isPresetSelected(preset)\"\n [class.matcha-period-option-active]=\"isActiveIndex(i)\" [attr.aria-selected]=\"isPresetSelected(preset)\"\n (click)=\"selectPreset(preset)\">\n {{ preset.label }}\n </div>\n\n <!-- Op\u00E7\u00E3o \"Personalizado\" -->\n <ng-container *ngIf=\"allowCustom\">\n <matcha-divider gap=\"8\"></matcha-divider>\n\n <div class=\"matcha-period-option\" role=\"option\"\n [class.matcha-period-option-selected]=\"isCustomSelected || showingCustom\"\n [class.matcha-period-option-active]=\"isCustomActive\" [attr.aria-selected]=\"isCustomSelected\"\n (click)=\"toggleCustom()\">\n {{ customLabel }}\n </div>\n\n <!-- Editor de per\u00EDodo personalizado (reaproveita matcha-date-range + matcha-date) -->\n <div #customEditor class=\"pt-8 px-16 pb-12\" *ngIf=\"showingCustom\" [formGroup]=\"customForm\">\n <matcha-date-range class=\"flex-wrap\">\n <matcha-form-field class=\"min-w-156\">\n <matcha-label>Data in\u00EDcio</matcha-label>\n <matcha-date formControlName=\"start\" placeholder=\"__/__/____\" [useNativePicker]=\"false\"\n [max]=\"customStartMax\" [suppressPanelGlobalClose]=\"true\"\n (calendarPanelOpened)=\"registerCalendarOverlay($event)\"></matcha-date>\n </matcha-form-field>\n <matcha-form-field class=\"min-w-156\">\n <matcha-label>Data fim</matcha-label>\n <matcha-date formControlName=\"end\" placeholder=\"__/__/____\" [useNativePicker]=\"false\"\n [min]=\"customEndMin\" [suppressPanelGlobalClose]=\"true\"\n (calendarPanelOpened)=\"registerCalendarOverlay($event)\"></matcha-date>\n </matcha-form-field>\n </matcha-date-range>\n\n <div class=\"color-red fs-12 mt-8\" *ngIf=\"customError\">{{ customError }}</div>\n\n <button matcha-button color=\"accent\" size=\"small\" type=\"button\" class=\"w-100-p mt-12\"\n (click)=\"applyCustom()\">\n Aplicar\n </button>\n </div>\n </ng-container>\n </div>\n </matcha-panel>\n</div>\n" }]
|
|
10523
10523
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { panel: [{
|
|
10524
10524
|
type: ViewChild,
|
|
10525
10525
|
args: [MatchaPanelComponent]
|