matcha-components 20.253.0 → 20.257.0

package/fesm2022/matcha-components.mjs

@@ -8343,6 +8343,7 @@ class MatchaTabItemComponent {
         this.icon = '';
         this._active = false;
         this._hasBeenActivated = false;
+        this._disabled = false;
     }
     set active(value) {
         this._active = value === '' || value === true || value === 'true';
@@ -8352,8 +8353,12 @@ class MatchaTabItemComponent {
     }
     get active() { return this._active; }
     get hasBeenActivated() { return this._hasBeenActivated; }
+    set disabled(value) {
+        this._disabled = value === '' || value === true || value === 'true';
+    }
+    get disabled() { return this._disabled; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaTabItemComponent, isStandalone: false, selector: "matcha-tab", inputs: { title: "title", icon: "icon", active: "active" }, ngImport: i0, template: "<div *ngIf=\"hasBeenActivated\" [hidden]=\"!active\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaTabItemComponent, isStandalone: false, selector: "matcha-tab", inputs: { title: "title", icon: "icon", active: "active", disabled: "disabled" }, ngImport: i0, template: "<div *ngIf=\"hasBeenActivated\" [hidden]=\"!active\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTabItemComponent, decorators: [{
             type: Component,
@@ -8364,6 +8369,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Input
             }], active: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }] } });
 
 class MatchaTabsComponent {
@@ -8400,7 +8407,7 @@ class MatchaTabsComponent {
     }
     /** Ativa uma tab por interação do usuário (emite eventos) */
     selectTab(tab) {
-        if (tab.active)
+        if (tab.active || tab.disabled)
             return;
         this.setActiveTab(tab);
         const index = this.tabs.toArray().indexOf(tab);
@@ -8445,11 +8452,11 @@ class MatchaTabsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaTabsComponent, isStandalone: false, selector: "matcha-tabs", inputs: { selectedIndex: "selectedIndex", activeTabIndex: "activeTabIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", tabSelected: "tabSelected" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, queries: [{ propertyName: "tabs", predicate: MatchaTabItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column gap-outside w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-md-128 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"color-fg fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }], animations: [...createAnimations] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MatchaTabsComponent, isStandalone: false, selector: "matcha-tabs", inputs: { selectedIndex: "selectedIndex", activeTabIndex: "activeTabIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", tabSelected: "tabSelected" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, queries: [{ propertyName: "tabs", predicate: MatchaTabItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column gap-outside w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-disabled]=\"tab.disabled || null\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [attr.disabled]=\"tab.disabled || null\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              {{tab.disabled ? 'cursor-not-allowed' : 'cursor-pointer'}} w-100-p min-w-md-128 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active && !tab.disabled ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" [color]=\"tab.disabled ? 'grey' : 'accent'\" size=\"md\"></matcha-icon>\n      <span class=\"{{tab.disabled ? 'color-grey' : 'color-fg'}} fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }], animations: [...createAnimations] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MatchaTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-tabs', animations: [...createAnimations], standalone: false, template: "<div class=\"flex-column gap-outside w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-md-128 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"color-fg fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'matcha-tabs', animations: [...createAnimations], standalone: false, template: "<div class=\"flex-column gap-outside w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-disabled]=\"tab.disabled || null\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [attr.disabled]=\"tab.disabled || null\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              {{tab.disabled ? 'cursor-not-allowed' : 'cursor-pointer'}} w-100-p min-w-md-128 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active && !tab.disabled ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" [color]=\"tab.disabled ? 'grey' : 'accent'\" size=\"md\"></matcha-icon>\n      <span class=\"{{tab.disabled ? 'color-grey' : 'color-fg'}} fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [MatchaTabItemComponent]
@@ -14595,74 +14602,111 @@ function buildSunEditorConfig(options = {}) {
     };
 }
 function _buildButtonList(opts) {
-    // Desktop toolbar — mirrors suneditor.html reference exactly
+    const formatGroup = _groupFormat(opts);
+    const textGroup = _groupText(opts);
+    const colorGroup = _groupColor(opts);
+    const indentGroup = _groupIndent(opts);
+    const insertGroup = _groupInsert(opts);
+    const viewGroup = _groupView(opts);
+    // Desktop toolbar
     const desktop = [['undo', 'redo']];
-    if (opts.showFormats || opts.showFont) {
-        desktop.push('|', ['blockStyle', 'font', 'fontSize']);
-    }
-    if (opts.showBold || opts.showItalic || opts.showUnderline || opts.showStrike) {
-        desktop.push('|', ['bold', 'italic', 'underline', 'strike']);
-    }
-    if (opts.showFontColor || opts.showHiliteColor) {
-        desktop.push('|', ['fontColor', 'backgroundColor']);
-    }
+    if (formatGroup.length)
+        desktop.push('|', formatGroup);
+    if (textGroup.length)
+        desktop.push('|', textGroup);
+    if (colorGroup.length)
+        desktop.push('|', colorGroup);
     desktop.push('|', ['removeFormat'], '/');
-    if (opts.showInOutDent || opts.showAlign || opts.showList) {
-        desktop.push(['outdent', 'indent', 'align', 'list']);
-    }
-    if (opts.showTable || opts.showLink || opts.showImage || opts.showVideo) {
-        desktop.push('|', ['table', 'link', 'image', 'video']);
-    }
-    const viewBtns = [
+    if (indentGroup.length)
+        desktop.push(indentGroup);
+    if (insertGroup.length)
+        desktop.push('|', insertGroup);
+    if (viewGroup.length)
+        desktop.push('|', viewGroup);
+    // %992: format group collapses into a "more" dropdown
+    const bp992 = [['undo', 'redo'], '|'];
+    if (formatGroup.length)
+        bp992.push([':Format-default.more_paragraph', ...formatGroup]);
+    if (textGroup.length)
+        bp992.push(textGroup);
+    if (colorGroup.length)
+        bp992.push('|', colorGroup);
+    bp992.push('|', ['removeFormat']);
+    if (indentGroup.length)
+        bp992.push('|', indentGroup);
+    if (insertGroup.length)
+        bp992.push('|', insertGroup);
+    if (viewGroup.length)
+        bp992.push('|', viewGroup);
+    // %768: removeFormat moves inside format dropdown; insert collapses
+    const bp768 = [['undo', 'redo'], '|'];
+    if (formatGroup.length) {
+        bp768.push([':Format-default.more_paragraph', ...formatGroup, '|', 'removeFormat']);
+    }
+    else {
+        bp768.push(['removeFormat']);
+    }
+    if (textGroup.length)
+        bp768.push(textGroup);
+    if (colorGroup.length)
+        bp768.push('|', colorGroup);
+    if (indentGroup.length)
+        bp768.push(indentGroup);
+    if (insertGroup.length)
+        bp768.push('|', [':Insert-default.more_plus', ...insertGroup]);
+    if (viewGroup.length)
+        bp768.push('|', viewGroup);
+    // %576: text+color+removeFormat collapse into one dropdown
+    const bp576 = [['undo', 'redo'], '|'];
+    if (formatGroup.length)
+        bp576.push([':Format-default.more_paragraph', ...formatGroup]);
+    if (textGroup.length || colorGroup.length) {
+        const combined = [':Text-default.more_text', ...textGroup];
+        if (colorGroup.length)
+            combined.push('|', ...colorGroup);
+        combined.push('|', 'removeFormat');
+        bp576.push(combined);
+    }
+    else {
+        bp576.push(['removeFormat']);
+    }
+    if (indentGroup.length)
+        bp576.push(indentGroup);
+    if (insertGroup.length)
+        bp576.push('|', [':Insert-default.more_plus', ...insertGroup]);
+    if (viewGroup.length)
+        bp576.push(['-right', ...viewGroup]);
+    return [
+        ...desktop,
+        ['%992', bp992],
+        ['%768', bp768],
+        ['%576', bp576],
+    ];
+}
+function _groupFormat(opts) {
+    return (opts.showFormats || opts.showFont) ? ['blockStyle', 'font', 'fontSize'] : [];
+}
+function _groupText(opts) {
+    return (opts.showBold || opts.showItalic || opts.showUnderline || opts.showStrike)
+        ? ['bold', 'italic', 'underline', 'strike'] : [];
+}
+function _groupColor(opts) {
+    return (opts.showFontColor || opts.showHiliteColor) ? ['fontColor', 'backgroundColor'] : [];
+}
+function _groupIndent(opts) {
+    return (opts.showInOutDent || opts.showAlign || opts.showList)
+        ? ['outdent', 'indent', 'align', 'list'] : [];
+}
+function _groupInsert(opts) {
+    return (opts.showTable || opts.showLink || opts.showImage || opts.showVideo)
+        ? ['table', 'link', 'image', 'video'] : [];
+}
+function _groupView(opts) {
+    return [
         ...(opts.showFullScreen ? ['fullScreen'] : []),
         ...(opts.showCodeView ? ['codeView'] : []),
         ...(opts.showMarkdown ? ['markdownView'] : []),
     ];
-    if (viewBtns.length)
-        desktop.push('|', viewBtns);
-    // Responsive breakpoints — mirrors suneditor.html reference exactly
-    return [
-        ...desktop,
-        ['%992', [
-                ['undo', 'redo'],
-                '|',
-                [':Format-default.more_paragraph', 'blockStyle', 'font', 'fontSize'],
-                ['bold', 'italic', 'underline', 'strike'],
-                '|',
-                ['fontColor', 'backgroundColor'],
-                '|',
-                ['removeFormat'],
-                '|',
-                ['outdent', 'indent', 'align', 'list'],
-                '|',
-                ['table', 'link', 'image', 'video'],
-                '|',
-                ['fullScreen', 'codeView', 'markdownView'],
-            ]],
-        ['%768', [
-                ['undo', 'redo'],
-                '|',
-                [':Format-default.more_paragraph', 'blockStyle', 'font', 'fontSize', '|', 'removeFormat'],
-                ['bold', 'italic', 'underline', 'strike'],
-                '|',
-                ['fontColor', 'backgroundColor'],
-                ['outdent', 'indent', 'align', 'list'],
-                '|',
-                [':Insert-default.more_plus', 'table', 'link', 'image', 'video'],
-                '|',
-                ['fullScreen', 'codeView', 'markdownView'],
-            ]],
-        ['%576', [
-                ['undo', 'redo'],
-                '|',
-                [':Format-default.more_paragraph', 'blockStyle', 'font', 'fontSize'],
-                [':Text-default.more_text', 'bold', 'italic', 'underline', 'strike', '|', 'fontColor', 'backgroundColor', '|', 'removeFormat'],
-                ['outdent', 'indent', 'align', 'list'],
-                '|',
-                [':Insert-default.more_plus', 'table', 'link', 'image', 'video'],
-                ['-right', 'fullScreen', 'codeView', 'markdownView'],
-            ]],
-    ];
 }
 
 class MatchaSkeletonComponent {