@skyux/core
Version:
This library was generated with [Nx](https://nx.dev).
4,743 lines • 206 kB
JavaScript
import * as i0 from '@angular/core';
import { NgModule, Injectable, inject, RendererFactory2, NgZone, DOCUMENT, EventEmitter, Output, Input, Directive, EnvironmentInjector, createEnvironmentInjector, createComponent, ChangeDetectorRef, ElementRef, ViewContainerRef, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, input, effect, Optional, Inject, ApplicationRef, afterNextRender, Injector, Pipe, HostBinding, Renderer2, HostListener } from '@angular/core';
import { Subject, Subscription, ReplaySubject, fromEvent, of, Observable, filter, map, distinctUntilChanged, shareReplay, observeOn, animationFrameScheduler, takeUntil as takeUntil$1, BehaviorSubject, combineLatestWith, switchMap, concat, debounceTime as debounceTime$1 } from 'rxjs';
import { takeUntil, debounceTime, take } from 'rxjs/operators';
import { ViewportRuler } from '@angular/cdk/overlay';
import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i1 from '@skyux/i18n';
import { SkyLibResourcesService, SkyI18nModule, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { Router, NavigationStart } from '@angular/router';
import * as i1$2 from '@angular/platform-browser';
/**
* @deprecated The `SkyCoreAdapterService` no longer needs the `SkyCoreAdapterModule`.
* The `SkyCoreAdapterModule` can be removed from your project.
*/
class SkyCoreAdapterModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyCoreAdapterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyCoreAdapterModule }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyCoreAdapterModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyCoreAdapterModule, decorators: [{
type: NgModule,
args: [{}]
}] });
/**
* A list of all breakpoints.
* @internal
*/
const SKY_BREAKPOINTS = ['xs', 'sm', 'md', 'lg'];
/**
* Represents all available media breakpoints.
* @deprecated Use `SkyBreakpoint` instead.
*/
var SkyMediaBreakpoints;
(function (SkyMediaBreakpoints) {
/**
* Screen widths of 767px or less.
*/
SkyMediaBreakpoints[SkyMediaBreakpoints["xs"] = 1] = "xs";
/**
* Screen widths of 768px to 991px.
*/
SkyMediaBreakpoints[SkyMediaBreakpoints["sm"] = 2] = "sm";
/**
* Screen widths of 992px to 1199px.
*/
SkyMediaBreakpoints[SkyMediaBreakpoints["md"] = 3] = "md";
/**
* Screen widths of 1200px or greater.
*/
SkyMediaBreakpoints[SkyMediaBreakpoints["lg"] = 4] = "lg";
})(SkyMediaBreakpoints || (SkyMediaBreakpoints = {}));
const breakpointLookup = new Map([
[SkyMediaBreakpoints.xs, 'xs'],
[SkyMediaBreakpoints.sm, 'sm'],
[SkyMediaBreakpoints.md, 'md'],
[SkyMediaBreakpoints.lg, 'lg'],
]);
const legacyLookup = new Map([
['xs', SkyMediaBreakpoints.xs],
['sm', SkyMediaBreakpoints.sm],
['md', SkyMediaBreakpoints.md],
['lg', SkyMediaBreakpoints.lg],
]);
/**
* Whether the value is of type `SkyBreakpoint`.
* @internal
*/
function isSkyBreakpoint(value) {
return (value !== null &&
value !== undefined &&
SKY_BREAKPOINTS.includes(value));
}
/**
* Transforms a `SkyMediaBreakpoints` value to `SkyBreakpoint`.
* @internal
*/
function toSkyBreakpoint(breakpoint) {
return breakpointLookup.get(breakpoint);
}
/**
* Transforms a `SkyBreakpoint` value to `SkyMediaBreakpoints`.
* @internal
*/
function toSkyMediaBreakpoints(breakpoint) {
return legacyLookup.get(breakpoint);
}
const SKY_TABBABLE_SELECTOR = [
'a[href]',
'area[href]',
'input:not([disabled])',
'button:not([disabled])',
'select:not([disabled])',
'textarea:not([disabled])',
'iframe',
'object',
'embed',
'*[contenteditable=true]:not([disabled])',
'*[tabindex]:not([disabled])',
].join(', ');
class SkyCoreAdapterService {
#renderer;
constructor(rendererFactory) {
this.#renderer = rendererFactory.createRenderer(undefined, null);
}
/**
* Set the responsive container CSS class for a given element.
*
* @param elementRef - The element that will receive the new CSS class.
* @param breakpoint - The breakpoint to determine which class gets set.
* For example a breakpoint of "xs" will set a CSS class of "sky-responsive-container-xs".
* @deprecated Use the `SkyResponsiveHostDirective` instead.
*/
setResponsiveContainerClass(elementRef, breakpoint) {
const nativeEl = elementRef.nativeElement;
for (const breakpointType of SKY_BREAKPOINTS) {
this.#renderer.removeClass(nativeEl, `sky-responsive-container-${breakpointType}`);
}
if (!isSkyBreakpoint(breakpoint)) {
breakpoint = toSkyBreakpoint(breakpoint);
}
this.#renderer.addClass(nativeEl, `sky-responsive-container-${breakpoint}`);
}
/**
* This method temporarily enables/disables pointer events.
* This is helpful to prevent iFrames from interfering with drag events.
*
* @param enable - Set to `true` to enable pointer events. Set to `false` to disable.
*/
toggleIframePointerEvents(enable) {
const iframes = Array.from(document.querySelectorAll('iframe'));
for (const iframe of iframes) {
this.#renderer.setStyle(iframe, 'pointer-events', enable ? '' : 'none');
}
}
/**
* Focuses on the first element found with an `autofocus` attribute inside the supplied `elementRef`.
*
* @param elementRef - The element to search within.
* @return Returns `true` if a child element with autofocus is found.
*/
applyAutoFocus(elementRef) {
if (!elementRef) {
return false;
}
const elementWithAutoFocus = elementRef.nativeElement.querySelector('[autofocus]');
// Child was found with the autofocus property. Set focus and return true.
if (elementWithAutoFocus) {
elementWithAutoFocus.focus();
return true;
}
// No children were found with autofocus property. Return false.
return false;
}
/**
* Sets focus on the first focusable child of the `elementRef` parameter.
* If no focusable children are found, and `focusOnContainerIfNoChildrenFound` is `true`,
* focus will be set on the container element.
*
* @param elementRef - The element to search within.
* @param containerSelector - A CSS selector indicating the container that should
* receive focus if no focusable children are found.
* @param focusOnContainerIfNoChildrenFound - It set to `true`, the container will
* receive focus if no focusable children are found.
*/
getFocusableChildrenAndApplyFocus(elementRef, containerSelector, focusOnContainerIfNoChildrenFound = false) {
const containerElement = elementRef.nativeElement.querySelector(containerSelector);
if (containerElement) {
const focusableChildren = this.getFocusableChildren(containerElement);
// Focus first focusable child if available. Otherwise, set focus on container.
if (!this.#focusFirstElement(focusableChildren) &&
focusOnContainerIfNoChildrenFound) {
containerElement.focus();
}
}
}
/**
* Returns an array of all focusable children of provided `element`.
*
* @param element - The HTMLElement to search within.
* @param options - Options for getting focusable children.
*/
getFocusableChildren(element, options) {
if (!element) {
return [];
}
let elements = Array.prototype.slice.call(element.querySelectorAll(SKY_TABBABLE_SELECTOR));
// Unless ignoreTabIndex = true, filter out elements with tabindex = -1.
if (!options || !options.ignoreTabIndex) {
elements = elements.filter((el) => {
return el.tabIndex !== -1;
});
}
// Unless ignoreVisibility = true, filter out elements that are not visible.
if (!options || !options.ignoreVisibility) {
elements = elements.filter((el) => {
return this.#isVisible(el);
});
}
return elements;
}
/**
* Returns the clientWidth of the provided elementRef.
* @param elementRef - The element to calculate width from.
*/
getWidth(elementRef) {
return elementRef.nativeElement.clientWidth;
}
/**
* Checks if an event target has a higher z-index than a given element.
* @param target The event target element.
* @param element The element to test against. A z-index must be explicitly set for this element.
*/
isTargetAboveElement(target, element) {
const zIndex = getComputedStyle(element).zIndex;
let el = target;
while (el) {
// Getting the computed style only works for elements that exist in the DOM.
// In certain scenarios, an element is removed after a click event; by the time the event
// bubbles up to other elements, however, the element has been removed and the computed style returns empty.
// In this case, we'll need to check the z-index directly, via the style property.
const targetZIndex = getComputedStyle(el).zIndex || el.style.zIndex;
if (targetZIndex !== '' &&
targetZIndex !== 'auto' &&
+targetZIndex > +zIndex) {
return true;
}
el = el.parentElement;
}
return false;
}
/**
* Remove inline height styles from the provided elements.
* @param elementRef - The element to search within.
* @param selector - The CSS selector to use when finding elements for removing height.
*/
resetHeight(elementRef, selector) {
const children = Array.from(elementRef.nativeElement.querySelectorAll(selector));
for (const child of children) {
this.#renderer.removeStyle(child, 'height');
}
}
/**
* Sets all element heights to match the height of the tallest element.
* @param elementRef - The element to search within.
* @param selector - The CSS selector to use when finding elements for syncing height.
*/
syncMaxHeight(elementRef, selector) {
const children = Array.from(elementRef.nativeElement.querySelectorAll(selector));
/* istanbul ignore else */
if (children.length > 0) {
let maxHeight = 0;
for (const child of children) {
maxHeight = Math.max(maxHeight, child.offsetHeight);
}
for (const child of children) {
this.#renderer.setStyle(child, 'height', `${maxHeight}px`);
}
}
}
#focusFirstElement(list) {
if (list.length > 0) {
list[0].focus();
return true;
}
return false;
}
#isVisible(element) {
const style = window.getComputedStyle(element);
const isHidden = style.display === 'none' || style.visibility === 'hidden';
if (isHidden) {
return false;
}
const hasBounds = !!(element.offsetWidth ||
element.offsetHeight ||
element.getClientRects().length);
return hasBounds;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyCoreAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyCoreAdapterService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyCoreAdapterService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
var SkyAffixAutoFitContext;
(function (SkyAffixAutoFitContext) {
/**
* Auto-fit functionality will respect the nearest overflow parent element's dimensions.
*/
SkyAffixAutoFitContext[SkyAffixAutoFitContext["OverflowParent"] = 0] = "OverflowParent";
/**
* Auto-fit functionality will respect the browser viewport dimensions.
*/
SkyAffixAutoFitContext[SkyAffixAutoFitContext["Viewport"] = 1] = "Viewport";
})(SkyAffixAutoFitContext || (SkyAffixAutoFitContext = {}));
function getNextPlacement(placement) {
const placements = ['above', 'right', 'below', 'left'];
let index = placements.indexOf(placement) + 1;
if (index >= placements.length) {
index = 0;
}
return placements[index];
}
function getInversePlacement(placement) {
const pairings = {
above: 'below',
below: 'above',
right: 'left',
left: 'right',
};
return pairings[placement];
}
function useViewportForBounds(element) {
return 'BODY' === element.tagName;
}
/**
* Returns the offset values of a given element.
* @param element The HTML element.
* @param bufferOffset An optional offset to add/subtract to the element's actual offset.
*/
function getElementOffset(element, bufferOffset) {
const bufferOffsetBottom = bufferOffset?.bottom || 0;
const bufferOffsetLeft = bufferOffset?.left || 0;
const bufferOffsetRight = bufferOffset?.right || 0;
const bufferOffsetTop = bufferOffset?.top || 0;
let top;
let left;
let right;
let bottom;
const clientRect = element.getBoundingClientRect();
left = clientRect.left;
top = clientRect.top;
right = clientRect.right;
bottom = clientRect.bottom;
bottom -= bufferOffsetBottom;
left += bufferOffsetLeft;
right -= bufferOffsetRight;
top += bufferOffsetTop;
return {
bottom,
left,
right,
top,
};
}
/**
* Returns an AffixRect that represents the outer dimensions of a given element.
*/
function getOuterRect(element) {
const rect = element.getBoundingClientRect();
const computedStyle = window.getComputedStyle(element, undefined);
const marginTop = parseFloat(computedStyle.marginTop);
const marginLeft = parseFloat(computedStyle.marginLeft);
const marginRight = parseFloat(computedStyle.marginRight);
const marginBottom = parseFloat(computedStyle.marginBottom);
return {
top: rect.top - marginTop,
left: rect.left - marginLeft,
bottom: rect.top + rect.height + marginBottom,
right: rect.left + rect.width + marginLeft + marginRight,
width: rect.width + marginLeft + marginRight,
height: rect.height + marginTop + marginBottom,
};
}
/**
* Returns the visible rect for a given element.
*/
function getVisibleRectForElement(viewportRuler, element) {
const elementRect = getOuterRect(element);
const viewportRect = viewportRuler.getViewportRect();
const visibleRect = {
top: Math.max(elementRect.top, 0),
left: Math.max(elementRect.left, 0),
bottom: Math.min(elementRect.bottom, viewportRect.height),
right: Math.min(elementRect.right, viewportRect.width),
};
return {
...visibleRect,
width: visibleRect.right - visibleRect.left,
height: visibleRect.bottom - visibleRect.top,
};
}
function getOverflowParents(child) {
const bodyElement = window.document.body;
const results = [];
let parentElement = child?.parentNode;
while (parentElement !== undefined && parentElement instanceof HTMLElement) {
if (parentElement.matches('body')) {
break;
}
const computedStyle = window.getComputedStyle(parentElement, undefined);
const overflowY = computedStyle.overflowY.toLowerCase();
const largerThanTheDocumentElement = window.document.documentElement.scrollWidth < parentElement.scrollWidth ||
window.document.documentElement.scrollHeight < parentElement.scrollHeight;
const hasOverflowRules = overflowY === 'auto' || overflowY === 'hidden' || overflowY === 'scroll';
if (largerThanTheDocumentElement || hasOverflowRules) {
results.push(parentElement);
}
if (computedStyle.position === 'fixed') {
break;
}
parentElement = parentElement.parentNode;
}
results.push(bodyElement);
return results;
}
/**
* Confirms offset is fully visible within a parent element.
*/
function isOffsetFullyVisibleWithinParent(viewportRuler, parent, offset, bufferOffset) {
let parentOffset;
if (useViewportForBounds(parent)) {
const viewportRect = viewportRuler.getViewportRect();
parentOffset = {
top: 0,
left: 0,
right: viewportRect.width,
bottom: viewportRect.height,
};
}
else if (bufferOffset) {
parentOffset = getElementOffset(parent, bufferOffset);
}
else {
parentOffset = getVisibleRectForElement(viewportRuler, parent);
}
return (parentOffset.top <= offset.top &&
parentOffset.right >= offset.right &&
parentOffset.bottom >= offset.bottom &&
parentOffset.left <= offset.left);
}
function isOffsetPartiallyVisibleWithinParent(viewportRuler, parent, offset, bufferOffset) {
let parentOffset;
if (useViewportForBounds(parent)) {
const viewportRect = viewportRuler.getViewportRect();
parentOffset = {
top: 0,
left: 0,
right: viewportRect.width,
bottom: viewportRect.height,
};
}
else if (bufferOffset) {
parentOffset = getElementOffset(parent, bufferOffset);
}
else {
parentOffset = getVisibleRectForElement(viewportRuler, parent);
}
return !(parentOffset.top >= offset.bottom ||
parentOffset.right <= offset.left ||
parentOffset.bottom <= offset.top ||
parentOffset.left >= offset.right);
}
const DEFAULT_AFFIX_CONFIG = {
autoFitContext: SkyAffixAutoFitContext.OverflowParent,
enableAutoFit: false,
horizontalAlignment: 'center',
isSticky: false,
placement: 'above',
};
class SkyAffixer {
/**
* Fires when the affixed element's offset changes.
*/
get offsetChange() {
return this.#offsetChangeObs;
}
/**
* Fires when the base element's nearest overflow parent is scrolling. This is useful if you need
* to perform an additional action during the scroll event but don't want to generate another
* event listener.
*/
get overflowScroll() {
return this.#overflowScrollObs;
}
/**
* Fires when the placement value changes. A `null` value indicates that a suitable
* placement could not be found.
*/
get placementChange() {
return this.#placementChangeObs;
}
get #config() {
return this.#_config;
}
set #config(value) {
const merged = {
...DEFAULT_AFFIX_CONFIG,
...value,
};
// Make sure none of the values are undefined.
let key;
for (key in merged) {
if (merged[key] === undefined) {
merged[key] = DEFAULT_AFFIX_CONFIG[key];
}
}
this.#_config = merged;
}
#affixedElement;
#baseElement;
#currentOffset;
#currentPlacement;
#layoutViewport;
#offsetChange;
#offsetChangeObs;
#overflowParents = [];
#overflowScroll;
#overflowScrollObs;
#placementChange;
#placementChangeObs;
#renderer;
#scrollChange = new Subject();
#viewportListeners;
#viewportRuler;
#zone;
#_config = DEFAULT_AFFIX_CONFIG;
#scrollChangeListener = () => this.#scrollChange.next();
constructor(affixedElement, renderer, viewportRuler, zone, layoutViewport) {
this.#affixedElement = affixedElement;
this.#renderer = renderer;
this.#layoutViewport = layoutViewport;
this.#viewportRuler = viewportRuler;
this.#zone = zone;
this.#offsetChange = new Subject();
this.#overflowScroll = new Subject();
this.#placementChange = new Subject();
this.#offsetChangeObs = this.#offsetChange.asObservable();
this.#overflowScrollObs = this.#overflowScroll.asObservable();
this.#placementChangeObs = this.#placementChange.asObservable();
}
/**
* Affixes an element to a base element.
* @param baseElement The base element.
* @param config Configuration for the affix action.
*/
affixTo(baseElement, config) {
this.#reset();
this.#config = config;
this.#baseElement = baseElement;
this.#overflowParents = getOverflowParents(baseElement);
this.#affix();
if (this.#config.isSticky) {
this.#addViewportListeners();
}
}
getConfig() {
return this.#config;
}
/**
* Re-runs the affix calculation.
*/
reaffix() {
// Reset current placement to preferred placement.
this.#currentPlacement = this.#config.placement;
this.#affix();
}
/**
* Destroys the affixer.
*/
destroy() {
this.#reset();
this.#placementChange.complete();
this.#offsetChange.complete();
this.#overflowScroll.complete();
this.#scrollChange.complete();
}
#affix() {
const offset = this.#getOffset();
const offsetParentRect = this.#getOffsetParentRect();
offset.top = offset.top - offsetParentRect.top;
offset.left = offset.left - offsetParentRect.left;
offset.bottom = offset.bottom - offsetParentRect.top;
offset.right = offset.right - offsetParentRect.left;
if (this.#isNewOffset(offset)) {
this.#renderer.setStyle(this.#affixedElement, 'top', `${offset.top}px`);
this.#renderer.setStyle(this.#affixedElement, 'left', `${offset.left}px`);
this.#offsetChange.next({ offset });
}
}
#getOffsetParentRect() {
// Firefox sets the offsetParent to document.body if the element uses fixed positioning.
if (this.#config.position === 'absolute' &&
this.#affixedElement.offsetParent) {
return getOuterRect(this.#affixedElement.offsetParent);
}
else {
const layoutRect = getOuterRect(this.#layoutViewport);
return {
top: layoutRect.top,
left: layoutRect.left,
height: layoutRect.height,
width: layoutRect.width,
bottom: layoutRect.top - layoutRect.height,
right: layoutRect.left - layoutRect.width,
};
}
}
#getOffset() {
const parent = this.#getAutoFitContextParent();
const maxAttempts = 4;
let attempts = 0;
let isAffixedElementFullyVisible = false;
let offset;
let placement = this.#config.placement;
do {
offset = this.#getPreferredOffset(placement);
isAffixedElementFullyVisible = isOffsetFullyVisibleWithinParent(this.#viewportRuler, parent, offset, this.#config.autoFitOverflowOffset);
if (!this.#config.enableAutoFit) {
break;
}
if (!isAffixedElementFullyVisible) {
placement =
attempts % 2 === 0
? getInversePlacement(placement)
: getNextPlacement(placement);
}
attempts++;
} while (!isAffixedElementFullyVisible && attempts < maxAttempts);
if (isAffixedElementFullyVisible) {
if (this.#isBaseElementVisible()) {
this.#notifyPlacementChange(placement);
}
else {
this.#notifyPlacementChange(null);
}
return offset;
}
if (this.#config.enableAutoFit) {
this.#notifyPlacementChange(null);
}
// No suitable placement was found, so revert to preferred placement.
return this.#getPreferredOffset(this.#config.placement);
}
#getPreferredOffset(placement) {
if (!this.#baseElement) {
return { top: 0, left: 0, bottom: 0, right: 0 };
}
const affixedRect = getOuterRect(this.#affixedElement);
const baseRect = this.#baseElement.getBoundingClientRect();
const horizontalAlignment = this.#config.horizontalAlignment;
const verticalAlignment = this.#config.verticalAlignment;
const enableAutoFit = this.#config.enableAutoFit;
let top;
let left;
if (placement === 'above' || placement === 'below') {
if (placement === 'above') {
top = baseRect.top - affixedRect.height;
switch (verticalAlignment) {
case 'top':
top = top + affixedRect.height;
break;
case 'middle':
top = top + affixedRect.height / 2;
break;
case 'bottom':
default:
break;
}
}
else {
top = baseRect.bottom;
switch (verticalAlignment) {
case 'top':
default:
break;
case 'middle':
top = top - affixedRect.height / 2;
break;
case 'bottom':
top = top - affixedRect.height;
break;
}
}
switch (horizontalAlignment) {
case 'left':
left = baseRect.left;
break;
case 'center':
default:
left = baseRect.left + baseRect.width / 2 - affixedRect.width / 2;
break;
case 'right':
left = baseRect.right - affixedRect.width;
break;
}
}
else {
if (placement === 'left') {
left = baseRect.left - affixedRect.width;
}
else {
left = baseRect.right;
}
switch (verticalAlignment) {
case 'top':
top = baseRect.top;
break;
case 'middle':
default:
top = baseRect.top + baseRect.height / 2 - affixedRect.height / 2;
break;
case 'bottom':
top = baseRect.bottom - affixedRect.height;
break;
}
}
const offset = { top, left, bottom: 0, right: 0 };
if (enableAutoFit) {
const adjustments = this.#adjustOffsetToOverflowParent({ top, left }, placement, this.#baseElement);
offset.top = adjustments.top;
offset.left = adjustments.left;
}
offset.bottom = offset.top + affixedRect.height;
offset.right = offset.left + affixedRect.width;
return offset;
}
/**
* Slightly adjust the offset to fit within the scroll parent's boundaries if
* the affixed element would otherwise be clipped.
*/
#adjustOffsetToOverflowParent(offset, placement, baseElement) {
const affixedRect = getOuterRect(this.#affixedElement);
const baseRect = baseElement.getBoundingClientRect();
const parent = this.#getAutoFitContextParent();
let parentOffset;
if (this.#config.autoFitOverflowOffset) {
// When the config contains a specific offset.
parentOffset = getElementOffset(parent, this.#config.autoFitOverflowOffset);
}
else if (isOffsetFullyVisibleWithinParent(this.#viewportRuler, parent, baseRect)) {
// When the base element is fully visible within the parent, aim for the visible portion of the parent element.
parentOffset = getVisibleRectForElement(this.#viewportRuler, parent);
}
else {
// Anywhere in the parent element.
parentOffset = getOuterRect(parent);
}
// A pixel value representing the leeway between the edge of the overflow parent and the edge
// of the base element before it disappears from view.
// If the visible portion of the base element is less than this pixel value, the auto-fit
// functionality attempts to find another placement.
const defaultPixelTolerance = 40;
let pixelTolerance;
const originalOffsetTop = offset.top;
const originalOffsetLeft = offset.left;
switch (placement) {
case 'above':
case 'below':
// Keep the affixed element within the overflow parent.
if (offset.left < parentOffset.left) {
offset.left = parentOffset.left;
}
else if (offset.left + affixedRect.width > parentOffset.right) {
offset.left = parentOffset.right - affixedRect.width;
}
// Use a smaller pixel tolerance if the base element width is less than the default.
pixelTolerance = Math.min(defaultPixelTolerance, baseRect.width);
// Make sure the affixed element never detaches from the base element.
if (offset.left + pixelTolerance > baseRect.right ||
offset.left + affixedRect.width - pixelTolerance < baseRect.left) {
offset.left = originalOffsetLeft;
}
break;
case 'left':
case 'right':
// Keep the affixed element within the overflow parent.
if (offset.top < parentOffset.top) {
offset.top = parentOffset.top;
}
else if (offset.top + affixedRect.height > parentOffset.bottom) {
offset.top = parentOffset.bottom - affixedRect.height;
}
// Use a smaller pixel tolerance if the base element height is less than the default.
pixelTolerance = Math.min(defaultPixelTolerance, baseRect.height);
// Make sure the affixed element never detaches from the base element.
if (offset.top + pixelTolerance > baseRect.bottom ||
offset.top + affixedRect.height - pixelTolerance < baseRect.top) {
offset.top = originalOffsetTop;
}
break;
}
return offset;
}
#getImmediateOverflowParent() {
return this.#overflowParents[0];
}
#getAutoFitContextParent() {
const bodyElement = this.#overflowParents[this.#overflowParents.length - 1];
return this.#config.autoFitContext === SkyAffixAutoFitContext.OverflowParent
? this.#getImmediateOverflowParent()
: bodyElement;
}
#notifyPlacementChange(placement) {
if (this.#currentPlacement !== placement) {
this.#currentPlacement = placement ?? undefined;
this.#placementChange.next({
placement,
});
}
}
#reset() {
this.#removeViewportListeners();
this.#overflowParents = [];
this.#config =
this.#baseElement =
this.#currentPlacement =
this.#currentOffset =
undefined;
}
#isNewOffset(offset) {
if (this.#currentOffset === undefined) {
this.#currentOffset = offset;
return true;
}
if (this.#currentOffset.top === offset.top &&
this.#currentOffset.left === offset.left) {
return false;
}
this.#currentOffset = offset;
return true;
}
#isBaseElementVisible() {
// Can't get here if the base element is undefined.
/* istanbul ignore if */
if (!this.#baseElement) {
return false;
}
const baseRect = this.#baseElement.getBoundingClientRect();
return isOffsetPartiallyVisibleWithinParent(this.#viewportRuler, this.#getImmediateOverflowParent(), {
top: baseRect.top,
left: baseRect.left,
right: baseRect.right,
bottom: baseRect.bottom,
}, this.#config.autoFitOverflowOffset);
}
#addViewportListeners() {
this.#viewportListeners = new Subscription();
// Resize and orientation changes.
this.#viewportListeners.add(this.#viewportRuler.change().subscribe(() => {
this.#affix();
}));
this.#viewportListeners.add(this.#scrollChange.subscribe(() => {
this.#affix();
this.#overflowScroll.next();
}));
// Listen for scroll events on the window, visual viewport, and any overflow parents.
// https://developer.chrome.com/blog/visual-viewport-api/#events-only-fire-when-the-visual-viewport-changes
this.#zone.runOutsideAngular(() => {
[window, window.visualViewport, ...this.#overflowParents].forEach((parentElement) => {
parentElement?.addEventListener('scroll', this.#scrollChangeListener);
});
});
}
#removeViewportListeners() {
this.#viewportListeners?.unsubscribe();
this.#zone.runOutsideAngular(() => {
[window, window.visualViewport, ...this.#overflowParents].forEach((parentElement) => {
parentElement?.removeEventListener('scroll', this.#scrollChangeListener);
});
});
}
}
class SkyAffixService {
#renderer = inject(RendererFactory2).createRenderer(undefined, null);
#viewportRuler = inject(ViewportRuler);
#zone = inject(NgZone);
#layoutViewport = this.#createLayoutViewportShim(inject(DOCUMENT));
ngOnDestroy() {
this.#renderer.removeChild(this.#layoutViewport.parentNode, this.#layoutViewport);
}
/**
* Creates an instance of [[SkyAffixer]].
* @param affixed The element to be affixed.
*/
createAffixer(affixed) {
return new SkyAffixer(affixed.nativeElement, this.#renderer, this.#viewportRuler, this.#zone, this.#layoutViewport);
}
/**
* Create a layout viewport element that can be used to determine the relative position
* of the visual viewport. Inspired by
* https://github.com/WICG/visual-viewport/blob/gh-pages/examples/fixed-to-viewport.html
*/
#createLayoutViewportShim(doc) {
const layoutViewportElement = this.#renderer.createElement('div');
this.#renderer.addClass(layoutViewportElement, 'sky-affix-layout-viewport-shim');
this.#renderer.setStyle(layoutViewportElement, 'width', '100%');
this.#renderer.setStyle(layoutViewportElement, 'height', '100%');
this.#renderer.setStyle(layoutViewportElement, 'position', 'fixed');
this.#renderer.setStyle(layoutViewportElement, 'top', '0');
this.#renderer.setStyle(layoutViewportElement, 'left', '0');
this.#renderer.setStyle(layoutViewportElement, 'visibility', 'hidden');
this.#renderer.setStyle(layoutViewportElement, 'pointerEvents', 'none');
this.#renderer.appendChild(doc.body, layoutViewportElement);
return layoutViewportElement;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAffixService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAffixService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAffixService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
/**
* Affixes the host element to a base element.
*/
class SkyAffixDirective {
#affixer;
#affixService;
#elementRef;
#ngUnsubscribe;
constructor(elementRef, affixService) {
/**
* Fires when the affixed element's offset changes.
*/
this.affixOffsetChange = new EventEmitter();
/**
* Fires when the affixed element's overflow container is scrolled.
*/
this.affixOverflowScroll = new EventEmitter();
/**
* Fires when the placement value changes.
*/
this.affixPlacementChange = new EventEmitter();
this.#ngUnsubscribe = new Subject();
this.#elementRef = elementRef;
this.#affixService = affixService;
}
ngOnInit() {
this.#affixer = this.#affixService.createAffixer(this.#elementRef);
this.#affixer.offsetChange
.pipe(takeUntil(this.#ngUnsubscribe))
.subscribe((change) => this.affixOffsetChange.emit(change));
this.#affixer.overflowScroll
.pipe(takeUntil(this.#ngUnsubscribe))
.subscribe((change) => this.affixOverflowScroll.emit(change));
this.#affixer.placementChange
.pipe(takeUntil(this.#ngUnsubscribe))
.subscribe((change) => this.affixPlacementChange.emit(change));
this.#updateAlignment();
}
ngOnChanges(changes) {
/* istanbul ignore else */
if (changes['affixAutoFitContext'] ||
changes['affixAutoFitOverflowOffset'] ||
changes['affixEnableAutoFit'] ||
changes['affixHorizontalAlignment'] ||
changes['affixIsSticky'] ||
changes['affixPlacement'] ||
changes['affixPosition'] ||
changes['affixVerticalAlignment']) {
this.#updateAlignment();
}
}
ngOnDestroy() {
this.affixOffsetChange.complete();
this.affixOverflowScroll.complete();
this.affixPlacementChange.complete();
this.#ngUnsubscribe.next();
this.#ngUnsubscribe.complete();
/*istanbul ignore else*/
if (this.#affixer) {
this.#affixer.destroy();
this.#affixer = undefined;
}
}
#updateAlignment() {
if (this.skyAffixTo && this.#affixer) {
this.#affixer.affixTo(this.skyAffixTo, {
autoFitContext: this.affixAutoFitContext,
autoFitOverflowOffset: this.affixAutoFitOverflowOffset,
enableAutoFit: this.affixEnableAutoFit,
horizontalAlignment: this.affixHorizontalAlignment,
isSticky: this.affixIsSticky,
placement: this.affixPlacement,
position: this.affixPosition,
verticalAlignment: this.affixVerticalAlignment,
});
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAffixDirective, deps: [{ token: i0.ElementRef }, { token: SkyAffixService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: SkyAffixDirective, isStandalone: true, selector: "[skyAffixTo]", inputs: { skyAffixTo: "skyAffixTo", affixAutoFitContext: "affixAutoFitContext", affixAutoFitOverflowOffset: "affixAutoFitOverflowOffset", affixEnableAutoFit: "affixEnableAutoFit", affixHorizontalAlignment: "affixHorizontalAlignment", affixIsSticky: "affixIsSticky", affixPlacement: "affixPlacement", affixPosition: "affixPosition", affixVerticalAlignment: "affixVerticalAlignment" }, outputs: { affixOffsetChange: "affixOffsetChange", affixOverflowScroll: "affixOverflowScroll", affixPlacementChange: "affixPlacementChange" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAffixDirective, decorators: [{
type: Directive,
args: [{
selector: '[skyAffixTo]',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: SkyAffixService }], propDecorators: { skyAffixTo: [{
type: Input
}], affixAutoFitContext: [{
type: Input
}], affixAutoFitOverflowOffset: [{
type: Input
}], affixEnableAutoFit: [{
type: Input
}], affixHorizontalAlignment: [{
type: Input
}], affixIsSticky: [{
type: Input
}], affixPlacement: [{
type: Input
}], affixPosition: [{
type: Input
}], affixVerticalAlignment: [{
type: Input
}], affixOffsetChange: [{
type: Output
}], affixOverflowScroll: [{
type: Output
}], affixPlacementChange: [{
type: Output
}] } });
class SkyAffixModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyAffixModule, imports: [SkyAffixDirective], exports: [SkyAffixDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAffixModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAffixModule, decorators: [{
type: NgModule,
args: [{
imports: [SkyAffixDirective],
exports: [SkyAffixDirective],
}]
}] });
/**
* @internal
* An API to provide information about a parent component's content to child components.
* For example, toolbar can use this to provide its child components with a list
* descriptor they can use to construct aria labels, or tree view can provide the node
* name to its context menus.
*/
class SkyContentInfoProvider {
#contentInfo = new ReplaySubject(1);
#currentValue = {};
patchInfo(value) {
const newValue = {
...this.#currentValue,
...value,
};
this.#currentValue = newValue;
this.#contentInfo.next(newValue);
}
getInfo() {
return this.#contentInfo.asObservable();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyContentInfoProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyContentInfoProvider }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyContentInfoProvider, decorators: [{
type: Injectable
}] });
/**
* @internal
* An API to provide default Angular component input values to child components.
*/
class SkyDefaultInputProvider {
#props = {};
setValue(componentName, inputName, value) {
const subject = this.#getSubject(componentName, inputName);
subject.next(value);
}
getValue(componentName, inputName) {
const inputDefault = this.#getSubject(componentName, inputName);
return inputDefault.asObservable();
}
#getSubject(componentName, inputName) {
const componentSubjects = this.#props[componentName] || {};
const inputSubject = componentSubjects[inputName];
if (!inputSubject) {
componentSubjects[inputName] = new ReplaySubject(1);
this.#props[componentName] = componentSubjects;
}
return componentSubjects[inputName];
}
}
/**
* Represents a single item added to the dock.
*/
class SkyDockItem {
/**
* An event that emits when the item is removed from the dock.
*/
get destroyed() {
return this.#destroyedObs;
}
#destroyed = new Subject();
#destroyedObs;
/**
* @param componentInstance The item's component instance.
* @param stackOrder The assigned stack order of the docked item.
*/
constructor(componentInstance, stackOrder) {
this.componentInstance = componentInstance;
this.stackOrder = stackOrder;
this.#destroyedObs = this.#destroyed.asObservable();
}
/**
* Removes the item from the dock.
*/
destroy() {
this.#destroyed.next();
this.#destroyed.complete();
}
}
/**
* The location on the page where the dock component should be rendered.
*/
var SkyDockLocation;
(function (SkyDockLocation) {
/**
* Renders the dock component before a given element.
*/
SkyDockLocation[SkyDockLocation["BeforeElement"] = 0] = "BeforeElement";
/**
* Renders the dock component as the last element inside the BODY element.
*/
SkyDockLocation[SkyDockLocation["BodyBottom"] = 1] = "BodyBottom";
/**
* Renders the dock component as the last element inside a given element.
*/
SkyDockLocation[SkyDockLocation["ElementBottom"] = 2] = "ElementBottom";
})(SkyDockLocation || (SkyDockLocation = {}));
/**
* @deprecated The `SkyDockModule` is no longer needed and can be removed from your application.
* @internal
*/
class SkyDockModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyDockModule }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDockModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDockModule, decorators: [{
type: NgModule,
args: [{}]
}] });
/**
* The location on the page where the dynamic component should be rendered.
*/
var SkyDynamicComponentLocation;
(function (SkyDynamicComponentLocation) {
/**
* Renders the dynamic component before a given element.
*/
SkyDynamicComponentLocation[SkyDynamicComponentLocation["BeforeElement"] = 0] = "BeforeElement";
/**
* Renders the dynamic component as the last element inside the BODY element.
*/
SkyDynamicComponentLocation[SkyDynamicComponentLocation["BodyBottom"] = 1] = "BodyBottom";
/**
* Renders the dynamic component as the first element inside the BODY element.
*/
SkyDynamicComponentLocation[SkyDynamicComponentLocation["BodyTop"] = 2] = "BodyTop";
/**
* Renders the dynamic component as the last element inside a given element.
*/
SkyDynamicComponentLocation[SkyDynamicComponentLocation["ElementBottom"] = 3] = "ElementBottom";
/**
* Renders the dynamic component as the first element inside a given element.
*/
SkyDynamicComponentLocation[SkyDynamicComponentLocation["ElementTop"] = 4] = "ElementTop";
})(SkyDynamicComponentLocation || (SkyDynamicComponentLocation = {}));
/**
* @internal
*/
function getWindow() {
return window;
}
/**
* The application window reference service references the global window variable.
* After users inject SkyAppWindowRef into a component, they can use the service to interact with
* window properties and event handlers by referencing its nativeWindow property.
*/
class SkyAppWindowRef {
/**
* The global `window` variable.
*/
get nativeWindow() {
return getWindow();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAppWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAppWindowRef, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAppWindowRef, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
/**
* Angular service for creating and rendering a dynamic component.
* @internal
*/
class SkyDynamicComponentService {
#applicationRef;
#renderer;
#windowRef;
#environmentInjector = inject(EnvironmentInjector);
constructor(applicationRef, windowRef, rendererFactory) {
this.#applicationRef = applicationRef;
this.#windowRef = windowRef;
// Based on suggestions from https://github.com/angular/angular/issues/17824
// for accessing an instance of Renderer2 in a service since Renderer2 can't
// be injected into a service. Passing undefined for both parameters results
// in the default renderer which is what we want here.
this.#renderer = rendererFactory.createRenderer(undefined, null);
}
/**
* Creates an instance of the specified component and adds it to the specified location
* on the page.
*/
createComponent(componentType, options = {
location: SkyDynamicComponentLocation.BodyBottom,
}) {
const environmentInjector = createEnvironmentInjector(options.providers ?? [], options.environmentInjector ?? this.#environmentInjector);
let componentRef;
if (options.viewContainerRef) {
componentRef = options.viewContainerRef.createComponent(componentType, {
environmentInjector,
});
}
else {
componentRef = createComponent(componentType, {
environmentInjector,
});
this.#applicationRef.attachView(componentRef.hostView);
this.#insertComponentAtLocation(componentRef, options);
}
if (options.className) {
const el = this.#getRootNode(componentRef);
this.#renderer.addClass(el, options.className);
}
return componentRef;
}
#insertComponentAtLocation(componentRef, options) {
const el = this.#getRootNode(componentRef);
const bodyEl = this.#windowRef.nativeWindow.document.body;
switch (options.location) {
case SkyDynamicComponentLocation.BeforeElement:
if (!options.referenceEl) {
throw new Error('[SkyDynamicComponentService] Could not create a component at location `SkyDynamicComponentLocation.BeforeElement` because a reference element was not provided.');
}
this.#renderer.insertBefore(options.referenceEl.parentElement, el, options.referenceEl);
break;
case SkyDynamicComponentLocation.ElementTop:
if (!options.referenceEl) {
throw new Error('[SkyDynamicComponentService] Could not create a component at location `SkyDynamicComponentLocation.ElementTop` because a reference element was not provided.');
}
this.#renderer.insertBefore(options.referenceEl, el, options.referenceEl.firstChild);
break;
case SkyDynamicComponentLocation.ElementBottom:
this.#renderer.appendChild(options.referenceEl, el);
break;
case SkyDynamicComponentLocation.BodyTop:
this.#renderer.insertBefore(bodyEl, el, bodyEl.firstChild);
break;
default:
this.#renderer.appendChild(bodyEl, el);
break;
}
}
/**
* Removes a component ref from the page
* @param componentRef Component ref for the component being removed
*/
removeComponent(componentRef) {
if (!componentRef) {
return;
}
if (!this.#applicationRef.destroyed) {
this.#applicationRef.detachView(componentRef.hostView);
}
componentRef.destroy();
}
#getRootNode(componentRef) {
// Technique for retrieving the component's root node taken from here:
// https://malcoded.com/posts/angular-dynamic-components
return componentRef.hostView.rootNodes[0];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDynamicComponentService, deps: [{ token: i0.ApplicationRef }, { token: SkyAppWindowRef }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDynamicComponentService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: SkyAppWindowRef }, { type: i0.RendererFactory2 }] });
/**
* Angular service for creating and rendering a dynamic component.
* @internal
* @deprecated Use `SkyDynamicComponentService` to create a standalone component instead.
*/
class SkyDynamicComponentLegacyService extends SkyDynamicComponentService {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDynamicComponentLegacyService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDynamicComponentLegacyService, providedIn: 'any' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDynamicComponentLegacyService, decorators: [{
type: Injectable,
args: [{
providedIn: 'any',
}]
}] });
/**
* @internal
*/
class SkyMutationObserverService {
create(callback) {
return new MutationObserver(callback);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyMutationObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyMutationObserverService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyMutationObserverService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
/**
* @internal
*/
class SkyDockDomAdapterService {
#currentDockHeight;
#mutationSvc;
#ngUnsubscribe = new Subject();
#observer;
#renderer;
#styleElement;
constructor(mutationSvc, rendererFactory) {
this.#mutationSvc = mutationSvc;
this.#renderer = rendererFactory.createRenderer(undefined, null);
}
ngOnDestroy() {
if (this.#observer) {
this.#observer.disconnect();
}
this.#ngUnsubscribe.next();
this.#ngUnsubscribe.complete();
if (this.#styleElement) {
this.#destroyStyleElement();
}
this.#currentDockHeight = this.#observer = this.#styleElement = undefined;
}
setSticky(elementRef) {
this.#renderer.addClass(elementRef.nativeElement, 'sky-dock-sticky');
}
setZIndex(zIndex, elementRef) {
this.#renderer.setStyle(elementRef.nativeElement, 'z-index', zIndex);
}
unbindDock(elementRef) {
this.#renderer.addClass(elementRef.nativeElement, 'sky-dock-unbound');
}
watchDomChanges(elementRef) {
this.#observer = this.#mutationSvc.create(() => {
this.#adjustBodyStyles(elementRef);
});
this.#observer.observe(elementRef.nativeElement, {
attributes: true,
childList: true,
characterData: true,
subtree: true,
});
fromEvent(window, 'resize')
.pipe(debounceTime(250), takeUntil(this.#ngUnsubscribe))
.subscribe(() => this.#adjustBodyStyles(elementRef));
}
#adjustBodyStyles(elementRef) {
const dockHeight = elementRef.nativeElement.getBoundingClientRect().height;
if (dockHeight === this.#currentDockHeight) {
return;
}
// Create a style element to avoid overwriting any existing inline body styles.
const styleElement = this.#renderer.createElement('style');
const textNode = this.#renderer.createText(`body { margin-bottom: ${dockHeight}px; --sky-dock-height: ${dockHeight}px; }`);
// Apply a `data-` attribute to make unit testing easier.
this.#renderer.setAttribute(styleElement, 'data-test-selector', 'sky-layout-dock-bottom-styles');
this.#renderer.appendChild(styleElement, textNode);
this.#renderer.appendChild(document.head, styleElement);
if (this.#styleElement) {
this.#destroyStyleElement();
}
this.#currentDockHeight = dockHeight;
this.#styleElement = styleElement;
}
#destroyStyleElement() {
this.#renderer.removeChild(document.head, this.#styleElement);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDockDomAdapterService, deps: [{ token: SkyMutationObserverService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDockDomAdapterService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDockDomAdapterService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: SkyMutationObserverService }, { type: i0.RendererFactory2 }] });
/**
* @internal
*/
function sortByStackOrder(a, b) {
if (a.stackOrder > b.stackOrder) {
return -1;
}
if (a.stackOrder < b.stackOrder) {
return 1;
}
return 0;
}
/**
* @internal
*/
class SkyDockComponent {
#itemRefs = [];
#options;
#changeDetector = inject(ChangeDetectorRef);
#domAdapter = inject(SkyDockDomAdapterService);
#dynamicComponentSvc = inject(SkyDynamicComponentService);
#elementRef = inject(ElementRef);
#environmentInjector = inject(EnvironmentInjector);
insertComponent(component, config = {}) {
/*istanbul ignore if: untestable*/
if (!this.target) {
throw Error('[SkyDockComponent] Could not insert the component because the target element could not be found.');
}
const componentRef = this.#dynamicComponentSvc.createComponent(component, {
environmentInjector: this.#environmentInjector,
providers: config.providers,
viewContainerRef: this.target,
});
const stackOrder = config.stackOrder !== null && config.stackOrder !== undefined
? config.stackOrder
: this.#getHighestStackOrder();
this.#itemRefs.push({
componentRef,
stackOrder,
});
this.#sortItemsByStackOrder();
this.#changeDetector.markForCheck();
return {
componentRef,
stackOrder,
};
}
removeItem(item) {
/*istanbul ignore if: untestable*/
if (!this.target) {
throw Error('[SkyDockComponent] Could not remove the item because the target element could not be found.');
}
const viewRef = item.componentRef.hostView;
this.target.remove(this.target.indexOf(viewRef));
const found = this.#itemRefs.find((i) => i.componentRef.hostView === viewRef);
if (found) {
this.#itemRefs.splice(this.#itemRefs.indexOf(found), 1);
}
}
setOptions(options) {
this.#options = options;
switch (this.#options?.location) {
case SkyDockLocation.BeforeElement:
this.#domAdapter.unbindDock(this.#elementRef);
break;
case SkyDockLocation.ElementBottom:
this.#domAdapter.setSticky(this.#elementRef);
break;
case SkyDockLocation.BodyBottom:
default:
this.#domAdapter.watchDomChanges(this.#elementRef);
break;
}
if (this.#options?.zIndex) {
this.#domAdapter.setZIndex(this.#options.zIndex, this.#elementRef);
}
}
#sortItemsByStackOrder() {
if (this.target) {
this.#itemRefs.sort(sortByStackOrder);
// Reassign the correct index for each view.
for (let i = 0, len = this.#itemRefs.length; i < len; i++) {
const item = this.#itemRefs[i];
this.target.move(item.componentRef.hostView, i);
}
}
}
#getHighestStackOrder() {
if (this.#itemRefs.length === 0) {
return 0;
}
return this.#itemRefs[0].stackOrder + 1;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SkyDockComponent, isStandalone: true, selector: "sky-dock", providers: [SkyDockDomAdapterService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #target />\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:var(--sky-viewport-left, 0);bottom:var(--sky-viewport-bottom, 0);right:var(--sky-viewport-right, 0);width:auto}:host.sky-dock-sticky{position:sticky}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDockComponent, decorators: [{
type: Component,
args: [{ selector: 'sky-dock', providers: [SkyDockDomAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container #target />\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:var(--sky-viewport-left, 0);bottom:var(--sky-viewport-bottom, 0);right:var(--sky-viewport-right, 0);width:auto}:host.sky-dock-sticky{position:sticky}\n"] }]
}], propDecorators: { target: [{
type: ViewChild,
args: ['target', {
read: ViewContainerRef,
static: true,
}]
}] } });
var _a$1;
/**
* This service docks components to specific areas on the page.
*/
class SkyDockService {
static { this._items = []; }
/**
* Returns all docked items.
*/
get items() {
return _a$1._items;
}
#dynamicComponentSvc = inject(SkyDynamicComponentService);
#subscription;
#options;
/**
* Docks a component to the bottom of the page.
* @param component The component to dock.
* @param config Options that affect the docking action.
*/
insertComponent(component, config) {
this.#subscription ??= new Subscription();
const dockRef = (_a$1.dockRef =
_a$1.dockRef || this.#createDock());
const itemRef = dockRef.instance.insertComponent(component, config);
const item = new SkyDockItem(itemRef.componentRef.instance, itemRef.stackOrder);
this.#subscription?.add(item.destroyed.subscribe(() => {
dockRef.instance.removeItem(itemRef);
_a$1._items.splice(_a$1._items.indexOf(item), 1);
if (_a$1._items.length === 0) {
this.#destroyDock();
}
}));
_a$1._items.push(item);
_a$1._items.sort(sortByStackOrder);
return item;
}
/**
* Sets options for the positioning and styling of the dock component. Since the dock service is a
* singleton instance, these options will be applied to all components inserted into the dock. In
* order to create a separate dock with different options, consumers should provide a different
* instance of the dock service.
* @param options The options for positioning and styling
*/
setDockOptions(options) {
this.#options = options;
}
#createDock() {
let dockOptions;
if (this.#options) {
let dynamicLocation;
switch (this.#options.location) {
case SkyDockLocation.BeforeElement:
dynamicLocation = SkyDynamicComponentLocation.BeforeElement;
break;
case SkyDockLocation.ElementBottom:
dynamicLocation = SkyDynamicComponentLocation.ElementBottom;
break;
default:
dynamicLocation = SkyDynamicComponentLocation.BodyTop;
break;
}
dockOptions = {
location: dynamicLocation,
referenceEl: this.#options.referenceEl,
};
}
const dockRef = this.#dynamicComponentSvc.createComponent(SkyDockComponent, dockOptions);
dockRef.instance.setOptions(this.#options);
return dockRef;
}
#destroyDock() {
this.#subscription?.unsubscribe();
this.#subscription = undefined;
this.#dynamicComponentSvc.removeComponent(_a$1.dockRef);
_a$1.dockRef = undefined;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDockService, providedIn: 'root' }); }
}
_a$1 = SkyDockService;
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDockService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
/**
* Provides services required to create dynamic components on the page.
* @deprecated The `SkyDynamicComponentService` no longer needs the `SkyDynamicComponentModule`.
* The `SkyDynamicComponentModule` can be removed from your project.
*/
class SkyDynamicComponentModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyDynamicComponentModule }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDynamicComponentModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyDynamicComponentModule, decorators: [{
type: NgModule,
args: [{}]
}] });
/**
* Wraps the FileReader API so it can be mocked in tests.
* @internal
*/
class SkyFileReaderService {
async readAsDataURL(file) {
return await new Promise((resolve, reject) => {
const reader = new FileReader();
reader.addEventListener('load', (event) => {
resolve(event.target?.result);
});
reader.addEventListener('error', () => {
reject(file);
});
reader.addEventListener('abort', () => {
reject(file);
});
reader.readAsDataURL(file);
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyFileReaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyFileReaderService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyFileReaderService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class SkyAppFormat {
formatText(format, ...args) {
return String(format).replace(/\{(\d+)\}/g, function (match, capture) {
return args[parseInt(capture, 10)];
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAppFormat, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAppFormat, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAppFormat, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
/**
* Injection token for specifying and retrieving global help options.
*/
const SKY_HELP_GLOBAL_OPTIONS = new InjectionToken('SkyHelpGlobalOptions');
/**
* Provides methods for opening and updating a globally accessible help dialog.
*/
class SkyHelpService {
/**
* Emits when the help widget ready state changes.
*/
get widgetReadyStateChange() {
return of(false);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyHelpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyHelpService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyHelpService, decorators: [{
type: Injectable
}] });
let idIndex = 0;
/**
* Generates unique IDs to be used with HTML elements.
*/
class SkyIdService {
generateId() {
idIndex++;
// Include timestamp and an incrementing index to guarantee unique IDs both during the application
// lifecycle as well as across sessions, since browsers will try to apply autocomplete options to
// elements with the same ID across sessions.
return `sky-id-gen__${new Date().getTime()}__${idIndex}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyIdService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyIdService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
/**
* Sets the element's `id` attribute to a unique ID. To reference this unique ID on other elements,
* such as in a `label` element's `for` attribute, assign this directive to a template reference
* variable, then use its `id` property.
*/
class SkyIdDirective {
get id() {
return this.#_id;
}
#_id;
constructor(elRef, renderer, idSvc) {
// Generate and apply the ID before the template is rendered
// to avoid a changed-after-checked error.
const id = idSvc.generateId();
renderer.setAttribute(elRef.nativeElement, 'id', id);
this.#_id = id;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyIdDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SkyIdService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: SkyIdDirective, isStandalone: true, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyIdDirective, decorators: [{
type: Directive,
args: [{
selector: '[skyId]',
exportAs: 'skyId',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SkyIdService }] });
class SkyIdModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyIdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyIdModule, imports: [SkyIdDirective], exports: [SkyIdDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyIdModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyIdModule, decorators: [{
type: NgModule,
args: [{
imports: [SkyIdDirective],
exports: [SkyIdDirective],
}]
}] });
/**
* @internal
*/
class SkyLayoutHostService {
get hostLayoutForChild() {
return this.#hostLayoutForChildObs;
}
#hostLayoutForChild = new Subject();
#hostLayoutForChildObs = this.#hostLayoutForChild.asObservable();
setHostLayoutForChild(layout) {
this.#hostLayoutForChild.next(layout);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLayoutHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLayoutHostService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLayoutHostService, decorators: [{
type: Injectable
}] });
const LAYOUT_FOR_CHILD_CLASS_PREFIX = 'sky-layout-host-for-child-';
const LAYOUT_CLASS_PREFIX = 'sky-layout-host-';
/**
* @internal
*/
class SkyLayoutHostDirective {
#elementRef;
#layoutForChild;
#renderer;
constructor() {
this.#elementRef = inject(ElementRef);
this.#layoutForChild = toSignal(inject(SkyLayoutHostService).hostLayoutForChild);
this.#renderer = inject(RendererFactory2).createRenderer(null, null);
this.layout = input(...(ngDevMode ? [undefined, { debugName: "layout" }] : []));
effect(() => {
const cssClass = [`${LAYOUT_CLASS_PREFIX}${this.layout() ?? 'none'}`];
const layoutForChild = this.#layoutForChild()?.layout;
if (layoutForChild) {
cssClass.push(`${LAYOUT_FOR_CHILD_CLASS_PREFIX}${layoutForChild}`);
}
const classList = this.#elementRef.nativeElement.classList.values();
for (const className of classList) {
if (className.startsWith(LAYOUT_CLASS_PREFIX) &&
!cssClass.includes(className)) {
this.#renderer.removeClass(this.#elementRef.nativeElement, className);
}
}
for (const className of cssClass) {
this.#renderer.addClass(this.#elementRef.nativeElement, className);
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLayoutHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: SkyLayoutHostDirective, isStandalone: true, selector: "[skyLayoutHost]", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SkyLayoutHostService], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLayoutHostDirective, decorators: [{
type: Directive,
args: [{
selector: '[skyLayoutHost]',
providers: [SkyLayoutHostService],
}]
}], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }] } });
/**
* Allows for announcing messages to screen reader users through the use of a common `aria-live` element.
* @internal
*/
class SkyLiveAnnouncerService {
#announcerElement;
#document;
#idService;
#durationTimeout;
#ngZone;
constructor() {
this.announcerElementChanged = new ReplaySubject(1);
this.#document = inject(DOCUMENT);
this.#idService = inject(SkyIdService);
this.#ngZone = inject(NgZone);
this.#announcerElement = this.#createLiveElement();
this.announcerElementChanged.next(this.#announcerElement);
}
/**
* Announces a message to screen readers.
* @param message Message to be announced to the screen reader.
* @param args Options for the announcement of the message.
*/
announce(message, args) {
/* safety-check */
/* istanbul ignore if */
if (!this.#announcerElement) {
this.#announcerElement = this.#createLiveElement();
this.announcerElementChanged.next(this.#announcerElement);
}
const politeness = args?.politeness ?? 'polite';
this.#announcerElement.setAttribute('aria-live', politeness);
this.clear();
clearTimeout(this.#durationTimeout);
this.#announcerElement.textContent = message;
this.#ngZone.runOutsideAngular(() => {
this.#durationTimeout = setTimeout(() => this.clear(), args?.duration ?? this.#calculateDefaultDurationFromString(message));
});
}
/**
* Clears the current text from the announcer element. Can be used to prevent
* screen readers from reading the text out again while the user is going
* through the page landmarks.
*/
clear() {
if (this.#announcerElement) {
this.#announcerElement.textContent = '';
}
}
/**
* @internal
*/
ngOnDestroy() {
this.#announcerElement?.remove();
this.#announcerElement = undefined;
this.announcerElementChanged.next(undefined);
clearTimeout(this.#durationTimeout);
}
#calculateDefaultDurationFromString(message) {
// Research suggests normal WPM is 110 for english. Lowering here to be conservative.
const baseWordsPerMinute = 80;
const minuteInMilliseconds = 60000;
const numberOfWords = message.split(' ').length;
const baseTime = (numberOfWords / baseWordsPerMinute) * minuteInMilliseconds;
// Add 50% to time to account for exceptionally slow screen reader settings and/or speech settings that leave long pauses between words.
return baseTime * 1.5;
}
#createLiveElement() {
const elementClass = 'sky-live-announcer-element';
const previousElements = Array.from(this.#document.getElementsByClassName(elementClass));
const liveEl = this.#document.createElement('div');
// Remove any old containers. This can happen when coming in from a server-side-rendered page.
for (const previousElement of previousElements) {
previousElement.remove();
}
liveEl.classList.add(elementClass);
liveEl.classList.add('sky-screen-reader-only');
liveEl.setAttribute('aria-atomic', 'true');
liveEl.setAttribute('aria-live', 'polite');
liveEl.id = this.#idService.generateId();
this.#document.body.appendChild(liveEl);
return liveEl;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLiveAnnouncerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLiveAnnouncerService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLiveAnnouncerService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [] });
/**
* @deprecated The `SkyLogService` no longer needs the `SkyLogModule`.
* The `SkyLogModule` can be removed from your project.
*/
class SkyLogModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyLogModule }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLogModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLogModule, decorators: [{
type: NgModule,
args: [{}]
}] });
/**
* @internal
*/
var SkyLogLevel;
(function (SkyLogLevel) {
SkyLogLevel[SkyLogLevel["Info"] = 1] = "Info";
SkyLogLevel[SkyLogLevel["Warn"] = 2] = "Warn";
SkyLogLevel[SkyLogLevel["Error"] = 3] = "Error";
})(SkyLogLevel || (SkyLogLevel = {}));
/**
* @internal
*/
const SKY_LOG_LEVEL = new InjectionToken('SkyLogLevel');
const previousWarnings = new Set();
/**
* Logs information to the console based on the application's log level as
* provided by the `SKY_LOG_LEVEL` injection token. If no token is provided,
* only `error` logs will be shown.
* @internal
*/
class SkyLogService {
#applicationLogLevel;
#formatter;
constructor(formatter, applicationLogLevel) {
this.#formatter = formatter;
this.#applicationLogLevel = applicationLogLevel ?? SkyLogLevel.Error;
}
/**
* Clears previously-logged messages. Primarily used for unit
* testing this service.
*/
static clearPreviousLogs() {
previousWarnings.clear();
}
/**
* Logs a deprecation warning for a class, property, function, etc. This will
* be logged as a console warning unless a different log level is given in the
* `args` parameter.
* @param name The name of the deprecated class, property, function, etc.
* @param args Information about the deprecation and replacement recommendations.
*/
deprecated(name, args) {
const logLevel = args?.logLevel ?? SkyLogLevel.Warn;
name = this.#convertStringToCode(name);
if (this.#canLog(logLevel)) {
const messageParts = [];
if (args?.deprecationMajorVersion) {
messageParts.push(this.#formatter.formatText('{0} is deprecated starting in SKY UX {1}.', name, args.deprecationMajorVersion.toLocaleString()));
}
else {
messageParts.push(this.#formatter.formatText('{0} is deprecated.', name));
}
if (args?.removalMajorVersion) {
messageParts.push(this.#formatter.formatText('We will remove it in version {0}.', args.removalMajorVersion.toLocaleString()));
}
else {
messageParts.push('We will remove it in a future major version.');
}
if (args?.replacementRecommendation) {
messageParts.push(args.replacementRecommendation);
}
if (args?.moreInfoUrl) {
messageParts.push(this.#formatter.formatText('For more information, see {0}.', args.moreInfoUrl));
}
this.#logBasedOnLevel(logLevel, messageParts.join(' '));
}
}
/**
* Logs a console error if the application's log level is `SkyLogLevel.Error`.
* @param message The error message
* @param params Optional parameters for the error message.
*/
error(message, params) {
if (this.#canLog(SkyLogLevel.Error)) {
this.#logWithParams('error', message, params);
}
}
/**
* Logs console information if the application's log level is `SkyLogLevel.Info` or above.
* @param message The informational message
* @param params Optional parameters for the informational message.
*/
info(message, params) {
if (this.#canLog(SkyLogLevel.Info)) {
this.#logWithParams('log', message, params);
}
}
/**
* Logs a console warning if the application's log level is `SkyLogLevel.Warn` or above.
* @param message The warning message
* @param params Optional parameters for the warning message.
*/
warn(message, params) {
if (this.#canLog(SkyLogLevel.Warn)) {
const messageKey = this.#buildMessageKey(message, params);
// Only log each warning once per application instance to avoid drowning out other
// important messages in the console.
if (!previousWarnings.has(message)) {
this.#logWithParams('warn', message, params);
previousWarnings.add(messageKey);
}
}
}
#convertStringToCode(typeString) {
if (typeString.charAt(0) !== '`' && typeString.charAt(-1) !== '`') {
typeString = '`' + typeString + '`';
}
return typeString;
}
#canLog(intendedLogLevel) {
return intendedLogLevel >= this.#applicationLogLevel;
}
#logBasedOnLevel(logLevel, message, params) {
switch (logLevel) {
case SkyLogLevel.Info:
this.info(message, params);
break;
case SkyLogLevel.Warn:
this.warn(message, params);
break;
case SkyLogLevel.Error:
this.error(message, params);
break;
}
}
#logWithParams(logMethod, message, params) {
if (params) {
console[logMethod](message, ...params);
}
else {
console[logMethod](message);
}
}
#buildMessageKey(message, params) {
let key = message;
if (params?.length) {
key = `${key} ${params.join(' ')}`;
}
return key;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLogService, deps: [{ token: SkyAppFormat }, { token: SKY_LOG_LEVEL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLogService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyLogService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: SkyAppFormat }, { type: SkyLogLevel, decorators: [{
type: Optional
}, {
type: Inject,
args: [SKY_LOG_LEVEL]
}] }] });
/**
* Used to override a breakpoint observer for specific execution contexts.
* @internal
*/
const SKY_BREAKPOINT_OBSERVER = new InjectionToken('SKY_BREAKPOINT_OBSERVER');
const errorTest = /ResizeObserver loop completed with undelivered notifications/i;
let errorLogRegistered = false;
let originalOnError = undefined;
const errorHandler = (event) => {
if (errorTest.test(event.message)) {
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
return false;
}
return undefined;
};
const onError = (event) => {
const message = typeof event === 'string' ? event : event.message;
// This is necessary to prevent the test runner from failing on errors, but challenging to reliably test.
/* istanbul ignore next */
if (errorTest.test(message)) {
if (event instanceof ErrorEvent) {
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
}
return false;
}
return originalOnError?.call(window, event);
};
/**
* Service to create rxjs observables for changes to the content box dimensions of elements.
*/
class SkyResizeObserverService {
#ngUnsubscribe = new Subject();
#zone = inject(NgZone);
#resizeObserver = this.#zone.runOutsideAngular(() => new ResizeObserver((entries) => this.#zone.run(() => this.#resizeSubject.next(entries))));
#resizeSubject = new Subject();
#tracking = new Map();
#window = inject(SkyAppWindowRef);
constructor() {
this.#expectWindowError();
// Because the resize observer is a native browser API, it does not shut down
// synchronously when the service is destroyed. Leave the error handling
// accommodation in place until the application is destroyed. This also works
// for the test runner.
inject(ApplicationRef).onDestroy(() => this.#resetWindowError());
}
ngOnDestroy() {
this.#ngUnsubscribe.next();
this.#ngUnsubscribe.complete();
this.#resizeObserver.disconnect();
}
/**
* Create rxjs observable to get size changes for an element ref.
*/
observe(element) {
const checkTracking = this.#tracking.has(element.nativeElement);
if (!checkTracking) {
this.#tracking.set(element.nativeElement, new Observable((observer) => {
const subscription = this.#resizeSubject.subscribe(observer);
this.#resizeObserver?.observe(element.nativeElement);
return () => {
this.#resizeObserver?.unobserve(element.nativeElement);
subscription.unsubscribe();
this.#tracking.delete(element.nativeElement);
};
}).pipe(filter(Boolean), filter((entries) => entries.some((entry) => entry.target === element.nativeElement)), map((entries) => entries.find((entry) => entry.target === element.nativeElement)),
// Ignore subpixel changes.
distinctUntilChanged((a, b) => Math.round(a.contentRect.width) ===
Math.round(b.contentRect.width) &&
Math.round(a.contentRect.height) ===
Math.round(b.contentRect.height)),
// Emit the last value for late subscribers. Track references so it
// un-observes when all subscribers are gone.
shareReplay({ bufferSize: 1, refCount: true }),
// Only emit prior to an animation frame to prevent layout thrashing.
observeOn(animationFrameScheduler), takeUntil$1(this.#ngUnsubscribe)));
}
return this.#tracking.get(element.nativeElement);
}
#expectWindowError() {
if (!errorLogRegistered) {
errorLogRegistered = true;
// ResizeObserver throws an error when it is disconnected while it is
// still observing an element. When an element is no longer observed, this
// is not a concern.
this.#zone.runOutsideAngular(() => this.#window.nativeWindow.addEventListener('error', errorHandler));
}
if (this.#window.nativeWindow.onerror !== onError) {
originalOnError = this.#window.nativeWindow.onerror;
this.#window.nativeWindow.onerror = onError;
}
}
#resetWindowError() {
this.#window.nativeWindow.removeEventListener('error', errorHandler);
if (originalOnError) {
this.#window.nativeWindow.onerror = originalOnError;
originalOnError = undefined;
}
errorLogRegistered = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyResizeObserverService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyResizeObserverService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [] });
const QUERIES$1 = [
['xs', (width) => width > 0 && width <= 767],
['sm', (width) => width > 767 && width <= 991],
['md', (width) => width > 991 && width <= 1199],
['lg', (width) => width > 1199],
];
/**
* Emits when the width of the host container changes.
* @internal
*/
class SkyContainerBreakpointObserver {
#elementRef = inject(ElementRef);
#resizeObserver = inject(SkyResizeObserverService);
get breakpointChange() {
return this.#breakpointChangeObs;
}
#breakpoint;
#breakpointChange = new ReplaySubject(1);
#breakpointChangeObs = this.#breakpointChange.asObservable();
constructor() {
this.#resizeObserver
.observe(this.#elementRef)
.pipe(takeUntilDestroyed())
.subscribe((entry) => {
this.#checkBreakpoint(entry.contentRect.width);
});
afterNextRender(() => {
this.#checkWidth();
});
}
ngOnDestroy() {
this.destroy();
}
destroy() {
this.#breakpointChange.complete();
}
#checkBreakpoint(width) {
for (const [breakpoint, check] of QUERIES$1) {
if (breakpoint !== this.#breakpoint && check(width)) {
this.#breakpoint = breakpoint;
this.#notifyBreakpointChange(breakpoint);
break;
}
}
}
#checkWidth() {
const width = this.#elementRef.nativeElement.offsetWidth ?? 0;
this.#checkBreakpoint(width);
}
#notifyBreakpointChange(breakpoint) {
this.#breakpointChange.next(breakpoint);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyContainerBreakpointObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyContainerBreakpointObserver }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyContainerBreakpointObserver, decorators: [{
type: Injectable
}], ctorParameters: () => [] });
const QUERIES = new Map([
['xs', '(max-width: 767px)'],
['sm', '(min-width: 768px) and (max-width: 991px)'],
['md', '(min-width: 992px) and (max-width: 1199px)'],
['lg', '(min-width: 1200px)'],
]);
/**
* Emits when the viewport width changes.
* @internal
*/
class SkyMediaBreakpointObserver {
get breakpointChange() {
return this.#breakpointChangeObs;
}
#breakpointChange = new ReplaySubject(1);
#breakpointChangeObs = this.#breakpointChange.asObservable();
#listeners = new Map();
constructor() {
for (const [breakpoint, query] of QUERIES.entries()) {
const mq = matchMedia(query);
const listener = (evt) => {
if (evt.matches) {
this.#notifyBreakpointChange(breakpoint);
}
};
mq.addEventListener('change', listener);
if (mq.matches) {
this.#notifyBreakpointChange(breakpoint);
}
this.#listeners.set(mq, listener);
}
}
ngOnDestroy() {
this.destroy();
}
destroy() {
this.#breakpointChange.complete();
for (const [query, listener] of this.#listeners.entries()) {
query.removeEventListener('change', listener);
}
this.#listeners.clear();
}
#notifyBreakpointChange(breakpoint) {
this.#breakpointChange.next(breakpoint);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyMediaBreakpointObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyMediaBreakpointObserver, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyMediaBreakpointObserver, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [] });
const DEFAULT_BREAKPOINT$1 = SkyMediaBreakpoints.md;
/**
* Utility used to subscribe to viewport and container breakpoint changes.
*/
class SkyMediaQueryService {
#breakpointObserver = inject(SkyMediaBreakpointObserver);
/**
* Emits when the breakpoint changes.
*/
get breakpointChange() {
return this.#breakpointObserver.breakpointChange;
}
/**
* The size for the `xs` breakpoint.
* @default "(max-width: 767px)"
*/
static { this.xs = '(max-width: 767px)'; }
/**
* The size for the `sm` breakpoint.
* @default "(min-width: 768px) and (max-width: 991px)"
*/
static { this.sm = '(min-width: 768px) and (max-width: 991px)'; }
/**
* The size for the `md` breakpoint.
* @default "(min-width: 992px) and (max-width: 1199px)"
*/
static { this.md = '(min-width: 992px) and (max-width: 1199px)'; }
/**
* The size for the `lg` breakpoint.
* @default "(min-width: 1200px)"
*/
static { this.lg = '(min-width: 1200px)'; }
/**
* Returns the current breakpoint.
* @deprecated Subscribe to the `breakpointChange` observable instead.
*/
get current() {
return this.#currentBreakpoint();
}
#currentBreakpoint = toSignal(this.#breakpointObserver.breakpointChange.pipe(map((breakpoint) => toSkyMediaBreakpoints(breakpoint))), {
initialValue: DEFAULT_BREAKPOINT$1,
});
// Keep NgZone as a constructor param so that consumer mocks don't encounter typing errors.
constructor(_zone) { }
ngOnDestroy() {
this.destroy();
}
/**
* @internal
*/
destroy() {
this.#breakpointObserver.destroy();
}
/**
* Subscribes to screen size changes.
* @param listener Specifies a function that is called when breakpoints change.
* @deprecated Subscribe to the `breakpointChange` observable instead.
*/
subscribe(listener) {
return this.#breakpointObserver.breakpointChange.subscribe({
next: (breakpoint) => {
listener(toSkyMediaBreakpoints(breakpoint));
},
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyMediaQueryService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyMediaQueryService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyMediaQueryService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: i0.NgZone }] });
/**
* Overrides the default media breakpoint observer with the given observer.
* @internal
*/
function provideSkyBreakpointObserver(observer) {
return [
SkyMediaQueryService,
observer,
{
provide: SkyMediaBreakpointObserver,
useFactory() {
return (
// Yield to the injection token, if it's defined.
inject(SKY_BREAKPOINT_OBSERVER, { optional: true }) ??
inject(observer));
},
},
];
}
/**
* Overrides the `SkyMediaQueryService` to emit breakpoint changes when the host
* container is resized. This directive also adds SKY UX CSS classes to the
* host element to allow for responsive styles.
*/
class SkyResponsiveHostDirective {
#injector = inject(Injector);
#mediaSvc = inject(SkyMediaQueryService);
/**
* Emits when the breakpoint changes.
*/
get breakpointChange() {
return this.#mediaSvc.breakpointChange;
}
/**
* The injector of the responsive host. Useful when displaying child components
* via `ngTemplateOutlet`.
* @example```
* <my-container #responsiveHost="skyResponsiveHost">
* <ng-container
* [ngTemplateOutlet]="myTemplate"
* [ngTemplateOutletInjector]="responsiveHost.injector"
* />
* </my-container>
* ```
*/
get injector() {
return this.#injector;
}
constructor() {
const adapter = inject(SkyCoreAdapterService);
const elementRef = inject(ElementRef);
this.breakpointChange.subscribe((breakpoint) => {
adapter.setResponsiveContainerClass(elementRef, breakpoint);
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyResponsiveHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: SkyResponsiveHostDirective, isStandalone: true, selector: "[skyResponsiveHost]", providers: [provideSkyBreakpointObserver(SkyContainerBreakpointObserver)], exportAs: ["skyResponsiveHost"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyResponsiveHostDirective, decorators: [{
type: Directive,
args: [{
exportAs: 'skyResponsiveHost',
providers: [provideSkyBreakpointObserver(SkyContainerBreakpointObserver)],
selector: '[skyResponsiveHost]',
}]
}], ctorParameters: () => [] });
/**
* @deprecated The `SkyMediaQueryService` no longer needs the `SkyMediaQueryModule`.
* The `SkyMediaQueryModule` can be removed from your project.
*/
class SkyMediaQueryModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyMediaQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyMediaQueryModule }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyMediaQueryModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyMediaQueryModule, decorators: [{
type: NgModule,
args: [{}]
}] });
/* istanbul ignore file */
/**
* NOTICE: DO NOT MODIFY THIS FILE!
* The contents of this file were automatically generated by
* the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-core' schematic.
* To update this file, simply rerun the command.
*/
const RESOURCES = {
'EN-US': {
skyux_numeric_billions_symbol: { message: 'B' },
skyux_numeric_millions_symbol: { message: 'M' },
skyux_numeric_thousands_symbol: { message: 'K' },
skyux_numeric_trillions_symbol: { message: 'T' },
},
'FR-CA': {
skyux_numeric_billions_symbol: { message: 'G' },
skyux_numeric_millions_symbol: { message: 'M' },
skyux_numeric_thousands_symbol: { message: 'K' },
skyux_numeric_trillions_symbol: { message: 'T' },
},
};
SkyLibResourcesService.addResources(RESOURCES);
/**
* Import into any component library module that needs to use resource strings.
*/
class SkyCoreResourcesModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyCoreResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyCoreResourcesModule, exports: [SkyI18nModule] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyCoreResourcesModule, imports: [SkyI18nModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyCoreResourcesModule, decorators: [{
type: NgModule,
args: [{
exports: [SkyI18nModule],
}]
}] });
/**
* Provides arguments for the number to format.
* @deprecated Use the `SkyNumericOptions` interface instead.
* @internal
*/
class NumericOptions {
constructor() {
this.digits = 1;
this.format = 'number';
this.currencySign = 'standard';
this.iso = 'USD';
this.truncate = true;
this.truncateAfter = 1000;
const logService = new SkyLogService(new SkyAppFormat());
logService.deprecated('NumericOptions', {
deprecationMajorVersion: 7,
moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/numeric',
replacementRecommendation: 'Use the `SkyNumericOptions` interface instead.',
});
}
}
/* eslint-disable eqeqeq */
// This file is mostly ported from the Angular 4.x NumberPipe in order to maintain the old
// behavior of using the `Intl` API for formatting numbers rather than having to register every
// supported locale.
// https://github.com/angular/angular/blob/4.4.x/packages/common/src/pipes/number_pipe.ts
function isNumeric(value) {
return !isNaN(value - parseFloat(value));
}
function parseIntAutoRadix(text) {
const result = parseInt(text, 10);
/* istanbul ignore next */
if (isNaN(result)) {
throw new Error('Invalid integer literal when parsing ' + text);
}
return result;
}
class SkyNumberFormatUtility {
static { this._NUMBER_FORMAT_REGEXP = /^(\d+)?\.((\d+)(-(\d+))?)?$/; }
static formatNumber(locale, value, style, digits, currency = null, currencyDisplay = 'code', currencySign) {
if (value == null) {
return null;
}
// Convert strings to numbers
value = typeof value === 'string' && isNumeric(value) ? +value : value;
if (typeof value !== 'number') {
throw Error(`SkyInvalidPipeArgument: '${value}'`);
}
let minInt = undefined;
let minFraction = undefined;
let maxFraction = undefined;
if (style !== SkyIntlNumberFormatStyle.Currency) {
// rely on Intl default for currency
minInt = 1;
minFraction = 0;
maxFraction = 3;
}
if (digits) {
const parts = digits.match(this._NUMBER_FORMAT_REGEXP);
if (parts === null) {
throw new Error(`${digits} is not a valid digit info for number pipes`);
}
/* istanbul ignore else */
if (parts[1] != null) {
// min integer digits
minInt = parseIntAutoRadix(parts[1]);
}
/* istanbul ignore else */
if (parts[3] != null) {
// min fraction digits
minFraction = parseIntAutoRadix(parts[3]);
}
/* istanbul ignore else */
if (parts[5] != null) {
// max fraction digits
maxFraction = parseIntAutoRadix(parts[5]);
}
}
return SkyIntlNumberFormatter.format(value, locale, style, {
minimumIntegerDigits: minInt,
minimumFractionDigits: minFraction,
maximumFractionDigits: maxFraction,
currency: currency,
currencyDisplay: currencyDisplay,
currencySign: currencySign,
});
}
}
class SkyNumericService {
#resourcesSvc;
#symbolIndex;
constructor(resourcesSvc) {
/**
* The browser's current locale.
* @internal
*/
this.currentLocale = 'en-US';
/**
* @internal
*/
this.shortSymbol = '';
this.#resourcesSvc = resourcesSvc;
this.#symbolIndex = [
{ value: 1e12, label: this.#getSymbol('skyux_numeric_trillions_symbol') },
{ value: 1e9, label: this.#getSymbol('skyux_numeric_billions_symbol') },
{ value: 1e6, label: this.#getSymbol('skyux_numeric_millions_symbol') },
{ value: 1e3, label: this.#getSymbol('skyux_numeric_thousands_symbol') },
];
}
/**
* Formats a number based on the provided options.
* @param value The number to format.
* @param options Format options.
*/
formatNumber(value, options) {
if (value === undefined || value === null || isNaN(value)) {
return '';
}
const numericOptions = {
digits: 0,
format: 'number',
currencySign: 'standard',
iso: 'USD',
truncateAfter: 1000,
...options,
};
const decimalPlaceRegExp = /\.0+$|(\.[0-9]*[1-9])0+$/;
const locale = numericOptions.locale || this.currentLocale;
const digits = numericOptions.digits || 0;
// Get the symbol for the number after rounding, since rounding could push the number
// into a different symbol range.
let roundedNumber = this.#roundNumber(value, digits);
const roundedNumberAbs = Math.abs(roundedNumber);
let suffix = '';
for (let i = 0; i < this.#symbolIndex.length; i++) {
let symbol = this.#symbolIndex[i];
if (numericOptions.truncate &&
numericOptions.truncateAfter !== undefined &&
roundedNumberAbs >= numericOptions.truncateAfter &&
roundedNumberAbs >= symbol.value) {
roundedNumber = this.#roundNumber(value / symbol.value, digits);
if (Math.abs(roundedNumber) === 1000 && i > 0) {
// Rounding caused the number to cross into the range of the next symbol.
symbol = this.#symbolIndex[i - 1];
roundedNumber /= 1000;
}
suffix = symbol.label;
break;
}
}
let output = roundedNumber.toString().replace(decimalPlaceRegExp, '$1') + suffix;
this.#storeShortenSymbol(output);
let digitsFormatted;
let isDecimal = false;
// Checks the string entered for format. Using toLowerCase to ignore case.
switch (numericOptions.format?.toLowerCase()) {
// In a case where a decimal value was not shortened and
// the digit input is 2 or higher, it forces 2 digits.
// For example, this prevents a value like $15.50 from displaying as $15.5.
// Note: This will need to be reviewed if we support currencies with
// three decimal digits.
case 'currency':
isDecimal = value % 1 !== 0;
if (numericOptions.minDigits) {
digitsFormatted = `1.${numericOptions.minDigits}-${digits}`;
}
else if (isDecimal && digits >= 2) {
digitsFormatted = `1.2-${digits}`;
}
else {
digitsFormatted = `1.0-${digits}`;
}
output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), SkyIntlNumberFormatStyle.Currency, digitsFormatted, numericOptions.iso, numericOptions.currencyDisplay ?? 'symbol', numericOptions.currencySign);
// ^^^^^^ Result can't be null since the sanitized input is always a number.
break;
// The following is a catch-all to ensure that if
// anything but currency (or a future option) are entered,
// it will be treated like a number.
default:
// Ensures localization of the number to ensure comma and
// decimal separator
if (numericOptions.minDigits) {
digitsFormatted = `1.${numericOptions.minDigits}-${digits}`;
}
else if (numericOptions.truncate) {
digitsFormatted = `1.0-${digits}`;
}
else {
digitsFormatted = `1.${digits}-${digits}`;
}
output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), SkyIntlNumberFormatStyle.Decimal, digitsFormatted);
// ^^^^^^ Result can't be null since the sanitized input is always a number.
break;
}
if (numericOptions.truncate) {
output = this.#replaceShortenSymbol(output);
}
return output;
}
/**
* Rounds a given number
*
* JS's limitation - numbers bigger than Number.MIN_SAFE_INTEGER or Number.MAX_SAFE_INTEGER
* are not guaranteed to be represented or rounded correctly
* @param value - value to round
* @param precision - what precision to round with, defaults to 0 decimal places
*/
#roundNumber(value, precision) {
if (precision < 0) {
throw new Error('SkyInvalidArgument: precision must be >= 0');
}
/* Sanity check - ignoring coverage but should not ignore if we make this method public */
/* istanbul ignore next */
if (isNaN(value) || value === null) {
return 0;
}
const scaledValue = this.#scaleNumberByPowerOfTen(value, precision, true);
const scaledRoundedValue = Math.round(scaledValue);
const unscaledRoundedValue = this.#scaleNumberByPowerOfTen(scaledRoundedValue, precision, false);
return unscaledRoundedValue;
}
/**
* Scales a given number by a power of 10
* @param value - value to scale
* @param scalar - 10^scalar
* @param scaleUp - whether to increase or decrease the value
*/
#scaleNumberByPowerOfTen(value, scalar, scaleUp) {
const valueStr = value.toString().toLowerCase();
const isExponentFormat = valueStr.includes('e');
if (isExponentFormat) {
const [base, exp] = valueStr.split('e');
const newExp = scaleUp ? Number(exp) + scalar : Number(exp) - scalar;
return Number(`${base}e${newExp}`);
}
else {
const e = scaleUp ? 'e' : 'e-';
return Number(`${value}${e}${scalar}`);
}
}
/**
* Stores the symbol added from shortening to reapply later.
* @param value The string to derive the shorten symbol from.
*/
#storeShortenSymbol(value) {
const symbols = this.#symbolIndex.map((s) => s.label);
const regexp = new RegExp(symbols.join('|'), 'ig');
const match = value.match(regexp);
this.shortSymbol = match ? match.toString() : '';
}
/**
* Must have previously called storeShortenSymbol to have something to replace.
* Finds the last number in the formatted number, gets the index of the position
* after that character and re-inserts the symbol.
* Works regardless of currency symbol position.
* @param value The string to modify.
*/
#replaceShortenSymbol(value) {
const result = /(\d)(?!.*\d)/g.exec(value);
/*istanbul ignore else*/
if (result) {
const pos = result.index + result.length;
const output = value.substring(0, pos) + this.shortSymbol + value.substring(pos);
return output;
}
else {
return value;
}
}
#getSymbol(key) {
// TODO: Need to implement the async `getString` method in a breaking change.
return this.#resourcesSvc.getStringForLocale({ locale: 'en_US' }, key);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyNumericService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyNumericService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyNumericService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: i1.SkyLibResourcesService }] });
/**
* Shortens numbers to rounded numbers and abbreviation characters such as K for thousands,
* M for millions, B for billions, and T for trillions. The pipe also formats for currency.
* Be sure you have a space after the two curly brackets opening the pipe and
* a space before the two curly brackets closing the pipe or it will not work.
*/
class SkyNumericPipe {
#cacheKey;
#changeDetector;
#formattedValue;
#ngUnsubscribe = new Subject();
#numericSvc;
#providerLocale;
constructor(localeProvider, numericSvc, changeDetector) {
this.#numericSvc = numericSvc;
this.#changeDetector = changeDetector;
localeProvider
.getLocaleInfo()
.pipe(takeUntil(this.#ngUnsubscribe))
.subscribe((localeInfo) => {
this.#providerLocale = localeInfo.locale;
numericSvc.currentLocale = this.#providerLocale;
this.#changeDetector.markForCheck();
});
}
ngOnDestroy() {
this.#ngUnsubscribe.next();
this.#ngUnsubscribe.complete();
}
/**
* Formats a number based on the provided options.
*/
transform(value, config) {
if (value === undefined || value === null || isNaN(value)) {
return '';
}
const newCacheKey = (config ? JSON.stringify(config, Object.keys(config).sort()) : '') +
`${value}_${config?.locale || this.#providerLocale}`;
/* If the value and locale are the same as the last transform then return the previous value
instead of reformatting. */
if (this.#formattedValue && this.#cacheKey === newCacheKey) {
return this.#formattedValue;
}
const options = new NumericOptions();
// The default number of digits is `1`. When truncate is disabled, set digits
// to `0` to avoid the unnecessary addition of `.0` at the end of the formatted number.
if (config && config.truncate === false && config.digits === undefined) {
options.digits = 0;
}
// If the minimum digits is less than the set maximum digits then throw an error
if (config &&
config.minDigits &&
config.digits &&
config.minDigits > config.digits) {
throw new Error('The `digits` property must be greater than or equal to the `minDigits` property');
// If there is a minimum digits given but not a maximum then default the maximum to the minimum
}
else if (config && config.minDigits && !config.digits) {
options.digits = config.minDigits;
}
Object.assign(options, config);
// Assign properties for proper result caching.
this.#cacheKey = newCacheKey;
this.#formattedValue = this.#numericSvc.formatNumber(value, options);
return this.#formattedValue;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyNumericPipe, deps: [{ token: i1.SkyAppLocaleProvider }, { token: SkyNumericService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyNumericPipe, isStandalone: true, name: "skyNumeric", pure: false }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyNumericPipe, decorators: [{
type: Pipe,
args: [{
name: 'skyNumeric',
pure: false,
}]
}], ctorParameters: () => [{ type: i1.SkyAppLocaleProvider }, { type: SkyNumericService }, { type: i0.ChangeDetectorRef }] });
class SkyNumericModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyNumericModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyNumericModule, imports: [SkyCoreResourcesModule, SkyNumericPipe], exports: [SkyNumericPipe] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyNumericModule, providers: [SkyNumericPipe], imports: [SkyCoreResourcesModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyNumericModule, decorators: [{
type: NgModule,
args: [{
imports: [SkyCoreResourcesModule, SkyNumericPipe],
providers: [SkyNumericPipe],
exports: [SkyNumericPipe],
}]
}] });
/**
* Represents a new overlay instance. It is used to manage the "closed" state of the overlay,
* and access any public members on the appended content component instance.
*/
class SkyOverlayInstance {
/**
* Emits when the overlay is clicked (but not its content).
*/
get backdropClick() {
return this.#backdropClickObs;
}
/**
* Emits after the overlay is closed.
*/
get closed() {
return this.#closedObs;
}
#backdropClick;
#backdropClickObs;
#closed;
#closedObs;
constructor(
/**
* The configuration for the overlay.
*/
config, componentRef) {
this.config = config;
this.componentRef = componentRef;
this.id = this.componentRef.instance.id;
this.componentRef.instance.closed.subscribe(() => {
this.#closed.next();
this.#closed.complete();
this.#backdropClick.complete();
});
this.componentRef.instance.backdropClick.subscribe(() => {
this.#backdropClick.next();
});
this.#backdropClick = new Subject();
this.#closed = new Subject();
this.#backdropClickObs = this.#backdropClick.asObservable();
this.#closedObs = this.#closed.asObservable();
}
/**
* Creates and attaches a component to the overlay.
* @param component The component to attach.
* @param providers Custom providers to apply to the component.
*/
attachComponent(component, providers) {
const componentRef = this.componentRef.instance.attachComponent(component, providers);
return componentRef.instance;
}
/**
* Attaches a `TemplateRef` to the overlay.
* @param templateRef The `TemplateRef` to attach.
* @param context The context to provide to the template.
*/
attachTemplate(templateRef, context) {
this.componentRef.instance.attachTemplate(templateRef, context);
}
}
/**
* @deprecated The `SkyOverlayModule` is no longer needed and can be removed from your application.
* @internal
*/
class SkyOverlayModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayModule }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayModule, decorators: [{
type: NgModule,
args: [{}]
}] });
/**
* @internal
*/
class SkyOverlayAdapterService {
#renderer;
#styleElement;
constructor(rendererFactory) {
this.#renderer = rendererFactory.createRenderer(undefined, null);
}
restrictBodyScroll() {
// Create a style element to avoid overwriting any existing inline body styles.
const styleElement = this.#renderer.createElement('style');
const textNode = this.#renderer.createText('body { overflow: hidden }');
// Apply a `data-` attribute to make unit testing easier.
this.#renderer.setAttribute(styleElement, 'data-test-selector', 'sky-overlay-restrict-scroll-styles');
this.#renderer.appendChild(styleElement, textNode);
this.#renderer.appendChild(document.head, styleElement);
if (this.#styleElement) {
this.#destroyStyleElement();
}
this.#styleElement = styleElement;
}
releaseBodyScroll() {
this.#destroyStyleElement();
}
#destroyStyleElement() {
/* istanbul ignore else */
if (this.#styleElement &&
this.#styleElement.parentElement === document.head) {
this.#renderer.removeChild(document.head, this.#styleElement);
}
}
addAriaHiddenToSiblings(overlayElementRef) {
const overlayElement = overlayElementRef.nativeElement;
const hostSiblings = overlayElement.parentElement.children;
const siblingAriaHiddenCache = new Map();
for (const element of hostSiblings) {
if (element !== overlayElement &&
!element.hasAttribute('aria-live') &&
element.nodeName.toLowerCase() !== 'script' &&
element.nodeName.toLowerCase() !== 'style') {
// preserve previous aria-hidden status of elements outside of modal host
siblingAriaHiddenCache.set(element, element.getAttribute('aria-hidden'));
element.setAttribute('aria-hidden', 'true');
}
}
return siblingAriaHiddenCache;
}
restoreAriaHiddenForSiblings(siblingAriaHiddenCache) {
siblingAriaHiddenCache.forEach((previousValue, element) => {
// if element had aria-hidden status prior, restore status
if (element.parentElement) {
if (previousValue) {
element.setAttribute('aria-hidden', previousValue);
}
else {
element.removeAttribute('aria-hidden');
}
}
});
siblingAriaHiddenCache.clear();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayAdapterService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayAdapterService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
/**
* Contextual information for each overlay.
* @internal
*/
class SkyOverlayContext {
constructor(config) {
this.config = config;
}
}
/**
* @internal
*/
const SKY_STACKING_CONTEXT = new InjectionToken('SkyStackingContext');
const POSITION_DEFAULT = 'fixed';
/**
* Omnibar is 1000.
* See: https://github.com/blackbaud/auth-client/blob/master/src/omnibar/omnibar.ts#L139
* ---
* Modals start their z-indexes at 1040. However, each modal's z-index is a multiple of 10, so it
* will be difficult to reliably predict a z-index that will always appear above all other
* layers. Starting the z-index for overlays at a number much greater than modals will accommodate
* the most reasonable of scenarios.
* See: https://github.com/blackbaud/skyux-modals/blob/master/src/app/public/modules/modal/modal-host.service.ts#L22
* (NOTE: It should be noted that modals do not use the overlay service, which is something we
* should do in the near future to make sure z-indexes are predictable across all component
* libraries.)
*/
let uniqueZIndex = 5000;
/**
* @internal
*/
class SkyOverlayComponent {
get backdropClick() {
return this.#backdropClickObs;
}
get closed() {
return this.#closedObs;
}
#backdropClick;
#backdropClickObs;
#closed;
#closedObs;
#ngUnsubscribe;
#routerSubscription;
#siblingAriaHiddenCache;
#adapter;
#changeDetector;
#context;
#coreAdapter;
#elementRef;
#environmentInjector;
#idSvc;
#router;
constructor() {
this.wrapperClass = '';
this.enablePointerEvents = false;
this.showBackdrop = false;
this.zIndex = `${++uniqueZIndex}`;
this.clipPath$ = new ReplaySubject(1);
this.position = POSITION_DEFAULT;
this.#ngUnsubscribe = new Subject();
this.#siblingAriaHiddenCache = new Map();
this.#adapter = inject(SkyOverlayAdapterService);
this.#changeDetector = inject(ChangeDetectorRef);
this.#context = inject(SkyOverlayContext);
this.#coreAdapter = inject(SkyCoreAdapterService);
this.#elementRef = inject(ElementRef);
this.#environmentInjector = inject(EnvironmentInjector);
this.#idSvc = inject(SkyIdService);
this.#router = inject(Router, { optional: true });
this.id = this.#idSvc.generateId();
this.#backdropClick = new Subject();
this.#closed = new Subject();
this.#backdropClickObs = this.#backdropClick.asObservable();
this.#closedObs = this.#closed.asObservable();
}
ngOnInit() {
this.#applyConfig(this.#context.config);
setTimeout(() => {
this.#addBackdropClickListener();
});
if (this.#context.config.closeOnNavigation) {
this.#addRouteListener();
}
if (this.#context.config.hideOthersFromScreenReaders) {
this.#siblingAriaHiddenCache = this.#adapter.addAriaHiddenToSiblings(this.#elementRef);
}
}
ngOnDestroy() {
this.#removeRouteListener();
this.#ngUnsubscribe.next();
this.#ngUnsubscribe.complete();
this.#backdropClick.complete();
this.#adapter.restoreAriaHiddenForSiblings(this.#siblingAriaHiddenCache);
this.#closed.next();
this.#closed.complete();
}
attachComponent(component, providers = []) {
/*istanbul ignore if: untestable*/
if (!this.targetRef) {
throw new Error('[SkyOverlayComponent] Could not attach the component because the target element could not be found.');
}
this.targetRef.clear();
const environmentInjector = createEnvironmentInjector([
{
provide: SKY_STACKING_CONTEXT,
useValue: {
zIndex: new BehaviorSubject(parseInt(this.zIndex, 10))
.asObservable()
.pipe(takeUntil(this.#ngUnsubscribe)),
},
},
...providers,
], this.#environmentInjector);
const componentRef = this.targetRef.createComponent(component, {
environmentInjector,
});
// Run an initial change detection cycle after the component has been created.
componentRef.changeDetectorRef.detectChanges();
return componentRef;
}
attachTemplate(templateRef, context) {
/*istanbul ignore if: untestable*/
if (!this.targetRef) {
throw new Error('[SkyOverlayComponent] Could not attach the template because the target element could not be found.');
}
this.targetRef.clear();
return this.targetRef.createEmbeddedView(templateRef, context, {
injector: this.#environmentInjector,
});
}
updateClipPath(clipPath) {
this.clipPath$.next(clipPath);
}
#applyConfig(config) {
this.wrapperClass = config.wrapperClass || '';
this.showBackdrop = !!config.showBackdrop;
this.enablePointerEvents = !!config.enablePointerEvents;
this.position = config.position || POSITION_DEFAULT;
this.#changeDetector.markForCheck();
}
#addBackdropClickListener() {
fromEvent(window.document, 'click')
.pipe(takeUntil(this.#ngUnsubscribe))
.subscribe((event) => {
if (event.target && this.overlayContentRef && this.overlayRef) {
const isChild = this.overlayContentRef.nativeElement.contains(event.target);
const isAbove = this.#coreAdapter.isTargetAboveElement(event.target, this.overlayRef.nativeElement);
/* istanbul ignore else */
if (!isChild && !isAbove) {
this.#backdropClick.next();
if (this.#context.config.enableClose) {
this.#closed.next();
}
}
}
});
}
#addRouteListener() {
/*istanbul ignore else*/
if (this.#router) {
this.#routerSubscription = this.#router.events.subscribe((event) => {
/* istanbul ignore else */
if (event instanceof NavigationStart) {
this.#closed.next();
}
});
}
}
#removeRouteListener() {
if (this.#routerSubscription) {
this.#routerSubscription.unsubscribe();
this.#routerSubscription = undefined;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SkyOverlayComponent, isStandalone: true, selector: "sky-overlay", host: { properties: { "id": "this.id" } }, viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n #overlayRef\n [class]=\"'sky-overlay-position-' + position + ' ' + wrapperClass\"\n [style.z-index]=\"zIndex\"\n [style.clip-path]=\"clipPath$ | async\"\n [ngClass]=\"{\n 'enable-pointer-events-pass-through': enablePointerEvents,\n 'sky-overlay': true\n }\"\n>\n <div #overlayContentRef class=\"sky-overlay-content\">\n <ng-template #target />\n </div>\n @if (showBackdrop) {\n <div class=\"sky-overlay-backdrop\"></div>\n }\n</div>\n", styles: [".sky-overlay{inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-position-absolute{position:absolute}.sky-overlay-position-fixed{position:fixed}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:#00000080;inset:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayComponent, decorators: [{
type: Component,
args: [{ selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div\n #overlayRef\n [class]=\"'sky-overlay-position-' + position + ' ' + wrapperClass\"\n [style.z-index]=\"zIndex\"\n [style.clip-path]=\"clipPath$ | async\"\n [ngClass]=\"{\n 'enable-pointer-events-pass-through': enablePointerEvents,\n 'sky-overlay': true\n }\"\n>\n <div #overlayContentRef class=\"sky-overlay-content\">\n <ng-template #target />\n </div>\n @if (showBackdrop) {\n <div class=\"sky-overlay-backdrop\"></div>\n }\n</div>\n", styles: [".sky-overlay{inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-position-absolute{position:absolute}.sky-overlay-position-fixed{position:fixed}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:#00000080;inset:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"] }]
}], ctorParameters: () => [], propDecorators: { id: [{
type: HostBinding,
args: ['id']
}], overlayContentRef: [{
type: ViewChild,
args: ['overlayContentRef', {
read: ElementRef,
static: true,
}]
}], overlayRef: [{
type: ViewChild,
args: ['overlayRef', {
read: ElementRef,
static: true,
}]
}], targetRef: [{
type: ViewChild,
args: ['target', {
read: ViewContainerRef,
static: true,
}]
}] } });
var _a;
/**
* This service is used to create new overlays.
* @internal
*/
class SkyOverlayService {
static { this.overlays = []; }
#adapter = inject(SkyOverlayAdapterService);
#applicationRef = inject(ApplicationRef);
#dynamicComponentSvc;
#environmentInjector = inject(EnvironmentInjector);
constructor(dynamicComponentSvc) {
this.#dynamicComponentSvc = dynamicComponentSvc;
}
/**
* Creates an empty overlay. Use the returned `SkyOverlayInstance` to append content.
* @param config Configuration for the overlay.
*/
create(config) {
const settings = this.#prepareConfig(config);
if (settings.enableScroll === false) {
this.#adapter.restrictBodyScroll();
}
const componentRef = this.#createOverlay(settings);
const instance = new SkyOverlayInstance(settings, componentRef);
instance.closed.subscribe(() => {
// Only execute the service's close method if the instance still exists.
// This is needed to address a race condition if the deprecated instance.close method is used instead.
if (_a.overlays.indexOf(instance) > -1) {
this.close(instance);
}
});
_a.overlays.push(instance);
return instance;
}
/**
* Closes (and destroys) an overlay instance.
* @param instance The instance to close.
*/
close(instance) {
this.#destroyOverlay(instance);
this.#applicationRef.detachView(instance.componentRef.hostView);
instance.componentRef.destroy();
// In some cases, Angular keeps dynamically-generated component's nodes in the DOM during
// unit tests. This can make querying difficult because the older DOM nodes still exist and
// produce inconsistent results.
// Angular Material's overlay appears to do the same thing:
// https://github.com/angular/components/blob/master/src/cdk/portal/dom-portal-outlet.ts#L143-L145
// (Ignoring coverage since this branch will only be hit by consumer unit tests.)
const componentElement = instance.componentRef.location.nativeElement;
/* istanbul ignore if */
if (componentElement.parentNode !== null) {
componentElement.parentNode.removeChild(componentElement);
}
}
/**
* Closes all overlay instances.
*/
closeAll() {
// The `close` event handler for each instance alters the array's length asynchronously,
// so the only "safe" index to call is zero.
while (_a.overlays.length > 0) {
this.close(_a.overlays[0]);
}
}
#createOverlay(config) {
return this.#dynamicComponentSvc.createComponent(SkyOverlayComponent, {
environmentInjector: this.#environmentInjector,
providers: [
{
provide: SkyOverlayContext,
useValue: new SkyOverlayContext(config),
},
],
});
}
#prepareConfig(config = {}) {
const defaults = {
closeOnNavigation: true,
enableClose: false,
enablePointerEvents: false,
enableScroll: true,
showBackdrop: false,
wrapperClass: '',
};
return { ...defaults, ...config };
}
#destroyOverlay(instance) {
_a.overlays.splice(_a.overlays.indexOf(instance), 1);
if (instance.config.enableScroll === false) {
// Only release the body scroll if no other overlay wishes it to be disabled.
const anotherOverlayDisablesScroll = _a.overlays.some((o) => !o.config.enableScroll);
if (!anotherOverlayDisablesScroll) {
this.#adapter.releaseBodyScroll();
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayService, providedIn: 'root' }); }
}
_a = SkyOverlayService;
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: SkyDynamicComponentService }] });
/**
* This service is used to create new overlays.
* @internal
* @deprecated Use `SkyOverlayService` to open a standalone component instead.
*/
class SkyOverlayLegacyService extends SkyOverlayService {
/* istanbul ignore next */
constructor(dynamicComponentSvc) {
super(dynamicComponentSvc);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayLegacyService, deps: [{ token: SkyDynamicComponentLegacyService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayLegacyService, providedIn: 'any' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyOverlayLegacyService, decorators: [{
type: Injectable,
args: [{
providedIn: 'any',
}]
}], ctorParameters: () => [{ type: SkyDynamicComponentLegacyService }] });
class SkyPercentPipe {
get defaultLocale() {
return this.#defaultLocale;
}
#defaultFormat = '1.0-2';
#defaultLocale = 'en-US';
#format;
#formattedValue = '';
#locale;
#ngUnsubscribe = new Subject();
#value;
constructor(localeProvider) {
localeProvider
.getLocaleInfo()
.pipe(takeUntil(this.#ngUnsubscribe))
.subscribe((localeInfo) => {
this.#defaultLocale = localeInfo.locale;
this.#updateFormattedValue();
});
}
ngOnDestroy() {
this.#ngUnsubscribe.next();
this.#ngUnsubscribe.complete();
}
transform(value, format, locale) {
this.#value = value;
this.#format = format;
this.#locale = locale;
this.#updateFormattedValue();
return this.#formattedValue;
}
#updateFormattedValue() {
const locale = this.#locale || this.#defaultLocale;
const format = this.#format || this.#defaultFormat;
this.#formattedValue = this.#value
? SkyNumberFormatUtility.formatNumber(locale, this.#value, SkyIntlNumberFormatStyle.Percent, format)
: '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyPercentPipe, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyPercentPipe, isStandalone: true, name: "skyPercent", pure: false }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyPercentPipe, decorators: [{
type: Pipe,
args: [{
name: 'skyPercent',
pure: false,
}]
}], ctorParameters: () => [{ type: i1.SkyAppLocaleProvider }] });
class SkyPercentPipeModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyPercentPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyPercentPipeModule, imports: [SkyCoreResourcesModule, SkyPercentPipe], exports: [SkyPercentPipe] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyPercentPipeModule, providers: [SkyPercentPipe], imports: [SkyCoreResourcesModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyPercentPipeModule, decorators: [{
type: NgModule,
args: [{
imports: [SkyCoreResourcesModule, SkyPercentPipe],
providers: [SkyPercentPipe],
exports: [SkyPercentPipe],
}]
}] });
const DEFAULT_BREAKPOINT = SkyMediaBreakpoints.md;
/**
* Acts like `SkyMediaQueryService` for a container element, emitting the same responsive breakpoints.
* @deprecated Use the `SkyResponsiveHostDirective` instead.
*/
class SkyResizeObserverMediaQueryService extends SkyMediaQueryService {
/**
* Emits when the breakpoint changes.
*/
get breakpointChange() {
return this.#breakpointChangeObs;
}
/**
* Returns the current breakpoint.
* @deprecated Subscribe to the `breakpointChange` observable instead.
*/
get current() {
return this.#currentBreakpoint;
}
#breakpointChange = new ReplaySubject(1);
#breakpointChangeObs = this.#breakpointChange.asObservable();
#breakpoints = [
{
check: (width) => width > 0 && width <= 767,
name: SkyMediaBreakpoints.xs,
},
{
check: (width) => width > 767 && width <= 991,
name: SkyMediaBreakpoints.sm,
},
{
check: (width) => width > 991 && width <= 1199,
name: SkyMediaBreakpoints.md,
},
{
check: (width) => width > 1199,
name: SkyMediaBreakpoints.lg,
},
];
#currentBreakpoint = DEFAULT_BREAKPOINT;
#currentBreakpointObs = new ReplaySubject(1);
#ngUnsubscribe = new Subject();
#resizeObserverSvc = inject(SkyResizeObserverService);
#target;
ngOnDestroy() {
this.unobserve();
this.#target = undefined;
this.#currentBreakpointObs.complete();
this.#breakpointChange.complete();
}
/**
* @internal
*/
destroy() {
this.ngOnDestroy();
}
/**
* Sets the container element to watch. The `SkyResizeObserverMediaQueryService` will only observe one element at a
* time. Any previous subscriptions will be unsubscribed when a new element is observed.
*/
observe(element, options) {
if (this.#target) {
if (this.#target === element) {
return this;
}
this.unobserve();
}
this.#target = element;
this.#checkWidth(element, options?.updateResponsiveClasses);
this.#resizeObserverSvc
.observe(element)
.pipe(takeUntil(this.#ngUnsubscribe))
.subscribe((value) => {
const breakpoint = this.#checkBreakpoint(value.contentRect.width);
if (breakpoint) {
this.#updateBreakpoint(breakpoint, options?.updateResponsiveClasses);
}
});
return this;
}
/**
* Stop watching the container element and remove any added classes.
*/
unobserve() {
this.#removeResponsiveClasses();
this.#ngUnsubscribe.next();
this.#ngUnsubscribe.complete();
}
/**
* Subscribes to element size changes that cross breakpoints.
*/
subscribe(listener) {
return this.#currentBreakpointObs
.pipe(takeUntil(this.#ngUnsubscribe))
.subscribe((value) => {
listener(value);
});
}
#updateBreakpoint(breakpoint, updateResponsiveClasses) {
if (updateResponsiveClasses) {
this.#updateResponsiveClasses(this.current, breakpoint);
}
if (this.current !== breakpoint) {
this.#currentBreakpointObs.next(breakpoint);
const breakpointType = toSkyBreakpoint(breakpoint);
this.#breakpointChange.next(breakpointType);
}
this.#currentBreakpoint = breakpoint;
}
#updateResponsiveClasses(oldBreakpoint, newBreakpoint) {
const oldClass = this.#getClassForBreakpoint(oldBreakpoint);
const newClass = this.#getClassForBreakpoint(newBreakpoint);
const targetClassList = this.#target?.nativeElement?.classList;
targetClassList?.remove(oldClass);
targetClassList?.add(newClass);
}
#removeResponsiveClasses() {
for (const breakpoint of Object.values(SkyMediaBreakpoints)) {
if (typeof breakpoint === 'number') {
const className = this.#getClassForBreakpoint(breakpoint);
this.#target?.nativeElement?.classList?.remove(className);
}
}
}
#getClassForBreakpoint(breakpoint) {
return `sky-responsive-container-${SkyMediaBreakpoints[breakpoint]}`;
}
#checkBreakpoint(width) {
const breakpoint = this.#breakpoints.find((breakpoint) => breakpoint.check(width));
return breakpoint ? breakpoint.name : undefined;
}
#checkWidth(el, updateResponsiveClasses) {
const width = el.nativeElement.offsetWidth || 0;
const breakpoint = this.#checkBreakpoint(width);
if (breakpoint) {
this.#updateBreakpoint(breakpoint, updateResponsiveClasses);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyResizeObserverMediaQueryService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyResizeObserverMediaQueryService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyResizeObserverMediaQueryService, decorators: [{
type: Injectable
}] });
const SCREEN_READER_LABELS_CONTAINER_ID = 'sky-screen-reader-labels-container';
/**
* Adds the element to a screen reader only section of the body.
* This prevents components' DOM from including text only intended for screen readers.
*
* @internal
*/
class SkyScreenReaderLabelDirective {
ngOnDestroy() {
this.#removeLabelEl();
}
/**
* Indicates if the label should be created in the DOM.
* @default false
*/
set createLabel(value) {
this.#_createLabel = value ?? false;
this.#updateLabelEl();
}
get createLabel() {
return this.#_createLabel;
}
#elementRef = inject(ElementRef);
#renderer = inject(Renderer2);
#_createLabel = false;
#updateLabelEl() {
if (this.createLabel) {
const containerEl = this.#getContainerEl() || this.#createContainerEl();
this.#renderer.appendChild(containerEl, this.#elementRef.nativeElement);
}
else {
this.#removeLabelEl();
}
}
#getContainerEl() {
return document.getElementById(SCREEN_READER_LABELS_CONTAINER_ID);
}
#createContainerEl() {
const el = document.createElement('div');
el.id = SCREEN_READER_LABELS_CONTAINER_ID;
el.style.display = 'none';
this.#renderer.appendChild(document.body, el);
return el;
}
#removeLabelEl() {
const containerEl = this.#getContainerEl();
this.#elementRef.nativeElement.remove();
if (containerEl && containerEl.childNodes.length === 0) {
containerEl.remove();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyScreenReaderLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: SkyScreenReaderLabelDirective, isStandalone: true, selector: "[skyScreenReaderLabel]", inputs: { createLabel: "createLabel" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyScreenReaderLabelDirective, decorators: [{
type: Directive,
args: [{
selector: '[skyScreenReaderLabel]',
}]
}], propDecorators: { createLabel: [{
type: Input
}] } });
/**
* Raises an event when the box shadow for a component's header or footer should be adjusted
* based on the scroll position of the host element.
* @internal
*/
class SkyScrollShadowDirective {
constructor() {
this.skyScrollShadow = new EventEmitter();
this.#ngUnsubscribe = new Subject();
this.#elRef = inject(ElementRef);
this.#mutationObserverSvc = inject(SkyMutationObserverService);
this.#ngZone = inject(NgZone);
this.#_enabled = false;
}
set skyScrollShadowEnabled(value) {
this.#_enabled = value;
if (value) {
this.#initMutationObserver();
}
else {
this.#emitShadow({
bottomShadow: 'none',
topShadow: 'none',
});
this.#destroyMutationObserver();
}
}
get skyScrollShadowEnabled() {
return this.#_enabled;
}
#currentShadow;
#boxShadows;
#mutationObserver;
#ngUnsubscribe;
#elRef;
#mutationObserverSvc;
#ngZone;
#_enabled;
windowResize() {
this.#checkForShadow();
}
scroll() {
this.#checkForShadow();
}
ngOnDestroy() {
this.#ngUnsubscribe.next();
this.#ngUnsubscribe.complete();
this.#destroyMutationObserver();
}
#initMutationObserver() {
if (!this.#mutationObserver) {
const el = this.#elRef.nativeElement;
// MutationObserver is patched by Zone.js and therefore becomes part of the
// Angular change detection cycle, but this can lead to infinite loops in some
// scenarios. This will keep MutationObserver from triggering change detection.
this.#ngZone.runOutsideAngular(() => {
this.#mutationObserver = this.#mutationObserverSvc.create(() => {
this.#checkForShadow();
});
this.#mutationObserver.observe(el, {
attributes: true,
characterData: true,
childList: true,
subtree: true,
});
});
}
}
#destroyMutationObserver() {
if (this.#mutationObserver) {
this.#mutationObserver.disconnect();
this.#mutationObserver = undefined;
}
}
#checkForShadow() {
if (this.skyScrollShadowEnabled) {
const el = this.#elRef.nativeElement;
const topShadow = this.#buildShadowStyle(el.scrollTop);
const bottomShadow = this.#buildShadowStyle(el.scrollHeight - el.scrollTop - el.clientHeight);
this.#emitShadow({
bottomShadow,
topShadow,
});
}
}
#splitBoxShadowDetails(boxShadow) {
const colorRegex = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/;
const match = boxShadow.match(colorRegex);
if (match) {
const colorParts = `${match[1]}, ${match[2]}, ${match[3]}`; // Extract RGB values as a comma-separated string
const opacity = match[4] ? parseFloat(match[4]) : 1; // Use the captured opacity or default to 1
const lengths = boxShadow.replace(match[0], '').trim(); // Remove the color from the rest
return { colorParts, opacity, lengths };
}
/* istanbul ignore next */
return;
}
#formatBoxShadows(boxShadowString) {
const boxShadows = [];
let currentShadow = '';
let openParentheses = 0;
for (const char of boxShadowString) {
if (char === ',' && openParentheses === 0) {
const details = this.#splitBoxShadowDetails(currentShadow.trim());
if (details) {
boxShadows.push(details);
}
currentShadow = '';
}
else {
currentShadow += char;
if (char === '(') {
openParentheses++;
}
else if (char === ')') {
openParentheses--;
}
}
}
if (currentShadow.trim()) {
const details = this.#splitBoxShadowDetails(currentShadow.trim());
if (details) {
boxShadows.push(details);
}
}
return boxShadows;
}
#getBoxShadowInfo() {
const elStyles = window.getComputedStyle(this.#elRef.nativeElement);
const boxShadowStyle = elStyles.getPropertyValue('--sky-elevation-overflow');
// Creating a temporary element and setting box shadow converts the color in the box shadows to rgba or rgb
const tempEl = document.createElement('div');
tempEl.style.setProperty('box-shadow', boxShadowStyle);
const convertedBoxShadows = tempEl.style.getPropertyValue('box-shadow');
const boxShadows = this.#formatBoxShadows(convertedBoxShadows);
return boxShadows;
}
#buildShadowStyle(pixelsFromEnd) {
if (!this.#boxShadows) {
const boxShadowInfo = this.#getBoxShadowInfo();
if (boxShadowInfo.length > 0) {
this.#boxShadows = boxShadowInfo;
}
else {
this.#boxShadows = 'none';
}
}
const boxShadowStyles = [];
if (this.#boxShadows === 'none' || pixelsFromEnd === 0) {
return 'none';
}
else {
for (const shadow of this.#boxShadows) {
const { colorParts, lengths, opacity } = shadow;
// Progressively darken the shadow until the user scrolls 30 pixels from the top or bottom
// of the scrollable element, with a max opacity of 0.3.
const adjustedOpacity = Math.min(pixelsFromEnd / 30, 1) * opacity;
const adjustedShadow = `${lengths} rgba(${colorParts}, ${adjustedOpacity})`;
boxShadowStyles.push(adjustedShadow);
}
return boxShadowStyles.join(', ');
}
}
#emitShadow(shadow) {
if (!this.#currentShadow ||
this.#currentShadow.bottomShadow !== shadow.bottomShadow ||
this.#currentShadow.topShadow !== shadow.topShadow) {
this.skyScrollShadow.emit(shadow);
this.#currentShadow = shadow;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyScrollShadowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: SkyScrollShadowDirective, isStandalone: true, selector: "[skyScrollShadow]", inputs: { skyScrollShadowEnabled: "skyScrollShadowEnabled" }, outputs: { skyScrollShadow: "skyScrollShadow" }, host: { listeners: { "window:resize": "windowResize()", "scroll": "scroll()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyScrollShadowDirective, decorators: [{
type: Directive,
args: [{
selector: '[skyScrollShadow]',
}]
}], propDecorators: { skyScrollShadowEnabled: [{
type: Input
}], skyScrollShadow: [{
type: Output
}], windowResize: [{
type: HostListener,
args: ['window:resize']
}], scroll: [{
type: HostListener,
args: ['scroll']
}] } });
function notifySubscribers(subscribers, item) {
for (const subscriber of subscribers) {
subscriber.next(item);
}
}
class SkyScrollableHostService {
#mutationObserverSvc;
#windowRef;
#resizeObserverSvc;
#zone;
constructor(mutationObserverSvc, windowRef, resizeObserverSvc, zone) {
this.#mutationObserverSvc = mutationObserverSvc;
this.#resizeObserverSvc = resizeObserverSvc;
this.#windowRef = windowRef;
this.#zone = zone;
}
/**
* Returns the given element's current scrollable host
* @param elementRef The element whose scrollable host is being requested
* @returns The current scrollable host
*/
getScrollableHost(elementRef) {
return this.#findScrollableHost(elementRef.nativeElement);
}
/**
* Returns an observable which emits the given element's current scrollable host
* @param elementRef The element whose scrollable host is being requested
* @returns An observable which emits the current scrollable host element.
* @internal
*/
watchScrollableHost(elementRef) {
const subscribers = [];
let parentMutationObserver;
let documentHiddenElementMutationObserver;
return new Observable((subscriber) => {
subscribers.push(subscriber);
let scrollableHost = this.#findScrollableHost(elementRef.nativeElement);
// Setup mutation observers only once, for all subscribers.
if (subscribers.length === 1) {
parentMutationObserver = this.#mutationObserverSvc.create(() => {
const newScrollableHost = this.#findScrollableHost(elementRef.nativeElement);
// Reset observer if scrollable host changes.
if (newScrollableHost !== scrollableHost &&
this.#isElementVisible(elementRef)) {
scrollableHost = newScrollableHost;
this.#observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
notifySubscribers(subscribers, scrollableHost);
}
});
this.#observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
documentHiddenElementMutationObserver =
this.#mutationObserverSvc.create(() => {
if (scrollableHost && !this.#isElementVisible(elementRef)) {
// If the scrollable host is not visible, set it to undefined and unsubscribe from its mutation changes.
// Then, observe the document element so that a new scrollable host can be found.
scrollableHost = undefined;
this.#observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
notifySubscribers(subscribers, scrollableHost);
}
});
this.#observeDocumentHiddenElementChanges(documentHiddenElementMutationObserver);
}
// Emit the scrollable host to the subscriber.
subscriber.next(scrollableHost);
// Teardown callback for the subscription.
subscriber.add(() => {
const subIndex = subscribers.indexOf(subscriber);
/* istanbul ignore else */
if (subIndex >= 0) {
subscribers.splice(subIndex, 1);
}
if (subscribers.length === 0) {
documentHiddenElementMutationObserver.disconnect();
parentMutationObserver.disconnect();
}
});
});
}
/**
* Returns an observable which emits whenever the element's scrollable host emits a scroll event. The observable will always emit the scroll events from the elements current scrollable host and will update based on any scrollable host changes. The observable will also emit once whenever the scrollable host changes.
* @param elementRef The element whose scrollable host scroll events are being requested
* @returns An observable which emits when the elements scrollable host is scrolled or is changed
*/
watchScrollableHostScrollEvents(elementRef) {
const subscribers = [];
let scrollableHost;
let newScrollableHostObservable = new Subject();
let scrollableHostSubscription;
let scrollEventSubscription;
return new Observable((subscriber) => {
subscribers.push(subscriber);
// Setup mutation observers only once, for all subscribers.
if (subscribers.length === 1) {
scrollableHostSubscription = this.watchScrollableHost(elementRef).subscribe((newScrollableHost) => {
newScrollableHostObservable.next();
newScrollableHostObservable.complete();
if (scrollableHost && scrollableHost !== newScrollableHost) {
notifySubscribers(subscribers);
}
scrollableHost = newScrollableHost;
newScrollableHostObservable = new Subject();
// Only subscribe to scroll events if the host element is defined.
/* istanbul ignore else */
if (newScrollableHost) {
scrollEventSubscription = fromEvent(newScrollableHost, 'scroll')
.pipe(takeUntil$1(newScrollableHostObservable))
.subscribe(() => {
notifySubscribers(subscribers);
});
}
});
}
// Teardown callback for the subscription.
subscriber.add(() => {
const subIndex = subscribers.indexOf(subscriber);
/* istanbul ignore else */
if (subIndex >= 0) {
subscribers.splice(subIndex, 1);
}
if (subscribers.length === 0) {
scrollableHostSubscription.unsubscribe();
scrollEventSubscription.unsubscribe();
newScrollableHostObservable.complete();
}
});
});
}
watchScrollableHostClipPathChanges(elementRef, additionalContainers = of([])) {
if (!this.#resizeObserverSvc) {
return of('none');
}
const watch = () => this.watchScrollableHost(elementRef).pipe(combineLatestWith(additionalContainers), switchMap(([scrollableHost, additionalHosts]) => {
const resizeObserverSvc = this.#resizeObserverSvc;
if (!resizeObserverSvc ||
((!scrollableHost ||
scrollableHost === this.#windowRef.nativeWindow) &&
additionalHosts.length === 0)) {
return of('none');
}
const hostsParents = additionalHosts
.map((container) => container.nativeElement?.offsetParent)
.filter(Boolean);
const inputs = [
of(undefined),
fromEvent(this.#windowRef.nativeWindow, 'resize'),
fromEvent(this.#windowRef.nativeWindow, 'scroll'),
...additionalHosts.map((container) => resizeObserverSvc.observe(container)),
fromEvent(hostsParents, 'scroll'),
...hostsParents.map((hostsParent) => resizeObserverSvc.observe({
nativeElement: hostsParent,
})),
];
let getHostRect;
if (scrollableHost &&
scrollableHost !== this.#windowRef.nativeWindow) {
inputs.push(resizeObserverSvc.observe({ nativeElement: scrollableHost }));
getHostRect = () => scrollableHost.getBoundingClientRect();
}
else {
getHostRect = () => ({
top: 0,
left: 0,
right: this.#windowRef.nativeWindow.innerWidth,
bottom: this.#windowRef.nativeWindow.innerHeight,
});
}
return concat(inputs).pipe(observeOn(animationFrameScheduler), debounceTime$1(0), map(() => {
const viewportSize = this.#getViewportSize();
let { top, left, right, bottom } = getHostRect();
for (const container of additionalHosts) {
if (container.nativeElement?.offsetParent) {
const containerRect = container.nativeElement.getBoundingClientRect();
top = Math.max(top, containerRect.top);
left = Math.max(left, containerRect.left);
right = Math.min(right, containerRect.right);
bottom = Math.min(bottom, containerRect.bottom);
}
}
top = Math.max(0, top);
left = Math.max(0, left);
return `inset(${top}px ${viewportSize.width - right}px ${viewportSize.height - bottom}px ${left}px)`;
}));
}));
/* istanbul ignore else */
if (this.#zone) {
return this.#zone.runOutsideAngular(watch);
}
else {
return watch();
}
}
#findScrollableHost(element) {
const regex = /(auto|scroll)/;
const windowObj = this.#windowRef.nativeWindow;
const bodyObj = windowObj.document.body;
if (!element) {
return windowObj;
}
let style = windowObj.getComputedStyle(element);
let parent = element;
do {
parent = parent.parentNode;
// Return `window` if the parent element has been removed from the DOM.
if (!(parent instanceof HTMLElement)) {
return windowObj;
}
style = windowObj.getComputedStyle(parent);
} while (!regex.test(style.overflow) &&
!regex.test(style.overflowY) &&
parent !== bodyObj);
if (parent === bodyObj) {
return windowObj;
}
return parent;
}
#observeDocumentHiddenElementChanges(mutationObserver) {
mutationObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class', 'style', 'hidden'],
childList: true,
subtree: true,
});
}
#observeForScrollableHostChanges(element, mutationObserver) {
mutationObserver.disconnect();
const target = element instanceof HTMLElement ? element : document.documentElement;
mutationObserver.observe(target, {
attributes: true,
attributeFilter: ['class', 'style'],
childList: true,
subtree: true,
});
}
/**
* Determines if an element is "visible" in the DOM.
* @see https://stackoverflow.com/a/11639664/6178885
*/
#isElementVisible(elementRef) {
return !!elementRef.nativeElement?.offsetParent;
}
#getViewportSize() {
const win = this.#windowRef.nativeWindow;
const docElem = win.document.documentElement;
return {
width: docElem.clientWidth,
height: docElem.clientHeight,
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: SkyMutationObserverService }, { token: SkyAppWindowRef }, { token: SkyResizeObserverService, optional: true }, { token: i0.NgZone, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyScrollableHostService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: SkyMutationObserverService }, { type: SkyAppWindowRef }, { type: SkyResizeObserverService, decorators: [{
type: Optional
}] }, { type: i0.NgZone, decorators: [{
type: Optional
}] }] });
/**
* Provides a method for setting a formatted title on the current window.
*/
class SkyAppTitleService {
#title;
constructor(title) {
this.#title = title;
}
/**
* Sets the title on the current window.
* @param args An array of title parts. The parts will be concatenated with a hyphen between
* each part.
*/
setTitle(args) {
if (args?.titleParts) {
this.#title.setTitle(args.titleParts.join(' - '));
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAppTitleService, deps: [{ token: i1$2.Title }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAppTitleService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyAppTitleService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: i1$2.Title }] });
/**
* Trims whitespace in each text node that is a direct descendent of the current element.
*/
class SkyTrimDirective {
#el;
#obs;
constructor(elRef, mutationObs) {
this.#el = elRef.nativeElement;
this.#obs = mutationObs.create((mutations) => {
if (mutations.some((mutation) => mutation.target === this.#el.firstChild ||
mutation.target === this.#el.lastChild)) {
this.#trimNodes();
}
});
this.#observe();
}
ngOnInit() {
this.#trimNodes();
}
ngOnDestroy() {
this.#disconnect();
}
#observe() {
this.#obs.observe(this.#el, {
characterData: true,
subtree: true,
});
}
#disconnect() {
this.#obs.disconnect();
}
#trimNodes() {
const el = this.#el;
if (el.hasChildNodes()) {
// Suspend the MutationObserver so altering the text content of each node
// doesn't retrigger the observe callback.
this.#disconnect();
if (el.firstChild === el.lastChild) {
this.#trimNode(el.firstChild, 'trim');
}
else {
this.#trimNode(el.firstChild, 'trimStart');
this.#trimNode(el.lastChild, 'trimEnd');
}
this.#observe();
}
}
#trimNode(node, trimMethod) {
if (node?.nodeType === Node.TEXT_NODE) {
const textContent = node.textContent;
if (textContent) {
const textContentTrimmed = textContent[trimMethod]();
if (textContent !== textContentTrimmed) {
node.textContent = textContentTrimmed;
}
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyTrimDirective, deps: [{ token: i0.ElementRef }, { token: SkyMutationObserverService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: SkyTrimDirective, isStandalone: true, selector: "[skyTrim]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyTrimDirective, decorators: [{
type: Directive,
args: [{
selector: '[skyTrim]',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: SkyMutationObserverService }] });
class SkyTrimModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyTrimModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyTrimModule, imports: [SkyTrimDirective], exports: [SkyTrimDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyTrimModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyTrimModule, decorators: [{
type: NgModule,
args: [{
imports: [SkyTrimDirective],
exports: [SkyTrimDirective],
}]
}] });
class SkyUIConfigService {
getConfig(key, defaultConfig) {
return of(defaultConfig);
}
/* istanbul ignore next */
setConfig(key, value) {
return of({});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyUIConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyUIConfigService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyUIConfigService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const CLS_VIEWKEEPER_FIXED = 'sky-viewkeeper-fixed';
const CLS_VIEWKEEPER_FIXED_NOT_LAST = 'sky-viewkeeper-fixed-not-last';
const CLS_VIEWKEEPER_BOUNDARY = 'sky-viewkeeper-boundary';
const EVT_AFTER_VIEWKEEPER_SYNC = 'afterViewkeeperSync';
let nextIdIndex;
function nextId() {
nextIdIndex = (nextIdIndex || 0) + 1;
return 'viewkeeper-' + nextIdIndex;
}
function getOffset(el, scrollableHost) {
const rect = el.getBoundingClientRect();
const parent = scrollableHost ? scrollableHost : document.documentElement;
return {
top: rect.top + parent.scrollTop,
left: rect.left + parent.scrollLeft,
};
}
function px(value) {
let pxValue = value ? value.toString() : '';
if (typeof value === 'number') {
pxValue = value + 'px';
}
return pxValue;
}
function setElPosition(el, left, top, width, marginTop, marginTopProperty, clipTop, clipLeft) {
el.style.top = px(top);
el.style.left = px(left);
el.style.marginTop = marginTopProperty
? `calc(${px(marginTop)} + var(${marginTopProperty}, 0px))`
: px(marginTop);
el.style.clipPath =
clipTop || clipLeft ? `inset(${px(clipTop)} 0 0 ${px(clipLeft)})` : 'none';
/*istanbul ignore else*/
/* sanity check */
if (width !== null) {
el.style.width = px(width);
}
}
function getHeightWithMargin(el) {
const computedStyle = getComputedStyle(el);
return (el.offsetHeight +
parseInt(computedStyle.marginTop, 10) +
parseInt(computedStyle.marginBottom, 10));
}
function createCustomEvent(name) {
const evt = document.createEvent('CustomEvent');
evt.initCustomEvent(name, false, false, undefined);
return evt;
}
class SkyViewkeeper {
#boundaryEl;
#el;
#id;
#setWidth;
#verticalOffset;
#verticalOffsetEl;
#viewportMarginTop = 0;
#viewportMarginProperty;
#currentElFixedLeft;
#currentElFixedTop;
#currentElFixedWidth;
#currentElClipLeft;
#currentElClipTop;
#isDestroyed = false;
#scrollableHost;
#syncElPositionHandler;
#intersectionObserver;
#spacerResizeObserver;
constructor(options) {
options = options || /* istanbul ignore next */ {};
this.#el = options.el;
this.#boundaryEl = options.boundaryEl;
if (!this.#el) {
throw new Error('[SkyViewkeeper] The option `el` is required.');
}
if (!this.#boundaryEl) {
throw new Error('[SkyViewkeeper] The option `boundaryEl` is required.');
}
const el = this.#el;
const boundaryEl = this.#boundaryEl;
this.#setWidth = !!options.setWidth;
this.#id = nextId();
this.#scrollableHost = options.scrollableHost;
this.#verticalOffset = options.verticalOffset || 0;
this.#verticalOffsetEl = options.verticalOffsetEl;
// Only set viewport margin if the scrollable host is undefined.
if (!this.#scrollableHost) {
this.#viewportMarginTop = options.viewportMarginTop ?? 0;
this.#viewportMarginProperty = options.viewportMarginProperty;
}
this.#syncElPositionHandler = () => this.syncElPosition(el, boundaryEl);
if (this.#verticalOffsetEl) {
this.#verticalOffsetEl.addEventListener(EVT_AFTER_VIEWKEEPER_SYNC, this.#syncElPositionHandler);
}
window.addEventListener('scroll', this.#syncElPositionHandler, true);
window.addEventListener('resize', this.#syncElPositionHandler);
window.addEventListener('orientationchange', this.#syncElPositionHandler);
this.#boundaryEl.classList.add(CLS_VIEWKEEPER_BOUNDARY);
this.syncElPosition(el, boundaryEl);
}
syncElPosition(el, boundaryEl) {
const verticalOffset = this.#calculateVerticalOffset();
// When the element isn't visible, its size can't be calculated, so don't attempt syncing position in this case.
if (this.#isDestroyed || (el.offsetWidth === 0 && el.offsetHeight === 0)) {
return;
}
const boundaryInfo = this.#getBoundaryInfo(el, boundaryEl);
const fixedStyles = this.#getFixedStyles(boundaryInfo, verticalOffset);
const doFixEl = this.#shouldFixEl(el, boundaryInfo, verticalOffset);
if (this.#needsUpdating(doFixEl, fixedStyles)) {
if (doFixEl) {
this.#fixEl(el, boundaryInfo, fixedStyles);
this.#verticalOffsetEl?.classList.add(CLS_VIEWKEEPER_FIXED_NOT_LAST);
}
else {
this.#unfixEl(el);
this.#verticalOffsetEl?.classList.remove(CLS_VIEWKEEPER_FIXED_NOT_LAST);
}
}
const evt = createCustomEvent(EVT_AFTER_VIEWKEEPER_SYNC);
el.dispatchEvent(evt);
}
destroy() {
if (!this.#isDestroyed) {
this.#intersectionObserver?.disconnect();
window.removeEventListener('scroll', this.#syncElPositionHandler, true);
window.removeEventListener('resize', this.#syncElPositionHandler);
window.removeEventListener('orientationchange', this.#syncElPositionHandler);
if (this.#el) {
this.#unfixEl(this.#el);
}
this.#verticalOffsetEl?.removeEventListener(EVT_AFTER_VIEWKEEPER_SYNC, this.#syncElPositionHandler);
this.#verticalOffsetEl?.classList.remove(CLS_VIEWKEEPER_FIXED_NOT_LAST);
this.#spacerResizeObserver?.disconnect();
this.#boundaryEl?.classList.remove(CLS_VIEWKEEPER_BOUNDARY);
this.#el =
this.#boundaryEl =
this.#verticalOffsetEl =
this.#intersectionObserver =
this.#spacerResizeObserver =
undefined;
this.#isDestroyed = true;
}
}
#getSpacerId() {
return this.#id + '-spacer';
}
#unfixEl(el) {
const spacerEl = document.getElementById(this.#getSpacerId());
if (spacerEl) {
this.#spacerResizeObserver?.unobserve(spacerEl);
/*istanbul ignore else*/
if (spacerEl.parentElement) {
spacerEl.parentElement.removeChild(spacerEl);
}
}
el.classList.remove(CLS_VIEWKEEPER_FIXED);
this.#currentElFixedLeft =
this.#currentElFixedTop =
this.#currentElFixedWidth =
undefined;
let width = '';
if (this.#setWidth) {
width = 'auto';
}
setElPosition(el, '', '', width, '', '', 0, 0);
}
#calculateVerticalOffset() {
let offset = this.#verticalOffset;
if (this.#verticalOffsetEl) {
const verticalOffsetElTopStyle = this.#verticalOffsetEl.style.top;
const verticalOffsetElTop = parseInt(verticalOffsetElTopStyle, 10) || 0;
offset += this.#verticalOffsetEl.offsetHeight + verticalOffsetElTop;
}
else if (this.#scrollableHost) {
offset += this.#scrollableHost.getBoundingClientRect().top;
}
return offset;
}
#shouldFixEl(el, boundaryInfo, verticalOffset) {
let anchorTop;
if (boundaryInfo.spacerEl) {
anchorTop = getOffset(boundaryInfo.spacerEl, this.#scrollableHost).top;
}
else {
anchorTop = getOffset(el, this.#scrollableHost).top;
}
let viewportMarginTop = this.#viewportMarginTop;
const viewportMarginProperty = this.#viewportMarginProperty &&
getComputedStyle(document.body).getPropertyValue(this.#viewportMarginProperty);
if (viewportMarginProperty) {
viewportMarginTop += parseInt(viewportMarginProperty, 10);
}
const doFixEl = boundaryInfo.scrollTop + verticalOffset + viewportMarginTop > anchorTop;
return doFixEl;
}
#getFixedStyles(boundaryInfo, verticalOffset) {
// If the element needs to be fixed, this will calculate its position. The position
// will be 0 (fully visible) unless the user is scrolling the boundary out of view.
// In that case, the element should begin to scroll out of view with the
// rest of the boundary by setting its top position to a negative value.
const elTop = boundaryInfo.boundaryBottom -
boundaryInfo.elHeight -
boundaryInfo.scrollTop;
const elClipTop = elTop < verticalOffset ? verticalOffset - elTop : 0;
const elFixedTop = Math.min(elTop, verticalOffset);
const elFixedWidth = boundaryInfo.boundaryEl.getBoundingClientRect().width;
const elFixedLeft = boundaryInfo.boundaryOffset.left - boundaryInfo.scrollLeft;
const elClipLeft = elFixedLeft < 0 ? 0 - elFixedLeft : 0;
return {
elFixedLeft,
elFixedTop,
elFixedWidth,
elClipLeft,
elClipTop,
};
}
#needsUpdating(doFixEl, fixedStyles) {
if ((doFixEl &&
this.#currentElFixedLeft === fixedStyles.elFixedLeft &&
this.#currentElFixedTop === fixedStyles.elFixedTop &&
this.#currentElClipLeft === fixedStyles.elClipLeft &&
this.#currentElClipTop === fixedStyles.elClipTop &&
this.#currentElFixedWidth === fixedStyles.elFixedWidth) ||
(!doFixEl &&
!(this.#currentElFixedLeft !== undefined &&
this.#currentElFixedLeft !== null))) {
// The element is either currently fixed and its position and width do not need
// to change, or the element is not currently fixed and does not need to be fixed.
// No changes are needed.
return false;
}
return true;
}
#fixEl(el, boundaryInfo, fixedStyles) {
/* istanbul ignore else */
/* sanity check */
if (!boundaryInfo.spacerEl) {
const spacerHeight = boundaryInfo.elHeight;
const spacerEl = document.createElement('div');
spacerEl.id = boundaryInfo.spacerId;
spacerEl.style.height = px(spacerHeight);
/*istanbul ignore else*/
if (el.parentNode) {
el.parentNode.insertBefore(spacerEl, el.nextSibling);
}
if (!this.#spacerResizeObserver) {
this.#spacerResizeObserver = new ResizeObserver(() => this.#syncElPositionHandler());
}
this.#spacerResizeObserver.observe(spacerEl);
}
el.classList.add(CLS_VIEWKEEPER_FIXED);
this.#currentElFixedTop = fixedStyles.elFixedTop;
this.#currentElFixedLeft = fixedStyles.elFixedLeft;
this.#currentElClipTop = fixedStyles.elClipTop;
this.#currentElClipLeft = fixedStyles.elClipLeft;
this.#currentElFixedWidth = fixedStyles.elFixedWidth;
let width = 0;
if (this.#setWidth) {
width = fixedStyles.elFixedWidth;
}
setElPosition(el, fixedStyles.elFixedLeft, fixedStyles.elFixedTop, width, this.#viewportMarginTop, this.#viewportMarginProperty, fixedStyles.elClipTop, fixedStyles.elClipLeft);
}
#getBoundaryInfo(el, boundaryEl) {
const spacerId = this.#getSpacerId();
const spacerEl = document.getElementById(spacerId);
const boundaryOffset = getOffset(boundaryEl, this.#scrollableHost);
const boundaryTop = boundaryOffset.top;
const boundaryBottom = boundaryTop + boundaryEl.getBoundingClientRect().height;
const scrollLeft = this.#scrollableHost
? this.#scrollableHost.scrollLeft
: document.documentElement.scrollLeft;
const scrollTop = this.#scrollableHost
? this.#scrollableHost.scrollTop
: document.documentElement.scrollTop;
const elHeight = getHeightWithMargin(el);
return {
boundaryBottom,
boundaryOffset,
boundaryEl,
elHeight,
scrollLeft,
scrollTop,
spacerId,
spacerEl,
};
}
}
class SkyViewkeeperHostOptions {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyViewkeeperHostOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyViewkeeperHostOptions }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyViewkeeperHostOptions, decorators: [{
type: Injectable
}] });
/**
* Provides methods for creating and destroying viewkeeper instances.
*/
class SkyViewkeeperService {
#hostOptions;
constructor(hostOptions) {
this.#hostOptions = hostOptions;
}
/**
*
* @param options Creates a viewkeeper instance, applying host options where applicable.
*/
create(options) {
options = Object.assign({}, this.#hostOptions || {}, options);
return new SkyViewkeeper(options);
}
/**
* Destroys a viewkeeper instance.
* @param vk Viewkeeper instance to destroy.
*/
destroy(vk) {
vk.destroy();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyViewkeeperService, deps: [{ token: SkyViewkeeperHostOptions, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyViewkeeperService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyViewkeeperService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: SkyViewkeeperHostOptions, decorators: [{
type: Optional
}] }] });
class SkyViewkeeperDirective {
set skyViewkeeper(value) {
this.#_skyViewkeeper = value;
this.#detectElements();
}
get skyViewkeeper() {
return this.#_skyViewkeeper;
}
#_skyViewkeeper;
#currentViewkeeperEls;
#el;
#mutationObserverSvc;
#observer;
#scrollableHostSvc;
#scrollableHostWatchUnsubscribe;
#viewkeepers = [];
#viewkeeperSvc;
#renderer = inject(RendererFactory2).createRenderer(undefined, null);
#shadowElement;
constructor(el, mutationObserverSvc, viewkeeperSvc, scrollableHostSvc) {
this.#el = el;
this.#mutationObserverSvc = mutationObserverSvc;
this.#viewkeeperSvc = viewkeeperSvc;
this.#scrollableHostSvc = scrollableHostSvc;
}
ngOnInit() {
this.#observer = this.#mutationObserverSvc.create(() => this.#detectElements());
this.#observer.observe(this.#el.nativeElement, {
childList: true,
subtree: true,
});
}
ngOnDestroy() {
this.#observer?.disconnect();
this.#scrollableHostWatchUnsubscribe?.next();
this.#scrollableHostWatchUnsubscribe?.complete();
this.#destroyViewkeepers();
if (this.#shadowElement) {
this.#renderer.removeChild(this.#el.nativeElement, this.#shadowElement);
}
}
ngAfterViewInit() {
const shadowElement = this.#renderer.createElement('div');
shadowElement.classList.add('sky-viewkeeper-shadow');
if (this.#el.nativeElement.firstChild) {
this.#renderer.insertBefore(this.#el.nativeElement, shadowElement, this.#el.nativeElement.firstChild);
}
else {
this.#renderer.appendChild(this.#el.nativeElement, shadowElement);
}
this.#shadowElement = shadowElement;
}
#destroyViewkeepers() {
for (const viewkeeper of this.#viewkeepers) {
this.#viewkeeperSvc.destroy(viewkeeper);
}
this.#viewkeepers = [];
}
#getViewkeeperEls() {
let viewkeeperEls = [];
if (this.skyViewkeeper) {
viewkeeperEls = [];
for (const item of this.skyViewkeeper) {
const matchingEls = Array.from(this.#el.nativeElement.querySelectorAll(item));
viewkeeperEls = [...viewkeeperEls, ...matchingEls];
}
}
return viewkeeperEls;
}
#viewkeeperElsChanged(viewkeeperEls) {
if (!viewkeeperEls !== !this.#currentViewkeeperEls) {
return true;
}
if (viewkeeperEls && this.#currentViewkeeperEls) {
if (viewkeeperEls.length !== this.#currentViewkeeperEls.length) {
return true;
}
for (let i = 0, n = viewkeeperEls.length; i < n; i++) {
if (viewkeeperEls[i] !== this.#currentViewkeeperEls[i]) {
return true;
}
}
}
return false;
}
#detectElements() {
const viewkeeperEls = this.#getViewkeeperEls();
if (this.#viewkeeperElsChanged(viewkeeperEls)) {
this.#scrollableHostWatchUnsubscribe?.next();
this.#scrollableHostWatchUnsubscribe?.complete();
this.#scrollableHostWatchUnsubscribe = new Subject();
if (this.#scrollableHostSvc) {
this.#scrollableHostSvc
.watchScrollableHost(this.#el)
.pipe(takeUntil(this.#scrollableHostWatchUnsubscribe))
.subscribe((scrollableHost) => {
this.#destroyViewkeepers();
let previousViewkeeperEl = undefined;
for (const viewkeeperEl of viewkeeperEls) {
this.#viewkeepers.push(this.#viewkeeperSvc.create({
boundaryEl: this.#el.nativeElement,
scrollableHost: scrollableHost instanceof HTMLElement
? scrollableHost
: undefined,
el: viewkeeperEl,
setWidth: true,
verticalOffsetEl: previousViewkeeperEl,
}));
previousViewkeeperEl = viewkeeperEl;
}
});
}
this.#scrollableHostWatchUnsubscribe.pipe(take(1)).subscribe(() => {
this.#shadowElement?.classList.remove('sky-viewkeeper-shadow--active');
});
fromEvent(viewkeeperEls, 'afterViewkeeperSync')
.pipe(takeUntil(this.#scrollableHostWatchUnsubscribe), observeOn(animationFrameScheduler))
.subscribe(() => {
const applicable = viewkeeperEls.filter((el) => el.classList.contains('sky-viewkeeper-fixed') &&
(!this.skyViewkeeperOmitShadow ||
!el.matches(this.skyViewkeeperOmitShadow)));
if (applicable.length === 0) {
this.#shadowElement?.classList.remove('sky-viewkeeper-shadow--active');
return;
}
this.#shadowElement?.classList.add('sky-viewkeeper-shadow--active');
const boundingRectangles = applicable.map((el) => el.getBoundingClientRect());
const left = boundingRectangles.reduce((num, rect) => Math.min(num, rect.left), Number.POSITIVE_INFINITY);
const right = boundingRectangles.reduce((num, rect) => Math.max(num, rect.right), Number.NEGATIVE_INFINITY);
const top = boundingRectangles.reduce((num, rect) => Math.min(num, rect.top), Number.POSITIVE_INFINITY);
const bottom = boundingRectangles.reduce((num, rect) => Math.max(num, rect.bottom), Number.NEGATIVE_INFINITY);
this.#renderer.setStyle(this.#shadowElement, 'inset', `${top}px ${window.innerWidth - right}px ${window.innerHeight - bottom}px ${left}px`);
});
this.#currentViewkeeperEls = viewkeeperEls;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyViewkeeperDirective, deps: [{ token: i0.ElementRef }, { token: SkyMutationObserverService }, { token: SkyViewkeeperService }, { token: SkyScrollableHostService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: SkyViewkeeperDirective, isStandalone: true, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper", skyViewkeeperOmitShadow: "skyViewkeeperOmitShadow" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyViewkeeperDirective, decorators: [{
type: Directive,
args: [{
selector: '[skyViewkeeper]',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: SkyMutationObserverService }, { type: SkyViewkeeperService }, { type: SkyScrollableHostService, decorators: [{
type: Optional
}] }], propDecorators: { skyViewkeeper: [{
type: Input
}], skyViewkeeperOmitShadow: [{
type: Input
}] } });
class SkyViewkeeperModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyViewkeeperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SkyViewkeeperModule, imports: [SkyViewkeeperDirective], exports: [SkyViewkeeperDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyViewkeeperModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SkyViewkeeperModule, decorators: [{
type: NgModule,
args: [{
imports: [SkyViewkeeperDirective],
exports: [SkyViewkeeperDirective],
}]
}] });
// Taken from Angular's version.ts file.
// See: https://github.com/angular/angular/blob/16.2.x/packages/core/src/version.ts
/**
* Represents the version of a package.
* @internal
*/
class Version {
constructor(full) {
this.full = full;
this.major = full.split('.')[0];
this.minor = full.split('.')[1];
this.patch = full.split('.').slice(2).join('.');
}
}
/**
* Represents the version of @skyux/core.
*/
const VERSION = new Version('13.11.5');
/**
* Generated bundle index. Do not edit.
*/
export { NumericOptions, SKY_BREAKPOINTS, SKY_BREAKPOINT_OBSERVER, SKY_HELP_GLOBAL_OPTIONS, SKY_LOG_LEVEL, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyContainerBreakpointObserver, SkyContentInfoProvider, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDefaultInputProvider, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLegacyService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyFileReaderService, SkyHelpService, SkyIdModule, SkyIdService, SkyLayoutHostDirective, SkyLayoutHostService, SkyLiveAnnouncerService, SkyLogLevel, SkyLogModule, SkyLogService, SkyMediaBreakpointObserver, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyMutationObserverService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayLegacyService, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyResponsiveHostDirective, SkyScreenReaderLabelDirective, SkyScrollShadowDirective, SkyScrollableHostService, SkyTrimModule, SkyUIConfigService, SkyViewkeeper, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, VERSION, provideSkyBreakpointObserver, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
//# sourceMappingURL=skyux-core.mjs.map