@area8975/ui 0.2.2-dev.37 → 0.2.2-dev.39

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 (6) hide show
  1. package/CHANGELOG.md +1 -0
  2. package/fesm2022/area8975-ui.mjs +32 -9
  3. package/fesm2022/area8975-ui.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/theme.css +6 -0
  6. package/types/area8975-ui.d.ts +5 -0
package/CHANGELOG.md CHANGED
@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file. See [commit
8
8
 
9
9
  * add ui-disclosure, a trigger that shows and hides a panel, with section and whole-row triggers and a turning chevron
10
10
  * add `visibleOptions` to ui-table-filters options groups, showing the rest behind a "Show N more" toggle
11
+ * colour the sidebar with the `--sidebar-nav-foreground`, `--sidebar-nav-hover` and `--sidebar-nav-focus` tokens. Sidebar items and the collapse button follow them, and footer content can too by adding the `ui-sidebar-button` class
11
12
 
12
13
  ### Bug Fixes
13
14
 
package/fesm2022/area8975-ui.mjs CHANGED
@@ -670,7 +670,6 @@ function baseChartOptions(ink) {
670
670
  fontFamily: "inherit",
671
671
  foreColor: ink.muted,
672
672
  parentHeightOffset: 0,
673
- redrawOnParentResize: true,
674
673
  toolbar: { show: false },
675
674
  zoom: { enabled: false },
676
675
  animations: {
@@ -1060,11 +1059,13 @@ var UiChartComponent = class UiChartComponent {
1060
1059
  chart = signal(null, ...ngDevMode ? [{ debugName: "chart" }] : /* istanbul ignore next */ []);
1061
1060
  destroyed = false;
1062
1061
  drawnNames = [];
1062
+ host = inject(ElementRef);
1063
+ resizeObserver = null;
1063
1064
  constructor() {
1064
1065
  afterNextRender(async () => {
1065
1066
  const { default: Apex } = await import("apexcharts");
1066
1067
  if (this.destroyed) return;
1067
- const chart = new Apex(this.canvas().nativeElement, untracked(this.options));
1068
+ const chart = new Apex(this.canvas().nativeElement, this.withOwnParentResizing(untracked(this.options)));
1068
1069
  chart.addEventListener("updated", () => {
1069
1070
  this.applyHidden(chart);
1070
1071
  this.applyEmphasis();
@@ -1072,6 +1073,7 @@ var UiChartComponent = class UiChartComponent {
1072
1073
  this.drawnNames = this.seriesNames();
1073
1074
  await chart.render();
1074
1075
  this.chart.set(chart);
1076
+ this.redrawWhenResized(chart);
1075
1077
  this.applyHidden(chart);
1076
1078
  this.applyEmphasis();
1077
1079
  });
@@ -1082,7 +1084,7 @@ var UiChartComponent = class UiChartComponent {
1082
1084
  const names = this.seriesNames();
1083
1085
  const reordered = names.length === this.drawnNames.length && names.some((name, index) => name !== this.drawnNames[index]) && names.every((name) => this.drawnNames.includes(name));
1084
1086
  this.drawnNames = names;
1085
- chart.updateOptions(options, false, !reordered);
1087
+ chart.updateOptions(this.withOwnParentResizing(options), false, !reordered);
1086
1088
  });
1087
1089
  effect(() => {
1088
1090
  this.emphasis();
@@ -1097,9 +1099,30 @@ var UiChartComponent = class UiChartComponent {
1097
1099
  });
1098
1100
  inject(DestroyRef).onDestroy(() => {
1099
1101
  this.destroyed = true;
1102
+ this.resizeObserver?.disconnect();
1100
1103
  this.chart()?.destroy();
1101
1104
  });
1102
1105
  }
1106
+ withOwnParentResizing(options) {
1107
+ return {
1108
+ ...options,
1109
+ chart: {
1110
+ ...options.chart,
1111
+ redrawOnParentResize: false
1112
+ }
1113
+ };
1114
+ }
1115
+ redrawWhenResized(chart) {
1116
+ this.resizeObserver = new ResizeObserver(() => {
1117
+ if (!this.isDrawnAtHostSize()) chart.updateSeries(untracked(this.options).series ?? [], false);
1118
+ });
1119
+ this.resizeObserver.observe(this.host.nativeElement);
1120
+ }
1121
+ isDrawnAtHostSize() {
1122
+ const host = this.host.nativeElement;
1123
+ const drawn = this.canvas().nativeElement.querySelector(".apexcharts-canvas");
1124
+ return !!drawn && drawn.offsetWidth === host.offsetWidth && drawn.offsetHeight === host.offsetHeight;
1125
+ }
1103
1126
  applyHidden(chart) {
1104
1127
  const hidden = this.hiddenSeries();
1105
1128
  if (!this.canvas().nativeElement.querySelector(".apexcharts-inner .apexcharts-series")) return;
@@ -11128,8 +11151,8 @@ var UiSidebarComponent = class UiSidebarComponent {
11128
11151
  })],
11129
11152
  exportAs: ["uiSidebar"],
11130
11153
  ngImport: i0,
11131
- template: "<div class=\"ui-sidebar-backdrop\" aria-hidden=\"true\" (click)=\"isOpen.set(false)\">\n</div>\n\n<aside class=\"ui-sidebar-panel\">\n <div class=\"ui-sidebar-content\">\n <ng-content />\n </div>\n\n <footer class=\"ui-sidebar-footer\">\n <div class=\"ui-sidebar-footer-content\">\n <ng-content select=\"[sidebar-footer]\" />\n </div>\n\n <ui-button\n appearance=\"ghost\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"justify-center size-10 p-0!\"\n [ariaLabel]=\"isOpen() ? 'Collapse sidebar' : 'Expand sidebar'\"\n (click)=\"toggle()\"\n >\n <ng-icon\n name=\"heroChevronDoubleLeft\"\n size=\"16\"\n strokeWidth=\"2\"\n class=\"duration-300 shrink-0\"\n [class.rotate-180]=\"!isOpen()\"\n />\n </ui-button>\n </footer>\n</aside>\n\n@if (!isOpen()) {\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n class=\"ui-sidebar-open-btn\"\n classes=\"p-3! rounded-full! shadow-lg!\"\n ariaLabel=\"Open sidebar\"\n (click)=\"isOpen.set(true)\"\n >\n <ng-icon name=\"heroBars3\" size=\"20\" strokeWidth=\"2\" class=\"shrink-0\" />\n </ui-button>\n}\n",
11132
- styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:50}@media(width>=48rem){:host{pointer-events:auto}}@media(width>=48rem){:host{position:static}}@media(width>=48rem){:host{display:block}}@media(width>=48rem){:host{height:100%}}.ui-sidebar-backdrop{position:absolute;inset:0;background-color:color-mix(in srgb,#000 10%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@supports (color: color-mix(in lab,red,red)){.ui-sidebar-backdrop{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}@media(width>=48rem){.ui-sidebar-backdrop{display:none}}:host(.open) .ui-sidebar-backdrop{pointer-events:auto;opacity:100%}.ui-sidebar-panel{pointer-events:auto;position:absolute;inset-block:0px;left:0;display:flex;height:100%;width:calc(var(--spacing, .25rem) * 60);--tw-translate-x: -100%;translate:var(--tw-translate-x) var(--tw-translate-y);flex-direction:column;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--sidebar-line);background-color:var(--sidebar);transition-property:translate,width,visibility;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@media(width<48rem){.ui-sidebar-panel{visibility:hidden}}@media(width>=48rem){.ui-sidebar-panel{position:relative}}@media(width>=48rem){.ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 16)}}@media(width>=48rem){.ui-sidebar-panel{translate:none}}@media(width<48rem){:host(.open) .ui-sidebar-panel{visibility:visible;--tw-translate-x: 0px;translate:var(--tw-translate-x) var(--tw-translate-y)}}@media(width>=48rem){:host(.open) .ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 60)}}.ui-sidebar-content{display:flex;min-height:0px;flex-grow:1;flex-direction:column;align-items:flex-start;row-gap:var(--spacing, .25rem);overflow-x:hidden;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-content{align-items:stretch}.ui-sidebar-footer{display:flex;flex-shrink:0;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-footer{flex-direction:row;justify-content:flex-end}.ui-sidebar-footer-content{display:flex;min-width:0px;justify-content:center}.ui-sidebar-footer-content:empty{display:none}:host(.open) .ui-sidebar-footer-content{flex-grow:1;justify-content:flex-start}.ui-sidebar-open-btn{pointer-events:auto;position:fixed;bottom:calc(var(--spacing, .25rem) * 4);left:calc(var(--spacing, .25rem) * 4)}@media(width>=48rem){.ui-sidebar-open-btn{display:none}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
11154
+ template: "<div class=\"ui-sidebar-backdrop\" aria-hidden=\"true\" (click)=\"isOpen.set(false)\">\n</div>\n\n<aside class=\"ui-sidebar-panel\">\n <div class=\"ui-sidebar-content\">\n <ng-content />\n </div>\n\n <footer class=\"ui-sidebar-footer\">\n <div class=\"ui-sidebar-footer-content\">\n <ng-content select=\"[sidebar-footer]\" />\n </div>\n\n <ui-button\n appearance=\"ghost\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"ui-sidebar-button justify-center size-10 p-0!\"\n [ariaLabel]=\"isOpen() ? 'Collapse sidebar' : 'Expand sidebar'\"\n (click)=\"toggle()\"\n >\n <ng-icon\n name=\"heroChevronDoubleLeft\"\n size=\"16\"\n strokeWidth=\"2\"\n class=\"duration-300 shrink-0\"\n [class.rotate-180]=\"!isOpen()\"\n />\n </ui-button>\n </footer>\n</aside>\n\n@if (!isOpen()) {\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n class=\"ui-sidebar-open-btn\"\n classes=\"p-3! rounded-full! shadow-lg!\"\n ariaLabel=\"Open sidebar\"\n (click)=\"isOpen.set(true)\"\n >\n <ng-icon name=\"heroBars3\" size=\"20\" strokeWidth=\"2\" class=\"shrink-0\" />\n </ui-button>\n}\n",
11155
+ styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:50}@media(width>=48rem){:host{pointer-events:auto}}@media(width>=48rem){:host{position:static}}@media(width>=48rem){:host{display:block}}@media(width>=48rem){:host{height:100%}}.ui-sidebar-backdrop{position:absolute;inset:0;background-color:color-mix(in srgb,#000 10%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@supports (color: color-mix(in lab,red,red)){.ui-sidebar-backdrop{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}@media(width>=48rem){.ui-sidebar-backdrop{display:none}}:host(.open) .ui-sidebar-backdrop{pointer-events:auto;opacity:100%}.ui-sidebar-panel{pointer-events:auto;position:absolute;inset-block:0px;left:0;display:flex;height:100%;width:calc(var(--spacing, .25rem) * 60);--tw-translate-x: -100%;translate:var(--tw-translate-x) var(--tw-translate-y);flex-direction:column;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--sidebar-line);background-color:var(--sidebar);transition-property:translate,width,visibility;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@media(width<48rem){.ui-sidebar-panel{visibility:hidden}}@media(width>=48rem){.ui-sidebar-panel{position:relative}}@media(width>=48rem){.ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 16)}}@media(width>=48rem){.ui-sidebar-panel{translate:none}}@media(width<48rem){:host(.open) .ui-sidebar-panel{visibility:visible;--tw-translate-x: 0px;translate:var(--tw-translate-x) var(--tw-translate-y)}}@media(width>=48rem){:host(.open) .ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 60)}}.ui-sidebar-content{display:flex;min-height:0px;flex-grow:1;flex-direction:column;align-items:flex-start;row-gap:var(--spacing, .25rem);overflow-x:hidden;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-content{align-items:stretch}.ui-sidebar-footer{display:flex;flex-shrink:0;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-footer{flex-direction:row;justify-content:flex-end}.ui-sidebar-footer-content{display:flex;min-width:0px;justify-content:center}.ui-sidebar-footer-content:empty{display:none}:host(.open) .ui-sidebar-footer-content{flex-grow:1;justify-content:flex-start}::ng-deep .ui-button.ui-sidebar-button{color:var(--sidebar-nav-foreground)}::ng-deep .ui-button.ui-sidebar-button:hover{background-color:var(--sidebar-nav-hover)}::ng-deep .ui-button.ui-sidebar-button:focus-visible{background-color:var(--sidebar-nav-focus)}.ui-sidebar-open-btn{pointer-events:auto;position:fixed;bottom:calc(var(--spacing, .25rem) * 4);left:calc(var(--spacing, .25rem) * 4)}@media(width>=48rem){.ui-sidebar-open-btn{display:none}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
11133
11156
  dependencies: [{
11134
11157
  kind: "component",
11135
11158
  type: UiButtonComponent,
@@ -11177,8 +11200,8 @@ i0.ɵɵngDeclareClassMetadata({
11177
11200
  heroChevronDoubleLeft,
11178
11201
  heroBars3
11179
11202
  })],
11180
- template: "<div class=\"ui-sidebar-backdrop\" aria-hidden=\"true\" (click)=\"isOpen.set(false)\">\n</div>\n\n<aside class=\"ui-sidebar-panel\">\n <div class=\"ui-sidebar-content\">\n <ng-content />\n </div>\n\n <footer class=\"ui-sidebar-footer\">\n <div class=\"ui-sidebar-footer-content\">\n <ng-content select=\"[sidebar-footer]\" />\n </div>\n\n <ui-button\n appearance=\"ghost\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"justify-center size-10 p-0!\"\n [ariaLabel]=\"isOpen() ? 'Collapse sidebar' : 'Expand sidebar'\"\n (click)=\"toggle()\"\n >\n <ng-icon\n name=\"heroChevronDoubleLeft\"\n size=\"16\"\n strokeWidth=\"2\"\n class=\"duration-300 shrink-0\"\n [class.rotate-180]=\"!isOpen()\"\n />\n </ui-button>\n </footer>\n</aside>\n\n@if (!isOpen()) {\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n class=\"ui-sidebar-open-btn\"\n classes=\"p-3! rounded-full! shadow-lg!\"\n ariaLabel=\"Open sidebar\"\n (click)=\"isOpen.set(true)\"\n >\n <ng-icon name=\"heroBars3\" size=\"20\" strokeWidth=\"2\" class=\"shrink-0\" />\n </ui-button>\n}\n",
11181
- styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:50}@media(width>=48rem){:host{pointer-events:auto}}@media(width>=48rem){:host{position:static}}@media(width>=48rem){:host{display:block}}@media(width>=48rem){:host{height:100%}}.ui-sidebar-backdrop{position:absolute;inset:0;background-color:color-mix(in srgb,#000 10%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@supports (color: color-mix(in lab,red,red)){.ui-sidebar-backdrop{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}@media(width>=48rem){.ui-sidebar-backdrop{display:none}}:host(.open) .ui-sidebar-backdrop{pointer-events:auto;opacity:100%}.ui-sidebar-panel{pointer-events:auto;position:absolute;inset-block:0px;left:0;display:flex;height:100%;width:calc(var(--spacing, .25rem) * 60);--tw-translate-x: -100%;translate:var(--tw-translate-x) var(--tw-translate-y);flex-direction:column;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--sidebar-line);background-color:var(--sidebar);transition-property:translate,width,visibility;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@media(width<48rem){.ui-sidebar-panel{visibility:hidden}}@media(width>=48rem){.ui-sidebar-panel{position:relative}}@media(width>=48rem){.ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 16)}}@media(width>=48rem){.ui-sidebar-panel{translate:none}}@media(width<48rem){:host(.open) .ui-sidebar-panel{visibility:visible;--tw-translate-x: 0px;translate:var(--tw-translate-x) var(--tw-translate-y)}}@media(width>=48rem){:host(.open) .ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 60)}}.ui-sidebar-content{display:flex;min-height:0px;flex-grow:1;flex-direction:column;align-items:flex-start;row-gap:var(--spacing, .25rem);overflow-x:hidden;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-content{align-items:stretch}.ui-sidebar-footer{display:flex;flex-shrink:0;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-footer{flex-direction:row;justify-content:flex-end}.ui-sidebar-footer-content{display:flex;min-width:0px;justify-content:center}.ui-sidebar-footer-content:empty{display:none}:host(.open) .ui-sidebar-footer-content{flex-grow:1;justify-content:flex-start}.ui-sidebar-open-btn{pointer-events:auto;position:fixed;bottom:calc(var(--spacing, .25rem) * 4);left:calc(var(--spacing, .25rem) * 4)}@media(width>=48rem){.ui-sidebar-open-btn{display:none}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
11203
+ template: "<div class=\"ui-sidebar-backdrop\" aria-hidden=\"true\" (click)=\"isOpen.set(false)\">\n</div>\n\n<aside class=\"ui-sidebar-panel\">\n <div class=\"ui-sidebar-content\">\n <ng-content />\n </div>\n\n <footer class=\"ui-sidebar-footer\">\n <div class=\"ui-sidebar-footer-content\">\n <ng-content select=\"[sidebar-footer]\" />\n </div>\n\n <ui-button\n appearance=\"ghost\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"ui-sidebar-button justify-center size-10 p-0!\"\n [ariaLabel]=\"isOpen() ? 'Collapse sidebar' : 'Expand sidebar'\"\n (click)=\"toggle()\"\n >\n <ng-icon\n name=\"heroChevronDoubleLeft\"\n size=\"16\"\n strokeWidth=\"2\"\n class=\"duration-300 shrink-0\"\n [class.rotate-180]=\"!isOpen()\"\n />\n </ui-button>\n </footer>\n</aside>\n\n@if (!isOpen()) {\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n class=\"ui-sidebar-open-btn\"\n classes=\"p-3! rounded-full! shadow-lg!\"\n ariaLabel=\"Open sidebar\"\n (click)=\"isOpen.set(true)\"\n >\n <ng-icon name=\"heroBars3\" size=\"20\" strokeWidth=\"2\" class=\"shrink-0\" />\n </ui-button>\n}\n",
11204
+ styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:50}@media(width>=48rem){:host{pointer-events:auto}}@media(width>=48rem){:host{position:static}}@media(width>=48rem){:host{display:block}}@media(width>=48rem){:host{height:100%}}.ui-sidebar-backdrop{position:absolute;inset:0;background-color:color-mix(in srgb,#000 10%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@supports (color: color-mix(in lab,red,red)){.ui-sidebar-backdrop{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}@media(width>=48rem){.ui-sidebar-backdrop{display:none}}:host(.open) .ui-sidebar-backdrop{pointer-events:auto;opacity:100%}.ui-sidebar-panel{pointer-events:auto;position:absolute;inset-block:0px;left:0;display:flex;height:100%;width:calc(var(--spacing, .25rem) * 60);--tw-translate-x: -100%;translate:var(--tw-translate-x) var(--tw-translate-y);flex-direction:column;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--sidebar-line);background-color:var(--sidebar);transition-property:translate,width,visibility;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@media(width<48rem){.ui-sidebar-panel{visibility:hidden}}@media(width>=48rem){.ui-sidebar-panel{position:relative}}@media(width>=48rem){.ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 16)}}@media(width>=48rem){.ui-sidebar-panel{translate:none}}@media(width<48rem){:host(.open) .ui-sidebar-panel{visibility:visible;--tw-translate-x: 0px;translate:var(--tw-translate-x) var(--tw-translate-y)}}@media(width>=48rem){:host(.open) .ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 60)}}.ui-sidebar-content{display:flex;min-height:0px;flex-grow:1;flex-direction:column;align-items:flex-start;row-gap:var(--spacing, .25rem);overflow-x:hidden;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-content{align-items:stretch}.ui-sidebar-footer{display:flex;flex-shrink:0;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-footer{flex-direction:row;justify-content:flex-end}.ui-sidebar-footer-content{display:flex;min-width:0px;justify-content:center}.ui-sidebar-footer-content:empty{display:none}:host(.open) .ui-sidebar-footer-content{flex-grow:1;justify-content:flex-start}::ng-deep .ui-button.ui-sidebar-button{color:var(--sidebar-nav-foreground)}::ng-deep .ui-button.ui-sidebar-button:hover{background-color:var(--sidebar-nav-hover)}::ng-deep .ui-button.ui-sidebar-button:focus-visible{background-color:var(--sidebar-nav-focus)}.ui-sidebar-open-btn{pointer-events:auto;position:fixed;bottom:calc(var(--spacing, .25rem) * 4);left:calc(var(--spacing, .25rem) * 4)}@media(width>=48rem){.ui-sidebar-open-btn{display:none}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
11182
11205
  }]
11183
11206
  }],
11184
11207
  propDecorators: { isOpen: [{
@@ -11283,7 +11306,7 @@ var UiSidebarItemComponent = class UiSidebarItemComponent {
11283
11306
  }
11284
11307
  },
11285
11308
  ngImport: i0,
11286
- template: "@if (!isCollapsed() || icon()) {\n <ui-button\n appearance=\"ghost\"\n intent=\"secondary\"\n class=\"block\"\n [classes]=\"isCollapsed()\n ? 'ui-sidebar-item ui-sidebar-item--collapsed'\n : 'ui-sidebar-item'\"\n [ariaLabel]=\"isCollapsed() ? label() : ''\"\n >\n @if (icon()) {\n <ng-icon [name]=\"icon()\" size=\"20\" class=\"shrink-0\" />\n }\n\n @if (!isCollapsed()) {\n <span class=\"truncate\">{{ label() }}</span>\n\n <span class=\"empty:hidden ms-auto\">\n <ng-content select=\"ui-badge\" />\n </span>\n }\n </ui-button>\n}\n",
11309
+ template: "@if (!isCollapsed() || icon()) {\n <ui-button\n appearance=\"ghost\"\n intent=\"secondary\"\n class=\"block\"\n [classes]=\"isCollapsed()\n ? 'ui-sidebar-button ui-sidebar-item ui-sidebar-item--collapsed'\n : 'ui-sidebar-button ui-sidebar-item'\"\n [ariaLabel]=\"isCollapsed() ? label() : ''\"\n >\n @if (icon()) {\n <ng-icon [name]=\"icon()\" size=\"20\" class=\"shrink-0\" />\n }\n\n @if (!isCollapsed()) {\n <span class=\"truncate\">{{ label() }}</span>\n\n <span class=\"empty:hidden ms-auto\">\n <ng-content select=\"ui-badge\" />\n </span>\n }\n </ui-button>\n}\n",
11287
11310
  styles: [":host{display:block}::ng-deep .ui-sidebar-item{height:calc(var(--spacing, .25rem) * 10);width:100%;padding-inline:calc(var(--spacing, .25rem) * 2.5)!important;padding-block:0px!important;white-space:nowrap}::ng-deep .ui-sidebar-item--collapsed{justify-content:center}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
11288
11311
  dependencies: [{
11289
11312
  kind: "component",
@@ -11323,7 +11346,7 @@ i0.ɵɵngDeclareClassMetadata({
11323
11346
  args: [{
11324
11347
  selector: "ui-sidebar-item",
11325
11348
  imports: [UiButtonComponent, NgIcon],
11326
- template: "@if (!isCollapsed() || icon()) {\n <ui-button\n appearance=\"ghost\"\n intent=\"secondary\"\n class=\"block\"\n [classes]=\"isCollapsed()\n ? 'ui-sidebar-item ui-sidebar-item--collapsed'\n : 'ui-sidebar-item'\"\n [ariaLabel]=\"isCollapsed() ? label() : ''\"\n >\n @if (icon()) {\n <ng-icon [name]=\"icon()\" size=\"20\" class=\"shrink-0\" />\n }\n\n @if (!isCollapsed()) {\n <span class=\"truncate\">{{ label() }}</span>\n\n <span class=\"empty:hidden ms-auto\">\n <ng-content select=\"ui-badge\" />\n </span>\n }\n </ui-button>\n}\n",
11349
+ template: "@if (!isCollapsed() || icon()) {\n <ui-button\n appearance=\"ghost\"\n intent=\"secondary\"\n class=\"block\"\n [classes]=\"isCollapsed()\n ? 'ui-sidebar-button ui-sidebar-item ui-sidebar-item--collapsed'\n : 'ui-sidebar-button ui-sidebar-item'\"\n [ariaLabel]=\"isCollapsed() ? label() : ''\"\n >\n @if (icon()) {\n <ng-icon [name]=\"icon()\" size=\"20\" class=\"shrink-0\" />\n }\n\n @if (!isCollapsed()) {\n <span class=\"truncate\">{{ label() }}</span>\n\n <span class=\"empty:hidden ms-auto\">\n <ng-content select=\"ui-badge\" />\n </span>\n }\n </ui-button>\n}\n",
11327
11350
  styles: [":host{display:block}::ng-deep .ui-sidebar-item{height:calc(var(--spacing, .25rem) * 10);width:100%;padding-inline:calc(var(--spacing, .25rem) * 2.5)!important;padding-block:0px!important;white-space:nowrap}::ng-deep .ui-sidebar-item--collapsed{justify-content:center}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
11328
11351
  }]
11329
11352
  }],