@kodaris/krubble-app-components 1.0.35 → 1.0.37

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 (14) hide show
  1. package/breaking-changes.json +1 -1
  2. package/dist/krubble-app.bundled.js +21 -92
  3. package/dist/krubble-app.bundled.js.map +1 -1
  4. package/dist/krubble-app.bundled.min.js +36 -78
  5. package/dist/krubble-app.bundled.min.js.map +1 -1
  6. package/dist/krubble-app.umd.js +21 -92
  7. package/dist/krubble-app.umd.js.map +1 -1
  8. package/dist/krubble-app.umd.min.js +34 -76
  9. package/dist/krubble-app.umd.min.js.map +1 -1
  10. package/dist/screen-nav.d.ts +8 -19
  11. package/dist/screen-nav.d.ts.map +1 -1
  12. package/dist/screen-nav.js +21 -92
  13. package/dist/screen-nav.js.map +1 -1
  14. package/package.json +1 -1
package/dist/screen-nav.d.ts CHANGED
@@ -18,9 +18,8 @@ export interface KRScreenNavItem {
18
18
  * ## Usage
19
19
  * ```html
20
20
  * <kr-screen-nav
21
- * title="Acme Corporation"
22
- * subtitle="Company"
23
- * backUrl="/crm/companies"
21
+ * label="Acme Corporation"
22
+ * subLabel="Company"
24
23
  * .navItems=${[
25
24
  * { id: 'overview', label: 'Overview', url: '/companies/123/overview' },
26
25
  * { id: 'contacts', label: 'Contacts', url: '/companies/123/contacts' },
@@ -34,26 +33,21 @@ export interface KRScreenNavItem {
34
33
  *
35
34
  * @slot - The main screen content
36
35
  *
37
- * @property {string} title - Main title (e.g., entity name like "Acme Corporation")
38
- * @property {string} subtitle - Subtitle/label (e.g., entity type like "Company")
39
- * @property {string} backUrl - URL to navigate back to (e.g., the table/list view)
36
+ * @property {string} label - Main label (e.g., entity name like "Acme Corporation")
37
+ * @property {string} subLabel - Sub label (e.g., entity type like "Company")
40
38
  * @property {KRScreenNavItem[]} navItems - Navigation items as JSON array
41
39
  * @property {string} activeId - Currently active item ID
42
40
  */
43
41
  export declare class KRScreenNav extends LitElement {
44
42
  static styles: import("lit").CSSResult;
45
43
  /**
46
- * Main title (e.g., entity name like "Acme Corporation")
44
+ * Main label (e.g., entity name like "Acme Corporation")
47
45
  */
48
- title: string;
49
- /**
50
- * Subtitle/label (e.g., entity type like "Company")
51
- */
52
- subtitle: string;
46
+ label: string;
53
47
  /**
54
- * URL to navigate back to (e.g., the table/list view)
48
+ * Sub label (e.g., entity type like "Company")
55
49
  */
56
- backUrl: string;
50
+ subLabel: string;
57
51
  /**
58
52
  * Navigation items
59
53
  */
@@ -78,11 +72,6 @@ export declare class KRScreenNav extends LitElement {
78
72
  * @param item - The nav item that was clicked
79
73
  */
80
74
  private handleNavItemClick;
81
- /**
82
- * Updates the active nav item based on the current URL.
83
- * Called automatically by `KRScreenNavDirective` on Angular route changes.
84
- */
85
- updateActiveNavItem(): void;
86
75
  render(): import("lit-html").TemplateResult<1>;
87
76
  }
88
77
  declare global {
package/dist/screen-nav.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"screen-nav.d.ts","sourceRoot":"","sources":["../src/screen-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BA8HpB;IAEF;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,QAAQ,EAAE,eAAe,EAAE,CAAM;IAEjC;;OAEG;IAEH,QAAQ,SAAM;IAEd;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,kBAAkB;IAe1B;;;OAGG;IACI,mBAAmB;IAiBjB,MAAM;CAyChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}
1
+ {"version":3,"file":"screen-nav.d.ts","sourceRoot":"","sources":["../src/screen-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BA2FpB;IAEF;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,QAAQ,EAAE,eAAe,EAAE,CAAM;IAEjC;;OAEG;IAEH,QAAQ,SAAM;IAEd;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,kBAAkB;IAejB,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}
package/dist/screen-nav.js CHANGED
@@ -14,9 +14,8 @@ import { customElement, property } from 'lit/decorators.js';
14
14
  * ## Usage
15
15
  * ```html
16
16
  * <kr-screen-nav
17
- * title="Acme Corporation"
18
- * subtitle="Company"
19
- * backUrl="/crm/companies"
17
+ * label="Acme Corporation"
18
+ * subLabel="Company"
20
19
  * .navItems=${[
21
20
  * { id: 'overview', label: 'Overview', url: '/companies/123/overview' },
22
21
  * { id: 'contacts', label: 'Contacts', url: '/companies/123/contacts' },
@@ -30,9 +29,8 @@ import { customElement, property } from 'lit/decorators.js';
30
29
  *
31
30
  * @slot - The main screen content
32
31
  *
33
- * @property {string} title - Main title (e.g., entity name like "Acme Corporation")
34
- * @property {string} subtitle - Subtitle/label (e.g., entity type like "Company")
35
- * @property {string} backUrl - URL to navigate back to (e.g., the table/list view)
32
+ * @property {string} label - Main label (e.g., entity name like "Acme Corporation")
33
+ * @property {string} subLabel - Sub label (e.g., entity type like "Company")
36
34
  * @property {KRScreenNavItem[]} navItems - Navigation items as JSON array
37
35
  * @property {string} activeId - Currently active item ID
38
36
  */
@@ -40,17 +38,13 @@ let KRScreenNav = class KRScreenNav extends LitElement {
40
38
  constructor() {
41
39
  super(...arguments);
42
40
  /**
43
- * Main title (e.g., entity name like "Acme Corporation")
41
+ * Main label (e.g., entity name like "Acme Corporation")
44
42
  */
45
- this.title = '';
43
+ this.label = '';
46
44
  /**
47
- * Subtitle/label (e.g., entity type like "Company")
45
+ * Sub label (e.g., entity type like "Company")
48
46
  */
49
- this.subtitle = '';
50
- /**
51
- * URL to navigate back to (e.g., the table/list view)
52
- */
53
- this.backUrl = '';
47
+ this.subLabel = '';
54
48
  /**
55
49
  * Navigation items
56
50
  */
@@ -88,34 +82,14 @@ let KRScreenNav = class KRScreenNav extends LitElement {
88
82
  e.preventDefault();
89
83
  }
90
84
  }
91
- /**
92
- * Updates the active nav item based on the current URL.
93
- * Called automatically by `KRScreenNavDirective` on Angular route changes.
94
- */
95
- updateActiveNavItem() {
96
- const currentPath = window.location.pathname;
97
- const activeItem = this.navItems.find(item => {
98
- if (!item.url)
99
- return false;
100
- // Handle both absolute and relative URLs
101
- if (item.url.startsWith('./')) {
102
- const segment = item.url.replace(/^\.\//, '');
103
- return currentPath.endsWith('/' + segment);
104
- }
105
- return currentPath === item.url || currentPath.startsWith(item.url + '/');
106
- });
107
- if (activeItem) {
108
- this.activeId = activeItem.id;
109
- }
110
- }
111
85
  render() {
112
86
  return html `
113
87
  <nav class="nav">
114
- ${this.title ? html `
88
+ ${this.label ? html `
115
89
  <div class="nav-header">
116
90
  <div class="nav-header__text">
117
- ${this.subtitle ? html `<div class="nav-header__subtitle">${this.subtitle}</div>` : nothing}
118
- <div class="nav-header__title">${this.title}</div>
91
+ ${this.subLabel ? html `<div class="nav-header__subtitle">${this.subLabel}</div>` : nothing}
92
+ <div class="nav-header__title">${this.label}</div>
119
93
  </div>
120
94
  </div>
121
95
  ` : nothing}
@@ -137,13 +111,6 @@ let KRScreenNav = class KRScreenNav extends LitElement {
137
111
  <div class="content__main">
138
112
  <slot></slot>
139
113
  </div>
140
- <!--<div class="breadcrumbs">
141
- <a href="/crm">CRM</a>
142
- <span class="breadcrumbs__separator">/</span>
143
- <a href="/crm/companies">Companies</a>
144
- <span class="breadcrumbs__separator">/</span>
145
- <span class="breadcrumbs__current">Acme Corporation</span>
146
- </div>-->
147
114
  </main>
148
115
  `;
149
116
  }
@@ -205,13 +172,14 @@ KRScreenNav.styles = css `
205
172
  .nav-item {
206
173
  display: block;
207
174
  padding: 0 12px;
208
- height: 40px;
209
- line-height: 40px;
210
- letter-spacing: 0.13px;
175
+ height: 32px;
176
+ line-height: 32px;
177
+ letter-spacing: 0.01em;
211
178
  color: rgb(32, 33, 36);
212
179
  text-decoration: none;
213
180
  font-size: 13px;
214
- font-weight: 500;
181
+ font-weight: 400;
182
+ font-family: inherit;
215
183
  border-radius: 8px;
216
184
  transition: all 0.15s ease;
217
185
  }
@@ -222,9 +190,9 @@ KRScreenNav.styles = css `
222
190
  }
223
191
 
224
192
  .nav-item--active {
225
- background: rgba(22, 48, 82, 0.08);
226
- color: #163052;
227
- font-weight: 600;
193
+ background: #e1e9f6;
194
+ color: #1a2332;
195
+ font-weight: 700;
228
196
  }
229
197
 
230
198
  .content {
@@ -234,42 +202,6 @@ KRScreenNav.styles = css `
234
202
  flex-direction: column;
235
203
  }
236
204
 
237
- .breadcrumbs {
238
- height: 32px;
239
- padding: 0 1rem;
240
- display: flex;
241
- align-items: center;
242
- gap: 6px;
243
- font-size: 12px;
244
- color: #6b7280;
245
- //background: #f9fafb;
246
- background: #beea4e;
247
- border-top: 1px solid #e5e7eb;
248
- flex-shrink: 0;
249
- }
250
-
251
- .breadcrumbs a {
252
- //color: #6b7280;
253
- color: #10172a;
254
- font-size: 13px;
255
- font-weight: 600;
256
- text-decoration: none;
257
- }
258
-
259
- .breadcrumbs a:hover {
260
- color: #111827;
261
- text-decoration: underline;
262
- }
263
-
264
- .breadcrumbs__separator {
265
- color: #d1d5db;
266
- }
267
-
268
- .breadcrumbs__current {
269
- color: #111827;
270
- font-weight: 500;
271
- }
272
-
273
205
  .content__main {
274
206
  flex: 1;
275
207
  overflow-y: auto;
@@ -277,13 +209,10 @@ KRScreenNav.styles = css `
277
209
  `;
278
210
  __decorate([
279
211
  property({ type: String })
280
- ], KRScreenNav.prototype, "title", void 0);
281
- __decorate([
282
- property({ type: String })
283
- ], KRScreenNav.prototype, "subtitle", void 0);
212
+ ], KRScreenNav.prototype, "label", void 0);
284
213
  __decorate([
285
214
  property({ type: String })
286
- ], KRScreenNav.prototype, "backUrl", void 0);
215
+ ], KRScreenNav.prototype, "subLabel", void 0);
287
216
  __decorate([
288
217
  property({ type: Array })
289
218
  ], KRScreenNav.prototype, "navItems", void 0);
package/dist/screen-nav.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"screen-nav.js","sourceRoot":"","sources":["../src/screen-nav.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"screen-nav.js","sourceRoot":"","sources":["../src/screen-nav.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAc5D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QA8FL;;WAEG;QAEH,UAAK,GAAG,EAAE,CAAC;QAEX;;WAEG;QAEH,aAAQ,GAAG,EAAE,CAAC;QAEd;;WAEG;QAEH,aAAQ,GAAsB,EAAE,CAAC;QAEjC;;WAEG;QAEH,aAAQ,GAAG,EAAE,CAAC;IAkEhB,CAAC;IAhEC;;;;;;;;;;;;;;OAcG;IACK,kBAAkB,CAAC,CAAQ,EAAE,IAAqB;QACxD,MAAM,QAAQ,GAAG,IAAI,WAAW,CAAC,gBAAgB,EAAE;YACjD,MAAM,EAAE,EAAE,IAAI,EAAE;YAChB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAE7B,uEAAuE;QACvE,IAAI,QAAQ,CAAC,gBAAgB,EAAE,CAAC;YAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;;;gBAGX,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,qCAAqC,IAAI,CAAC,QAAQ,QAAQ,CAAC,CAAC,CAAC,OAAO;+CACzD,IAAI,CAAC,KAAK;;;SAGhD,CAAC,CAAC,CAAC,OAAO;;;cAGL,IAAI,CAAC,QAAQ,CAAC,GAAG,CACjB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;oCAEQ,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;yBAC9D,IAAI,CAAC,GAAG,IAAI,GAAG;2BACb,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,IAAI,CAAC;;oBAErD,IAAI,CAAC,KAAK;;eAEf,CACF;;;;;;;;;KASR,CAAC;IACJ,CAAC;;AApLe,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2F3B,AA3FqB,CA2FpB;AAMF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAChB;AAMX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACb;AAMd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6CACO;AAMjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACb;AApHH,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAsLvB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kodaris/krubble-app-components",
3
- "version": "1.0.35",
3
+ "version": "1.0.37",
4
4
  "description": "Krubble Application Components - Smart components with business logic",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",