@semantic-components/ui 0.65.0 → 0.66.0

package/esm2022/lib/components/pagination/pagination-next.js

@@ -0,0 +1,52 @@
+import { booleanAttribute, computed, Directive, ElementRef, inject, input, } from '@angular/core';
+import { cn } from '../../utils';
+import { ScPagination } from './pagination';
+import { buttonVariants } from '../button/button';
+import * as i0 from "@angular/core";
+export class ScPaginationNext {
+    pagination = inject(ScPagination, { optional: true });
+    elementRef = inject((ElementRef));
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled',
+        transform: booleanAttribute });
+    variant = input('ghost', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = computed(() => {
+        if (this.disabledInput())
+            return true;
+        if (this.pagination) {
+            return this.pagination.currentPage() === this.pagination.totalPages();
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    isAnchor = computed(() => this.elementRef.nativeElement.tagName === 'A', ...(ngDevMode ? [{ debugName: "isAnchor" }] : []));
+    class = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), 'pr-1.5', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick(event) {
+        event.preventDefault();
+        if (this.disabled()) {
+            return;
+        }
+        if (this.pagination) {
+            const nextPage = this.pagination.currentPage() + 1;
+            this.pagination.goToPage(nextPage);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPaginationNext, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScPaginationNext, isStandalone: true, selector: "a[scPaginationNext], button[scPaginationNext]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "pagination-next", "aria-label": "Go to next page" }, listeners: { "click": "onClick($event)" }, properties: { "class": "class()", "attr.aria-disabled": "disabled() || null", "attr.tabindex": "disabled() ? -1 : null", "attr.href": "isAnchor() ? \"#\" : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPaginationNext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[scPaginationNext], button[scPaginationNext]',
+                    host: {
+                        'data-slot': 'pagination-next',
+                        '[class]': 'class()',
+                        'aria-label': 'Go to next page',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '[attr.tabindex]': 'disabled() ? -1 : null',
+                        '[attr.href]': 'isAnchor() ? "#" : null',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+//# sourceMappingURL=pagination-next.js.map

package/esm2022/lib/components/pagination/pagination-next.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-next.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/pagination/pagination-next.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAoB,MAAM,kBAAkB,CAAC;;AAcpE,MAAM,OAAO,gBAAgB;IACV,UAAU,GAAG,MAAM,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IACtD,UAAU,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IAErD,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,aAAa,GAAG,KAAK,CAAmB,KAAK,0DACpD,KAAK,EAAE,UAAU;QACjB,SAAS,EAAE,gBAAgB,GAC3B,CAAC;IAEM,OAAO,GAAG,KAAK,CAA8B,OAAO,mDAAC,CAAC;IACtD,IAAI,GAAG,KAAK,CAA2B,SAAS,gDAAC,CAAC;IAExC,QAAQ,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC1C,IAAI,IAAI,CAAC,aAAa,EAAE;YAAE,OAAO,IAAI,CAAC;QACtC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;QACxE,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,oDAAC,CAAC;IAEgB,QAAQ,GAAG,QAAQ,CACpC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,KAAK,GAAG,oDACpD,CAAC;IAEiB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,EAC9D,QAAQ,EACR,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,OAAO,CAAC,KAAY;QAClB,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;YACnD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;uGA5CU,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAZ5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,+CAA+C;oBACzD,IAAI,EAAE;wBACJ,WAAW,EAAE,iBAAiB;wBAC9B,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,iBAAiB;wBAC/B,sBAAsB,EAAE,oBAAoB;wBAC5C,iBAAiB,EAAE,wBAAwB;wBAC3C,aAAa,EAAE,yBAAyB;wBACxC,SAAS,EAAE,iBAAiB;qBAC7B;iBACF","sourcesContent":["import {\n  booleanAttribute,\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScPagination } from './pagination';\nimport { buttonVariants, ScButtonVariants } from '../button/button';\n\n@Directive({\n  selector: 'a[scPaginationNext], button[scPaginationNext]',\n  host: {\n    'data-slot': 'pagination-next',\n    '[class]': 'class()',\n    'aria-label': 'Go to next page',\n    '[attr.aria-disabled]': 'disabled() || null',\n    '[attr.tabindex]': 'disabled() ? -1 : null',\n    '[attr.href]': 'isAnchor() ? \"#\" : null',\n    '(click)': 'onClick($event)',\n  },\n})\nexport class ScPaginationNext {\n  private readonly pagination = inject(ScPagination, { optional: true });\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly disabledInput = input<boolean, unknown>(false, {\n    alias: 'disabled',\n    transform: booleanAttribute,\n  });\n\n  readonly variant = input<ScButtonVariants['variant']>('ghost');\n  readonly size = input<ScButtonVariants['size']>('default');\n\n  protected readonly disabled = computed(() => {\n    if (this.disabledInput()) return true;\n    if (this.pagination) {\n      return this.pagination.currentPage() === this.pagination.totalPages();\n    }\n    return false;\n  });\n\n  protected readonly isAnchor = computed(\n    () => this.elementRef.nativeElement.tagName === 'A',\n  );\n\n  protected readonly class = computed(() =>\n    cn(\n      buttonVariants({ variant: this.variant(), size: this.size() }),\n      'pr-1.5',\n      this.classInput(),\n    ),\n  );\n\n  onClick(event: Event): void {\n    event.preventDefault();\n\n    if (this.disabled()) {\n      return;\n    }\n\n    if (this.pagination) {\n      const nextPage = this.pagination.currentPage() + 1;\n      this.pagination.goToPage(nextPage);\n    }\n  }\n}\n"]}

package/esm2022/lib/components/pagination/pagination-page-size-select.js

@@ -0,0 +1,37 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '../../utils';
+import { SC_FIELD } from '../field/field';
+import { ScPagination } from './pagination';
+import * as i0 from "@angular/core";
+export class ScPaginationPageSizeSelect {
+    pagination = inject(ScPagination);
+    field = inject(SC_FIELD, { optional: true });
+    fallbackId = inject(_IdGenerator).getId('sc-pagination-page-size-select-');
+    idInput = input('', { ...(ngDevMode ? { debugName: "idInput" } : {}), alias: 'id' });
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    id = computed(() => this.idInput() || this.field?.id() || this.fallbackId, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    class = computed(() => cn('h-8 rounded-md border border-input bg-background px-3 text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onPageSizeChange(event) {
+        event.stopPropagation();
+        const select = event.target;
+        const newPageSize = parseInt(select.value, 10);
+        this.pagination.changePageSize(newPageSize);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPaginationPageSizeSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScPaginationPageSizeSelect, isStandalone: true, selector: "select[scPaginationPageSizeSelect]", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "pagination-page-size-select" }, listeners: { "change": "onPageSizeChange($event)" }, properties: { "attr.id": "id()", "value": "pagination.pageSize()", "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPaginationPageSizeSelect, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'select[scPaginationPageSizeSelect]',
+                    host: {
+                        'data-slot': 'pagination-page-size-select',
+                        '[attr.id]': 'id()',
+                        '[value]': 'pagination.pageSize()',
+                        '[class]': 'class()',
+                        '(change)': 'onPageSizeChange($event)',
+                    },
+                }]
+        }], propDecorators: { idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=pagination-page-size-select.js.map

package/esm2022/lib/components/pagination/pagination-page-size-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-page-size-select.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/pagination/pagination-page-size-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;;AAY5C,MAAM,OAAO,0BAA0B;IAClB,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IACpC,KAAK,GAAG,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CACtD,iCAAiC,CAClC,CAAC;IAEO,OAAO,GAAG,KAAK,CAAC,EAAE,oDAAI,KAAK,EAAE,IAAI,GAAG,CAAC;IACrC,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEnD,EAAE,GAAG,QAAQ,CACpB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,UAAU,8CAC5D,CAAC;IAEiB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,4MAA4M,EAC5M,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEQ,gBAAgB,CAAC,KAAY;QACrC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B,CAAC;QACjD,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC/C,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9C,CAAC;uGA1BU,0BAA0B;2FAA1B,0BAA0B;;2FAA1B,0BAA0B;kBAVtC,SAAS;mBAAC;oBACT,QAAQ,EAAE,oCAAoC;oBAC9C,IAAI,EAAE;wBACJ,WAAW,EAAE,6BAA6B;wBAC1C,WAAW,EAAE,MAAM;wBACnB,SAAS,EAAE,uBAAuB;wBAClC,SAAS,EAAE,SAAS;wBACpB,UAAU,EAAE,0BAA0B;qBACvC;iBACF","sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\nimport { SC_FIELD } from '../field/field';\nimport { ScPagination } from './pagination';\n\n@Directive({\n  selector: 'select[scPaginationPageSizeSelect]',\n  host: {\n    'data-slot': 'pagination-page-size-select',\n    '[attr.id]': 'id()',\n    '[value]': 'pagination.pageSize()',\n    '[class]': 'class()',\n    '(change)': 'onPageSizeChange($event)',\n  },\n})\nexport class ScPaginationPageSizeSelect {\n  protected readonly pagination = inject(ScPagination);\n  private readonly field = inject(SC_FIELD, { optional: true });\n  private readonly fallbackId = inject(_IdGenerator).getId(\n    'sc-pagination-page-size-select-',\n  );\n\n  readonly idInput = input('', { alias: 'id' });\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  readonly id = computed(\n    () => this.idInput() || this.field?.id() || this.fallbackId,\n  );\n\n  protected readonly class = computed(() =>\n    cn(\n      'h-8 rounded-md border border-input bg-background px-3 text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      this.classInput(),\n    ),\n  );\n\n  protected onPageSizeChange(event: Event): void {\n    event.stopPropagation();\n    const select = event.target as HTMLSelectElement;\n    const newPageSize = parseInt(select.value, 10);\n    this.pagination.changePageSize(newPageSize);\n  }\n}\n"]}

package/esm2022/lib/components/pagination/pagination-previous.js

@@ -0,0 +1,52 @@
+import { booleanAttribute, computed, Directive, ElementRef, inject, input, } from '@angular/core';
+import { cn } from '../../utils';
+import { ScPagination } from './pagination';
+import { buttonVariants } from '../button/button';
+import * as i0 from "@angular/core";
+export class ScPaginationPrevious {
+    pagination = inject(ScPagination, { optional: true });
+    elementRef = inject((ElementRef));
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled',
+        transform: booleanAttribute });
+    variant = input('ghost', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = computed(() => {
+        if (this.disabledInput())
+            return true;
+        if (this.pagination) {
+            return this.pagination.currentPage() === 1;
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    isAnchor = computed(() => this.elementRef.nativeElement.tagName === 'A', ...(ngDevMode ? [{ debugName: "isAnchor" }] : []));
+    class = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), 'pl-1.5', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    onClick(event) {
+        event.preventDefault();
+        if (this.disabled()) {
+            return;
+        }
+        if (this.pagination) {
+            const previousPage = this.pagination.currentPage() - 1;
+            this.pagination.goToPage(previousPage);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPaginationPrevious, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScPaginationPrevious, isStandalone: true, selector: "a[scPaginationPrevious], button[scPaginationPrevious]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "pagination-previous", "aria-label": "Go to previous page" }, listeners: { "click": "onClick($event)" }, properties: { "class": "class()", "attr.aria-disabled": "disabled() || null", "attr.tabindex": "disabled() ? -1 : null", "attr.href": "isAnchor() ? \"#\" : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPaginationPrevious, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[scPaginationPrevious], button[scPaginationPrevious]',
+                    host: {
+                        'data-slot': 'pagination-previous',
+                        '[class]': 'class()',
+                        'aria-label': 'Go to previous page',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '[attr.tabindex]': 'disabled() ? -1 : null',
+                        '[attr.href]': 'isAnchor() ? "#" : null',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+//# sourceMappingURL=pagination-previous.js.map

package/esm2022/lib/components/pagination/pagination-previous.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-previous.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/pagination/pagination-previous.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAoB,MAAM,kBAAkB,CAAC;;AAcpE,MAAM,OAAO,oBAAoB;IACd,UAAU,GAAG,MAAM,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IACtD,UAAU,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IAErD,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,aAAa,GAAG,KAAK,CAAmB,KAAK,0DACpD,KAAK,EAAE,UAAU;QACjB,SAAS,EAAE,gBAAgB,GAC3B,CAAC;IAEM,OAAO,GAAG,KAAK,CAA8B,OAAO,mDAAC,CAAC;IACtD,IAAI,GAAG,KAAK,CAA2B,SAAS,gDAAC,CAAC;IAExC,QAAQ,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC1C,IAAI,IAAI,CAAC,aAAa,EAAE;YAAE,OAAO,IAAI,CAAC;QACtC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QAC7C,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,oDAAC,CAAC;IAEgB,QAAQ,GAAG,QAAQ,CACpC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,KAAK,GAAG,oDACpD,CAAC;IAEiB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,EAC9D,QAAQ,EACR,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEF,OAAO,CAAC,KAAY;QAClB,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;YACvD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;uGA5CU,oBAAoB;2FAApB,oBAAoB;;2FAApB,oBAAoB;kBAZhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,uDAAuD;oBACjE,IAAI,EAAE;wBACJ,WAAW,EAAE,qBAAqB;wBAClC,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,qBAAqB;wBACnC,sBAAsB,EAAE,oBAAoB;wBAC5C,iBAAiB,EAAE,wBAAwB;wBAC3C,aAAa,EAAE,yBAAyB;wBACxC,SAAS,EAAE,iBAAiB;qBAC7B;iBACF","sourcesContent":["import {\n  booleanAttribute,\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n} from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScPagination } from './pagination';\nimport { buttonVariants, ScButtonVariants } from '../button/button';\n\n@Directive({\n  selector: 'a[scPaginationPrevious], button[scPaginationPrevious]',\n  host: {\n    'data-slot': 'pagination-previous',\n    '[class]': 'class()',\n    'aria-label': 'Go to previous page',\n    '[attr.aria-disabled]': 'disabled() || null',\n    '[attr.tabindex]': 'disabled() ? -1 : null',\n    '[attr.href]': 'isAnchor() ? \"#\" : null',\n    '(click)': 'onClick($event)',\n  },\n})\nexport class ScPaginationPrevious {\n  private readonly pagination = inject(ScPagination, { optional: true });\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n  readonly classInput = input<string>('', { alias: 'class' });\n  readonly disabledInput = input<boolean, unknown>(false, {\n    alias: 'disabled',\n    transform: booleanAttribute,\n  });\n\n  readonly variant = input<ScButtonVariants['variant']>('ghost');\n  readonly size = input<ScButtonVariants['size']>('default');\n\n  protected readonly disabled = computed(() => {\n    if (this.disabledInput()) return true;\n    if (this.pagination) {\n      return this.pagination.currentPage() === 1;\n    }\n    return false;\n  });\n\n  protected readonly isAnchor = computed(\n    () => this.elementRef.nativeElement.tagName === 'A',\n  );\n\n  protected readonly class = computed(() =>\n    cn(\n      buttonVariants({ variant: this.variant(), size: this.size() }),\n      'pl-1.5',\n      this.classInput(),\n    ),\n  );\n\n  onClick(event: Event): void {\n    event.preventDefault();\n\n    if (this.disabled()) {\n      return;\n    }\n\n    if (this.pagination) {\n      const previousPage = this.pagination.currentPage() - 1;\n      this.pagination.goToPage(previousPage);\n    }\n  }\n}\n"]}

package/esm2022/lib/components/pagination/pagination.js

@@ -0,0 +1,135 @@
+import { computed, Directive, input, linkedSignal, output, } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScPagination {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    // Smart pagination inputs
+    currentPageInput = input(1, { ...(ngDevMode ? { debugName: "currentPageInput" } : {}), alias: 'currentPage' });
+    pageSizeInput = input(10, { ...(ngDevMode ? { debugName: "pageSizeInput" } : {}), alias: 'pageSize' });
+    totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    pageSizes = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizes" }] : [])); // Available page size options
+    // Internal state (synced from inputs, writable for programmatic updates)
+    currentPage = linkedSignal(() => this.currentPageInput(), ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = linkedSignal(() => this.pageSizeInput(), ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    // Output events
+    change = output();
+    class = computed(() => cn('mx-auto flex w-full justify-center', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    // Computed total pages
+    totalPages = computed(() => {
+        const total = this.totalItems();
+        const size = this.pageSize();
+        return Math.ceil(total / size);
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    // Computed pages array for rendering
+    pages = computed(() => {
+        const current = this.currentPage();
+        const total = this.totalPages();
+        return this.generatePageNumbers(current, total);
+    }, ...(ngDevMode ? [{ debugName: "pages" }] : []));
+    /**
+     * Trigger a page change. Called internally by child components.
+     * @param page The target page number
+     */
+    goToPage(page) {
+        const total = this.totalPages();
+        if (page >= 1 && page <= total && page !== this.currentPage()) {
+            this.currentPage.set(page);
+            this.change.emit({ page, pageSize: this.pageSize() });
+        }
+    }
+    /**
+     * Change the page size. Called internally by ScPaginationPageSizeSelect.
+     * @param newPageSize The new page size
+     */
+    changePageSize(newPageSize) {
+        if (newPageSize > 0 && newPageSize !== this.pageSize()) {
+            // Reset to page 1 when page size changes
+            this.currentPage.set(1);
+            this.pageSize.set(newPageSize);
+            this.change.emit({ page: 1, pageSize: newPageSize });
+        }
+    }
+    generatePageNumbers(currentPage, totalPages) {
+        const siblingCount = 1;
+        // If total pages is less than or equal to 7, show all pages
+        if (totalPages <= 7) {
+            return Array.from({ length: totalPages }, (_, i) => ({
+                type: 'page',
+                value: i + 1,
+            }));
+        }
+        // For more than 7 pages, always return exactly 7 items
+        const pages = [];
+        // First page
+        pages.push({ type: 'page', value: 1 });
+        // Calculate the range around current page
+        let start = Math.max(2, currentPage - siblingCount);
+        let end = Math.min(totalPages - 1, currentPage + siblingCount);
+        // Adjust to ensure we show the right number of pages
+        const totalMiddleSlots = 5; // Total slots minus first and last
+        const needLeftEllipsis = start > 2;
+        const needRightEllipsis = end < totalPages - 1;
+        // Calculate how many actual page slots we have (excluding ellipsis)
+        let pageSlots = totalMiddleSlots;
+        if (needLeftEllipsis)
+            pageSlots--;
+        if (needRightEllipsis)
+            pageSlots--;
+        // Adjust range to fit in available slots
+        if (!needLeftEllipsis && needRightEllipsis) {
+            // Near start: [1, 2, 3, 4, 5, ..., last]
+            end = Math.min(pageSlots + 1, totalPages - 1);
+        }
+        else if (needLeftEllipsis && !needRightEllipsis) {
+            // Near end: [1, ..., n-4, n-3, n-2, n-1, n]
+            start = Math.max(2, totalPages - pageSlots);
+        }
+        else if (needLeftEllipsis && needRightEllipsis) {
+            // Middle: [1, ..., current-1, current, current+1, ..., last]
+            const middlePages = pageSlots;
+            const halfPages = Math.floor(middlePages / 2);
+            start = currentPage - halfPages;
+            end = currentPage + (middlePages - halfPages - 1);
+            // Adjust if we're too close to edges
+            if (start < 2) {
+                start = 2;
+                end = start + middlePages - 1;
+            }
+            if (end > totalPages - 1) {
+                end = totalPages - 1;
+                start = end - middlePages + 1;
+            }
+        }
+        // Add left ellipsis if needed
+        if (start > 2) {
+            pages.push({ type: 'ellipsis', value: 'ellipsis-left' });
+        }
+        // Add middle pages
+        for (let i = start; i <= end; i++) {
+            pages.push({ type: 'page', value: i });
+        }
+        // Add right ellipsis if needed
+        if (end < totalPages - 1) {
+            pages.push({ type: 'ellipsis', value: 'ellipsis-right' });
+        }
+        // Last page
+        pages.push({ type: 'page', value: totalPages });
+        return pages;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPagination, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScPagination, isStandalone: true, selector: "nav[scPagination]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, currentPageInput: { classPropertyName: "currentPageInput", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSizeInput: { classPropertyName: "pageSizeInput", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { attributes: { "data-slot": "pagination", "role": "navigation", "aria-label": "pagination" }, properties: { "class": "class()" } }, exportAs: ["scPagination"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPagination, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'nav[scPagination]',
+                    exportAs: 'scPagination',
+                    host: {
+                        'data-slot': 'pagination',
+                        role: 'navigation',
+                        'aria-label': 'pagination',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], currentPageInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], pageSizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
+//# sourceMappingURL=pagination.js.map

package/esm2022/lib/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/pagination/pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  computed,\n  Directive,\n  input,\n  linkedSignal,\n  output,\n} from '@angular/core';\nimport { cn } from '../../utils';\n\nexport type ScPaginationPage =\n  | { type: 'page'; value: number }\n  | { type: 'ellipsis'; value: string };\n\nexport interface ScPaginationChange {\n  page: number;\n  pageSize: number;\n}\n\n@Directive({\n  selector: 'nav[scPagination]',\n  exportAs: 'scPagination',\n  host: {\n    'data-slot': 'pagination',\n    role: 'navigation',\n    'aria-label': 'pagination',\n    '[class]': 'class()',\n  },\n})\nexport class ScPagination {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  // Smart pagination inputs\n  readonly currentPageInput = input<number>(1, { alias: 'currentPage' });\n  readonly pageSizeInput = input<number>(10, { alias: 'pageSize' });\n  readonly totalItems = input<number>(0);\n  readonly pageSizes = input<number[]>([10, 25, 50, 100]); // Available page size options\n\n  // Internal state (synced from inputs, writable for programmatic updates)\n  readonly currentPage = linkedSignal(() => this.currentPageInput());\n  readonly pageSize = linkedSignal(() => this.pageSizeInput());\n\n  // Output events\n  readonly change = output<ScPaginationChange>();\n\n  protected readonly class = computed(() =>\n    cn('mx-auto flex w-full justify-center', this.classInput()),\n  );\n\n  // Computed total pages\n  readonly totalPages = computed(() => {\n    const total = this.totalItems();\n    const size = this.pageSize();\n    return Math.ceil(total / size);\n  });\n\n  // Computed pages array for rendering\n  readonly pages = computed(() => {\n    const current = this.currentPage();\n    const total = this.totalPages();\n\n    return this.generatePageNumbers(current, total);\n  });\n\n  /**\n   * Trigger a page change. Called internally by child components.\n   * @param page The target page number\n   */\n  goToPage(page: number): void {\n    const total = this.totalPages();\n    if (page >= 1 && page <= total && page !== this.currentPage()) {\n      this.currentPage.set(page);\n      this.change.emit({ page, pageSize: this.pageSize() });\n    }\n  }\n\n  /**\n   * Change the page size. Called internally by ScPaginationPageSizeSelect.\n   * @param newPageSize The new page size\n   */\n  changePageSize(newPageSize: number): void {\n    if (newPageSize > 0 && newPageSize !== this.pageSize()) {\n      // Reset to page 1 when page size changes\n      this.currentPage.set(1);\n      this.pageSize.set(newPageSize);\n      this.change.emit({ page: 1, pageSize: newPageSize });\n    }\n  }\n\n  private generatePageNumbers(\n    currentPage: number,\n    totalPages: number,\n  ): ScPaginationPage[] {\n    const siblingCount = 1;\n    // If total pages is less than or equal to 7, show all pages\n    if (totalPages <= 7) {\n      return Array.from({ length: totalPages }, (_, i) => ({\n        type: 'page' as const,\n        value: i + 1,\n      }));\n    }\n\n    // For more than 7 pages, always return exactly 7 items\n    const pages: ScPaginationPage[] = [];\n\n    // First page\n    pages.push({ type: 'page', value: 1 });\n\n    // Calculate the range around current page\n    let start = Math.max(2, currentPage - siblingCount);\n    let end = Math.min(totalPages - 1, currentPage + siblingCount);\n\n    // Adjust to ensure we show the right number of pages\n    const totalMiddleSlots = 5; // Total slots minus first and last\n    const needLeftEllipsis = start > 2;\n    const needRightEllipsis = end < totalPages - 1;\n\n    // Calculate how many actual page slots we have (excluding ellipsis)\n    let pageSlots = totalMiddleSlots;\n    if (needLeftEllipsis) pageSlots--;\n    if (needRightEllipsis) pageSlots--;\n\n    // Adjust range to fit in available slots\n    if (!needLeftEllipsis && needRightEllipsis) {\n      // Near start: [1, 2, 3, 4, 5, ..., last]\n      end = Math.min(pageSlots + 1, totalPages - 1);\n    } else if (needLeftEllipsis && !needRightEllipsis) {\n      // Near end: [1, ..., n-4, n-3, n-2, n-1, n]\n      start = Math.max(2, totalPages - pageSlots);\n    } else if (needLeftEllipsis && needRightEllipsis) {\n      // Middle: [1, ..., current-1, current, current+1, ..., last]\n      const middlePages = pageSlots;\n      const halfPages = Math.floor(middlePages / 2);\n      start = currentPage - halfPages;\n      end = currentPage + (middlePages - halfPages - 1);\n\n      // Adjust if we're too close to edges\n      if (start < 2) {\n        start = 2;\n        end = start + middlePages - 1;\n      }\n      if (end > totalPages - 1) {\n        end = totalPages - 1;\n        start = end - middlePages + 1;\n      }\n    }\n\n    // Add left ellipsis if needed\n    if (start > 2) {\n      pages.push({ type: 'ellipsis', value: 'ellipsis-left' });\n    }\n\n    // Add middle pages\n    for (let i = start; i <= end; i++) {\n      pages.push({ type: 'page', value: i });\n    }\n\n    // Add right ellipsis if needed\n    if (end < totalPages - 1) {\n      pages.push({ type: 'ellipsis', value: 'ellipsis-right' });\n    }\n\n    // Last page\n    pages.push({ type: 'page', value: totalPages });\n\n    return pages;\n  }\n}\n"]}

package/esm2022/lib/components/popover/index.js

@@ -0,0 +1,9 @@
+export { ScPopoverProvider } from './popover-provider';
+export { ScPopoverTrigger } from './popover-trigger';
+export { ScPopoverPortal } from './popover-portal';
+export { ScPopover } from './popover';
+export { ScPopoverClose } from './popover-close';
+export { ScPopoverHeader } from './popover-header';
+export { ScPopoverTitle } from './popover-title';
+export { ScPopoverDescription } from './popover-description';
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export { ScPopoverProvider } from './popover-provider';\nexport type { ScPopoverAlign, ScPopoverSide } from './popover-provider';\nexport { ScPopoverTrigger } from './popover-trigger';\nexport { ScPopoverPortal } from './popover-portal';\nexport { ScPopover } from './popover';\nexport { ScPopoverClose } from './popover-close';\nexport { ScPopoverHeader } from './popover-header';\nexport { ScPopoverTitle } from './popover-title';\nexport { ScPopoverDescription } from './popover-description';\n"]}

package/esm2022/lib/components/popover/popover-close.js

@@ -0,0 +1,26 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '../../utils';
+import { ScPopoverProvider } from './popover-provider';
+import * as i0 from "@angular/core";
+export class ScPopoverClose {
+    popover = inject(ScPopoverProvider);
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('absolute right-2 top-2 rounded-sm opacity-70 ring-offset-background transition-opacity', 'hover:opacity-100', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    closePopover() {
+        this.popover.open.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPopoverClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScPopoverClose, isStandalone: true, selector: "button[scPopoverClose]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "popover-close" }, listeners: { "click": "closePopover()" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPopoverClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[scPopoverClose]',
+                    host: {
+                        'data-slot': 'popover-close',
+                        '[class]': 'class()',
+                        '(click)': 'closePopover()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=popover-close.js.map

package/esm2022/lib/components/popover/popover-close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-close.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/popover/popover-close.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;;AAUvD,MAAM,OAAO,cAAc;IACR,OAAO,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAC5C,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,wFAAwF,EACxF,mBAAmB,EACnB,qEAAqE,EACrE,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;IAEQ,YAAY;QACpB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;uGAfU,cAAc;2FAAd,cAAc;;2FAAd,cAAc;kBAR1B,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;oBAClC,IAAI,EAAE;wBACJ,WAAW,EAAE,eAAe;wBAC5B,SAAS,EAAE,SAAS;wBACpB,SAAS,EAAE,gBAAgB;qBAC5B;iBACF","sourcesContent":["import { computed, Directive, inject, input } from '@angular/core';\nimport { cn } from '../../utils';\nimport { ScPopoverProvider } from './popover-provider';\n\n@Directive({\n  selector: 'button[scPopoverClose]',\n  host: {\n    'data-slot': 'popover-close',\n    '[class]': 'class()',\n    '(click)': 'closePopover()',\n  },\n})\nexport class ScPopoverClose {\n  private readonly popover = inject(ScPopoverProvider);\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn(\n      'absolute right-2 top-2 rounded-sm opacity-70 ring-offset-background transition-opacity',\n      'hover:opacity-100',\n      'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n      this.classInput(),\n    ),\n  );\n\n  protected closePopover(): void {\n    this.popover.open.set(false);\n  }\n}\n"]}

package/esm2022/lib/components/popover/popover-description.js

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScPopoverDescription {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('text-muted-foreground', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPopoverDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScPopoverDescription, isStandalone: true, selector: "p[scPopoverDescription]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "popover-description" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPopoverDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'p[scPopoverDescription]',
+                    host: {
+                        'data-slot': 'popover-description',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=popover-description.js.map

package/esm2022/lib/components/popover/popover-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-description.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/popover/popover-description.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AASjC,MAAM,OAAO,oBAAoB;IACtB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,uBAAuB,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDAC/C,CAAC;uGALS,oBAAoB;2FAApB,oBAAoB;;2FAApB,oBAAoB;kBAPhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,yBAAyB;oBACnC,IAAI,EAAE;wBACJ,WAAW,EAAE,qBAAqB;wBAClC,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'p[scPopoverDescription]',\n  host: {\n    'data-slot': 'popover-description',\n    '[class]': 'class()',\n  },\n})\nexport class ScPopoverDescription {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('text-muted-foreground', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/popover/popover-header.js

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '../../utils';
+import * as i0 from "@angular/core";
+export class ScPopoverHeader {
+    classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
+    class = computed(() => cn('flex flex-col gap-0.5 text-sm', this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPopoverHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: ScPopoverHeader, isStandalone: true, selector: "div[scPopoverHeader]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "popover-header" }, properties: { "class": "class()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPopoverHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[scPopoverHeader]',
+                    host: {
+                        'data-slot': 'popover-header',
+                        '[class]': 'class()',
+                    },
+                }]
+        }], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=popover-header.js.map

package/esm2022/lib/components/popover/popover-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-header.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/popover/popover-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AASjC,MAAM,OAAO,eAAe;IACjB,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IAEzC,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CAAC,+BAA+B,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,iDACvD,CAAC;uGALS,eAAe;2FAAf,eAAe;;2FAAf,eAAe;kBAP3B,SAAS;mBAAC;oBACT,QAAQ,EAAE,sBAAsB;oBAChC,IAAI,EAAE;wBACJ,WAAW,EAAE,gBAAgB;wBAC7B,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\n\n@Directive({\n  selector: 'div[scPopoverHeader]',\n  host: {\n    'data-slot': 'popover-header',\n    '[class]': 'class()',\n  },\n})\nexport class ScPopoverHeader {\n  readonly classInput = input<string>('', { alias: 'class' });\n\n  protected readonly class = computed(() =>\n    cn('flex flex-col gap-0.5 text-sm', this.classInput()),\n  );\n}\n"]}

package/esm2022/lib/components/popover/popover-portal.js

@@ -0,0 +1,14 @@
+import { Directive, inject, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export class ScPopoverPortal {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPopoverPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: ScPopoverPortal, isStandalone: true, selector: "ng-template[scPopoverPortal]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScPopoverPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[scPopoverPortal]',
+                }]
+        }] });
+//# sourceMappingURL=popover-portal.js.map

package/esm2022/lib/components/popover/popover-portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-portal.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/popover/popover-portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAK/D,MAAM,OAAO,eAAe;IACjB,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;uGADhC,eAAe;2FAAf,eAAe;;2FAAf,eAAe;kBAH3B,SAAS;mBAAC;oBACT,QAAQ,EAAE,8BAA8B;iBACzC","sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: 'ng-template[scPopoverPortal]',\n})\nexport class ScPopoverPortal {\n  readonly templateRef = inject(TemplateRef);\n}\n"]}