@rolatech/angular-components 20.3.0-beta.2 → 20.3.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolatech/angular-components",
-  "version": "20.3.0-beta.2",
+  "version": "20.3.0-beta.4",
   "private": false,
   "description": "rolatech angular components",
   "repository": {
@@ -31,8 +31,8 @@
     "lodash": "^4.17.21"
   },
   "dependencies": {
-    "@rolatech/angular-common": "20.3.0-beta.2",
-    "@rolatech/angular-services": "20.3.0-beta.2",
+    "@rolatech/angular-common": "20.3.0-beta.4",
+    "@rolatech/angular-services": "20.3.0-beta.4",
     "tslib": "^2.3.0"
   },
   "exports": {

package/themes/_default.scss

@@ -25,6 +25,8 @@
     --color-amber-600: oklch(66.6% 0.179 58.318);
     --color-amber-700: oklch(55.5% 0.163 48.998);
     --color-amber-800: oklch(47.3% 0.137 46.201);
+    --color-amber-900: oklch(41.4% 0.112 45.904);
+    --color-amber-950: oklch(27.9% 0.077 45.635);
     --color-yellow-50: oklch(98.7% 0.026 102.212);
     --color-yellow-100: oklch(97.3% 0.071 103.193);
     --color-yellow-200: oklch(94.5% 0.129 101.54);
@@ -44,6 +46,8 @@
     --color-sky-50: oklch(97.7% 0.013 236.62);
     --color-sky-200: oklch(90.1% 0.058 230.902);
     --color-sky-700: oklch(50% 0.134 242.749);
+    --color-sky-900: oklch(39.1% 0.09 240.876);
+    --color-sky-950: oklch(29.3% 0.066 243.157);
     --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-blue-800: oklch(42.4% 0.199 265.638);
@@ -61,6 +65,7 @@
     --color-slate-500: oklch(55.4% 0.046 257.417);
     --color-slate-600: oklch(44.6% 0.043 257.281);
     --color-slate-700: oklch(37.2% 0.044 257.287);
+    --color-slate-950: oklch(12.9% 0.042 264.695);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -73,6 +78,7 @@
     --spacing: 0.25rem;
     --container-md: 28rem;
     --container-lg: 32rem;
+    --container-xl: 36rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-4xl: 56rem;
@@ -111,7 +117,7 @@
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    --blur-2xl: 40px;
+    --blur-sm: 8px;
     --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -304,9 +310,6 @@
   .end {
     inset-inline-end: var(--spacing);
   }
-  .-top-10 {
-    top: calc(var(--spacing) * -10);
-  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -325,18 +328,12 @@
   .-right-0 {
     right: calc(var(--spacing) * -0);
   }
-  .-right-10 {
-    right: calc(var(--spacing) * -10);
-  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
   .-bottom-0 {
     bottom: calc(var(--spacing) * -0);
   }
-  .-bottom-16 {
-    bottom: calc(var(--spacing) * -16);
-  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -349,9 +346,6 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
-  .left-12 {
-    left: calc(var(--spacing) * 12);
-  }
   .left-\[30px\] {
     left: 30px;
   }
@@ -370,6 +364,9 @@
   .z-50 {
     z-index: 50;
   }
+  .z-9200 {
+    z-index: 9200;
+  }
   .z-\[1000\] {
     z-index: 1000;
   }
@@ -469,6 +466,9 @@
   .-mt-4 {
     margin-top: calc(var(--spacing) * -4);
   }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -770,6 +770,9 @@
   .max-h-\[70vh\] {
     max-height: 70vh;
   }
+  .max-h-\[92vh\] {
+    max-height: 92vh;
+  }
   .max-h-\[320px\] {
     max-height: 320px;
   }
@@ -788,6 +791,9 @@
   .min-h-14 {
     min-height: calc(var(--spacing) * 14);
   }
+  .min-h-24 {
+    min-height: calc(var(--spacing) * 24);
+  }
   .min-h-28 {
     min-height: calc(var(--spacing) * 28);
   }
@@ -806,12 +812,18 @@
   .min-h-\[214px\] {
     min-height: 214px;
   }
+  .min-h-\[280px\] {
+    min-height: 280px;
+  }
   .min-h-\[320px\] {
     min-height: 320px;
   }
   .min-h-\[420px\] {
     min-height: 420px;
   }
+  .min-h-full {
+    min-height: 100%;
+  }
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
@@ -1031,6 +1043,9 @@
   .max-w-none {
     max-width: none;
   }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
   .\!min-w-0 {
     min-width: calc(var(--spacing) * 0) !important;
   }
@@ -1415,6 +1430,12 @@
   .rounded-3xl {
     border-radius: var(--radius-3xl);
   }
+  .rounded-\[1\.75rem\] {
+    border-radius: 1.75rem;
+  }
+  .rounded-\[28px\] {
+    border-radius: 28px;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -1439,10 +1460,6 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
-  .border-y {
-    border-block-style: var(--tw-border-style);
-    border-block-width: 1px;
-  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1474,6 +1491,12 @@
   .border-amber-300 {
     border-color: var(--color-amber-300);
   }
+  .border-amber-300\/40 {
+    border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-amber-300) 40%, transparent);
+    }
+  }
   .border-amber-500\/20 {
     border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1594,9 +1617,6 @@
   .bg-\(--rt-text-primary\) {
     background-color: var(--rt-text-primary);
   }
-  .bg-\[var\(--rt-brand-color\)\] {
-    background-color: var(--rt-brand-color);
-  }
   .bg-amber-50 {
     background-color: var(--color-amber-50);
   }
@@ -1708,6 +1728,12 @@
   .bg-slate-100 {
     background-color: var(--color-slate-100);
   }
+  .bg-slate-950\/70 {
+    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-slate-950) 70%, transparent);
+    }
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1970,6 +1996,9 @@
   .text-\[0\.85rem\] {
     font-size: 0.85rem;
   }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
   .text-\[11px\] {
     font-size: 11px;
   }
@@ -2005,6 +2034,14 @@
     --tw-tracking: 0.2em;
     letter-spacing: 0.2em;
   }
+  .tracking-\[0\.16em\] {
+    --tw-tracking: 0.16em;
+    letter-spacing: 0.16em;
+  }
+  .tracking-\[0\.24em\] {
+    --tw-tracking: 0.24em;
+    letter-spacing: 0.24em;
+  }
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
@@ -2013,9 +2050,6 @@
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
   }
-  .break-words {
-    overflow-wrap: break-word;
-  }
   .break-all {
     word-break: break-all;
   }
@@ -2064,6 +2098,12 @@
   .text-amber-800 {
     color: var(--color-amber-800);
   }
+  .text-amber-900 {
+    color: var(--color-amber-900);
+  }
+  .text-amber-950 {
+    color: var(--color-amber-950);
+  }
   .text-blue-700 {
     color: var(--color-blue-700);
   }
@@ -2124,6 +2164,12 @@
   .text-sky-700 {
     color: var(--color-sky-700);
   }
+  .text-sky-900 {
+    color: var(--color-sky-900);
+  }
+  .text-sky-950 {
+    color: var(--color-sky-950);
+  }
   .text-slate-500 {
     color: var(--color-slate-500);
   }
@@ -2196,6 +2242,9 @@
   .opacity-80 {
     opacity: 80%;
   }
+  .opacity-85 {
+    opacity: 85%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -2246,16 +2295,17 @@
   .outline-transparent {
     outline-color: transparent;
   }
-  .blur-2xl {
-    --tw-blur: blur(var(--blur-2xl));
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
   .\!filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
   }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2281,6 +2331,10 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
   .duration-300 {
     --tw-duration: 300ms;
     transition-duration: 300ms;
@@ -2584,6 +2638,11 @@
       cursor: not-allowed;
     }
   }
+  .disabled\:bg-\(--rt-raised-background\) {
+    &:disabled {
+      background-color: var(--rt-raised-background);
+    }
+  }
   .disabled\:opacity-60 {
     &:disabled {
       opacity: 60%;
@@ -2973,11 +3032,6 @@
       justify-content: space-between;
     }
   }
-  .md\:justify-end {
-    @media (width >= 768px) {
-      justify-content: flex-end;
-    }
-  }
   .md\:gap-3 {
     @media (width >= 768px) {
       gap: calc(var(--spacing) * 3);
@@ -3182,11 +3236,6 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .lg\:grid-cols-6 {
-    @media (width >= 1024px) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-  }
   .lg\:grid-cols-12 {
     @media (width >= 1024px) {
       grid-template-columns: repeat(12, minmax(0, 1fr));
@@ -3332,6 +3381,11 @@
       grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr);
     }
   }
+  .xl\:grid-cols-\[minmax\(0\,1fr\)_360px\] {
+    @media (width >= 1280px) {
+      grid-template-columns: minmax(0,1fr) 360px;
+    }
+  }
   .xl\:flex-row {
     @media (width >= 1280px) {
       flex-direction: row;
@@ -3603,6 +3657,42 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -3675,6 +3765,15 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";

package/types/rolatech-angular-components.d.ts

@@ -238,6 +238,7 @@ declare class DrawerComponent implements AfterContentInit, AfterContentChecked {
     hrefOf(item: LINK): string | undefined;
     isExternal(item: LINK): boolean;
     isNextItemChildren(index: number): boolean;
+    isPreviousItemChildren(index: number): boolean;
     init(isMobile: boolean): void;
     ngAfterContentInit(): void;
     ngAfterContentChecked(): void;
@@ -320,6 +321,12 @@ declare class LayoutComponent implements OnInit, AfterContentInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutComponent, "rolatech-layout", never, {}, {}, ["topbar", "drawer", "page", "guide"], ["rolatech-topbar", "rolatech-drawer", "rolatech-mini-guide", "rolatech-page", "rolatech-footer"], true, never>;
 }
 
+declare class AppShellComponent {
+    readonly links: _angular_core.InputSignal<NavLink[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppShellComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppShellComponent, "rolatech-app-shell", never, { "links": { "alias": "links"; "required": false; "isSignal": true; }; }, {}, never, ["[shell-topbar]", "*", "[shell-footer]"], true, never>;
+}
+
 declare class FooterComponent {
     hostId: string;
     hasClass: boolean;
@@ -1018,5 +1025,5 @@ interface Message {
     streaming?: boolean;
 }
 
-export { APP_LAYOUT, AcceptDialogComponent, AccordionComponent, AngularComponentsModule, AppPageComponent, AvatarComponent, BaseComponent, ChatBox, ChipBarComponent, ConfirmationComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, ContainerComponent, ContentComponent, ConversationContent, ConversationHeader, ConversationInput, ConversationMessage, DrawerComponent, EditorComponent, EmptyComponent, EnumSelect, FilterComponent, FolderComponent, FooterComponent, IconButtonComponent, IconComponent, ImageComponent, ImagePlaceholderComponent, ImagePreviewDialogComponent, InputComponent, LayoutComponent, ListComponent, Loading, LocationSelectorComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuIconComponent, MenuUserComponent, MiniGuideComponent, NotFoundComponent, PaginatorComponent, PanelComponent, PanelHeaderComponent, PdfViewerComponent, RejectDialogComponent, ResizableContainerComponent, RichGridMediaComponent, RichItemComponent, RichLabelComponent, RichViewComponent, SearchBar, SearchIcon, Skeleton, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TabComponent, TableComponent, TabsComponent, ThumbnailComponent, TitleComponent, ToolbarComponent, TopbarAvatarMenuComponent, TopbarComponent, VideoUpload, WechatConnectDialogComponent, provideAngularLayout };
+export { APP_LAYOUT, AcceptDialogComponent, AccordionComponent, AngularComponentsModule, AppPageComponent, AppShellComponent, AvatarComponent, BaseComponent, ChatBox, ChipBarComponent, ConfirmationComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, ContainerComponent, ContentComponent, ConversationContent, ConversationHeader, ConversationInput, ConversationMessage, DrawerComponent, EditorComponent, EmptyComponent, EnumSelect, FilterComponent, FolderComponent, FooterComponent, IconButtonComponent, IconComponent, ImageComponent, ImagePlaceholderComponent, ImagePreviewDialogComponent, InputComponent, LayoutComponent, ListComponent, Loading, LocationSelectorComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuIconComponent, MenuUserComponent, MiniGuideComponent, NotFoundComponent, PaginatorComponent, PanelComponent, PanelHeaderComponent, PdfViewerComponent, RejectDialogComponent, ResizableContainerComponent, RichGridMediaComponent, RichItemComponent, RichLabelComponent, RichViewComponent, SearchBar, SearchIcon, Skeleton, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TabComponent, TableComponent, TabsComponent, ThumbnailComponent, TitleComponent, ToolbarComponent, TopbarAvatarMenuComponent, TopbarComponent, VideoUpload, WechatConnectDialogComponent, provideAngularLayout };
 export type { AppLayoutConfig, AppTopbarConfig, Column, DrawerConfig, Message, MiniGuide, Role, TabMode, TableData };