+ [style.transform]="transition === 'slide' ? 'translateX(-' + (currentIndex() * 100) + '%)' : 'translateX(0)'">
@for (item of items; track item.id; let i = $index) {
+
+ @for (item of items; track item.id) {
+
+
+
+
+
+
+ @if (item.title) {
+
+ {{ item.title }}
+
+ }
+
+ @if (item.description) {
+
+ {{ item.description }}
+
+ }
+
+ @if (item.timestamp) {
+
+ {{ item.timestamp }}
+
+ }
+
+
+ }
+
+ `,
+ styleUrl: './timeline.component.scss'
+})
+export class TimelineComponent {
+ @Input() items: TimelineItem[] = [];
+ @Input() size: TimelineSize = 'md';
+ @Input() variant: TimelineVariant = 'primary';
+ @Input() orientation: TimelineOrientation = 'vertical';
+ @Input() ariaLabel?: string;
+
+ getItemAriaLabel(item: TimelineItem): string {
+ const status = this.getStatusLabel(item.status);
+ const title = item.title || 'Timeline item';
+ const timestamp = item.timestamp ? `, ${item.timestamp}` : '';
+ return `${title}, ${status}${timestamp}`;
+ }
+
+ private getStatusLabel(status: TimelineItemStatus): string {
+ switch (status) {
+ case 'completed':
+ return 'completed';
+ case 'active':
+ return 'in progress';
+ case 'pending':
+ return 'pending';
+ case 'error':
+ return 'error';
+ default:
+ return status;
+ }
+ }
+}
\ No newline at end of file
diff --git a/projects/ui-essentials/src/lib/components/data-display/tree-view/index.ts b/projects/ui-essentials/src/lib/components/data-display/tree-view/index.ts
new file mode 100644
index 0000000..ae3ea06
--- /dev/null
+++ b/projects/ui-essentials/src/lib/components/data-display/tree-view/index.ts
@@ -0,0 +1 @@
+export * from './tree-view.component';
\ No newline at end of file
diff --git a/projects/ui-essentials/src/lib/components/data-display/tree-view/tree-view.component.scss b/projects/ui-essentials/src/lib/components/data-display/tree-view/tree-view.component.scss
new file mode 100644
index 0000000..12697ef
--- /dev/null
+++ b/projects/ui-essentials/src/lib/components/data-display/tree-view/tree-view.component.scss
@@ -0,0 +1,225 @@
+@use "../../../../../../shared-ui/src/styles/semantic/index" as *;
+
+.ui-tree-view {
+ // Core Structure
+ display: block;
+ position: relative;
+
+ // Layout & Spacing
+ padding: $semantic-spacing-component-sm;
+
+ // Visual Design
+ background: $semantic-color-surface-primary;
+ border: $semantic-border-width-1 solid $semantic-color-border-subtle;
+ border-radius: $semantic-border-card-radius;
+
+ // Typography
+ font-family: map-get($semantic-typography-body-medium, font-family);
+ font-size: map-get($semantic-typography-body-medium, font-size);
+ font-weight: map-get($semantic-typography-body-medium, font-weight);
+ line-height: map-get($semantic-typography-body-medium, line-height);
+ color: $semantic-color-text-primary;
+
+ // Size Variants
+ &--sm {
+ padding: $semantic-spacing-component-xs;
+ font-family: map-get($semantic-typography-body-small, font-family);
+ font-size: map-get($semantic-typography-body-small, font-size);
+ font-weight: map-get($semantic-typography-body-small, font-weight);
+ line-height: map-get($semantic-typography-body-small, line-height);
+ }
+
+ &--md {
+ padding: $semantic-spacing-component-sm;
+ // Typography already set above for medium
+ }
+
+ &--lg {
+ padding: $semantic-spacing-component-md;
+ font-family: map-get($semantic-typography-body-large, font-family);
+ font-size: map-get($semantic-typography-body-large, font-size);
+ font-weight: map-get($semantic-typography-body-large, font-weight);
+ line-height: map-get($semantic-typography-body-large, line-height);
+ }
+
+ // Color Variants
+ &--primary {
+ border-color: $semantic-color-primary;
+
+ .ui-tree-view__node--selected {
+ background: $semantic-color-primary;
+ color: $semantic-color-on-primary;
+ }
+ }
+
+ &--secondary {
+ border-color: $semantic-color-secondary;
+
+ .ui-tree-view__node--selected {
+ background: $semantic-color-secondary;
+ color: $semantic-color-on-secondary;
+ }
+ }
+
+ // Tree Node
+ &__node {
+ display: flex;
+ align-items: center;
+ padding: $semantic-spacing-content-line-tight;
+ margin-bottom: 2px;
+ cursor: pointer;
+ border-radius: $semantic-border-radius-sm;
+ transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
+
+ // Node states
+ &:hover {
+ background: $semantic-color-surface-secondary;
+ }
+
+ &--selected {
+ background: $semantic-color-surface-elevated;
+ color: $semantic-color-text-primary;
+ font-weight: $semantic-typography-font-weight-medium;
+ }
+
+ &--disabled {
+ opacity: $semantic-opacity-disabled;
+ cursor: not-allowed;
+ pointer-events: none;
+ }
+
+ &:focus-visible {
+ outline: 2px solid $semantic-color-focus;
+ outline-offset: 2px;
+ }
+ }
+
+ // Tree Node Content
+ &__node-content {
+ display: flex;
+ align-items: center;
+ flex: 1;
+ min-width: 0; // Allow text truncation
+ }
+
+ // Expand/Collapse Button
+ &__expand-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: $semantic-sizing-touch-minimum;
+ height: $semantic-sizing-touch-minimum;
+ margin-right: $semantic-spacing-component-xs;
+ border: none;
+ background: transparent;
+ border-radius: $semantic-border-radius-sm;
+ cursor: pointer;
+ transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
+
+ &:hover {
+ background: $semantic-color-surface-secondary;
+ }
+
+ &:focus-visible {
+ outline: 2px solid $semantic-color-focus;
+ outline-offset: 2px;
+ }
+
+ &--expanded {
+ transform: rotate(90deg);
+ }
+
+ &--leaf {
+ cursor: default;
+ color: $semantic-color-text-secondary;
+ font-size: $semantic-typography-font-size-lg;
+
+ &:hover {
+ background: transparent;
+ }
+ }
+ }
+
+ // Node Icon
+ &__node-icon {
+ width: $semantic-sizing-icon-inline;
+ height: $semantic-sizing-icon-inline;
+ margin-right: $semantic-spacing-component-xs;
+ color: $semantic-color-text-secondary;
+
+ .ui-tree-view__node--selected & {
+ color: inherit;
+ }
+ }
+
+ // Node Label
+ &__node-label {
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ // Children Container
+ &__children {
+ margin-left: $semantic-spacing-layout-section-sm;
+ border-left: $semantic-border-width-1 solid $semantic-color-border-subtle;
+ padding-left: $semantic-spacing-component-sm;
+
+ &--hidden {
+ display: none;
+ }
+ }
+
+ // Loading State
+ &__loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: $semantic-spacing-component-md;
+ color: $semantic-color-text-secondary;
+ }
+
+ // Empty State
+ &__empty {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: $semantic-spacing-component-lg;
+ color: $semantic-color-text-secondary;
+ font-style: italic;
+ }
+
+ // Root level adjustments
+ & > .ui-tree-view__node {
+ &:first-child {
+ margin-top: 0;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ // Responsive Design
+ @media (max-width: ($semantic-breakpoint-md - 1)) {
+ padding: $semantic-spacing-component-xs;
+
+ .ui-tree-view__children {
+ margin-left: $semantic-spacing-component-md;
+ padding-left: $semantic-spacing-component-xs;
+ }
+ }
+
+ @media (max-width: ($semantic-breakpoint-sm - 1)) {
+ font-family: map-get($semantic-typography-body-small, font-family);
+ font-size: map-get($semantic-typography-body-small, font-size);
+ font-weight: map-get($semantic-typography-body-small, font-weight);
+ line-height: map-get($semantic-typography-body-small, line-height);
+
+ .ui-tree-view__node {
+ padding: $semantic-spacing-content-line-tight $semantic-spacing-component-xs;
+ }
+ }
+}
\ No newline at end of file
diff --git a/projects/ui-essentials/src/lib/components/data-display/tree-view/tree-view.component.ts b/projects/ui-essentials/src/lib/components/data-display/tree-view/tree-view.component.ts
new file mode 100644
index 0000000..765a90f
--- /dev/null
+++ b/projects/ui-essentials/src/lib/components/data-display/tree-view/tree-view.component.ts
@@ -0,0 +1,297 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export interface TreeNode {
+ id: string;
+ label: string;
+ icon?: string;
+ children?: TreeNode[];
+ expanded?: boolean;
+ selected?: boolean;
+ disabled?: boolean;
+ data?: any;
+}
+
+type TreeViewSize = 'sm' | 'md' | 'lg';
+type TreeViewVariant = 'primary' | 'secondary';
+
+@Component({
+ selector: 'ui-tree-node',
+ standalone: true,
+ imports: [CommonModule, TreeNodeComponent],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: `
+
+
+ @if (hasChildren) {
+
+ ▶
+
+ } @else {
+
+ •
+
+ }
+
+
+ @if (showIcons && node.icon) {
+
+ {{ node.icon }}
+
+ }
+
+
+ {{ node.label }}
+
+
+
+
+ @if (hasChildren && node.expanded) {
+
+ @for (childNode of node.children; track childNode.id) {
+
+
+ }
+
+ }
+ `
+})
+export class TreeNodeComponent {
+ @Input() node!: TreeNode;
+ @Input() level = 0;
+ @Input() showIcons = true;
+ @Input() multiSelect = false;
+
+ @Output() nodeToggled = new EventEmitter<{ node: TreeNode; expanded: boolean }>();
+ @Output() nodeSelected = new EventEmitter<{ node: TreeNode; selected: boolean }>();
+
+ get hasChildren(): boolean {
+ return !!(this.node.children && this.node.children.length > 0);
+ }
+
+ handleNodeClick(): void {
+ if (!this.node.disabled) {
+ this.nodeSelected.emit({
+ node: this.node,
+ selected: !this.node.selected
+ });
+ }
+ }
+
+ handleToggleClick(event: Event): void {
+ event.stopPropagation();
+ if (!this.node.disabled && this.hasChildren) {
+ this.nodeToggled.emit({
+ node: this.node,
+ expanded: !this.node.expanded
+ });
+ }
+ }
+
+ handleKeydown(event: KeyboardEvent): void {
+ if (this.node.disabled) return;
+
+ switch (event.key) {
+ case 'Enter':
+ case ' ':
+ event.preventDefault();
+ this.handleNodeClick();
+ break;
+ case 'ArrowRight':
+ if (this.hasChildren && !this.node.expanded) {
+ event.preventDefault();
+ this.handleToggleClick(event);
+ }
+ break;
+ case 'ArrowLeft':
+ if (this.hasChildren && this.node.expanded) {
+ event.preventDefault();
+ this.handleToggleClick(event);
+ }
+ break;
+ }
+ }
+}
+
+@Component({
+ selector: 'ui-tree-view',
+ standalone: true,
+ imports: [CommonModule, TreeNodeComponent],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: `
+
+
+ @if (loading) {
+
+ Loading...
+
+ } @else if (!nodes || nodes.length === 0) {
+
+ {{ emptyMessage }}
+
+ } @else {
+ @for (node of nodes; track node.id) {
+
+ @if (renderTreeNode) {
+
+
+ } @else {
+
+
+ }
+
+ }
+ }
+
+ `,
+ styleUrl: './tree-view.component.scss'
+})
+export class TreeViewComponent {
+ @Input() nodes: TreeNode[] = [];
+ @Input() size: TreeViewSize = 'md';
+ @Input() variant: TreeViewVariant = 'primary';
+ @Input() loading = false;
+ @Input() showIcons = true;
+ @Input() multiSelect = false;
+ @Input() expandAll = false;
+ @Input() emptyMessage = 'No items to display';
+ @Input() ariaLabel = 'Tree view';
+ @Input() renderTreeNode?: any; // Custom template reference
+
+ @Output() nodeToggled = new EventEmitter<{ node: TreeNode; expanded: boolean }>();
+ @Output() nodeSelected = new EventEmitter<{ node: TreeNode; selected: boolean }>();
+ @Output() nodesChanged = new EventEmitter
();
+
+ handleToggle = (event: { node: TreeNode; expanded: boolean }): void => {
+ event.node.expanded = event.expanded;
+ this.nodeToggled.emit(event);
+ this.nodesChanged.emit(this.nodes);
+ };
+
+ handleSelect = (event: { node: TreeNode; selected: boolean }): void => {
+ if (!this.multiSelect) {
+ // Single select - clear all other selections
+ this.clearAllSelections(this.nodes);
+ }
+
+ event.node.selected = event.selected;
+ this.nodeSelected.emit(event);
+ this.nodesChanged.emit(this.nodes);
+ };
+
+ private clearAllSelections(nodes: TreeNode[]): void {
+ for (const node of nodes) {
+ node.selected = false;
+ if (node.children) {
+ this.clearAllSelections(node.children);
+ }
+ }
+ }
+
+ // Public API methods
+ expandAllNodes(): void {
+ this.setAllExpanded(this.nodes, true);
+ this.nodesChanged.emit(this.nodes);
+ }
+
+ collapseAllNodes(): void {
+ this.setAllExpanded(this.nodes, false);
+ this.nodesChanged.emit(this.nodes);
+ }
+
+ getSelectedNodes(): TreeNode[] {
+ return this.findSelectedNodes(this.nodes);
+ }
+
+ selectNode(nodeId: string): void {
+ const node = this.findNodeById(this.nodes, nodeId);
+ if (node && !node.disabled) {
+ this.handleSelect({ node, selected: true });
+ }
+ }
+
+ private setAllExpanded(nodes: TreeNode[], expanded: boolean): void {
+ for (const node of nodes) {
+ if (node.children && node.children.length > 0) {
+ node.expanded = expanded;
+ this.setAllExpanded(node.children, expanded);
+ }
+ }
+ }
+
+ private findSelectedNodes(nodes: TreeNode[]): TreeNode[] {
+ const selected: TreeNode[] = [];
+ for (const node of nodes) {
+ if (node.selected) {
+ selected.push(node);
+ }
+ if (node.children) {
+ selected.push(...this.findSelectedNodes(node.children));
+ }
+ }
+ return selected;
+ }
+
+ private findNodeById(nodes: TreeNode[], id: string): TreeNode | null {
+ for (const node of nodes) {
+ if (node.id === id) {
+ return node;
+ }
+ if (node.children) {
+ const found = this.findNodeById(node.children, id);
+ if (found) {
+ return found;
+ }
+ }
+ }
+ return null;
+ }
+}
\ No newline at end of file
diff --git a/projects/ui-essentials/src/lib/components/feedback/alert/alert.component.scss b/projects/ui-essentials/src/lib/components/feedback/alert/alert.component.scss
new file mode 100644
index 0000000..d6dd823
--- /dev/null
+++ b/projects/ui-essentials/src/lib/components/feedback/alert/alert.component.scss
@@ -0,0 +1,221 @@
+@use "../../../../../../shared-ui/src/styles/semantic/index" as *;
+
+.ui-alert {
+ // Core Structure
+ display: flex;
+ position: relative;
+ align-items: flex-start;
+
+ // Layout & Spacing
+ padding: $semantic-spacing-component-md;
+ margin-bottom: $semantic-spacing-component-sm;
+ gap: $semantic-spacing-component-sm;
+
+ // Visual Design
+ background: $semantic-color-surface-elevated;
+ border: $semantic-border-width-1 solid $semantic-color-border-subtle;
+ border-radius: $semantic-border-card-radius;
+ box-shadow: $semantic-shadow-elevation-1;
+
+ // Typography
+ font-family: map-get($semantic-typography-body-medium, font-family);
+ font-size: map-get($semantic-typography-body-medium, font-size);
+ font-weight: map-get($semantic-typography-body-medium, font-weight);
+ line-height: map-get($semantic-typography-body-medium, line-height);
+ color: $semantic-color-text-primary;
+
+ // Transitions
+ transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
+
+ // Size Variants
+ &--sm {
+ padding: $semantic-spacing-component-sm;
+ gap: $semantic-spacing-component-xs;
+ font-family: map-get($semantic-typography-body-small, font-family);
+ font-size: map-get($semantic-typography-body-small, font-size);
+ font-weight: map-get($semantic-typography-body-small, font-weight);
+ line-height: map-get($semantic-typography-body-small, line-height);
+ }
+
+ &--md {
+ // Default styles already applied above
+ }
+
+ &--lg {
+ padding: $semantic-spacing-component-lg;
+ gap: $semantic-spacing-component-md;
+ font-family: map-get($semantic-typography-body-large, font-family);
+ font-size: map-get($semantic-typography-body-large, font-size);
+ font-weight: map-get($semantic-typography-body-large, font-weight);
+ line-height: map-get($semantic-typography-body-large, line-height);
+ }
+
+ // Color Variants
+ &--primary {
+ background: $semantic-color-surface-elevated;
+ border-color: $semantic-color-primary;
+ border-left-width: 4px;
+
+ .ui-alert__icon {
+ color: $semantic-color-primary;
+ }
+ }
+
+ &--success {
+ background: $semantic-color-surface-elevated;
+ border-color: $semantic-color-success;
+ border-left-width: 4px;
+
+ .ui-alert__icon {
+ color: $semantic-color-success;
+ }
+
+ .ui-alert__title {
+ color: $semantic-color-success;
+ }
+ }
+
+ &--warning {
+ background: $semantic-color-surface-elevated;
+ border-color: $semantic-color-warning;
+ border-left-width: 4px;
+
+ .ui-alert__icon {
+ color: $semantic-color-warning;
+ }
+
+ .ui-alert__title {
+ color: $semantic-color-warning;
+ }
+ }
+
+ &--danger {
+ background: $semantic-color-surface-elevated;
+ border-color: $semantic-color-danger;
+ border-left-width: 4px;
+
+ .ui-alert__icon {
+ color: $semantic-color-danger;
+ }
+
+ .ui-alert__title {
+ color: $semantic-color-danger;
+ }
+ }
+
+ &--info {
+ background: $semantic-color-surface-elevated;
+ border-color: $semantic-color-info;
+ border-left-width: 4px;
+
+ .ui-alert__icon {
+ color: $semantic-color-info;
+ }
+
+ .ui-alert__title {
+ color: $semantic-color-info;
+ }
+ }
+
+ // BEM Elements
+ &__icon {
+ flex-shrink: 0;
+ color: $semantic-color-text-secondary;
+ font-size: $semantic-sizing-icon-inline;
+ margin-top: 2px; // Slight optical alignment
+ }
+
+ &__content {
+ flex: 1;
+ min-width: 0; // Prevents flex overflow
+ }
+
+ &__title {
+ margin: 0 0 $semantic-spacing-content-line-tight 0;
+ font-family: map-get($semantic-typography-label, font-family);
+ font-size: map-get($semantic-typography-label, font-size);
+ font-weight: map-get($semantic-typography-label, font-weight);
+ line-height: map-get($semantic-typography-label, line-height);
+ color: $semantic-color-text-primary;
+
+ &--bold {
+ font-weight: $semantic-typography-font-weight-semibold;
+ }
+ }
+
+ &__message {
+ margin: 0;
+ color: $semantic-color-text-secondary;
+ }
+
+ &__actions {
+ margin-top: $semantic-spacing-component-sm;
+ display: flex;
+ gap: $semantic-spacing-component-xs;
+ flex-wrap: wrap;
+ }
+
+ &__dismiss {
+ position: absolute;
+ top: $semantic-spacing-component-xs;
+ right: $semantic-spacing-component-xs;
+ background: transparent;
+ border: none;
+ color: $semantic-color-text-tertiary;
+ cursor: pointer;
+ padding: $semantic-spacing-component-xs;
+ border-radius: $semantic-border-radius-sm;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: $semantic-sizing-touch-minimum;
+ min-height: $semantic-sizing-touch-minimum;
+
+ &:hover {
+ background: $semantic-color-surface-secondary;
+ color: $semantic-color-text-secondary;
+ }
+
+ &:focus-visible {
+ outline: 2px solid $semantic-color-focus;
+ outline-offset: 2px;
+ }
+
+ &:active {
+ background: $semantic-color-surface-primary;
+ }
+ }
+
+ // State Variants
+ &--dismissible {
+ padding-right: calc($semantic-spacing-component-lg + $semantic-sizing-touch-minimum);
+ }
+
+ // Responsive Design
+ @media (max-width: $semantic-breakpoint-sm - 1) {
+ padding: $semantic-spacing-component-sm;
+ gap: $semantic-spacing-component-xs;
+
+ &--lg {
+ padding: $semantic-spacing-component-md;
+ }
+
+ &__title {
+ font-family: map-get($semantic-typography-body-small, font-family);
+ font-size: map-get($semantic-typography-body-small, font-size);
+ font-weight: map-get($semantic-typography-body-small, font-weight);
+ line-height: map-get($semantic-typography-body-small, line-height);
+ }
+
+ &__message {
+ font-family: map-get($semantic-typography-caption, font-family);
+ font-size: map-get($semantic-typography-caption, font-size);
+ font-weight: map-get($semantic-typography-caption, font-weight);
+ line-height: map-get($semantic-typography-caption, line-height);
+ }
+
+ &--dismissible {
+ padding-right: calc($semantic-spacing-component-md + $semantic-sizing-touch-minimum);
+ }
+ }
+}
\ No newline at end of file
diff --git a/projects/ui-essentials/src/lib/components/feedback/alert/alert.component.ts b/projects/ui-essentials/src/lib/components/feedback/alert/alert.component.ts
new file mode 100644
index 0000000..981fbea
--- /dev/null
+++ b/projects/ui-essentials/src/lib/components/feedback/alert/alert.component.ts
@@ -0,0 +1,136 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import {
+ faCheckCircle,
+ faExclamationTriangle,
+ faExclamationCircle,
+ faInfoCircle,
+ faTimes
+} from '@fortawesome/free-solid-svg-icons';
+
+type AlertSize = 'sm' | 'md' | 'lg';
+type AlertVariant = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+
+@Component({
+ selector: 'ui-alert',
+ standalone: true,
+ imports: [CommonModule, FontAwesomeModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: `
+
+
+ @if (showIcon && alertIcon) {
+
+
+ }
+
+
+ @if (title) {
+
+ {{ title }}
+
+ }
+
+
+
+
+ @if (actions && actions.length > 0) {
+
+
+ }
+
+
+ @if (dismissible) {
+
+
+ }
+
();
+
+ // Icons
+ readonly faCheckCircle = faCheckCircle;
+ readonly faExclamationTriangle = faExclamationTriangle;
+ readonly faExclamationCircle = faExclamationCircle;
+ readonly faInfoCircle = faInfoCircle;
+ readonly faTimes = faTimes;
+
+ // Generate unique ID for accessibility
+ readonly alertId = Math.random().toString(36).substr(2, 9);
+
+ get alertIcon(): IconDefinition | null {
+ if (!this.showIcon) return null;
+
+ switch (this.variant) {
+ case 'success':
+ return this.faCheckCircle;
+ case 'warning':
+ return this.faExclamationTriangle;
+ case 'danger':
+ return this.faExclamationCircle;
+ case 'info':
+ return this.faInfoCircle;
+ case 'primary':
+ default:
+ return this.faInfoCircle;
+ }
+ }
+
+ handleDismiss(): void {
+ this.dismissed.emit();
+ }
+
+ handleDismissKeydown(event: KeyboardEvent): void {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault();
+ this.handleDismiss();
+ }
+ }
+}
\ No newline at end of file
diff --git a/projects/ui-essentials/src/lib/components/feedback/alert/index.ts b/projects/ui-essentials/src/lib/components/feedback/alert/index.ts
new file mode 100644
index 0000000..5a36e1b
--- /dev/null
+++ b/projects/ui-essentials/src/lib/components/feedback/alert/index.ts
@@ -0,0 +1 @@
+export * from './alert.component';
\ No newline at end of file
diff --git a/projects/ui-essentials/src/lib/components/media/video-player/video-player.component.scss b/projects/ui-essentials/src/lib/components/media/video-player/video-player.component.scss
index a154c14..a232b00 100644
--- a/projects/ui-essentials/src/lib/components/media/video-player/video-player.component.scss
+++ b/projects/ui-essentials/src/lib/components/media/video-player/video-player.component.scss
@@ -1,109 +1,5 @@
@use "../../../../../../shared-ui/src/styles/semantic/index" as *;
-.video-player {
- position: relative;
- width: 100%;
- max-width: 800px;
- background: $semantic-color-surface;
- border-radius: 12px;
- overflow: hidden;
- box-shadow: $semantic-shadow-card-rest;
-
- &.fullscreen {
- max-width: none;
- width: 100vw;
- height: 100vh;
- border-radius: 0;
- }
-
- .video-container {
- position: relative;
- width: 100%;
- height: 0;
- padding-bottom: 56.25%; // 16:9 aspect ratio
- background: #000;
-
- video {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- object-fit: contain;
- }
- }
-
- .controls {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
- padding: $semantic-spacing-component-lg $semantic-spacing-component-md $semantic-spacing-component-md;
- opacity: 0;
- transition: opacity $semantic-motion-duration-normal $semantic-motion-easing-ease;
-
- &.visible {
- opacity: 1;
- }
-
- .progress-bar {
- width: 100%;
- height: 4px;
- background: rgba(255, 255, 255, 0.3);
- border-radius: 2px;
- margin-bottom: $semantic-spacing-component-sm;
- cursor: pointer;
-
- .progress {
- height: 100%;
- background: $semantic-color-primary;
- border-radius: 2px;
- transition: width 0.1s linear;
- }
- }
-
- .control-buttons {
- display: flex;
- align-items: center;
- gap: $semantic-spacing-component-sm;
-
- button {
- background: none;
- border: none;
- color: white;
- cursor: pointer;
- padding: $semantic-spacing-component-xs;
- border-radius: 4px;
- transition: background-color $semantic-motion-duration-fast $semantic-motion-easing-ease;
-
- &:hover {
- background: rgba(255, 255, 255, 0.2);
- }
-
- &:focus {
- outline: 2px solid $semantic-color-primary;
- outline-offset: 2px;
- }
- }
-
- .time-display {
- color: white;
- font-family: map-get($semantic-typography-body-small, font-family);
- font-size: map-get($semantic-typography-body-small, font-size);
- font-weight: map-get($semantic-typography-body-small, font-weight);
- line-height: map-get($semantic-typography-body-small, line-height);
- letter-spacing: map-get($semantic-typography-body-small, letter-spacing);
- margin-left: auto;
- }
- }
- }
-
- &:hover .controls {
- opacity: 1;
- }
-}
-
@mixin font-properties($font-map) {
@if type-of($font-map) == 'map' {
font-family: map-get($font-map, 'font-family');
@@ -114,4 +10,392 @@
} @else {
font: $font-map;
}
+}
+
+.ui-video-player {
+ position: relative;
+ width: 100%;
+ max-width: 800px;
+ background: $semantic-color-surface;
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: $semantic-shadow-elevation-2;
+
+ &--fullscreen {
+ max-width: none !important;
+ width: 100vw !important;
+ height: 100vh !important;
+ border-radius: 0;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 9999;
+ }
+
+ &--disabled {
+ opacity: 0.6;
+ pointer-events: none;
+ }
+
+ &--loading {
+ .ui-video-player__video {
+ cursor: wait;
+ }
+ }
+
+ // Size variants
+ &--sm {
+ max-width: 400px;
+ .ui-video-player__video-container {
+ padding-bottom: 56.25%; // 16:9 aspect ratio
+ }
+ }
+
+ &--md {
+ max-width: 800px;
+ .ui-video-player__video-container {
+ padding-bottom: 56.25%; // 16:9 aspect ratio
+ }
+ }
+
+ &--lg {
+ max-width: 1200px;
+ .ui-video-player__video-container {
+ padding-bottom: 56.25%; // 16:9 aspect ratio
+ }
+ }
+
+ // Variant styles
+ &--minimal {
+ border-radius: 0;
+ box-shadow: none;
+ background: transparent;
+ }
+
+ &--theater {
+ max-width: none;
+ width: 100%;
+ background: #000;
+
+ .ui-video-player__video-container {
+ padding-bottom: 42.85%; // 21:9 aspect ratio for theater mode
+ }
+ }
+
+ &__video-container {
+ position: relative;
+ width: 100%;
+ height: 0;
+ padding-bottom: 56.25%; // 16:9 aspect ratio
+ background: #000;
+ }
+
+ &__video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ cursor: pointer;
+ }
+
+ &__loading-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.8);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: $semantic-spacing-component-md;
+ z-index: 2;
+ }
+
+ &__loading-spinner {
+ width: 40px;
+ height: 40px;
+ border: 3px solid rgba(255, 255, 255, 0.3);
+ border-top: 3px solid $semantic-color-primary;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ }
+
+ &__loading-text {
+ color: white;
+ @include font-properties($semantic-typography-body-medium);
+ }
+
+ &__controls {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+ padding: $semantic-spacing-component-lg $semantic-spacing-component-md $semantic-spacing-component-md;
+ opacity: 0;
+ transition: opacity $semantic-duration-medium $semantic-easing-standard;
+ z-index: 3;
+ display: flex;
+ align-items: center;
+ gap: $semantic-spacing-component-sm;
+
+ &--visible {
+ opacity: 1;
+ }
+ }
+
+ &__control {
+ background: none;
+ border: none;
+ color: white;
+ cursor: pointer;
+ padding: $semantic-spacing-component-xs;
+ border-radius: 4px;
+ transition: background-color $semantic-duration-fast $semantic-easing-standard;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover:not(:disabled) {
+ background: rgba(255, 255, 255, 0.2);
+ }
+
+ &:focus {
+ outline: 2px solid $semantic-color-primary;
+ outline-offset: 2px;
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+ }
+
+ &__control-icon {
+ width: 20px;
+ height: 20px;
+ }
+
+ &__progress-container {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ position: relative;
+ margin: 0 $semantic-spacing-component-sm;
+ }
+
+ &__progress-bar {
+ width: 100%;
+ height: 4px;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ outline: none;
+ -webkit-appearance: none;
+ appearance: none;
+
+ &::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background: $semantic-color-primary;
+ cursor: pointer;
+ border: 2px solid white;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ }
+
+ &::-moz-range-thumb {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background: $semantic-color-primary;
+ cursor: pointer;
+ border: 2px solid white;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ }
+ }
+
+ &__progress-track {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 100%;
+ height: 4px;
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 2px;
+ pointer-events: none;
+ }
+
+ &__progress-filled {
+ height: 100%;
+ background: $semantic-color-primary;
+ border-radius: 2px;
+ transition: width 0.1s linear;
+ }
+
+ &__time {
+ color: white;
+ @include font-properties($semantic-typography-body-small);
+ white-space: nowrap;
+ margin: 0 $semantic-spacing-component-xs;
+ }
+
+ &__volume-bar {
+ width: 80px;
+ height: 4px;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ outline: none;
+ -webkit-appearance: none;
+ appearance: none;
+ margin-left: $semantic-spacing-component-xs;
+
+ &::-webkit-slider-track {
+ width: 100%;
+ height: 4px;
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 2px;
+ }
+
+ &::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background: $semantic-color-primary;
+ cursor: pointer;
+ border: 2px solid white;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ }
+
+ &::-moz-range-track {
+ width: 100%;
+ height: 4px;
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 2px;
+ }
+
+ &::-moz-range-thumb {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background: $semantic-color-primary;
+ cursor: pointer;
+ border: 2px solid white;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ }
+ }
+
+ &__fallback {
+ color: white;
+ @include font-properties($semantic-typography-body-medium);
+ text-align: center;
+ padding: $semantic-spacing-component-lg;
+
+ a {
+ color: $semantic-color-primary;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &__error {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.9);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: $semantic-spacing-component-md;
+ z-index: 4;
+ padding: $semantic-spacing-component-lg;
+ }
+
+ &__error-icon {
+ width: 48px;
+ height: 48px;
+ color: $semantic-color-error;
+
+ svg {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ &__error-message {
+ color: white;
+ @include font-properties($semantic-typography-body-large);
+ text-align: center;
+ margin: 0;
+ }
+
+ &__error-link {
+ color: $semantic-color-primary;
+ @include font-properties($semantic-typography-body-medium);
+ text-decoration: none;
+ padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
+ border: 1px solid $semantic-color-primary;
+ border-radius: 4px;
+ transition: all $semantic-duration-fast $semantic-easing-standard;
+
+ &:hover {
+ background: $semantic-color-primary;
+ color: white;
+ }
+ }
+
+ // Show controls on hover or when paused
+ &:hover &__controls,
+ &__controls--visible {
+ opacity: 1;
+ }
+
+ // Responsive design
+ @media (max-width: 768px) {
+ max-width: none;
+
+ &--sm,
+ &--md,
+ &--lg {
+ max-width: none;
+ }
+
+ &__controls {
+ padding: $semantic-spacing-component-md $semantic-spacing-component-sm;
+ gap: $semantic-spacing-component-xs;
+ }
+
+ &__control-icon {
+ width: 18px;
+ height: 18px;
+ }
+
+ &__volume-bar {
+ width: 60px;
+ }
+
+ &__time {
+ @include font-properties($semantic-typography-body-small);
+ }
+ }
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
}
\ No newline at end of file
diff --git a/projects/ui-essentials/src/lib/components/overlays/index.ts b/projects/ui-essentials/src/lib/components/overlays/index.ts
index e11e25c..aadefd4 100644
--- a/projects/ui-essentials/src/lib/components/overlays/index.ts
+++ b/projects/ui-essentials/src/lib/components/overlays/index.ts
@@ -1,4 +1,5 @@
export * from './modal';
export * from './drawer';
export * from './backdrop';
-export * from './overlay-container';
\ No newline at end of file
+export * from './overlay-container';
+export * from './popover';
\ No newline at end of file
diff --git a/projects/ui-essentials/src/lib/components/overlays/popover/index.ts b/projects/ui-essentials/src/lib/components/overlays/popover/index.ts
new file mode 100644
index 0000000..5c1711b
--- /dev/null
+++ b/projects/ui-essentials/src/lib/components/overlays/popover/index.ts
@@ -0,0 +1 @@
+export * from './popover.component';
\ No newline at end of file
diff --git a/projects/ui-essentials/src/lib/components/overlays/popover/popover.component.scss b/projects/ui-essentials/src/lib/components/overlays/popover/popover.component.scss
new file mode 100644
index 0000000..424f127
--- /dev/null
+++ b/projects/ui-essentials/src/lib/components/overlays/popover/popover.component.scss
@@ -0,0 +1,384 @@
+@use "../../../../../../shared-ui/src/styles/semantic/index" as *;
+
+.ui-popover {
+ position: absolute;
+ display: block;
+ opacity: 0;
+ transform: scale(0.95);
+ transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
+ z-index: $semantic-layer-dropdown;
+ will-change: opacity, transform;
+
+ // Core Structure
+ background: $semantic-color-surface-primary;
+ border: $semantic-border-card-width solid $semantic-color-border-primary;
+ border-radius: $semantic-border-card-radius;
+ box-shadow: $semantic-shadow-popover;
+
+ // Typography
+ font-size: $semantic-typography-font-size-sm;
+ color: $semantic-color-text-primary;
+ line-height: $semantic-typography-line-height-normal;
+
+ // Size Variants
+ &--sm {
+ min-width: $semantic-sizing-card-width-sm;
+ max-width: $semantic-sizing-modal-width-sm;
+ padding: $semantic-spacing-component-xs;
+ }
+
+ &--md {
+ min-width: $semantic-sizing-card-width-md;
+ max-width: $semantic-sizing-modal-width-md;
+ padding: $semantic-spacing-component-sm;
+ }
+
+ &--lg {
+ min-width: $semantic-sizing-card-width-lg;
+ max-width: $semantic-sizing-modal-width-lg;
+ padding: $semantic-spacing-component-md;
+ }
+
+ // Position Variants
+ &--top {
+ transform-origin: bottom center;
+ margin-bottom: $semantic-spacing-component-sm;
+ }
+
+ &--bottom {
+ transform-origin: top center;
+ margin-top: $semantic-spacing-component-sm;
+ }
+
+ &--left {
+ transform-origin: center right;
+ margin-right: $semantic-spacing-component-sm;
+ }
+
+ &--right {
+ transform-origin: center left;
+ margin-left: $semantic-spacing-component-sm;
+ }
+
+ &--top-start {
+ transform-origin: bottom left;
+ margin-bottom: $semantic-spacing-component-sm;
+ }
+
+ &--top-end {
+ transform-origin: bottom right;
+ margin-bottom: $semantic-spacing-component-sm;
+ }
+
+ &--bottom-start {
+ transform-origin: top left;
+ margin-top: $semantic-spacing-component-sm;
+ }
+
+ &--bottom-end {
+ transform-origin: top right;
+ margin-top: $semantic-spacing-component-sm;
+ }
+
+ // Variant Styles
+ &--default {
+ background: $semantic-color-surface-primary;
+ border-color: $semantic-color-border-primary;
+ }
+
+ &--elevated {
+ background: $semantic-color-surface-primary;
+ border: none;
+ box-shadow: $semantic-shadow-elevation-3;
+ }
+
+ &--floating {
+ background: $semantic-color-surface-secondary;
+ border-color: $semantic-color-border-subtle;
+ backdrop-filter: blur(8px);
+ }
+
+ &--menu {
+ padding: $semantic-spacing-content-line-tight;
+ background: $semantic-color-surface-primary;
+ }
+
+ &--tooltip {
+ padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
+ background: $semantic-color-surface-dim;
+ color: $semantic-color-text-inverse;
+ border: none;
+ font-size: $semantic-typography-font-size-xs;
+ box-shadow: $semantic-shadow-elevation-2;
+ }
+
+ // State Variants
+ &--visible {
+ opacity: 1;
+ transform: scale(1);
+ pointer-events: auto;
+ }
+
+ &--entering {
+ opacity: 0;
+ transform: scale(0.95);
+ }
+
+ &--leaving {
+ opacity: 0;
+ transform: scale(0.95);
+ transition-duration: $semantic-motion-duration-fast;
+ }
+
+ &--disabled {
+ opacity: 0.5;
+ pointer-events: none;
+ }
+
+ // Arrow/Triangle
+ &__arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ pointer-events: none;
+
+ // Arrow positioning and styling based on popover position
+ .ui-popover--top & {
+ bottom: calc(-1 * $semantic-spacing-component-sm);
+ left: 50%;
+ transform: translateX(-50%);
+ border-width: $semantic-spacing-component-sm $semantic-spacing-component-sm 0 $semantic-spacing-component-sm;
+ border-color: $semantic-color-surface-primary transparent transparent transparent;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: calc(-1 * $semantic-spacing-component-sm - 1px);
+ left: calc(-1 * $semantic-spacing-component-sm);
+ border-width: $semantic-spacing-component-sm $semantic-spacing-component-sm 0 $semantic-spacing-component-sm;
+ border-color: $semantic-color-border-primary transparent transparent transparent;
+ border-style: solid;
+ }
+ }
+
+ .ui-popover--bottom & {
+ top: calc(-1 * $semantic-spacing-component-sm);
+ left: 50%;
+ transform: translateX(-50%);
+ border-width: 0 $semantic-spacing-component-sm $semantic-spacing-component-sm $semantic-spacing-component-sm;
+ border-color: transparent transparent $semantic-color-surface-primary transparent;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: calc(-1px);
+ left: calc(-1 * $semantic-spacing-component-sm);
+ border-width: 0 $semantic-spacing-component-sm $semantic-spacing-component-sm $semantic-spacing-component-sm;
+ border-color: transparent transparent $semantic-color-border-primary transparent;
+ border-style: solid;
+ }
+ }
+
+ .ui-popover--left & {
+ right: calc(-1 * $semantic-spacing-component-sm);
+ top: 50%;
+ transform: translateY(-50%);
+ border-width: $semantic-spacing-component-sm 0 $semantic-spacing-component-sm $semantic-spacing-component-sm;
+ border-color: transparent transparent transparent $semantic-color-surface-primary;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: calc(-1 * $semantic-spacing-component-sm);
+ left: calc(-1 * $semantic-spacing-component-sm - 1px);
+ border-width: $semantic-spacing-component-sm 0 $semantic-spacing-component-sm $semantic-spacing-component-sm;
+ border-color: transparent transparent transparent $semantic-color-border-primary;
+ border-style: solid;
+ }
+ }
+
+ .ui-popover--right & {
+ left: calc(-1 * $semantic-spacing-component-sm);
+ top: 50%;
+ transform: translateY(-50%);
+ border-width: $semantic-spacing-component-sm $semantic-spacing-component-sm $semantic-spacing-component-sm 0;
+ border-color: transparent $semantic-color-surface-primary transparent transparent;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: calc(-1 * $semantic-spacing-component-sm);
+ left: calc(-1px);
+ border-width: $semantic-spacing-component-sm $semantic-spacing-component-sm $semantic-spacing-component-sm 0;
+ border-color: transparent $semantic-color-border-primary transparent transparent;
+ border-style: solid;
+ }
+ }
+
+ // Hide arrow for elevated and floating variants
+ .ui-popover--elevated &,
+ .ui-popover--floating & {
+ display: none;
+ }
+ }
+
+ // Content Area
+ &__content {
+ position: relative;
+ width: 100%;
+ max-height: $semantic-sizing-modal-height-max;
+ overflow: auto;
+
+ // Scrollbar styling
+ scrollbar-width: thin;
+ scrollbar-color: $semantic-color-border-subtle $semantic-color-surface-secondary;
+
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: $semantic-color-surface-secondary;
+ border-radius: $semantic-border-input-radius;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: $semantic-color-border-subtle;
+ border-radius: $semantic-border-input-radius;
+
+ &:hover {
+ background: $semantic-color-border-primary;
+ }
+ }
+ }
+
+ // Header (optional)
+ &__header {
+ padding: $semantic-spacing-component-sm;
+ border-bottom: $semantic-border-card-width solid $semantic-color-border-subtle;
+ margin-bottom: $semantic-spacing-content-line-tight;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ &__title {
+ font-size: $semantic-typography-font-size-md;
+ font-weight: $semantic-typography-font-weight-semibold;
+ color: $semantic-color-text-primary;
+ margin: 0;
+ }
+
+ // Footer (optional)
+ &__footer {
+ padding: $semantic-spacing-component-sm;
+ border-top: $semantic-border-card-width solid $semantic-color-border-subtle;
+ margin-top: $semantic-spacing-content-line-tight;
+ display: flex;
+ gap: $semantic-spacing-content-line-tight;
+ justify-content: flex-end;
+
+ &:first-child {
+ margin-top: 0;
+ }
+
+ &--start {
+ justify-content: flex-start;
+ }
+
+ &--center {
+ justify-content: center;
+ }
+
+ &--between {
+ justify-content: space-between;
+ }
+ }
+
+ // Interactive states for focusable content
+ &:not(.ui-popover--disabled) {
+ &:focus-within {
+ box-shadow: $semantic-shadow-popover, 0 0 0 2px $semantic-color-focus;
+ }
+ }
+
+ // Responsive adjustments
+ @media (max-width: $semantic-breakpoint-sm - 1) {
+ // On mobile, popovers should be more prominent
+ &:not(.ui-popover--tooltip) {
+ min-width: auto;
+ max-width: calc(100vw - #{$semantic-spacing-layout-section-xs});
+
+ &.ui-popover--sm {
+ padding: $semantic-spacing-component-sm;
+ }
+ }
+ }
+
+ // Dark mode support
+ :host-context(.dark-theme) & {
+ &--default {
+ background: $semantic-color-surface-primary;
+ border-color: $semantic-color-border-primary;
+ }
+
+ &--elevated {
+ background: $semantic-color-surface-primary;
+ box-shadow: $semantic-shadow-elevation-3;
+ }
+
+ &--floating {
+ background: $semantic-color-surface-secondary;
+ border-color: $semantic-color-border-subtle;
+ }
+ }
+
+ // Animation variants for different entrance effects
+ &--slide-in {
+ &.ui-popover--top {
+ transform: translateY(-10px) scale(0.95);
+
+ &.ui-popover--visible {
+ transform: translateY(0) scale(1);
+ }
+ }
+
+ &.ui-popover--bottom {
+ transform: translateY(10px) scale(0.95);
+
+ &.ui-popover--visible {
+ transform: translateY(0) scale(1);
+ }
+ }
+
+ &.ui-popover--left {
+ transform: translateX(-10px) scale(0.95);
+
+ &.ui-popover--visible {
+ transform: translateX(0) scale(1);
+ }
+ }
+
+ &.ui-popover--right {
+ transform: translateX(10px) scale(0.95);
+
+ &.ui-popover--visible {
+ transform: translateX(0) scale(1);
+ }
+ }
+ }
+}
+
+// Popover backdrop (if needed for modal-like behavior)
+.ui-popover-backdrop {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: transparent;
+ z-index: calc($semantic-layer-dropdown - 1);
+ pointer-events: auto;
+}
\ No newline at end of file
diff --git a/projects/ui-essentials/src/lib/components/overlays/popover/popover.component.ts b/projects/ui-essentials/src/lib/components/overlays/popover/popover.component.ts
new file mode 100644
index 0000000..d4431cb
--- /dev/null
+++ b/projects/ui-essentials/src/lib/components/overlays/popover/popover.component.ts
@@ -0,0 +1,645 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, OnInit, OnDestroy, AfterViewInit, inject, ElementRef, Renderer2, ViewChild, HostListener } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { signal, computed } from '@angular/core';
+
+type PopoverPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+type PopoverSize = 'sm' | 'md' | 'lg';
+type PopoverVariant = 'default' | 'elevated' | 'floating' | 'menu' | 'tooltip';
+type PopoverTrigger = 'click' | 'hover' | 'focus' | 'manual';
+
+export interface PopoverConfig {
+ position?: PopoverPosition;
+ size?: PopoverSize;
+ variant?: PopoverVariant;
+ trigger?: PopoverTrigger;
+ visible?: boolean;
+ closable?: boolean;
+ backdropClosable?: boolean;
+ escapeClosable?: boolean;
+ showArrow?: boolean;
+ showBackdrop?: boolean;
+ autoPosition?: boolean;
+ offset?: number;
+ delay?: number;
+ hoverDelay?: number;
+ focusable?: boolean;
+ preventBodyScroll?: boolean;
+}
+
+export interface PopoverPositionData {
+ top: number;
+ left: number;
+ position: PopoverPosition;
+}
+
+@Component({
+ selector: 'ui-popover',
+ standalone: true,
+ imports: [CommonModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: `
+ @if (isVisible()) {
+
+ @if (showBackdrop) {
+
+ }
+
+
+
+
+ @if (showArrow && variant !== 'elevated' && variant !== 'floating') {
+
+ }
+
+
+ @if (title || headerSlot) {
+
+ }
+
+
+
+
+
+
+ @if (footerSlot) {
+
+ }
+
;
+
+ // Inputs
+ @Input() position: PopoverPosition = 'bottom';
+ @Input() size: PopoverSize = 'md';
+ @Input() variant: PopoverVariant = 'default';
+ @Input() trigger: PopoverTrigger = 'click';
+ @Input() title = '';
+ @Input() disabled = false;
+ @Input() closable = true;
+ @Input() backdropClosable = false;
+ @Input() escapeClosable = true;
+ @Input() showArrow = true;
+ @Input() showBackdrop = false;
+ @Input() autoPosition = true;
+ @Input() offset = 8;
+ @Input() delay = 0;
+ @Input() hoverDelay = 300;
+ @Input() focusable = true;
+ @Input() preventBodyScroll = false;
+ @Input() animationType: 'scale' | 'slide' = 'scale';
+ @Input() footerAlignment: 'start' | 'center' | 'end' | 'between' = 'end';
+
+ // Reference element (trigger)
+ @Input() triggerElement?: HTMLElement;
+
+ // State Inputs
+ @Input() set visible(value: boolean) {
+ if (value !== this._visible()) {
+ this._visible.set(value);
+ if (value) {
+ this.show();
+ } else {
+ this.hide();
+ }
+ }
+ }
+
+ get visible(): boolean {
+ return this._visible();
+ }
+
+ // Outputs
+ @Output() visibleChange = new EventEmitter();
+ @Output() shown = new EventEmitter();
+ @Output() hidden = new EventEmitter();
+ @Output() positionChange = new EventEmitter();
+ @Output() backdropClicked = new EventEmitter();
+ @Output() escapePressed = new EventEmitter();
+
+ // Internal state signals
+ private _visible = signal(false);
+ private _entering = signal(false);
+ private _leaving = signal(false);
+ private _computedPosition = signal(this.position);
+ private _positionData = signal({ top: 0, left: 0, position: this.position });
+
+ // Computed signals
+ readonly isVisible = computed(() => this._visible() || this._entering() || this._leaving());
+ readonly isEntering = computed(() => this._entering());
+ readonly isLeaving = computed(() => this._leaving());
+ readonly computedPosition = computed(() => this._computedPosition());
+ readonly positionData = computed(() => this._positionData());
+
+ // Internal properties
+ private showTimer?: number;
+ private hideTimer?: number;
+ private resizeObserver?: ResizeObserver;
+ private mutationObserver?: MutationObserver;
+ private originalBodyOverflow = '';
+ private animationDuration = 200; // ms
+ private positionUpdateCounter = 0;
+
+ // Template helpers
+ readonly headerSlot = false; // Could be enhanced to detect slotted content
+ readonly footerSlot = false; // Could be enhanced to detect slotted content
+
+ // Unique IDs for accessibility
+ readonly titleId = `popover-title-${Math.random().toString(36).substr(2, 9)}`;
+ readonly contentId = `popover-content-${Math.random().toString(36).substr(2, 9)}`;
+
+ readonly transformOrigin = computed(() => {
+ const position = this.computedPosition();
+ switch (position) {
+ case 'top': return 'bottom center';
+ case 'top-start': return 'bottom left';
+ case 'top-end': return 'bottom right';
+ case 'bottom': return 'top center';
+ case 'bottom-start': return 'top left';
+ case 'bottom-end': return 'top right';
+ case 'left': return 'center right';
+ case 'right': return 'center left';
+ default: return 'center';
+ }
+ });
+
+ ngOnInit(): void {
+ if (this.visible) {
+ this.show();
+ }
+ this.setupTriggerListeners();
+ }
+
+ ngAfterViewInit(): void {
+ if (this.visible) {
+ setTimeout(() => this.updatePosition(), 0);
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.clearTimers();
+ this.cleanup();
+ this.restoreBodyScroll();
+ }
+
+ /**
+ * Shows the popover with animation and positioning
+ */
+ show(): void {
+ if (this._visible() || this.disabled) return;
+
+ this.clearTimers();
+
+ this.showTimer = window.setTimeout(() => {
+ this.preventBodyScrollIfEnabled();
+ this._visible.set(true);
+ this._entering.set(true);
+ this.visibleChange.emit(true);
+
+ this.updatePosition();
+ this.setupPositionObservers();
+
+ // Animation timing
+ setTimeout(() => {
+ this._entering.set(false);
+ this.shown.emit();
+ }, this.animationDuration);
+ }, this.delay);
+ }
+
+ /**
+ * Hides the popover with animation
+ */
+ hide(): void {
+ if (!this._visible()) return;
+
+ this.clearTimers();
+ this.cleanup();
+
+ this._leaving.set(true);
+
+ // Animation timing
+ setTimeout(() => {
+ this._visible.set(false);
+ this._leaving.set(false);
+ this.restoreBodyScroll();
+ this.visibleChange.emit(false);
+ this.hidden.emit();
+ }, this.animationDuration);
+ }
+
+ /**
+ * Toggles popover visibility
+ */
+ toggle(): void {
+ if (this._visible()) {
+ this.hide();
+ } else {
+ this.show();
+ }
+ }
+
+ /**
+ * Updates the popover position relative to the trigger element
+ */
+ updatePosition(): void {
+ if (!this.triggerElement || !this.popoverElement) return;
+
+ const triggerRect = this.triggerElement.getBoundingClientRect();
+ const popoverEl = this.popoverElement.nativeElement;
+ const popoverRect = popoverEl.getBoundingClientRect();
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
+ const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+ const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+ let position = this.position;
+ let top = 0;
+ let left = 0;
+
+ // Calculate initial position
+ const positions = this.calculatePositions(triggerRect, popoverRect, scrollLeft, scrollTop);
+ const initialPos = positions[position];
+ top = initialPos.top;
+ left = initialPos.left;
+
+ // Auto-position if enabled and popover goes outside viewport
+ if (this.autoPosition) {
+ const bestPosition = this.findBestPosition(positions, viewportWidth, viewportHeight, popoverRect);
+ position = bestPosition.position;
+ top = bestPosition.top;
+ left = bestPosition.left;
+ }
+
+ // Ensure popover stays within viewport bounds
+ const finalPosition = this.constrainToViewport(
+ { top, left, position },
+ popoverRect,
+ viewportWidth,
+ viewportHeight
+ );
+
+ // Update state
+ this._computedPosition.set(finalPosition.position);
+ this._positionData.set(finalPosition);
+
+ // Emit position change if it changed
+ if (finalPosition.position !== this.position && this.positionUpdateCounter > 0) {
+ this.positionChange.emit(finalPosition.position);
+ }
+
+ this.positionUpdateCounter++;
+ }
+
+ /**
+ * Calculates all possible positions for the popover
+ */
+ private calculatePositions(
+ triggerRect: DOMRect,
+ popoverRect: DOMRect,
+ scrollLeft: number,
+ scrollTop: number
+ ): Record {
+ const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+ const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+
+ return {
+ 'top': {
+ top: triggerRect.top - popoverRect.height - this.offset + scrollTop,
+ left: triggerCenterX - popoverRect.width / 2 + scrollLeft,
+ position: 'top'
+ },
+ 'top-start': {
+ top: triggerRect.top - popoverRect.height - this.offset + scrollTop,
+ left: triggerRect.left + scrollLeft,
+ position: 'top-start'
+ },
+ 'top-end': {
+ top: triggerRect.top - popoverRect.height - this.offset + scrollTop,
+ left: triggerRect.right - popoverRect.width + scrollLeft,
+ position: 'top-end'
+ },
+ 'bottom': {
+ top: triggerRect.bottom + this.offset + scrollTop,
+ left: triggerCenterX - popoverRect.width / 2 + scrollLeft,
+ position: 'bottom'
+ },
+ 'bottom-start': {
+ top: triggerRect.bottom + this.offset + scrollTop,
+ left: triggerRect.left + scrollLeft,
+ position: 'bottom-start'
+ },
+ 'bottom-end': {
+ top: triggerRect.bottom + this.offset + scrollTop,
+ left: triggerRect.right - popoverRect.width + scrollLeft,
+ position: 'bottom-end'
+ },
+ 'left': {
+ top: triggerCenterY - popoverRect.height / 2 + scrollTop,
+ left: triggerRect.left - popoverRect.width - this.offset + scrollLeft,
+ position: 'left'
+ },
+ 'right': {
+ top: triggerCenterY - popoverRect.height / 2 + scrollTop,
+ left: triggerRect.right + this.offset + scrollLeft,
+ position: 'right'
+ }
+ };
+ }
+
+ /**
+ * Finds the best position that fits within the viewport
+ */
+ private findBestPosition(
+ positions: Record,
+ viewportWidth: number,
+ viewportHeight: number,
+ popoverRect: DOMRect
+ ): PopoverPositionData {
+ const preferenceOrder: PopoverPosition[] = [
+ this.position,
+ ...Object.keys(positions).filter(p => p !== this.position) as PopoverPosition[]
+ ];
+
+ for (const pos of preferenceOrder) {
+ const posData = positions[pos];
+ const fitsHorizontally = posData.left >= 0 && posData.left + popoverRect.width <= viewportWidth;
+ const fitsVertically = posData.top >= 0 && posData.top + popoverRect.height <= viewportHeight;
+
+ if (fitsHorizontally && fitsVertically) {
+ return posData;
+ }
+ }
+
+ // If no position fits perfectly, return the preferred position
+ return positions[this.position];
+ }
+
+ /**
+ * Constrains the popover position to stay within viewport
+ */
+ private constrainToViewport(
+ position: PopoverPositionData,
+ popoverRect: DOMRect,
+ viewportWidth: number,
+ viewportHeight: number
+ ): PopoverPositionData {
+ const margin = 8; // Keep some margin from viewport edges
+
+ let { top, left } = position;
+
+ // Constrain horizontally
+ if (left < margin) {
+ left = margin;
+ } else if (left + popoverRect.width > viewportWidth - margin) {
+ left = viewportWidth - popoverRect.width - margin;
+ }
+
+ // Constrain vertically
+ if (top < margin) {
+ top = margin;
+ } else if (top + popoverRect.height > viewportHeight - margin) {
+ top = viewportHeight - popoverRect.height - margin;
+ }
+
+ return { ...position, top, left };
+ }
+
+ /**
+ * Sets up trigger event listeners based on trigger type
+ */
+ private setupTriggerListeners(): void {
+ if (!this.triggerElement) return;
+
+ switch (this.trigger) {
+ case 'click':
+ this.renderer.listen(this.triggerElement, 'click', (e) => {
+ e.preventDefault();
+ this.toggle();
+ });
+ break;
+
+ case 'hover':
+ this.renderer.listen(this.triggerElement, 'mouseenter', () => {
+ this.clearTimers();
+ this.showTimer = window.setTimeout(() => this.show(), this.hoverDelay);
+ });
+ this.renderer.listen(this.triggerElement, 'mouseleave', () => {
+ this.clearTimers();
+ this.hideTimer = window.setTimeout(() => this.hide(), this.hoverDelay);
+ });
+ // Keep popover open when hovering over it
+ this.renderer.listen(this.elementRef.nativeElement, 'mouseenter', () => {
+ this.clearTimers();
+ });
+ this.renderer.listen(this.elementRef.nativeElement, 'mouseleave', () => {
+ this.hideTimer = window.setTimeout(() => this.hide(), this.hoverDelay);
+ });
+ break;
+
+ case 'focus':
+ this.renderer.listen(this.triggerElement, 'focus', () => this.show());
+ this.renderer.listen(this.triggerElement, 'blur', () => this.hide());
+ break;
+
+ case 'manual':
+ // No automatic triggers, controlled programmatically
+ break;
+ }
+ }
+
+ /**
+ * Sets up observers for position updates
+ */
+ private setupPositionObservers(): void {
+ // Resize observer to update position on window resize
+ this.resizeObserver = new ResizeObserver(() => {
+ if (this._visible()) {
+ this.updatePosition();
+ }
+ });
+ this.resizeObserver.observe(document.body);
+
+ // Listen for window scroll
+ window.addEventListener('scroll', this.updatePositionThrottled, { passive: true });
+ window.addEventListener('resize', this.updatePositionThrottled, { passive: true });
+ }
+
+ private updatePositionThrottled = this.throttle(() => {
+ if (this._visible()) {
+ this.updatePosition();
+ }
+ }, 16); // ~60fps
+
+ /**
+ * Handles backdrop click
+ */
+ handleBackdropClick(event: MouseEvent): void {
+ if (this.backdropClosable) {
+ this.hide();
+ this.backdropClicked.emit(event);
+ }
+ }
+
+ /**
+ * Handles keyboard events
+ */
+ handleKeydown(event: KeyboardEvent): void {
+ if (event.key === 'Escape' && this.escapeClosable) {
+ event.preventDefault();
+ this.hide();
+ this.escapePressed.emit(event);
+ }
+ }
+
+ /**
+ * Global keyboard listener for ESC key
+ */
+ @HostListener('document:keydown', ['$event'])
+ onDocumentKeydown(event: KeyboardEvent): void {
+ if (this._visible() && event.key === 'Escape' && this.escapeClosable) {
+ event.preventDefault();
+ this.hide();
+ this.escapePressed.emit(event);
+ }
+ }
+
+ /**
+ * Global click listener to close popover on outside clicks
+ */
+ @HostListener('document:click', ['$event'])
+ onDocumentClick(event: MouseEvent): void {
+ if (!this._visible() || !this.closable) return;
+
+ const target = event.target as HTMLElement;
+ const isInsidePopover = this.elementRef.nativeElement.contains(target);
+ const isInsideTrigger = this.triggerElement?.contains(target);
+
+ if (!isInsidePopover && !isInsideTrigger && this.trigger === 'click') {
+ this.hide();
+ }
+ }
+
+ /**
+ * Prevents body scroll when popover is modal-like
+ */
+ private preventBodyScrollIfEnabled(): void {
+ if (!this.preventBodyScroll) return;
+
+ this.originalBodyOverflow = document.body.style.overflow;
+ document.body.style.overflow = 'hidden';
+ }
+
+ /**
+ * Restores body scroll
+ */
+ private restoreBodyScroll(): void {
+ if (!this.preventBodyScroll) return;
+
+ document.body.style.overflow = this.originalBodyOverflow;
+ }
+
+ /**
+ * Clears any active timers
+ */
+ private clearTimers(): void {
+ if (this.showTimer) {
+ clearTimeout(this.showTimer);
+ this.showTimer = undefined;
+ }
+ if (this.hideTimer) {
+ clearTimeout(this.hideTimer);
+ this.hideTimer = undefined;
+ }
+ }
+
+ /**
+ * Cleanup observers and listeners
+ */
+ private cleanup(): void {
+ this.resizeObserver?.disconnect();
+ window.removeEventListener('scroll', this.updatePositionThrottled);
+ window.removeEventListener('resize', this.updatePositionThrottled);
+ }
+
+ /**
+ * Throttle function for performance
+ */
+ private throttle void>(func: T, limit: number): T {
+ let inThrottle: boolean;
+ return ((...args: any[]) => {
+ if (!inThrottle) {
+ func.apply(this, args);
+ inThrottle = true;
+ setTimeout(() => inThrottle = false, limit);
+ }
+ }) as T;
+ }
+
+ /**
+ * Public API method to apply configuration
+ */
+ configure(config: PopoverConfig): void {
+ Object.assign(this, config);
+ }
+
+ /**
+ * Public API method to set trigger element
+ */
+ setTriggerElement(element: HTMLElement): void {
+ this.triggerElement = element;
+ this.setupTriggerListeners();
+ }
+}
\ No newline at end of file