@rt-tools/ui-kit-v2 0.28.0 → 0.29.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.
- package/fesm2022/rt-tools-ui-kit-v2-calendar.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-calendar.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-container.mjs +9 -4
- package/fesm2022/rt-tools-ui-kit-v2-container.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-core.mjs +37 -4
- package/fesm2022/rt-tools-ui-kit-v2-core.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-data-list.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-data-list.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-date-picker.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-date-picker.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-date-range.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-date-range.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-dynamic-list.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-dynamic-list.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-dynamic-selector.mjs +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-dynamic-selector.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-filter-control.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-filter-control.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-page-header.mjs +367 -23
- package/fesm2022/rt-tools-ui-kit-v2-page-header.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-pdf-viewer.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-pdf-viewer.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-toolbar.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-toolbar.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-workspace.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-workspace.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/calendar/rt-calendar.component.scss +3 -2
- package/src/lib/components/container/CONTEXT.md +6 -0
- package/src/lib/components/container/rt-container.component.scss +4 -0
- package/src/lib/components/data-list/toolbar/rt-data-list-toolbar.component.scss +1 -1
- package/src/lib/components/dynamic-list/rt-dynamic-list.component.scss +1 -1
- package/src/lib/components/filter-control/rt-filter-control.component.scss +4 -2
- package/src/lib/components/page-header/CONTEXT.md +12 -0
- package/src/lib/components/page-header/more/rt-page-header-more.component.scss +7 -0
- package/src/lib/components/page-header/rt-page-header-mobile.scss +24 -0
- package/src/lib/components/page-header/rt-page-header.component.scss +25 -3
- package/src/lib/components/pdf-viewer/rt-pdf-viewer.component.scss +1 -1
- package/src/lib/components/toolbar/rt-toolbar.component.scss +3 -1
- package/src/lib/components/workspace/rt-workspace.component.scss +8 -6
- package/src/rich-editor/lib/components/chat/rt-chat.component.scss +5 -3
- package/src/styles/_breakpoints.scss +19 -0
- package/src/styles/_index.scss +4 -0
- package/src/styles/_place.scss +7 -0
- package/styles/tokens.css +8 -0
- package/types/rt-tools-ui-kit-v2-core.d.ts +24 -5
- package/types/rt-tools-ui-kit-v2-page-header.d.ts +60 -6
|
@@ -284,7 +284,7 @@ var RtDataListToolbarComponent = class RtDataListToolbarComponent {
|
|
|
284
284
|
}],
|
|
285
285
|
ngImport: i0,
|
|
286
286
|
template: "<ng-container rtBlock=\"rt-data-list-toolbar\">\n <rt-toolbar>\n @if (hasSelectors() && !isPlaceholderShown()) {\n <ng-container *rtToolbarLeft>\n <div rtElem=\"selectors\">\n @if (isMultiSelect()) {\n @if (isSelectAllSelectorShown()) {\n <rt-checkbox\n qa-dataid=\"data-list-select-all\"\n [ariaLabel]=\"selectAllLabel()\"\n [disabled]=\"isSelectAllSelectorDisabled()\"\n [indeterminate]=\"isAllEntitiesIndeterminate() && !isAllEntitiesSelected()\"\n [ngModel]=\"isAllEntitiesSelected()\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onToggleAllEntities($event)\">\n {{ selectAllLabel() }}\n </rt-checkbox>\n } @else {\n <span rtElem=\"counter\" qa-dataid=\"data-list-selected-count\">{{ selectedLabel() }}</span>\n }\n }\n\n @if (toolbarSelectorsTpl(); as selectors) {\n <ng-container [ngTemplateOutlet]=\"selectors\" />\n }\n </div>\n </ng-container>\n }\n\n <ng-container *rtToolbarRight>\n <div rtElem=\"right\">\n <div rtElem=\"actions\">\n @if (toolbarActionsTpl(); as actions) {\n <ng-container [ngTemplateOutlet]=\"actions\" />\n\n <span rtElem=\"divider\"></span>\n }\n\n @if (isFiltersShown()) {\n <rt-icon-button\n qa-dataid=\"data-list-clear-filters\"\n variant=\"ghost\"\n [iconFill]=\"!isToolbarActionsIconsOutlined()\"\n [icon]=\"clearFiltersIcon\"\n [ariaLabel]=\"clearFiltersLabel()\"\n [tooltip]=\"clearFiltersLabel()\"\n [disabled]=\"isFiltersEmpty()\"\n (clicked)=\"onClearFilters()\" />\n }\n\n @if (isRefreshButtonShown()) {\n <rt-icon-button\n qa-dataid=\"data-list-refresh\"\n variant=\"ghost\"\n [iconFill]=\"!isToolbarActionsIconsOutlined()\"\n [icon]=\"refreshIcon\"\n [ariaLabel]=\"refreshLabel()\"\n [tooltip]=\"refreshLabel()\"\n (clicked)=\"onRefresh()\" />\n }\n\n @if (isTableConfigButtonShown()) {\n <rt-icon-button\n qa-dataid=\"data-list-table-config\"\n variant=\"ghost\"\n [iconFill]=\"!isToolbarActionsIconsOutlined()\"\n [icon]=\"tableConfigIcon\"\n [ariaLabel]=\"tableConfigLabel()\"\n [tooltip]=\"tableConfigLabel()\"\n (clicked)=\"onOpenConfig()\" />\n }\n </div>\n\n @if (isSearchShown()) {\n <div rtElem=\"search\">\n <rt-input\n qa-dataid=\"data-list-search\"\n size=\"sm\"\n [appearance]=\"searchAppearance()\"\n [iconLeft]=\"searchIcon\"\n [placeholder]=\"searchPlaceholder()\"\n [ariaLabel]=\"searchPlaceholder()\"\n [formControl]=\"searchControl\" />\n </div>\n }\n </div>\n </ng-container>\n </rt-toolbar>\n</ng-container>\n",
|
|
287
|
-
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-list-toolbar{--rt-data-list-toolbar-divider-width: var(--rt-border-width-thin);display:block;width:100%;margin-bottom:var(--rt-list-toolbar-gap)}.rt-data-list-toolbar .rt-toolbar{--rt-toolbar-padding-top: var(--rt-list-toolbar-padding-top);--rt-toolbar-padding-bottom: var(--rt-list-toolbar-padding-bottom)}.rt-data-list-toolbar__selectors{display:flex;align-items:center;gap:var(--rt-space-md)}.rt-data-list-toolbar__selectors .rt-checkbox{--rt-checkbox-color-label: var(--rt-list-selector-label-color)}.rt-data-list-toolbar__counter{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-data-list-toolbar__right{display:flex;width:100%;align-items:center;justify-content:flex-end;gap:var(--rt-space-md)}.rt-data-list-toolbar__actions{display:flex;align-items:center;gap:var(--rt-list-action-gap)}.rt-data-list-toolbar__actions rt-icon-button{--rt-icon-button-color: var(--rt-list-action-color)}.rt-data-list-toolbar__actions .rt-icon-button{--rt-icon-button-radius: var(--rt-list-action-radius);--rt-icon-button-shadow: var(--rt-list-action-shadow);--rt-icon-button-shadow-hover: var(--rt-list-action-shadow-hover);--rt-icon-button-color-hover: var(--rt-list-action-color-hover);--rt-icon-button-color-bg-hover: var(--rt-list-action-color-bg-hover)}.rt-data-list-toolbar__actions .rt-icon-button__icon{min-width:var(--rt-list-action-icon-size);min-height:var(--rt-list-action-icon-size)}.rt-data-list-toolbar__divider{height:var(--rt-list-action-divider-height);border-left:var(--rt-data-list-toolbar-divider-width) solid var(--rt-color-border-subtle)}.rt-data-list-toolbar .rt-toolbar__bar--right{flex-grow:1}.rt-data-list-toolbar__search{--rt-input-height-sm: var(--rt-list-search-height);--rt-input-radius: var(--rt-list-search-radius);--rt-input-color-border: var(--rt-list-search-color-border);--rt-input-color-bg: var(--rt-list-search-color-bg);--rt-input-padding-x: var(--rt-list-search-padding-x);--rt-input-gap: var(--rt-list-search-gap);--rt-input-font-size: var(--rt-list-search-font-size);--rt-input-icon-size: var(--rt-list-search-icon-size);--rt-input-icon-color: var(--rt-list-search-icon-color);--rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);min-width:0;flex:0 1 var(--rt-list-search-width);contain:inline-size}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-toolbar__search .rt-input{--rt-input-fill-radius: var(--rt-list-search-radius)}@
|
|
287
|
+
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-list-toolbar{--rt-data-list-toolbar-divider-width: var(--rt-border-width-thin);display:block;width:100%;margin-bottom:var(--rt-list-toolbar-gap)}.rt-data-list-toolbar .rt-toolbar{--rt-toolbar-padding-top: var(--rt-list-toolbar-padding-top);--rt-toolbar-padding-bottom: var(--rt-list-toolbar-padding-bottom)}.rt-data-list-toolbar__selectors{display:flex;align-items:center;gap:var(--rt-space-md)}.rt-data-list-toolbar__selectors .rt-checkbox{--rt-checkbox-color-label: var(--rt-list-selector-label-color)}.rt-data-list-toolbar__counter{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-data-list-toolbar__right{display:flex;width:100%;align-items:center;justify-content:flex-end;gap:var(--rt-space-md)}.rt-data-list-toolbar__actions{display:flex;align-items:center;gap:var(--rt-list-action-gap)}.rt-data-list-toolbar__actions rt-icon-button{--rt-icon-button-color: var(--rt-list-action-color)}.rt-data-list-toolbar__actions .rt-icon-button{--rt-icon-button-radius: var(--rt-list-action-radius);--rt-icon-button-shadow: var(--rt-list-action-shadow);--rt-icon-button-shadow-hover: var(--rt-list-action-shadow-hover);--rt-icon-button-color-hover: var(--rt-list-action-color-hover);--rt-icon-button-color-bg-hover: var(--rt-list-action-color-bg-hover)}.rt-data-list-toolbar__actions .rt-icon-button__icon{min-width:var(--rt-list-action-icon-size);min-height:var(--rt-list-action-icon-size)}.rt-data-list-toolbar__divider{height:var(--rt-list-action-divider-height);border-left:var(--rt-data-list-toolbar-divider-width) solid var(--rt-color-border-subtle)}.rt-data-list-toolbar .rt-toolbar__bar--right{flex-grow:1}.rt-data-list-toolbar__search{--rt-input-height-sm: var(--rt-list-search-height);--rt-input-radius: var(--rt-list-search-radius);--rt-input-color-border: var(--rt-list-search-color-border);--rt-input-color-bg: var(--rt-list-search-color-bg);--rt-input-padding-x: var(--rt-list-search-padding-x);--rt-input-gap: var(--rt-list-search-gap);--rt-input-font-size: var(--rt-list-search-font-size);--rt-input-icon-size: var(--rt-list-search-icon-size);--rt-input-icon-color: var(--rt-list-search-icon-color);--rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);min-width:0;flex:0 1 var(--rt-list-search-width);contain:inline-size}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-toolbar__search .rt-input{--rt-input-fill-radius: var(--rt-list-search-radius)}@container rt-place (width <= 1080px){.rt-data-list-toolbar__right{flex-wrap:wrap}.rt-data-list-toolbar__search{flex-basis:100%}}}\n"],
|
|
288
288
|
dependencies: [
|
|
289
289
|
{
|
|
290
290
|
kind: "component",
|
|
@@ -445,7 +445,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
445
445
|
],
|
|
446
446
|
host: { class: BEM_BLOCK$2 },
|
|
447
447
|
template: "<ng-container rtBlock=\"rt-data-list-toolbar\">\n <rt-toolbar>\n @if (hasSelectors() && !isPlaceholderShown()) {\n <ng-container *rtToolbarLeft>\n <div rtElem=\"selectors\">\n @if (isMultiSelect()) {\n @if (isSelectAllSelectorShown()) {\n <rt-checkbox\n qa-dataid=\"data-list-select-all\"\n [ariaLabel]=\"selectAllLabel()\"\n [disabled]=\"isSelectAllSelectorDisabled()\"\n [indeterminate]=\"isAllEntitiesIndeterminate() && !isAllEntitiesSelected()\"\n [ngModel]=\"isAllEntitiesSelected()\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onToggleAllEntities($event)\">\n {{ selectAllLabel() }}\n </rt-checkbox>\n } @else {\n <span rtElem=\"counter\" qa-dataid=\"data-list-selected-count\">{{ selectedLabel() }}</span>\n }\n }\n\n @if (toolbarSelectorsTpl(); as selectors) {\n <ng-container [ngTemplateOutlet]=\"selectors\" />\n }\n </div>\n </ng-container>\n }\n\n <ng-container *rtToolbarRight>\n <div rtElem=\"right\">\n <div rtElem=\"actions\">\n @if (toolbarActionsTpl(); as actions) {\n <ng-container [ngTemplateOutlet]=\"actions\" />\n\n <span rtElem=\"divider\"></span>\n }\n\n @if (isFiltersShown()) {\n <rt-icon-button\n qa-dataid=\"data-list-clear-filters\"\n variant=\"ghost\"\n [iconFill]=\"!isToolbarActionsIconsOutlined()\"\n [icon]=\"clearFiltersIcon\"\n [ariaLabel]=\"clearFiltersLabel()\"\n [tooltip]=\"clearFiltersLabel()\"\n [disabled]=\"isFiltersEmpty()\"\n (clicked)=\"onClearFilters()\" />\n }\n\n @if (isRefreshButtonShown()) {\n <rt-icon-button\n qa-dataid=\"data-list-refresh\"\n variant=\"ghost\"\n [iconFill]=\"!isToolbarActionsIconsOutlined()\"\n [icon]=\"refreshIcon\"\n [ariaLabel]=\"refreshLabel()\"\n [tooltip]=\"refreshLabel()\"\n (clicked)=\"onRefresh()\" />\n }\n\n @if (isTableConfigButtonShown()) {\n <rt-icon-button\n qa-dataid=\"data-list-table-config\"\n variant=\"ghost\"\n [iconFill]=\"!isToolbarActionsIconsOutlined()\"\n [icon]=\"tableConfigIcon\"\n [ariaLabel]=\"tableConfigLabel()\"\n [tooltip]=\"tableConfigLabel()\"\n (clicked)=\"onOpenConfig()\" />\n }\n </div>\n\n @if (isSearchShown()) {\n <div rtElem=\"search\">\n <rt-input\n qa-dataid=\"data-list-search\"\n size=\"sm\"\n [appearance]=\"searchAppearance()\"\n [iconLeft]=\"searchIcon\"\n [placeholder]=\"searchPlaceholder()\"\n [ariaLabel]=\"searchPlaceholder()\"\n [formControl]=\"searchControl\" />\n </div>\n }\n </div>\n </ng-container>\n </rt-toolbar>\n</ng-container>\n",
|
|
448
|
-
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-list-toolbar{--rt-data-list-toolbar-divider-width: var(--rt-border-width-thin);display:block;width:100%;margin-bottom:var(--rt-list-toolbar-gap)}.rt-data-list-toolbar .rt-toolbar{--rt-toolbar-padding-top: var(--rt-list-toolbar-padding-top);--rt-toolbar-padding-bottom: var(--rt-list-toolbar-padding-bottom)}.rt-data-list-toolbar__selectors{display:flex;align-items:center;gap:var(--rt-space-md)}.rt-data-list-toolbar__selectors .rt-checkbox{--rt-checkbox-color-label: var(--rt-list-selector-label-color)}.rt-data-list-toolbar__counter{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-data-list-toolbar__right{display:flex;width:100%;align-items:center;justify-content:flex-end;gap:var(--rt-space-md)}.rt-data-list-toolbar__actions{display:flex;align-items:center;gap:var(--rt-list-action-gap)}.rt-data-list-toolbar__actions rt-icon-button{--rt-icon-button-color: var(--rt-list-action-color)}.rt-data-list-toolbar__actions .rt-icon-button{--rt-icon-button-radius: var(--rt-list-action-radius);--rt-icon-button-shadow: var(--rt-list-action-shadow);--rt-icon-button-shadow-hover: var(--rt-list-action-shadow-hover);--rt-icon-button-color-hover: var(--rt-list-action-color-hover);--rt-icon-button-color-bg-hover: var(--rt-list-action-color-bg-hover)}.rt-data-list-toolbar__actions .rt-icon-button__icon{min-width:var(--rt-list-action-icon-size);min-height:var(--rt-list-action-icon-size)}.rt-data-list-toolbar__divider{height:var(--rt-list-action-divider-height);border-left:var(--rt-data-list-toolbar-divider-width) solid var(--rt-color-border-subtle)}.rt-data-list-toolbar .rt-toolbar__bar--right{flex-grow:1}.rt-data-list-toolbar__search{--rt-input-height-sm: var(--rt-list-search-height);--rt-input-radius: var(--rt-list-search-radius);--rt-input-color-border: var(--rt-list-search-color-border);--rt-input-color-bg: var(--rt-list-search-color-bg);--rt-input-padding-x: var(--rt-list-search-padding-x);--rt-input-gap: var(--rt-list-search-gap);--rt-input-font-size: var(--rt-list-search-font-size);--rt-input-icon-size: var(--rt-list-search-icon-size);--rt-input-icon-color: var(--rt-list-search-icon-color);--rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);min-width:0;flex:0 1 var(--rt-list-search-width);contain:inline-size}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-toolbar__search .rt-input{--rt-input-fill-radius: var(--rt-list-search-radius)}@
|
|
448
|
+
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-list-toolbar{--rt-data-list-toolbar-divider-width: var(--rt-border-width-thin);display:block;width:100%;margin-bottom:var(--rt-list-toolbar-gap)}.rt-data-list-toolbar .rt-toolbar{--rt-toolbar-padding-top: var(--rt-list-toolbar-padding-top);--rt-toolbar-padding-bottom: var(--rt-list-toolbar-padding-bottom)}.rt-data-list-toolbar__selectors{display:flex;align-items:center;gap:var(--rt-space-md)}.rt-data-list-toolbar__selectors .rt-checkbox{--rt-checkbox-color-label: var(--rt-list-selector-label-color)}.rt-data-list-toolbar__counter{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-data-list-toolbar__right{display:flex;width:100%;align-items:center;justify-content:flex-end;gap:var(--rt-space-md)}.rt-data-list-toolbar__actions{display:flex;align-items:center;gap:var(--rt-list-action-gap)}.rt-data-list-toolbar__actions rt-icon-button{--rt-icon-button-color: var(--rt-list-action-color)}.rt-data-list-toolbar__actions .rt-icon-button{--rt-icon-button-radius: var(--rt-list-action-radius);--rt-icon-button-shadow: var(--rt-list-action-shadow);--rt-icon-button-shadow-hover: var(--rt-list-action-shadow-hover);--rt-icon-button-color-hover: var(--rt-list-action-color-hover);--rt-icon-button-color-bg-hover: var(--rt-list-action-color-bg-hover)}.rt-data-list-toolbar__actions .rt-icon-button__icon{min-width:var(--rt-list-action-icon-size);min-height:var(--rt-list-action-icon-size)}.rt-data-list-toolbar__divider{height:var(--rt-list-action-divider-height);border-left:var(--rt-data-list-toolbar-divider-width) solid var(--rt-color-border-subtle)}.rt-data-list-toolbar .rt-toolbar__bar--right{flex-grow:1}.rt-data-list-toolbar__search{--rt-input-height-sm: var(--rt-list-search-height);--rt-input-radius: var(--rt-list-search-radius);--rt-input-color-border: var(--rt-list-search-color-border);--rt-input-color-bg: var(--rt-list-search-color-bg);--rt-input-padding-x: var(--rt-list-search-padding-x);--rt-input-gap: var(--rt-list-search-gap);--rt-input-font-size: var(--rt-list-search-font-size);--rt-input-icon-size: var(--rt-list-search-icon-size);--rt-input-icon-color: var(--rt-list-search-icon-color);--rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);min-width:0;flex:0 1 var(--rt-list-search-width);contain:inline-size}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-toolbar__search .rt-input{--rt-input-fill-radius: var(--rt-list-search-radius)}@container rt-place (width <= 1080px){.rt-data-list-toolbar__right{flex-wrap:wrap}.rt-data-list-toolbar__search{flex-basis:100%}}}\n"]
|
|
449
449
|
}]
|
|
450
450
|
}],
|
|
451
451
|
ctorParameters: () => [],
|