@skyux/flyout 6.0.0-beta.2 → 6.0.0-beta.5
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/documentation.json +139 -166
- package/esm2020/lib/modules/flyout/flyout-adapter.service.mjs +3 -3
- package/esm2020/lib/modules/flyout/flyout-iterator.component.mjs +3 -3
- package/esm2020/lib/modules/flyout/flyout-media-query.service.mjs +3 -3
- package/esm2020/lib/modules/flyout/flyout.component.mjs +6 -19
- package/esm2020/lib/modules/flyout/flyout.module.mjs +4 -4
- package/esm2020/lib/modules/flyout/flyout.service.mjs +7 -13
- package/esm2020/lib/modules/shared/sky-flyout-resources.module.mjs +4 -4
- package/fesm2015/skyux-flyout.mjs +28 -49
- package/fesm2015/skyux-flyout.mjs.map +1 -1
- package/fesm2020/skyux-flyout.mjs +28 -47
- package/fesm2020/skyux-flyout.mjs.map +1 -1
- package/lib/modules/flyout/flyout.component.d.ts +0 -2
- package/lib/modules/flyout/flyout.service.d.ts +3 -4
- package/package.json +12 -12
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, NgModule, Component, Input, Output, Injectable, Injector, ElementRef, ViewContainerRef, ChangeDetectionStrategy, ViewChild, HostListener
|
|
2
|
+
import { EventEmitter, NgModule, Component, Input, Output, Injectable, Injector, ElementRef, ViewContainerRef, ChangeDetectionStrategy, ViewChild, HostListener } from '@angular/core';
|
|
3
3
|
import { Subject, BehaviorSubject, fromEvent } from 'rxjs';
|
|
4
4
|
import * as i9 from '@angular/cdk/a11y';
|
|
5
5
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
@@ -168,16 +168,16 @@ class SkyFlyoutResourcesProvider {
|
|
|
168
168
|
*/
|
|
169
169
|
class SkyFlyoutResourcesModule {
|
|
170
170
|
}
|
|
171
|
-
SkyFlyoutResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
172
|
-
SkyFlyoutResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2
|
|
173
|
-
SkyFlyoutResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2
|
|
171
|
+
SkyFlyoutResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
172
|
+
SkyFlyoutResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutResourcesModule, exports: [SkyI18nModule] });
|
|
173
|
+
SkyFlyoutResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutResourcesModule, providers: [
|
|
174
174
|
{
|
|
175
175
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
176
176
|
useClass: SkyFlyoutResourcesProvider,
|
|
177
177
|
multi: true,
|
|
178
178
|
},
|
|
179
179
|
], imports: [SkyI18nModule] });
|
|
180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutResourcesModule, decorators: [{
|
|
181
181
|
type: NgModule,
|
|
182
182
|
args: [{
|
|
183
183
|
exports: [SkyI18nModule],
|
|
@@ -225,9 +225,9 @@ class SkyFlyoutIteratorComponent {
|
|
|
225
225
|
}
|
|
226
226
|
}
|
|
227
227
|
}
|
|
228
|
-
SkyFlyoutIteratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
229
|
-
SkyFlyoutIteratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
230
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
228
|
+
SkyFlyoutIteratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutIteratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
229
|
+
SkyFlyoutIteratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: { nextButtonDisabled: "nextButtonDisabled", previousButtonDisabled: "previousButtonDisabled" }, outputs: { previousButtonClick: "previousButtonClick", nextButtonClick: "nextButtonClick" }, ngImport: i0, template: "<div id=\"iterators\" class=\"sky-flyout-iterators\">\n <button\n class=\"sky-btn\"\n [attr.aria-label]=\"\n 'skyux_flyout_iterator_previous_button' | skyLibResources\n \"\n [disabled]=\"previousButtonDisabled\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-margin-inline-compact': 'default',\n 'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onIteratorPreviousClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-up\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"chevron-up\"\n iconType=\"skyux\"\n size=\"lg\"\n >\n </sky-icon>\n </button>\n <button\n class=\"sky-btn\"\n [attr.aria-label]=\"'skyux_flyout_iterator_next_button' | skyLibResources\"\n [disabled]=\"nextButtonDisabled\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-margin-inline-compact': 'default',\n 'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onIteratorNextClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-down\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"chevron-down\"\n iconType=\"skyux\"\n size=\"lg\"\n >\n </sky-icon>\n </button>\n</div>\n", styles: [":host-context(.sky-theme-modern) .sky-flyout-iterators{display:inline}.sky-theme-modern .sky-flyout-iterators{display:inline}\n"], components: [{ type: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe } });
|
|
230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutIteratorComponent, decorators: [{
|
|
231
231
|
type: Component,
|
|
232
232
|
args: [{ selector: 'sky-flyout-iterator', template: "<div id=\"iterators\" class=\"sky-flyout-iterators\">\n <button\n class=\"sky-btn\"\n [attr.aria-label]=\"\n 'skyux_flyout_iterator_previous_button' | skyLibResources\n \"\n [disabled]=\"previousButtonDisabled\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-margin-inline-compact': 'default',\n 'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onIteratorPreviousClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-up\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"chevron-up\"\n iconType=\"skyux\"\n size=\"lg\"\n >\n </sky-icon>\n </button>\n <button\n class=\"sky-btn\"\n [attr.aria-label]=\"'skyux_flyout_iterator_next_button' | skyLibResources\"\n [disabled]=\"nextButtonDisabled\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-margin-inline-compact': 'default',\n 'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n }\"\n (click)=\"onIteratorNextClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-down\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"chevron-down\"\n iconType=\"skyux\"\n size=\"lg\"\n >\n </sky-icon>\n </button>\n</div>\n", styles: [":host-context(.sky-theme-modern) .sky-flyout-iterators{display:inline}.sky-theme-modern .sky-flyout-iterators{display:inline}\n"] }]
|
|
233
233
|
}], propDecorators: { nextButtonDisabled: [{
|
|
@@ -294,9 +294,9 @@ class SkyFlyoutAdapterService {
|
|
|
294
294
|
}
|
|
295
295
|
}
|
|
296
296
|
}
|
|
297
|
-
SkyFlyoutAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
298
|
-
SkyFlyoutAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
299
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
297
|
+
SkyFlyoutAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutAdapterService, deps: [{ token: i0.RendererFactory2 }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
298
|
+
SkyFlyoutAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutAdapterService });
|
|
299
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutAdapterService, decorators: [{
|
|
300
300
|
type: Injectable
|
|
301
301
|
}], ctorParameters: function () { return [{ type: i0.RendererFactory2 }, { type: i1$1.SkyAppWindowRef }]; } });
|
|
302
302
|
|
|
@@ -362,9 +362,9 @@ class SkyFlyoutMediaQueryService {
|
|
|
362
362
|
this.currentSubject.complete();
|
|
363
363
|
}
|
|
364
364
|
}
|
|
365
|
-
SkyFlyoutMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
366
|
-
SkyFlyoutMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
367
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
365
|
+
SkyFlyoutMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
366
|
+
SkyFlyoutMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutMediaQueryService });
|
|
367
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutMediaQueryService, decorators: [{
|
|
368
368
|
type: Injectable
|
|
369
369
|
}], ctorParameters: function () { return []; } });
|
|
370
370
|
|
|
@@ -629,7 +629,6 @@ class SkyFlyoutComponent {
|
|
|
629
629
|
return instance;
|
|
630
630
|
}
|
|
631
631
|
handleIncomingMessages(message) {
|
|
632
|
-
/* tslint:disable-next-line:switch-default */
|
|
633
632
|
switch (message.type) {
|
|
634
633
|
case SkyFlyoutMessageType.Open:
|
|
635
634
|
if (!this.isOpen) {
|
|
@@ -785,12 +784,12 @@ class SkyFlyoutComponent {
|
|
|
785
784
|
});
|
|
786
785
|
}
|
|
787
786
|
}
|
|
788
|
-
SkyFlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
789
|
-
SkyFlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2
|
|
787
|
+
SkyFlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutComponent, deps: [{ token: SkyFlyoutAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i2$1.SkyLibResourcesService }, { token: SkyFlyoutMediaQueryService }, { token: i0.ElementRef }, { token: i1$1.SkyUIConfigService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
788
|
+
SkyFlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyFlyoutComponent, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
|
|
790
789
|
SkyFlyoutAdapterService,
|
|
791
790
|
SkyFlyoutMediaQueryService,
|
|
792
791
|
{ provide: SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
|
|
793
|
-
], 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: "
|
|
792
|
+
], 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 class=\"sky-flyout\"\n tabindex=\"-1\"\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 [id]=\"flyoutId\"\n [ngClass]=\"{\n 'sky-flyout-hidden': !isOpen && !isOpening,\n 'sky-flyout-fullscreen': isFullscreen\n }\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-8': 'modern'\n }\"\n (@flyoutState.done)=\"animationDone($event)\"\n [@flyoutState]=\"getAnimationState()\"\n [style.width.px]=\"flyoutWidth\"\n #flyoutRef\n [cdkTrapFocus]=\"enableTrapFocus\"\n [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n>\n <div\n class=\"sky-flyout-header\"\n [skyThemeClass]=\"{\n 'sky-padding-squish-large': 'default'\n }\"\n #flyoutHeader\n >\n <div class=\"sky-flyout-header-content\">\n <button\n *skyThemeIf=\"'modern'\"\n class=\"sky-btn sky-btn-icon-borderless sky-margin-inline-sm sky-flyout-header-grab-handle\"\n [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n >\n <sky-icon icon=\"tile-drag\" iconType=\"skyux\" size=\"lg\"> </sky-icon>\n </button>\n\n <sky-flyout-iterator\n *ngIf=\"config.showIterator\"\n [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n (nextButtonClick)=\"onIteratorNextButtonClick()\"\n (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n >\n </sky-flyout-iterator>\n </div>\n <div class=\"sky-flyout-header-buttons\">\n <ng-container *ngTemplateOutlet=\"permalinkTemplate\"> </ng-container>\n <ng-container *ngTemplateOutlet=\"primaryActionTemplate\"> </ng-container>\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 *skyThemeIf=\"'default'\" icon=\"close\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"close\"\n iconType=\"skyux\"\n size=\"lg\"\n >\n </sky-icon>\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 <ng-template [ngIf]=\"permalink\">\n <ng-template [ngIf]=\"permalink.url\">\n <a\n class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n [skyHref]=\"permalink.url\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-borderless': 'modern'\n }\"\n (click)=\"close()\"\n >\n {{ permalinkLabel }}\n </a>\n </ng-template>\n <ng-template [ngIf]=\"permalink.route\">\n <a\n class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n [routerLink]=\"permalink.route.commands\"\n [fragment]=\"permalink.route.extras?.fragment\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-borderless': '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 </ng-template>\n </ng-template>\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n <ng-template [ngIf]=\"primaryAction && primaryAction.callback\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-flyout-btn-primary-action sky-margin-inline-default\"\n (click)=\"invokePrimaryAction()\"\n >\n {{ primaryActionLabel }}\n </button>\n </ng-template>\n</ng-template>\n", styles: [".sky-flyout{position:fixed;right:0;top:0;bottom:0;height:100%;background-color:#fff;border-left:6px solid #0974a1;z-index:1001}.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-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:14px;position:absolute;left:-10px;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-header{border-bottom:1px solid #cdcfd2;width:100%;background:#eeeeef;height:50px;display:flex;align-items:flex-start}.sky-flyout-header-content{flex-grow:1}.sky-flyout-btn-permalink:hover{text-decoration:none}.sky-flyout-help-shim{padding-right:8px}@media (min-width: 768px){.sky-flyout-help-shim{padding-right:50px}}.sky-flyout-content{overflow-y:auto;height:calc(100% - 50px)}:host-context(.sky-theme-modern) .sky-flyout{border-left:0}:host-context(.sky-theme-modern) .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}:host-context(.sky-theme-modern) .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}.sky-theme-modern .sky-flyout{border-left:0}.sky-theme-modern .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}.sky-theme-modern .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout{background:#000}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout-header{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout,.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"], components: [{ type: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i9.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"] }, { type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe }, animations: [
|
|
794
793
|
trigger('flyoutState', [
|
|
795
794
|
state(FLYOUT_OPEN_STATE, style({ transform: 'initial' })),
|
|
796
795
|
state(FLYOUT_CLOSED_STATE, style({ transform: 'translateX(100%)' })),
|
|
@@ -801,7 +800,7 @@ SkyFlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
|
|
|
801
800
|
transition(`* <=> *`, animate('250ms ease-in')),
|
|
802
801
|
]),
|
|
803
802
|
], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
804
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
803
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutComponent, decorators: [{
|
|
805
804
|
type: Component,
|
|
806
805
|
args: [{ selector: 'sky-flyout', providers: [
|
|
807
806
|
SkyFlyoutAdapterService,
|
|
@@ -817,7 +816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
817
816
|
]),
|
|
818
817
|
transition(`* <=> *`, animate('250ms ease-in')),
|
|
819
818
|
]),
|
|
820
|
-
], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n class=\"sky-flyout\"\n tabindex=\"-1\"\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 [id]=\"flyoutId\"\n [ngClass]=\"{\n 'sky-flyout-hidden': !isOpen && !isOpening,\n 'sky-flyout-fullscreen': isFullscreen\n }\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-8': 'modern'\n }\"\n (@flyoutState.done)=\"animationDone($event)\"\n [@flyoutState]=\"getAnimationState()\"\n [style.width.px]=\"flyoutWidth\"\n #flyoutRef\n [cdkTrapFocus]=\"enableTrapFocus\"\n [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n>\n <div\n class=\"sky-flyout-header\"\n [skyThemeClass]=\"{\n 'sky-padding-squish-large': 'default'\n }\"\n #flyoutHeader\n >\n <div class=\"sky-flyout-header-content\">\n <button\n *skyThemeIf=\"'modern'\"\n class=\"sky-btn sky-btn-icon-borderless sky-margin-inline-sm sky-flyout-header-grab-handle\"\n [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n >\n <sky-icon icon=\"tile-drag\" iconType=\"skyux\" size=\"lg\"> </sky-icon>\n </button>\n\n <sky-flyout-iterator\n *ngIf=\"config.showIterator\"\n [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n (nextButtonClick)=\"onIteratorNextButtonClick()\"\n (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n >\n </sky-flyout-iterator>\n </div>\n <div class=\"sky-flyout-header-buttons\">\n <ng-container *ngTemplateOutlet=\"permalinkTemplate\"> </ng-container>\n <ng-container *ngTemplateOutlet=\"primaryActionTemplate\"> </ng-container>\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
|
|
819
|
+
], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n class=\"sky-flyout\"\n tabindex=\"-1\"\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 [id]=\"flyoutId\"\n [ngClass]=\"{\n 'sky-flyout-hidden': !isOpen && !isOpening,\n 'sky-flyout-fullscreen': isFullscreen\n }\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-8': 'modern'\n }\"\n (@flyoutState.done)=\"animationDone($event)\"\n [@flyoutState]=\"getAnimationState()\"\n [style.width.px]=\"flyoutWidth\"\n #flyoutRef\n [cdkTrapFocus]=\"enableTrapFocus\"\n [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n>\n <div\n class=\"sky-flyout-header\"\n [skyThemeClass]=\"{\n 'sky-padding-squish-large': 'default'\n }\"\n #flyoutHeader\n >\n <div class=\"sky-flyout-header-content\">\n <button\n *skyThemeIf=\"'modern'\"\n class=\"sky-btn sky-btn-icon-borderless sky-margin-inline-sm sky-flyout-header-grab-handle\"\n [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n >\n <sky-icon icon=\"tile-drag\" iconType=\"skyux\" size=\"lg\"> </sky-icon>\n </button>\n\n <sky-flyout-iterator\n *ngIf=\"config.showIterator\"\n [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n (nextButtonClick)=\"onIteratorNextButtonClick()\"\n (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n >\n </sky-flyout-iterator>\n </div>\n <div class=\"sky-flyout-header-buttons\">\n <ng-container *ngTemplateOutlet=\"permalinkTemplate\"> </ng-container>\n <ng-container *ngTemplateOutlet=\"primaryActionTemplate\"> </ng-container>\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 *skyThemeIf=\"'default'\" icon=\"close\"> </sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"close\"\n iconType=\"skyux\"\n size=\"lg\"\n >\n </sky-icon>\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 <ng-template [ngIf]=\"permalink\">\n <ng-template [ngIf]=\"permalink.url\">\n <a\n class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n [skyHref]=\"permalink.url\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-borderless': 'modern'\n }\"\n (click)=\"close()\"\n >\n {{ permalinkLabel }}\n </a>\n </ng-template>\n <ng-template [ngIf]=\"permalink.route\">\n <a\n class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n [routerLink]=\"permalink.route.commands\"\n [fragment]=\"permalink.route.extras?.fragment\"\n [skyThemeClass]=\"{\n 'sky-btn-default': 'default',\n 'sky-btn-borderless': '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 </ng-template>\n </ng-template>\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n <ng-template [ngIf]=\"primaryAction && primaryAction.callback\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-flyout-btn-primary-action sky-margin-inline-default\"\n (click)=\"invokePrimaryAction()\"\n >\n {{ primaryActionLabel }}\n </button>\n </ng-template>\n</ng-template>\n", styles: [".sky-flyout{position:fixed;right:0;top:0;bottom:0;height:100%;background-color:#fff;border-left:6px solid #0974a1;z-index:1001}.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-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:14px;position:absolute;left:-10px;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-header{border-bottom:1px solid #cdcfd2;width:100%;background:#eeeeef;height:50px;display:flex;align-items:flex-start}.sky-flyout-header-content{flex-grow:1}.sky-flyout-btn-permalink:hover{text-decoration:none}.sky-flyout-help-shim{padding-right:8px}@media (min-width: 768px){.sky-flyout-help-shim{padding-right:50px}}.sky-flyout-content{overflow-y:auto;height:calc(100% - 50px)}:host-context(.sky-theme-modern) .sky-flyout{border-left:0}:host-context(.sky-theme-modern) .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}:host-context(.sky-theme-modern) .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}.sky-theme-modern .sky-flyout{border-left:0}.sky-theme-modern .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}.sky-theme-modern .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout{background:#000}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout-header{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout,.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"] }]
|
|
821
820
|
}], ctorParameters: function () { return [{ type: SkyFlyoutAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i2$1.SkyLibResourcesService }, { type: SkyFlyoutMediaQueryService }, { type: i0.ElementRef }, { type: i1$1.SkyUIConfigService }, { type: i0.NgZone }]; }, propDecorators: { flyoutRef: [{
|
|
822
821
|
type: ViewChild,
|
|
823
822
|
args: ['flyoutRef', {
|
|
@@ -830,18 +829,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
830
829
|
read: ViewContainerRef,
|
|
831
830
|
static: true,
|
|
832
831
|
}]
|
|
833
|
-
}], flyoutCloseButton: [{
|
|
834
|
-
type: ViewChild,
|
|
835
|
-
args: ['flyoutCloseButton', {
|
|
836
|
-
read: ElementRef,
|
|
837
|
-
static: true,
|
|
838
|
-
}]
|
|
839
|
-
}], flyoutContent: [{
|
|
840
|
-
type: ViewChild,
|
|
841
|
-
args: ['flyoutContent', {
|
|
842
|
-
read: ElementRef,
|
|
843
|
-
static: true,
|
|
844
|
-
}]
|
|
845
832
|
}], flyoutHeader: [{
|
|
846
833
|
type: ViewChild,
|
|
847
834
|
args: ['flyoutHeader', {
|
|
@@ -855,8 +842,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
855
842
|
|
|
856
843
|
class SkyFlyoutModule {
|
|
857
844
|
}
|
|
858
|
-
SkyFlyoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
859
|
-
SkyFlyoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2
|
|
845
|
+
SkyFlyoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
846
|
+
SkyFlyoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutModule, declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent], imports: [A11yModule,
|
|
860
847
|
CommonModule,
|
|
861
848
|
FormsModule,
|
|
862
849
|
RouterModule,
|
|
@@ -865,7 +852,7 @@ SkyFlyoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
|
|
|
865
852
|
SkyFlyoutResourcesModule,
|
|
866
853
|
SkyThemeModule,
|
|
867
854
|
SkyHrefModule], exports: [SkyFlyoutComponent] });
|
|
868
|
-
SkyFlyoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2
|
|
855
|
+
SkyFlyoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutModule, imports: [[
|
|
869
856
|
A11yModule,
|
|
870
857
|
CommonModule,
|
|
871
858
|
FormsModule,
|
|
@@ -876,7 +863,7 @@ SkyFlyoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
|
|
|
876
863
|
SkyThemeModule,
|
|
877
864
|
SkyHrefModule,
|
|
878
865
|
]] });
|
|
879
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
866
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutModule, decorators: [{
|
|
880
867
|
type: NgModule,
|
|
881
868
|
args: [{
|
|
882
869
|
declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent],
|
|
@@ -901,16 +888,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
901
888
|
* document's `body` element. The `SkyFlyoutInstance` class watches for and triggers flyout events.
|
|
902
889
|
*/
|
|
903
890
|
class SkyFlyoutService {
|
|
904
|
-
constructor(coreAdapter, windowRef, dynamicComponentService, router, _ngZone
|
|
905
|
-
// NOTE: This used to be used for an `applicationRef.tick` which has since been removed.
|
|
906
|
-
// We can not remove this due to it being a breaking change for those manually constructing the service.
|
|
907
|
-
applicationRef) {
|
|
891
|
+
constructor(coreAdapter, windowRef, dynamicComponentService, router, _ngZone) {
|
|
908
892
|
this.coreAdapter = coreAdapter;
|
|
909
893
|
this.windowRef = windowRef;
|
|
910
894
|
this.dynamicComponentService = dynamicComponentService;
|
|
911
895
|
this.router = router;
|
|
912
896
|
this._ngZone = _ngZone;
|
|
913
|
-
this.applicationRef = applicationRef;
|
|
914
897
|
this.removeAfterClosed = false;
|
|
915
898
|
this.isOpening = false;
|
|
916
899
|
this.ngUnsubscribe = new Subject();
|
|
@@ -1043,16 +1026,14 @@ class SkyFlyoutService {
|
|
|
1043
1026
|
this.ngUnsubscribe = new Subject();
|
|
1044
1027
|
}
|
|
1045
1028
|
}
|
|
1046
|
-
SkyFlyoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2
|
|
1047
|
-
SkyFlyoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2
|
|
1048
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2
|
|
1029
|
+
SkyFlyoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutService, deps: [{ token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyAppWindowRef }, { token: i1$1.SkyDynamicComponentService }, { token: i2$2.Router }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1030
|
+
SkyFlyoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutService, providedIn: 'any' });
|
|
1031
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyFlyoutService, decorators: [{
|
|
1049
1032
|
type: Injectable,
|
|
1050
1033
|
args: [{
|
|
1051
1034
|
providedIn: 'any',
|
|
1052
1035
|
}]
|
|
1053
|
-
}], ctorParameters: function () { return [{ type: i1$1.SkyCoreAdapterService }, { type: i1$1.SkyAppWindowRef }, { type: i1$1.SkyDynamicComponentService }, { type: i2$2.Router }, { type: i0.NgZone }
|
|
1054
|
-
type: Optional
|
|
1055
|
-
}] }]; } });
|
|
1036
|
+
}], ctorParameters: function () { return [{ type: i1$1.SkyCoreAdapterService }, { type: i1$1.SkyAppWindowRef }, { type: i1$1.SkyDynamicComponentService }, { type: i2$2.Router }, { type: i0.NgZone }]; } });
|
|
1056
1037
|
|
|
1057
1038
|
/**
|
|
1058
1039
|
* Generated bundle index. Do not edit.
|