@skyux/flyout 15.3.0 → 15.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/skyux-flyout.mjs +23 -23
- package/package.json +10 -10
- package/types/skyux-flyout.d.ts +2 -2
|
@@ -195,11 +195,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
195
195
|
* Import into any component library module that needs to use resource strings.
|
|
196
196
|
*/
|
|
197
197
|
class SkyFlyoutResourcesModule {
|
|
198
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
199
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
200
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
198
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
199
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutResourcesModule, exports: [SkyI18nModule] }); }
|
|
200
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutResourcesModule, imports: [SkyI18nModule] }); }
|
|
201
201
|
}
|
|
202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutResourcesModule, decorators: [{
|
|
203
203
|
type: NgModule,
|
|
204
204
|
args: [{
|
|
205
205
|
exports: [SkyI18nModule],
|
|
@@ -232,10 +232,10 @@ class SkyFlyoutAdapterService {
|
|
|
232
232
|
this.#renderer.setStyle(iframe, 'pointer-events', enable ? '' : 'none');
|
|
233
233
|
}
|
|
234
234
|
}
|
|
235
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
236
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
235
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
236
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutAdapterService }); }
|
|
237
237
|
}
|
|
238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutAdapterService, decorators: [{
|
|
239
239
|
type: Injectable
|
|
240
240
|
}], ctorParameters: () => [] });
|
|
241
241
|
|
|
@@ -268,10 +268,10 @@ class SkyFlyoutIteratorComponent {
|
|
|
268
268
|
this.#_nextButtonClick.emit();
|
|
269
269
|
}
|
|
270
270
|
}
|
|
271
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
272
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
271
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutIteratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
272
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.3", type: SkyFlyoutIteratorComponent, isStandalone: true, selector: "sky-flyout-iterator", inputs: { nextButtonDisabled: "nextButtonDisabled", previousButtonDisabled: "previousButtonDisabled" }, outputs: { previousButtonClick: "previousButtonClick", nextButtonClick: "nextButtonClick" }, ngImport: i0, template: "<div class=\"sky-flyout-iterators\">\n <button\n class=\"sky-btn sky-flyout-iterator-previous\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_flyout_iterator_previous_button' | skyLibResources\n \"\n [disabled]=\"previousButtonDisabled\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"onIteratorPreviousClick()\"\n >\n <sky-icon iconName=\"chevron-up\" />\n </button>\n <button\n class=\"sky-btn sky-flyout-iterator-next\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_flyout_iterator_next_button' | skyLibResources\"\n [disabled]=\"nextButtonDisabled\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"onIteratorNextClick()\"\n >\n <sky-icon iconName=\"chevron-down\" />\n </button>\n</div>\n", styles: [".sky-flyout-iterators:not(.sky-theme-modern *){--sky-override-flyout-iterator-margin-right: 5px;--sky-override-flyout-iterators-display: block}.sky-btn{margin-right:var(--sky-override-flyout-iterator-margin-right, var(--sky-space-gap-action_group-m))}.sky-flyout-iterators{display:var(--sky-override-flyout-iterators-display, inline)}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyFlyoutResourcesModule }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i6.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
273
273
|
}
|
|
274
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
274
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutIteratorComponent, decorators: [{
|
|
275
275
|
type: Component,
|
|
276
276
|
args: [{ selector: 'sky-flyout-iterator', changeDetection: ChangeDetectionStrategy.Eager, imports: [SkyIconModule, SkyFlyoutResourcesModule, SkyThemeModule], template: "<div class=\"sky-flyout-iterators\">\n <button\n class=\"sky-btn sky-flyout-iterator-previous\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_flyout_iterator_previous_button' | skyLibResources\n \"\n [disabled]=\"previousButtonDisabled\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"onIteratorPreviousClick()\"\n >\n <sky-icon iconName=\"chevron-up\" />\n </button>\n <button\n class=\"sky-btn sky-flyout-iterator-next\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_flyout_iterator_next_button' | skyLibResources\"\n [disabled]=\"nextButtonDisabled\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"onIteratorNextClick()\"\n >\n <sky-icon iconName=\"chevron-down\" />\n </button>\n</div>\n", styles: [".sky-flyout-iterators:not(.sky-theme-modern *){--sky-override-flyout-iterator-margin-right: 5px;--sky-override-flyout-iterators-display: block}.sky-btn{margin-right:var(--sky-override-flyout-iterator-margin-right, var(--sky-space-gap-action_group-m))}.sky-flyout-iterators{display:var(--sky-override-flyout-iterators-display, inline)}\n"] }]
|
|
277
277
|
}], propDecorators: { nextButtonDisabled: [{
|
|
@@ -725,10 +725,10 @@ class SkyFlyoutComponent {
|
|
|
725
725
|
this.enableTrapFocus = true;
|
|
726
726
|
});
|
|
727
727
|
}
|
|
728
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
729
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyFlyoutComponent, isStandalone: true, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [SkyFlyoutAdapterService], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n #flyoutRef\n class=\"sky-flyout\"\n skyResponsiveHost\n skyTransitionEndHandler\n tabindex=\"-1\"\n transitionPropertyToTrack=\"transform\"\n [attr.role]=\"config.ariaRole ? config.ariaRole : 'dialog'\"\n [attr.aria-describedby]=\"config.ariaDescribedBy\"\n [attr.aria-label]=\"config.ariaLabel\"\n [attr.aria-labelledby]=\"config.ariaLabelledBy\"\n [attr.aria-modal]=\"\n config.ariaRole === 'dialog' || !config.ariaRole ? true : false\n \"\n [attr.hidden]=\"!instanceReady ? true : undefined\"\n [class.sky-flyout-open]=\"instanceReady && isOpening\"\n [class.sky-flyout-opened]=\"isOpen && isOpening\"\n [id]=\"flyoutId\"\n [ngClass]=\"{\n 'sky-flyout-hidden': !isOpen && !isOpening,\n 'sky-flyout-fullscreen': isFullscreen\n }\"\n [style.z-index]=\"zIndex$ | async\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-8': 'modern'\n }\"\n [style.width.px]=\"flyoutWidth\"\n [cdkTrapFocus]=\"enableTrapFocus\"\n [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n [transitionTrigger]=\"isOpening\"\n (transitionEnd)=\"onTransitionEnd()\"\n>\n <div\n #flyoutHeader\n class=\"sky-flyout-header\"\n [style.z-index]=\"zIndex$ | async\"\n >\n <div class=\"sky-flyout-header-content\">\n <button\n *skyThemeIf=\"'modern'\"\n class=\"sky-btn sky-btn-icon-borderless sky-flyout-header-grab-handle\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n >\n <sky-icon\n *skyThemeIf=\"'modern'\"\n iconName=\"re-order-dots-vertical\"\n iconSize=\"s\"\n />\n </button>\n\n @if (config.showIterator) {\n <sky-flyout-iterator\n [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n (nextButtonClick)=\"onIteratorNextButtonClick()\"\n (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n />\n }\n </div>\n <div class=\"sky-flyout-header-buttons\">\n <ng-container *ngTemplateOutlet=\"permalinkTemplate\" />\n <ng-container *ngTemplateOutlet=\"primaryActionTemplate\" />\n <button\n class=\"sky-btn sky-flyout-btn-close sky-label-icon-theme-default\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_flyout_close' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"close()\"\n >\n <sky-icon iconName=\"close\" />\n </button>\n </div>\n </div>\n <div class=\"sky-flyout-content\">\n <div #target></div>\n </div>\n <div\n class=\"sky-flyout-resize-handle\"\n role=\"separator\"\n tabindex=\"0\"\n type=\"range\"\n [attr.aria-controls]=\"flyoutId\"\n [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n [attr.aria-valuemax]=\"config.maxWidth\"\n [attr.aria-valuemin]=\"config.minWidth\"\n [attr.aria-valuenow]=\"flyoutWidth\"\n (keydown)=\"onResizeHandleKeyDown($event)\"\n (mousedown)=\"onResizeHandleMouseDown($event)\"\n ></div>\n</div>\n\n<ng-template #permalinkTemplate>\n @if (permalink) {\n @if (permalink.url) {\n <a\n class=\"sky-btn sky-flyout-btn-permalink\"\n [skyHref]=\"permalink.url\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-link-inline': 'modern'\n }\"\n (click)=\"close()\"\n >\n {{ permalinkLabel }}\n </a>\n } @else if (permalink.route) {\n <a\n class=\"sky-btn sky-flyout-btn-permalink\"\n [routerLink]=\"permalink.route.commands\"\n [fragment]=\"permalink.route.extras?.fragment\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-link-inline': 'modern'\n }\"\n [queryParams]=\"permalink.route.extras?.queryParams\"\n [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n [state]=\"permalink.route.extras?.state\"\n (click)=\"close()\"\n >\n {{ permalinkLabel }}\n </a>\n }\n }\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n @if (primaryAction && primaryAction.callback) {\n <button\n type=\"button\"\n class=\"sky-btn sky-flyout-btn-primary-action\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-link-inline': 'modern'\n }\"\n (click)=\"invokePrimaryAction()\"\n >\n {{ primaryActionLabel }}\n </button>\n }\n</ng-template>\n", styles: [".sky-flyout:not(.sky-theme-modern *){--sky-override-flyout-background: #fff;--sky-override-flyout-border-left: 6px solid #0974a1;--sky-override-flyout-header-background: #eeeeef;--sky-override-flyout-header-border-bottom: 1px solid #cdcfd2;--sky-override-flyout-header-button-margin-right: 10px;--sky-override-flyout-header-height: 50px;--sky-override-flyout-header-padding: 8px 15px 8px 15px;--sky-override-flyout-header-position: fixed;--sky-flyout-resize-handle-offset: -10px;--sky-flyout-resize-handle-width: 14px}.sky-flyout{position:fixed;right:0;top:0;bottom:0;height:100%;background-color:var(--sky-override-flyout-background, var(--sky-color-background-container-base));--sky-background-color-page-default: var( --sky-override-flyout-background, var(--sky-color-background-container-base) );--sky-comp-override-list-header-background-color: initial;border-left:var(--sky-override-flyout-border-left, var(--sky-border-width-container-base) var(--sky-border-style-container-overlay) var(--sky-color-border-container-base));transform:translate(100%);transition-duration:var(--sky-global-duration-medium);transition-property:transform;transition-timing-function:ease-in}.sky-flyout.sky-flyout-open{transform:translate(0)}@starting-style{.sky-flyout.sky-flyout-open{transform:translate(100%)}}.sky-flyout.sky-flyout-opened{transform:none}.sky-flyout:focus{outline:none}.sky-flyout.sky-flyout-fullscreen{min-width:100%;max-width:100%}.sky-flyout.sky-flyout-fullscreen .sky-flyout-resize-handle{cursor:initial}.sky-flyout.sky-flyout-fullscreen .sky-flyout-header{width:100%}.sky-flyout.sky-flyout-hidden{visibility:hidden}.sky-flyout .sky-flyout-input-aria-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);outline:none}.sky-flyout-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:var(--sky-flyout-resize-handle-width, var(--sky-size-width-resize_handle));position:absolute;left:var(--sky-flyout-resize-handle-offset, calc(var(--sky-flyout-resize-handle-width, var(--sky-size-width-resize_handle)) * -.5));cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0;direction:rtl}.sky-flyout-resize-handle::-moz-range-thumb,.sky-flyout-resize-handle::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-ms-thumb,.sky-flyout-resize-handle::-ms-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-btn-primary-action,.sky-flyout-btn-permalink{--sky-comp-override-inline-link-text-decoration-line: var( --sky-font-text_decoration-standalone_link-base );--sky-comp-override-inline-link-text-decoration-line-hover: var( --sky-font-text_decoration-standalone_link-hover );--sky-comp-override-inline-link-text-decoration-line-active: var( --sky-font-text_decoration-standalone_link-active );--sky-comp-override-inline-link-text-decoration-line-focus: var( --sky-font-text_decoration-standalone_link-focus );--sky-comp-override-inline-link-text-decoration-line-disabled: var( --sky-font-text_decoration-standalone_link-disabled )}.sky-flyout-header{border-bottom:var(--sky-override-flyout-header-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));width:inherit;background:var(--sky-override-flyout-header-background, var(--sky-color-background-container-base));padding:var(--sky-override-flyout-header-padding, var(--sky-comp-flyout-header-space-inset-top) var(--sky-comp-flyout-header-space-inset-right) var(--sky-comp-flyout-header-space-inset-bottom) var(--sky-comp-flyout-header-space-inset-left));height:var(--sky-override-flyout-header-height);display:flex;position:var(--sky-override-flyout-header-position, sticky);align-items:flex-start}.sky-flyout-header .sky-flyout-btn-primary-action,.sky-flyout-header .sky-flyout-btn-permalink{margin-right:var(--sky-override-flyout-header-button-margin-right, var(--sky-space-gap-action_group-m));display:inline-block}.sky-flyout-header-content{flex-grow:1}.sky-flyout-help-shim{padding-right:8px}@media(min-width:768px){.sky-flyout-help-shim{padding-right:50px}}.sky-flyout-content{overflow-y:auto;margin-top:var(--sky-override-flyout-header-height, 0);height:calc(100% - var(--sky-override-flyout-header-height, calc(var(--sky-size-icon-m) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-comp-button-borderless-space-inset-bottom) + var(--sky-comp-flyout-header-space-inset-top) + var(--sky-comp-flyout-header-space-inset-bottom) + var(--sky-border-width-divider))))}.sky-flyout-header-grab-handle{cursor:ew-resize;cursor:-webkit-grab;cursor:-moz-grab;margin-right:var(--sky-space-gap-action_group-m)}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: SkyResponsiveHostDirective, selector: "[skyResponsiveHost]", exportAs: ["skyResponsiveHost"] }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i4.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "component", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }, { kind: "ngmodule", type: SkyFlyoutResourcesModule }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i6.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i6.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: _SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
728
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
729
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.3", type: SkyFlyoutComponent, isStandalone: true, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [SkyFlyoutAdapterService], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n #flyoutRef\n class=\"sky-flyout\"\n skyResponsiveHost\n skyTransitionEndHandler\n tabindex=\"-1\"\n transitionPropertyToTrack=\"transform\"\n [attr.role]=\"config.ariaRole ? config.ariaRole : 'dialog'\"\n [attr.aria-describedby]=\"config.ariaDescribedBy\"\n [attr.aria-label]=\"config.ariaLabel\"\n [attr.aria-labelledby]=\"config.ariaLabelledBy\"\n [attr.aria-modal]=\"\n config.ariaRole === 'dialog' || !config.ariaRole ? true : false\n \"\n [attr.hidden]=\"!instanceReady ? true : undefined\"\n [class.sky-flyout-open]=\"instanceReady && isOpening\"\n [class.sky-flyout-opened]=\"isOpen && isOpening\"\n [id]=\"flyoutId\"\n [ngClass]=\"{\n 'sky-flyout-hidden': !isOpen && !isOpening,\n 'sky-flyout-fullscreen': isFullscreen\n }\"\n [style.z-index]=\"zIndex$ | async\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-8': 'modern'\n }\"\n [style.width.px]=\"flyoutWidth\"\n [cdkTrapFocus]=\"enableTrapFocus\"\n [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n [transitionTrigger]=\"isOpening\"\n (transitionEnd)=\"onTransitionEnd()\"\n>\n <div\n #flyoutHeader\n class=\"sky-flyout-header\"\n [style.z-index]=\"zIndex$ | async\"\n >\n <div class=\"sky-flyout-header-content\">\n <button\n *skyThemeIf=\"'modern'\"\n class=\"sky-btn sky-btn-icon-borderless sky-flyout-header-grab-handle\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n >\n <sky-icon\n *skyThemeIf=\"'modern'\"\n iconName=\"re-order-dots-vertical\"\n iconSize=\"s\"\n />\n </button>\n\n @if (config.showIterator) {\n <sky-flyout-iterator\n [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n (nextButtonClick)=\"onIteratorNextButtonClick()\"\n (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n />\n }\n </div>\n <div class=\"sky-flyout-header-buttons\">\n <ng-container *ngTemplateOutlet=\"permalinkTemplate\" />\n <ng-container *ngTemplateOutlet=\"primaryActionTemplate\" />\n <button\n class=\"sky-btn sky-flyout-btn-close sky-label-icon-theme-default\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_flyout_close' | skyLibResources\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"close()\"\n >\n <sky-icon iconName=\"close\" />\n </button>\n </div>\n </div>\n <div class=\"sky-flyout-content\">\n <div #target></div>\n </div>\n <div\n class=\"sky-flyout-resize-handle\"\n role=\"separator\"\n tabindex=\"0\"\n type=\"range\"\n [attr.aria-controls]=\"flyoutId\"\n [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n [attr.aria-valuemax]=\"config.maxWidth\"\n [attr.aria-valuemin]=\"config.minWidth\"\n [attr.aria-valuenow]=\"flyoutWidth\"\n (keydown)=\"onResizeHandleKeyDown($event)\"\n (mousedown)=\"onResizeHandleMouseDown($event)\"\n ></div>\n</div>\n\n<ng-template #permalinkTemplate>\n @if (permalink) {\n @if (permalink.url) {\n <a\n class=\"sky-btn sky-flyout-btn-permalink\"\n [skyHref]=\"permalink.url\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-link-inline': 'modern'\n }\"\n (click)=\"close()\"\n >\n {{ permalinkLabel }}\n </a>\n } @else if (permalink.route) {\n <a\n class=\"sky-btn sky-flyout-btn-permalink\"\n [routerLink]=\"permalink.route.commands\"\n [fragment]=\"permalink.route.extras?.fragment\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-link-inline': 'modern'\n }\"\n [queryParams]=\"permalink.route.extras?.queryParams\"\n [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n [state]=\"permalink.route.extras?.state\"\n (click)=\"close()\"\n >\n {{ permalinkLabel }}\n </a>\n }\n }\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n @if (primaryAction && primaryAction.callback) {\n <button\n type=\"button\"\n class=\"sky-btn sky-flyout-btn-primary-action\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-link-inline': 'modern'\n }\"\n (click)=\"invokePrimaryAction()\"\n >\n {{ primaryActionLabel }}\n </button>\n }\n</ng-template>\n", styles: [".sky-flyout:not(.sky-theme-modern *){--sky-override-flyout-background: #fff;--sky-override-flyout-border-left: 6px solid #0974a1;--sky-override-flyout-header-background: #eeeeef;--sky-override-flyout-header-border-bottom: 1px solid #cdcfd2;--sky-override-flyout-header-button-margin-right: 10px;--sky-override-flyout-header-height: 50px;--sky-override-flyout-header-padding: 8px 15px 8px 15px;--sky-override-flyout-header-position: fixed;--sky-flyout-resize-handle-offset: -10px;--sky-flyout-resize-handle-width: 14px}.sky-flyout{position:fixed;right:0;top:0;bottom:0;height:100%;background-color:var(--sky-override-flyout-background, var(--sky-color-background-container-base));--sky-background-color-page-default: var( --sky-override-flyout-background, var(--sky-color-background-container-base) );--sky-comp-override-list-header-background-color: initial;border-left:var(--sky-override-flyout-border-left, var(--sky-border-width-container-base) var(--sky-border-style-container-overlay) var(--sky-color-border-container-base));transform:translate(100%);transition-duration:var(--sky-global-duration-medium);transition-property:transform;transition-timing-function:ease-in}.sky-flyout.sky-flyout-open{transform:translate(0)}@starting-style{.sky-flyout.sky-flyout-open{transform:translate(100%)}}.sky-flyout.sky-flyout-opened{transform:none}.sky-flyout:focus{outline:none}.sky-flyout.sky-flyout-fullscreen{min-width:100%;max-width:100%}.sky-flyout.sky-flyout-fullscreen .sky-flyout-resize-handle{cursor:initial}.sky-flyout.sky-flyout-fullscreen .sky-flyout-header{width:100%}.sky-flyout.sky-flyout-hidden{visibility:hidden}.sky-flyout .sky-flyout-input-aria-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);outline:none}.sky-flyout-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:var(--sky-flyout-resize-handle-width, var(--sky-size-width-resize_handle));position:absolute;left:var(--sky-flyout-resize-handle-offset, calc(var(--sky-flyout-resize-handle-width, var(--sky-size-width-resize_handle)) * -.5));cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0;direction:rtl}.sky-flyout-resize-handle::-moz-range-thumb,.sky-flyout-resize-handle::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-ms-thumb,.sky-flyout-resize-handle::-ms-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-btn-primary-action,.sky-flyout-btn-permalink{--sky-comp-override-inline-link-text-decoration-line: var( --sky-font-text_decoration-standalone_link-base );--sky-comp-override-inline-link-text-decoration-line-hover: var( --sky-font-text_decoration-standalone_link-hover );--sky-comp-override-inline-link-text-decoration-line-active: var( --sky-font-text_decoration-standalone_link-active );--sky-comp-override-inline-link-text-decoration-line-focus: var( --sky-font-text_decoration-standalone_link-focus );--sky-comp-override-inline-link-text-decoration-line-disabled: var( --sky-font-text_decoration-standalone_link-disabled )}.sky-flyout-header{border-bottom:var(--sky-override-flyout-header-border-bottom, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider));width:inherit;background:var(--sky-override-flyout-header-background, var(--sky-color-background-container-base));padding:var(--sky-override-flyout-header-padding, var(--sky-comp-flyout-header-space-inset-top) var(--sky-comp-flyout-header-space-inset-right) var(--sky-comp-flyout-header-space-inset-bottom) var(--sky-comp-flyout-header-space-inset-left));height:var(--sky-override-flyout-header-height);display:flex;position:var(--sky-override-flyout-header-position, sticky);align-items:flex-start}.sky-flyout-header .sky-flyout-btn-primary-action,.sky-flyout-header .sky-flyout-btn-permalink{margin-right:var(--sky-override-flyout-header-button-margin-right, var(--sky-space-gap-action_group-m));display:inline-block}.sky-flyout-header-content{flex-grow:1}.sky-flyout-help-shim{padding-right:8px}@media(min-width:768px){.sky-flyout-help-shim{padding-right:50px}}.sky-flyout-content{overflow-y:auto;margin-top:var(--sky-override-flyout-header-height, 0);height:calc(100% - var(--sky-override-flyout-header-height, calc(var(--sky-size-icon-m) + var(--sky-comp-button-borderless-space-inset-top) + var(--sky-comp-button-borderless-space-inset-bottom) + var(--sky-comp-flyout-header-space-inset-top) + var(--sky-comp-flyout-header-space-inset-bottom) + var(--sky-border-width-divider))))}.sky-flyout-header-grab-handle{cursor:ew-resize;cursor:-webkit-grab;cursor:-moz-grab;margin-right:var(--sky-space-gap-action_group-m)}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: SkyResponsiveHostDirective, selector: "[skyResponsiveHost]", exportAs: ["skyResponsiveHost"] }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i4.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "component", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }, { kind: "ngmodule", type: SkyFlyoutResourcesModule }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i6.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i6.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "directive", type: _SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
730
730
|
}
|
|
731
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
731
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutComponent, decorators: [{
|
|
732
732
|
type: Component,
|
|
733
733
|
args: [{ selector: 'sky-flyout', providers: [SkyFlyoutAdapterService], changeDetection: ChangeDetectionStrategy.Eager, imports: [
|
|
734
734
|
A11yModule,
|
|
@@ -766,11 +766,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
766
766
|
}] } });
|
|
767
767
|
|
|
768
768
|
class SkyFlyoutModule {
|
|
769
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
770
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
771
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
769
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
770
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutModule, imports: [SkyFlyoutComponent], exports: [SkyFlyoutComponent] }); }
|
|
771
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutModule, imports: [SkyFlyoutComponent] }); }
|
|
772
772
|
}
|
|
773
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
773
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutModule, decorators: [{
|
|
774
774
|
type: NgModule,
|
|
775
775
|
args: [{
|
|
776
776
|
imports: [SkyFlyoutComponent],
|
|
@@ -930,11 +930,11 @@ class SkyFlyoutService {
|
|
|
930
930
|
this.#ngUnsubscribe.unsubscribe();
|
|
931
931
|
this.#ngUnsubscribe = new Subject();
|
|
932
932
|
}
|
|
933
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
934
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
933
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutService, deps: [{ token: i1$2.SkyCoreAdapterService }, { token: i1$2.SkyAppWindowRef }, { token: i1$2.SkyDynamicComponentService }, { token: i2$1.Router }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
934
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutService, providedIn: 'root' }); }
|
|
935
935
|
}
|
|
936
936
|
_a = SkyFlyoutService;
|
|
937
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
937
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutService, decorators: [{
|
|
938
938
|
type: Injectable,
|
|
939
939
|
args: [{
|
|
940
940
|
providedIn: 'root',
|
|
@@ -954,10 +954,10 @@ class SkyFlyoutLegacyService extends SkyFlyoutService {
|
|
|
954
954
|
/* eslint-enable @angular-eslint/prefer-inject */
|
|
955
955
|
super(coreAdapter, windowRef, dynamicComponentService, router, ngZone);
|
|
956
956
|
}
|
|
957
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
958
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
957
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutLegacyService, deps: [{ token: i1$2.SkyCoreAdapterService }, { token: i1$2.SkyAppWindowRef }, { token: i1$2.SkyDynamicComponentLegacyService }, { token: i2$1.Router }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
958
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutLegacyService, providedIn: 'any' }); }
|
|
959
959
|
}
|
|
960
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
960
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.3", ngImport: i0, type: SkyFlyoutLegacyService, decorators: [{
|
|
961
961
|
type: Injectable,
|
|
962
962
|
args: [{
|
|
963
963
|
providedIn: 'any',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/flyout",
|
|
3
|
-
"version": "15.
|
|
3
|
+
"version": "15.4.0",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -16,15 +16,15 @@
|
|
|
16
16
|
},
|
|
17
17
|
"homepage": "https://github.com/blackbaud/skyux#readme",
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"@angular/cdk": "^22.
|
|
20
|
-
"@angular/common": "^22.
|
|
21
|
-
"@angular/core": "^22.
|
|
22
|
-
"@angular/router": "^22.
|
|
23
|
-
"@skyux/core": "15.
|
|
24
|
-
"@skyux/i18n": "15.
|
|
25
|
-
"@skyux/icon": "15.
|
|
26
|
-
"@skyux/router": "15.
|
|
27
|
-
"@skyux/theme": "15.
|
|
19
|
+
"@angular/cdk": "^22.2.3",
|
|
20
|
+
"@angular/common": "^22.2.3",
|
|
21
|
+
"@angular/core": "^22.2.3",
|
|
22
|
+
"@angular/router": "^22.2.3",
|
|
23
|
+
"@skyux/core": "15.4.0",
|
|
24
|
+
"@skyux/i18n": "15.4.0",
|
|
25
|
+
"@skyux/icon": "15.4.0",
|
|
26
|
+
"@skyux/router": "15.4.0",
|
|
27
|
+
"@skyux/theme": "15.4.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"tslib": "^2.8.1"
|
package/types/skyux-flyout.d.ts
CHANGED
|
@@ -340,7 +340,7 @@ declare class SkyFlyoutService implements OnDestroy {
|
|
|
340
340
|
*/
|
|
341
341
|
open<T>(component: Type<T>, config?: SkyFlyoutConfig): SkyFlyoutInstance<T>;
|
|
342
342
|
static ɵfac: i0.ɵɵFactoryDeclaration<SkyFlyoutService, never>;
|
|
343
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
343
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
344
344
|
}
|
|
345
345
|
/**
|
|
346
346
|
* Launches flyouts and provides a common look and feel.
|
|
@@ -352,7 +352,7 @@ declare class SkyFlyoutService implements OnDestroy {
|
|
|
352
352
|
declare class SkyFlyoutLegacyService extends SkyFlyoutService {
|
|
353
353
|
constructor(coreAdapter: SkyCoreAdapterService, windowRef: SkyAppWindowRef, dynamicComponentService: SkyDynamicComponentLegacyService, router: Router, ngZone: NgZone);
|
|
354
354
|
static ɵfac: i0.ɵɵFactoryDeclaration<SkyFlyoutLegacyService, never>;
|
|
355
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<
|
|
355
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<any>;
|
|
356
356
|
}
|
|
357
357
|
|
|
358
358
|
export { SkyFlyoutBeforeCloseHandler, SkyFlyoutInstance, SkyFlyoutLegacyService, SkyFlyoutMessageType, SkyFlyoutModule, SkyFlyoutService, SkyFlyoutComponent as λ1 };
|