@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-drawer.mjs

@@ -0,0 +1,308 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostListener, computed, effect, inject, input, output, signal, untracked } from "@angular/core";
+import * as i1 from "@angular/cdk/a11y";
+import { A11yModule } from "@angular/cdk/a11y";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { OverlayStackService } from "@lifecorner/angular-ui-kit/internal/overlay";
+const CLOSE_ANIMATION_MS = 250;
+var DrawerComponent = class DrawerComponent {
+	static nextId = 0;
+	open = input(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	position = input("right", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	heading = input("", ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	hasOverlay = input(true, ...ngDevMode ? [{ debugName: "hasOverlay" }] : /* istanbul ignore next */ []);
+	closeOnOverlayClick = input(true, ...ngDevMode ? [{ debugName: "closeOnOverlayClick" }] : /* istanbul ignore next */ []);
+	closeOnEscape = input(true, ...ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	closeAriaLabel = input("Close drawer", ...ngDevMode ? [{ debugName: "closeAriaLabel" }] : /* istanbul ignore next */ []);
+	closed = output();
+	_visible = signal(false, ...ngDevMode ? [{ debugName: "_visible" }] : /* istanbul ignore next */ []);
+	widthValue = computed(() => {
+		return {
+			sm: "320px",
+			md: "400px",
+			lg: "520px",
+			xl: "640px"
+		}[this.size()];
+	}, ...ngDevMode ? [{ debugName: "widthValue" }] : /* istanbul ignore next */ []);
+	panelClasses = computed(() => {
+		const cls = ["lc-drawer__panel", `lc-drawer__panel--${this.position()}`];
+		if (this.open()) cls.push("lc-drawer__panel--open");
+		return cls.join(" ");
+	}, ...ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []);
+	overlayStack = inject(OverlayStackService);
+	drawerId = `lc-drawer-${++DrawerComponent.nextId}`;
+	closeTimer;
+	originalOverflow;
+	constructor() {
+		effect(() => {
+			const isOpen = this.open();
+			untracked(() => {
+				if (isOpen) {
+					this.clearCloseTimer();
+					this._visible.set(true);
+					this.lockScroll();
+					this.overlayStack.push(this.drawerId);
+				} else if (this._visible()) {
+					this.overlayStack.remove(this.drawerId);
+					this.closeTimer = setTimeout(() => {
+						this.closeTimer = void 0;
+						this._visible.set(false);
+						this.unlockScroll();
+					}, CLOSE_ANIMATION_MS);
+				}
+			});
+		});
+	}
+	ngOnDestroy() {
+		this.clearCloseTimer();
+		this.overlayStack.remove(this.drawerId);
+		this.unlockScroll();
+	}
+	onOverlayClick(event) {
+		if (!this.overlayStack.claim(this.drawerId, event)) return;
+		if (this.closeOnOverlayClick()) this.close();
+	}
+	close() {
+		this.closed.emit();
+	}
+	onKeydown(event) {
+		if (event.key !== "Escape" || !this.open()) return;
+		if (!this.overlayStack.claim(this.drawerId, event)) return;
+		event.stopPropagation();
+		if (this.closeOnEscape()) this.close();
+	}
+	lockScroll() {
+		if (typeof document === "undefined" || this.originalOverflow !== void 0) return;
+		this.originalOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+	}
+	unlockScroll() {
+		if (typeof document === "undefined" || this.originalOverflow === void 0) return;
+		document.body.style.overflow = this.originalOverflow;
+		this.originalOverflow = void 0;
+	}
+	clearCloseTimer() {
+		if (this.closeTimer !== void 0) {
+			clearTimeout(this.closeTimer);
+			this.closeTimer = void 0;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: DrawerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: DrawerComponent,
+		isStandalone: true,
+		selector: "lc-drawer",
+		inputs: {
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hasOverlay: {
+				classPropertyName: "hasOverlay",
+				publicName: "hasOverlay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeOnOverlayClick: {
+				classPropertyName: "closeOnOverlayClick",
+				publicName: "closeOnOverlayClick",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeOnEscape: {
+				classPropertyName: "closeOnEscape",
+				publicName: "closeOnEscape",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeAriaLabel: {
+				classPropertyName: "closeAriaLabel",
+				publicName: "closeAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { closed: "closed" },
+		host: { listeners: { "document:keydown": "onKeydown($event)" } },
+		ngImport: i0,
+		template: "@if (_visible()) {\n  <div class=\"lc-drawer\">\n    <!-- Overlay -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-drawer__overlay\"\n        [class.lc-drawer__overlay--visible]=\"open()\"\n        (click)=\"onOverlayClick($event)\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n\n    <!-- Panel. Focus moves in on open and back to the opener when the panel\n         is torn down (cdkTrapFocusAutoCapture); focus is only trapped while\n         the backdrop makes the page behind inert. -->\n    <aside\n      [class]=\"panelClasses()\"\n      [style.width]=\"widthValue()\"\n      role=\"dialog\"\n      [attr.aria-label]=\"ariaLabel() || heading() || 'Drawer'\"\n      [attr.aria-modal]=\"hasOverlay() ? 'true' : null\"\n      [cdkTrapFocus]=\"hasOverlay()\"\n      [cdkTrapFocusAutoCapture]=\"true\"\n    >\n      <!-- Header -->\n      @if (heading()) {\n        <header class=\"lc-drawer__header\">\n          <h2 class=\"lc-drawer__heading\">{{ heading() }}</h2>\n          <button\n            type=\"button\"\n            class=\"lc-drawer__close\"\n            (click)=\"close()\"\n            [attr.aria-label]=\"closeAriaLabel()\"\n          >\n            <lc-icon name=\"x-mark\" size=\"sm\" />\n          </button>\n        </header>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"lc-drawer__close lc-drawer__close--floating\"\n          (click)=\"close()\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\" size=\"sm\" />\n        </button>\n      }\n\n      <!-- Projected content -->\n      <div class=\"lc-drawer__body\">\n        <ng-content />\n      </div>\n    </aside>\n  </div>\n}\n",
+		styles: ["@charset \"UTF-8\";.lc-drawer{position:fixed;inset:0;z-index:1100;pointer-events:none}.lc-drawer__overlay{position:absolute;inset:0;background:#0000;transition:background .25s ease;pointer-events:auto;cursor:pointer}.lc-drawer__overlay--visible{background:#00000073}.lc-drawer__panel{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;background-color:var(--color-surface);background-image:var(--gradient-surface);box-shadow:var(--elevation-4);pointer-events:auto;transition:transform .25s cubic-bezier(.4,0,.2,1);max-width:90vw;overflow:hidden}.lc-drawer__panel--right{right:0;transform:translate(100%);border-left:1px solid var(--color-border-strong)}.lc-drawer__panel--left{left:0;transform:translate(-100%);border-right:1px solid var(--color-border-strong)}.lc-drawer__panel--open{transform:translate(0)}.lc-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--color-divider);flex-shrink:0}.lc-drawer__heading{margin:0;font-size:1rem;font-weight:600;color:var(--color-text-primary);letter-spacing:-.01em}.lc-drawer__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-tertiary);cursor:pointer;transition:background .15s,color .15s}.lc-drawer__close:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-drawer__close:focus-visible{outline:2px solid var(--color-primary-500, #208497);outline-offset:2px}.lc-drawer__close--floating{position:absolute;top:.75rem;right:.75rem;z-index:1}.lc-drawer__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:640px){.lc-drawer__panel{max-width:100vw;width:100vw!important}}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: A11yModule
+			},
+			{
+				kind: "directive",
+				type: i1.CdkTrapFocus,
+				selector: "[cdkTrapFocus]",
+				inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"],
+				exportAs: ["cdkTrapFocus"]
+			},
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "lc-icon",
+				inputs: [
+					"name",
+					"variant",
+					"size",
+					"color",
+					"ariaLabel",
+					"decorative",
+					"strict"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: DrawerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-drawer",
+			standalone: true,
+			imports: [A11yModule, IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@if (_visible()) {\n  <div class=\"lc-drawer\">\n    <!-- Overlay -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-drawer__overlay\"\n        [class.lc-drawer__overlay--visible]=\"open()\"\n        (click)=\"onOverlayClick($event)\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n\n    <!-- Panel. Focus moves in on open and back to the opener when the panel\n         is torn down (cdkTrapFocusAutoCapture); focus is only trapped while\n         the backdrop makes the page behind inert. -->\n    <aside\n      [class]=\"panelClasses()\"\n      [style.width]=\"widthValue()\"\n      role=\"dialog\"\n      [attr.aria-label]=\"ariaLabel() || heading() || 'Drawer'\"\n      [attr.aria-modal]=\"hasOverlay() ? 'true' : null\"\n      [cdkTrapFocus]=\"hasOverlay()\"\n      [cdkTrapFocusAutoCapture]=\"true\"\n    >\n      <!-- Header -->\n      @if (heading()) {\n        <header class=\"lc-drawer__header\">\n          <h2 class=\"lc-drawer__heading\">{{ heading() }}</h2>\n          <button\n            type=\"button\"\n            class=\"lc-drawer__close\"\n            (click)=\"close()\"\n            [attr.aria-label]=\"closeAriaLabel()\"\n          >\n            <lc-icon name=\"x-mark\" size=\"sm\" />\n          </button>\n        </header>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"lc-drawer__close lc-drawer__close--floating\"\n          (click)=\"close()\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\" size=\"sm\" />\n        </button>\n      }\n\n      <!-- Projected content -->\n      <div class=\"lc-drawer__body\">\n        <ng-content />\n      </div>\n    </aside>\n  </div>\n}\n",
+			styles: ["@charset \"UTF-8\";.lc-drawer{position:fixed;inset:0;z-index:1100;pointer-events:none}.lc-drawer__overlay{position:absolute;inset:0;background:#0000;transition:background .25s ease;pointer-events:auto;cursor:pointer}.lc-drawer__overlay--visible{background:#00000073}.lc-drawer__panel{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;background-color:var(--color-surface);background-image:var(--gradient-surface);box-shadow:var(--elevation-4);pointer-events:auto;transition:transform .25s cubic-bezier(.4,0,.2,1);max-width:90vw;overflow:hidden}.lc-drawer__panel--right{right:0;transform:translate(100%);border-left:1px solid var(--color-border-strong)}.lc-drawer__panel--left{left:0;transform:translate(-100%);border-right:1px solid var(--color-border-strong)}.lc-drawer__panel--open{transform:translate(0)}.lc-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--color-divider);flex-shrink:0}.lc-drawer__heading{margin:0;font-size:1rem;font-weight:600;color:var(--color-text-primary);letter-spacing:-.01em}.lc-drawer__close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-tertiary);cursor:pointer;transition:background .15s,color .15s}.lc-drawer__close:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-drawer__close:focus-visible{outline:2px solid var(--color-primary-500, #208497);outline-offset:2px}.lc-drawer__close--floating{position:absolute;top:.75rem;right:.75rem;z-index:1}.lc-drawer__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:640px){.lc-drawer__panel{max-width:100vw;width:100vw!important}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: false
+			}]
+		}],
+		hasOverlay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hasOverlay",
+				required: false
+			}]
+		}],
+		closeOnOverlayClick: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOnOverlayClick",
+				required: false
+			}]
+		}],
+		closeOnEscape: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOnEscape",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		closeAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeAriaLabel",
+				required: false
+			}]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}],
+		onKeydown: [{
+			type: HostListener,
+			args: ["document:keydown", ["$event"]]
+		}]
+	}
+});
+export { DrawerComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-drawer.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-drawer.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/drawer/drawer.component.ts","../../../../libs/angular-ui-kit/src/lib/drawer/drawer.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  output,\n  signal,\n  computed,\n  effect,\n  untracked,\n  inject,\n  HostListener,\n  OnDestroy,\n} from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { OverlayStackService } from '@lifecorner/angular-ui-kit/internal/overlay';\n\nexport type DrawerPosition = 'left' | 'right';\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';\n\n/** Duration of the slide-out transition (see drawer.component.scss). */\nconst CLOSE_ANIMATION_MS = 250;\n\n/**\n * Drawer component for slide-out overlay panels.\n *\n * Features:\n * - Slide-in from left or right\n * - Size presets (sm, md, lg, xl)\n * - Optional backdrop overlay with click-to-close\n * - Close on Escape key support\n * - Heading text display\n * - Content projection for arbitrary body content\n * - Accessible with ARIA dialog role, focus trap and focus restore\n *\n * @example\n * ```html\n * <lc-drawer [open]=\"showPanel\" position=\"right\" size=\"md\"\n *            heading=\"Settings\" (closed)=\"showPanel = false\">\n *   <p>Any content goes here</p>\n * </lc-drawer>\n * ```\n */\n@Component({\n  selector: 'lc-drawer',\n  standalone: true,\n  imports: [A11yModule, IconComponent],\n  templateUrl: './drawer.component.html',\n  styleUrl: './drawer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DrawerComponent implements OnDestroy {\n  private static nextId = 0;\n\n  /** Whether the drawer is open. */\n  readonly open = input<boolean>(false);\n\n  /** Slide-in direction. */\n  readonly position = input<DrawerPosition>('right');\n\n  /** Predefined width (sm=320, md=400, lg=520, xl=640). */\n  readonly size = input<DrawerSize>('md');\n\n  /** Optional heading shown in the drawer header. */\n  readonly heading = input<string>('');\n\n  /** Whether the overlay backdrop is shown. */\n  readonly hasOverlay = input<boolean>(true);\n\n  /** Whether clicking the overlay closes the drawer. */\n  readonly closeOnOverlayClick = input<boolean>(true);\n\n  /** Whether pressing Escape closes the drawer. */\n  readonly closeOnEscape = input<boolean>(true);\n\n  /** ARIA label for assistive technology. */\n  readonly ariaLabel = input<string>('');\n\n  /** Accessible name of the close button. */\n  readonly closeAriaLabel = input('Close drawer');\n\n  /** Emitted when the drawer should close. */\n  readonly closed = output<void>();\n\n  /** Internal visibility — stays true during the slide-out animation. */\n  protected _visible = signal(false);\n\n  /** Width token → CSS. */\n  protected readonly widthValue = computed(() => {\n    const map: Record<DrawerSize, string> = {\n      sm: '320px',\n      md: '400px',\n      lg: '520px',\n      xl: '640px',\n    };\n    return map[this.size()];\n  });\n\n  protected readonly panelClasses = computed(() => {\n    const cls = ['lc-drawer__panel', `lc-drawer__panel--${this.position()}`];\n    if (this.open()) cls.push('lc-drawer__panel--open');\n    return cls.join(' ');\n  });\n\n  private readonly overlayStack = inject(OverlayStackService);\n  /** Identifies this instance in the overlay stack. */\n  private readonly drawerId = `lc-drawer-${++DrawerComponent.nextId}`;\n  private closeTimer?: ReturnType<typeof setTimeout>;\n  private originalOverflow?: string;\n\n  constructor() {\n    effect(() => {\n      const isOpen = this.open();\n      untracked(() => {\n        if (isOpen) {\n          // Re-opening within the close animation must cancel the pending hide,\n          // otherwise the stale timer hides the drawer and unlocks scroll while\n          // `open()` is still true.\n          this.clearCloseTimer();\n          this._visible.set(true);\n          this.lockScroll();\n          this.overlayStack.push(this.drawerId);\n        } else if (this._visible()) {\n          this.overlayStack.remove(this.drawerId);\n          // Keep the panel mounted until the slide-out transition has finished\n          this.closeTimer = setTimeout(() => {\n            this.closeTimer = undefined;\n            this._visible.set(false);\n            this.unlockScroll();\n          }, CLOSE_ANIMATION_MS);\n        }\n      });\n    });\n  }\n\n  ngOnDestroy(): void {\n    // Navigating away while open must not leave the page scroll-locked\n    this.clearCloseTimer();\n    this.overlayStack.remove(this.drawerId);\n    this.unlockScroll();\n  }\n\n  /**\n   * Handle backdrop click. Ignored while another overlay (menu, popover, …)\n   * sits above this drawer — the click belongs to that layer.\n   */\n  protected onOverlayClick(event: MouseEvent): void {\n    if (!this.overlayStack.claim(this.drawerId, event)) return;\n    if (this.closeOnOverlayClick()) {\n      this.close();\n    }\n  }\n\n  /** Handle close action. */\n  protected close(): void {\n    this.closed.emit();\n  }\n\n  /**\n   * Escape closes the drawer only while it is the top-most overlay; the event\n   * is consumed either way so overlays underneath stay open.\n   */\n  @HostListener('document:keydown', ['$event'])\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'Escape' || !this.open()) return;\n    if (!this.overlayStack.claim(this.drawerId, event)) return;\n    event.stopPropagation();\n    if (this.closeOnEscape()) {\n      this.close();\n    }\n  }\n\n  private lockScroll(): void {\n    if (typeof document === 'undefined' || this.originalOverflow !== undefined) return;\n    this.originalOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  }\n\n  private unlockScroll(): void {\n    if (typeof document === 'undefined' || this.originalOverflow === undefined) return;\n    document.body.style.overflow = this.originalOverflow;\n    this.originalOverflow = undefined;\n  }\n\n  private clearCloseTimer(): void {\n    if (this.closeTimer !== undefined) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = undefined;\n    }\n  }\n}\n","@if (_visible()) {\n  <div class=\"lc-drawer\">\n    <!-- Overlay -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-drawer__overlay\"\n        [class.lc-drawer__overlay--visible]=\"open()\"\n        (click)=\"onOverlayClick($event)\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n\n    <!-- Panel. Focus moves in on open and back to the opener when the panel\n         is torn down (cdkTrapFocusAutoCapture); focus is only trapped while\n         the backdrop makes the page behind inert. -->\n    <aside\n      [class]=\"panelClasses()\"\n      [style.width]=\"widthValue()\"\n      role=\"dialog\"\n      [attr.aria-label]=\"ariaLabel() || heading() || 'Drawer'\"\n      [attr.aria-modal]=\"hasOverlay() ? 'true' : null\"\n      [cdkTrapFocus]=\"hasOverlay()\"\n      [cdkTrapFocusAutoCapture]=\"true\"\n    >\n      <!-- Header -->\n      @if (heading()) {\n        <header class=\"lc-drawer__header\">\n          <h2 class=\"lc-drawer__heading\">{{ heading() }}</h2>\n          <button\n            type=\"button\"\n            class=\"lc-drawer__close\"\n            (click)=\"close()\"\n            [attr.aria-label]=\"closeAriaLabel()\"\n          >\n            <lc-icon name=\"x-mark\" size=\"sm\" />\n          </button>\n        </header>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"lc-drawer__close lc-drawer__close--floating\"\n          (click)=\"close()\"\n          [attr.aria-label]=\"closeAriaLabel()\"\n        >\n          <lc-icon name=\"x-mark\" size=\"sm\" />\n        </button>\n      }\n\n      <!-- Projected content -->\n      <div class=\"lc-drawer__body\">\n        <ng-content />\n      </div>\n    </aside>\n  </div>\n}\n"],"mappings":"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"}