matcha-components 20.279.0 → 20.280.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 #customEditor class=\"pt-8 px-16 pb-12\" *ngIf=\"showingCustom\" [formGroup]=\"customForm\">\n <matcha-date-range>\n <matcha-form-field>\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>\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 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 #customEditor class=\"pt-8 px-16 pb-12\" *ngIf=\"showingCustom\" [formGroup]=\"customForm\">\n <matcha-date-range>\n <matcha-form-field>\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>\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 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]