@ngstarter-ui/components 21.0.48 → 21.0.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ai/component-registry.json +78 -27
- package/fesm2022/ngstarter-ui-components-country-select.mjs +1 -1
- package/fesm2022/ngstarter-ui-components-country-select.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-currency-select.mjs +1 -1
- package/fesm2022/ngstarter-ui-components-currency-select.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-data-view.mjs +70 -10
- package/fesm2022/ngstarter-ui-components-data-view.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-date-format-select.mjs +1 -1
- package/fesm2022/ngstarter-ui-components-date-format-select.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-filter-builder.mjs +1 -1
- package/fesm2022/ngstarter-ui-components-filter-builder.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-form-builder.mjs +273 -31
- package/fesm2022/ngstarter-ui-components-form-builder.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-image-designer.mjs +1 -1
- package/fesm2022/ngstarter-ui-components-image-designer.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-option.mjs +2 -2
- package/fesm2022/ngstarter-ui-components-option.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-paginator.mjs +1 -1
- package/fesm2022/ngstarter-ui-components-paginator.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-pdf-viewer.mjs +3 -3
- package/fesm2022/ngstarter-ui-components-pdf-viewer.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-select.mjs +474 -27
- package/fesm2022/ngstarter-ui-components-select.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-tabs.mjs +4 -4
- package/fesm2022/ngstarter-ui-components-tabs.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-timezone-select.mjs +1 -1
- package/fesm2022/ngstarter-ui-components-timezone-select.mjs.map +1 -1
- package/fesm2022/ngstarter-ui-components-toolbar.mjs +9 -6
- package/fesm2022/ngstarter-ui-components-toolbar.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_common.scss +1 -1
- package/styles/_tokens.scss +7 -1
- package/types/ngstarter-ui-components-data-view.d.ts +23 -11
- package/types/ngstarter-ui-components-form-builder.d.ts +63 -14
- package/types/ngstarter-ui-components-select.d.ts +112 -3
- package/types/ngstarter-ui-components-toolbar.d.ts +5 -2
|
@@ -101,7 +101,7 @@ class Option {
|
|
|
101
101
|
provide: OPTION,
|
|
102
102
|
useExisting: forwardRef(() => Option)
|
|
103
103
|
}
|
|
104
|
-
], exportAs: ["ngsOption"], ngImport: i0, template: "@if (multiple) {\n <ngs-checkbox [checked]=\"selected\" [disabled]=\"disabled\" class=\"pointer-events-none me-1\"/>\n}\n<span class=\"ngs-option-text\"><ng-content /></span>\n@if (!multiple && selected && !hideCheckIcon) {\n <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ms-3\"/>\n}\n", styles: [":host{display:flex;align-items:center;height:var(--ngs-option-height, var(--ngs-dropdown-height, var(--option-height, 48px)));padding:var(--ngs-option-padding, var(--ngs-dropdown-item-padding,
|
|
104
|
+
], exportAs: ["ngsOption"], ngImport: i0, template: "@if (multiple) {\n <ngs-checkbox [checked]=\"selected\" [disabled]=\"disabled\" class=\"pointer-events-none me-1\"/>\n}\n<span class=\"ngs-option-text\"><ng-content /></span>\n@if (!multiple && selected && !hideCheckIcon) {\n <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ms-3\"/>\n}\n", styles: [":host{display:flex;align-items:center;min-height:var(--ngs-option-height, var(--ngs-dropdown-height, var(--option-height, 48px)));padding:var(--ngs-option-padding, var(--ngs-dropdown-item-padding, calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3)));border-radius:var(--ngs-option-radius, var(--ngs-dropdown-item-radius, var(--ngs-control-radius)));font-size:var(--ngs-option-font-size, var(--ngs-dropdown-item-font-size, var(--ngs-font-size-sm)));color:var(--ngs-option-color, var(--ngs-dropdown-item-color, var(--ngs-color-on-surface)));cursor:pointer;outline:none;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:var(--ngs-option-gap, var(--ngs-dropdown-item-gap, calc(var(--spacing, .25rem) * 2)))}:host:hover:not(.ngs-option-disabled){background:var(--ngs-option-hover-background, var(--ngs-dropdown-item-hover-bg, var(--ngs-color-surface-container-high)))}:host.ngs-option-active:not(.ngs-option-disabled){background:var(--ngs-option-active-background, var(--ngs-dropdown-item-active-bg, var(--ngs-color-surface-container-highest)))}:host.ngs-option-selected:not(.ngs-option-multiple){background:var(--ngs-option-selected-background, var(--ngs-dropdown-item-selected-bg, var(--ngs-color-primary-container)));color:var(--ngs-option-selected-color, var(--ngs-dropdown-item-selected-color, var(--ngs-color-on-primary-container)))}:host.ngs-option-multiple.ngs-option-selected{background:transparent}:host.ngs-option-multiple.ngs-option-selected:hover:not(.ngs-option-disabled){background:var(--ngs-option-hover-background, var(--ngs-dropdown-item-hover-bg, var(--ngs-color-surface-container-high)))}:host.ngs-option-disabled{color:var(--ngs-option-disabled-color, var(--ngs-dropdown-item-disabled-color, var(--ngs-color-on-surface-variant)));cursor:default;pointer-events:none}.ngs-optgroup :host{padding-inline-start:var(--ngs-option-group-padding-start, var(--ngs-dropdown-item-nested-padding-start, calc(var(--ngs-dropdown-item-padding-x, calc(var(--spacing, .25rem) * 3)) + calc(var(--spacing, .25rem) * 4))))}.ngs-option-text{display:inline-block;flex-grow:1;overflow:hidden;text-overflow:ellipsis}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Checkbox, selector: "ngs-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["checkedChange", "disabledChange", "indeterminateChange", "change"], exportAs: ["ngsCheckbox"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }] });
|
|
105
105
|
}
|
|
106
106
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Option, decorators: [{
|
|
107
107
|
type: Component,
|
|
@@ -123,7 +123,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
123
123
|
'[attr.aria-selected]': 'selected',
|
|
124
124
|
'[attr.aria-disabled]': 'disabled',
|
|
125
125
|
'(click)': '_onClick($event)'
|
|
126
|
-
}, template: "@if (multiple) {\n <ngs-checkbox [checked]=\"selected\" [disabled]=\"disabled\" class=\"pointer-events-none me-1\"/>\n}\n<span class=\"ngs-option-text\"><ng-content /></span>\n@if (!multiple && selected && !hideCheckIcon) {\n <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ms-3\"/>\n}\n", styles: [":host{display:flex;align-items:center;height:var(--ngs-option-height, var(--ngs-dropdown-height, var(--option-height, 48px)));padding:var(--ngs-option-padding, var(--ngs-dropdown-item-padding,
|
|
126
|
+
}, template: "@if (multiple) {\n <ngs-checkbox [checked]=\"selected\" [disabled]=\"disabled\" class=\"pointer-events-none me-1\"/>\n}\n<span class=\"ngs-option-text\"><ng-content /></span>\n@if (!multiple && selected && !hideCheckIcon) {\n <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ms-3\"/>\n}\n", styles: [":host{display:flex;align-items:center;min-height:var(--ngs-option-height, var(--ngs-dropdown-height, var(--option-height, 48px)));padding:var(--ngs-option-padding, var(--ngs-dropdown-item-padding, calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3)));border-radius:var(--ngs-option-radius, var(--ngs-dropdown-item-radius, var(--ngs-control-radius)));font-size:var(--ngs-option-font-size, var(--ngs-dropdown-item-font-size, var(--ngs-font-size-sm)));color:var(--ngs-option-color, var(--ngs-dropdown-item-color, var(--ngs-color-on-surface)));cursor:pointer;outline:none;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:var(--ngs-option-gap, var(--ngs-dropdown-item-gap, calc(var(--spacing, .25rem) * 2)))}:host:hover:not(.ngs-option-disabled){background:var(--ngs-option-hover-background, var(--ngs-dropdown-item-hover-bg, var(--ngs-color-surface-container-high)))}:host.ngs-option-active:not(.ngs-option-disabled){background:var(--ngs-option-active-background, var(--ngs-dropdown-item-active-bg, var(--ngs-color-surface-container-highest)))}:host.ngs-option-selected:not(.ngs-option-multiple){background:var(--ngs-option-selected-background, var(--ngs-dropdown-item-selected-bg, var(--ngs-color-primary-container)));color:var(--ngs-option-selected-color, var(--ngs-dropdown-item-selected-color, var(--ngs-color-on-primary-container)))}:host.ngs-option-multiple.ngs-option-selected{background:transparent}:host.ngs-option-multiple.ngs-option-selected:hover:not(.ngs-option-disabled){background:var(--ngs-option-hover-background, var(--ngs-dropdown-item-hover-bg, var(--ngs-color-surface-container-high)))}:host.ngs-option-disabled{color:var(--ngs-option-disabled-color, var(--ngs-dropdown-item-disabled-color, var(--ngs-color-on-surface-variant)));cursor:default;pointer-events:none}.ngs-optgroup :host{padding-inline-start:var(--ngs-option-group-padding-start, var(--ngs-dropdown-item-nested-padding-start, calc(var(--ngs-dropdown-item-padding-x, calc(var(--spacing, .25rem) * 3)) + calc(var(--spacing, .25rem) * 4))))}.ngs-option-text{display:inline-block;flex-grow:1;overflow:hidden;text-overflow:ellipsis}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
127
127
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabledSignal: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });
|
|
128
128
|
|
|
129
129
|
class Optgroup {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngstarter-ui-components-option.mjs","sources":["../../../projects/components/option/src/option/option-tokens.ts","../../../projects/components/option/src/option/option.ts","../../../projects/components/option/src/option/option.html","../../../projects/components/option/src/option/optgroup.ts","../../../projects/components/option/ngstarter-ui-components-option.ts"],"sourcesContent":["import { InjectionToken, Signal, ElementRef, OutputEmitterRef, WritableSignal } from '@angular/core';\n\nexport abstract class _Option {\n abstract value: Signal<any>;\n abstract data?: Signal<any>;\n abstract elementRef: ElementRef<HTMLElement>;\n abstract select(): void;\n abstract deselect(): void;\n abstract selected: boolean;\n abstract viewValue: string;\n abstract onSelectionChange: OutputEmitterRef<_Option>;\n abstract disabled: boolean;\n}\n\nexport abstract class _OptionParent {\n abstract multiple: Signal<boolean>;\n abstract hideCheckIcon?: Signal<boolean>;\n abstract _optionsContentChanges?: WritableSignal<number>;\n}\n\nexport const OPTION_PARENT = new InjectionToken<_OptionParent>('OPTION_PARENT');\nexport const OPTION = new InjectionToken<_Option>('OPTION');\n","import {\n Component,\n ElementRef,\n booleanAttribute,\n output,\n input,\n signal,\n inject,\n forwardRef,\n AfterViewInit, OnDestroy, ChangeDetectorRef\n} from '@angular/core';\nimport { OPTION, OPTION_PARENT, _Option, _OptionParent } from './option-tokens';\nimport { Checkbox } from '@ngstarter-ui/components/checkbox';\nimport { Icon } from '@ngstarter-ui/components/icon';\nimport { Highlightable } from '@angular/cdk/a11y';\n\n@Component({\n selector: 'ngs-option',\n exportAs: 'ngsOption',\n standalone: true,\n imports: [\n Checkbox,\n Icon\n ],\n templateUrl: './option.html',\n styleUrl: './option.scss',\n providers: [\n {\n provide: OPTION,\n useExisting: forwardRef(() => Option)\n }\n ],\n host: {\n 'role': 'option',\n '[attr.tabindex]': '-1',\n '[class.ngs-option-selected]': 'selected',\n '[class.ngs-option-disabled]': 'disabled',\n '[class.ngs-option-multiple]': 'multiple',\n '[class.ngs-option-active]': 'active',\n '[attr.aria-selected]': 'selected',\n '[attr.aria-disabled]': 'disabled',\n '(click)': '_onClick($event)'\n }\n})\nexport class Option implements AfterViewInit, OnDestroy, _Option, Highlightable {\n private _parent = inject<_OptionParent>(OPTION_PARENT, { optional: true });\n private _cdr = inject(ChangeDetectorRef);\n\n value = input<any>();\n data = input<any>();\n disabledSignal = input(false, { alias: 'disabled', transform: booleanAttribute });\n selectedInput = input(false, { alias: 'selected', transform: booleanAttribute });\n\n get disabled(): boolean {\n return this.disabledSignal();\n }\n\n readonly onSelectionChange = output<_Option>();\n\n private _selected = signal(false);\n private _active = signal(false);\n private _mutationObserver?: MutationObserver;\n\n constructor(public elementRef: ElementRef<HTMLElement>) {}\n\n ngAfterViewInit() {\n this._parent?._optionsContentChanges?.update(v => v + 1);\n\n if (typeof MutationObserver !== 'undefined') {\n this._mutationObserver = new MutationObserver(() => {\n this._parent?._optionsContentChanges?.update(v => v + 1);\n });\n this._mutationObserver.observe(this.elementRef.nativeElement, {\n childList: true,\n characterData: true,\n subtree: true\n });\n }\n }\n\n ngOnDestroy() {\n this._mutationObserver?.disconnect();\n }\n\n get selected(): boolean {\n return this.selectedInput() || this._selected();\n }\n\n get multiple(): boolean {\n return this._parent?.multiple() ?? false;\n }\n\n get hideCheckIcon(): boolean {\n return this._parent?.hideCheckIcon?.() ?? false;\n }\n\n get active(): boolean {\n return this._active();\n }\n\n select(): void {\n if (!this._selected()) {\n this._selected.set(true);\n this._cdr.markForCheck();\n }\n }\n\n deselect(): void {\n if (this._selected()) {\n this._selected.set(false);\n this._cdr.markForCheck();\n }\n }\n\n setActiveStyles(): void {\n this._active.set(true);\n this._cdr.markForCheck();\n }\n\n setInactiveStyles(): void {\n this._active.set(false);\n this._cdr.markForCheck();\n }\n\n _onClick(event: MouseEvent): void {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.onSelectionChange.emit(this);\n }\n\n get viewValue(): string {\n const element = this.elementRef.nativeElement;\n const textElement = element.querySelector('.ngs-option-text');\n\n if (textElement) {\n return (textElement.textContent || '').trim();\n }\n\n return (element.textContent || '').trim();\n }\n\n getLabel?(): string {\n return this.viewValue;\n }\n}\n","@if (multiple) {\n <ngs-checkbox [checked]=\"selected\" [disabled]=\"disabled\" class=\"pointer-events-none me-1\"/>\n}\n<span class=\"ngs-option-text\"><ng-content /></span>\n@if (!multiple && selected && !hideCheckIcon) {\n <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ms-3\"/>\n}\n","import { Component, input, booleanAttribute } from '@angular/core';\n\n@Component({\n selector: 'ngs-optgroup',\n exportAs: 'ngsOptgroup',\n standalone: true,\n template: `\n <span class=\"ngs-optgroup-label\">{{ label() }}</span>\n <ng-content select=\"ngs-option\" />\n `,\n styles: [`\n :host {\n display: block;\n --ngs-optgroup-label-padding: var(--ngs-dropdown-item-padding, 0 0.75rem);\n --ngs-optgroup-label-height: var(--ngs-dropdown-height, var(--option-height, 48px));\n --ngs-optgroup-label-font-size: var(--ngs-font-size-xs, 0.75rem);\n --ngs-optgroup-label-font-weight: 600;\n --ngs-optgroup-label-color: var(--ngs-color-on-surface-variant, rgba(0, 0, 0, 0.54));\n }\n .ngs-optgroup-label {\n display: flex;\n align-items: center;\n padding: var(--ngs-optgroup-label-padding);\n height: var(--ngs-optgroup-label-height);\n font-size: var(--ngs-optgroup-label-font-size);\n font-weight: var(--ngs-optgroup-label-font-weight);\n color: var(--ngs-optgroup-label-color);\n text-transform: uppercase;\n }\n `],\n host: {\n 'class': 'ngs-optgroup',\n '[class.ngs-optgroup-disabled]': 'disabled()',\n '[attr.role]': '\"group\"',\n '[attr.aria-disabled]': 'disabled().toString()',\n '[attr.aria-labelledby]': 'id',\n }\n})\nexport class Optgroup {\n label = input<string>();\n disabled = input(false, { transform: booleanAttribute });\n id = `ngs-optgroup-${Math.random().toString(36).substr(2, 9)}`;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ngstarter-ui-components-option.mjs","sources":["../../../projects/components/option/src/option/option-tokens.ts","../../../projects/components/option/src/option/option.ts","../../../projects/components/option/src/option/option.html","../../../projects/components/option/src/option/optgroup.ts","../../../projects/components/option/ngstarter-ui-components-option.ts"],"sourcesContent":["import { InjectionToken, Signal, ElementRef, OutputEmitterRef, WritableSignal } from '@angular/core';\n\nexport abstract class _Option {\n abstract value: Signal<any>;\n abstract data?: Signal<any>;\n abstract elementRef: ElementRef<HTMLElement>;\n abstract select(): void;\n abstract deselect(): void;\n abstract selected: boolean;\n abstract viewValue: string;\n abstract onSelectionChange: OutputEmitterRef<_Option>;\n abstract disabled: boolean;\n}\n\nexport abstract class _OptionParent {\n abstract multiple: Signal<boolean>;\n abstract hideCheckIcon?: Signal<boolean>;\n abstract _optionsContentChanges?: WritableSignal<number>;\n}\n\nexport const OPTION_PARENT = new InjectionToken<_OptionParent>('OPTION_PARENT');\nexport const OPTION = new InjectionToken<_Option>('OPTION');\n","import {\n Component,\n ElementRef,\n booleanAttribute,\n output,\n input,\n signal,\n inject,\n forwardRef,\n AfterViewInit, OnDestroy, ChangeDetectorRef\n} from '@angular/core';\nimport { OPTION, OPTION_PARENT, _Option, _OptionParent } from './option-tokens';\nimport { Checkbox } from '@ngstarter-ui/components/checkbox';\nimport { Icon } from '@ngstarter-ui/components/icon';\nimport { Highlightable } from '@angular/cdk/a11y';\n\n@Component({\n selector: 'ngs-option',\n exportAs: 'ngsOption',\n standalone: true,\n imports: [\n Checkbox,\n Icon\n ],\n templateUrl: './option.html',\n styleUrl: './option.scss',\n providers: [\n {\n provide: OPTION,\n useExisting: forwardRef(() => Option)\n }\n ],\n host: {\n 'role': 'option',\n '[attr.tabindex]': '-1',\n '[class.ngs-option-selected]': 'selected',\n '[class.ngs-option-disabled]': 'disabled',\n '[class.ngs-option-multiple]': 'multiple',\n '[class.ngs-option-active]': 'active',\n '[attr.aria-selected]': 'selected',\n '[attr.aria-disabled]': 'disabled',\n '(click)': '_onClick($event)'\n }\n})\nexport class Option implements AfterViewInit, OnDestroy, _Option, Highlightable {\n private _parent = inject<_OptionParent>(OPTION_PARENT, { optional: true });\n private _cdr = inject(ChangeDetectorRef);\n\n value = input<any>();\n data = input<any>();\n disabledSignal = input(false, { alias: 'disabled', transform: booleanAttribute });\n selectedInput = input(false, { alias: 'selected', transform: booleanAttribute });\n\n get disabled(): boolean {\n return this.disabledSignal();\n }\n\n readonly onSelectionChange = output<_Option>();\n\n private _selected = signal(false);\n private _active = signal(false);\n private _mutationObserver?: MutationObserver;\n\n constructor(public elementRef: ElementRef<HTMLElement>) {}\n\n ngAfterViewInit() {\n this._parent?._optionsContentChanges?.update(v => v + 1);\n\n if (typeof MutationObserver !== 'undefined') {\n this._mutationObserver = new MutationObserver(() => {\n this._parent?._optionsContentChanges?.update(v => v + 1);\n });\n this._mutationObserver.observe(this.elementRef.nativeElement, {\n childList: true,\n characterData: true,\n subtree: true\n });\n }\n }\n\n ngOnDestroy() {\n this._mutationObserver?.disconnect();\n }\n\n get selected(): boolean {\n return this.selectedInput() || this._selected();\n }\n\n get multiple(): boolean {\n return this._parent?.multiple() ?? false;\n }\n\n get hideCheckIcon(): boolean {\n return this._parent?.hideCheckIcon?.() ?? false;\n }\n\n get active(): boolean {\n return this._active();\n }\n\n select(): void {\n if (!this._selected()) {\n this._selected.set(true);\n this._cdr.markForCheck();\n }\n }\n\n deselect(): void {\n if (this._selected()) {\n this._selected.set(false);\n this._cdr.markForCheck();\n }\n }\n\n setActiveStyles(): void {\n this._active.set(true);\n this._cdr.markForCheck();\n }\n\n setInactiveStyles(): void {\n this._active.set(false);\n this._cdr.markForCheck();\n }\n\n _onClick(event: MouseEvent): void {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.onSelectionChange.emit(this);\n }\n\n get viewValue(): string {\n const element = this.elementRef.nativeElement;\n const textElement = element.querySelector('.ngs-option-text');\n\n if (textElement) {\n return (textElement.textContent || '').trim();\n }\n\n return (element.textContent || '').trim();\n }\n\n getLabel?(): string {\n return this.viewValue;\n }\n}\n","@if (multiple) {\n <ngs-checkbox [checked]=\"selected\" [disabled]=\"disabled\" class=\"pointer-events-none me-1\"/>\n}\n<span class=\"ngs-option-text\"><ng-content /></span>\n@if (!multiple && selected && !hideCheckIcon) {\n <ngs-icon name=\"fluent:checkmark-24-regular\" class=\"ms-3\"/>\n}\n","import { Component, input, booleanAttribute } from '@angular/core';\n\n@Component({\n selector: 'ngs-optgroup',\n exportAs: 'ngsOptgroup',\n standalone: true,\n template: `\n <span class=\"ngs-optgroup-label\">{{ label() }}</span>\n <ng-content select=\"ngs-option\" />\n `,\n styles: [`\n :host {\n display: block;\n --ngs-optgroup-label-padding: var(--ngs-dropdown-item-padding, 0 0.75rem);\n --ngs-optgroup-label-height: var(--ngs-dropdown-height, var(--option-height, 48px));\n --ngs-optgroup-label-font-size: var(--ngs-font-size-xs, 0.75rem);\n --ngs-optgroup-label-font-weight: 600;\n --ngs-optgroup-label-color: var(--ngs-color-on-surface-variant, rgba(0, 0, 0, 0.54));\n }\n .ngs-optgroup-label {\n display: flex;\n align-items: center;\n padding: var(--ngs-optgroup-label-padding);\n height: var(--ngs-optgroup-label-height);\n font-size: var(--ngs-optgroup-label-font-size);\n font-weight: var(--ngs-optgroup-label-font-weight);\n color: var(--ngs-optgroup-label-color);\n text-transform: uppercase;\n }\n `],\n host: {\n 'class': 'ngs-optgroup',\n '[class.ngs-optgroup-disabled]': 'disabled()',\n '[attr.role]': '\"group\"',\n '[attr.aria-disabled]': 'disabled().toString()',\n '[attr.aria-labelledby]': 'id',\n }\n})\nexport class Optgroup {\n label = input<string>();\n disabled = input(false, { transform: booleanAttribute });\n id = `ngs-optgroup-${Math.random().toString(36).substr(2, 9)}`;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -279,7 +279,7 @@ class Paginator {
|
|
|
279
279
|
});
|
|
280
280
|
}
|
|
281
281
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Paginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
282
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Paginator, isStandalone: true, selector: "ngs-paginator", inputs: { pageIndexInput: { classPropertyName: "pageIndexInput", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, lengthInput: { classPropertyName: "lengthInput", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, pageSizeInput: { classPropertyName: "pageSizeInput", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptionsInput: { classPropertyName: "pageSizeOptionsInput", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "page" }, host: { attributes: { "role": "group" }, classAttribute: "ngs-paginator" }, exportAs: ["ngsPaginator"], ngImport: i0, template: "<div class=\"ngs-paginator-container\">\n @if (!hidePageSize()) {\n <div class=\"ngs-paginator-page-size\">\n <div class=\"ngs-paginator-page-size-label\">\n {{_intl.itemsPerPageLabel || 'Items per page:'}}\n </div>\n\n <ngs-form-field\n subscriptHiddenIfEmpty\n class=\"ngs-paginator-page-size-select\">\n <ngs-select\n hideCheckIcon\n [value]=\"pageSize\"\n [disabled]=\"disabled()\"\n (selectionChange)=\"_changePageSize($event.value)\">\n @for (pageSizeOption of _displayedPageSizeOptions; track pageSizeOption) {\n <ngs-option [value]=\"pageSizeOption\">\n {{pageSizeOption}}\n </ngs-option>\n }\n </ngs-select>\n </ngs-form-field>\n </div>\n }\n\n <div class=\"ngs-paginator-range-actions\">\n <div class=\"ngs-paginator-range-label\" aria-live=\"polite\">\n {{_intl.getRangeLabel(pageIndex, pageSize, length)}}\n </div>\n\n <div class=\"ngs-paginator-navigation\">\n @if (showFirstLastButtons()) {\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-first\"\n (click)=\"firstPage()\"\n [ngsTooltip]=\"_intl.firstPageLabel || 'First page'\"\n [disabled]=\"_previousButtonsDisabled()\">\n <ngs-icon name=\"fluent:arrow-previous-24-regular\" />\n </button>\n }\n\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-previous\"\n (click)=\"previousPage()\"\n [ngsTooltip]=\"_intl.previousPageLabel || 'Previous page'\"\n [disabled]=\"_previousButtonsDisabled()\">\n <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n </button>\n\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-next\"\n (click)=\"nextPage()\"\n [ngsTooltip]=\"_intl.nextPageLabel || 'Next page'\"\n [disabled]=\"_nextButtonsDisabled()\">\n <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n </button>\n\n @if (showFirstLastButtons()) {\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-last\"\n (click)=\"lastPage()\"\n [ngsTooltip]=\"_intl.lastPageLabel || 'Last page'\"\n [disabled]=\"_nextButtonsDisabled()\">\n <ngs-icon name=\"fluent:arrow-next-24-regular\" />\n </button>\n }\n </div>\n </div>\n</div>\n", styles: [":host{--ngs-paginator-container-background: transparent;--ngs-paginator-container-text-color: var(--ngs-color-on-surface);--ngs-paginator-container-text-font: var(--font-sans);--ngs-paginator-container-text-line-height: inherit;--ngs-paginator-container-text-size: var(--ngs-font-size-sm);--ngs-paginator-container-text-tracking: normal;--ngs-paginator-container-text-weight: 400;--ngs-paginator-page-size-margin-right: 8px;--ngs-paginator-items-per-page-label-margin: 0 4px;--ngs-paginator-range-label-margin: 0 calc(var(--spacing, .25rem) * 5) 0 calc(var(--spacing, .25rem) * 4);display:block}:host ngs-form-field{--ngs-form-field-container-min-height: auto}:host .ngs-paginator-container{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;flex-wrap:wrap-reverse;min-height:40px;background:var(--ngs-paginator-container-background-color);color:var(--ngs-paginator-container-text-color);line-height:var(--ngs-paginator-container-text-line-height);font-size:var(--ngs-paginator-container-text-size);letter-spacing:var(--ngs-paginator-container-text-tracking);font-weight:var(--ngs-paginator-container-text-weight)}:host .ngs-paginator-page-size{display:flex;align-items:center;margin-right:var(--ngs-paginator-page-size-margin-right)}:host .ngs-paginator-page-size-label{margin:var(--ngs-paginator-items-per-page-label-margin)}:host .ngs-paginator-page-size-select{margin:0 4px;width:78px;--ngs-form-field-infix-padding-top: 0 !important;--ngs-form-field-infix-padding-bottom: 0 !important}:host .ngs-paginator-page-size-select ::ng-deep .ngs-form-field-container{padding:0 6px 0 12px!important;height:calc(var(--spacing, .25rem) * 10)!important;min-height:calc(var(--spacing, .25rem) * 10)!important;box-sizing:border-box!important}:host .ngs-paginator-page-size-select ::ng-deep .ngs-form-field-infix{padding:0!important;height:calc(var(--spacing, .25rem) * 10)!important;min-height:calc(var(--spacing, .25rem) * 10)!important;box-sizing:border-box!important}:host .ngs-paginator-page-size-select ::ng-deep .ngs-select{height:calc(var(--spacing, .25rem) * 10)!important;min-height:calc(var(--spacing, .25rem) * 10)!important;min-width:0!important;--ngs-select-min-width: 0 !important}:host .ngs-paginator-page-size-select ::ng-deep .ngs-select-arrow-wrapper{height:calc(var(--spacing, .25rem) * 10)!important;padding-inline-end:2px}:host .ngs-paginator-range-actions{display:flex;align-items:center}:host .ngs-paginator-range-label{margin:var(--ngs-paginator-range-label-margin)}:host .ngs-paginator-navigation{display:flex;align-items:center}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Button, selector: " button[ngsButton], button[ngsIconButton], a[ngsButton], a[ngsIconButton] ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "directive", type: Tooltip, selector: "[ngsTooltip]", inputs: ["ngsTooltip", "ngsTooltipPosition", "ngsTooltipClass", "ngsTooltipShowDelay", "ngsTooltipHideDelay", "ngsTooltipOffset", "ngsTooltipPositionAtOrigin", "ngsTooltipDisabled"], exportAs: ["ngsTooltip"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
282
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Paginator, isStandalone: true, selector: "ngs-paginator", inputs: { pageIndexInput: { classPropertyName: "pageIndexInput", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, lengthInput: { classPropertyName: "lengthInput", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, pageSizeInput: { classPropertyName: "pageSizeInput", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptionsInput: { classPropertyName: "pageSizeOptionsInput", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "page" }, host: { attributes: { "role": "group" }, classAttribute: "ngs-paginator" }, exportAs: ["ngsPaginator"], ngImport: i0, template: "<div class=\"ngs-paginator-container\">\n @if (!hidePageSize()) {\n <div class=\"ngs-paginator-page-size\">\n <div class=\"ngs-paginator-page-size-label\">\n {{_intl.itemsPerPageLabel || 'Items per page:'}}\n </div>\n\n <ngs-form-field\n subscriptHiddenIfEmpty\n class=\"ngs-paginator-page-size-select\">\n <ngs-select\n hideCheckIcon\n [value]=\"pageSize\"\n [disabled]=\"disabled()\"\n (selectionChange)=\"_changePageSize($event.value)\">\n @for (pageSizeOption of _displayedPageSizeOptions; track pageSizeOption) {\n <ngs-option [value]=\"pageSizeOption\">\n {{pageSizeOption}}\n </ngs-option>\n }\n </ngs-select>\n </ngs-form-field>\n </div>\n }\n\n <div class=\"ngs-paginator-range-actions\">\n <div class=\"ngs-paginator-range-label\" aria-live=\"polite\">\n {{_intl.getRangeLabel(pageIndex, pageSize, length)}}\n </div>\n\n <div class=\"ngs-paginator-navigation\">\n @if (showFirstLastButtons()) {\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-first\"\n (click)=\"firstPage()\"\n [ngsTooltip]=\"_intl.firstPageLabel || 'First page'\"\n [disabled]=\"_previousButtonsDisabled()\">\n <ngs-icon name=\"fluent:arrow-previous-24-regular\" />\n </button>\n }\n\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-previous\"\n (click)=\"previousPage()\"\n [ngsTooltip]=\"_intl.previousPageLabel || 'Previous page'\"\n [disabled]=\"_previousButtonsDisabled()\">\n <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n </button>\n\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-next\"\n (click)=\"nextPage()\"\n [ngsTooltip]=\"_intl.nextPageLabel || 'Next page'\"\n [disabled]=\"_nextButtonsDisabled()\">\n <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n </button>\n\n @if (showFirstLastButtons()) {\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-last\"\n (click)=\"lastPage()\"\n [ngsTooltip]=\"_intl.lastPageLabel || 'Last page'\"\n [disabled]=\"_nextButtonsDisabled()\">\n <ngs-icon name=\"fluent:arrow-next-24-regular\" />\n </button>\n }\n </div>\n </div>\n</div>\n", styles: [":host{--ngs-paginator-container-background: transparent;--ngs-paginator-container-text-color: var(--ngs-color-on-surface);--ngs-paginator-container-text-font: var(--font-sans);--ngs-paginator-container-text-line-height: inherit;--ngs-paginator-container-text-size: var(--ngs-font-size-sm);--ngs-paginator-container-text-tracking: normal;--ngs-paginator-container-text-weight: 400;--ngs-paginator-page-size-margin-right: 8px;--ngs-paginator-items-per-page-label-margin: 0 4px;--ngs-paginator-range-label-margin: 0 calc(var(--spacing, .25rem) * 5) 0 calc(var(--spacing, .25rem) * 4);display:block}:host ngs-form-field{--ngs-form-field-container-min-height: auto}:host .ngs-paginator-container{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;flex-wrap:wrap-reverse;min-height:40px;background:var(--ngs-paginator-container-background-color);color:var(--ngs-paginator-container-text-color);line-height:var(--ngs-paginator-container-text-line-height);font-size:var(--ngs-paginator-container-text-size);letter-spacing:var(--ngs-paginator-container-text-tracking);font-weight:var(--ngs-paginator-container-text-weight)}:host .ngs-paginator-page-size{display:flex;align-items:center;margin-right:var(--ngs-paginator-page-size-margin-right)}:host .ngs-paginator-page-size-label{margin:var(--ngs-paginator-items-per-page-label-margin)}:host .ngs-paginator-page-size-select{margin:0 4px;width:78px;--ngs-form-field-infix-padding-top: 0 !important;--ngs-form-field-infix-padding-bottom: 0 !important}:host .ngs-paginator-page-size-select ::ng-deep .ngs-form-field-container{padding:0 6px 0 12px!important;height:calc(var(--spacing, .25rem) * 10)!important;min-height:calc(var(--spacing, .25rem) * 10)!important;box-sizing:border-box!important}:host .ngs-paginator-page-size-select ::ng-deep .ngs-form-field-infix{padding:0!important;height:calc(var(--spacing, .25rem) * 10)!important;min-height:calc(var(--spacing, .25rem) * 10)!important;box-sizing:border-box!important}:host .ngs-paginator-page-size-select ::ng-deep .ngs-select{height:calc(var(--spacing, .25rem) * 10)!important;min-height:calc(var(--spacing, .25rem) * 10)!important;min-width:0!important;--ngs-select-min-width: 0 !important}:host .ngs-paginator-page-size-select ::ng-deep .ngs-select-arrow-wrapper{height:calc(var(--spacing, .25rem) * 10)!important;padding-inline-end:2px}:host .ngs-paginator-range-actions{display:flex;align-items:center}:host .ngs-paginator-range-label{margin:var(--ngs-paginator-range-label-margin)}:host .ngs-paginator-navigation{display:flex;align-items:center}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Button, selector: " button[ngsButton], button[ngsIconButton], a[ngsButton], a[ngsIconButton] ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "directive", type: Tooltip, selector: "[ngsTooltip]", inputs: ["ngsTooltip", "ngsTooltipPosition", "ngsTooltipClass", "ngsTooltipShowDelay", "ngsTooltipHideDelay", "ngsTooltipOffset", "ngsTooltipPositionAtOrigin", "ngsTooltipDisabled"], exportAs: ["ngsTooltip"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "dataSource", "pageSize", "searchable", "searchDebounce", "minSearchLength", "loadOnOpen", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
283
283
|
}
|
|
284
284
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Paginator, decorators: [{
|
|
285
285
|
type: Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngstarter-ui-components-paginator.mjs","sources":["../../../projects/components/paginator/src/paginator-intl.ts","../../../projects/components/paginator/src/paginator-interfaces.ts","../../../projects/components/paginator/src/paginator/paginator.ts","../../../projects/components/paginator/src/paginator/paginator.html","../../../projects/components/paginator/ngstarter-ui-components-paginator.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n/**\n * To modify the labels and text displayed, create a new instance of PaginatorIntl and\n * include it in a custom provider\n */\n@Injectable({ providedIn: 'root' })\nexport class PaginatorIntl {\n /**\n * Stream to emit from when labels are changed. Use this to notify components when the labels have\n * changed after initialization.\n */\n readonly changes = new Subject<void>();\n\n /** A label for the page size selector. */\n itemsPerPageLabel = 'Items per page:';\n\n /** A label for the button that increments the current page. */\n nextPageLabel = 'Next page';\n\n /** A label for the button that decrements the current page. */\n previousPageLabel = 'Previous page';\n\n /** A label for the button that moves to the first page. */\n firstPageLabel = 'First page';\n\n /** A label for the button that moves to the last page. */\n lastPageLabel = 'Last page';\n\n /** A label for the range of items within the current page and the length of the whole list. */\n getRangeLabel = (page: number, pageSize: number, length: number) => {\n length = Math.max(length || 0, 0);\n\n if (length === 0 || pageSize === 0) {\n return `0 ${this.ofLabel || 'of'} ${length}`;\n }\n\n const startIndex = (page || 0) * (pageSize || 0);\n\n // If the start index exceeds the list length, do not try and fix the end index to the end.\n const endIndex =\n startIndex < length ? Math.min(startIndex + (pageSize || 0), length) : startIndex + (pageSize || 0);\n\n return `${startIndex + 1} – ${endIndex} ${this.ofLabel || 'of'} ${length}`;\n };\n\n /** Label for the 'of' terminology in the range display. */\n ofLabel = 'of';\n}\n","import { InjectionToken } from '@angular/core';\n\n/**\n * Change event object that is emitted when the user selects a\n * different page size or navigates to another page.\n */\nexport class PageEvent {\n /** The current page index. */\n pageIndex: number;\n\n /**\n * Index of the page that was selected previously.\n */\n previousPageIndex?: number;\n\n /** The current page size. */\n pageSize: number;\n\n /** The current total number of items being paged. */\n length: number;\n}\n\n/** Injection token that can be used to provide the default options for the paginator module. */\nexport const PAGINATOR_DEFAULT_OPTIONS = new InjectionToken<PaginatorDefaultOptions>(\n 'PAGINATOR_DEFAULT_OPTIONS',\n);\n\n/**\n * Object that can be used to configure the default options for the paginator module.\n */\nexport interface PaginatorDefaultOptions {\n /** Number of items to display on a page. By default set to 50. */\n pageSize?: number;\n\n /** The set of provided page size options to display to the user. */\n pageSizeOptions?: number[];\n\n /** Whether to hide the page size selection UI from the user. */\n hidePageSize?: boolean;\n\n /** Whether to show the first/last buttons UI to the user. */\n showFirstLastButtons?: boolean;\n}\n\n/** The default page size if there is no page size and there are no provided page size options. */\nexport const DEFAULT_PAGE_SIZE = 50;\n","import {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n inject,\n input,\n numberAttribute,\n OnDestroy,\n OnInit,\n afterNextRender,\n output,\n effect,\n untracked\n} from '@angular/core';\nimport { Subject, Subscription } from 'rxjs';\nimport { Tooltip } from '@ngstarter-ui/components/tooltip';\nimport { Icon } from '@ngstarter-ui/components/icon';\nimport { Option, Select } from '@ngstarter-ui/components/select';\nimport { FormField } from '@ngstarter-ui/components/form-field';\nimport { Button } from '@ngstarter-ui/components/button';\nimport { PaginatorIntl } from '../paginator-intl';\nimport {\n DEFAULT_PAGE_SIZE,\n PageEvent,\n PAGINATOR_DEFAULT_OPTIONS\n} from '../paginator-interfaces';\n\n@Component({\n selector: 'ngs-paginator',\n exportAs: 'ngsPaginator',\n imports: [Button, Tooltip, Icon, Option, Select, FormField],\n templateUrl: './paginator.html',\n styleUrl: './paginator.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'ngs-paginator',\n 'role': 'group',\n },\n})\nexport class Paginator implements OnInit, OnDestroy {\n private _changeDetectorRef = inject(ChangeDetectorRef);\n _intl = inject(PaginatorIntl);\n\n private _intlChanges: Subscription;\n\n /** The zero-based page index of the displayed list of items. Defaulted to 0. */\n pageIndexInput = input(undefined, { transform: numberAttribute, alias: 'pageIndex' });\n get pageIndex(): number {\n return this._pageIndex;\n }\n set pageIndex(value: number) {\n this._pageIndex = Math.max(value || 0, 0);\n this._changeDetectorRef.markForCheck();\n }\n private _pageIndex = 0;\n\n lengthInput = input(undefined, { transform: numberAttribute, alias: 'length' });\n get length(): number {\n return this._length;\n }\n set length(value: number) {\n this._length = value || 0;\n this._changeDetectorRef.markForCheck();\n }\n private _length = 0;\n\n /** Number of items to display on a page. By default set to 50. */\n pageSizeInput = input(undefined, { transform: numberAttribute, alias: 'pageSize' });\n get pageSize(): number {\n return this._pageSize;\n }\n set pageSize(value: number) {\n this._pageSize = Math.max(value || 0, 0);\n this._updateDisplayedPageSizeOptions();\n }\n private _pageSize: number;\n\n /** The set of provided page size options to display to the user. */\n pageSizeOptionsInput = input<number[] | undefined>(undefined, { alias: 'pageSizeOptions' });\n get pageSizeOptions(): number[] {\n return this._pageSizeOptions;\n }\n set pageSizeOptions(value: number[]) {\n this._pageSizeOptions = (value || []).map((p) => numberAttribute(p, 0));\n this._updateDisplayedPageSizeOptions();\n }\n private _pageSizeOptions: number[] = [];\n\n /** Whether to hide the page size selection UI from the user. */\n hidePageSize = input(false, { transform: booleanAttribute });\n\n /** Whether to show the first/last buttons UI to the user. */\n showFirstLastButtons = input(false, { transform: booleanAttribute });\n\n /** Whether the paginator is disabled. */\n disabled = input(false, { transform: booleanAttribute });\n\n /** Event emitted when the paginator changes the page size or page index. */\n readonly page = output<PageEvent>();\n\n _initialized = new Subject<void>();\n initialized = this._initialized.asObservable();\n _displayedPageSizeOptions: number[];\n\n private _isInitialized = false;\n\n constructor() {\n const defaults = inject(PAGINATOR_DEFAULT_OPTIONS, { optional: true });\n\n if (defaults) {\n if (defaults.pageSize != null) {\n this._pageSize = defaults.pageSize;\n }\n if (defaults.pageSizeOptions != null) {\n this._pageSizeOptions = defaults.pageSizeOptions;\n }\n }\n\n if (this._intl && this._intl.changes) {\n this._intlChanges = this._intl.changes.subscribe(() => {\n this._changeDetectorRef.markForCheck();\n });\n }\n\n effect(() => {\n const pageIndex = this.pageIndexInput();\n if (pageIndex !== undefined) {\n untracked(() => this.pageIndex = pageIndex);\n }\n });\n effect(() => {\n const pageSize = this.pageSizeInput();\n if (pageSize !== undefined) {\n untracked(() => this.pageSize = pageSize);\n }\n });\n effect(() => {\n const length = this.lengthInput();\n if (length !== undefined) {\n untracked(() => this.length = length);\n }\n });\n effect(() => {\n const pageSizeOptions = this.pageSizeOptionsInput();\n if (pageSizeOptions !== undefined) {\n untracked(() => this.pageSizeOptions = pageSizeOptions);\n }\n });\n afterNextRender(() => {\n this._initialized.next();\n this._initialized.complete();\n });\n }\n\n ngOnInit() {\n this._isInitialized = true;\n this._updateDisplayedPageSizeOptions();\n }\n\n ngOnDestroy() {\n this._intlChanges?.unsubscribe();\n }\n\n /** Advances to the next page if it exists. */\n nextPage(): void {\n if (this.hasNextPage()) {\n const previousPageIndex = this.pageIndex;\n this._pageIndex++;\n this._emitPageEvent(previousPageIndex);\n }\n }\n\n /** Move back to the previous page if it exists. */\n previousPage(): void {\n if (this.hasPreviousPage()) {\n const previousPageIndex = this.pageIndex;\n this._pageIndex--;\n this._emitPageEvent(previousPageIndex);\n }\n }\n\n /** Move to the first page if not already there. */\n firstPage(): void {\n if (this.hasPreviousPage()) {\n const previousPageIndex = this.pageIndex;\n this._pageIndex = 0;\n this._emitPageEvent(previousPageIndex);\n }\n }\n\n /** Move to the last page if not already there. */\n lastPage(): void {\n if (this.hasNextPage()) {\n const previousPageIndex = this.pageIndex;\n this._pageIndex = this.getNumberOfPages() - 1;\n this._emitPageEvent(previousPageIndex);\n }\n }\n\n /** Whether there is a previous page. */\n hasPreviousPage(): boolean {\n return this.pageIndex >= 1 && this.pageSize !== 0;\n }\n\n /** Whether there is a next page. */\n hasNextPage(): boolean {\n const maxPageIndex = this.getNumberOfPages() - 1;\n return this.pageIndex < maxPageIndex && this.pageSize !== 0;\n }\n\n /** Calculate the number of pages */\n getNumberOfPages(): number {\n if (!this.pageSize) {\n return 0;\n }\n\n return Math.ceil(this.length / this.pageSize);\n }\n\n /**\n * Changes the page size so that the first item displayed on the page will still be\n * displayed using the new page size.\n *\n * For example, if the page size is 10 and on the second page (items indexed 10-19) then\n * switching so that the page size is 5 will set the third page as the current page so\n * that the 10th item will still be displayed.\n */\n _changePageSize(pageSize: number) {\n // Current page needs to be updated to reflect the new page size. Navigate to the page\n // containing the previous page's first item.\n const startIndex = this.pageIndex * this.pageSize;\n const previousPageIndex = this.pageIndex;\n\n this._pageSize = pageSize;\n this._pageIndex = Math.floor(startIndex / pageSize) || 0;\n\n this._emitPageEvent(previousPageIndex);\n }\n\n /** Checks whether the buttons for going forwards should be disabled. */\n _nextButtonsDisabled() {\n return this.disabled() || !this.hasNextPage();\n }\n\n /** Checks whether the buttons for going backwards should be disabled. */\n _previousButtonsDisabled() {\n return this.disabled() || !this.hasPreviousPage();\n }\n\n /**\n * Updates the list of page size options to display to the user. Includes making sure that\n * the page size is an option and that the list is sorted.\n */\n private _updateDisplayedPageSizeOptions() {\n if (!this._isInitialized) {\n return;\n }\n\n // If no page size is provided, use the first page size option or the default page size.\n if (!this.pageSize) {\n this._pageSize =\n this.pageSizeOptions.length !== 0 ? this.pageSizeOptions[0] : DEFAULT_PAGE_SIZE;\n }\n\n this._displayedPageSizeOptions = this.pageSizeOptions.slice();\n\n if (this._displayedPageSizeOptions.indexOf(this.pageSize) === -1) {\n this._displayedPageSizeOptions.push(this.pageSize);\n }\n\n // Sort the numbers using a number-specific sort function.\n this._displayedPageSizeOptions.sort((a, b) => a - b);\n this._changeDetectorRef.markForCheck();\n }\n\n /** Emits a page event and clears the session-cached page index if applicable. */\n private _emitPageEvent(previousPageIndex: number) {\n this.page.emit({\n previousPageIndex,\n pageIndex: this._pageIndex,\n pageSize: this._pageSize,\n length: this.length,\n });\n }\n}\n","<div class=\"ngs-paginator-container\">\n @if (!hidePageSize()) {\n <div class=\"ngs-paginator-page-size\">\n <div class=\"ngs-paginator-page-size-label\">\n {{_intl.itemsPerPageLabel || 'Items per page:'}}\n </div>\n\n <ngs-form-field\n subscriptHiddenIfEmpty\n class=\"ngs-paginator-page-size-select\">\n <ngs-select\n hideCheckIcon\n [value]=\"pageSize\"\n [disabled]=\"disabled()\"\n (selectionChange)=\"_changePageSize($event.value)\">\n @for (pageSizeOption of _displayedPageSizeOptions; track pageSizeOption) {\n <ngs-option [value]=\"pageSizeOption\">\n {{pageSizeOption}}\n </ngs-option>\n }\n </ngs-select>\n </ngs-form-field>\n </div>\n }\n\n <div class=\"ngs-paginator-range-actions\">\n <div class=\"ngs-paginator-range-label\" aria-live=\"polite\">\n {{_intl.getRangeLabel(pageIndex, pageSize, length)}}\n </div>\n\n <div class=\"ngs-paginator-navigation\">\n @if (showFirstLastButtons()) {\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-first\"\n (click)=\"firstPage()\"\n [ngsTooltip]=\"_intl.firstPageLabel || 'First page'\"\n [disabled]=\"_previousButtonsDisabled()\">\n <ngs-icon name=\"fluent:arrow-previous-24-regular\" />\n </button>\n }\n\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-previous\"\n (click)=\"previousPage()\"\n [ngsTooltip]=\"_intl.previousPageLabel || 'Previous page'\"\n [disabled]=\"_previousButtonsDisabled()\">\n <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n </button>\n\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-next\"\n (click)=\"nextPage()\"\n [ngsTooltip]=\"_intl.nextPageLabel || 'Next page'\"\n [disabled]=\"_nextButtonsDisabled()\">\n <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n </button>\n\n @if (showFirstLastButtons()) {\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-last\"\n (click)=\"lastPage()\"\n [ngsTooltip]=\"_intl.lastPageLabel || 'Last page'\"\n [disabled]=\"_nextButtonsDisabled()\">\n <ngs-icon name=\"fluent:arrow-next-24-regular\" />\n </button>\n }\n </div>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ngstarter-ui-components-paginator.mjs","sources":["../../../projects/components/paginator/src/paginator-intl.ts","../../../projects/components/paginator/src/paginator-interfaces.ts","../../../projects/components/paginator/src/paginator/paginator.ts","../../../projects/components/paginator/src/paginator/paginator.html","../../../projects/components/paginator/ngstarter-ui-components-paginator.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n/**\n * To modify the labels and text displayed, create a new instance of PaginatorIntl and\n * include it in a custom provider\n */\n@Injectable({ providedIn: 'root' })\nexport class PaginatorIntl {\n /**\n * Stream to emit from when labels are changed. Use this to notify components when the labels have\n * changed after initialization.\n */\n readonly changes = new Subject<void>();\n\n /** A label for the page size selector. */\n itemsPerPageLabel = 'Items per page:';\n\n /** A label for the button that increments the current page. */\n nextPageLabel = 'Next page';\n\n /** A label for the button that decrements the current page. */\n previousPageLabel = 'Previous page';\n\n /** A label for the button that moves to the first page. */\n firstPageLabel = 'First page';\n\n /** A label for the button that moves to the last page. */\n lastPageLabel = 'Last page';\n\n /** A label for the range of items within the current page and the length of the whole list. */\n getRangeLabel = (page: number, pageSize: number, length: number) => {\n length = Math.max(length || 0, 0);\n\n if (length === 0 || pageSize === 0) {\n return `0 ${this.ofLabel || 'of'} ${length}`;\n }\n\n const startIndex = (page || 0) * (pageSize || 0);\n\n // If the start index exceeds the list length, do not try and fix the end index to the end.\n const endIndex =\n startIndex < length ? Math.min(startIndex + (pageSize || 0), length) : startIndex + (pageSize || 0);\n\n return `${startIndex + 1} – ${endIndex} ${this.ofLabel || 'of'} ${length}`;\n };\n\n /** Label for the 'of' terminology in the range display. */\n ofLabel = 'of';\n}\n","import { InjectionToken } from '@angular/core';\n\n/**\n * Change event object that is emitted when the user selects a\n * different page size or navigates to another page.\n */\nexport class PageEvent {\n /** The current page index. */\n pageIndex: number;\n\n /**\n * Index of the page that was selected previously.\n */\n previousPageIndex?: number;\n\n /** The current page size. */\n pageSize: number;\n\n /** The current total number of items being paged. */\n length: number;\n}\n\n/** Injection token that can be used to provide the default options for the paginator module. */\nexport const PAGINATOR_DEFAULT_OPTIONS = new InjectionToken<PaginatorDefaultOptions>(\n 'PAGINATOR_DEFAULT_OPTIONS',\n);\n\n/**\n * Object that can be used to configure the default options for the paginator module.\n */\nexport interface PaginatorDefaultOptions {\n /** Number of items to display on a page. By default set to 50. */\n pageSize?: number;\n\n /** The set of provided page size options to display to the user. */\n pageSizeOptions?: number[];\n\n /** Whether to hide the page size selection UI from the user. */\n hidePageSize?: boolean;\n\n /** Whether to show the first/last buttons UI to the user. */\n showFirstLastButtons?: boolean;\n}\n\n/** The default page size if there is no page size and there are no provided page size options. */\nexport const DEFAULT_PAGE_SIZE = 50;\n","import {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n inject,\n input,\n numberAttribute,\n OnDestroy,\n OnInit,\n afterNextRender,\n output,\n effect,\n untracked\n} from '@angular/core';\nimport { Subject, Subscription } from 'rxjs';\nimport { Tooltip } from '@ngstarter-ui/components/tooltip';\nimport { Icon } from '@ngstarter-ui/components/icon';\nimport { Option, Select } from '@ngstarter-ui/components/select';\nimport { FormField } from '@ngstarter-ui/components/form-field';\nimport { Button } from '@ngstarter-ui/components/button';\nimport { PaginatorIntl } from '../paginator-intl';\nimport {\n DEFAULT_PAGE_SIZE,\n PageEvent,\n PAGINATOR_DEFAULT_OPTIONS\n} from '../paginator-interfaces';\n\n@Component({\n selector: 'ngs-paginator',\n exportAs: 'ngsPaginator',\n imports: [Button, Tooltip, Icon, Option, Select, FormField],\n templateUrl: './paginator.html',\n styleUrl: './paginator.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'ngs-paginator',\n 'role': 'group',\n },\n})\nexport class Paginator implements OnInit, OnDestroy {\n private _changeDetectorRef = inject(ChangeDetectorRef);\n _intl = inject(PaginatorIntl);\n\n private _intlChanges: Subscription;\n\n /** The zero-based page index of the displayed list of items. Defaulted to 0. */\n pageIndexInput = input(undefined, { transform: numberAttribute, alias: 'pageIndex' });\n get pageIndex(): number {\n return this._pageIndex;\n }\n set pageIndex(value: number) {\n this._pageIndex = Math.max(value || 0, 0);\n this._changeDetectorRef.markForCheck();\n }\n private _pageIndex = 0;\n\n lengthInput = input(undefined, { transform: numberAttribute, alias: 'length' });\n get length(): number {\n return this._length;\n }\n set length(value: number) {\n this._length = value || 0;\n this._changeDetectorRef.markForCheck();\n }\n private _length = 0;\n\n /** Number of items to display on a page. By default set to 50. */\n pageSizeInput = input(undefined, { transform: numberAttribute, alias: 'pageSize' });\n get pageSize(): number {\n return this._pageSize;\n }\n set pageSize(value: number) {\n this._pageSize = Math.max(value || 0, 0);\n this._updateDisplayedPageSizeOptions();\n }\n private _pageSize: number;\n\n /** The set of provided page size options to display to the user. */\n pageSizeOptionsInput = input<number[] | undefined>(undefined, { alias: 'pageSizeOptions' });\n get pageSizeOptions(): number[] {\n return this._pageSizeOptions;\n }\n set pageSizeOptions(value: number[]) {\n this._pageSizeOptions = (value || []).map((p) => numberAttribute(p, 0));\n this._updateDisplayedPageSizeOptions();\n }\n private _pageSizeOptions: number[] = [];\n\n /** Whether to hide the page size selection UI from the user. */\n hidePageSize = input(false, { transform: booleanAttribute });\n\n /** Whether to show the first/last buttons UI to the user. */\n showFirstLastButtons = input(false, { transform: booleanAttribute });\n\n /** Whether the paginator is disabled. */\n disabled = input(false, { transform: booleanAttribute });\n\n /** Event emitted when the paginator changes the page size or page index. */\n readonly page = output<PageEvent>();\n\n _initialized = new Subject<void>();\n initialized = this._initialized.asObservable();\n _displayedPageSizeOptions: number[];\n\n private _isInitialized = false;\n\n constructor() {\n const defaults = inject(PAGINATOR_DEFAULT_OPTIONS, { optional: true });\n\n if (defaults) {\n if (defaults.pageSize != null) {\n this._pageSize = defaults.pageSize;\n }\n if (defaults.pageSizeOptions != null) {\n this._pageSizeOptions = defaults.pageSizeOptions;\n }\n }\n\n if (this._intl && this._intl.changes) {\n this._intlChanges = this._intl.changes.subscribe(() => {\n this._changeDetectorRef.markForCheck();\n });\n }\n\n effect(() => {\n const pageIndex = this.pageIndexInput();\n if (pageIndex !== undefined) {\n untracked(() => this.pageIndex = pageIndex);\n }\n });\n effect(() => {\n const pageSize = this.pageSizeInput();\n if (pageSize !== undefined) {\n untracked(() => this.pageSize = pageSize);\n }\n });\n effect(() => {\n const length = this.lengthInput();\n if (length !== undefined) {\n untracked(() => this.length = length);\n }\n });\n effect(() => {\n const pageSizeOptions = this.pageSizeOptionsInput();\n if (pageSizeOptions !== undefined) {\n untracked(() => this.pageSizeOptions = pageSizeOptions);\n }\n });\n afterNextRender(() => {\n this._initialized.next();\n this._initialized.complete();\n });\n }\n\n ngOnInit() {\n this._isInitialized = true;\n this._updateDisplayedPageSizeOptions();\n }\n\n ngOnDestroy() {\n this._intlChanges?.unsubscribe();\n }\n\n /** Advances to the next page if it exists. */\n nextPage(): void {\n if (this.hasNextPage()) {\n const previousPageIndex = this.pageIndex;\n this._pageIndex++;\n this._emitPageEvent(previousPageIndex);\n }\n }\n\n /** Move back to the previous page if it exists. */\n previousPage(): void {\n if (this.hasPreviousPage()) {\n const previousPageIndex = this.pageIndex;\n this._pageIndex--;\n this._emitPageEvent(previousPageIndex);\n }\n }\n\n /** Move to the first page if not already there. */\n firstPage(): void {\n if (this.hasPreviousPage()) {\n const previousPageIndex = this.pageIndex;\n this._pageIndex = 0;\n this._emitPageEvent(previousPageIndex);\n }\n }\n\n /** Move to the last page if not already there. */\n lastPage(): void {\n if (this.hasNextPage()) {\n const previousPageIndex = this.pageIndex;\n this._pageIndex = this.getNumberOfPages() - 1;\n this._emitPageEvent(previousPageIndex);\n }\n }\n\n /** Whether there is a previous page. */\n hasPreviousPage(): boolean {\n return this.pageIndex >= 1 && this.pageSize !== 0;\n }\n\n /** Whether there is a next page. */\n hasNextPage(): boolean {\n const maxPageIndex = this.getNumberOfPages() - 1;\n return this.pageIndex < maxPageIndex && this.pageSize !== 0;\n }\n\n /** Calculate the number of pages */\n getNumberOfPages(): number {\n if (!this.pageSize) {\n return 0;\n }\n\n return Math.ceil(this.length / this.pageSize);\n }\n\n /**\n * Changes the page size so that the first item displayed on the page will still be\n * displayed using the new page size.\n *\n * For example, if the page size is 10 and on the second page (items indexed 10-19) then\n * switching so that the page size is 5 will set the third page as the current page so\n * that the 10th item will still be displayed.\n */\n _changePageSize(pageSize: number) {\n // Current page needs to be updated to reflect the new page size. Navigate to the page\n // containing the previous page's first item.\n const startIndex = this.pageIndex * this.pageSize;\n const previousPageIndex = this.pageIndex;\n\n this._pageSize = pageSize;\n this._pageIndex = Math.floor(startIndex / pageSize) || 0;\n\n this._emitPageEvent(previousPageIndex);\n }\n\n /** Checks whether the buttons for going forwards should be disabled. */\n _nextButtonsDisabled() {\n return this.disabled() || !this.hasNextPage();\n }\n\n /** Checks whether the buttons for going backwards should be disabled. */\n _previousButtonsDisabled() {\n return this.disabled() || !this.hasPreviousPage();\n }\n\n /**\n * Updates the list of page size options to display to the user. Includes making sure that\n * the page size is an option and that the list is sorted.\n */\n private _updateDisplayedPageSizeOptions() {\n if (!this._isInitialized) {\n return;\n }\n\n // If no page size is provided, use the first page size option or the default page size.\n if (!this.pageSize) {\n this._pageSize =\n this.pageSizeOptions.length !== 0 ? this.pageSizeOptions[0] : DEFAULT_PAGE_SIZE;\n }\n\n this._displayedPageSizeOptions = this.pageSizeOptions.slice();\n\n if (this._displayedPageSizeOptions.indexOf(this.pageSize) === -1) {\n this._displayedPageSizeOptions.push(this.pageSize);\n }\n\n // Sort the numbers using a number-specific sort function.\n this._displayedPageSizeOptions.sort((a, b) => a - b);\n this._changeDetectorRef.markForCheck();\n }\n\n /** Emits a page event and clears the session-cached page index if applicable. */\n private _emitPageEvent(previousPageIndex: number) {\n this.page.emit({\n previousPageIndex,\n pageIndex: this._pageIndex,\n pageSize: this._pageSize,\n length: this.length,\n });\n }\n}\n","<div class=\"ngs-paginator-container\">\n @if (!hidePageSize()) {\n <div class=\"ngs-paginator-page-size\">\n <div class=\"ngs-paginator-page-size-label\">\n {{_intl.itemsPerPageLabel || 'Items per page:'}}\n </div>\n\n <ngs-form-field\n subscriptHiddenIfEmpty\n class=\"ngs-paginator-page-size-select\">\n <ngs-select\n hideCheckIcon\n [value]=\"pageSize\"\n [disabled]=\"disabled()\"\n (selectionChange)=\"_changePageSize($event.value)\">\n @for (pageSizeOption of _displayedPageSizeOptions; track pageSizeOption) {\n <ngs-option [value]=\"pageSizeOption\">\n {{pageSizeOption}}\n </ngs-option>\n }\n </ngs-select>\n </ngs-form-field>\n </div>\n }\n\n <div class=\"ngs-paginator-range-actions\">\n <div class=\"ngs-paginator-range-label\" aria-live=\"polite\">\n {{_intl.getRangeLabel(pageIndex, pageSize, length)}}\n </div>\n\n <div class=\"ngs-paginator-navigation\">\n @if (showFirstLastButtons()) {\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-first\"\n (click)=\"firstPage()\"\n [ngsTooltip]=\"_intl.firstPageLabel || 'First page'\"\n [disabled]=\"_previousButtonsDisabled()\">\n <ngs-icon name=\"fluent:arrow-previous-24-regular\" />\n </button>\n }\n\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-previous\"\n (click)=\"previousPage()\"\n [ngsTooltip]=\"_intl.previousPageLabel || 'Previous page'\"\n [disabled]=\"_previousButtonsDisabled()\">\n <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n </button>\n\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-next\"\n (click)=\"nextPage()\"\n [ngsTooltip]=\"_intl.nextPageLabel || 'Next page'\"\n [disabled]=\"_nextButtonsDisabled()\">\n <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n </button>\n\n @if (showFirstLastButtons()) {\n <button ngsIconButton\n type=\"button\"\n class=\"ngs-paginator-navigation-last\"\n (click)=\"lastPage()\"\n [ngsTooltip]=\"_intl.lastPageLabel || 'Last page'\"\n [disabled]=\"_nextButtonsDisabled()\">\n <ngs-icon name=\"fluent:arrow-next-24-regular\" />\n </button>\n }\n </div>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -89,7 +89,7 @@ class PdfViewerAnnotations {
|
|
|
89
89
|
.some((value) => value.toLocaleLowerCase().includes(query));
|
|
90
90
|
}
|
|
91
91
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PdfViewerAnnotations, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
92
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PdfViewerAnnotations, isStandalone: true, selector: "ngs-pdf-viewer-annotations", inputs: { annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, annotationDefs: { classPropertyName: "annotationDefs", publicName: "annotationDefs", isSignal: true, isRequired: false, transformFunction: null }, annotationTypeProperty: { classPropertyName: "annotationTypeProperty", publicName: "annotationTypeProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", pageSelected: "pageSelected" }, host: { classAttribute: "ngs-pdf-viewer-annotations" }, ngImport: i0, template: "<ngs-panel class=\"pdf-viewer-annotations bg-surface\" aria-label=\"PDF annotations\">\n <ngs-panel-header class=\"p-0\">\n <ngs-toolbar class=\"w-full py-0 pr-2 ps-4\" aria-label=\"PDF annotations toolbar\">\n <ngs-toolbar-title>\n Annotations\n </ngs-toolbar-title>\n <ngs-toolbar-spacer />\n <ngs-toolbar-item>\n <button\n class=\"pdf-viewer-annotations__close\"\n ngsIconButton\n type=\"button\"\n aria-label=\"Close annotations panel\"\n (click)=\"closed.emit()\">\n <ngs-icon name=\"fluent:dismiss-24-regular\" />\n </button>\n </ngs-toolbar-item>\n </ngs-toolbar>\n </ngs-panel-header>\n\n <ngs-panel-subheader autoHeight class=\"px-4 pb-4\">\n <ngs-form-field subscriptHiddenIfEmpty>\n <ngs-icon ngsIconPrefix name=\"fluent:search-24-regular\" />\n <input\n ngsInput\n type=\"text\"\n aria-label=\"Filter annotations\"\n placeholder=\"Filter annotations...\"\n [value]=\"filterQuery()\"\n (input)=\"setFilterQuery($event)\" />\n @if (filterQuery()) {\n <button\n ngsIconButton\n ngsIconButtonSuffix\n type=\"button\"\n aria-label=\"Clear annotation filter\"\n (click)=\"clearFilterQuery()\">\n <ngs-icon name=\"fluent:dismiss-24-regular\" />\n </button>\n }\n </ngs-form-field>\n </ngs-panel-subheader>\n\n <ngs-panel-content>\n <div class=\"flex min-h-full flex-col\">\n <div class=\"flex flex-1 flex-col gap-4 pb-4 px-4\">\n <ng-template #defaultAnnotationTemplate let-annotation let-goToPage=\"goToPage\">\n <article class=\"rounded-2xl border border-border bg-surface p-4 shadow-xs\">\n <header class=\"flex items-start gap-3\">\n <span class=\"flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary-container text-xs font-semibold text-on-primary-container\">\n @if (getAvatarImage(annotation); as avatarImage) {\n <img\n class=\"h-full w-full object-cover\"\n [src]=\"avatarImage\"\n [alt]=\"annotation.author\" />\n } @else {\n {{ getAvatarLabel(annotation) }}\n }\n </span>\n\n <span class=\"min-w-0 flex-1\">\n <span class=\"block truncate text-sm font-semibold text-on-surface\">{{ annotation.author }}</span>\n @if (annotation.time) {\n <span class=\"block truncate text-xs text-on-surface-variant\">{{ annotation.time }}</span>\n }\n </span>\n\n <span class=\"rounded-full bg-surface-container-high px-2 py-1 text-xs font-medium tracking-normal text-on-surface-variant uppercase\">\n {{ getAnnotationTypeLabel(annotation) }}\n </span>\n </header>\n\n <p class=\"mt-3 mb-0 text-base leading-relaxed text-on-surface\">{{ annotation.text }}</p>\n\n <footer class=\"mt-4 flex items-center justify-between gap-2\">\n <button\n ngsButton=\"tonal\"\n type=\"button\"\n (click)=\"goToPage(annotation.pageNumber)\">\n Page {{ annotation.pageNumber }}\n </button>\n\n <button ngsButton=\"text\" type=\"button\">\n {{ getReplyLabel(annotation) }}\n </button>\n </footer>\n </article>\n </ng-template>\n\n @for (annotation of filteredAnnotations(); track annotation.id ?? annotation.pageNumber + '-' + $index) {\n <ng-container\n [ngTemplateOutlet]=\"getAnnotationTemplate(annotation, $index) ?? defaultAnnotationTemplate\"\n [ngTemplateOutletContext]=\"getAnnotationTemplateContext(annotation, $index)\" />\n } @empty {\n <div class=\"p-4 text-center text-sm text-on-surface-variant\">No annotations found.</div>\n }\n </div>\n </div>\n </ngs-panel-content>\n</ngs-panel>\n", styles: [":host{display:block;min-height:0;height:100%}\n"], dependencies: [{ kind: "component", type: Button, selector: " button[ngsButton], button[ngsIconButton], a[ngsButton], a[ngsIconButton] ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: IconButtonSuffix, selector: "[ngsIconButtonSuffix]" }, { kind: "directive", type: IconPrefix, selector: "[ngsIconPrefix]" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: ToolbarItem, selector: "ngs-toolbar-item", inputs: ["hidden"], outputs: ["hiddenChange"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: ToolbarTitle, selector: "ngs-toolbar-title", exportAs: ["ngsToolbarTitle"] }, { kind: "component", type: PanelSubheader, selector: "ngs-panel-subheader", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelSubheader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
92
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PdfViewerAnnotations, isStandalone: true, selector: "ngs-pdf-viewer-annotations", inputs: { annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, annotationDefs: { classPropertyName: "annotationDefs", publicName: "annotationDefs", isSignal: true, isRequired: false, transformFunction: null }, annotationTypeProperty: { classPropertyName: "annotationTypeProperty", publicName: "annotationTypeProperty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", pageSelected: "pageSelected" }, host: { classAttribute: "ngs-pdf-viewer-annotations" }, ngImport: i0, template: "<ngs-panel class=\"pdf-viewer-annotations bg-surface\" aria-label=\"PDF annotations\">\n <ngs-panel-header class=\"p-0\">\n <ngs-toolbar class=\"w-full py-0 pr-2 ps-4\" aria-label=\"PDF annotations toolbar\">\n <ngs-toolbar-title>\n Annotations\n </ngs-toolbar-title>\n <ngs-toolbar-spacer />\n <ngs-toolbar-item>\n <button\n class=\"pdf-viewer-annotations__close\"\n ngsIconButton\n type=\"button\"\n aria-label=\"Close annotations panel\"\n (click)=\"closed.emit()\">\n <ngs-icon name=\"fluent:dismiss-24-regular\" />\n </button>\n </ngs-toolbar-item>\n </ngs-toolbar>\n </ngs-panel-header>\n\n <ngs-panel-subheader autoHeight class=\"px-4 pb-4\">\n <ngs-form-field subscriptHiddenIfEmpty>\n <ngs-icon ngsIconPrefix name=\"fluent:search-24-regular\" />\n <input\n ngsInput\n type=\"text\"\n aria-label=\"Filter annotations\"\n placeholder=\"Filter annotations...\"\n [value]=\"filterQuery()\"\n (input)=\"setFilterQuery($event)\" />\n @if (filterQuery()) {\n <button\n ngsIconButton\n ngsIconButtonSuffix\n type=\"button\"\n aria-label=\"Clear annotation filter\"\n (click)=\"clearFilterQuery()\">\n <ngs-icon name=\"fluent:dismiss-24-regular\" />\n </button>\n }\n </ngs-form-field>\n </ngs-panel-subheader>\n\n <ngs-panel-content>\n <div class=\"flex min-h-full flex-col\">\n <div class=\"flex flex-1 flex-col gap-4 pb-4 px-4\">\n <ng-template #defaultAnnotationTemplate let-annotation let-goToPage=\"goToPage\">\n <article class=\"rounded-2xl border border-border bg-surface p-4 shadow-xs\">\n <header class=\"flex items-start gap-3\">\n <span class=\"flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary-container text-xs font-semibold text-on-primary-container\">\n @if (getAvatarImage(annotation); as avatarImage) {\n <img\n class=\"h-full w-full object-cover\"\n [src]=\"avatarImage\"\n [alt]=\"annotation.author\" />\n } @else {\n {{ getAvatarLabel(annotation) }}\n }\n </span>\n\n <span class=\"min-w-0 flex-1\">\n <span class=\"block truncate text-sm font-semibold text-on-surface\">{{ annotation.author }}</span>\n @if (annotation.time) {\n <span class=\"block truncate text-xs text-on-surface-variant\">{{ annotation.time }}</span>\n }\n </span>\n\n <span class=\"rounded-full bg-surface-container-high px-2 py-1 text-xs font-medium tracking-normal text-on-surface-variant uppercase\">\n {{ getAnnotationTypeLabel(annotation) }}\n </span>\n </header>\n\n <p class=\"mt-3 mb-0 text-base leading-relaxed text-on-surface\">{{ annotation.text }}</p>\n\n <footer class=\"mt-4 flex items-center justify-between gap-2\">\n <button\n ngsButton=\"tonal\"\n type=\"button\"\n (click)=\"goToPage(annotation.pageNumber)\">\n Page {{ annotation.pageNumber }}\n </button>\n\n <button ngsButton=\"text\" type=\"button\">\n {{ getReplyLabel(annotation) }}\n </button>\n </footer>\n </article>\n </ng-template>\n\n @for (annotation of filteredAnnotations(); track annotation.id ?? annotation.pageNumber + '-' + $index) {\n <ng-container\n [ngTemplateOutlet]=\"getAnnotationTemplate(annotation, $index) ?? defaultAnnotationTemplate\"\n [ngTemplateOutletContext]=\"getAnnotationTemplateContext(annotation, $index)\" />\n } @empty {\n <div class=\"p-4 text-center text-sm text-on-surface-variant\">No annotations found.</div>\n }\n </div>\n </div>\n </ngs-panel-content>\n</ngs-panel>\n", styles: [":host{display:block;min-height:0;height:100%}\n"], dependencies: [{ kind: "component", type: Button, selector: " button[ngsButton], button[ngsIconButton], a[ngsButton], a[ngsIconButton] ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: IconButtonSuffix, selector: "[ngsIconButtonSuffix]" }, { kind: "directive", type: IconPrefix, selector: "[ngsIconPrefix]" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: ToolbarItem, selector: "ngs-toolbar-item", inputs: ["hidden"], outputs: ["hiddenChange"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: ToolbarTitle, selector: "ngs-toolbar-title", inputs: ["appearance"], exportAs: ["ngsToolbarTitle"] }, { kind: "component", type: PanelSubheader, selector: "ngs-panel-subheader", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelSubheader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
93
93
|
}
|
|
94
94
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PdfViewerAnnotations, decorators: [{
|
|
95
95
|
type: Component,
|
|
@@ -296,7 +296,7 @@ class PdfViewerSearch {
|
|
|
296
296
|
return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
297
297
|
}
|
|
298
298
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PdfViewerSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
299
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PdfViewerSearch, isStandalone: true, selector: "ngs-pdf-viewer-search", inputs: { results: { classPropertyName: "results", publicName: "results", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", resultSelected: "resultSelected", searchChanged: "searchChanged" }, host: { classAttribute: "ngs-pdf-viewer-search" }, ngImport: i0, template: "<ngs-panel class=\"pdf-viewer-search\" aria-label=\"PDF search\">\n <ngs-panel-header class=\"ps-4 pe-3\">\n <ngs-toolbar>\n <ngs-toolbar-title>Search</ngs-toolbar-title>\n <ngs-toolbar-spacer />\n <button ngsIconButton type=\"button\" aria-label=\"Close search panel\" (click)=\"closed.emit()\">\n <ngs-icon name=\"fluent:dismiss-24-regular\" />\n </button>\n </ngs-toolbar>\n </ngs-panel-header>\n\n <ngs-panel-subheader autoHeight class=\"px-4 pb-4\">\n <ngs-form-field class=\"pdf-viewer-search__field\" subscriptHiddenIfEmpty>\n <ngs-icon name=\"fluent:search-24-regular\" ngsIconPrefix />\n <input\n ngsInput\n type=\"text\"\n aria-label=\"Search PDF\"\n placeholder=\"Search\"\n [value]=\"queryValue()\"\n (input)=\"setQuery($event)\" />\n @if (queryValue()) {\n <button ngsIconButtonSuffix ngsIconButton type=\"button\" aria-label=\"Clear search\" (click)=\"clearQuery()\">\n <ngs-icon name=\"fluent:dismiss-24-regular\" />\n </button>\n }\n </ngs-form-field>\n\n <div class=\"pdf-viewer-search__options mt-4 grid gap-3 text-base text-on-surface\">\n <ngs-checkbox [checked]=\"caseSensitive()\" (checkedChange)=\"setCaseSensitive($event)\">\n Case sensitive\n </ngs-checkbox>\n <ngs-checkbox [checked]=\"wholeWord()\" (checkedChange)=\"setWholeWord($event)\">\n Whole word\n </ngs-checkbox>\n </div>\n\n @if (hasQuery()) {\n <div class=\"pdf-viewer-search__summary mt-4 flex items-center justify-between gap-4 text-base text-on-surface-variant\">\n <span>{{ resultCountLabel() }}</span>\n <div class=\"pdf-viewer-search__nav flex items-center gap-3\">\n <button\n class=\"text-on-surface\"\n ngsIconButton\n type=\"button\"\n aria-label=\"Previous search result\"\n [disabled]=\"results().length === 0\"\n (click)=\"previousResult()\">\n <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n </button>\n <button\n class=\"text-on-surface\"\n ngsIconButton\n type=\"button\"\n aria-label=\"Next search result\"\n [disabled]=\"results().length === 0\"\n (click)=\"nextResult()\">\n <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n </button>\n </div>\n </div>\n }\n </ngs-panel-subheader>\n\n <ngs-panel-content>\n <div class=\"pdf-viewer-search__content flex min-h-full flex-col gap-4 px-4 pb-4\">\n @if (hasQuery()) {\n <div class=\"pdf-viewer-search__results grid min-h-0 gap-4\">\n @for (group of visibleResultGroups(); track group.pageNumber) {\n <section class=\"pdf-viewer-search__page-group grid gap-3 bg-surface\">\n <h3 class=\"m-0 text-base font-medium text-on-surface-variant\">Page {{ group.pageNumber }}</h3>\n @for (item of group.results; track item.result.id ?? item.result.pageNumber + '-' + item.index) {\n <button\n class=\"pdf-viewer-search__result w-full cursor-pointer rounded-2xl border border-border p-4 text-left text-base leading-snug text-on-surface\"\n type=\"button\"\n [class.bg-primary-container]=\"item.index === activeResultIndex()\"\n [class.bg-surface]=\"item.index !== activeResultIndex()\"\n (click)=\"selectResult(item.result, item.index)\">\n @for (part of resultParts(item.result); track part.text + '-' + $index) {\n <span\n [class.font-bold]=\"part.highlight\"\n [class.text-primary]=\"part.highlight\">{{ part.text }}</span>\n }\n </button>\n }\n </section>\n } @empty {\n <div class=\"pdf-viewer-search__empty p-4 text-center text-sm text-on-surface-variant\">No results.</div>\n }\n </div>\n }\n </div>\n </ngs-panel-content>\n</ngs-panel>\n", styles: [":host{display:block;min-height:0;height:100%}\n"], dependencies: [{ kind: "component", type: Button, selector: " button[ngsButton], button[ngsIconButton], a[ngsButton], a[ngsIconButton] ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Checkbox, selector: "ngs-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["checkedChange", "disabledChange", "indeterminateChange", "change"], exportAs: ["ngsCheckbox"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: IconButtonSuffix, selector: "[ngsIconButtonSuffix]" }, { kind: "directive", type: IconPrefix, selector: "[ngsIconPrefix]" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: ToolbarTitle, selector: "ngs-toolbar-title", exportAs: ["ngsToolbarTitle"] }, { kind: "component", type: PanelSubheader, selector: "ngs-panel-subheader", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelSubheader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
299
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PdfViewerSearch, isStandalone: true, selector: "ngs-pdf-viewer-search", inputs: { results: { classPropertyName: "results", publicName: "results", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", resultSelected: "resultSelected", searchChanged: "searchChanged" }, host: { classAttribute: "ngs-pdf-viewer-search" }, ngImport: i0, template: "<ngs-panel class=\"pdf-viewer-search\" aria-label=\"PDF search\">\n <ngs-panel-header class=\"ps-4 pe-3\">\n <ngs-toolbar>\n <ngs-toolbar-title>Search</ngs-toolbar-title>\n <ngs-toolbar-spacer />\n <button ngsIconButton type=\"button\" aria-label=\"Close search panel\" (click)=\"closed.emit()\">\n <ngs-icon name=\"fluent:dismiss-24-regular\" />\n </button>\n </ngs-toolbar>\n </ngs-panel-header>\n\n <ngs-panel-subheader autoHeight class=\"px-4 pb-4\">\n <ngs-form-field class=\"pdf-viewer-search__field\" subscriptHiddenIfEmpty>\n <ngs-icon name=\"fluent:search-24-regular\" ngsIconPrefix />\n <input\n ngsInput\n type=\"text\"\n aria-label=\"Search PDF\"\n placeholder=\"Search\"\n [value]=\"queryValue()\"\n (input)=\"setQuery($event)\" />\n @if (queryValue()) {\n <button ngsIconButtonSuffix ngsIconButton type=\"button\" aria-label=\"Clear search\" (click)=\"clearQuery()\">\n <ngs-icon name=\"fluent:dismiss-24-regular\" />\n </button>\n }\n </ngs-form-field>\n\n <div class=\"pdf-viewer-search__options mt-4 grid gap-3 text-base text-on-surface\">\n <ngs-checkbox [checked]=\"caseSensitive()\" (checkedChange)=\"setCaseSensitive($event)\">\n Case sensitive\n </ngs-checkbox>\n <ngs-checkbox [checked]=\"wholeWord()\" (checkedChange)=\"setWholeWord($event)\">\n Whole word\n </ngs-checkbox>\n </div>\n\n @if (hasQuery()) {\n <div class=\"pdf-viewer-search__summary mt-4 flex items-center justify-between gap-4 text-base text-on-surface-variant\">\n <span>{{ resultCountLabel() }}</span>\n <div class=\"pdf-viewer-search__nav flex items-center gap-3\">\n <button\n class=\"text-on-surface\"\n ngsIconButton\n type=\"button\"\n aria-label=\"Previous search result\"\n [disabled]=\"results().length === 0\"\n (click)=\"previousResult()\">\n <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n </button>\n <button\n class=\"text-on-surface\"\n ngsIconButton\n type=\"button\"\n aria-label=\"Next search result\"\n [disabled]=\"results().length === 0\"\n (click)=\"nextResult()\">\n <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n </button>\n </div>\n </div>\n }\n </ngs-panel-subheader>\n\n <ngs-panel-content>\n <div class=\"pdf-viewer-search__content flex min-h-full flex-col gap-4 px-4 pb-4\">\n @if (hasQuery()) {\n <div class=\"pdf-viewer-search__results grid min-h-0 gap-4\">\n @for (group of visibleResultGroups(); track group.pageNumber) {\n <section class=\"pdf-viewer-search__page-group grid gap-3 bg-surface\">\n <h3 class=\"m-0 text-base font-medium text-on-surface-variant\">Page {{ group.pageNumber }}</h3>\n @for (item of group.results; track item.result.id ?? item.result.pageNumber + '-' + item.index) {\n <button\n class=\"pdf-viewer-search__result w-full cursor-pointer rounded-2xl border border-border p-4 text-left text-base leading-snug text-on-surface\"\n type=\"button\"\n [class.bg-primary-container]=\"item.index === activeResultIndex()\"\n [class.bg-surface]=\"item.index !== activeResultIndex()\"\n (click)=\"selectResult(item.result, item.index)\">\n @for (part of resultParts(item.result); track part.text + '-' + $index) {\n <span\n [class.font-bold]=\"part.highlight\"\n [class.text-primary]=\"part.highlight\">{{ part.text }}</span>\n }\n </button>\n }\n </section>\n } @empty {\n <div class=\"pdf-viewer-search__empty p-4 text-center text-sm text-on-surface-variant\">No results.</div>\n }\n </div>\n }\n </div>\n </ngs-panel-content>\n</ngs-panel>\n", styles: [":host{display:block;min-height:0;height:100%}\n"], dependencies: [{ kind: "component", type: Button, selector: " button[ngsButton], button[ngsIconButton], a[ngsButton], a[ngsIconButton] ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Checkbox, selector: "ngs-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["checkedChange", "disabledChange", "indeterminateChange", "change"], exportAs: ["ngsCheckbox"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty", "sameHeightAsButton"], exportAs: ["ngsFormField"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: IconButtonSuffix, selector: "[ngsIconButtonSuffix]" }, { kind: "directive", type: IconPrefix, selector: "[ngsIconPrefix]" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: ToolbarTitle, selector: "ngs-toolbar-title", inputs: ["appearance"], exportAs: ["ngsToolbarTitle"] }, { kind: "component", type: PanelSubheader, selector: "ngs-panel-subheader", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelSubheader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
300
300
|
}
|
|
301
301
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PdfViewerSearch, decorators: [{
|
|
302
302
|
type: Component,
|
|
@@ -1963,7 +1963,7 @@ class PdfViewer {
|
|
|
1963
1963
|
this.programmaticScrollTargetPage = null;
|
|
1964
1964
|
}
|
|
1965
1965
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PdfViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1966
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PdfViewer, isStandalone: true, selector: "ngs-pdf-viewer", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, documentName: { classPropertyName: "documentName", publicName: "documentName", isSignal: true, isRequired: false, transformFunction: null }, wasmUrl: { classPropertyName: "wasmUrl", publicName: "wasmUrl", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, minScale: { classPropertyName: "minScale", publicName: "minScale", isSignal: true, isRequired: false, transformFunction: null }, maxScale: { classPropertyName: "maxScale", publicName: "maxScale", isSignal: true, isRequired: false, transformFunction: null }, zoomStep: { classPropertyName: "zoomStep", publicName: "zoomStep", isSignal: true, isRequired: false, transformFunction: null }, maxRenderPixels: { classPropertyName: "maxRenderPixels", publicName: "maxRenderPixels", isSignal: true, isRequired: false, transformFunction: null }, maxRenderDimension: { classPropertyName: "maxRenderDimension", publicName: "maxRenderDimension", isSignal: true, isRequired: false, transformFunction: null }, renderAll: { classPropertyName: "renderAll", publicName: "renderAll", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showPageList: { classPropertyName: "showPageList", publicName: "showPageList", isSignal: true, isRequired: false, transformFunction: null }, showSearchPanel: { classPropertyName: "showSearchPanel", publicName: "showSearchPanel", isSignal: true, isRequired: false, transformFunction: null }, showAnnotationsPanel: { classPropertyName: "showAnnotationsPanel", publicName: "showAnnotationsPanel", isSignal: true, isRequired: false, transformFunction: null }, annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, annotationsDataSource: { classPropertyName: "annotationsDataSource", publicName: "annotationsDataSource", isSignal: true, isRequired: false, transformFunction: null }, annotationTypeProperty: { classPropertyName: "annotationTypeProperty", publicName: "annotationTypeProperty", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, withAnnotations: { classPropertyName: "withAnnotations", publicName: "withAnnotations", isSignal: true, isRequired: false, transformFunction: null }, withForms: { classPropertyName: "withForms", publicName: "withForms", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", pageChanged: "pageChanged", pageRendered: "pageRendered", error: "error" }, host: { properties: { "class.is-loading": "isLoading()", "class.has-toolbar": "showToolbar()", "class.has-page-list": "isPageListVisible()", "class.has-error": "errorState()" }, classAttribute: "ngs-pdf-viewer not-prose" }, queries: [{ propertyName: "annotationDefs", predicate: PdfViewerAnnotationDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewerBody", first: true, predicate: ["viewerBody"], descendants: true, isSignal: true }, { propertyName: "pageList", first: true, predicate: ["pageList"], descendants: true, isSignal: true }], exportAs: ["ngsPdfViewer"], ngImport: i0, template: "<ngs-panel class=\"pdf-viewer-panel h-full overflow-hidden rounded-lg border border-border bg-surface-container-low text-on-surface\">\n @if (showToolbar()) {\n <ngs-panel-header class=\"min-w-0 border-b border-border bg-surface\" flex>\n <ngs-toolbar class=\"pdf-viewer-toolbar flex h-14 w-full min-w-0 items-center gap-4 overflow-visible px-2 text-on-surface-variant\" aria-label=\"PDF viewer controls\">\n <ngs-toolbar-item class=\"pdf-viewer-toolbar__start flex min-w-0 flex-none items-center gap-2\">\n @if (showPageList()) {\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n [attr.aria-label]=\"pageListVisible() ? 'Hide pages panel' : 'Show pages panel'\"\n [attr.aria-pressed]=\"pageListVisible()\"\n (click)=\"togglePageList()\">\n <ngs-icon\n class=\"text-2xl\"\n [name]=\"pageListVisible() ? 'fluent:panel-left-contract-24-regular' : 'fluent:panel-left-expand-24-regular'\" />\n </button>\n }\n <ngs-divider vertical fixedHeight />\n </ngs-toolbar-item>\n <ngs-toolbar-title class=\"min-w-0 flex-1 truncate text-sm! max-w-[20%] font-semibold! text-on-surface-variant\" [title]=\"displayDocumentName()\">\n {{ displayDocumentName() }}\n </ngs-toolbar-title>\n\n <ngs-toolbar-item class=\"pdf-viewer-toolbar__center flex flex-none items-center gap-3\">\n <div class=\"pdf-viewer-toolbar__cluster flex min-w-0 items-center gap-2\" aria-label=\"Zoom controls\">\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n aria-label=\"Zoom out\"\n [disabled]=\"!canZoomOut()\"\n (click)=\"zoomOut()\">\n <ngs-icon class=\"text-2xl\" name=\"fluent:zoom-out-24-regular\" />\n </button>\n <button\n class=\"pdf-viewer-toolbar__zoom min-w-12 cursor-pointer border-0 bg-transparent p-0 text-center text-sm text-on-surface hover:text-primary\"\n type=\"button\"\n aria-label=\"Zoom presets\"\n [ngsMenuTriggerFor]=\"zoomMenu\">\n {{ zoomLabel() }}\n </button>\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n aria-label=\"Zoom in\"\n [disabled]=\"!canZoomIn()\"\n (click)=\"zoomIn()\">\n <ngs-icon class=\"text-2xl\" name=\"fluent:zoom-in-24-regular\" />\n </button>\n </div>\n\n <ngs-divider vertical fixedHeight />\n\n <div class=\"pdf-viewer-toolbar__cluster flex min-w-0 items-center gap-2\" aria-label=\"Page navigation\">\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n aria-label=\"Previous page\"\n [disabled]=\"!canGoPrevious()\"\n (click)=\"previousPage()\">\n <ngs-icon class=\"text-2xl\" name=\"fluent:chevron-left-24-regular\" />\n </button>\n <span class=\"pdf-viewer-toolbar__page inline-flex h-9 min-w-16 items-center justify-center gap-2 rounded bg-surface-container-low text-sm font-bold text-on-surface\">\n <span>{{ activePage() }}</span>\n <span>/</span>\n <span>{{ pageCount() || 1 }}</span>\n </span>\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n aria-label=\"Next page\"\n [disabled]=\"!canGoNext()\"\n (click)=\"nextPage()\">\n <ngs-icon class=\"text-2xl\" name=\"fluent:chevron-right-24-regular\" />\n </button>\n </div>\n </ngs-toolbar-item>\n\n <ngs-toolbar-spacer />\n\n <ngs-toolbar-item class=\"pdf-viewer-toolbar__end flex min-w-0 flex-1 items-center justify-end gap-2\" aria-label=\"PDF tools\">\n @if (showSearchPanel()) {\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n [attr.aria-pressed]=\"isSearchPanelVisible()\"\n aria-label=\"Search\"\n [disabled]=\"!asidePanelInteractive()\"\n (click)=\"toggleSearchPanel()\">\n <ngs-icon class=\"text-2xl\" name=\"fluent:search-24-regular\" />\n </button>\n }\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n aria-label=\"PDF viewer settings\"\n [ngsMenuTriggerFor]=\"settingsMenu\">\n <ngs-icon class=\"text-2xl\" name=\"fluent:settings-24-regular\" />\n </button>\n @if (showAnnotationsPanel()) {\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n [attr.aria-pressed]=\"isAnnotationsPanelVisible()\"\n aria-label=\"Toggle annotations panel\"\n [disabled]=\"!asidePanelInteractive()\"\n (click)=\"toggleAnnotationsPanel()\">\n <ngs-icon class=\"text-2xl\" name=\"fluent:text-bullet-list-square-edit-24-regular\" />\n </button>\n }\n </ngs-toolbar-item>\n </ngs-toolbar>\n\n <ngs-menu #zoomMenu=\"ngsMenu\">\n @for (zoomPreset of zoomPresets; track zoomPreset) {\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"isZoomPresetSelected(zoomPreset)\"\n (click)=\"setZoomPreset(zoomPreset)\">\n <span>{{ zoomPreset * 100 }}%</span>\n </button>\n }\n\n <ngs-menu-divider />\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"zoomMode() === 'fit-page'\"\n (click)=\"fitToPage()\">\n <ngs-icon name=\"fluent:resize-large-24-regular\" />\n <span>Fit to Page</span>\n </button>\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"zoomMode() === 'fit-width'\"\n (click)=\"fitToWidth()\">\n <ngs-icon name=\"fluent:resize-24-regular\" />\n <span>Fit to Width</span>\n </button>\n </ngs-menu>\n\n <ngs-menu #settingsMenu=\"ngsMenu\" xPosition=\"before\">\n <ngs-menu-heading>SPREAD MODE</ngs-menu-heading>\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"spreadMode() === 'single'\"\n (click)=\"setSpreadMode('single')\">\n <ngs-icon name=\"fluent:document-24-regular\" />\n <span>Single Page</span>\n </button>\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"spreadMode() === 'two-odd'\"\n (click)=\"setSpreadMode('two-odd')\">\n <ngs-icon name=\"fluent:book-open-24-regular\" />\n <span>Two Page (Odd)</span>\n </button>\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"spreadMode() === 'two-even'\"\n (click)=\"setSpreadMode('two-even')\">\n <ngs-icon name=\"fluent:document-text-24-regular\" />\n <span>Two Page (Even)</span>\n </button>\n\n <ngs-menu-divider />\n <ngs-menu-heading>SCROLL LAYOUT</ngs-menu-heading>\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"scrollLayout() === 'vertical'\"\n (click)=\"setScrollLayout('vertical')\">\n <ngs-icon name=\"fluent:arrow-sort-24-regular\" />\n <span>Vertical</span>\n </button>\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"scrollLayout() === 'horizontal'\"\n (click)=\"setScrollLayout('horizontal')\">\n <ngs-icon name=\"fluent:arrow-swap-24-regular\" />\n <span>Horizontal</span>\n </button>\n\n <ngs-menu-divider />\n <ngs-menu-heading>PAGE ROTATION</ngs-menu-heading>\n <button ngs-menu-item type=\"button\" (click)=\"rotateClockwise()\">\n <ngs-icon name=\"fluent:arrow-clockwise-24-regular\" />\n <span>Rotate Clockwise</span>\n </button>\n <button ngs-menu-item type=\"button\" (click)=\"rotateCounterClockwise()\">\n <ngs-icon name=\"fluent:arrow-counterclockwise-24-regular\" />\n <span>Rotate Counter-Clockwise</span>\n </button>\n\n <ngs-menu-divider />\n <button ngs-menu-item type=\"button\" (click)=\"toggleFullscreen()\">\n <ngs-icon name=\"fluent:arrow-maximize-24-regular\" />\n <span>Fullscreen</span>\n </button>\n </ngs-menu>\n </ngs-panel-header>\n }\n\n @if (isPageListVisible()) {\n <ngs-panel-sidebar class=\"w-[var(--ngs-pdf-viewer-sidebar-width)] min-w-[var(--ngs-pdf-viewer-sidebar-width)] border-r border-border bg-surface\">\n <div class=\"pdf-viewer-sidebar flex h-full min-h-0 flex-col gap-2 overflow-auto p-3\" #pageList>\n <div class=\"pdf-viewer-sidebar__title px-1 text-xs font-semibold text-on-surface-variant\">Pages</div>\n <div class=\"pdf-viewer-sidebar__pages flex min-h-0 flex-col gap-2\" aria-label=\"PDF pages\">\n @for (pageItem of pageItems(); track pageItem.pageNumber) {\n <button\n class=\"pdf-viewer-sidebar__page group flex w-full cursor-pointer flex-col items-stretch gap-1 rounded border border-transparent bg-transparent p-1 text-left text-on-surface-variant focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary [&.is-active]:text-on-surface\"\n type=\"button\"\n [class.is-active]=\"pageItem.pageNumber === activePage()\"\n [attr.aria-current]=\"pageItem.pageNumber === activePage() ? 'page' : null\"\n [attr.aria-label]=\"'Open page ' + pageItem.pageNumber\"\n [attr.data-ngs-pdf-page-button]=\"pageItem.pageNumber\"\n (click)=\"setPage(pageItem.pageNumber)\">\n <span class=\"pdf-viewer-sidebar__thumb flex aspect-[3/4] w-full items-center justify-center overflow-hidden rounded border border-border bg-surface shadow-xs group-hover:border-border\" aria-hidden=\"true\">\n @if (pageItem.thumbnail; as thumbnail) {\n <img\n class=\"block h-full w-full select-none object-contain\"\n [src]=\"thumbnail.url\"\n [attr.width]=\"thumbnail.width\"\n [attr.height]=\"thumbnail.height\"\n alt=\"\"\n draggable=\"false\" />\n } @else {\n <ngs-image-placeholder class=\"h-full w-full\" />\n }\n </span>\n <span class=\"pdf-viewer-sidebar__label block truncate text-center text-xs font-medium leading-tight\">Page {{ pageItem.pageNumber }}</span>\n </button>\n }\n </div>\n </div>\n </ngs-panel-sidebar>\n }\n\n <ngs-panel-content class=\"min-h-0 min-w-0 overflow-hidden bg-surface-container-low\">\n <div class=\"pdf-viewer-body absolute inset-0 overflow-auto\" #viewerBody (scroll)=\"onViewerScroll()\" (wheel)=\"onViewerWheel($event)\">\n <ngs-block-loader [loading]=\"isLoading()\">Loading PDF...</ngs-block-loader>\n @if (errorState()) {\n <div class=\"pdf-viewer-state pdf-viewer-state--error absolute inset-0 flex flex-col items-center justify-center gap-3 p-6 text-center text-danger\">\n <ngs-icon class=\"text-3xl\" name=\"fluent:error-circle-24-regular\" />\n <span>PDF could not be loaded.</span>\n </div>\n } @else if (!src()) {\n <div class=\"pdf-viewer-state absolute inset-0 flex flex-col items-center justify-center gap-3 p-6 text-center text-on-surface-variant\">\n <ngs-icon class=\"text-3xl\" name=\"fluent:document-pdf-24-regular\" />\n <span>No PDF selected.</span>\n </div>\n } @else {\n <div\n class=\"pdf-viewer-pages\"\n [class.is-horizontal]=\"scrollLayout() === 'horizontal'\"\n [class.is-vertical]=\"scrollLayout() === 'vertical'\"\n [class.is-spread]=\"spreadMode() !== 'single'\">\n @for (spread of pageSpreads(); track spread.id) {\n <div class=\"pdf-viewer-spread\" [attr.data-ngs-pdf-spread]=\"spread.id\">\n @if (spread.leadingPlaceholder) {\n @if (spread.leadingPlaceholderPage; as placeholderPage) {\n <div\n class=\"pdf-viewer-spread__placeholder\"\n [style.width.px]=\"placeholderPage.width\"\n [style.height.px]=\"placeholderPage.height\"\n aria-hidden=\"true\"></div>\n }\n }\n @for (pdfPage of spread.pages; track pdfPage.pageNumber) {\n <article\n class=\"pdf-viewer-page w-max max-w-none\"\n [attr.aria-label]=\"'PDF page ' + pdfPage.pageNumber\"\n [attr.data-ngs-pdf-page]=\"pdfPage.pageNumber\">\n <div\n class=\"pdf-viewer-page__surface relative cursor-text overflow-hidden rounded bg-surface shadow-md select-none touch-none\"\n [style.width.px]=\"pdfPage.width\"\n [style.height.px]=\"pdfPage.height\"\n (pointerdown)=\"startTextSelection($event, pdfPage)\"\n (pointermove)=\"updateTextSelection($event, pdfPage)\"\n (pointerup)=\"finishTextSelection($event, pdfPage)\"\n (pointercancel)=\"cancelTextSelection()\"\n (mousedown)=\"startTextSelection($event, pdfPage)\"\n (mousemove)=\"updateTextSelection($event, pdfPage)\"\n (mouseup)=\"finishTextSelection($event, pdfPage)\">\n @if (pdfPage.url; as pageUrl) {\n <img\n class=\"block h-full w-full max-w-none select-none pointer-events-none\"\n [src]=\"pageUrl\"\n [alt]=\"'PDF page ' + pdfPage.pageNumber\"\n [attr.width]=\"pdfPage.width\"\n [attr.height]=\"pdfPage.height\"\n draggable=\"false\" />\n } @else {\n <div class=\"pdf-viewer-page__placeholder pointer-events-none absolute inset-0 flex items-center justify-center bg-surface\" aria-hidden=\"true\">\n @if (pdfPage.isRendering) {\n <span class=\"size-8 animate-spin rounded-full border-2 border-border border-t-primary\"></span>\n }\n </div>\n }\n @if (selectionRectsForPage(pdfPage.pageNumber); as selectionRects) {\n @if (selectionRects.length > 0) {\n <div class=\"pdf-viewer-page__selection-layer pointer-events-none absolute inset-0 z-[1] isolate overflow-hidden mix-blend-multiply\" aria-hidden=\"true\">\n @for (selectionRect of selectionRects; track selectionRect.left + '-' + selectionRect.top + '-' + $index) {\n <div\n class=\"pdf-viewer-page__selection-rect pointer-events-none absolute bg-primary/30\"\n [style.left.px]=\"selectionRect.left\"\n [style.top.px]=\"selectionRect.top\"\n [style.width.px]=\"selectionRect.width\"\n [style.height.px]=\"selectionRect.height\"></div>\n }\n </div>\n }\n }\n </div>\n </article>\n }\n </div>\n }\n </div>\n }\n </div>\n </ngs-panel-content>\n\n @if (isSearchPanelVisible() || isAnnotationsPanelVisible()) {\n <ngs-panel-aside class=\"w-[var(--ngs-pdf-viewer-aside-width)] min-w-[var(--ngs-pdf-viewer-aside-width)] border-l border-border bg-surface\">\n @if (isSearchPanelVisible()) {\n <ngs-pdf-viewer-search\n [query]=\"activeSearchQuery()\"\n [results]=\"pdfSearchResults()\"\n (closed)=\"closeAsidePanel()\"\n (searchChanged)=\"updatePdfSearch($event)\"\n (resultSelected)=\"selectSearchResult($event)\" />\n } @else {\n <ngs-pdf-viewer-annotations\n [annotations]=\"annotationItems()\"\n [annotationDefs]=\"annotationDefs()\"\n [annotationTypeProperty]=\"annotationTypeProperty()\"\n (closed)=\"closeAsidePanel()\"\n (pageSelected)=\"setPage($event)\" />\n }\n </ngs-panel-aside>\n }\n</ngs-panel>\n", styles: [":host{--ngs-pdf-viewer-height: 720px;--ngs-pdf-viewer-min-height: 720px;--ngs-pdf-viewer-sidebar-width: 152px;--ngs-pdf-viewer-aside-width: 360px;--ngs-pdf-viewer-page-gap: 24px;--ngs-pdf-viewer-spread-gap: 16px;--ngs-pdf-viewer-page-padding: 24px;display:block;height:var(--ngs-pdf-viewer-height);min-height:var(--ngs-pdf-viewer-min-height);overflow:hidden}:host .pdf-viewer-pages{box-sizing:border-box;display:grid;gap:var(--ngs-pdf-viewer-page-gap);min-height:100%;min-width:100%;padding:var(--ngs-pdf-viewer-page-padding)}:host .pdf-viewer-pages.is-vertical{align-content:start;grid-auto-flow:row;grid-auto-rows:max-content;justify-items:center}:host .pdf-viewer-pages.is-horizontal{align-content:center;align-items:center;grid-auto-columns:max-content;grid-auto-flow:column;justify-content:start;width:max-content}:host .pdf-viewer-spread{align-items:start;display:grid;gap:var(--ngs-pdf-viewer-spread-gap);grid-auto-columns:max-content;grid-auto-flow:column;justify-content:center}:host .pdf-viewer-spread__placeholder{pointer-events:none;visibility:hidden}:host .pdf-viewer-toolbar{position:relative}:host .pdf-viewer-toolbar__center{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}:host .pdf-viewer-toolbar__start,:host .pdf-viewer-toolbar__end{position:relative;z-index:2}:host .pdf-viewer-sidebar__page.is-active .pdf-viewer-sidebar__thumb{outline:2px solid var(--ngs-color-primary)}:host .pdf-viewer-page__selection-layer{forced-color-adjust:none}\n"], dependencies: [{ kind: "component", type: BlockLoader, selector: "ngs-block-loader", inputs: ["loading", "spinnerDiameter", "spinnerStrokeWidth"], exportAs: ["ngsBlockLoader"] }, { kind: "component", type: Button, selector: " button[ngsButton], button[ngsIconButton], a[ngsButton], a[ngsIconButton] ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Divider, selector: "ngs-divider", inputs: ["vertical", "inset", "fixedHeight"], exportAs: ["ngsDivider"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: ImagePlaceholder, selector: "ngs-image-placeholder", exportAs: ["ngsImagePlaceholder"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuDivider, selector: "ngs-menu-divider" }, { kind: "component", type: MenuHeading, selector: "ngs-menu-heading" }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelAside, selector: "ngs-panel-aside" }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: PanelSidebar, selector: "ngs-panel-sidebar" }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: ToolbarItem, selector: "ngs-toolbar-item", inputs: ["hidden"], outputs: ["hiddenChange"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: ToolbarTitle, selector: "ngs-toolbar-title", exportAs: ["ngsToolbarTitle"] }, { kind: "component", type: PdfViewerAnnotations, selector: "ngs-pdf-viewer-annotations", inputs: ["annotations", "annotationDefs", "annotationTypeProperty"], outputs: ["closed", "pageSelected"] }, { kind: "component", type: PdfViewerSearch, selector: "ngs-pdf-viewer-search", inputs: ["results", "query"], outputs: ["closed", "resultSelected", "searchChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1966
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PdfViewer, isStandalone: true, selector: "ngs-pdf-viewer", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, documentName: { classPropertyName: "documentName", publicName: "documentName", isSignal: true, isRequired: false, transformFunction: null }, wasmUrl: { classPropertyName: "wasmUrl", publicName: "wasmUrl", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, minScale: { classPropertyName: "minScale", publicName: "minScale", isSignal: true, isRequired: false, transformFunction: null }, maxScale: { classPropertyName: "maxScale", publicName: "maxScale", isSignal: true, isRequired: false, transformFunction: null }, zoomStep: { classPropertyName: "zoomStep", publicName: "zoomStep", isSignal: true, isRequired: false, transformFunction: null }, maxRenderPixels: { classPropertyName: "maxRenderPixels", publicName: "maxRenderPixels", isSignal: true, isRequired: false, transformFunction: null }, maxRenderDimension: { classPropertyName: "maxRenderDimension", publicName: "maxRenderDimension", isSignal: true, isRequired: false, transformFunction: null }, renderAll: { classPropertyName: "renderAll", publicName: "renderAll", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showPageList: { classPropertyName: "showPageList", publicName: "showPageList", isSignal: true, isRequired: false, transformFunction: null }, showSearchPanel: { classPropertyName: "showSearchPanel", publicName: "showSearchPanel", isSignal: true, isRequired: false, transformFunction: null }, showAnnotationsPanel: { classPropertyName: "showAnnotationsPanel", publicName: "showAnnotationsPanel", isSignal: true, isRequired: false, transformFunction: null }, annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, annotationsDataSource: { classPropertyName: "annotationsDataSource", publicName: "annotationsDataSource", isSignal: true, isRequired: false, transformFunction: null }, annotationTypeProperty: { classPropertyName: "annotationTypeProperty", publicName: "annotationTypeProperty", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, withAnnotations: { classPropertyName: "withAnnotations", publicName: "withAnnotations", isSignal: true, isRequired: false, transformFunction: null }, withForms: { classPropertyName: "withForms", publicName: "withForms", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", pageChanged: "pageChanged", pageRendered: "pageRendered", error: "error" }, host: { properties: { "class.is-loading": "isLoading()", "class.has-toolbar": "showToolbar()", "class.has-page-list": "isPageListVisible()", "class.has-error": "errorState()" }, classAttribute: "ngs-pdf-viewer not-prose" }, queries: [{ propertyName: "annotationDefs", predicate: PdfViewerAnnotationDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewerBody", first: true, predicate: ["viewerBody"], descendants: true, isSignal: true }, { propertyName: "pageList", first: true, predicate: ["pageList"], descendants: true, isSignal: true }], exportAs: ["ngsPdfViewer"], ngImport: i0, template: "<ngs-panel class=\"pdf-viewer-panel h-full overflow-hidden rounded-lg border border-border bg-surface-container-low text-on-surface\">\n @if (showToolbar()) {\n <ngs-panel-header class=\"min-w-0 border-b border-border bg-surface\" flex>\n <ngs-toolbar class=\"pdf-viewer-toolbar flex h-14 w-full min-w-0 items-center gap-4 overflow-visible px-2 text-on-surface-variant\" aria-label=\"PDF viewer controls\">\n <ngs-toolbar-item class=\"pdf-viewer-toolbar__start flex min-w-0 flex-none items-center gap-2\">\n @if (showPageList()) {\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n [attr.aria-label]=\"pageListVisible() ? 'Hide pages panel' : 'Show pages panel'\"\n [attr.aria-pressed]=\"pageListVisible()\"\n (click)=\"togglePageList()\">\n <ngs-icon\n class=\"text-2xl\"\n [name]=\"pageListVisible() ? 'fluent:panel-left-contract-24-regular' : 'fluent:panel-left-expand-24-regular'\" />\n </button>\n }\n <ngs-divider vertical fixedHeight />\n </ngs-toolbar-item>\n <ngs-toolbar-title class=\"min-w-0 flex-1 truncate text-sm! max-w-[20%] font-semibold! text-on-surface-variant\" [title]=\"displayDocumentName()\">\n {{ displayDocumentName() }}\n </ngs-toolbar-title>\n\n <ngs-toolbar-item class=\"pdf-viewer-toolbar__center flex flex-none items-center gap-3\">\n <div class=\"pdf-viewer-toolbar__cluster flex min-w-0 items-center gap-2\" aria-label=\"Zoom controls\">\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n aria-label=\"Zoom out\"\n [disabled]=\"!canZoomOut()\"\n (click)=\"zoomOut()\">\n <ngs-icon class=\"text-2xl\" name=\"fluent:zoom-out-24-regular\" />\n </button>\n <button\n class=\"pdf-viewer-toolbar__zoom min-w-12 cursor-pointer border-0 bg-transparent p-0 text-center text-sm text-on-surface hover:text-primary\"\n type=\"button\"\n aria-label=\"Zoom presets\"\n [ngsMenuTriggerFor]=\"zoomMenu\">\n {{ zoomLabel() }}\n </button>\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n aria-label=\"Zoom in\"\n [disabled]=\"!canZoomIn()\"\n (click)=\"zoomIn()\">\n <ngs-icon class=\"text-2xl\" name=\"fluent:zoom-in-24-regular\" />\n </button>\n </div>\n\n <ngs-divider vertical fixedHeight />\n\n <div class=\"pdf-viewer-toolbar__cluster flex min-w-0 items-center gap-2\" aria-label=\"Page navigation\">\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n aria-label=\"Previous page\"\n [disabled]=\"!canGoPrevious()\"\n (click)=\"previousPage()\">\n <ngs-icon class=\"text-2xl\" name=\"fluent:chevron-left-24-regular\" />\n </button>\n <span class=\"pdf-viewer-toolbar__page inline-flex h-9 min-w-16 items-center justify-center gap-2 rounded bg-surface-container-low text-sm font-bold text-on-surface\">\n <span>{{ activePage() }}</span>\n <span>/</span>\n <span>{{ pageCount() || 1 }}</span>\n </span>\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n aria-label=\"Next page\"\n [disabled]=\"!canGoNext()\"\n (click)=\"nextPage()\">\n <ngs-icon class=\"text-2xl\" name=\"fluent:chevron-right-24-regular\" />\n </button>\n </div>\n </ngs-toolbar-item>\n\n <ngs-toolbar-spacer />\n\n <ngs-toolbar-item class=\"pdf-viewer-toolbar__end flex min-w-0 flex-1 items-center justify-end gap-2\" aria-label=\"PDF tools\">\n @if (showSearchPanel()) {\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n [attr.aria-pressed]=\"isSearchPanelVisible()\"\n aria-label=\"Search\"\n [disabled]=\"!asidePanelInteractive()\"\n (click)=\"toggleSearchPanel()\">\n <ngs-icon class=\"text-2xl\" name=\"fluent:search-24-regular\" />\n </button>\n }\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n aria-label=\"PDF viewer settings\"\n [ngsMenuTriggerFor]=\"settingsMenu\">\n <ngs-icon class=\"text-2xl\" name=\"fluent:settings-24-regular\" />\n </button>\n @if (showAnnotationsPanel()) {\n <button\n class=\"pdf-viewer-toolbar__button size-10 text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface\"\n ngsIconButton\n type=\"button\"\n [attr.aria-pressed]=\"isAnnotationsPanelVisible()\"\n aria-label=\"Toggle annotations panel\"\n [disabled]=\"!asidePanelInteractive()\"\n (click)=\"toggleAnnotationsPanel()\">\n <ngs-icon class=\"text-2xl\" name=\"fluent:text-bullet-list-square-edit-24-regular\" />\n </button>\n }\n </ngs-toolbar-item>\n </ngs-toolbar>\n\n <ngs-menu #zoomMenu=\"ngsMenu\">\n @for (zoomPreset of zoomPresets; track zoomPreset) {\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"isZoomPresetSelected(zoomPreset)\"\n (click)=\"setZoomPreset(zoomPreset)\">\n <span>{{ zoomPreset * 100 }}%</span>\n </button>\n }\n\n <ngs-menu-divider />\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"zoomMode() === 'fit-page'\"\n (click)=\"fitToPage()\">\n <ngs-icon name=\"fluent:resize-large-24-regular\" />\n <span>Fit to Page</span>\n </button>\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"zoomMode() === 'fit-width'\"\n (click)=\"fitToWidth()\">\n <ngs-icon name=\"fluent:resize-24-regular\" />\n <span>Fit to Width</span>\n </button>\n </ngs-menu>\n\n <ngs-menu #settingsMenu=\"ngsMenu\" xPosition=\"before\">\n <ngs-menu-heading>SPREAD MODE</ngs-menu-heading>\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"spreadMode() === 'single'\"\n (click)=\"setSpreadMode('single')\">\n <ngs-icon name=\"fluent:document-24-regular\" />\n <span>Single Page</span>\n </button>\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"spreadMode() === 'two-odd'\"\n (click)=\"setSpreadMode('two-odd')\">\n <ngs-icon name=\"fluent:book-open-24-regular\" />\n <span>Two Page (Odd)</span>\n </button>\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"spreadMode() === 'two-even'\"\n (click)=\"setSpreadMode('two-even')\">\n <ngs-icon name=\"fluent:document-text-24-regular\" />\n <span>Two Page (Even)</span>\n </button>\n\n <ngs-menu-divider />\n <ngs-menu-heading>SCROLL LAYOUT</ngs-menu-heading>\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"scrollLayout() === 'vertical'\"\n (click)=\"setScrollLayout('vertical')\">\n <ngs-icon name=\"fluent:arrow-sort-24-regular\" />\n <span>Vertical</span>\n </button>\n <button\n ngs-menu-item\n type=\"button\"\n [selected]=\"scrollLayout() === 'horizontal'\"\n (click)=\"setScrollLayout('horizontal')\">\n <ngs-icon name=\"fluent:arrow-swap-24-regular\" />\n <span>Horizontal</span>\n </button>\n\n <ngs-menu-divider />\n <ngs-menu-heading>PAGE ROTATION</ngs-menu-heading>\n <button ngs-menu-item type=\"button\" (click)=\"rotateClockwise()\">\n <ngs-icon name=\"fluent:arrow-clockwise-24-regular\" />\n <span>Rotate Clockwise</span>\n </button>\n <button ngs-menu-item type=\"button\" (click)=\"rotateCounterClockwise()\">\n <ngs-icon name=\"fluent:arrow-counterclockwise-24-regular\" />\n <span>Rotate Counter-Clockwise</span>\n </button>\n\n <ngs-menu-divider />\n <button ngs-menu-item type=\"button\" (click)=\"toggleFullscreen()\">\n <ngs-icon name=\"fluent:arrow-maximize-24-regular\" />\n <span>Fullscreen</span>\n </button>\n </ngs-menu>\n </ngs-panel-header>\n }\n\n @if (isPageListVisible()) {\n <ngs-panel-sidebar class=\"w-[var(--ngs-pdf-viewer-sidebar-width)] min-w-[var(--ngs-pdf-viewer-sidebar-width)] border-r border-border bg-surface\">\n <div class=\"pdf-viewer-sidebar flex h-full min-h-0 flex-col gap-2 overflow-auto p-3\" #pageList>\n <div class=\"pdf-viewer-sidebar__title px-1 text-xs font-semibold text-on-surface-variant\">Pages</div>\n <div class=\"pdf-viewer-sidebar__pages flex min-h-0 flex-col gap-2\" aria-label=\"PDF pages\">\n @for (pageItem of pageItems(); track pageItem.pageNumber) {\n <button\n class=\"pdf-viewer-sidebar__page group flex w-full cursor-pointer flex-col items-stretch gap-1 rounded border border-transparent bg-transparent p-1 text-left text-on-surface-variant focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary [&.is-active]:text-on-surface\"\n type=\"button\"\n [class.is-active]=\"pageItem.pageNumber === activePage()\"\n [attr.aria-current]=\"pageItem.pageNumber === activePage() ? 'page' : null\"\n [attr.aria-label]=\"'Open page ' + pageItem.pageNumber\"\n [attr.data-ngs-pdf-page-button]=\"pageItem.pageNumber\"\n (click)=\"setPage(pageItem.pageNumber)\">\n <span class=\"pdf-viewer-sidebar__thumb flex aspect-[3/4] w-full items-center justify-center overflow-hidden rounded border border-border bg-surface shadow-xs group-hover:border-border\" aria-hidden=\"true\">\n @if (pageItem.thumbnail; as thumbnail) {\n <img\n class=\"block h-full w-full select-none object-contain\"\n [src]=\"thumbnail.url\"\n [attr.width]=\"thumbnail.width\"\n [attr.height]=\"thumbnail.height\"\n alt=\"\"\n draggable=\"false\" />\n } @else {\n <ngs-image-placeholder class=\"h-full w-full\" />\n }\n </span>\n <span class=\"pdf-viewer-sidebar__label block truncate text-center text-xs font-medium leading-tight\">Page {{ pageItem.pageNumber }}</span>\n </button>\n }\n </div>\n </div>\n </ngs-panel-sidebar>\n }\n\n <ngs-panel-content class=\"min-h-0 min-w-0 overflow-hidden bg-surface-container-low\">\n <div class=\"pdf-viewer-body absolute inset-0 overflow-auto\" #viewerBody (scroll)=\"onViewerScroll()\" (wheel)=\"onViewerWheel($event)\">\n <ngs-block-loader [loading]=\"isLoading()\">Loading PDF...</ngs-block-loader>\n @if (errorState()) {\n <div class=\"pdf-viewer-state pdf-viewer-state--error absolute inset-0 flex flex-col items-center justify-center gap-3 p-6 text-center text-danger\">\n <ngs-icon class=\"text-3xl\" name=\"fluent:error-circle-24-regular\" />\n <span>PDF could not be loaded.</span>\n </div>\n } @else if (!src()) {\n <div class=\"pdf-viewer-state absolute inset-0 flex flex-col items-center justify-center gap-3 p-6 text-center text-on-surface-variant\">\n <ngs-icon class=\"text-3xl\" name=\"fluent:document-pdf-24-regular\" />\n <span>No PDF selected.</span>\n </div>\n } @else {\n <div\n class=\"pdf-viewer-pages\"\n [class.is-horizontal]=\"scrollLayout() === 'horizontal'\"\n [class.is-vertical]=\"scrollLayout() === 'vertical'\"\n [class.is-spread]=\"spreadMode() !== 'single'\">\n @for (spread of pageSpreads(); track spread.id) {\n <div class=\"pdf-viewer-spread\" [attr.data-ngs-pdf-spread]=\"spread.id\">\n @if (spread.leadingPlaceholder) {\n @if (spread.leadingPlaceholderPage; as placeholderPage) {\n <div\n class=\"pdf-viewer-spread__placeholder\"\n [style.width.px]=\"placeholderPage.width\"\n [style.height.px]=\"placeholderPage.height\"\n aria-hidden=\"true\"></div>\n }\n }\n @for (pdfPage of spread.pages; track pdfPage.pageNumber) {\n <article\n class=\"pdf-viewer-page w-max max-w-none\"\n [attr.aria-label]=\"'PDF page ' + pdfPage.pageNumber\"\n [attr.data-ngs-pdf-page]=\"pdfPage.pageNumber\">\n <div\n class=\"pdf-viewer-page__surface relative cursor-text overflow-hidden rounded bg-surface shadow-md select-none touch-none\"\n [style.width.px]=\"pdfPage.width\"\n [style.height.px]=\"pdfPage.height\"\n (pointerdown)=\"startTextSelection($event, pdfPage)\"\n (pointermove)=\"updateTextSelection($event, pdfPage)\"\n (pointerup)=\"finishTextSelection($event, pdfPage)\"\n (pointercancel)=\"cancelTextSelection()\"\n (mousedown)=\"startTextSelection($event, pdfPage)\"\n (mousemove)=\"updateTextSelection($event, pdfPage)\"\n (mouseup)=\"finishTextSelection($event, pdfPage)\">\n @if (pdfPage.url; as pageUrl) {\n <img\n class=\"block h-full w-full max-w-none select-none pointer-events-none\"\n [src]=\"pageUrl\"\n [alt]=\"'PDF page ' + pdfPage.pageNumber\"\n [attr.width]=\"pdfPage.width\"\n [attr.height]=\"pdfPage.height\"\n draggable=\"false\" />\n } @else {\n <div class=\"pdf-viewer-page__placeholder pointer-events-none absolute inset-0 flex items-center justify-center bg-surface\" aria-hidden=\"true\">\n @if (pdfPage.isRendering) {\n <span class=\"size-8 animate-spin rounded-full border-2 border-border border-t-primary\"></span>\n }\n </div>\n }\n @if (selectionRectsForPage(pdfPage.pageNumber); as selectionRects) {\n @if (selectionRects.length > 0) {\n <div class=\"pdf-viewer-page__selection-layer pointer-events-none absolute inset-0 z-[1] isolate overflow-hidden mix-blend-multiply\" aria-hidden=\"true\">\n @for (selectionRect of selectionRects; track selectionRect.left + '-' + selectionRect.top + '-' + $index) {\n <div\n class=\"pdf-viewer-page__selection-rect pointer-events-none absolute bg-primary/30\"\n [style.left.px]=\"selectionRect.left\"\n [style.top.px]=\"selectionRect.top\"\n [style.width.px]=\"selectionRect.width\"\n [style.height.px]=\"selectionRect.height\"></div>\n }\n </div>\n }\n }\n </div>\n </article>\n }\n </div>\n }\n </div>\n }\n </div>\n </ngs-panel-content>\n\n @if (isSearchPanelVisible() || isAnnotationsPanelVisible()) {\n <ngs-panel-aside class=\"w-[var(--ngs-pdf-viewer-aside-width)] min-w-[var(--ngs-pdf-viewer-aside-width)] border-l border-border bg-surface\">\n @if (isSearchPanelVisible()) {\n <ngs-pdf-viewer-search\n [query]=\"activeSearchQuery()\"\n [results]=\"pdfSearchResults()\"\n (closed)=\"closeAsidePanel()\"\n (searchChanged)=\"updatePdfSearch($event)\"\n (resultSelected)=\"selectSearchResult($event)\" />\n } @else {\n <ngs-pdf-viewer-annotations\n [annotations]=\"annotationItems()\"\n [annotationDefs]=\"annotationDefs()\"\n [annotationTypeProperty]=\"annotationTypeProperty()\"\n (closed)=\"closeAsidePanel()\"\n (pageSelected)=\"setPage($event)\" />\n }\n </ngs-panel-aside>\n }\n</ngs-panel>\n", styles: [":host{--ngs-pdf-viewer-height: 720px;--ngs-pdf-viewer-min-height: 720px;--ngs-pdf-viewer-sidebar-width: 152px;--ngs-pdf-viewer-aside-width: 360px;--ngs-pdf-viewer-page-gap: 24px;--ngs-pdf-viewer-spread-gap: 16px;--ngs-pdf-viewer-page-padding: 24px;display:block;height:var(--ngs-pdf-viewer-height);min-height:var(--ngs-pdf-viewer-min-height);overflow:hidden}:host .pdf-viewer-pages{box-sizing:border-box;display:grid;gap:var(--ngs-pdf-viewer-page-gap);min-height:100%;min-width:100%;padding:var(--ngs-pdf-viewer-page-padding)}:host .pdf-viewer-pages.is-vertical{align-content:start;grid-auto-flow:row;grid-auto-rows:max-content;justify-items:center}:host .pdf-viewer-pages.is-horizontal{align-content:center;align-items:center;grid-auto-columns:max-content;grid-auto-flow:column;justify-content:start;width:max-content}:host .pdf-viewer-spread{align-items:start;display:grid;gap:var(--ngs-pdf-viewer-spread-gap);grid-auto-columns:max-content;grid-auto-flow:column;justify-content:center}:host .pdf-viewer-spread__placeholder{pointer-events:none;visibility:hidden}:host .pdf-viewer-toolbar{position:relative}:host .pdf-viewer-toolbar__center{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}:host .pdf-viewer-toolbar__start,:host .pdf-viewer-toolbar__end{position:relative;z-index:2}:host .pdf-viewer-sidebar__page.is-active .pdf-viewer-sidebar__thumb{outline:2px solid var(--ngs-color-primary)}:host .pdf-viewer-page__selection-layer{forced-color-adjust:none}\n"], dependencies: [{ kind: "component", type: BlockLoader, selector: "ngs-block-loader", inputs: ["loading", "spinnerDiameter", "spinnerStrokeWidth"], exportAs: ["ngsBlockLoader"] }, { kind: "component", type: Button, selector: " button[ngsButton], button[ngsIconButton], a[ngsButton], a[ngsIconButton] ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Divider, selector: "ngs-divider", inputs: ["vertical", "inset", "fixedHeight"], exportAs: ["ngsDivider"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: ImagePlaceholder, selector: "ngs-image-placeholder", exportAs: ["ngsImagePlaceholder"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuDivider, selector: "ngs-menu-divider" }, { kind: "component", type: MenuHeading, selector: "ngs-menu-heading" }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelAside, selector: "ngs-panel-aside" }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["flex", "autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: PanelSidebar, selector: "ngs-panel-sidebar" }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: ToolbarItem, selector: "ngs-toolbar-item", inputs: ["hidden"], outputs: ["hiddenChange"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: ToolbarTitle, selector: "ngs-toolbar-title", inputs: ["appearance"], exportAs: ["ngsToolbarTitle"] }, { kind: "component", type: PdfViewerAnnotations, selector: "ngs-pdf-viewer-annotations", inputs: ["annotations", "annotationDefs", "annotationTypeProperty"], outputs: ["closed", "pageSelected"] }, { kind: "component", type: PdfViewerSearch, selector: "ngs-pdf-viewer-search", inputs: ["results", "query"], outputs: ["closed", "resultSelected", "searchChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1967
1967
|
}
|
|
1968
1968
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PdfViewer, decorators: [{
|
|
1969
1969
|
type: Component,
|