@skyux/flyout 5.5.0-alpha.0 → 5.6.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/bundles/skyux-flyout.umd.js +97 -96
- package/documentation.json +39 -39
- package/esm2015/lib/modules/flyout/flyout-adapter.service.js.map +1 -1
- package/esm2015/lib/modules/flyout/flyout-instance.js.map +1 -1
- package/esm2015/lib/modules/flyout/flyout-iterator.component.js.map +1 -1
- package/esm2015/lib/modules/flyout/flyout-media-query.service.js.map +1 -1
- package/esm2015/lib/modules/flyout/flyout.component.js +6 -5
- package/esm2015/lib/modules/flyout/flyout.component.js.map +1 -1
- package/esm2015/lib/modules/flyout/flyout.module.js +3 -3
- package/esm2015/lib/modules/flyout/flyout.module.js.map +1 -1
- package/esm2015/lib/modules/flyout/flyout.service.js +1 -1
- package/esm2015/lib/modules/flyout/flyout.service.js.map +1 -1
- package/esm2015/lib/modules/flyout/types/flyout-config.js.map +1 -1
- package/esm2015/lib/modules/shared/sky-flyout-resources.module.js +1 -1
- package/esm2015/lib/modules/shared/sky-flyout-resources.module.js.map +1 -1
- package/fesm2015/skyux-flyout.js +67 -66
- package/fesm2015/skyux-flyout.js.map +1 -1
- package/lib/modules/flyout/flyout-iterator.component.d.ts +1 -1
- package/lib/modules/flyout/flyout.component.d.ts +2 -2
- package/lib/modules/flyout/flyout.service.d.ts +1 -1
- package/lib/modules/flyout/types/flyout-config.d.ts +1 -1
- package/package.json +20 -6
package/fesm2015/skyux-flyout.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, NgModule,
|
|
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';
|
|
@@ -8,18 +8,18 @@ import { CommonModule } from '@angular/common';
|
|
|
8
8
|
import { FormsModule } from '@angular/forms';
|
|
9
9
|
import * as i2$2 from '@angular/router';
|
|
10
10
|
import { RouterModule, NavigationStart } from '@angular/router';
|
|
11
|
-
import * as i1$1 from '@skyux/indicators';
|
|
12
|
-
import { SkyIconModule } from '@skyux/indicators';
|
|
13
11
|
import * as i2$1 from '@skyux/i18n';
|
|
14
12
|
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
13
|
+
import * as i1 from '@skyux/indicators';
|
|
14
|
+
import { SkyIconModule } from '@skyux/indicators';
|
|
15
15
|
import * as i10 from '@skyux/router';
|
|
16
16
|
import { SkyHrefModule } from '@skyux/router';
|
|
17
17
|
import * as i2 from '@skyux/theme';
|
|
18
18
|
import { SkyThemeModule } from '@skyux/theme';
|
|
19
19
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
20
|
-
import
|
|
21
|
-
import * as i1 from '@skyux/core';
|
|
20
|
+
import * as i1$1 from '@skyux/core';
|
|
22
21
|
import { SkyMediaBreakpoints, SkyMediaQueryService } from '@skyux/core';
|
|
22
|
+
import { takeUntil, take, takeWhile } from 'rxjs/operators';
|
|
23
23
|
|
|
24
24
|
/**
|
|
25
25
|
* @internal
|
|
@@ -191,6 +191,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
191
191
|
}]
|
|
192
192
|
}] });
|
|
193
193
|
|
|
194
|
+
/**
|
|
195
|
+
* @internal
|
|
196
|
+
*/
|
|
197
|
+
class SkyFlyoutIteratorComponent {
|
|
198
|
+
constructor() {
|
|
199
|
+
this.ngUnsubscribe = new Subject();
|
|
200
|
+
this._nextButtonClick = new EventEmitter();
|
|
201
|
+
this._previousButtonClick = new EventEmitter();
|
|
202
|
+
}
|
|
203
|
+
get previousButtonClick() {
|
|
204
|
+
return this._previousButtonClick;
|
|
205
|
+
}
|
|
206
|
+
get nextButtonClick() {
|
|
207
|
+
return this._nextButtonClick;
|
|
208
|
+
}
|
|
209
|
+
ngOnDestroy() {
|
|
210
|
+
this.ngUnsubscribe.next();
|
|
211
|
+
this.ngUnsubscribe.complete();
|
|
212
|
+
this._previousButtonClick.complete();
|
|
213
|
+
this._nextButtonClick.complete();
|
|
214
|
+
}
|
|
215
|
+
onIteratorPreviousClick() {
|
|
216
|
+
/* istanbul ignore else */
|
|
217
|
+
if (!this.previousButtonDisabled) {
|
|
218
|
+
this._previousButtonClick.emit();
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
onIteratorNextClick() {
|
|
222
|
+
/* istanbul ignore else */
|
|
223
|
+
if (!this.nextButtonDisabled) {
|
|
224
|
+
this._nextButtonClick.emit();
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
SkyFlyoutIteratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutIteratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
229
|
+
SkyFlyoutIteratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: SkyFlyoutIteratorComponent, decorators: [{
|
|
231
|
+
type: Component,
|
|
232
|
+
args: [{
|
|
233
|
+
selector: 'sky-flyout-iterator',
|
|
234
|
+
templateUrl: './flyout-iterator.component.html',
|
|
235
|
+
styleUrls: ['./flyout-iterator.component.scss'],
|
|
236
|
+
}]
|
|
237
|
+
}], propDecorators: { nextButtonDisabled: [{
|
|
238
|
+
type: Input
|
|
239
|
+
}], previousButtonDisabled: [{
|
|
240
|
+
type: Input
|
|
241
|
+
}], previousButtonClick: [{
|
|
242
|
+
type: Output
|
|
243
|
+
}], nextButtonClick: [{
|
|
244
|
+
type: Output
|
|
245
|
+
}] } });
|
|
246
|
+
|
|
194
247
|
/**
|
|
195
248
|
* @internal
|
|
196
249
|
*/
|
|
@@ -245,11 +298,11 @@ class SkyFlyoutAdapterService {
|
|
|
245
298
|
}
|
|
246
299
|
}
|
|
247
300
|
}
|
|
248
|
-
SkyFlyoutAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutAdapterService, deps: [{ token: i0.RendererFactory2 }, { token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
301
|
+
SkyFlyoutAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutAdapterService, deps: [{ token: i0.RendererFactory2 }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
249
302
|
SkyFlyoutAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutAdapterService });
|
|
250
303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutAdapterService, decorators: [{
|
|
251
304
|
type: Injectable
|
|
252
|
-
}], ctorParameters: function () { return [{ type: i0.RendererFactory2 }, { type: i1.SkyAppWindowRef }]; } });
|
|
305
|
+
}], ctorParameters: function () { return [{ type: i0.RendererFactory2 }, { type: i1$1.SkyAppWindowRef }]; } });
|
|
253
306
|
|
|
254
307
|
/**
|
|
255
308
|
* @internal
|
|
@@ -328,59 +381,6 @@ class SkyFlyoutBeforeCloseHandler {
|
|
|
328
381
|
}
|
|
329
382
|
}
|
|
330
383
|
|
|
331
|
-
/**
|
|
332
|
-
* @internal
|
|
333
|
-
*/
|
|
334
|
-
class SkyFlyoutIteratorComponent {
|
|
335
|
-
constructor() {
|
|
336
|
-
this.ngUnsubscribe = new Subject();
|
|
337
|
-
this._nextButtonClick = new EventEmitter();
|
|
338
|
-
this._previousButtonClick = new EventEmitter();
|
|
339
|
-
}
|
|
340
|
-
get previousButtonClick() {
|
|
341
|
-
return this._previousButtonClick;
|
|
342
|
-
}
|
|
343
|
-
get nextButtonClick() {
|
|
344
|
-
return this._nextButtonClick;
|
|
345
|
-
}
|
|
346
|
-
ngOnDestroy() {
|
|
347
|
-
this.ngUnsubscribe.next();
|
|
348
|
-
this.ngUnsubscribe.complete();
|
|
349
|
-
this._previousButtonClick.complete();
|
|
350
|
-
this._nextButtonClick.complete();
|
|
351
|
-
}
|
|
352
|
-
onIteratorPreviousClick() {
|
|
353
|
-
/* istanbul ignore else */
|
|
354
|
-
if (!this.previousButtonDisabled) {
|
|
355
|
-
this._previousButtonClick.emit();
|
|
356
|
-
}
|
|
357
|
-
}
|
|
358
|
-
onIteratorNextClick() {
|
|
359
|
-
/* istanbul ignore else */
|
|
360
|
-
if (!this.nextButtonDisabled) {
|
|
361
|
-
this._nextButtonClick.emit();
|
|
362
|
-
}
|
|
363
|
-
}
|
|
364
|
-
}
|
|
365
|
-
SkyFlyoutIteratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutIteratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
366
|
-
SkyFlyoutIteratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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$1.λ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 } });
|
|
367
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutIteratorComponent, decorators: [{
|
|
368
|
-
type: Component,
|
|
369
|
-
args: [{
|
|
370
|
-
selector: 'sky-flyout-iterator',
|
|
371
|
-
templateUrl: './flyout-iterator.component.html',
|
|
372
|
-
styleUrls: ['./flyout-iterator.component.scss'],
|
|
373
|
-
}]
|
|
374
|
-
}], propDecorators: { nextButtonDisabled: [{
|
|
375
|
-
type: Input
|
|
376
|
-
}], previousButtonDisabled: [{
|
|
377
|
-
type: Input
|
|
378
|
-
}], previousButtonClick: [{
|
|
379
|
-
type: Output
|
|
380
|
-
}], nextButtonClick: [{
|
|
381
|
-
type: Output
|
|
382
|
-
}] } });
|
|
383
|
-
|
|
384
384
|
const FLYOUT_OPEN_STATE = 'flyoutOpen';
|
|
385
385
|
const FLYOUT_CLOSED_STATE = 'flyoutClosed';
|
|
386
386
|
let nextId = 0;
|
|
@@ -439,7 +439,7 @@ class SkyFlyoutComponent {
|
|
|
439
439
|
return this.getString('skyux_flyout_permalink_button');
|
|
440
440
|
}
|
|
441
441
|
get primaryAction() {
|
|
442
|
-
|
|
442
|
+
const primaryAction = this.config.primaryAction;
|
|
443
443
|
if (primaryAction) {
|
|
444
444
|
return primaryAction;
|
|
445
445
|
}
|
|
@@ -746,6 +746,7 @@ class SkyFlyoutComponent {
|
|
|
746
746
|
if (this.resizeKeyControlActive) {
|
|
747
747
|
this.resizeKeyControlActive = false;
|
|
748
748
|
}
|
|
749
|
+
break;
|
|
749
750
|
case 'left':
|
|
750
751
|
if (this.resizeKeyControlActive) {
|
|
751
752
|
/* istanbul ignore else */
|
|
@@ -787,12 +788,12 @@ class SkyFlyoutComponent {
|
|
|
787
788
|
});
|
|
788
789
|
}
|
|
789
790
|
}
|
|
790
|
-
SkyFlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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.SkyUIConfigService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
791
|
+
SkyFlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 });
|
|
791
792
|
SkyFlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFlyoutComponent, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
|
|
792
793
|
SkyFlyoutAdapterService,
|
|
793
794
|
SkyFlyoutMediaQueryService,
|
|
794
795
|
{ provide: SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
|
|
795
|
-
], 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: "flyoutCloseButton", first: true, predicate: ["flyoutCloseButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "flyoutContent", first: true, predicate: ["flyoutContent"], descendants: true, read: ElementRef, 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=\"\n sky-btn\n sky-btn-icon-borderless\n sky-margin-inline-sm\n sky-flyout-header-grab-handle\n \"\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 #flyoutCloseButton\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\" #flyoutContent>\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=\"\n sky-btn\n sky-btn-default\n sky-flyout-btn-primary-action\n sky-margin-inline-default\n \"\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{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"], components: [{ type: i1
|
|
796
|
+
], 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: "flyoutCloseButton", first: true, predicate: ["flyoutCloseButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "flyoutContent", first: true, predicate: ["flyoutContent"], descendants: true, read: ElementRef, 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=\"\n sky-btn\n sky-btn-icon-borderless\n sky-margin-inline-sm\n sky-flyout-header-grab-handle\n \"\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 #flyoutCloseButton\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\" #flyoutContent>\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=\"\n sky-btn\n sky-btn-default\n sky-flyout-btn-primary-action\n sky-margin-inline-default\n \"\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{background:#000}.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: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe }, animations: [
|
|
796
797
|
trigger('flyoutState', [
|
|
797
798
|
state(FLYOUT_OPEN_STATE, style({ transform: 'initial' })),
|
|
798
799
|
state(FLYOUT_CLOSED_STATE, style({ transform: 'translateX(100%)' })),
|
|
@@ -828,7 +829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
828
829
|
// Allow automatic change detection for child components.
|
|
829
830
|
changeDetection: ChangeDetectionStrategy.Default,
|
|
830
831
|
}]
|
|
831
|
-
}], 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.SkyUIConfigService }, { type: i0.NgZone }]; }, propDecorators: { flyoutRef: [{
|
|
832
|
+
}], 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: [{
|
|
832
833
|
type: ViewChild,
|
|
833
834
|
args: ['flyoutRef', {
|
|
834
835
|
read: ElementRef,
|
|
@@ -1054,14 +1055,14 @@ class SkyFlyoutService {
|
|
|
1054
1055
|
this.ngUnsubscribe = new Subject();
|
|
1055
1056
|
}
|
|
1056
1057
|
}
|
|
1057
|
-
SkyFlyoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutService, deps: [{ token: i1.SkyCoreAdapterService }, { token: i1.SkyAppWindowRef }, { token: i1.SkyDynamicComponentService }, { token: i2$2.Router }, { token: i0.NgZone }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1058
|
+
SkyFlyoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutService, deps: [{ token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyAppWindowRef }, { token: i1$1.SkyDynamicComponentService }, { token: i2$2.Router }, { token: i0.NgZone }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1058
1059
|
SkyFlyoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutService, providedIn: 'any' });
|
|
1059
1060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutService, decorators: [{
|
|
1060
1061
|
type: Injectable,
|
|
1061
1062
|
args: [{
|
|
1062
1063
|
providedIn: 'any',
|
|
1063
1064
|
}]
|
|
1064
|
-
}], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }, { type: i1.SkyAppWindowRef }, { type: i1.SkyDynamicComponentService }, { type: i2$2.Router }, { type: i0.NgZone }, { type: i0.ApplicationRef }]; } });
|
|
1065
|
+
}], ctorParameters: function () { return [{ type: i1$1.SkyCoreAdapterService }, { type: i1$1.SkyAppWindowRef }, { type: i1$1.SkyDynamicComponentService }, { type: i2$2.Router }, { type: i0.NgZone }, { type: i0.ApplicationRef }]; } });
|
|
1065
1066
|
|
|
1066
1067
|
/**
|
|
1067
1068
|
* Generated bundle index. Do not edit.
|