@rt-tools/ui-kit-v2 0.39.2 → 0.41.0

package/fesm2022/rt-tools-ui-kit-v2-data-table.mjs

@@ -395,7 +395,15 @@ var RtDataTableCellComponent = class RtDataTableCellComponent {
 			const icon = this.icon();
 			return icon && !this.kitIcon() ? icon.glyph : null;
 		}, ...ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []);
-		this.glyphMods = computed(() => ({ filled: this.icon()?.outlined !== true }), ...ngDevMode ? [{ debugName: "glyphMods" }] : /* istanbul ignore next */ []);
+		this.iconSize = computed(() => {
+			const size = this.icon()?.size;
+			return size === "sm" || size === "md" ? size : "lg";
+		}, ...ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []);
+		this.glyphMods = computed(() => ({
+			filled: this.icon()?.outlined !== true,
+			sm: this.iconSize() === "sm",
+			md: this.iconSize() === "md"
+		}), ...ngDevMode ? [{ debugName: "glyphMods" }] : /* istanbul ignore next */ []);
 		this.iconContext = computed(() => {
 			const icon = this.icon();
 			return icon ? {
@@ -494,8 +502,8 @@ var RtDataTableCellComponent = class RtDataTableCellComponent {
 				classAttribute: "rt-data-table-cell"
 			},
 			ngImport: i0,
-			template: "<ng-container rtBlock=\"rt-data-table-cell\">\n    <ng-template #iconTpl>\n        @if (iconTemplate(); as template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"iconContext()\" />\n        } @else if (kitIcon(); as name) {\n            <rt-icon size=\"lg\" [name]=\"name\" [fill]=\"icon()?.outlined !== true\" [style]=\"iconStyle()\" />\n        } @else if (glyph(); as name) {\n            <span rtElem=\"glyph\" aria-hidden=\"true\" qa-dataid=\"data-table-cell-glyph\" [rtMod]=\"glyphMods()\" [style]=\"iconStyle()\">\n                {{ name }}\n            </span>\n        }\n    </ng-template>\n\n    @if (icon()?.placement === 'left') {\n        <span rtElem=\"prefix\" qa-dataid=\"data-table-cell-prefix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n    }\n\n    <div rtElem=\"title\" [rtMod]=\"titleMods()\">\n        <div rtElem=\"text\" qa-dataid=\"data-table-cell-text\" [rtTooltip]=\"hint()\">{{ value() | emptyToDash }}</div>\n    </div>\n\n    @if (icon()?.placement === 'right') {\n        <span rtElem=\"suffix\" qa-dataid=\"data-table-cell-suffix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n    }\n\n    @if (copyable()) {\n        <rt-icon-button\n            rtElem=\"copy-button\"\n            rtDataTableStopRowClick\n            qa-dataid=\"data-table-cell-copy\"\n            size=\"sm\"\n            [rtMod]=\"copyMods()\"\n            [icon]=\"copyIcon()\"\n            [ariaLabel]=\"copyLabel()\"\n            [tooltip]=\"narrow() ? '' : copyLabel()\"\n            (clicked)=\"onCopy()\" />\n    }\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-cell{--rt-data-table-cell-transition-duration: var(--rt-duration-fast);--rt-data-table-cell-glyph-size: var(--rt-size-6);position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-space-sm)}.rt-data-table-cell__glyph{display:inline-block;overflow:hidden;width:var(--rt-data-table-cell-glyph-size);font-family:Material Symbols Outlined,sans-serif;font-feature-settings:\"liga\";font-size:var(--rt-data-table-cell-glyph-size);font-style:normal;font-weight:var(--rt-font-weight-regular);letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}.rt-data-table-cell__glyph--filled{font-variation-settings:\"FILL\" 1}.rt-data-table-cell__prefix,.rt-data-table-cell__suffix{display:inline-flex;min-width:fit-content;flex:0 0 auto}.rt-data-table-cell__title{display:table;width:100%;table-layout:fixed}.rt-data-table-cell__title--align--left{text-align:left}.rt-data-table-cell__title--align--center{text-align:center}.rt-data-table-cell__title--align--right{text-align:right}.rt-data-table-cell__text{overflow:hidden;width:100%;padding:var(--rt-space-sm) var(--rt-space-sm) var(--rt-space-sm) 0;text-overflow:ellipsis;white-space:nowrap}.rt-data-table-cell__copy-button{position:absolute;transition:visibility var(--rt-data-table-cell-transition-duration) linear;visibility:hidden}@media(hover:none){.rt-data-table-cell__copy-button{visibility:visible}}.rt-data-table-cell__copy-button{--rt-icon-button-color: var(--rt-list-copy-button-color)}.rt-data-table-cell__copy-button .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-copy-button-size);--rt-icon-button-radius: var(--rt-list-copy-button-radius);--rt-icon-button-color-hover: var(--rt-color-text-primary);--rt-icon-button-color-bg-hover: var(--rt-list-copy-button-bg-hover);background-color:var(--rt-list-copy-button-bg)}.rt-data-table-cell__copy-button--position--left{left:var(--rt-space-xs)}.rt-data-table-cell__copy-button--position--right{right:var(--rt-space-xs)}.rt-data-table-cell__copy-button--complete{cursor:not-allowed}.rt-data-table-cell__copy-button--visible{visibility:visible}}\n"],
+			template: "<ng-container rtBlock=\"rt-data-table-cell\">\n    <ng-template #iconTpl>\n        @if (iconTemplate(); as template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"iconContext()\" />\n        } @else if (kitIcon(); as name) {\n            <rt-icon [size]=\"iconSize()\" [name]=\"name\" [fill]=\"icon()?.outlined !== true\" [style]=\"iconStyle()\" />\n        } @else if (glyph(); as name) {\n            <span rtElem=\"glyph\" aria-hidden=\"true\" qa-dataid=\"data-table-cell-glyph\" [rtMod]=\"glyphMods()\" [style]=\"iconStyle()\">\n                {{ name }}\n            </span>\n        }\n    </ng-template>\n\n    @if (icon()?.placement === 'left') {\n        <span rtElem=\"prefix\" qa-dataid=\"data-table-cell-prefix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n    }\n\n    <div rtElem=\"title\" [rtMod]=\"titleMods()\">\n        <div rtElem=\"text\" qa-dataid=\"data-table-cell-text\" [rtTooltip]=\"hint()\">{{ value() | emptyToDash }}</div>\n    </div>\n\n    @if (icon()?.placement === 'right') {\n        <span rtElem=\"suffix\" qa-dataid=\"data-table-cell-suffix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n    }\n\n    @if (copyable()) {\n        <rt-icon-button\n            rtElem=\"copy-button\"\n            rtDataTableStopRowClick\n            qa-dataid=\"data-table-cell-copy\"\n            size=\"sm\"\n            [rtMod]=\"copyMods()\"\n            [icon]=\"copyIcon()\"\n            [ariaLabel]=\"copyLabel()\"\n            [tooltip]=\"narrow() ? '' : copyLabel()\"\n            (clicked)=\"onCopy()\" />\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-cell{--rt-data-table-cell-transition-duration: var(--rt-duration-fast);--rt-data-table-cell-glyph-size: var(--rt-size-6);--rt-icon-step-sm: var(--rt-size-4);--rt-icon-step-md: var(--rt-size-5);--rt-icon-step-lg: var(--rt-size-6);position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-space-sm)}.rt-data-table-cell__glyph{display:inline-block;overflow:hidden;width:var(--rt-data-table-cell-glyph-size);font-family:Material Symbols Outlined,sans-serif;font-feature-settings:\"liga\";font-size:var(--rt-data-table-cell-glyph-size);font-style:normal;font-weight:var(--rt-font-weight-regular);letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}.rt-data-table-cell__glyph--filled{font-variation-settings:\"FILL\" 1}.rt-data-table-cell__glyph--sm{--rt-data-table-cell-glyph-size: var(--rt-icon-step-sm)}.rt-data-table-cell__glyph--md{--rt-data-table-cell-glyph-size: var(--rt-icon-step-md)}.rt-data-table-cell__prefix,.rt-data-table-cell__suffix{display:inline-flex;min-width:fit-content;flex:0 0 auto}.rt-data-table-cell__title{display:table;width:100%;table-layout:fixed}.rt-data-table-cell__title--align--left{text-align:left}.rt-data-table-cell__title--align--center{text-align:center}.rt-data-table-cell__title--align--right{text-align:right}.rt-data-table-cell__text{overflow:hidden;width:100%;padding:var(--rt-space-sm) var(--rt-space-sm) var(--rt-space-sm) 0;text-overflow:ellipsis;white-space:nowrap}.rt-data-table-cell__copy-button{position:absolute;transition:visibility var(--rt-data-table-cell-transition-duration) linear;visibility:hidden}@media(hover:none){.rt-data-table-cell__copy-button{visibility:visible}}.rt-data-table-cell__copy-button{--rt-icon-button-color: var(--rt-list-copy-button-color)}.rt-data-table-cell__copy-button .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-copy-button-size);--rt-icon-button-radius: var(--rt-list-copy-button-radius);--rt-icon-button-color-hover: var(--rt-color-text-primary);--rt-icon-button-color-bg-hover: var(--rt-list-copy-button-bg-hover);background-color:var(--rt-list-copy-button-bg)}.rt-data-table-cell__copy-button--position--left{left:var(--rt-space-xs)}.rt-data-table-cell__copy-button--position--right{right:var(--rt-space-xs)}.rt-data-table-cell__copy-button--complete{cursor:not-allowed}.rt-data-table-cell__copy-button--visible{visibility:visible}}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -625,8 +633,8 @@ i0.ɵɵngDeclareClassMetadata({
 				"(mouseenter)": "onMouseEnter()",
 				"(mouseleave)": "hovered.set(false)"
 			},
-			template: "<ng-container rtBlock=\"rt-data-table-cell\">\n    <ng-template #iconTpl>\n        @if (iconTemplate(); as template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"iconContext()\" />\n        } @else if (kitIcon(); as name) {\n            <rt-icon size=\"lg\" [name]=\"name\" [fill]=\"icon()?.outlined !== true\" [style]=\"iconStyle()\" />\n        } @else if (glyph(); as name) {\n            <span rtElem=\"glyph\" aria-hidden=\"true\" qa-dataid=\"data-table-cell-glyph\" [rtMod]=\"glyphMods()\" [style]=\"iconStyle()\">\n                {{ name }}\n            </span>\n        }\n    </ng-template>\n\n    @if (icon()?.placement === 'left') {\n        <span rtElem=\"prefix\" qa-dataid=\"data-table-cell-prefix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n    }\n\n    <div rtElem=\"title\" [rtMod]=\"titleMods()\">\n        <div rtElem=\"text\" qa-dataid=\"data-table-cell-text\" [rtTooltip]=\"hint()\">{{ value() | emptyToDash }}</div>\n    </div>\n\n    @if (icon()?.placement === 'right') {\n        <span rtElem=\"suffix\" qa-dataid=\"data-table-cell-suffix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n    }\n\n    @if (copyable()) {\n        <rt-icon-button\n            rtElem=\"copy-button\"\n            rtDataTableStopRowClick\n            qa-dataid=\"data-table-cell-copy\"\n            size=\"sm\"\n            [rtMod]=\"copyMods()\"\n            [icon]=\"copyIcon()\"\n            [ariaLabel]=\"copyLabel()\"\n            [tooltip]=\"narrow() ? '' : copyLabel()\"\n            (clicked)=\"onCopy()\" />\n    }\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-cell{--rt-data-table-cell-transition-duration: var(--rt-duration-fast);--rt-data-table-cell-glyph-size: var(--rt-size-6);position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-space-sm)}.rt-data-table-cell__glyph{display:inline-block;overflow:hidden;width:var(--rt-data-table-cell-glyph-size);font-family:Material Symbols Outlined,sans-serif;font-feature-settings:\"liga\";font-size:var(--rt-data-table-cell-glyph-size);font-style:normal;font-weight:var(--rt-font-weight-regular);letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}.rt-data-table-cell__glyph--filled{font-variation-settings:\"FILL\" 1}.rt-data-table-cell__prefix,.rt-data-table-cell__suffix{display:inline-flex;min-width:fit-content;flex:0 0 auto}.rt-data-table-cell__title{display:table;width:100%;table-layout:fixed}.rt-data-table-cell__title--align--left{text-align:left}.rt-data-table-cell__title--align--center{text-align:center}.rt-data-table-cell__title--align--right{text-align:right}.rt-data-table-cell__text{overflow:hidden;width:100%;padding:var(--rt-space-sm) var(--rt-space-sm) var(--rt-space-sm) 0;text-overflow:ellipsis;white-space:nowrap}.rt-data-table-cell__copy-button{position:absolute;transition:visibility var(--rt-data-table-cell-transition-duration) linear;visibility:hidden}@media(hover:none){.rt-data-table-cell__copy-button{visibility:visible}}.rt-data-table-cell__copy-button{--rt-icon-button-color: var(--rt-list-copy-button-color)}.rt-data-table-cell__copy-button .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-copy-button-size);--rt-icon-button-radius: var(--rt-list-copy-button-radius);--rt-icon-button-color-hover: var(--rt-color-text-primary);--rt-icon-button-color-bg-hover: var(--rt-list-copy-button-bg-hover);background-color:var(--rt-list-copy-button-bg)}.rt-data-table-cell__copy-button--position--left{left:var(--rt-space-xs)}.rt-data-table-cell__copy-button--position--right{right:var(--rt-space-xs)}.rt-data-table-cell__copy-button--complete{cursor:not-allowed}.rt-data-table-cell__copy-button--visible{visibility:visible}}\n"]
+			template: "<ng-container rtBlock=\"rt-data-table-cell\">\n    <ng-template #iconTpl>\n        @if (iconTemplate(); as template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"iconContext()\" />\n        } @else if (kitIcon(); as name) {\n            <rt-icon [size]=\"iconSize()\" [name]=\"name\" [fill]=\"icon()?.outlined !== true\" [style]=\"iconStyle()\" />\n        } @else if (glyph(); as name) {\n            <span rtElem=\"glyph\" aria-hidden=\"true\" qa-dataid=\"data-table-cell-glyph\" [rtMod]=\"glyphMods()\" [style]=\"iconStyle()\">\n                {{ name }}\n            </span>\n        }\n    </ng-template>\n\n    @if (icon()?.placement === 'left') {\n        <span rtElem=\"prefix\" qa-dataid=\"data-table-cell-prefix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n    }\n\n    <div rtElem=\"title\" [rtMod]=\"titleMods()\">\n        <div rtElem=\"text\" qa-dataid=\"data-table-cell-text\" [rtTooltip]=\"hint()\">{{ value() | emptyToDash }}</div>\n    </div>\n\n    @if (icon()?.placement === 'right') {\n        <span rtElem=\"suffix\" qa-dataid=\"data-table-cell-suffix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n    }\n\n    @if (copyable()) {\n        <rt-icon-button\n            rtElem=\"copy-button\"\n            rtDataTableStopRowClick\n            qa-dataid=\"data-table-cell-copy\"\n            size=\"sm\"\n            [rtMod]=\"copyMods()\"\n            [icon]=\"copyIcon()\"\n            [ariaLabel]=\"copyLabel()\"\n            [tooltip]=\"narrow() ? '' : copyLabel()\"\n            (clicked)=\"onCopy()\" />\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-cell{--rt-data-table-cell-transition-duration: var(--rt-duration-fast);--rt-data-table-cell-glyph-size: var(--rt-size-6);--rt-icon-step-sm: var(--rt-size-4);--rt-icon-step-md: var(--rt-size-5);--rt-icon-step-lg: var(--rt-size-6);position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-space-sm)}.rt-data-table-cell__glyph{display:inline-block;overflow:hidden;width:var(--rt-data-table-cell-glyph-size);font-family:Material Symbols Outlined,sans-serif;font-feature-settings:\"liga\";font-size:var(--rt-data-table-cell-glyph-size);font-style:normal;font-weight:var(--rt-font-weight-regular);letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}.rt-data-table-cell__glyph--filled{font-variation-settings:\"FILL\" 1}.rt-data-table-cell__glyph--sm{--rt-data-table-cell-glyph-size: var(--rt-icon-step-sm)}.rt-data-table-cell__glyph--md{--rt-data-table-cell-glyph-size: var(--rt-icon-step-md)}.rt-data-table-cell__prefix,.rt-data-table-cell__suffix{display:inline-flex;min-width:fit-content;flex:0 0 auto}.rt-data-table-cell__title{display:table;width:100%;table-layout:fixed}.rt-data-table-cell__title--align--left{text-align:left}.rt-data-table-cell__title--align--center{text-align:center}.rt-data-table-cell__title--align--right{text-align:right}.rt-data-table-cell__text{overflow:hidden;width:100%;padding:var(--rt-space-sm) var(--rt-space-sm) var(--rt-space-sm) 0;text-overflow:ellipsis;white-space:nowrap}.rt-data-table-cell__copy-button{position:absolute;transition:visibility var(--rt-data-table-cell-transition-duration) linear;visibility:hidden}@media(hover:none){.rt-data-table-cell__copy-button{visibility:visible}}.rt-data-table-cell__copy-button{--rt-icon-button-color: var(--rt-list-copy-button-color)}.rt-data-table-cell__copy-button .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-copy-button-size);--rt-icon-button-radius: var(--rt-list-copy-button-radius);--rt-icon-button-color-hover: var(--rt-color-text-primary);--rt-icon-button-color-bg-hover: var(--rt-list-copy-button-bg-hover);background-color:var(--rt-list-copy-button-bg)}.rt-data-table-cell__copy-button--position--left{left:var(--rt-space-xs)}.rt-data-table-cell__copy-button--position--right{right:var(--rt-space-xs)}.rt-data-table-cell__copy-button--complete{cursor:not-allowed}.rt-data-table-cell__copy-button--visible{visibility:visible}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],