@gravionlabs/helix-core 22.1.2 → 22.1.3

package/fesm2022/gravionlabs-helix-core-panel.mjs

@@ -1,21 +1,20 @@
-export * from '@gravionlabs/helix-core/types/panel';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, booleanAttribute, model, computed, output, contentChild, viewChild, contentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { uuid } from '@gravionlabs/helix-core/uix/utils';
-import { Footer, HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
-import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
-import * as i1 from '@gravionlabs/helix-core/bind';
-import { Bind, BindModule } from '@gravionlabs/helix-core/bind';
-import * as i3 from '@gravionlabs/helix-core/button';
-import { ButtonModule } from '@gravionlabs/helix-core/button';
-import { PlusIcon, MinusIcon } from '@gravionlabs/helix-core/icons';
-import * as i4 from '@gravionlabs/helix-core/motion';
-import { MotionModule } from '@gravionlabs/helix-core/motion';
-import { BaseStyle } from '@gravionlabs/helix-core/base';
-
-const style = /*css*/ `
+import * as i2 from "@angular/common";
+import { CommonModule } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, ViewEncapsulation, booleanAttribute, computed, contentChild, contentChildren, inject, input, model, output, viewChild } from "@angular/core";
+import { uuid } from "@gravionlabs/helix-core/uix/utils";
+import { Footer, HelixTemplate, SharedModule } from "@gravionlabs/helix-core/api";
+import { BaseComponent, PARENT_INSTANCE } from "@gravionlabs/helix-core/basecomponent";
+import * as i1 from "@gravionlabs/helix-core/bind";
+import { Bind, BindModule } from "@gravionlabs/helix-core/bind";
+import * as i3 from "@gravionlabs/helix-core/button";
+import { ButtonModule } from "@gravionlabs/helix-core/button";
+import { MinusIcon, PlusIcon } from "@gravionlabs/helix-core/icons";
+import * as i4 from "@gravionlabs/helix-core/motion";
+import { MotionModule } from "@gravionlabs/helix-core/motion";
+import { BaseStyle } from "@gravionlabs/helix-core/base";
+export * from "@gravionlabs/helix-core/types/panel";
+const style = `
     .h-panel {
         display: block;
         border: 1px solid dt('panel.border.color');
@@ -63,354 +62,750 @@ const style = /*css*/ `
         padding: dt('panel.footer.padding');
     }
 `;
-
 const classes = {
-    root: ({ instance }) => [
-        'h-panel h-component',
-        {
-            'h-panel-toggleable': instance.toggleable(),
-            'h-panel-expanded': !instance.collapsed() && instance.toggleable(),
-            'h-panel-collapsed': instance.collapsed() && instance.toggleable()
-        }
-    ],
-    header: 'h-panel-header',
-    title: 'h-panel-title',
-    headerActions: ({ instance }) => [
-        'h-panel-header-actions',
-        {
-            'h-panel-icons-start': instance.iconPos() === 'start',
-            'h-panel-icons-end': instance.iconPos() === 'end',
-            'h-panel-icons-center': instance.iconPos() === 'center'
-        }
-    ],
-    pcToggleButton: 'h-panel-toggle-button',
-    contentContainer: 'h-panel-content-container',
-    contentWrapper: 'h-panel-content-wrapper',
-    content: 'h-panel-content',
-    footer: 'h-panel-footer'
+	root: ({ instance }) => ["h-panel h-component", {
+		"h-panel-toggleable": instance.toggleable(),
+		"h-panel-expanded": !instance.collapsed() && instance.toggleable(),
+		"h-panel-collapsed": instance.collapsed() && instance.toggleable()
+	}],
+	header: "h-panel-header",
+	title: "h-panel-title",
+	headerActions: ({ instance }) => ["h-panel-header-actions", {
+		"h-panel-icons-start": instance.iconPos() === "start",
+		"h-panel-icons-end": instance.iconPos() === "end",
+		"h-panel-icons-center": instance.iconPos() === "center"
+	}],
+	pcToggleButton: "h-panel-toggle-button",
+	contentContainer: "h-panel-content-container",
+	contentWrapper: "h-panel-content-wrapper",
+	content: "h-panel-content",
+	footer: "h-panel-footer"
+};
+var PanelStyle = class PanelStyle extends BaseStyle {
+	name = "panel";
+	style = style;
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PanelStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PanelStyle
+	});
 };
-class PanelStyle extends BaseStyle {
-    name = 'panel';
-    style = style;
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PanelStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PanelStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PanelStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * Panel is a container with the optional content toggle feature.
- *
- * [Live Demo](https://www.primeng.org/panel/)
- *
- * @module panelstyle
- *
- */
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: PanelStyle,
+	decorators: [{ type: Injectable }]
+});
 var PanelClasses;
-(function (PanelClasses) {
-    /**
-     * Class name of the root element
-     */
-    PanelClasses["root"] = "h-panel";
-    /**
-     * Class name of the header element
-     */
-    PanelClasses["header"] = "h-panel-header";
-    /**
-     * Class name of the title element
-     */
-    PanelClasses["title"] = "h-panel-title";
-    /**
-     * Class name of the header actions element
-     */
-    PanelClasses["headerActions"] = "h-panel-header-actions";
-    /**
-     * Class name of the toggle button element
-     */
-    PanelClasses["pcToggleButton"] = "h-panel-toggle-button";
-    /**
-     * Class name of the content container element
-     */
-    PanelClasses["contentContainer"] = "h-panel-content-container";
-    /**
-     * Class name of the content wrapper element
-     */
-    PanelClasses["contentWrapper"] = "h-panel-content-wrapper";
-    /**
-     * Class name of the content element
-     */
-    PanelClasses["content"] = "h-panel-content";
-    /**
-     * Class name of the footer element
-     */
-    PanelClasses["footer"] = "h-panel-footer";
+(function(PanelClasses) {
+	PanelClasses["root"] = "h-panel";
+	PanelClasses["header"] = "h-panel-header";
+	PanelClasses["title"] = "h-panel-title";
+	PanelClasses["headerActions"] = "h-panel-header-actions";
+	PanelClasses["pcToggleButton"] = "h-panel-toggle-button";
+	PanelClasses["contentContainer"] = "h-panel-content-container";
+	PanelClasses["contentWrapper"] = "h-panel-content-wrapper";
+	PanelClasses["content"] = "h-panel-content";
+	PanelClasses["footer"] = "h-panel-footer";
 })(PanelClasses || (PanelClasses = {}));
-
-const PANEL_INSTANCE = new InjectionToken('PANEL_INSTANCE');
-/**
- * Panel is a container with the optional content toggle feature.
- * @group Components
- */
-class Panel extends BaseComponent {
-    componentName = 'Panel';
-    $pcPanel = inject(PANEL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    _componentStyle = inject(PanelStyle);
-    bindDirectiveInstance = inject(Bind, { self: true });
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    /**
-     * Id of the component.
-     */
-    id = input(uuid('pn_id_'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    /**
-     * Defines if content of panel can be expanded and collapsed.
-     * @group Props
-     */
-    toggleable = input(undefined, { ...(ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Header text of the panel.
-     * @group Props
-     */
-    _header = input(undefined, { ...(ngDevMode ? { debugName: "_header" } : /* istanbul ignore next */ {}), alias: 'header' });
-    /**
-     * Defines the initial state of panel content, supports one or two-way binding as well.
-     * @group Props
-     */
-    collapsed = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
-    /**
-     * Style class of the component.
-     * @group Props
-     * @deprecated since v20.0.0, use `class` instead.
-     */
-    styleClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
-    /**
-     * Position of the icons.
-     * @group Props
-     */
-    iconPos = input('end', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "iconPos" }] : /* istanbul ignore next */ []));
-    /**
-     * Specifies if header of panel cannot be displayed.
-     * @group Props
-     */
-    showHeader = input(true, { ...(ngDevMode ? { debugName: "showHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Specifies the toggler element to toggle the panel content.
-     * @group Props
-     */
-    toggler = input('icon', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "toggler" }] : /* istanbul ignore next */ []));
-    /**
-     * Transition options of the animation.
-     * @group Props
-     * @deprecated since v21.0.0, use `motionOptions` instead.
-     */
-    transitionOptions = input('400ms cubic-bezier(0.86, 0, 0.07, 1)', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "transitionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * Used to pass all properties of the ButtonProps to the Button component.
-     * @group Props
-     */
-    toggleButtonProps = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "toggleButtonProps" }] : /* istanbul ignore next */ []));
-    /**
-     * The motion options.
-     * @group Props
-     */
-    motionOptions = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
-    computedMotionOptions = computed(() => {
-        return {
-            ...this.ptm('motion'),
-            ...this.motionOptions()
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * Callback to invoke before panel toggle.
-     * @param {PanelBeforeToggleEvent} event - Custom panel toggle event
-     * @group Emits
-     */
-    onBeforeToggle = output();
-    /**
-     * Callback to invoke after panel toggle.
-     * @param {PanelAfterToggleEvent} event - Custom panel toggle event
-     * @group Emits
-     */
-    onAfterToggle = output();
-    footerFacet = contentChild(Footer, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "footerFacet" }] : /* istanbul ignore next */ []));
-    /**
-     * Defines template option for header.
-     * @group Templates
-     */
-    headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Defines template option for icons.
-     * @example
-     * ```html
-     * <ng-template #icons> </ng-template>
-     * ```
-     * @group Templates
-     */
-    iconsTemplate = contentChild('icons', { ...(ngDevMode ? { debugName: "iconsTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Defines template option for content.
-     * @example
-     * ```html
-     * <ng-template #content> </ng-template>
-     * ```
-     * @group Templates
-     */
-    contentTemplate = contentChild('content', { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Defines template option for footer.
-     * @example
-     * ```html
-     * <ng-template #footer> </ng-template>
-     * ```
-     * @group Templates
-     */
-    footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Defines template option for headerIcon.
-     * @param {PanelHeaderIconsTemplateContext} context - context of the template.
-     * @example
-     * ```html
-     * <ng-template #headericons let-collapsed> </ng-template>
-     * ```
-     * @see {@link PanelHeaderIconsTemplateContext}
-     * @group Templates
-     */
-    headerIconsTemplate = contentChild('headericons', { ...(ngDevMode ? { debugName: "headerIconsTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    _headerTemplate;
-    _iconsTemplate;
-    _contentTemplate;
-    _footerTemplate;
-    _headerIconsTemplate;
-    contentWrapperViewChild = viewChild.required('contentWrapper', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentWrapperViewChild" }] : /* istanbul ignore next */ []));
-    get buttonAriaLabel() {
-        return this._header();
-    }
-    onHeaderClick(event) {
-        if (this.toggler() === 'header') {
-            this.toggle(event);
-        }
-    }
-    onIconClick(event) {
-        if (this.toggler() === 'icon') {
-            this.toggle(event);
-        }
-    }
-    toggle(event) {
-        this.onBeforeToggle.emit({ originalEvent: event, collapsed: this.collapsed() });
-        if (this.collapsed())
-            this.expand();
-        else
-            this.collapse();
-        event.preventDefault();
-    }
-    expand() {
-        this.collapsed.set(false);
-        this.updateTabIndex();
-    }
-    collapse() {
-        this.collapsed.set(true);
-        this.updateTabIndex();
-    }
-    getBlockableElement() {
-        return this.el.nativeElement;
-    }
-    updateTabIndex() {
-        const contentWrapperViewChild = this.contentWrapperViewChild();
-        if (contentWrapperViewChild) {
-            const focusableElements = contentWrapperViewChild.nativeElement.querySelectorAll('input, button, select, a, textarea, [tabindex]');
-            focusableElements.forEach((element) => {
-                if (this.collapsed()) {
-                    element.setAttribute('tabindex', '-1');
-                }
-                else {
-                    element.removeAttribute('tabindex');
-                }
-            });
-        }
-    }
-    onKeyDown(event) {
-        if (event.code === 'Enter' || event.code === 'Space') {
-            this.toggle(event);
-            event.preventDefault();
-        }
-    }
-    onToggleDone(event) {
-        this.onAfterToggle.emit({ originalEvent: event, collapsed: this.collapsed() });
-    }
-    templates = contentChildren(HelixTemplate, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    onAfterContentInit() {
-        this.templates().forEach((item) => {
-            switch (item.getType()) {
-                case 'header':
-                    this._headerTemplate = item.template;
-                    break;
-                case 'content':
-                    this._contentTemplate = item.template;
-                    break;
-                case 'footer':
-                    this._footerTemplate = item.template;
-                    break;
-                case 'icons':
-                    this._iconsTemplate = item.template;
-                    break;
-                case 'headericons':
-                    this._headerIconsTemplate = item.template;
-                    break;
-                default:
-                    this._contentTemplate = item.template;
-                    break;
-            }
-        });
-    }
-    get dataP() {
-        return this.cn({
-            toggleable: this.toggleable()
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Panel, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Panel, isStandalone: true, selector: "h-panel", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, _header: { classPropertyName: "_header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, toggler: { classPropertyName: "toggler", publicName: "toggler", isSignal: true, isRequired: false, transformFunction: null }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: true, isRequired: false, transformFunction: null }, toggleButtonProps: { classPropertyName: "toggleButtonProps", publicName: "toggleButtonProps", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", onBeforeToggle: "onBeforeToggle", onAfterToggle: "onAfterToggle" }, host: { properties: { "id": "id()", "class": "cn(cx('root'), styleClass())", "attr.data-h": "dataP" } }, providers: [PanelStyle, { provide: PANEL_INSTANCE, useExisting: Panel }, { provide: PARENT_INSTANCE, useExisting: Panel }], queries: [{ propertyName: "footerFacet", first: true, predicate: Footer, descendants: true, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "iconsTemplate", first: true, predicate: ["icons"], isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: ["content"], isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], isSignal: true }, { propertyName: "headerIconsTemplate", first: true, predicate: ["headericons"], isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], viewQueries: [{ propertyName: "contentWrapperViewChild", first: true, predicate: ["contentWrapper"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "@if (showHeader()) {\n  <div [hBind]=\"ptm('header')\" [class]=\"cx('header')\" (click)=\"onHeaderClick($event)\" [attr.id]=\"id() + '-titlebar'\" [attr.data-h]=\"dataP\">\n    @if (_header()) {\n      <span [hBind]=\"ptm('title')\" [class]=\"cx('title')\" [attr.id]=\"id() + '_header()'\">{{ _header() }}</span>\n    }\n    <ng-content select=\"h-header\"></ng-content>\n    <ng-container *ngTemplateOutlet=\"headerTemplate() || _headerTemplate\"></ng-container>\n    <div [hBind]=\"ptm('headerActions')\" [class]=\"cx('headerActions')\">\n      <ng-template *ngTemplateOutlet=\"iconsTemplate() || _iconsTemplate\"></ng-template>\n      @if (toggleable()) {\n        <h-button\n          [attr.id]=\"id() + '_header()'\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          [rounded]=\"true\"\n          type=\"button\"\n          role=\"button\"\n          [styleClass]=\"cx('pcToggleButton')\"\n          [attr.aria-label]=\"buttonAriaLabel\"\n          [attr.aria-controls]=\"id() + '_content'\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"onIconClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          [buttonProps]=\"toggleButtonProps()\"\n          [pt]=\"ptm('pcToggleButton')\"\n          [unstyled]=\"unstyled()\"\n          >\n          <ng-template #icon>\n            @if (!headerIconsTemplate() && !_headerIconsTemplate && !toggleButtonProps()?.icon) {\n              @if (!collapsed()) {\n                <svg data-h-icon=\"minus\" [hBind]=\"ptm('pcToggleButton.icon')\" />\n              }\n              @if (collapsed()) {\n                <svg data-h-icon=\"plus\" [hBind]=\"ptm('pcToggleButton.icon')\" />\n              }\n            }\n            <ng-template *ngTemplateOutlet=\"headerIconsTemplate() || _headerIconsTemplate; context: { $implicit: collapsed() }\"></ng-template>\n          </ng-template>\n        </h-button>\n      }\n    </div>\n  </div>\n}\n<div\n  [hBind]=\"ptm('contentContainer')\"\n  [hMotion]=\"!toggleable() || (toggleable() && !collapsed())\"\n  pMotionName=\"h-collapsible\"\n  [pMotionOptions]=\"computedMotionOptions()\"\n  [class]=\"cx('contentContainer')\"\n  [id]=\"id() + '_content'\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"id() + '_header()'\"\n  [attr.aria-hidden]=\"collapsed()\"\n  [attr.tabindex]=\"collapsed() ? '-1' : undefined\"\n  (pMotionOnAfterEnter)=\"onToggleDone($event)\"\n  >\n  <div [hBind]=\"ptm('contentWrapper')\" [class]=\"cx('contentWrapper')\">\n    <div [hBind]=\"ptm('content')\" [class]=\"cx('content')\" #contentWrapper>\n      <ng-content></ng-content>\n      <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate\"></ng-container>\n    </div>\n\n    @if (footerFacet() || footerTemplate() || _footerTemplate) {\n      <div [hBind]=\"ptm('footer')\" [class]=\"cx('footer')\">\n        <ng-content select=\"h-footer\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"footerTemplate() || _footerTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PlusIcon, selector: "[data-h-icon=\"plus\"]" }, { kind: "component", type: MinusIcon, selector: "[data-h-icon=\"minus\"]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "h-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[hBind]", inputs: ["hBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i4.MotionDirective, selector: "[hMotion]", inputs: ["hMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Panel, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-panel', standalone: true, imports: [CommonModule, PlusIcon, MinusIcon, ButtonModule, SharedModule, BindModule, MotionModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [PanelStyle, { provide: PANEL_INSTANCE, useExisting: Panel }, { provide: PARENT_INSTANCE, useExisting: Panel }], host: {
-                        '[id]': 'id()',
-                        '[class]': "cn(cx('root'), styleClass())",
-                        '[attr.data-h]': 'dataP'
-                    }, hostDirectives: [Bind], template: "@if (showHeader()) {\n  <div [hBind]=\"ptm('header')\" [class]=\"cx('header')\" (click)=\"onHeaderClick($event)\" [attr.id]=\"id() + '-titlebar'\" [attr.data-h]=\"dataP\">\n    @if (_header()) {\n      <span [hBind]=\"ptm('title')\" [class]=\"cx('title')\" [attr.id]=\"id() + '_header()'\">{{ _header() }}</span>\n    }\n    <ng-content select=\"h-header\"></ng-content>\n    <ng-container *ngTemplateOutlet=\"headerTemplate() || _headerTemplate\"></ng-container>\n    <div [hBind]=\"ptm('headerActions')\" [class]=\"cx('headerActions')\">\n      <ng-template *ngTemplateOutlet=\"iconsTemplate() || _iconsTemplate\"></ng-template>\n      @if (toggleable()) {\n        <h-button\n          [attr.id]=\"id() + '_header()'\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          [rounded]=\"true\"\n          type=\"button\"\n          role=\"button\"\n          [styleClass]=\"cx('pcToggleButton')\"\n          [attr.aria-label]=\"buttonAriaLabel\"\n          [attr.aria-controls]=\"id() + '_content'\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"onIconClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          [buttonProps]=\"toggleButtonProps()\"\n          [pt]=\"ptm('pcToggleButton')\"\n          [unstyled]=\"unstyled()\"\n          >\n          <ng-template #icon>\n            @if (!headerIconsTemplate() && !_headerIconsTemplate && !toggleButtonProps()?.icon) {\n              @if (!collapsed()) {\n                <svg data-h-icon=\"minus\" [hBind]=\"ptm('pcToggleButton.icon')\" />\n              }\n              @if (collapsed()) {\n                <svg data-h-icon=\"plus\" [hBind]=\"ptm('pcToggleButton.icon')\" />\n              }\n            }\n            <ng-template *ngTemplateOutlet=\"headerIconsTemplate() || _headerIconsTemplate; context: { $implicit: collapsed() }\"></ng-template>\n          </ng-template>\n        </h-button>\n      }\n    </div>\n  </div>\n}\n<div\n  [hBind]=\"ptm('contentContainer')\"\n  [hMotion]=\"!toggleable() || (toggleable() && !collapsed())\"\n  pMotionName=\"h-collapsible\"\n  [pMotionOptions]=\"computedMotionOptions()\"\n  [class]=\"cx('contentContainer')\"\n  [id]=\"id() + '_content'\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"id() + '_header()'\"\n  [attr.aria-hidden]=\"collapsed()\"\n  [attr.tabindex]=\"collapsed() ? '-1' : undefined\"\n  (pMotionOnAfterEnter)=\"onToggleDone($event)\"\n  >\n  <div [hBind]=\"ptm('contentWrapper')\" [class]=\"cx('contentWrapper')\">\n    <div [hBind]=\"ptm('content')\" [class]=\"cx('content')\" #contentWrapper>\n      <ng-content></ng-content>\n      <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate\"></ng-container>\n    </div>\n\n    @if (footerFacet() || footerTemplate() || _footerTemplate) {\n      <div [hBind]=\"ptm('footer')\" [class]=\"cx('footer')\">\n        <ng-content select=\"h-footer\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"footerTemplate() || _footerTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n</div>\n" }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], _header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], toggler: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggler", required: false }] }], transitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionOptions", required: false }] }], toggleButtonProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleButtonProps", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onBeforeToggle: [{ type: i0.Output, args: ["onBeforeToggle"] }], onAfterToggle: [{ type: i0.Output, args: ["onAfterToggle"] }], footerFacet: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Footer), { isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], iconsTemplate: [{ type: i0.ContentChild, args: ['icons', { ...{ descendants: false }, isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], headerIconsTemplate: [{ type: i0.ContentChild, args: ['headericons', { ...{ descendants: false }, isSignal: true }] }], contentWrapperViewChild: [{ type: i0.ViewChild, args: ['contentWrapper', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
-class PanelModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: PanelModule, imports: [Panel, SharedModule, BindModule], exports: [Panel, SharedModule, BindModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PanelModule, imports: [Panel, SharedModule, BindModule, SharedModule, BindModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PanelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [Panel, SharedModule, BindModule],
-                    exports: [Panel, SharedModule, BindModule]
-                }]
-        }] });
-
-// Backwards compatibility
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+const PANEL_INSTANCE = new InjectionToken("PANEL_INSTANCE");
+var Panel = class Panel extends BaseComponent {
+	componentName = "Panel";
+	$pcPanel = inject(PANEL_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	_componentStyle = inject(PanelStyle);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	id = input(uuid("pn_id_"), ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
+	toggleable = input(void 0, {
+		...ngDevMode ? { debugName: "toggleable" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	_header = input(void 0, {
+		...ngDevMode ? { debugName: "_header" } : 		/* istanbul ignore next */ {},
+		alias: "header"
+	});
+	collapsed = model(false, ...ngDevMode ? [{ debugName: "collapsed" }] : 	/* istanbul ignore next */ []);
+	styleClass = input(...ngDevMode ? [void 0, { debugName: "styleClass" }] : 	/* istanbul ignore next */ []);
+	iconPos = input("end", ...ngDevMode ? [{ debugName: "iconPos" }] : 	/* istanbul ignore next */ []);
+	showHeader = input(true, {
+		...ngDevMode ? { debugName: "showHeader" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	toggler = input("icon", ...ngDevMode ? [{ debugName: "toggler" }] : 	/* istanbul ignore next */ []);
+	transitionOptions = input("400ms cubic-bezier(0.86, 0, 0.07, 1)", ...ngDevMode ? [{ debugName: "transitionOptions" }] : 	/* istanbul ignore next */ []);
+	toggleButtonProps = input(...ngDevMode ? [void 0, { debugName: "toggleButtonProps" }] : 	/* istanbul ignore next */ []);
+	motionOptions = input(void 0, ...ngDevMode ? [{ debugName: "motionOptions" }] : 	/* istanbul ignore next */ []);
+	computedMotionOptions = computed(() => {
+		return {
+			...this.ptm("motion"),
+			...this.motionOptions()
+		};
+	}, ...ngDevMode ? [{ debugName: "computedMotionOptions" }] : 	/* istanbul ignore next */ []);
+	onBeforeToggle = output();
+	onAfterToggle = output();
+	footerFacet = contentChild(Footer, ...ngDevMode ? [{ debugName: "footerFacet" }] : 	/* istanbul ignore next */ []);
+	headerTemplate = contentChild("header", {
+		...ngDevMode ? { debugName: "headerTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	iconsTemplate = contentChild("icons", {
+		...ngDevMode ? { debugName: "iconsTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	contentTemplate = contentChild("content", {
+		...ngDevMode ? { debugName: "contentTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	footerTemplate = contentChild("footer", {
+		...ngDevMode ? { debugName: "footerTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	headerIconsTemplate = contentChild("headericons", {
+		...ngDevMode ? { debugName: "headerIconsTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	_headerTemplate;
+	_iconsTemplate;
+	_contentTemplate;
+	_footerTemplate;
+	_headerIconsTemplate;
+	contentWrapperViewChild = viewChild.required("contentWrapper", ...ngDevMode ? [{ debugName: "contentWrapperViewChild" }] : 	/* istanbul ignore next */ []);
+	get buttonAriaLabel() {
+		return this._header();
+	}
+	onHeaderClick(event) {
+		if (this.toggler() === "header") this.toggle(event);
+	}
+	onIconClick(event) {
+		if (this.toggler() === "icon") this.toggle(event);
+	}
+	toggle(event) {
+		this.onBeforeToggle.emit({
+			originalEvent: event,
+			collapsed: this.collapsed()
+		});
+		if (this.collapsed()) this.expand();
+		else this.collapse();
+		event.preventDefault();
+	}
+	expand() {
+		this.collapsed.set(false);
+		this.updateTabIndex();
+	}
+	collapse() {
+		this.collapsed.set(true);
+		this.updateTabIndex();
+	}
+	getBlockableElement() {
+		return this.el.nativeElement;
+	}
+	updateTabIndex() {
+		const contentWrapperViewChild = this.contentWrapperViewChild();
+		if (contentWrapperViewChild) contentWrapperViewChild.nativeElement.querySelectorAll("input, button, select, a, textarea, [tabindex]").forEach((element) => {
+			if (this.collapsed()) element.setAttribute("tabindex", "-1");
+			else element.removeAttribute("tabindex");
+		});
+	}
+	onKeyDown(event) {
+		if (event.code === "Enter" || event.code === "Space") {
+			this.toggle(event);
+			event.preventDefault();
+		}
+	}
+	onToggleDone(event) {
+		this.onAfterToggle.emit({
+			originalEvent: event,
+			collapsed: this.collapsed()
+		});
+	}
+	templates = contentChildren(HelixTemplate, ...ngDevMode ? [{ debugName: "templates" }] : 	/* istanbul ignore next */ []);
+	onAfterContentInit() {
+		this.templates().forEach((item) => {
+			switch (item.getType()) {
+				case "header":
+					this._headerTemplate = item.template;
+					break;
+				case "content":
+					this._contentTemplate = item.template;
+					break;
+				case "footer":
+					this._footerTemplate = item.template;
+					break;
+				case "icons":
+					this._iconsTemplate = item.template;
+					break;
+				case "headericons":
+					this._headerIconsTemplate = item.template;
+					break;
+				default:
+					this._contentTemplate = item.template;
+					break;
+			}
+		});
+	}
+	get dataP() {
+		return this.cn({ toggleable: this.toggleable() });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: Panel,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: Panel,
+		isStandalone: true,
+		selector: "h-panel",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			toggleable: {
+				classPropertyName: "toggleable",
+				publicName: "toggleable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			_header: {
+				classPropertyName: "_header",
+				publicName: "header",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsed: {
+				classPropertyName: "collapsed",
+				publicName: "collapsed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			styleClass: {
+				classPropertyName: "styleClass",
+				publicName: "styleClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconPos: {
+				classPropertyName: "iconPos",
+				publicName: "iconPos",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showHeader: {
+				classPropertyName: "showHeader",
+				publicName: "showHeader",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			toggler: {
+				classPropertyName: "toggler",
+				publicName: "toggler",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			transitionOptions: {
+				classPropertyName: "transitionOptions",
+				publicName: "transitionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			toggleButtonProps: {
+				classPropertyName: "toggleButtonProps",
+				publicName: "toggleButtonProps",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			motionOptions: {
+				classPropertyName: "motionOptions",
+				publicName: "motionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			collapsed: "collapsedChange",
+			onBeforeToggle: "onBeforeToggle",
+			onAfterToggle: "onAfterToggle"
+		},
+		host: { properties: {
+			"id": "id()",
+			"class": "cn(cx('root'), styleClass())",
+			"attr.data-h": "dataP"
+		} },
+		providers: [
+			PanelStyle,
+			{
+				provide: PANEL_INSTANCE,
+				useExisting: Panel
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: Panel
+			}
+		],
+		queries: [
+			{
+				propertyName: "footerFacet",
+				first: true,
+				predicate: Footer,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "headerTemplate",
+				first: true,
+				predicate: ["header"],
+				isSignal: true
+			},
+			{
+				propertyName: "iconsTemplate",
+				first: true,
+				predicate: ["icons"],
+				isSignal: true
+			},
+			{
+				propertyName: "contentTemplate",
+				first: true,
+				predicate: ["content"],
+				isSignal: true
+			},
+			{
+				propertyName: "footerTemplate",
+				first: true,
+				predicate: ["footer"],
+				isSignal: true
+			},
+			{
+				propertyName: "headerIconsTemplate",
+				first: true,
+				predicate: ["headericons"],
+				isSignal: true
+			},
+			{
+				propertyName: "templates",
+				predicate: HelixTemplate,
+				isSignal: true
+			}
+		],
+		viewQueries: [{
+			propertyName: "contentWrapperViewChild",
+			first: true,
+			predicate: ["contentWrapper"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: "@if (showHeader()) {\n  <div [hBind]=\"ptm('header')\" [class]=\"cx('header')\" (click)=\"onHeaderClick($event)\" [attr.id]=\"id() + '-titlebar'\" [attr.data-h]=\"dataP\">\n    @if (_header()) {\n      <span [hBind]=\"ptm('title')\" [class]=\"cx('title')\" [attr.id]=\"id() + '_header()'\">{{ _header() }}</span>\n    }\n    <ng-content select=\"h-header\"></ng-content>\n    <ng-container *ngTemplateOutlet=\"headerTemplate() || _headerTemplate\"></ng-container>\n    <div [hBind]=\"ptm('headerActions')\" [class]=\"cx('headerActions')\">\n      <ng-template *ngTemplateOutlet=\"iconsTemplate() || _iconsTemplate\"></ng-template>\n      @if (toggleable()) {\n        <h-button\n          [attr.id]=\"id() + '_header()'\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          [rounded]=\"true\"\n          type=\"button\"\n          role=\"button\"\n          [styleClass]=\"cx('pcToggleButton')\"\n          [attr.aria-label]=\"buttonAriaLabel\"\n          [attr.aria-controls]=\"id() + '_content'\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"onIconClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          [buttonProps]=\"toggleButtonProps()\"\n          [pt]=\"ptm('pcToggleButton')\"\n          [unstyled]=\"unstyled()\"\n          >\n          <ng-template #icon>\n            @if (!headerIconsTemplate() && !_headerIconsTemplate && !toggleButtonProps()?.icon) {\n              @if (!collapsed()) {\n                <svg data-h-icon=\"minus\" [hBind]=\"ptm('pcToggleButton.icon')\" />\n              }\n              @if (collapsed()) {\n                <svg data-h-icon=\"plus\" [hBind]=\"ptm('pcToggleButton.icon')\" />\n              }\n            }\n            <ng-template *ngTemplateOutlet=\"headerIconsTemplate() || _headerIconsTemplate; context: { $implicit: collapsed() }\"></ng-template>\n          </ng-template>\n        </h-button>\n      }\n    </div>\n  </div>\n}\n<div\n  [hBind]=\"ptm('contentContainer')\"\n  [hMotion]=\"!toggleable() || (toggleable() && !collapsed())\"\n  pMotionName=\"h-collapsible\"\n  [pMotionOptions]=\"computedMotionOptions()\"\n  [class]=\"cx('contentContainer')\"\n  [id]=\"id() + '_content'\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"id() + '_header()'\"\n  [attr.aria-hidden]=\"collapsed()\"\n  [attr.tabindex]=\"collapsed() ? '-1' : undefined\"\n  (pMotionOnAfterEnter)=\"onToggleDone($event)\"\n  >\n  <div [hBind]=\"ptm('contentWrapper')\" [class]=\"cx('contentWrapper')\">\n    <div [hBind]=\"ptm('content')\" [class]=\"cx('content')\" #contentWrapper>\n      <ng-content></ng-content>\n      <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate\"></ng-container>\n    </div>\n\n    @if (footerFacet() || footerTemplate() || _footerTemplate) {\n      <div [hBind]=\"ptm('footer')\" [class]=\"cx('footer')\">\n        <ng-content select=\"h-footer\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"footerTemplate() || _footerTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n</div>\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i2.NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: PlusIcon,
+				selector: "[data-h-icon=\"plus\"]"
+			},
+			{
+				kind: "component",
+				type: MinusIcon,
+				selector: "[data-h-icon=\"minus\"]"
+			},
+			{
+				kind: "ngmodule",
+				type: ButtonModule
+			},
+			{
+				kind: "component",
+				type: i3.Button,
+				selector: "h-button",
+				inputs: [
+					"hostName",
+					"type",
+					"badge",
+					"disabled",
+					"raised",
+					"rounded",
+					"text",
+					"plain",
+					"outlined",
+					"link",
+					"tabindex",
+					"size",
+					"variant",
+					"style",
+					"styleClass",
+					"badgeClass",
+					"badgeSeverity",
+					"ariaLabel",
+					"autofocus",
+					"iconPos",
+					"icon",
+					"label",
+					"loading",
+					"loadingIcon",
+					"severity",
+					"buttonProps",
+					"fluid"
+				],
+				outputs: [
+					"onClick",
+					"onFocus",
+					"onBlur"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "ngmodule",
+				type: BindModule
+			},
+			{
+				kind: "directive",
+				type: i1.Bind,
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			},
+			{
+				kind: "ngmodule",
+				type: MotionModule
+			},
+			{
+				kind: "directive",
+				type: i4.MotionDirective,
+				selector: "[hMotion]",
+				inputs: [
+					"hMotion",
+					"pMotionName",
+					"pMotionType",
+					"pMotionSafe",
+					"pMotionDisabled",
+					"pMotionAppear",
+					"pMotionEnter",
+					"pMotionLeave",
+					"pMotionDuration",
+					"pMotionHideStrategy",
+					"pMotionEnterFromClass",
+					"pMotionEnterToClass",
+					"pMotionEnterActiveClass",
+					"pMotionLeaveFromClass",
+					"pMotionLeaveToClass",
+					"pMotionLeaveActiveClass",
+					"pMotionOptions"
+				],
+				outputs: [
+					"pMotionOnBeforeEnter",
+					"pMotionOnEnter",
+					"pMotionOnAfterEnter",
+					"pMotionOnEnterCancelled",
+					"pMotionOnBeforeLeave",
+					"pMotionOnLeave",
+					"pMotionOnAfterLeave",
+					"pMotionOnLeaveCancelled"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: Panel,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-panel",
+			standalone: true,
+			imports: [
+				CommonModule,
+				PlusIcon,
+				MinusIcon,
+				ButtonModule,
+				SharedModule,
+				BindModule,
+				MotionModule
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			providers: [
+				PanelStyle,
+				{
+					provide: PANEL_INSTANCE,
+					useExisting: Panel
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: Panel
+				}
+			],
+			host: {
+				"[id]": "id()",
+				"[class]": "cn(cx('root'), styleClass())",
+				"[attr.data-h]": "dataP"
+			},
+			hostDirectives: [Bind],
+			template: "@if (showHeader()) {\n  <div [hBind]=\"ptm('header')\" [class]=\"cx('header')\" (click)=\"onHeaderClick($event)\" [attr.id]=\"id() + '-titlebar'\" [attr.data-h]=\"dataP\">\n    @if (_header()) {\n      <span [hBind]=\"ptm('title')\" [class]=\"cx('title')\" [attr.id]=\"id() + '_header()'\">{{ _header() }}</span>\n    }\n    <ng-content select=\"h-header\"></ng-content>\n    <ng-container *ngTemplateOutlet=\"headerTemplate() || _headerTemplate\"></ng-container>\n    <div [hBind]=\"ptm('headerActions')\" [class]=\"cx('headerActions')\">\n      <ng-template *ngTemplateOutlet=\"iconsTemplate() || _iconsTemplate\"></ng-template>\n      @if (toggleable()) {\n        <h-button\n          [attr.id]=\"id() + '_header()'\"\n          severity=\"secondary\"\n          [text]=\"true\"\n          [rounded]=\"true\"\n          type=\"button\"\n          role=\"button\"\n          [styleClass]=\"cx('pcToggleButton')\"\n          [attr.aria-label]=\"buttonAriaLabel\"\n          [attr.aria-controls]=\"id() + '_content'\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"onIconClick($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          [buttonProps]=\"toggleButtonProps()\"\n          [pt]=\"ptm('pcToggleButton')\"\n          [unstyled]=\"unstyled()\"\n          >\n          <ng-template #icon>\n            @if (!headerIconsTemplate() && !_headerIconsTemplate && !toggleButtonProps()?.icon) {\n              @if (!collapsed()) {\n                <svg data-h-icon=\"minus\" [hBind]=\"ptm('pcToggleButton.icon')\" />\n              }\n              @if (collapsed()) {\n                <svg data-h-icon=\"plus\" [hBind]=\"ptm('pcToggleButton.icon')\" />\n              }\n            }\n            <ng-template *ngTemplateOutlet=\"headerIconsTemplate() || _headerIconsTemplate; context: { $implicit: collapsed() }\"></ng-template>\n          </ng-template>\n        </h-button>\n      }\n    </div>\n  </div>\n}\n<div\n  [hBind]=\"ptm('contentContainer')\"\n  [hMotion]=\"!toggleable() || (toggleable() && !collapsed())\"\n  pMotionName=\"h-collapsible\"\n  [pMotionOptions]=\"computedMotionOptions()\"\n  [class]=\"cx('contentContainer')\"\n  [id]=\"id() + '_content'\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"id() + '_header()'\"\n  [attr.aria-hidden]=\"collapsed()\"\n  [attr.tabindex]=\"collapsed() ? '-1' : undefined\"\n  (pMotionOnAfterEnter)=\"onToggleDone($event)\"\n  >\n  <div [hBind]=\"ptm('contentWrapper')\" [class]=\"cx('contentWrapper')\">\n    <div [hBind]=\"ptm('content')\" [class]=\"cx('content')\" #contentWrapper>\n      <ng-content></ng-content>\n      <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate\"></ng-container>\n    </div>\n\n    @if (footerFacet() || footerTemplate() || _footerTemplate) {\n      <div [hBind]=\"ptm('footer')\" [class]=\"cx('footer')\">\n        <ng-content select=\"h-footer\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"footerTemplate() || _footerTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n</div>\n"
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		toggleable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toggleable",
+				required: false
+			}]
+		}],
+		_header: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "header",
+				required: false
+			}]
+		}],
+		collapsed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsed",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["collapsedChange"]
+		}],
+		styleClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "styleClass",
+				required: false
+			}]
+		}],
+		iconPos: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconPos",
+				required: false
+			}]
+		}],
+		showHeader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showHeader",
+				required: false
+			}]
+		}],
+		toggler: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toggler",
+				required: false
+			}]
+		}],
+		transitionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "transitionOptions",
+				required: false
+			}]
+		}],
+		toggleButtonProps: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toggleButtonProps",
+				required: false
+			}]
+		}],
+		motionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "motionOptions",
+				required: false
+			}]
+		}],
+		onBeforeToggle: [{
+			type: i0.Output,
+			args: ["onBeforeToggle"]
+		}],
+		onAfterToggle: [{
+			type: i0.Output,
+			args: ["onAfterToggle"]
+		}],
+		footerFacet: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => Footer), { isSignal: true }]
+		}],
+		headerTemplate: [{
+			type: i0.ContentChild,
+			args: ["header", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		iconsTemplate: [{
+			type: i0.ContentChild,
+			args: ["icons", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		contentTemplate: [{
+			type: i0.ContentChild,
+			args: ["content", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		footerTemplate: [{
+			type: i0.ContentChild,
+			args: ["footer", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		headerIconsTemplate: [{
+			type: i0.ContentChild,
+			args: ["headericons", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		contentWrapperViewChild: [{
+			type: i0.ViewChild,
+			args: ["contentWrapper", { isSignal: true }]
+		}],
+		templates: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }]
+		}]
+	}
+});
+var PanelModule = class PanelModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PanelModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PanelModule,
+		imports: [
+			Panel,
+			SharedModule,
+			BindModule
+		],
+		exports: [
+			Panel,
+			SharedModule,
+			BindModule
+		]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PanelModule,
+		imports: [
+			Panel,
+			SharedModule,
+			BindModule,
+			SharedModule,
+			BindModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: PanelModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				Panel,
+				SharedModule,
+				BindModule
+			],
+			exports: [
+				Panel,
+				SharedModule,
+				BindModule
+			]
+		}]
+	}]
+});
 export { Panel, PanelClasses, PanelModule, PanelStyle };
-//# sourceMappingURL=gravionlabs-helix-core-panel.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-panel.mjs.map