@sd-angular/core 19.0.33 → 19.0.34

package/fesm2022/sd-angular-core-components-table.mjs

@@ -1150,11 +1150,11 @@ class SelectorActionComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectorActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SelectorActionComponent, isStandalone: true, selector: "selector-action", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, tableOption: { classPropertyName: "tableOption", publicName: "tableOption", isSignal: true, isRequired: false, transformFunction: null }, selectedTableItems: { classPropertyName: "selectedTableItems", publicName: "selectedTableItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clear: "clear" }, ngImport: i0, template: "@if (compactActionBar()) {\n  @let _autoId = autoId();\n  @let _direct = directActions();\n  @let _overflow = overflowActions();\n  @if (opened()) {\n    <sd-quick-action opened contained>\n      <div class=\"sd-selection-message\" sdMessage role=\"status\">\n        <span class=\"sd-selection-icon\" aria-hidden=\"true\"><mat-icon>check_circle_outline</mat-icon></span>\n        <span>{{ message() }}</span>\n      </div>\n      <div class=\"sd-selection-actions\" sdAction>\n        @for (entry of _direct; track entry.index) {\n          @let action = entry.action;\n          @if (action.variant === 'normal') {\n            <sd-button\n              class=\"sd-selection-direct\"\n              size=\"sm\"\n              [autoId]=\"_autoId ? _autoId + '-action-' + entry.index : null\"\n              [tooltip]=\"action.tooltip\"\n              [prefixIcon]=\"action.icon\"\n              [color]=\"action.color\"\n              [type]=\"action.type || 'light'\"\n              [fontSet]=\"action.fontSet\"\n              [title]=\"action.title\"\n              (click)=\"onClickAction(action)\" />\n          } @else {\n            <sd-button\n              class=\"sd-selection-direct\"\n              size=\"sm\"\n              [autoId]=\"_autoId ? _autoId + '-action-' + entry.index : null\"\n              [tooltip]=\"action.tooltip\"\n              [prefixIcon]=\"action.icon || 'more_horiz'\"\n              [color]=\"action.color || 'secondary'\"\n              [type]=\"action.type || 'light'\"\n              [fontSet]=\"action.fontSet\"\n              [title]=\"action.title\"\n              [matMenuTriggerFor]=\"childrenMenu\" />\n            <mat-menu #childrenMenu=\"matMenu\">\n              @for (child of action.children; track $index) {\n                <button\n                  mat-menu-item\n                  type=\"button\"\n                  [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null\"\n                  (click)=\"onClickAction(child)\">\n                  @if (child.icon) {\n                    <mat-icon class=\"sd-selection-menu-icon\" [fontSet]=\"child.fontSet\" [color]=\"child.color\">{{ child.icon }}</mat-icon>\n                  }\n                  <span>{{ child.title }}</span>\n                </button>\n              }\n            </mat-menu>\n          }\n        }\n        @if (_overflow.length) {\n          <sd-button\n            class=\"sd-selection-more\"\n            size=\"sm\"\n            prefixIcon=\"more_horiz\"\n            [title]=\"moreLabel()\"\n            color=\"secondary\"\n            type=\"light\"\n            [autoId]=\"_autoId ? _autoId + '-more-actions' : null\"\n            [matMenuTriggerFor]=\"moreMenu\" />\n          <mat-menu #moreMenu=\"matMenu\">\n            @for (entry of _overflow; track entry.index) {\n              @let action = entry.action;\n              @if (action.variant === 'normal') {\n                <button\n                  mat-menu-item\n                  type=\"button\"\n                  [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + entry.index : null\"\n                  (click)=\"onClickAction(action)\">\n                  @if (action.icon) {\n                    <mat-icon class=\"sd-selection-menu-icon\" [fontSet]=\"action.fontSet\" [color]=\"action.color\">{{ action.icon }}</mat-icon>\n                  }\n                  <span>{{ action.title }}</span>\n                </button>\n              } @else {\n                <div role=\"group\" [attr.aria-label]=\"action.title\">\n                  <div class=\"sd-selection-menu-heading\">{{ action.title }}</div>\n                  @for (child of action.children; track $index) {\n                    <button\n                      mat-menu-item\n                      type=\"button\"\n                      [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null\"\n                      (click)=\"onClickAction(child)\">\n                      @if (child.icon) {\n                        <mat-icon class=\"sd-selection-menu-icon\" [fontSet]=\"child.fontSet\" [color]=\"child.color\">{{ child.icon }}</mat-icon>\n                      }\n                      <span>{{ child.title }}</span>\n                    </button>\n                  }\n                </div>\n              }\n            }\n          </mat-menu>\n        }\n        <button\n          type=\"button\"\n          class=\"sd-selection-clear\"\n          [attr.aria-label]=\"clearLabel()\"\n          [attr.data-autoid]=\"_autoId ? 'components-button-' + _autoId + '-clear-selection' : null\"\n          (click)=\"onClear()\">\n          <mat-icon aria-hidden=\"true\">close</mat-icon>\n        </button>\n      </div>\n    </sd-quick-action>\n  }\n} @else {\n  @let _actions = actions();\n  @let _selectedTableItems = selectedTableItems();\n  @let _autoId = autoId();\n\n  <sd-quick-action class=\"sd-selection-classic\" [opened]=\"opened()\">\n    <div class=\"d-flex align-items-center\" sdMessage>\n      <div class=\"c-bg-length\">\n        <span class=\"c-length\">{{ _selectedTableItems?.length }}</span>\n      </div>\n      <div class=\"c-message\">\n        {{ message() }}\n      </div>\n    </div>\n\n    <div class=\"sd-selection-classic-actions d-flex align-items-center mr-8\" sdAction>\n      @for (action of _actions; track $index) {\n        @if (action.variant === 'normal') {\n          <sd-button\n            [autoId]=\"_autoId ? _autoId + '-action-' + $index : null\"\n            class=\"ml-4\"\n            [tooltip]=\"action.tooltip\"\n            [prefixIcon]=\"action.icon\"\n            [color]=\"action.color\"\n            [type]=\"action.type || 'light'\"\n            [fontSet]=\"action.fontSet\"\n            [title]=\"action.title\"\n            (click)=\"onClickAction(action)\"></sd-button>\n        } @else if (action.variant === 'children') {\n          @let _actionIndex = $index;\n          <sd-button\n            [autoId]=\"_autoId ? _autoId + '-action-' + _actionIndex : null\"\n            class=\"ml-4\"\n            [tooltip]=\"action.tooltip\"\n            [prefixIcon]=\"action.icon || 'more_vert'\"\n            [color]=\"action.color || 'secondary'\"\n            [type]=\"action.type || 'light'\"\n            [fontSet]=\"action.fontSet || 'material-icons-outlined'\"\n            [title]=\"action.title\"\n            [matMenuTriggerFor]=\"menu\">\n          </sd-button>\n          <mat-menu #menu=\"matMenu\">\n            <span>\n              @for (child of action.children; track $index) {\n                <button\n                  mat-menu-item\n                  type=\"button\"\n                  [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + _actionIndex + '-' + $index : null\"\n                  (click)=\"onClickAction(child)\">\n                  @if (child.icon) {\n                    <mat-icon [fontSet]=\"child.fontSet || 'material-icons-outlined'\" class=\"c-icon\">{{ child.icon }}</mat-icon>\n                  }\n                  <span> {{ child.title }}</span>\n                </button>\n              }\n            </span>\n          </mat-menu>\n        }\n      }\n      <!-- N\u00FAt close lu\u00F4n hi\u1EC7n k\u1EC3 c\u1EA3 kh\u00F4ng c\u00F3 action \u2014 \u0111\u1EA3m b\u1EA3o user c\u00F3 l\u1ED1i tho\u00E1t clear selection -->\n      <button\n        mat-stroked-button\n        type=\"button\"\n        class=\"sd-selection-classic-clear ml-4\"\n        [attr.data-autoid]=\"_autoId ? 'components-button-' + _autoId + '-clear-selection' : null\"\n        [attr.aria-label]=\"clearLabel()\"\n        (click)=\"onClear()\">\n        <mat-icon aria-hidden=\"true\">close</mat-icon>\n      </button>\n    </div>\n  </sd-quick-action>\n}\n", styles: [":host{display:block;flex-shrink:0;min-width:0}.sd-selection-message{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;line-height:20px}.sd-selection-message>span:last-child{overflow-wrap:anywhere}.sd-selection-icon{display:flex;align-items:center;justify-content:center;flex:0 0 28px;height:28px;border-radius:8px;background:var(--sd-success-light, #e8f5e9);color:var(--sd-success-dark, #2e7d32)}.sd-selection-icon sd-icon,.sd-selection-icon mat-icon{width:18px;height:18px;font-size:18px}.sd-selection-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.sd-selection-clear{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;height:32px;border:0;border-radius:8px;color:var(--sd-text-secondary, #62676d);background:transparent;cursor:pointer}.sd-selection-clear:hover{background:var(--sd-surface-variant, #eef0f3)}.sd-selection-clear:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.sd-selection-clear sd-icon,.sd-selection-clear mat-icon{width:18px;height:18px;font-size:18px}.sd-selection-menu-icon{margin-right:12px;vertical-align:middle}.sd-selection-menu-heading{padding:8px 16px 4px;color:var(--sd-text-secondary, #62676d);font-size:12px;font-weight:600}:host ::ng-deep sd-quick-action .c-quick-action.contained{flex-wrap:nowrap;gap:16px;padding:10px 12px;margin:8px 0;border:1px solid var(--sd-border, #dfe2e7);border-radius:10px;box-shadow:none}:host ::ng-deep sd-quick-action .c-quick-action.contained .c-quick-action-action{flex:0 0 auto!important}@media(max-width:600px){:host ::ng-deep sd-quick-action .c-quick-action.contained{flex-wrap:wrap;gap:8px}:host ::ng-deep sd-quick-action .c-quick-action.contained .c-quick-action-action{flex:1 1 100%!important}.sd-selection-actions{width:100%;gap:6px}.sd-selection-message{padding-right:36px}.sd-selection-actions sd-button{flex:1 1 auto}:host ::ng-deep .sd-selection-actions sd-button button{width:100%;min-height:40px}.sd-selection-clear{position:absolute;top:4px;right:8px;width:40px;flex-basis:40px;height:40px}}.c-bg-length{display:flex;flex-direction:column;align-items:flex-start;padding:12px 8px;position:static;width:auto;min-width:48px;height:48px;left:0;top:0;background:var(--sd-success-dark, #2e7d32);border-radius:4px 0 0 4px}.c-bg-length .c-length{position:static;width:auto;min-width:32px;height:24px;left:8px;top:12px;font-family:Roboto;font-style:normal;font-weight:500;font-size:16px;line-height:24px;text-align:center;color:#fff}.c-message{position:static;min-width:200px;height:auto;left:0;top:6px;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#000;margin:0 0 0 8px;overflow-wrap:anywhere}:host ::ng-deep .sd-selection-classic .c-quick-action{flex-wrap:wrap;row-gap:4px}:host ::ng-deep .sd-selection-classic .c-quick-action .c-quick-action-action{flex:0 1 auto;min-width:0;max-width:100%}.sd-selection-classic-actions{flex-wrap:wrap;row-gap:4px;min-width:0;padding-block:4px}.sd-selection-classic-clear{flex:0 0 35px;min-width:35px;width:35px;height:36px;padding:0;color:var(--sd-text-secondary, #62676d)}.sd-selection-classic-clear mat-icon{margin:0}@media(max-width:600px){:host ::ng-deep .sd-selection-classic .c-quick-action{flex-wrap:wrap;gap:8px;padding-bottom:8px}:host ::ng-deep .sd-selection-classic .c-quick-action .c-quick-action-action{flex:1 1 100%;min-width:0}.sd-selection-classic-actions{flex-wrap:wrap;gap:4px;min-width:0}.c-message{min-width:0;height:auto;overflow-wrap:anywhere}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdQuickAction, selector: "sd-quick-action", inputs: ["opened", "contained"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SelectorActionComponent, isStandalone: true, selector: "selector-action", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, tableOption: { classPropertyName: "tableOption", publicName: "tableOption", isSignal: true, isRequired: false, transformFunction: null }, selectedTableItems: { classPropertyName: "selectedTableItems", publicName: "selectedTableItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clear: "clear" }, ngImport: i0, template: "@if (compactActionBar()) {\n  @let _autoId = autoId();\n  @let _direct = directActions();\n  @let _overflow = overflowActions();\n  @if (opened()) {\n    <sd-quick-action opened contained>\n      <div class=\"sd-selection-message\" sdMessage role=\"status\">\n        <span class=\"sd-selection-icon\" aria-hidden=\"true\"><mat-icon>check_circle_outline</mat-icon></span>\n        <span>{{ message() }}</span>\n      </div>\n      <div class=\"sd-selection-actions\" sdAction>\n        @for (entry of _direct; track entry.index) {\n          @let action = entry.action;\n          @if (action.variant === 'normal') {\n            <sd-button\n              class=\"sd-selection-direct\"\n              size=\"sm\"\n              [autoId]=\"_autoId ? _autoId + '-action-' + entry.index : null\"\n              [tooltip]=\"action.tooltip\"\n              [prefixIcon]=\"action.icon\"\n              [color]=\"action.color\"\n              [type]=\"action.type || 'light'\"\n              [fontSet]=\"action.fontSet\"\n              [title]=\"action.title\"\n              (click)=\"onClickAction(action)\" />\n          } @else {\n            <sd-button\n              class=\"sd-selection-direct\"\n              size=\"sm\"\n              [autoId]=\"_autoId ? _autoId + '-action-' + entry.index : null\"\n              [tooltip]=\"action.tooltip\"\n              [prefixIcon]=\"action.icon || 'more_horiz'\"\n              [color]=\"action.color || 'secondary'\"\n              [type]=\"action.type || 'light'\"\n              [fontSet]=\"action.fontSet\"\n              [title]=\"action.title\"\n              [matMenuTriggerFor]=\"childrenMenu\" />\n            <mat-menu #childrenMenu=\"matMenu\">\n              @for (child of action.children; track $index) {\n                <button\n                  mat-menu-item\n                  type=\"button\"\n                  [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null\"\n                  (click)=\"onClickAction(child)\">\n                  @if (child.icon) {\n                    <mat-icon class=\"sd-selection-menu-icon\" [fontSet]=\"child.fontSet\" [color]=\"child.color\">{{ child.icon }}</mat-icon>\n                  }\n                  <span>{{ child.title }}</span>\n                </button>\n              }\n            </mat-menu>\n          }\n        }\n        @if (_overflow.length) {\n          <sd-button\n            class=\"sd-selection-more\"\n            size=\"sm\"\n            prefixIcon=\"more_horiz\"\n            [title]=\"moreLabel()\"\n            color=\"secondary\"\n            type=\"light\"\n            [autoId]=\"_autoId ? _autoId + '-more-actions' : null\"\n            [matMenuTriggerFor]=\"moreMenu\" />\n          <mat-menu #moreMenu=\"matMenu\">\n            @for (entry of _overflow; track entry.index) {\n              @let action = entry.action;\n              @if (action.variant === 'normal') {\n                <button\n                  mat-menu-item\n                  type=\"button\"\n                  [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + entry.index : null\"\n                  (click)=\"onClickAction(action)\">\n                  @if (action.icon) {\n                    <mat-icon class=\"sd-selection-menu-icon\" [fontSet]=\"action.fontSet\" [color]=\"action.color\">{{ action.icon }}</mat-icon>\n                  }\n                  <span>{{ action.title }}</span>\n                </button>\n              } @else {\n                <div role=\"group\" [attr.aria-label]=\"action.title\">\n                  <div class=\"sd-selection-menu-heading\">{{ action.title }}</div>\n                  @for (child of action.children; track $index) {\n                    <button\n                      mat-menu-item\n                      type=\"button\"\n                      [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null\"\n                      (click)=\"onClickAction(child)\">\n                      @if (child.icon) {\n                        <mat-icon class=\"sd-selection-menu-icon\" [fontSet]=\"child.fontSet\" [color]=\"child.color\">{{ child.icon }}</mat-icon>\n                      }\n                      <span>{{ child.title }}</span>\n                    </button>\n                  }\n                </div>\n              }\n            }\n          </mat-menu>\n        }\n        <button\n          type=\"button\"\n          class=\"sd-selection-clear\"\n          [attr.aria-label]=\"clearLabel()\"\n          [attr.data-autoid]=\"_autoId ? 'components-button-' + _autoId + '-clear-selection' : null\"\n          (click)=\"onClear()\">\n          <mat-icon aria-hidden=\"true\">close</mat-icon>\n        </button>\n      </div>\n    </sd-quick-action>\n  }\n} @else {\n  @let _actions = actions();\n  @let _selectedTableItems = selectedTableItems();\n  @let _autoId = autoId();\n\n  <sd-quick-action class=\"sd-selection-classic\" [opened]=\"opened()\">\n    <div class=\"d-flex align-items-center\" sdMessage>\n      <div class=\"c-bg-length\">\n        <span class=\"c-length\">{{ _selectedTableItems?.length }}</span>\n      </div>\n      <div class=\"c-message\">\n        {{ message() }}\n      </div>\n    </div>\n\n    <div class=\"sd-selection-classic-actions d-flex align-items-center mr-8\" sdAction>\n      @for (action of _actions; track $index) {\n        @if (action.variant === 'normal') {\n          <sd-button\n            [autoId]=\"_autoId ? _autoId + '-action-' + $index : null\"\n            class=\"ml-4\"\n            [tooltip]=\"action.tooltip\"\n            [prefixIcon]=\"action.icon\"\n            [color]=\"action.color\"\n            [type]=\"action.type || 'light'\"\n            [fontSet]=\"action.fontSet\"\n            [title]=\"action.title\"\n            (click)=\"onClickAction(action)\"></sd-button>\n        } @else if (action.variant === 'children') {\n          @let _actionIndex = $index;\n          <sd-button\n            [autoId]=\"_autoId ? _autoId + '-action-' + _actionIndex : null\"\n            class=\"ml-4\"\n            [tooltip]=\"action.tooltip\"\n            [prefixIcon]=\"action.icon || 'more_vert'\"\n            [color]=\"action.color || 'secondary'\"\n            [type]=\"action.type || 'light'\"\n            [fontSet]=\"action.fontSet || 'material-icons-outlined'\"\n            [title]=\"action.title\"\n            [matMenuTriggerFor]=\"menu\">\n          </sd-button>\n          <mat-menu #menu=\"matMenu\">\n            <span>\n              @for (child of action.children; track $index) {\n                <button\n                  mat-menu-item\n                  type=\"button\"\n                  [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + _actionIndex + '-' + $index : null\"\n                  (click)=\"onClickAction(child)\">\n                  @if (child.icon) {\n                    <mat-icon [fontSet]=\"child.fontSet || 'material-icons-outlined'\" class=\"c-icon\">{{ child.icon }}</mat-icon>\n                  }\n                  <span> {{ child.title }}</span>\n                </button>\n              }\n            </span>\n          </mat-menu>\n        }\n      }\n      <!-- N\u00FAt close lu\u00F4n hi\u1EC7n k\u1EC3 c\u1EA3 kh\u00F4ng c\u00F3 action \u2014 \u0111\u1EA3m b\u1EA3o user c\u00F3 l\u1ED1i tho\u00E1t clear selection -->\n      <button\n        mat-stroked-button\n        type=\"button\"\n        class=\"sd-selection-classic-clear ml-4\"\n        [attr.data-autoid]=\"_autoId ? 'components-button-' + _autoId + '-clear-selection' : null\"\n        [attr.aria-label]=\"clearLabel()\"\n        (click)=\"onClear()\">\n        <mat-icon aria-hidden=\"true\">close</mat-icon>\n      </button>\n    </div>\n  </sd-quick-action>\n}\n", styles: [":host{display:block;flex-shrink:0;min-width:0}.sd-selection-message{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;line-height:20px}.sd-selection-message>span:last-child{overflow-wrap:anywhere}.sd-selection-icon{display:flex;align-items:center;justify-content:center;flex:0 0 28px;height:28px;border-radius:8px;background:var(--sd-success-light, #e8f5e9);color:var(--sd-success-dark, #2e7d32)}.sd-selection-icon sd-icon,.sd-selection-icon mat-icon{width:18px;height:18px;font-size:18px}.sd-selection-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.sd-selection-clear{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;height:32px;border:0;border-radius:8px;color:var(--sd-text-secondary, #62676d);background:transparent;cursor:pointer}.sd-selection-clear:hover{background:var(--sd-surface-variant, #eef0f3)}.sd-selection-clear:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.sd-selection-clear sd-icon,.sd-selection-clear mat-icon{width:18px;height:18px;font-size:18px}.sd-selection-menu-icon{margin-right:12px;vertical-align:middle}.sd-selection-menu-heading{padding:8px 16px 4px;color:var(--sd-text-secondary, #62676d);font-size:12px;font-weight:600}:host ::ng-deep sd-quick-action .c-quick-action.contained{flex-wrap:nowrap;gap:16px;padding:10px 12px;margin:8px 0;border:1px solid var(--sd-border, #dfe2e7);border-radius:10px;box-shadow:none}:host ::ng-deep sd-quick-action .c-quick-action.contained .c-quick-action-action{flex:0 0 auto!important}@media(max-width:600px){:host ::ng-deep sd-quick-action .c-quick-action.contained{flex-wrap:wrap;gap:8px}:host ::ng-deep sd-quick-action .c-quick-action.contained .c-quick-action-action{flex:1 1 100%!important}.sd-selection-actions{width:100%;gap:6px}.sd-selection-message{padding-right:36px}.sd-selection-actions sd-button{flex:1 1 auto}:host ::ng-deep .sd-selection-actions sd-button button{width:100%;min-height:40px}.sd-selection-clear{position:absolute;top:4px;right:8px;width:40px;flex-basis:40px;height:40px}}.c-bg-length{display:flex;flex-direction:column;align-items:flex-start;padding:12px 8px;position:static;width:auto;min-width:48px;height:48px;left:0;top:0;background:var(--sd-primary, #2a66f4);border-radius:4px 0 0 4px}.c-bg-length .c-length{position:static;width:auto;min-width:32px;height:24px;left:8px;top:12px;font-family:Roboto;font-style:normal;font-weight:500;font-size:16px;line-height:24px;text-align:center;color:#fff}.c-message{position:static;min-width:200px;height:auto;left:0;top:6px;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#000;margin:0 0 0 8px;overflow-wrap:anywhere}:host ::ng-deep .sd-selection-classic .c-quick-action{flex-wrap:wrap;row-gap:4px}:host ::ng-deep .sd-selection-classic .c-quick-action .c-quick-action-action{flex:0 1 auto;min-width:0;max-width:100%}.sd-selection-classic-actions{flex-wrap:wrap;row-gap:4px;min-width:0;padding-block:4px}.sd-selection-classic-clear{flex:0 0 35px;min-width:35px;width:35px;height:36px;padding:0;color:var(--sd-text-secondary, #62676d)}.sd-selection-classic-clear mat-icon{margin:0}@media(max-width:600px){:host ::ng-deep .sd-selection-classic .c-quick-action{flex-wrap:wrap;gap:8px;padding-bottom:8px}:host ::ng-deep .sd-selection-classic .c-quick-action .c-quick-action-action{flex:1 1 100%;min-width:0}.sd-selection-classic-actions{flex-wrap:wrap;gap:4px;min-width:0}.c-message{min-width:0;height:auto;overflow-wrap:anywhere}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdQuickAction, selector: "sd-quick-action", inputs: ["opened", "contained"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SelectorActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'selector-action', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, MatButtonModule, MatMenuModule, SdButton, SdQuickAction], template: "@if (compactActionBar()) {\n  @let _autoId = autoId();\n  @let _direct = directActions();\n  @let _overflow = overflowActions();\n  @if (opened()) {\n    <sd-quick-action opened contained>\n      <div class=\"sd-selection-message\" sdMessage role=\"status\">\n        <span class=\"sd-selection-icon\" aria-hidden=\"true\"><mat-icon>check_circle_outline</mat-icon></span>\n        <span>{{ message() }}</span>\n      </div>\n      <div class=\"sd-selection-actions\" sdAction>\n        @for (entry of _direct; track entry.index) {\n          @let action = entry.action;\n          @if (action.variant === 'normal') {\n            <sd-button\n              class=\"sd-selection-direct\"\n              size=\"sm\"\n              [autoId]=\"_autoId ? _autoId + '-action-' + entry.index : null\"\n              [tooltip]=\"action.tooltip\"\n              [prefixIcon]=\"action.icon\"\n              [color]=\"action.color\"\n              [type]=\"action.type || 'light'\"\n              [fontSet]=\"action.fontSet\"\n              [title]=\"action.title\"\n              (click)=\"onClickAction(action)\" />\n          } @else {\n            <sd-button\n              class=\"sd-selection-direct\"\n              size=\"sm\"\n              [autoId]=\"_autoId ? _autoId + '-action-' + entry.index : null\"\n              [tooltip]=\"action.tooltip\"\n              [prefixIcon]=\"action.icon || 'more_horiz'\"\n              [color]=\"action.color || 'secondary'\"\n              [type]=\"action.type || 'light'\"\n              [fontSet]=\"action.fontSet\"\n              [title]=\"action.title\"\n              [matMenuTriggerFor]=\"childrenMenu\" />\n            <mat-menu #childrenMenu=\"matMenu\">\n              @for (child of action.children; track $index) {\n                <button\n                  mat-menu-item\n                  type=\"button\"\n                  [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null\"\n                  (click)=\"onClickAction(child)\">\n                  @if (child.icon) {\n                    <mat-icon class=\"sd-selection-menu-icon\" [fontSet]=\"child.fontSet\" [color]=\"child.color\">{{ child.icon }}</mat-icon>\n                  }\n                  <span>{{ child.title }}</span>\n                </button>\n              }\n            </mat-menu>\n          }\n        }\n        @if (_overflow.length) {\n          <sd-button\n            class=\"sd-selection-more\"\n            size=\"sm\"\n            prefixIcon=\"more_horiz\"\n            [title]=\"moreLabel()\"\n            color=\"secondary\"\n            type=\"light\"\n            [autoId]=\"_autoId ? _autoId + '-more-actions' : null\"\n            [matMenuTriggerFor]=\"moreMenu\" />\n          <mat-menu #moreMenu=\"matMenu\">\n            @for (entry of _overflow; track entry.index) {\n              @let action = entry.action;\n              @if (action.variant === 'normal') {\n                <button\n                  mat-menu-item\n                  type=\"button\"\n                  [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + entry.index : null\"\n                  (click)=\"onClickAction(action)\">\n                  @if (action.icon) {\n                    <mat-icon class=\"sd-selection-menu-icon\" [fontSet]=\"action.fontSet\" [color]=\"action.color\">{{ action.icon }}</mat-icon>\n                  }\n                  <span>{{ action.title }}</span>\n                </button>\n              } @else {\n                <div role=\"group\" [attr.aria-label]=\"action.title\">\n                  <div class=\"sd-selection-menu-heading\">{{ action.title }}</div>\n                  @for (child of action.children; track $index) {\n                    <button\n                      mat-menu-item\n                      type=\"button\"\n                      [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null\"\n                      (click)=\"onClickAction(child)\">\n                      @if (child.icon) {\n                        <mat-icon class=\"sd-selection-menu-icon\" [fontSet]=\"child.fontSet\" [color]=\"child.color\">{{ child.icon }}</mat-icon>\n                      }\n                      <span>{{ child.title }}</span>\n                    </button>\n                  }\n                </div>\n              }\n            }\n          </mat-menu>\n        }\n        <button\n          type=\"button\"\n          class=\"sd-selection-clear\"\n          [attr.aria-label]=\"clearLabel()\"\n          [attr.data-autoid]=\"_autoId ? 'components-button-' + _autoId + '-clear-selection' : null\"\n          (click)=\"onClear()\">\n          <mat-icon aria-hidden=\"true\">close</mat-icon>\n        </button>\n      </div>\n    </sd-quick-action>\n  }\n} @else {\n  @let _actions = actions();\n  @let _selectedTableItems = selectedTableItems();\n  @let _autoId = autoId();\n\n  <sd-quick-action class=\"sd-selection-classic\" [opened]=\"opened()\">\n    <div class=\"d-flex align-items-center\" sdMessage>\n      <div class=\"c-bg-length\">\n        <span class=\"c-length\">{{ _selectedTableItems?.length }}</span>\n      </div>\n      <div class=\"c-message\">\n        {{ message() }}\n      </div>\n    </div>\n\n    <div class=\"sd-selection-classic-actions d-flex align-items-center mr-8\" sdAction>\n      @for (action of _actions; track $index) {\n        @if (action.variant === 'normal') {\n          <sd-button\n            [autoId]=\"_autoId ? _autoId + '-action-' + $index : null\"\n            class=\"ml-4\"\n            [tooltip]=\"action.tooltip\"\n            [prefixIcon]=\"action.icon\"\n            [color]=\"action.color\"\n            [type]=\"action.type || 'light'\"\n            [fontSet]=\"action.fontSet\"\n            [title]=\"action.title\"\n            (click)=\"onClickAction(action)\"></sd-button>\n        } @else if (action.variant === 'children') {\n          @let _actionIndex = $index;\n          <sd-button\n            [autoId]=\"_autoId ? _autoId + '-action-' + _actionIndex : null\"\n            class=\"ml-4\"\n            [tooltip]=\"action.tooltip\"\n            [prefixIcon]=\"action.icon || 'more_vert'\"\n            [color]=\"action.color || 'secondary'\"\n            [type]=\"action.type || 'light'\"\n            [fontSet]=\"action.fontSet || 'material-icons-outlined'\"\n            [title]=\"action.title\"\n            [matMenuTriggerFor]=\"menu\">\n          </sd-button>\n          <mat-menu #menu=\"matMenu\">\n            <span>\n              @for (child of action.children; track $index) {\n                <button\n                  mat-menu-item\n                  type=\"button\"\n                  [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + _actionIndex + '-' + $index : null\"\n                  (click)=\"onClickAction(child)\">\n                  @if (child.icon) {\n                    <mat-icon [fontSet]=\"child.fontSet || 'material-icons-outlined'\" class=\"c-icon\">{{ child.icon }}</mat-icon>\n                  }\n                  <span> {{ child.title }}</span>\n                </button>\n              }\n            </span>\n          </mat-menu>\n        }\n      }\n      <!-- N\u00FAt close lu\u00F4n hi\u1EC7n k\u1EC3 c\u1EA3 kh\u00F4ng c\u00F3 action \u2014 \u0111\u1EA3m b\u1EA3o user c\u00F3 l\u1ED1i tho\u00E1t clear selection -->\n      <button\n        mat-stroked-button\n        type=\"button\"\n        class=\"sd-selection-classic-clear ml-4\"\n        [attr.data-autoid]=\"_autoId ? 'components-button-' + _autoId + '-clear-selection' : null\"\n        [attr.aria-label]=\"clearLabel()\"\n        (click)=\"onClear()\">\n        <mat-icon aria-hidden=\"true\">close</mat-icon>\n      </button>\n    </div>\n  </sd-quick-action>\n}\n", styles: [":host{display:block;flex-shrink:0;min-width:0}.sd-selection-message{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;line-height:20px}.sd-selection-message>span:last-child{overflow-wrap:anywhere}.sd-selection-icon{display:flex;align-items:center;justify-content:center;flex:0 0 28px;height:28px;border-radius:8px;background:var(--sd-success-light, #e8f5e9);color:var(--sd-success-dark, #2e7d32)}.sd-selection-icon sd-icon,.sd-selection-icon mat-icon{width:18px;height:18px;font-size:18px}.sd-selection-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.sd-selection-clear{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;height:32px;border:0;border-radius:8px;color:var(--sd-text-secondary, #62676d);background:transparent;cursor:pointer}.sd-selection-clear:hover{background:var(--sd-surface-variant, #eef0f3)}.sd-selection-clear:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.sd-selection-clear sd-icon,.sd-selection-clear mat-icon{width:18px;height:18px;font-size:18px}.sd-selection-menu-icon{margin-right:12px;vertical-align:middle}.sd-selection-menu-heading{padding:8px 16px 4px;color:var(--sd-text-secondary, #62676d);font-size:12px;font-weight:600}:host ::ng-deep sd-quick-action .c-quick-action.contained{flex-wrap:nowrap;gap:16px;padding:10px 12px;margin:8px 0;border:1px solid var(--sd-border, #dfe2e7);border-radius:10px;box-shadow:none}:host ::ng-deep sd-quick-action .c-quick-action.contained .c-quick-action-action{flex:0 0 auto!important}@media(max-width:600px){:host ::ng-deep sd-quick-action .c-quick-action.contained{flex-wrap:wrap;gap:8px}:host ::ng-deep sd-quick-action .c-quick-action.contained .c-quick-action-action{flex:1 1 100%!important}.sd-selection-actions{width:100%;gap:6px}.sd-selection-message{padding-right:36px}.sd-selection-actions sd-button{flex:1 1 auto}:host ::ng-deep .sd-selection-actions sd-button button{width:100%;min-height:40px}.sd-selection-clear{position:absolute;top:4px;right:8px;width:40px;flex-basis:40px;height:40px}}.c-bg-length{display:flex;flex-direction:column;align-items:flex-start;padding:12px 8px;position:static;width:auto;min-width:48px;height:48px;left:0;top:0;background:var(--sd-success-dark, #2e7d32);border-radius:4px 0 0 4px}.c-bg-length .c-length{position:static;width:auto;min-width:32px;height:24px;left:8px;top:12px;font-family:Roboto;font-style:normal;font-weight:500;font-size:16px;line-height:24px;text-align:center;color:#fff}.c-message{position:static;min-width:200px;height:auto;left:0;top:6px;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#000;margin:0 0 0 8px;overflow-wrap:anywhere}:host ::ng-deep .sd-selection-classic .c-quick-action{flex-wrap:wrap;row-gap:4px}:host ::ng-deep .sd-selection-classic .c-quick-action .c-quick-action-action{flex:0 1 auto;min-width:0;max-width:100%}.sd-selection-classic-actions{flex-wrap:wrap;row-gap:4px;min-width:0;padding-block:4px}.sd-selection-classic-clear{flex:0 0 35px;min-width:35px;width:35px;height:36px;padding:0;color:var(--sd-text-secondary, #62676d)}.sd-selection-classic-clear mat-icon{margin:0}@media(max-width:600px){:host ::ng-deep .sd-selection-classic .c-quick-action{flex-wrap:wrap;gap:8px;padding-bottom:8px}:host ::ng-deep .sd-selection-classic .c-quick-action .c-quick-action-action{flex:1 1 100%;min-width:0}.sd-selection-classic-actions{flex-wrap:wrap;gap:4px;min-width:0}.c-message{min-width:0;height:auto;overflow-wrap:anywhere}}\n"] }]
+            args: [{ selector: 'selector-action', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, MatButtonModule, MatMenuModule, SdButton, SdQuickAction], template: "@if (compactActionBar()) {\n  @let _autoId = autoId();\n  @let _direct = directActions();\n  @let _overflow = overflowActions();\n  @if (opened()) {\n    <sd-quick-action opened contained>\n      <div class=\"sd-selection-message\" sdMessage role=\"status\">\n        <span class=\"sd-selection-icon\" aria-hidden=\"true\"><mat-icon>check_circle_outline</mat-icon></span>\n        <span>{{ message() }}</span>\n      </div>\n      <div class=\"sd-selection-actions\" sdAction>\n        @for (entry of _direct; track entry.index) {\n          @let action = entry.action;\n          @if (action.variant === 'normal') {\n            <sd-button\n              class=\"sd-selection-direct\"\n              size=\"sm\"\n              [autoId]=\"_autoId ? _autoId + '-action-' + entry.index : null\"\n              [tooltip]=\"action.tooltip\"\n              [prefixIcon]=\"action.icon\"\n              [color]=\"action.color\"\n              [type]=\"action.type || 'light'\"\n              [fontSet]=\"action.fontSet\"\n              [title]=\"action.title\"\n              (click)=\"onClickAction(action)\" />\n          } @else {\n            <sd-button\n              class=\"sd-selection-direct\"\n              size=\"sm\"\n              [autoId]=\"_autoId ? _autoId + '-action-' + entry.index : null\"\n              [tooltip]=\"action.tooltip\"\n              [prefixIcon]=\"action.icon || 'more_horiz'\"\n              [color]=\"action.color || 'secondary'\"\n              [type]=\"action.type || 'light'\"\n              [fontSet]=\"action.fontSet\"\n              [title]=\"action.title\"\n              [matMenuTriggerFor]=\"childrenMenu\" />\n            <mat-menu #childrenMenu=\"matMenu\">\n              @for (child of action.children; track $index) {\n                <button\n                  mat-menu-item\n                  type=\"button\"\n                  [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null\"\n                  (click)=\"onClickAction(child)\">\n                  @if (child.icon) {\n                    <mat-icon class=\"sd-selection-menu-icon\" [fontSet]=\"child.fontSet\" [color]=\"child.color\">{{ child.icon }}</mat-icon>\n                  }\n                  <span>{{ child.title }}</span>\n                </button>\n              }\n            </mat-menu>\n          }\n        }\n        @if (_overflow.length) {\n          <sd-button\n            class=\"sd-selection-more\"\n            size=\"sm\"\n            prefixIcon=\"more_horiz\"\n            [title]=\"moreLabel()\"\n            color=\"secondary\"\n            type=\"light\"\n            [autoId]=\"_autoId ? _autoId + '-more-actions' : null\"\n            [matMenuTriggerFor]=\"moreMenu\" />\n          <mat-menu #moreMenu=\"matMenu\">\n            @for (entry of _overflow; track entry.index) {\n              @let action = entry.action;\n              @if (action.variant === 'normal') {\n                <button\n                  mat-menu-item\n                  type=\"button\"\n                  [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + entry.index : null\"\n                  (click)=\"onClickAction(action)\">\n                  @if (action.icon) {\n                    <mat-icon class=\"sd-selection-menu-icon\" [fontSet]=\"action.fontSet\" [color]=\"action.color\">{{ action.icon }}</mat-icon>\n                  }\n                  <span>{{ action.title }}</span>\n                </button>\n              } @else {\n                <div role=\"group\" [attr.aria-label]=\"action.title\">\n                  <div class=\"sd-selection-menu-heading\">{{ action.title }}</div>\n                  @for (child of action.children; track $index) {\n                    <button\n                      mat-menu-item\n                      type=\"button\"\n                      [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + entry.index + '-' + $index : null\"\n                      (click)=\"onClickAction(child)\">\n                      @if (child.icon) {\n                        <mat-icon class=\"sd-selection-menu-icon\" [fontSet]=\"child.fontSet\" [color]=\"child.color\">{{ child.icon }}</mat-icon>\n                      }\n                      <span>{{ child.title }}</span>\n                    </button>\n                  }\n                </div>\n              }\n            }\n          </mat-menu>\n        }\n        <button\n          type=\"button\"\n          class=\"sd-selection-clear\"\n          [attr.aria-label]=\"clearLabel()\"\n          [attr.data-autoid]=\"_autoId ? 'components-button-' + _autoId + '-clear-selection' : null\"\n          (click)=\"onClear()\">\n          <mat-icon aria-hidden=\"true\">close</mat-icon>\n        </button>\n      </div>\n    </sd-quick-action>\n  }\n} @else {\n  @let _actions = actions();\n  @let _selectedTableItems = selectedTableItems();\n  @let _autoId = autoId();\n\n  <sd-quick-action class=\"sd-selection-classic\" [opened]=\"opened()\">\n    <div class=\"d-flex align-items-center\" sdMessage>\n      <div class=\"c-bg-length\">\n        <span class=\"c-length\">{{ _selectedTableItems?.length }}</span>\n      </div>\n      <div class=\"c-message\">\n        {{ message() }}\n      </div>\n    </div>\n\n    <div class=\"sd-selection-classic-actions d-flex align-items-center mr-8\" sdAction>\n      @for (action of _actions; track $index) {\n        @if (action.variant === 'normal') {\n          <sd-button\n            [autoId]=\"_autoId ? _autoId + '-action-' + $index : null\"\n            class=\"ml-4\"\n            [tooltip]=\"action.tooltip\"\n            [prefixIcon]=\"action.icon\"\n            [color]=\"action.color\"\n            [type]=\"action.type || 'light'\"\n            [fontSet]=\"action.fontSet\"\n            [title]=\"action.title\"\n            (click)=\"onClickAction(action)\"></sd-button>\n        } @else if (action.variant === 'children') {\n          @let _actionIndex = $index;\n          <sd-button\n            [autoId]=\"_autoId ? _autoId + '-action-' + _actionIndex : null\"\n            class=\"ml-4\"\n            [tooltip]=\"action.tooltip\"\n            [prefixIcon]=\"action.icon || 'more_vert'\"\n            [color]=\"action.color || 'secondary'\"\n            [type]=\"action.type || 'light'\"\n            [fontSet]=\"action.fontSet || 'material-icons-outlined'\"\n            [title]=\"action.title\"\n            [matMenuTriggerFor]=\"menu\">\n          </sd-button>\n          <mat-menu #menu=\"matMenu\">\n            <span>\n              @for (child of action.children; track $index) {\n                <button\n                  mat-menu-item\n                  type=\"button\"\n                  [attr.data-autoid]=\"_autoId ? _autoId + '-action-' + _actionIndex + '-' + $index : null\"\n                  (click)=\"onClickAction(child)\">\n                  @if (child.icon) {\n                    <mat-icon [fontSet]=\"child.fontSet || 'material-icons-outlined'\" class=\"c-icon\">{{ child.icon }}</mat-icon>\n                  }\n                  <span> {{ child.title }}</span>\n                </button>\n              }\n            </span>\n          </mat-menu>\n        }\n      }\n      <!-- N\u00FAt close lu\u00F4n hi\u1EC7n k\u1EC3 c\u1EA3 kh\u00F4ng c\u00F3 action \u2014 \u0111\u1EA3m b\u1EA3o user c\u00F3 l\u1ED1i tho\u00E1t clear selection -->\n      <button\n        mat-stroked-button\n        type=\"button\"\n        class=\"sd-selection-classic-clear ml-4\"\n        [attr.data-autoid]=\"_autoId ? 'components-button-' + _autoId + '-clear-selection' : null\"\n        [attr.aria-label]=\"clearLabel()\"\n        (click)=\"onClear()\">\n        <mat-icon aria-hidden=\"true\">close</mat-icon>\n      </button>\n    </div>\n  </sd-quick-action>\n}\n", styles: [":host{display:block;flex-shrink:0;min-width:0}.sd-selection-message{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;line-height:20px}.sd-selection-message>span:last-child{overflow-wrap:anywhere}.sd-selection-icon{display:flex;align-items:center;justify-content:center;flex:0 0 28px;height:28px;border-radius:8px;background:var(--sd-success-light, #e8f5e9);color:var(--sd-success-dark, #2e7d32)}.sd-selection-icon sd-icon,.sd-selection-icon mat-icon{width:18px;height:18px;font-size:18px}.sd-selection-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.sd-selection-clear{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;height:32px;border:0;border-radius:8px;color:var(--sd-text-secondary, #62676d);background:transparent;cursor:pointer}.sd-selection-clear:hover{background:var(--sd-surface-variant, #eef0f3)}.sd-selection-clear:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:2px}.sd-selection-clear sd-icon,.sd-selection-clear mat-icon{width:18px;height:18px;font-size:18px}.sd-selection-menu-icon{margin-right:12px;vertical-align:middle}.sd-selection-menu-heading{padding:8px 16px 4px;color:var(--sd-text-secondary, #62676d);font-size:12px;font-weight:600}:host ::ng-deep sd-quick-action .c-quick-action.contained{flex-wrap:nowrap;gap:16px;padding:10px 12px;margin:8px 0;border:1px solid var(--sd-border, #dfe2e7);border-radius:10px;box-shadow:none}:host ::ng-deep sd-quick-action .c-quick-action.contained .c-quick-action-action{flex:0 0 auto!important}@media(max-width:600px){:host ::ng-deep sd-quick-action .c-quick-action.contained{flex-wrap:wrap;gap:8px}:host ::ng-deep sd-quick-action .c-quick-action.contained .c-quick-action-action{flex:1 1 100%!important}.sd-selection-actions{width:100%;gap:6px}.sd-selection-message{padding-right:36px}.sd-selection-actions sd-button{flex:1 1 auto}:host ::ng-deep .sd-selection-actions sd-button button{width:100%;min-height:40px}.sd-selection-clear{position:absolute;top:4px;right:8px;width:40px;flex-basis:40px;height:40px}}.c-bg-length{display:flex;flex-direction:column;align-items:flex-start;padding:12px 8px;position:static;width:auto;min-width:48px;height:48px;left:0;top:0;background:var(--sd-primary, #2a66f4);border-radius:4px 0 0 4px}.c-bg-length .c-length{position:static;width:auto;min-width:32px;height:24px;left:8px;top:12px;font-family:Roboto;font-style:normal;font-weight:500;font-size:16px;line-height:24px;text-align:center;color:#fff}.c-message{position:static;min-width:200px;height:auto;left:0;top:6px;font-family:Roboto;font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#000;margin:0 0 0 8px;overflow-wrap:anywhere}:host ::ng-deep .sd-selection-classic .c-quick-action{flex-wrap:wrap;row-gap:4px}:host ::ng-deep .sd-selection-classic .c-quick-action .c-quick-action-action{flex:0 1 auto;min-width:0;max-width:100%}.sd-selection-classic-actions{flex-wrap:wrap;row-gap:4px;min-width:0;padding-block:4px}.sd-selection-classic-clear{flex:0 0 35px;min-width:35px;width:35px;height:36px;padding:0;color:var(--sd-text-secondary, #62676d)}.sd-selection-classic-clear mat-icon{margin:0}@media(max-width:600px){:host ::ng-deep .sd-selection-classic .c-quick-action{flex-wrap:wrap;gap:8px;padding-bottom:8px}:host ::ng-deep .sd-selection-classic .c-quick-action .c-quick-action-action{flex:1 1 100%;min-width:0}.sd-selection-classic-actions{flex-wrap:wrap;gap:4px;min-width:0}.c-message{min-width:0;height:auto;overflow-wrap:anywhere}}\n"] }]
         }] });
 
 const DEFAULT_TABLE_CONFIG = {