codexly-ui 0.0.18 → 0.0.19
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/codexly-ui.mjs +6 -15
- package/fesm2022/codexly-ui.mjs.map +1 -1
- package/index.d.ts +0 -3
- package/package.json +1 -1
package/fesm2022/codexly-ui.mjs
CHANGED
|
@@ -11036,7 +11036,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
11036
11036
|
}]
|
|
11037
11037
|
}], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }] } });
|
|
11038
11038
|
|
|
11039
|
-
const CLX_MENU_COLOR = new InjectionToken('CLX_MENU_COLOR');
|
|
11040
11039
|
// ── Item geometry ──────────────────────────────────────────────────────────────
|
|
11041
11040
|
const NAV_ITEM_BASE = 'flex items-center gap-3 w-full text-sm font-medium transition-colors duration-150 cursor-pointer select-none';
|
|
11042
11041
|
const NAV_ITEM_L1 = 'px-6 py-3';
|
|
@@ -11054,21 +11053,18 @@ class ClxMenuItemComponent {
|
|
|
11054
11053
|
color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
11055
11054
|
nested = input(false, ...(ngDevMode ? [{ debugName: "nested" }] : []));
|
|
11056
11055
|
collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
|
|
11057
|
-
_menuColorFn = inject(CLX_MENU_COLOR, { optional: true });
|
|
11058
|
-
_hasParent = !!this._menuColorFn;
|
|
11059
|
-
_resolvedColor = computed(() => this._menuColorFn?.() ?? this.color(), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : []));
|
|
11060
11056
|
_geom = computed(() => {
|
|
11061
11057
|
if (this.collapsed())
|
|
11062
11058
|
return 'px-0 justify-center';
|
|
11063
11059
|
return this.nested() ? NAV_ITEM_L2 : NAV_ITEM_L1;
|
|
11064
11060
|
}, ...(ngDevMode ? [{ debugName: "_geom" }] : []));
|
|
11065
|
-
_iconCls = computed(() => resolveColor(this.
|
|
11061
|
+
_iconCls = computed(() => resolveColor(this.color()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
|
|
11066
11062
|
_idleCls = computed(() => {
|
|
11067
|
-
const t = resolveColor(this.
|
|
11063
|
+
const t = resolveColor(this.color());
|
|
11068
11064
|
return `${NAV_ITEM_BASE} ${this._geom()} ${NAV_ITEM_IDLE} ${t.hoverBgMuted}`;
|
|
11069
11065
|
}, ...(ngDevMode ? [{ debugName: "_idleCls" }] : []));
|
|
11070
11066
|
_activeCls = computed(() => {
|
|
11071
|
-
const t = resolveColor(this.
|
|
11067
|
+
const t = resolveColor(this.color());
|
|
11072
11068
|
if (this.collapsed()) {
|
|
11073
11069
|
return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold`;
|
|
11074
11070
|
}
|
|
@@ -11085,7 +11081,7 @@ class ClxMenuItemComponent {
|
|
|
11085
11081
|
[title]="collapsed() ? label() : ''"
|
|
11086
11082
|
(click)="route() ? null : $event.preventDefault()">
|
|
11087
11083
|
@if (icon()) {
|
|
11088
|
-
<span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ||
|
|
11084
|
+
<span clx-icon [name]="icon()" size="sm" [class]="rla.isActive || nested() ? _iconCls() : 'text-slate-500'"></span>
|
|
11089
11085
|
}
|
|
11090
11086
|
@if (!collapsed()) {
|
|
11091
11087
|
<span class="flex-1 truncate">{{ label() }}</span>
|
|
@@ -11109,7 +11105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
11109
11105
|
[title]="collapsed() ? label() : ''"
|
|
11110
11106
|
(click)="route() ? null : $event.preventDefault()">
|
|
11111
11107
|
@if (icon()) {
|
|
11112
|
-
<span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ||
|
|
11108
|
+
<span clx-icon [name]="icon()" size="sm" [class]="rla.isActive || nested() ? _iconCls() : 'text-slate-500'"></span>
|
|
11113
11109
|
}
|
|
11114
11110
|
@if (!collapsed()) {
|
|
11115
11111
|
<span class="flex-1 truncate">{{ label() }}</span>
|
|
@@ -11171,9 +11167,7 @@ class ClxMenuComponent {
|
|
|
11171
11167
|
this._isExpanded.update(v => !v);
|
|
11172
11168
|
}
|
|
11173
11169
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11174
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" },
|
|
11175
|
-
{ provide: CLX_MENU_COLOR, useFactory: (self) => () => self.color(), deps: [ClxMenuComponent] },
|
|
11176
|
-
], queries: [{ propertyName: "_childItems", predicate: ClxMenuItemComponent, descendants: true }], ngImport: i0, template: `
|
|
11170
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, queries: [{ propertyName: "_childItems", predicate: ClxMenuItemComponent, descendants: true }], ngImport: i0, template: `
|
|
11177
11171
|
<button
|
|
11178
11172
|
type="button"
|
|
11179
11173
|
[class]="_buttonCls()"
|
|
@@ -11213,9 +11207,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
11213
11207
|
selector: 'clx-menu',
|
|
11214
11208
|
standalone: true,
|
|
11215
11209
|
imports: [ClxIconComponent],
|
|
11216
|
-
providers: [
|
|
11217
|
-
{ provide: CLX_MENU_COLOR, useFactory: (self) => () => self.color(), deps: [ClxMenuComponent] },
|
|
11218
|
-
],
|
|
11219
11210
|
template: `
|
|
11220
11211
|
<button
|
|
11221
11212
|
type="button"
|