ngx-strata 0.2.2 → 0.2.3

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.
Files changed (9) hide show
  1. package/assets/styles/components/modal.scss +1 -0
  2. package/assets/styles/components/select.scss +17 -7
  3. package/dist/strata/strata.css +1 -1
  4. package/fesm2022/ngx-strata.mjs +99 -76
  5. package/fesm2022/ngx-strata.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/skills/ngx-strata/SKILL.md +63 -47
  8. package/skills/ngx-strata/components/shell.md +2 -2
  9. package/types/ngx-strata.d.ts +4 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ngx-strata",
3
- "version": "0.2.2",
3
+ "version": "0.2.3",
4
4
  "description": "A simple UI framework for quickly prototyping angular applications with a bit of flair.",
5
5
  "license": "MIT",
6
6
  "peerDependencies": {
package/skills/ngx-strata/SKILL.md CHANGED
@@ -5,31 +5,29 @@ description: "Instructions for using the ngx-strata UI component library"
5
5
 
6
6
  # ngx-strata Component Manual (Index)
7
7
 
8
- You are working in a project that uses **ngx-strata**, a modern Angular UI component library. Use this index to locate the specific component documentation you need.
8
+ You are working in a project that uses **ngx-strata**, a modern Angular UI
9
+ component library. Use this index to locate the specific component documentation
10
+ you need.
9
11
 
10
12
  ## Global Setup
11
13
 
12
14
  ### 1. Style Setup
13
- Ensure the core Strata CSS is included in your global styles (e.g., \`styles.scss\` or \`angular.json\`):
14
- \`\`\`scss
15
- @import 'ngx-strata/strata.css';
16
- \`\`\`
15
+
16
+ Ensure the core Strata CSS is included in your global styles (e.g.,
17
+ \`styles.scss\` or \`angular.json\`): \`\`\`scss @import
18
+ 'ngx-strata/strata.css'; \`\`\`
17
19
 
18
20
  ### 2. Provider Setup
19
- The application should be configured with Strata. Use the global provider in \`app.config.ts\`:
20
-
21
- \`\`\`typescript
22
- import { provideStrata } from 'ngx-strata';
23
-
24
- export const appConfig: ApplicationConfig = {
25
- providers: [
26
- provideStrata({
27
- includeBaseIcons: true,
28
- tooltipDelayMs: 500
29
- })
30
- ]
31
- };
32
- ```
21
+
22
+ The application should be configured with Strata. Use the global provider in
23
+ \`app.config.ts\`:
24
+
25
+ \`\`\`typescript import { provideStrata } from 'ngx-strata';
26
+
27
+ export const appConfig: ApplicationConfig = { providers: [ provideStrata({
28
+ includeBaseIcons: true, tooltipDelayMs: 500 }) ] };
29
+
30
+ ````
33
31
  Custom icons should be registered using the `provideIcons()` provider during bootstrap.
34
32
 
35
33
  ### 3. Application Shell
@@ -37,23 +35,20 @@ Wrap your root application component (usually `app.component.html`) in the Strat
37
35
 
38
36
  ```html
39
37
  <st-shell>
40
- <!-- Optional Sidebar -->
41
- <st-sidemenu slot="sidebar">...</st-sidemenu>
42
-
43
38
  <!-- Main Content -->
44
- <div slot="content">
45
- <router-outlet></router-outlet>
46
- </div>
39
+ <router-outlet></router-outlet>
47
40
  </st-shell>
48
- ```
41
+ ````
49
42
 
50
43
  ---
51
44
 
52
45
  ## Theming & Variables
53
46
 
54
- Do not hardcode colors or spacing values. Always use the built-in Strata CSS variables to ensure the app matches the active theme (light/dark mode).
47
+ Do not hardcode colors or spacing values. Always use the built-in Strata CSS
48
+ variables to ensure the app matches the active theme (light/dark mode).
55
49
 
56
50
  **Key Color Variables:**
51
+
57
52
  - `--st-color-bg-default`: Standard background.
58
53
  - `--st-color-bg-raised`: Slightly elevated background (cards, modals).
59
54
  - `--st-color-text-primary`: Standard text.
@@ -62,45 +57,66 @@ Do not hardcode colors or spacing values. Always use the built-in Strata CSS var
62
57
  - `--st-color-accent-default`: Primary brand accent color.
63
58
 
64
59
  **Key Spacing Variables:**
60
+
65
61
  - `--st-space-1` (4px) to `--st-space-10` (40px)
66
62
 
67
63
  ---
68
64
 
69
65
  ## Component Index
70
66
 
71
- To save tokens and context window space, the detailed API and usage instructions for each component are stored in separate files.
67
+ To save tokens and context window space, the detailed API and usage instructions
68
+ for each component are stored in separate files.
72
69
 
73
70
  **Before using a component, read its dedicated file:**
74
71
 
75
- - **Accordion** (`st-accordion-group`): Read [`components/accordion.md`](components/accordion.md)
76
- - **Action-menu** (`st-action-menu`): Read [`components/action-menu.md`](components/action-menu.md)
72
+ - **Accordion** (`st-accordion-group`): Read
73
+ [`components/accordion.md`](components/accordion.md)
74
+ - **Action-menu** (`st-action-menu`): Read
75
+ [`components/action-menu.md`](components/action-menu.md)
77
76
  - **Alert** (`st-alert`): Read [`components/alert.md`](components/alert.md)
78
77
  - **Avatar** (`st-avatar`): Read [`components/avatar.md`](components/avatar.md)
79
- - **Breadcrumb** (`st-breadcrumb`): Read [`components/breadcrumb.md`](components/breadcrumb.md)
78
+ - **Breadcrumb** (`st-breadcrumb`): Read
79
+ [`components/breadcrumb.md`](components/breadcrumb.md)
80
80
  - **Button** (`[stButton]`): Read [`components/button.md`](components/button.md)
81
81
  - **Card** (`st-card`): Read [`components/card.md`](components/card.md)
82
- - **Checkbox** (`st-checkbox`): Read [`components/checkbox.md`](components/checkbox.md)
83
- - **Divider** (`st-divider`): Read [`components/divider.md`](components/divider.md)
82
+ - **Checkbox** (`st-checkbox`): Read
83
+ [`components/checkbox.md`](components/checkbox.md)
84
+ - **Divider** (`st-divider`): Read
85
+ [`components/divider.md`](components/divider.md)
84
86
  - **Icon** (`st-icon`): Read [`components/icon.md`](components/icon.md)
85
- - **Input-field** (`[stAutoResize]`): Read [`components/input-field.md`](components/input-field.md)
87
+ - **Input-field** (`[stAutoResize]`): Read
88
+ [`components/input-field.md`](components/input-field.md)
86
89
  - **Item** (`st-item`): Read [`components/item.md`](components/item.md)
87
90
  - **Kbd** (`st-kbd`): Read [`components/kbd.md`](components/kbd.md)
88
- - **Message-state** (`st-message-state`): Read [`components/message-state.md`](components/message-state.md)
89
- - **Modal** (`st-alert-content`): Read [`components/modal.md`](components/modal.md)
90
- - **Notification** (`st-notification`): Read [`components/notification.md`](components/notification.md)
91
- - **Number-display** (`st-number-display`): Read [`components/number-display.md`](components/number-display.md)
92
- - **Overlay** (`[stOverlay]`): Read [`components/overlay.md`](components/overlay.md)
93
- - **Pagination** (`st-pagination`): Read [`components/pagination.md`](components/pagination.md)
94
- - **Progress** (`st-progress-linear`): Read [`components/progress.md`](components/progress.md)
91
+ - **Message-state** (`st-message-state`): Read
92
+ [`components/message-state.md`](components/message-state.md)
93
+ - **Modal** (`st-alert-content`): Read
94
+ [`components/modal.md`](components/modal.md)
95
+ - **Notification** (`st-notification`): Read
96
+ [`components/notification.md`](components/notification.md)
97
+ - **Number-display** (`st-number-display`): Read
98
+ [`components/number-display.md`](components/number-display.md)
99
+ - **Overlay** (`[stOverlay]`): Read
100
+ [`components/overlay.md`](components/overlay.md)
101
+ - **Pagination** (`st-pagination`): Read
102
+ [`components/pagination.md`](components/pagination.md)
103
+ - **Progress** (`st-progress-linear`): Read
104
+ [`components/progress.md`](components/progress.md)
95
105
  - **Radio** (`st-radio`): Read [`components/radio.md`](components/radio.md)
96
- - **Segmented-control** (`st-segmented-control`): Read [`components/segmented-control.md`](components/segmented-control.md)
106
+ - **Segmented-control** (`st-segmented-control`): Read
107
+ [`components/segmented-control.md`](components/segmented-control.md)
97
108
  - **Shell** (`st-shell`): Read [`components/shell.md`](components/shell.md)
98
- - **Sidemenu** (`[stSidemenuItem]`): Read [`components/sidemenu.md`](components/sidemenu.md)
99
- - **Single-select** (`[stSelectTrigger]`): Read [`components/single-select.md`](components/single-select.md)
109
+ - **Sidemenu** (`[stSidemenuItem]`): Read
110
+ [`components/sidemenu.md`](components/sidemenu.md)
111
+ - **Single-select** (`[stSelectTrigger]`): Read
112
+ [`components/single-select.md`](components/single-select.md)
100
113
  - **Slider** (`st-slider`): Read [`components/slider.md`](components/slider.md)
101
- - **Spinner** (`st-spinner`): Read [`components/spinner.md`](components/spinner.md)
114
+ - **Spinner** (`st-spinner`): Read
115
+ [`components/spinner.md`](components/spinner.md)
102
116
  - **Tabs** (`st-tab-item`): Read [`components/tabs.md`](components/tabs.md)
103
117
  - **Tag** (`st-tag`): Read [`components/tag.md`](components/tag.md)
104
- - **Text-stack** (`st-text-stack`): Read [`components/text-stack.md`](components/text-stack.md)
105
- - **Theming** (`[stTheme]`): Read [`components/theming.md`](components/theming.md)
118
+ - **Text-stack** (`st-text-stack`): Read
119
+ [`components/text-stack.md`](components/text-stack.md)
120
+ - **Theming** (`[stTheme]`): Read
121
+ [`components/theming.md`](components/theming.md)
106
122
  - **Toggle** (`st-toggle`): Read [`components/toggle.md`](components/toggle.md)
package/skills/ngx-strata/components/shell.md CHANGED
@@ -10,8 +10,8 @@ This file contains the AI documentation for the `shell` feature and its related
10
10
 
11
11
  ```html
12
12
  <st-shell>
13
- <st-sidemenu slot="sidebar">...</st-sidemenu>
14
- <div slot="content">Main App Content</div>
13
+ <!-- Main App Content -->
14
+ <router-outlet></router-outlet>
15
15
  </st-shell>
16
16
  ```
17
17
 
package/types/ngx-strata.d.ts CHANGED
@@ -122,6 +122,7 @@ interface StrataConfig {
122
122
  shift?: string;
123
123
  alt?: string;
124
124
  };
125
+ overlayViewportBuffer?: number;
125
126
  }
126
127
  declare const STRATA_CONFIG: InjectionToken<StrataConfig>;
127
128
 
@@ -454,8 +455,10 @@ declare class StrataOverlayDirective implements OnChanges, OnDestroy {
454
455
  overlayOpen: _angular_core.ModelSignal<boolean>;
455
456
  overlayPlacement: _angular_core.InputSignal<Placement>;
456
457
  overlayOffset: _angular_core.InputSignal<number>;
458
+ overlayFitViewport: _angular_core.InputSignal<boolean>;
457
459
  private readonly element;
458
460
  private readonly viewContainerRef;
461
+ private readonly config;
459
462
  private overlayEl?;
460
463
  private cleanup?;
461
464
  private viewRef?;
@@ -465,7 +468,7 @@ declare class StrataOverlayDirective implements OnChanges, OnDestroy {
465
468
  private destroy;
466
469
  ngOnDestroy(): void;
467
470
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataOverlayDirective, never>;
468
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrataOverlayDirective, "[stOverlay]", never, { "stOverlay": { "alias": "stOverlay"; "required": true; "isSignal": true; }; "overlayOpen": { "alias": "overlayOpen"; "required": false; "isSignal": true; }; "overlayPlacement": { "alias": "overlayPlacement"; "required": false; "isSignal": true; }; "overlayOffset": { "alias": "overlayOffset"; "required": false; "isSignal": true; }; }, { "overlayOpen": "overlayOpenChange"; }, never, never, true, never>;
471
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrataOverlayDirective, "[stOverlay]", never, { "stOverlay": { "alias": "stOverlay"; "required": true; "isSignal": true; }; "overlayOpen": { "alias": "overlayOpen"; "required": false; "isSignal": true; }; "overlayPlacement": { "alias": "overlayPlacement"; "required": false; "isSignal": true; }; "overlayOffset": { "alias": "overlayOffset"; "required": false; "isSignal": true; }; "overlayFitViewport": { "alias": "overlayFitViewport"; "required": false; "isSignal": true; }; }, { "overlayOpen": "overlayOpenChange"; }, never, never, true, never>;
469
472
  }
470
473
 
471
474
  declare class StrataPaginationComponent {