ryzen-ui 0.2.4 → 0.2.5
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/ryzen-ui.mjs
CHANGED
|
@@ -2170,13 +2170,13 @@ class SidebarComponent {
|
|
|
2170
2170
|
}
|
|
2171
2171
|
_onBackdrop() { this.toggleOpen.emit(); }
|
|
2172
2172
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2173
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleOpen: "toggleOpen", toggleCollapse: "toggleCollapse", itemClick: "itemClick", logout: "logout" }, host: { properties: { "style.display": "'contents'" } }, ngImport: i0, template: "@if (isOpen()) {\n <div\n class=\"sd-backdrop\"\n animate.enter=\"sd-backdrop-in\"\n animate.leave=\"sd-backdrop-out\"\n (click)=\"_onBackdrop()\"\n ></div>\n}\n\n<aside\n class=\"sd-aside\"\n [class.sd-open]=\"isOpen()\"\n [class.sd-collapsed]=\"isCollapsed()\"\n [style]=\"_asideStyle()\"\n>\n <div class=\"rz-sd-header\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"toggleCollapse.emit()\"\n class=\"rz-sd-collapse-btn\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi rz-sd-collapse-icon\"\n [class.pi-th-large]=\"!isCollapsed()\"\n [class.pi-chevron-right]=\"isCollapsed()\"\n ></i>\n </button>\n\n @if (!isCollapsed()) {\n <span class=\"rz-sd-title\">{{ title() }}</span>\n }\n </div>\n\n <nav class=\"rz-sd-nav\">\n <ul class=\"rz-sd-menu\" [style.list-style]=\"'none'\" [style.padding]=\"'0'\">\n @for (item of items(); track item.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(item)\"\n class=\"rz-sd-item\"\n [class.rz-sd-item--active]=\"_activeId() === item.id\"\n >\n @if (item.icon) {\n <i [class]=\"'pi ' + item.icon\" class=\"rz-sd-item-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"rz-sd-item-label\">{{ item.label }}</span>\n @if (item.children?.length) {\n <i class=\"pi pi-chevron-down rz-sd-item-chevron\"\n [style.transform]=\"_isExpanded(item.id) ? 'rotate(180deg)' : ''\"\n ></i>\n }\n }\n </button>\n\n @if (!isCollapsed() && item.children?.length && _isExpanded(item.id)) {\n <ul class=\"rz-sd-submenu\"\n [style.list-style]=\"'none'\" [style.padding]=\"'0'\"\n animate.enter=\"sd-slide-in\"\n animate.leave=\"sd-slide-out\"\n >\n @for (child of item.children; track child.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(child)\"\n class=\"rz-sd-child\"\n [class.rz-sd-child--active]=\"_activeId() === child.id\"\n >\n <span class=\"rz-sd-child-dot\"></span>\n <span>{{ child.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n\n @if (showFooter()) {\n <div class=\"rz-sd-footer\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"rz-sd-logout\"\n [class.rz-sd-logout-center]=\"isCollapsed()\"\n >\n <i class=\"pi pi-sign-out rz-sd-item-icon\"></i>\n @if (!isCollapsed()) {\n <span>Logout</span>\n }\n </button>\n </div>\n }\n</aside>\n", styles: [":host{display:contents}.sd-aside{display:flex;flex-direction:column;height:100%;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-border-light, oklch(.91 .01 260));border-radius:var(--radius-md, .5rem);overflow:hidden}@media(max-width:1023px){.sd-aside{position:fixed;top:0;right:0;z-index:50;height:100vh;box-shadow:0 8px 32px #0000001f;transform:translate(100%)}.sd-aside.sd-open{transform:translate(0)}.sd-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.sd-backdrop-in{animation:sdFadeIn .2s ease-out}.sd-backdrop-out{animation:sdFadeOut .15s ease-in forwards}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}.rz-sd-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:0 1rem;height:3.
|
|
2173
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleOpen: "toggleOpen", toggleCollapse: "toggleCollapse", itemClick: "itemClick", logout: "logout" }, host: { properties: { "style.display": "'contents'" } }, ngImport: i0, template: "@if (isOpen()) {\n <div\n class=\"sd-backdrop\"\n animate.enter=\"sd-backdrop-in\"\n animate.leave=\"sd-backdrop-out\"\n (click)=\"_onBackdrop()\"\n ></div>\n}\n\n<aside\n class=\"sd-aside\"\n [class.sd-open]=\"isOpen()\"\n [class.sd-collapsed]=\"isCollapsed()\"\n [style]=\"_asideStyle()\"\n>\n <div class=\"rz-sd-header\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"toggleCollapse.emit()\"\n class=\"rz-sd-collapse-btn\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi rz-sd-collapse-icon\"\n [class.pi-th-large]=\"!isCollapsed()\"\n [class.pi-chevron-right]=\"isCollapsed()\"\n ></i>\n </button>\n\n @if (!isCollapsed()) {\n <span class=\"rz-sd-title\">{{ title() }}</span>\n }\n </div>\n\n <nav class=\"rz-sd-nav\">\n <ul class=\"rz-sd-menu\" [style.list-style]=\"'none'\" [style.padding]=\"'0'\">\n @for (item of items(); track item.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(item)\"\n class=\"rz-sd-item\"\n [class.rz-sd-item--active]=\"_activeId() === item.id\"\n >\n @if (item.icon) {\n <i [class]=\"'pi ' + item.icon\" class=\"rz-sd-item-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"rz-sd-item-label\">{{ item.label }}</span>\n @if (item.children?.length) {\n <i class=\"pi pi-chevron-down rz-sd-item-chevron\"\n [style.transform]=\"_isExpanded(item.id) ? 'rotate(180deg)' : ''\"\n ></i>\n }\n }\n </button>\n\n @if (!isCollapsed() && item.children?.length && _isExpanded(item.id)) {\n <ul class=\"rz-sd-submenu\"\n [style.list-style]=\"'none'\" [style.padding]=\"'0'\"\n animate.enter=\"sd-slide-in\"\n animate.leave=\"sd-slide-out\"\n >\n @for (child of item.children; track child.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(child)\"\n class=\"rz-sd-child\"\n [class.rz-sd-child--active]=\"_activeId() === child.id\"\n >\n <span class=\"rz-sd-child-dot\"></span>\n <span>{{ child.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n\n @if (showFooter()) {\n <div class=\"rz-sd-footer\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"rz-sd-logout\"\n [class.rz-sd-logout-center]=\"isCollapsed()\"\n >\n <i class=\"pi pi-sign-out rz-sd-item-icon\"></i>\n @if (!isCollapsed()) {\n <span>Logout</span>\n }\n </button>\n </div>\n }\n</aside>\n", styles: [":host{display:contents}.sd-aside{display:flex;flex-direction:column;height:100%;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-border-light, oklch(.91 .01 260));border-radius:var(--radius-md, .5rem);overflow:hidden}@media(max-width:1023px){.sd-aside{position:fixed;top:0;right:0;z-index:50;height:100vh;box-shadow:0 8px 32px #0000001f;transform:translate(100%)}.sd-aside.sd-open{transform:translate(0)}.sd-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.sd-backdrop-in{animation:sdFadeIn .2s ease-out}.sd-backdrop-out{animation:sdFadeOut .15s ease-in forwards}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}.rz-sd-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:0 1rem;height:3.75rem;border-bottom:1px solid}.rz-sd-collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:all .2s}.rz-sd-collapse-btn:hover,.rz-sd-collapse-btn:active{background:var(--color-accent, oklch(.64 .2 50))}.rz-sd-collapse-icon{font-size:.875rem}.rz-sd-collapse-icon:active{scale:.9}.rz-sd-title{font-size:.95rem;font-weight:700;color:var(--color-text, oklch(.14 .01 260))}.sd-close-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:background-color .2s}.sd-close-btn:hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.sd-close-btn i{font-size:.875rem}.rz-sd-nav{flex:1;overflow-y:auto;padding:.75rem}.rz-sd-menu{display:flex;flex-direction:column;gap:.25rem}.rz-sd-item{position:relative;width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem .85rem;border-radius:.5rem;transition:all .15s;font-size:.95rem;font-weight:500;border:none;cursor:pointer;color:var(--color-text, oklch(.14 .01 260));background:transparent}.rz-sd-item:before{content:\"\";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:3px;height:60%;border-radius:0 999px 999px 0;background:linear-gradient(180deg,var(--color-accent, oklch(.72 .17 70)),var(--color-primary, oklch(.32 .09 258)));transform:scaleY(.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;opacity:0}.rz-sd-item:hover{background:var(--color-accent-soft, oklch(.72 .17 70 / .08))}.rz-sd-item--active{background:var(--color-accent-soft, oklch(.72 .17 70 / .12));color:var(--color-accent, oklch(.72 .17 70));font-weight:600}.rz-sd-item--active:before{transform:scaleY(1);opacity:1}.rz-sd-item-icon{font-size:1.15rem;flex-shrink:0}.rz-sd-item-label{flex:1;text-align:right}.rz-sd-item-chevron{font-size:.8rem;transition:transform .2s}.rz-sd-submenu{margin-top:.25rem;margin-right:1.5rem;display:flex;flex-direction:column;gap:.125rem}.rz-sd-child{position:relative;width:100%;display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;border-radius:.5rem;transition:all .15s;font-size:.9rem;border:none;cursor:pointer;color:var(--color-text-muted, oklch(.48 .01 260));background:transparent}.rz-sd-child:before{content:\"\";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:3px;height:50%;border-radius:0 999px 999px 0;background:linear-gradient(180deg,var(--color-accent, oklch(.72 .17 70)),var(--color-primary, oklch(.32 .09 258)));transform:scaleY(.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;opacity:0}.rz-sd-child:hover{background:var(--color-primary-soft, oklch(.32 .09 258 / .06));color:var(--color-text, oklch(.14 .01 260))}.rz-sd-child--active{background:var(--color-primary-soft, oklch(.32 .09 258 / .1));color:var(--color-primary, oklch(.32 .09 258));font-weight:600}.rz-sd-child--active:before{transform:scaleY(1);opacity:1}.rz-sd-child-dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.rz-sd-child--active .rz-sd-child-dot{background:var(--color-primary, oklch(.32 .09 258))}.rz-sd-footer{flex-shrink:0;padding:.75rem;border-top:1px solid;display:flex;flex-direction:column;gap:.5rem}.rz-sd-logout{width:100%;display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;background-color:var(--color-danger, oklch(.57 .21 25));color:#fff;transition:opacity .2s}.rz-sd-logout:hover{opacity:.85}.rz-sd-logout-center{justify-content:center}@keyframes sdFadeIn{0%{opacity:0}to{opacity:1}}@keyframes sdFadeOut{0%{opacity:1}to{opacity:0}}@keyframes sdSlideDown{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}@keyframes sdSlideUp{0%{opacity:1;translate:0}to{opacity:0;translate:0 -8px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2174
2174
|
}
|
|
2175
2175
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
2176
2176
|
type: Component,
|
|
2177
2177
|
args: [{ selector: 'app-sidebar', imports: [], host: {
|
|
2178
2178
|
'[style.display]': "'contents'",
|
|
2179
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n <div\n class=\"sd-backdrop\"\n animate.enter=\"sd-backdrop-in\"\n animate.leave=\"sd-backdrop-out\"\n (click)=\"_onBackdrop()\"\n ></div>\n}\n\n<aside\n class=\"sd-aside\"\n [class.sd-open]=\"isOpen()\"\n [class.sd-collapsed]=\"isCollapsed()\"\n [style]=\"_asideStyle()\"\n>\n <div class=\"rz-sd-header\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"toggleCollapse.emit()\"\n class=\"rz-sd-collapse-btn\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi rz-sd-collapse-icon\"\n [class.pi-th-large]=\"!isCollapsed()\"\n [class.pi-chevron-right]=\"isCollapsed()\"\n ></i>\n </button>\n\n @if (!isCollapsed()) {\n <span class=\"rz-sd-title\">{{ title() }}</span>\n }\n </div>\n\n <nav class=\"rz-sd-nav\">\n <ul class=\"rz-sd-menu\" [style.list-style]=\"'none'\" [style.padding]=\"'0'\">\n @for (item of items(); track item.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(item)\"\n class=\"rz-sd-item\"\n [class.rz-sd-item--active]=\"_activeId() === item.id\"\n >\n @if (item.icon) {\n <i [class]=\"'pi ' + item.icon\" class=\"rz-sd-item-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"rz-sd-item-label\">{{ item.label }}</span>\n @if (item.children?.length) {\n <i class=\"pi pi-chevron-down rz-sd-item-chevron\"\n [style.transform]=\"_isExpanded(item.id) ? 'rotate(180deg)' : ''\"\n ></i>\n }\n }\n </button>\n\n @if (!isCollapsed() && item.children?.length && _isExpanded(item.id)) {\n <ul class=\"rz-sd-submenu\"\n [style.list-style]=\"'none'\" [style.padding]=\"'0'\"\n animate.enter=\"sd-slide-in\"\n animate.leave=\"sd-slide-out\"\n >\n @for (child of item.children; track child.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(child)\"\n class=\"rz-sd-child\"\n [class.rz-sd-child--active]=\"_activeId() === child.id\"\n >\n <span class=\"rz-sd-child-dot\"></span>\n <span>{{ child.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n\n @if (showFooter()) {\n <div class=\"rz-sd-footer\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"rz-sd-logout\"\n [class.rz-sd-logout-center]=\"isCollapsed()\"\n >\n <i class=\"pi pi-sign-out rz-sd-item-icon\"></i>\n @if (!isCollapsed()) {\n <span>Logout</span>\n }\n </button>\n </div>\n }\n</aside>\n", styles: [":host{display:contents}.sd-aside{display:flex;flex-direction:column;height:100%;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-border-light, oklch(.91 .01 260));border-radius:var(--radius-md, .5rem);overflow:hidden}@media(max-width:1023px){.sd-aside{position:fixed;top:0;right:0;z-index:50;height:100vh;box-shadow:0 8px 32px #0000001f;transform:translate(100%)}.sd-aside.sd-open{transform:translate(0)}.sd-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.sd-backdrop-in{animation:sdFadeIn .2s ease-out}.sd-backdrop-out{animation:sdFadeOut .15s ease-in forwards}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}.rz-sd-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:0 1rem;height:3.
|
|
2179
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n <div\n class=\"sd-backdrop\"\n animate.enter=\"sd-backdrop-in\"\n animate.leave=\"sd-backdrop-out\"\n (click)=\"_onBackdrop()\"\n ></div>\n}\n\n<aside\n class=\"sd-aside\"\n [class.sd-open]=\"isOpen()\"\n [class.sd-collapsed]=\"isCollapsed()\"\n [style]=\"_asideStyle()\"\n>\n <div class=\"rz-sd-header\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"toggleCollapse.emit()\"\n class=\"rz-sd-collapse-btn\"\n [style.color]=\"'var(--color-text-muted,oklch(0.48 0.01 260))'\"\n >\n <i class=\"pi rz-sd-collapse-icon\"\n [class.pi-th-large]=\"!isCollapsed()\"\n [class.pi-chevron-right]=\"isCollapsed()\"\n ></i>\n </button>\n\n @if (!isCollapsed()) {\n <span class=\"rz-sd-title\">{{ title() }}</span>\n }\n </div>\n\n <nav class=\"rz-sd-nav\">\n <ul class=\"rz-sd-menu\" [style.list-style]=\"'none'\" [style.padding]=\"'0'\">\n @for (item of items(); track item.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(item)\"\n class=\"rz-sd-item\"\n [class.rz-sd-item--active]=\"_activeId() === item.id\"\n >\n @if (item.icon) {\n <i [class]=\"'pi ' + item.icon\" class=\"rz-sd-item-icon\"></i>\n }\n @if (!isCollapsed()) {\n <span class=\"rz-sd-item-label\">{{ item.label }}</span>\n @if (item.children?.length) {\n <i class=\"pi pi-chevron-down rz-sd-item-chevron\"\n [style.transform]=\"_isExpanded(item.id) ? 'rotate(180deg)' : ''\"\n ></i>\n }\n }\n </button>\n\n @if (!isCollapsed() && item.children?.length && _isExpanded(item.id)) {\n <ul class=\"rz-sd-submenu\"\n [style.list-style]=\"'none'\" [style.padding]=\"'0'\"\n animate.enter=\"sd-slide-in\"\n animate.leave=\"sd-slide-out\"\n >\n @for (child of item.children; track child.id) {\n <li>\n <button\n type=\"button\"\n (click)=\"_onItemClick(child)\"\n class=\"rz-sd-child\"\n [class.rz-sd-child--active]=\"_activeId() === child.id\"\n >\n <span class=\"rz-sd-child-dot\"></span>\n <span>{{ child.label }}</span>\n </button>\n </li>\n }\n </ul>\n }\n </li>\n }\n </ul>\n </nav>\n\n @if (showFooter()) {\n <div class=\"rz-sd-footer\"\n [style.border-color]=\"'var(--color-border-light,oklch(0.91 0.01 260))'\"\n >\n <button\n type=\"button\"\n (click)=\"logout.emit()\"\n class=\"rz-sd-logout\"\n [class.rz-sd-logout-center]=\"isCollapsed()\"\n >\n <i class=\"pi pi-sign-out rz-sd-item-icon\"></i>\n @if (!isCollapsed()) {\n <span>Logout</span>\n }\n </button>\n </div>\n }\n</aside>\n", styles: [":host{display:contents}.sd-aside{display:flex;flex-direction:column;height:100%;position:relative;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--color-border-light, oklch(.91 .01 260));border-radius:var(--radius-md, .5rem);overflow:hidden}@media(max-width:1023px){.sd-aside{position:fixed;top:0;right:0;z-index:50;height:100vh;box-shadow:0 8px 32px #0000001f;transform:translate(100%)}.sd-aside.sd-open{transform:translate(0)}.sd-backdrop{position:fixed;inset:0;z-index:40;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.sd-backdrop-in{animation:sdFadeIn .2s ease-out}.sd-backdrop-out{animation:sdFadeOut .15s ease-in forwards}.sd-aside.sd-collapsed{width:64px!important}.sd-slide-in{animation:sdSlideDown .2s ease-out}.sd-slide-out{animation:sdSlideUp .15s ease-in forwards}.rz-sd-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:0 1rem;height:3.75rem;border-bottom:1px solid}.rz-sd-collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:all .2s}.rz-sd-collapse-btn:hover,.rz-sd-collapse-btn:active{background:var(--color-accent, oklch(.64 .2 50))}.rz-sd-collapse-icon{font-size:.875rem}.rz-sd-collapse-icon:active{scale:.9}.rz-sd-title{font-size:.95rem;font-weight:700;color:var(--color-text, oklch(.14 .01 260))}.sd-close-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;cursor:pointer;border-radius:.25rem;transition:background-color .2s}.sd-close-btn:hover{background:var(--color-surface-alt, oklch(.975 .005 260))}.sd-close-btn i{font-size:.875rem}.rz-sd-nav{flex:1;overflow-y:auto;padding:.75rem}.rz-sd-menu{display:flex;flex-direction:column;gap:.25rem}.rz-sd-item{position:relative;width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem .85rem;border-radius:.5rem;transition:all .15s;font-size:.95rem;font-weight:500;border:none;cursor:pointer;color:var(--color-text, oklch(.14 .01 260));background:transparent}.rz-sd-item:before{content:\"\";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:3px;height:60%;border-radius:0 999px 999px 0;background:linear-gradient(180deg,var(--color-accent, oklch(.72 .17 70)),var(--color-primary, oklch(.32 .09 258)));transform:scaleY(.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;opacity:0}.rz-sd-item:hover{background:var(--color-accent-soft, oklch(.72 .17 70 / .08))}.rz-sd-item--active{background:var(--color-accent-soft, oklch(.72 .17 70 / .12));color:var(--color-accent, oklch(.72 .17 70));font-weight:600}.rz-sd-item--active:before{transform:scaleY(1);opacity:1}.rz-sd-item-icon{font-size:1.15rem;flex-shrink:0}.rz-sd-item-label{flex:1;text-align:right}.rz-sd-item-chevron{font-size:.8rem;transition:transform .2s}.rz-sd-submenu{margin-top:.25rem;margin-right:1.5rem;display:flex;flex-direction:column;gap:.125rem}.rz-sd-child{position:relative;width:100%;display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;border-radius:.5rem;transition:all .15s;font-size:.9rem;border:none;cursor:pointer;color:var(--color-text-muted, oklch(.48 .01 260));background:transparent}.rz-sd-child:before{content:\"\";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:3px;height:50%;border-radius:0 999px 999px 0;background:linear-gradient(180deg,var(--color-accent, oklch(.72 .17 70)),var(--color-primary, oklch(.32 .09 258)));transform:scaleY(.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;opacity:0}.rz-sd-child:hover{background:var(--color-primary-soft, oklch(.32 .09 258 / .06));color:var(--color-text, oklch(.14 .01 260))}.rz-sd-child--active{background:var(--color-primary-soft, oklch(.32 .09 258 / .1));color:var(--color-primary, oklch(.32 .09 258));font-weight:600}.rz-sd-child--active:before{transform:scaleY(1);opacity:1}.rz-sd-child-dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.rz-sd-child--active .rz-sd-child-dot{background:var(--color-primary, oklch(.32 .09 258))}.rz-sd-footer{flex-shrink:0;padding:.75rem;border-top:1px solid;display:flex;flex-direction:column;gap:.5rem}.rz-sd-logout{width:100%;display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.5rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer;background-color:var(--color-danger, oklch(.57 .21 25));color:#fff;transition:opacity .2s}.rz-sd-logout:hover{opacity:.85}.rz-sd-logout-center{justify-content:center}@keyframes sdFadeIn{0%{opacity:0}to{opacity:1}}@keyframes sdFadeOut{0%{opacity:1}to{opacity:0}}@keyframes sdSlideDown{0%{opacity:0;translate:0 -8px}to{opacity:1;translate:0}}@keyframes sdSlideUp{0%{opacity:1;translate:0}to{opacity:0;translate:0 -8px}}\n"] }]
|
|
2180
2180
|
}], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], toggleOpen: [{ type: i0.Output, args: ["toggleOpen"] }], toggleCollapse: [{ type: i0.Output, args: ["toggleCollapse"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], logout: [{ type: i0.Output, args: ["logout"] }] } });
|
|
2181
2181
|
|
|
2182
2182
|
class ConfirmDialogComponent {
|