Popover

import {Popover, PopoverContent, PopoverTrigger} from '@stroeer-labs/design-library/react';

export function PopoverDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Popover</p>
                <Popover>
                    <PopoverTrigger className="inline-flex h-10 items-center justify-center rounded-md border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground hover:bg-secondary/80">
                        Open popover
                    </PopoverTrigger>
                    <PopoverContent align="start" sideOffset={8}>
                        <div className="space-y-1">
                            <p className="font-medium">Dimensions</p>
                            <p className="text-muted-foreground">Set the dimensions for the layer.</p>
                        </div>
                    </PopoverContent>
                </Popover>
            </div>
        </div>
    );
}

import {Component} from '@angular/core';
import {HlmPopoverImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-popover-demo',
    standalone: true,
    imports: [HlmPopoverImports],
    template: `
    <div class="space-y-6">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Popover</p>
        <hlm-popover sideOffset="8" align="start">
          <button
            hlmPopoverTrigger
            class="inline-flex h-10 items-center justify-center rounded-md border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground hover:bg-secondary/80"
          >
            Open popover
          </button>
          <hlm-popover-content *hlmPopoverPortal="let ctx">
            <div class="space-y-1">
              <p class="font-medium">Dimensions</p>
              <p class="text-muted-foreground">Set the dimensions for the layer.</p>
            </div>
          </hlm-popover-content>
        </hlm-popover>
      </div>
    </div>
  `,
})
export class PopoverDemoComponent {}