semmet-angular 0.11.0 → 0.12.0

package/src/offcanvas/files/__name@dasherize__/__name@dasherize__.css.template

@@ -0,0 +1,180 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-on-primary: #ffffff;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-backdrop: rgba(24, 24, 27, 0.44);
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-on-surface: #27272a;
+  --semmet-color-on-surface-variant: #71717a;
+  --semmet-radius-md: 10px;
+  --semmet-elevation-3: 0 20px 48px rgba(20, 24, 23, 0.22), 0 8px 20px rgba(20, 24, 23, 0.14);
+  --semmet-motion: 220ms cubic-bezier(0.2, 0, 0, 1);
+
+  display: inline-block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+.semmet-offcanvas__trigger {
+  min-height: 2.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid transparent;
+  border-radius: var(--semmet-radius-md);
+  color: var(--semmet-color-on-primary);
+  background: var(--semmet-color-primary);
+  font: inherit;
+  font-weight: 650;
+  cursor: pointer;
+}
+
+.semmet-offcanvas__trigger:focus-visible,
+.semmet-offcanvas__close:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}
+
+.semmet-offcanvas__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: var(--semmet-color-backdrop);
+}
+
+.semmet-offcanvas__panel {
+  position: fixed;
+  z-index: 1001;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  box-shadow: var(--semmet-elevation-3);
+  animation: semmet-offcanvas-enter var(--semmet-motion);
+}
+
+.semmet-offcanvas__panel--start,
+.semmet-offcanvas__panel--end {
+  top: 0;
+  bottom: 0;
+  width: min(26rem, 92vw);
+}
+
+.semmet-offcanvas__panel--start {
+  left: 0;
+}
+
+.semmet-offcanvas__panel--end {
+  right: 0;
+}
+
+.semmet-offcanvas__panel--top,
+.semmet-offcanvas__panel--bottom {
+  left: 0;
+  right: 0;
+  max-height: min(32rem, 82vh);
+}
+
+.semmet-offcanvas__panel--top {
+  top: 0;
+}
+
+.semmet-offcanvas__panel--bottom {
+  bottom: 0;
+}
+
+.semmet-offcanvas__header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.25rem;
+  border-block-end: 1px solid var(--semmet-color-outline);
+}
+
+.semmet-offcanvas__title,
+.semmet-offcanvas__description,
+.semmet-offcanvas__placeholder {
+  margin: 0;
+}
+
+.semmet-offcanvas__title {
+  font-size: 1.125rem;
+  line-height: 1.25;
+}
+
+.semmet-offcanvas__description {
+  margin-block-start: 0.375rem;
+  color: var(--semmet-color-on-surface-variant);
+  line-height: 1.4;
+}
+
+.semmet-offcanvas__close {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 0;
+  border-radius: 999px;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
+.semmet-offcanvas__close:hover {
+  background: #f4f4f5;
+}
+
+.semmet-offcanvas__close span,
+.semmet-offcanvas__close span::before,
+.semmet-offcanvas__close span::after {
+  display: block;
+  width: 1rem;
+  height: 0.125rem;
+}
+
+.semmet-offcanvas__close span {
+  position: relative;
+}
+
+.semmet-offcanvas__close span::before,
+.semmet-offcanvas__close span::after {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  border-radius: 999px;
+  background: currentColor;
+  content: '';
+}
+
+.semmet-offcanvas__close span::before {
+  transform: rotate(45deg);
+}
+
+.semmet-offcanvas__close span::after {
+  transform: rotate(-45deg);
+}
+
+.semmet-offcanvas__body {
+  min-height: 0;
+  overflow: auto;
+  padding: 1.25rem;
+}
+
+.semmet-offcanvas__placeholder {
+  color: var(--semmet-color-on-surface-variant);
+  line-height: 1.5;
+}
+
+@keyframes semmet-offcanvas-enter {
+  from {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .semmet-offcanvas__panel {
+    animation-duration: 1ms;
+  }
+}

package/src/offcanvas/files/__name@dasherize__/__name@dasherize__.html.template

@@ -0,0 +1,52 @@
+<!-- Semmet Angular: Offcanvas - modal drawer with dialog semantics and focus management. -->
+<button
+  type="button"
+  class="semmet-offcanvas__trigger"
+  [attr.aria-controls]="instanceId + '-panel'"
+  [attr.aria-expanded]="isOpen()"
+  (click)="open($event)"
+>
+  {{ triggerLabel() }}
+</button>
+
+@if (isOpen()) {
+  @if (backdrop()) {
+    <div class="semmet-offcanvas__backdrop" (click)="handleBackdropClick()"></div>
+  }
+  <section
+    #panel
+    tabindex="-1"
+    role="dialog"
+    aria-modal="true"
+    [id]="instanceId + '-panel'"
+    [class]="panelClasses()"
+    [attr.aria-labelledby]="instanceId + '-title'"
+    [attr.aria-describedby]="description() ? instanceId + '-description' : null"
+    (keydown)="handlePanelKeydown($event)"
+  >
+    <header class="semmet-offcanvas__header">
+      <div>
+        <h2 class="semmet-offcanvas__title" [id]="instanceId + '-title'">{{ title() }}</h2>
+        @if (description()) {
+          <p class="semmet-offcanvas__description" [id]="instanceId + '-description'">
+            {{ description() }}
+          </p>
+        }
+      </div>
+      <button
+        type="button"
+        class="semmet-offcanvas__close"
+        [attr.aria-label]="closeLabel()"
+        (click)="close()"
+      >
+        <span aria-hidden="true"></span>
+      </button>
+    </header>
+    <div class="semmet-offcanvas__body">
+      <ng-content></ng-content>
+      <p class="semmet-offcanvas__placeholder">
+        Replace this with filters, navigation, or contextual controls.
+      </p>
+    </div>
+  </section>
+}

package/src/offcanvas/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -0,0 +1,96 @@
+import { Component, ElementRef, Injector, afterNextRender, booleanAttribute, computed, inject, input, signal, viewChild } from '@angular/core';
+
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+type <%= classify(name) %>Placement = 'start' | 'end' | 'top' | 'bottom';
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  private readonly injector = inject(Injector);
+  private readonly panelRef = viewChild<ElementRef<HTMLElement>>('panel');
+  private triggerElement: HTMLElement | null = null;
+
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly isOpen = signal(false);
+
+  readonly triggerLabel = input('Open panel');
+  readonly title = input('Panel title');
+  readonly description = input('Use this panel for secondary actions, filters, or contextual content.');
+  readonly closeLabel = input('Close panel');
+  readonly placement = input<<%= classify(name) %>Placement>('end');
+  readonly backdrop = input(true, { transform: booleanAttribute });
+  readonly closeOnBackdrop = input(true, { transform: booleanAttribute });
+
+  protected readonly panelClasses = computed(() => [
+    'semmet-offcanvas__panel',
+    `semmet-offcanvas__panel--${this.placement()}`,
+  ].join(' '));
+
+  protected open(event: MouseEvent): void {
+    this.triggerElement = event.currentTarget as HTMLElement;
+    this.isOpen.set(true);
+    afterNextRender(() => this.focusFirstElement(), { injector: this.injector });
+  }
+
+  protected close(): void {
+    this.isOpen.set(false);
+    this.triggerElement?.focus();
+  }
+
+  protected handleBackdropClick(): void {
+    if (this.closeOnBackdrop()) {
+      this.close();
+    }
+  }
+
+  protected handlePanelKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.close();
+      return;
+    }
+
+    if (event.key === 'Tab') {
+      this.trapFocus(event);
+    }
+  }
+
+  private focusFirstElement(): void {
+    const panel = this.panelRef()?.nativeElement;
+    const firstFocusable = panel?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);
+    (firstFocusable ?? panel)?.focus();
+  }
+
+  // Keeps Tab/Shift+Tab cycling within the offcanvas while it behaves as a modal dialog.
+  private trapFocus(event: KeyboardEvent): void {
+    const panel = this.panelRef()?.nativeElement;
+    if (!panel) {
+      return;
+    }
+
+    const focusable = Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));
+    if (focusable.length === 0) {
+      return;
+    }
+
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = panel.ownerDocument.activeElement;
+
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+}

package/src/offcanvas/index.d.ts

@@ -0,0 +1 @@
+export declare const offcanvas: (options: import("./schema").Schema) => import("@angular-devkit/schematics").Rule;

package/src/offcanvas/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.offcanvas = void 0;
+const generate_component_1 = require("../utils/generate-component");
+exports.offcanvas = (0, generate_component_1.createAriaComponentSchematic)();
+//# sourceMappingURL=index.js.map

package/src/offcanvas/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,SAAS,GAAG,IAAA,iDAA4B,GAAE,CAAC"}

package/src/offcanvas/index.ts

@@ -0,0 +1,3 @@
+import { createAriaComponentSchematic } from '../utils/generate-component';
+
+export const offcanvas = createAriaComponentSchematic();

package/src/offcanvas/schema.d.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

package/src/offcanvas/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/src/offcanvas/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":""}

package/src/offcanvas/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularOffcanvas",
+  "title": "Semmet Angular Offcanvas Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Offcanvas component using modal dialog semantics, focus trap, Escape close, and focus restoration.",
+  "additionalProperties": false,
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name for the new component. Used to derive the class name, selector, and file names.",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": "What name would you like to use for the offcanvas component?"
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "$default": { "$source": "workingDirectory" },
+      "description": "The path where the component files should be created, relative to the workspace root. Defaults to the project's source root.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add the component to.",
+      "$default": { "$source": "projectName" }
+    }
+  },
+  "required": ["name", "project"]
+}

package/src/offcanvas/schema.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

package/src/popover/files/__name@dasherize__/__name@dasherize__.css.template

@@ -0,0 +1,156 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-on-primary: #ffffff;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-surface-muted: #f4f4f5;
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-on-surface: #27272a;
+  --semmet-color-on-surface-variant: #71717a;
+  --semmet-radius-md: 10px;
+  --semmet-elevation-2: 0 12px 28px rgba(20, 24, 23, 0.16), 0 4px 12px rgba(20, 24, 23, 0.1);
+  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
+
+  position: relative;
+  display: inline-block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+.semmet-popover__trigger {
+  min-height: 2.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-md);
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  font: inherit;
+  font-weight: 650;
+  cursor: pointer;
+}
+
+.semmet-popover__trigger:focus-visible,
+.semmet-popover__close:focus-visible,
+.semmet-popover__panel:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}
+
+.semmet-popover__panel {
+  position: absolute;
+  z-index: 20;
+  width: min(20rem, calc(100vw - 2rem));
+  padding: 1rem;
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-md);
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  box-shadow: var(--semmet-elevation-2);
+  animation: semmet-popover-enter var(--semmet-motion);
+}
+
+.semmet-popover__panel--top {
+  left: 50%;
+  bottom: calc(100% + 0.5rem);
+  transform: translateX(-50%);
+}
+
+.semmet-popover__panel--right {
+  top: 50%;
+  left: calc(100% + 0.5rem);
+  transform: translateY(-50%);
+}
+
+.semmet-popover__panel--bottom {
+  top: calc(100% + 0.5rem);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.semmet-popover__panel--left {
+  top: 50%;
+  right: calc(100% + 0.5rem);
+  transform: translateY(-50%);
+}
+
+.semmet-popover__header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.semmet-popover__title,
+.semmet-popover__body p {
+  margin: 0;
+}
+
+.semmet-popover__title {
+  font-size: 1rem;
+  line-height: 1.3;
+}
+
+.semmet-popover__body {
+  margin-block-start: 0.625rem;
+  color: var(--semmet-color-on-surface-variant);
+  line-height: 1.5;
+}
+
+.semmet-popover__close {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  border-radius: 999px;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
+.semmet-popover__close:hover {
+  background: var(--semmet-color-surface-muted);
+}
+
+.semmet-popover__close span,
+.semmet-popover__close span::before,
+.semmet-popover__close span::after {
+  display: block;
+  width: 0.875rem;
+  height: 0.125rem;
+}
+
+.semmet-popover__close span {
+  position: relative;
+}
+
+.semmet-popover__close span::before,
+.semmet-popover__close span::after {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  border-radius: 999px;
+  background: currentColor;
+  content: '';
+}
+
+.semmet-popover__close span::before {
+  transform: rotate(45deg);
+}
+
+.semmet-popover__close span::after {
+  transform: rotate(-45deg);
+}
+
+@keyframes semmet-popover-enter {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .semmet-popover__panel {
+    animation-duration: 1ms;
+  }
+}

package/src/popover/files/__name@dasherize__/__name@dasherize__.html.template

@@ -0,0 +1,40 @@
+<!-- Semmet Angular: Popover - disclosure trigger for short, contextual non-modal content. -->
+<button
+  type="button"
+  class="semmet-popover__trigger"
+  aria-haspopup="dialog"
+  [attr.aria-expanded]="isOpen()"
+  [attr.aria-controls]="instanceId + '-panel'"
+  (click)="toggle()"
+  (keydown)="handleKeydown($event)"
+>
+  {{ triggerLabel() }}
+</button>
+
+@if (isOpen()) {
+  <section
+    #popover
+    tabindex="-1"
+    role="dialog"
+    [id]="instanceId + '-panel'"
+    [class]="popoverClasses()"
+    [attr.aria-labelledby]="instanceId + '-title'"
+    (keydown)="handleKeydown($event)"
+  >
+    <div class="semmet-popover__header">
+      <h2 class="semmet-popover__title" [id]="instanceId + '-title'">{{ title() }}</h2>
+      <button
+        type="button"
+        class="semmet-popover__close"
+        [attr.aria-label]="closeLabel()"
+        (click)="close()"
+      >
+        <span aria-hidden="true"></span>
+      </button>
+    </div>
+    <div class="semmet-popover__body">
+      <p>{{ content() }}</p>
+      <ng-content></ng-content>
+    </div>
+  </section>
+}

package/src/popover/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -0,0 +1,65 @@
+import { Component, ElementRef, Injector, afterNextRender, computed, inject, input, signal, viewChild } from '@angular/core';
+
+type <%= classify(name) %>Placement = 'top' | 'right' | 'bottom' | 'left';
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+  host: {
+    '(document:click)': 'closeOnOutsideClick($event)',
+  },
+})
+export class <%= classify(name) %> {
+  private readonly hostRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly injector = inject(Injector);
+  private readonly popoverRef = viewChild<ElementRef<HTMLElement>>('popover');
+
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly isOpen = signal(false);
+
+  readonly triggerLabel = input('More information');
+  readonly title = input('Helpful context');
+  readonly content = input('Use popovers for short contextual help that needs a button, link, or richer text.');
+  readonly closeLabel = input('Close popover');
+  readonly placement = input<<%= classify(name) %>Placement>('bottom');
+
+  protected readonly popoverClasses = computed(() => [
+    'semmet-popover__panel',
+    `semmet-popover__panel--${this.placement()}`,
+  ].join(' '));
+
+  protected toggle(): void {
+    this.isOpen.update((value) => !value);
+    if (!this.isOpen()) {
+      return;
+    }
+
+    afterNextRender(() => this.popoverRef()?.nativeElement.focus(), { injector: this.injector });
+  }
+
+  protected close(): void {
+    this.isOpen.set(false);
+  }
+
+  protected handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.close();
+    }
+  }
+
+  protected closeOnOutsideClick(event: MouseEvent): void {
+    if (!this.isOpen()) {
+      return;
+    }
+
+    const target = event.target as Node;
+    if (!this.hostRef.nativeElement.contains(target)) {
+      this.close();
+    }
+  }
+}

package/src/popover/index.d.ts

@@ -0,0 +1 @@
+export declare const popover: (options: import("./schema").Schema) => import("@angular-devkit/schematics").Rule;

package/src/popover/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popover = void 0;
+const generate_component_1 = require("../utils/generate-component");
+exports.popover = (0, generate_component_1.createAriaComponentSchematic)();
+//# sourceMappingURL=index.js.map

package/src/popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,OAAO,GAAG,IAAA,iDAA4B,GAAE,CAAC"}

package/src/popover/index.ts

@@ -0,0 +1,3 @@
+import { createAriaComponentSchematic } from '../utils/generate-component';
+
+export const popover = createAriaComponentSchematic();

package/src/popover/schema.d.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

package/src/popover/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/src/popover/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":""}