@skyux/flyout 5.0.0 → 5.0.4
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 +150 -123
- package/documentation.json +179 -176
- package/esm2015/modules/flyout/flyout-adapter.service.js +5 -5
- package/esm2015/modules/flyout/flyout-instance.js +6 -6
- package/esm2015/modules/flyout/flyout-iterator.component.js +6 -6
- package/esm2015/modules/flyout/flyout-media-query.service.js +9 -9
- package/esm2015/modules/flyout/flyout.component.js +78 -54
- package/esm2015/modules/flyout/flyout.module.js +11 -19
- package/esm2015/modules/flyout/flyout.service.js +12 -12
- package/esm2015/modules/flyout/types/flyout-action.js +1 -1
- package/esm2015/modules/flyout/types/flyout-config.js +1 -1
- package/esm2015/modules/flyout/types/flyout-message-type.js +1 -1
- package/esm2015/modules/flyout/types/flyout-message.js +1 -1
- package/esm2015/modules/flyout/types/flyout-permalink.js +1 -1
- package/esm2015/modules/shared/sky-flyout-resources.module.js +54 -0
- package/fesm2015/skyux-flyout.js +137 -108
- package/fesm2015/skyux-flyout.js.map +1 -1
- package/modules/flyout/flyout.component.d.ts +3 -0
- package/modules/flyout/flyout.module.d.ts +1 -1
- package/modules/flyout/flyout.service.d.ts +1 -4
- package/modules/shared/{flyout-resources.module.d.ts → sky-flyout-resources.module.d.ts} +0 -0
- package/package.json +12 -12
- package/bundles/skyux-flyout.umd.js.map +0 -1
- package/esm2015/modules/shared/flyout-resources.module.js +0 -41
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('@skyux/indicators'), require('@skyux/i18n'), require('@skyux/router'), require('@skyux/theme'), require('@angular/animations'), require('rxjs/operators'), require('@skyux/core')) :
|
|
3
3
|
typeof define === 'function' && define.amd ? define('@skyux/flyout', ['exports', '@angular/core', 'rxjs', '@angular/common', '@angular/forms', '@angular/router', '@skyux/indicators', '@skyux/i18n', '@skyux/router', '@skyux/theme', '@angular/animations', 'rxjs/operators', '@skyux/core'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.flyout = {}), global.ng.core, global.rxjs, global.ng.common, global.ng.forms, global.ng.router, global.i1$1, global.i2, global.
|
|
5
|
-
}(this, (function (exports, i0, rxjs, i7,
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.flyout = {}), global.ng.core, global.rxjs, global.ng.common, global.ng.forms, global.ng.router, global.i1$1, global.i2, global.i9, global.i2$1, global.ng.animations, global.rxjs.operators, global.i1));
|
|
5
|
+
})(this, (function (exports, i0, rxjs, i7, forms, i2$2, i1$1, i2, i9, i2$1, animations, operators, i1) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopNamespace(e) {
|
|
8
8
|
if (e && e.__esModule) return e;
|
|
@@ -13,24 +13,21 @@
|
|
|
13
13
|
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
14
|
Object.defineProperty(n, k, d.get ? d : {
|
|
15
15
|
enumerable: true,
|
|
16
|
-
get: function () {
|
|
17
|
-
return e[k];
|
|
18
|
-
}
|
|
16
|
+
get: function () { return e[k]; }
|
|
19
17
|
});
|
|
20
18
|
}
|
|
21
19
|
});
|
|
22
20
|
}
|
|
23
|
-
n[
|
|
21
|
+
n["default"] = e;
|
|
24
22
|
return Object.freeze(n);
|
|
25
23
|
}
|
|
26
24
|
|
|
27
25
|
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
|
|
28
26
|
var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
|
|
29
|
-
var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
|
|
30
27
|
var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
|
|
31
28
|
var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
|
|
32
29
|
var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2);
|
|
33
|
-
var
|
|
30
|
+
var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
|
|
34
31
|
var i2__namespace = /*#__PURE__*/_interopNamespace(i2$1);
|
|
35
32
|
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
|
|
36
33
|
|
|
@@ -114,12 +111,12 @@
|
|
|
114
111
|
this._iteratorNextButtonDisabled = newValue;
|
|
115
112
|
if (newValue) {
|
|
116
113
|
this.hostController.next({
|
|
117
|
-
type: exports.SkyFlyoutMessageType.DisableIteratorNextButton
|
|
114
|
+
type: exports.SkyFlyoutMessageType.DisableIteratorNextButton,
|
|
118
115
|
});
|
|
119
116
|
}
|
|
120
117
|
else {
|
|
121
118
|
this.hostController.next({
|
|
122
|
-
type: exports.SkyFlyoutMessageType.EnableIteratorNextButton
|
|
119
|
+
type: exports.SkyFlyoutMessageType.EnableIteratorNextButton,
|
|
123
120
|
});
|
|
124
121
|
}
|
|
125
122
|
},
|
|
@@ -138,12 +135,12 @@
|
|
|
138
135
|
this._iteratorPreviousButtonDisabled = newValue;
|
|
139
136
|
if (newValue) {
|
|
140
137
|
this.hostController.next({
|
|
141
|
-
type: exports.SkyFlyoutMessageType.DisableIteratorPreviousButton
|
|
138
|
+
type: exports.SkyFlyoutMessageType.DisableIteratorPreviousButton,
|
|
142
139
|
});
|
|
143
140
|
}
|
|
144
141
|
else {
|
|
145
142
|
this.hostController.next({
|
|
146
|
-
type: exports.SkyFlyoutMessageType.EnableIteratorPreviousButton
|
|
143
|
+
type: exports.SkyFlyoutMessageType.EnableIteratorPreviousButton,
|
|
147
144
|
});
|
|
148
145
|
}
|
|
149
146
|
},
|
|
@@ -155,7 +152,7 @@
|
|
|
155
152
|
*/
|
|
156
153
|
SkyFlyoutInstance.prototype.close = function () {
|
|
157
154
|
this.hostController.next({
|
|
158
|
-
type: exports.SkyFlyoutMessageType.Close
|
|
155
|
+
type: exports.SkyFlyoutMessageType.Close,
|
|
159
156
|
});
|
|
160
157
|
this._iteratorPreviousButtonClick.complete();
|
|
161
158
|
this._iteratorNextButtonClick.complete();
|
|
@@ -167,11 +164,20 @@
|
|
|
167
164
|
/**
|
|
168
165
|
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
169
166
|
* The contents of this file were automatically generated by
|
|
170
|
-
* the 'ng generate @skyux/i18n:lib-resources-module modules/shared/
|
|
167
|
+
* the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-flyout' schematic.
|
|
171
168
|
* To update this file, simply rerun the command.
|
|
172
169
|
*/
|
|
173
170
|
var RESOURCES = {
|
|
174
|
-
'EN-US': {
|
|
171
|
+
'EN-US': {
|
|
172
|
+
skyux_flyout_close: { message: 'Close flyout' },
|
|
173
|
+
skyux_flyout_iterator_previous_button: { message: 'Previous' },
|
|
174
|
+
skyux_flyout_iterator_next_button: { message: 'Next' },
|
|
175
|
+
skyux_flyout_permalink_button: { message: 'View record' },
|
|
176
|
+
skyux_flyout_primary_action_button: { message: 'Create list' },
|
|
177
|
+
skyux_flyout_resize_handle: {
|
|
178
|
+
message: 'Resize the flyout window. Press the enter or space key to activate, then use left arrow key to expand the flyout window and right arrow key to shrink the flyout window. Press the enter, space, or tab key to deactivate.',
|
|
179
|
+
},
|
|
180
|
+
},
|
|
175
181
|
};
|
|
176
182
|
var SkyFlyoutResourcesProvider = /** @class */ (function () {
|
|
177
183
|
function SkyFlyoutResourcesProvider() {
|
|
@@ -189,22 +195,26 @@
|
|
|
189
195
|
}
|
|
190
196
|
return SkyFlyoutResourcesModule;
|
|
191
197
|
}());
|
|
192
|
-
SkyFlyoutResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
193
|
-
SkyFlyoutResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
194
|
-
SkyFlyoutResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
198
|
+
SkyFlyoutResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
199
|
+
SkyFlyoutResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, exports: [i2.SkyI18nModule] });
|
|
200
|
+
SkyFlyoutResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, providers: [
|
|
201
|
+
{
|
|
195
202
|
provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
|
|
196
203
|
useClass: SkyFlyoutResourcesProvider,
|
|
197
|
-
multi: true
|
|
198
|
-
}
|
|
199
|
-
|
|
204
|
+
multi: true,
|
|
205
|
+
},
|
|
206
|
+
], imports: [i2.SkyI18nModule] });
|
|
207
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, decorators: [{
|
|
200
208
|
type: i0.NgModule,
|
|
201
209
|
args: [{
|
|
202
210
|
exports: [i2.SkyI18nModule],
|
|
203
|
-
providers: [
|
|
211
|
+
providers: [
|
|
212
|
+
{
|
|
204
213
|
provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
|
|
205
214
|
useClass: SkyFlyoutResourcesProvider,
|
|
206
|
-
multi: true
|
|
207
|
-
}
|
|
215
|
+
multi: true,
|
|
216
|
+
},
|
|
217
|
+
],
|
|
208
218
|
}]
|
|
209
219
|
}] });
|
|
210
220
|
|
|
@@ -263,9 +273,9 @@
|
|
|
263
273
|
};
|
|
264
274
|
return SkyFlyoutAdapterService;
|
|
265
275
|
}());
|
|
266
|
-
SkyFlyoutAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
267
|
-
SkyFlyoutAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
268
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
276
|
+
SkyFlyoutAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }, { token: i1__namespace.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
277
|
+
SkyFlyoutAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutAdapterService });
|
|
278
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutAdapterService, decorators: [{
|
|
269
279
|
type: i0.Injectable
|
|
270
280
|
}], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }, { type: i1__namespace.SkyAppWindowRef }]; } });
|
|
271
281
|
|
|
@@ -289,7 +299,7 @@
|
|
|
289
299
|
return this.currentSubject.subscribe({
|
|
290
300
|
next: function (breakpoints) {
|
|
291
301
|
listener(breakpoints);
|
|
292
|
-
}
|
|
302
|
+
},
|
|
293
303
|
});
|
|
294
304
|
};
|
|
295
305
|
SkyFlyoutMediaQueryService.prototype.setBreakpointForWidth = function (width) {
|
|
@@ -318,16 +328,16 @@
|
|
|
318
328
|
var lgBreakpointMinPixels = 1200;
|
|
319
329
|
switch (breakpoint) {
|
|
320
330
|
case i1.SkyMediaBreakpoints.xs: {
|
|
321
|
-
return
|
|
331
|
+
return width <= xsBreakpointMaxPixels;
|
|
322
332
|
}
|
|
323
333
|
case i1.SkyMediaBreakpoints.sm: {
|
|
324
|
-
return
|
|
334
|
+
return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
|
|
325
335
|
}
|
|
326
336
|
case i1.SkyMediaBreakpoints.md: {
|
|
327
|
-
return
|
|
337
|
+
return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
|
|
328
338
|
}
|
|
329
339
|
default: {
|
|
330
|
-
return
|
|
340
|
+
return width >= lgBreakpointMinPixels;
|
|
331
341
|
}
|
|
332
342
|
}
|
|
333
343
|
};
|
|
@@ -336,9 +346,9 @@
|
|
|
336
346
|
};
|
|
337
347
|
return SkyFlyoutMediaQueryService;
|
|
338
348
|
}());
|
|
339
|
-
SkyFlyoutMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
340
|
-
SkyFlyoutMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
341
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
349
|
+
SkyFlyoutMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
350
|
+
SkyFlyoutMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService });
|
|
351
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService, decorators: [{
|
|
342
352
|
type: i0.Injectable
|
|
343
353
|
}], ctorParameters: function () { return []; } });
|
|
344
354
|
|
|
@@ -385,14 +395,14 @@
|
|
|
385
395
|
};
|
|
386
396
|
return SkyFlyoutIteratorComponent;
|
|
387
397
|
}());
|
|
388
|
-
SkyFlyoutIteratorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
389
|
-
SkyFlyoutIteratorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
390
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
398
|
+
SkyFlyoutIteratorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutIteratorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
399
|
+
SkyFlyoutIteratorComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i2__namespace$1.SkyLibResourcesPipe } });
|
|
400
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutIteratorComponent, decorators: [{
|
|
391
401
|
type: i0.Component,
|
|
392
402
|
args: [{
|
|
393
403
|
selector: 'sky-flyout-iterator',
|
|
394
|
-
|
|
395
|
-
|
|
404
|
+
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",
|
|
405
|
+
styles: [":host-context(.sky-theme-modern) .sky-flyout-iterators{display:inline}.sky-theme-modern .sky-flyout-iterators{display:inline}\n"],
|
|
396
406
|
}]
|
|
397
407
|
}], propDecorators: { nextButtonDisabled: [{
|
|
398
408
|
type: i0.Input
|
|
@@ -428,6 +438,7 @@
|
|
|
428
438
|
this.flyoutWidth = 0;
|
|
429
439
|
this.isDragging = false;
|
|
430
440
|
this.isFullscreen = false;
|
|
441
|
+
this.resizeKeyControlActive = false;
|
|
431
442
|
this.xCoord = 0;
|
|
432
443
|
this.windowBufferSize = 20;
|
|
433
444
|
/**
|
|
@@ -521,12 +532,15 @@
|
|
|
521
532
|
this.notifyClosed();
|
|
522
533
|
}
|
|
523
534
|
this.config = Object.assign({ providers: [] }, config);
|
|
524
|
-
this.config.defaultWidth =
|
|
535
|
+
this.config.defaultWidth =
|
|
536
|
+
this.config.defaultWidth || window.innerWidth / 2;
|
|
525
537
|
this.config.minWidth = this.config.minWidth || 320;
|
|
526
538
|
this.config.maxWidth = this.config.maxWidth || this.config.defaultWidth;
|
|
527
539
|
this.config.showIterator = this.config.showIterator || false;
|
|
528
|
-
this.config.iteratorNextButtonDisabled =
|
|
529
|
-
|
|
540
|
+
this.config.iteratorNextButtonDisabled =
|
|
541
|
+
this.config.iteratorNextButtonDisabled || false;
|
|
542
|
+
this.config.iteratorPreviousButtonDisabled =
|
|
543
|
+
this.config.iteratorPreviousButtonDisabled || false;
|
|
530
544
|
var factory = this.resolver.resolveComponentFactory(component);
|
|
531
545
|
/* tslint:disable:deprecation */
|
|
532
546
|
/**
|
|
@@ -540,10 +554,11 @@
|
|
|
540
554
|
this.flyoutInstance = this.createFlyoutInstance(componentRef.instance);
|
|
541
555
|
// Open the flyout immediately.
|
|
542
556
|
this.messageStream.next({
|
|
543
|
-
type: exports.SkyFlyoutMessageType.Open
|
|
557
|
+
type: exports.SkyFlyoutMessageType.Open,
|
|
544
558
|
});
|
|
545
559
|
if (this.config.settingsKey) {
|
|
546
|
-
this.uiConfigService
|
|
560
|
+
this.uiConfigService
|
|
561
|
+
.getConfig(this.config.settingsKey)
|
|
547
562
|
.pipe(operators.take(1))
|
|
548
563
|
.subscribe(function (value) {
|
|
549
564
|
if (value && value.flyoutWidth) {
|
|
@@ -564,7 +579,7 @@
|
|
|
564
579
|
};
|
|
565
580
|
SkyFlyoutComponent.prototype.close = function () {
|
|
566
581
|
this.messageStream.next({
|
|
567
|
-
type: exports.SkyFlyoutMessageType.Close
|
|
582
|
+
type: exports.SkyFlyoutMessageType.Close,
|
|
568
583
|
});
|
|
569
584
|
};
|
|
570
585
|
SkyFlyoutComponent.prototype.invokePrimaryAction = function () {
|
|
@@ -575,7 +590,7 @@
|
|
|
575
590
|
return false;
|
|
576
591
|
};
|
|
577
592
|
SkyFlyoutComponent.prototype.getAnimationState = function () {
|
|
578
|
-
return
|
|
593
|
+
return this.isOpening ? FLYOUT_OPEN_STATE : FLYOUT_CLOSED_STATE;
|
|
579
594
|
};
|
|
580
595
|
SkyFlyoutComponent.prototype.animationDone = function (event) {
|
|
581
596
|
if (event.toState === FLYOUT_OPEN_STATE) {
|
|
@@ -591,27 +606,10 @@
|
|
|
591
606
|
this.onResizeHandleMouseDown(event);
|
|
592
607
|
};
|
|
593
608
|
SkyFlyoutComponent.prototype.onHeaderGrabHandleKeyDown = function (event) {
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
case 'left':
|
|
599
|
-
/* istanbul ignore else */
|
|
600
|
-
if (this.flyoutWidth < this.config.maxWidth) {
|
|
601
|
-
this.flyoutWidth = Math.min(this.flyoutWidth + this.widthStep, this.config.maxWidth);
|
|
602
|
-
}
|
|
603
|
-
break;
|
|
604
|
-
case 'right':
|
|
605
|
-
/* istanbul ignore else */
|
|
606
|
-
if (this.flyoutWidth > this.config.minWidth) {
|
|
607
|
-
this.flyoutWidth = Math.max(this.flyoutWidth - this.widthStep, this.config.minWidth);
|
|
608
|
-
}
|
|
609
|
-
break;
|
|
610
|
-
/* istanbul ignore next */
|
|
611
|
-
default:
|
|
612
|
-
break;
|
|
613
|
-
}
|
|
614
|
-
}
|
|
609
|
+
this.handleResizeKeyDown(event);
|
|
610
|
+
};
|
|
611
|
+
SkyFlyoutComponent.prototype.onResizeHandleKeyDown = function (event) {
|
|
612
|
+
this.handleResizeKeyDown(event);
|
|
615
613
|
};
|
|
616
614
|
SkyFlyoutComponent.prototype.onResizeHandleMouseDown = function (event) {
|
|
617
615
|
var _this = this;
|
|
@@ -729,7 +727,7 @@
|
|
|
729
727
|
this.adapter.setResponsiveClass(this.elementRef, newBreakpiont);
|
|
730
728
|
};
|
|
731
729
|
SkyFlyoutComponent.prototype.setFullscreen = function () {
|
|
732
|
-
if (
|
|
730
|
+
if (window.innerWidth - this.windowBufferSize < this.config.minWidth) {
|
|
733
731
|
this.isFullscreen = true;
|
|
734
732
|
}
|
|
735
733
|
else {
|
|
@@ -738,8 +736,9 @@
|
|
|
738
736
|
};
|
|
739
737
|
SkyFlyoutComponent.prototype.setUserData = function () {
|
|
740
738
|
if (this.config.settingsKey) {
|
|
741
|
-
this.uiConfigService
|
|
742
|
-
|
|
739
|
+
this.uiConfigService
|
|
740
|
+
.setConfig(this.config.settingsKey, {
|
|
741
|
+
flyoutWidth: this.flyoutWidth,
|
|
743
742
|
})
|
|
744
743
|
.pipe(operators.take(1))
|
|
745
744
|
.subscribe(function () { }, function (err) {
|
|
@@ -775,34 +774,70 @@
|
|
|
775
774
|
// TODO: Need to implement the async `getString` method in a breaking change.
|
|
776
775
|
return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
|
|
777
776
|
};
|
|
777
|
+
SkyFlyoutComponent.prototype.handleResizeKeyDown = function (event) {
|
|
778
|
+
/* istanbul ignore else */
|
|
779
|
+
if (event.key) {
|
|
780
|
+
var keyPressed = event.key.toLowerCase().replace('arrow', '');
|
|
781
|
+
switch (keyPressed) {
|
|
782
|
+
case 'enter':
|
|
783
|
+
case ' ':
|
|
784
|
+
this.resizeKeyControlActive = !this.resizeKeyControlActive;
|
|
785
|
+
break;
|
|
786
|
+
case 'tab':
|
|
787
|
+
/* istanbul ignore else */
|
|
788
|
+
if (this.resizeKeyControlActive) {
|
|
789
|
+
this.resizeKeyControlActive = false;
|
|
790
|
+
}
|
|
791
|
+
case 'left':
|
|
792
|
+
if (this.resizeKeyControlActive) {
|
|
793
|
+
/* istanbul ignore else */
|
|
794
|
+
if (this.flyoutWidth < this.config.maxWidth) {
|
|
795
|
+
this.flyoutWidth = Math.min(this.flyoutWidth + this.widthStep, this.config.maxWidth);
|
|
796
|
+
}
|
|
797
|
+
}
|
|
798
|
+
break;
|
|
799
|
+
case 'right':
|
|
800
|
+
if (this.resizeKeyControlActive) {
|
|
801
|
+
/* istanbul ignore else */
|
|
802
|
+
if (this.flyoutWidth > this.config.minWidth) {
|
|
803
|
+
this.flyoutWidth = Math.max(this.flyoutWidth - this.widthStep, this.config.minWidth);
|
|
804
|
+
}
|
|
805
|
+
}
|
|
806
|
+
break;
|
|
807
|
+
/* istanbul ignore next */
|
|
808
|
+
default:
|
|
809
|
+
break;
|
|
810
|
+
}
|
|
811
|
+
}
|
|
812
|
+
};
|
|
778
813
|
return SkyFlyoutComponent;
|
|
779
814
|
}());
|
|
780
|
-
SkyFlyoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
781
|
-
SkyFlyoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
815
|
+
SkyFlyoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutComponent, deps: [{ token: SkyFlyoutAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Injector }, { token: i0__namespace.ComponentFactoryResolver }, { token: i2__namespace$1.SkyLibResourcesService }, { token: SkyFlyoutMediaQueryService }, { token: i0__namespace.ElementRef }, { token: i1__namespace.SkyUIConfigService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
816
|
+
SkyFlyoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFlyoutComponent, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
|
|
782
817
|
SkyFlyoutAdapterService,
|
|
783
818
|
SkyFlyoutMediaQueryService,
|
|
784
|
-
{ provide: i1.SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService }
|
|
785
|
-
], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "<div\n class=\"sky-flyout\"\n tabindex=\"-1\"\n [attr.role]=\"config?.ariaRole\"\n [attr.aria-describedby]=\"config?.ariaDescribedBy\"\n [attr.aria-labelledby]=\"config?.ariaLabelledBy\"\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>\n
|
|
819
|
+
{ provide: i1.SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
|
|
820
|
+
], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "<div\n class=\"sky-flyout\"\n tabindex=\"-1\"\n [attr.role]=\"config?.ariaRole\"\n [attr.aria-describedby]=\"config?.ariaDescribedBy\"\n [attr.aria-labelledby]=\"config?.ariaLabelledBy\"\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>\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\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 >\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\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__namespace$1.λ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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9__namespace.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"] }, { type: i2__namespace$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "skyLibResources": i2__namespace$1.SkyLibResourcesPipe }, animations: [
|
|
786
821
|
animations.trigger('flyoutState', [
|
|
787
822
|
animations.state(FLYOUT_OPEN_STATE, animations.style({ transform: 'initial' })),
|
|
788
823
|
animations.state(FLYOUT_CLOSED_STATE, animations.style({ transform: 'translateX(100%)' })),
|
|
789
824
|
animations.transition('void => *', [
|
|
790
825
|
animations.style({ transform: 'translateX(100%)' }),
|
|
791
|
-
animations.animate(250)
|
|
826
|
+
animations.animate(250),
|
|
792
827
|
]),
|
|
793
|
-
animations.transition("* <=> *", animations.animate('250ms ease-in'))
|
|
794
|
-
])
|
|
828
|
+
animations.transition("* <=> *", animations.animate('250ms ease-in')),
|
|
829
|
+
]),
|
|
795
830
|
], changeDetection: i0__namespace.ChangeDetectionStrategy.Default });
|
|
796
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
831
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutComponent, decorators: [{
|
|
797
832
|
type: i0.Component,
|
|
798
833
|
args: [{
|
|
799
834
|
selector: 'sky-flyout',
|
|
800
|
-
|
|
801
|
-
|
|
835
|
+
template: "<div\n class=\"sky-flyout\"\n tabindex=\"-1\"\n [attr.role]=\"config?.ariaRole\"\n [attr.aria-describedby]=\"config?.ariaDescribedBy\"\n [attr.aria-labelledby]=\"config?.ariaLabelledBy\"\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>\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\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 >\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\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",
|
|
836
|
+
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"],
|
|
802
837
|
providers: [
|
|
803
838
|
SkyFlyoutAdapterService,
|
|
804
839
|
SkyFlyoutMediaQueryService,
|
|
805
|
-
{ provide: i1.SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService }
|
|
840
|
+
{ provide: i1.SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
|
|
806
841
|
],
|
|
807
842
|
animations: [
|
|
808
843
|
animations.trigger('flyoutState', [
|
|
@@ -810,31 +845,31 @@
|
|
|
810
845
|
animations.state(FLYOUT_CLOSED_STATE, animations.style({ transform: 'translateX(100%)' })),
|
|
811
846
|
animations.transition('void => *', [
|
|
812
847
|
animations.style({ transform: 'translateX(100%)' }),
|
|
813
|
-
animations.animate(250)
|
|
848
|
+
animations.animate(250),
|
|
814
849
|
]),
|
|
815
|
-
animations.transition("* <=> *", animations.animate('250ms ease-in'))
|
|
816
|
-
])
|
|
850
|
+
animations.transition("* <=> *", animations.animate('250ms ease-in')),
|
|
851
|
+
]),
|
|
817
852
|
],
|
|
818
853
|
// Allow automatic change detection for child components.
|
|
819
|
-
changeDetection: i0.ChangeDetectionStrategy.Default
|
|
854
|
+
changeDetection: i0.ChangeDetectionStrategy.Default,
|
|
820
855
|
}]
|
|
821
856
|
}], ctorParameters: function () { return [{ type: SkyFlyoutAdapterService }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.Injector }, { type: i0__namespace.ComponentFactoryResolver }, { type: i2__namespace$1.SkyLibResourcesService }, { type: SkyFlyoutMediaQueryService }, { type: i0__namespace.ElementRef }, { type: i1__namespace.SkyUIConfigService }]; }, propDecorators: { flyoutRef: [{
|
|
822
857
|
type: i0.ViewChild,
|
|
823
858
|
args: ['flyoutRef', {
|
|
824
859
|
read: i0.ElementRef,
|
|
825
|
-
static: true
|
|
860
|
+
static: true,
|
|
826
861
|
}]
|
|
827
862
|
}], target: [{
|
|
828
863
|
type: i0.ViewChild,
|
|
829
864
|
args: ['target', {
|
|
830
865
|
read: i0.ViewContainerRef,
|
|
831
|
-
static: true
|
|
866
|
+
static: true,
|
|
832
867
|
}]
|
|
833
868
|
}], flyoutHeader: [{
|
|
834
869
|
type: i0.ViewChild,
|
|
835
870
|
args: ['flyoutHeader', {
|
|
836
871
|
read: i0.ElementRef,
|
|
837
|
-
static: true
|
|
872
|
+
static: true,
|
|
838
873
|
}]
|
|
839
874
|
}], onWindowResize: [{
|
|
840
875
|
type: i0.HostListener,
|
|
@@ -846,49 +881,41 @@
|
|
|
846
881
|
}
|
|
847
882
|
return SkyFlyoutModule;
|
|
848
883
|
}());
|
|
849
|
-
SkyFlyoutModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
850
|
-
SkyFlyoutModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
851
|
-
|
|
852
|
-
i9.FormsModule,
|
|
884
|
+
SkyFlyoutModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
885
|
+
SkyFlyoutModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutModule, declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent], imports: [i7.CommonModule,
|
|
886
|
+
forms.FormsModule,
|
|
853
887
|
i2$2.RouterModule,
|
|
854
888
|
i2.SkyI18nModule,
|
|
855
889
|
i1$1.SkyIconModule,
|
|
856
890
|
SkyFlyoutResourcesModule,
|
|
857
891
|
i2$1.SkyThemeModule,
|
|
858
|
-
|
|
859
|
-
SkyFlyoutModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
892
|
+
i9.SkyHrefModule], exports: [SkyFlyoutComponent] });
|
|
893
|
+
SkyFlyoutModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutModule, imports: [[
|
|
860
894
|
i7.CommonModule,
|
|
861
|
-
|
|
895
|
+
forms.FormsModule,
|
|
862
896
|
i2$2.RouterModule,
|
|
863
897
|
i2.SkyI18nModule,
|
|
864
898
|
i1$1.SkyIconModule,
|
|
865
899
|
SkyFlyoutResourcesModule,
|
|
866
900
|
i2$1.SkyThemeModule,
|
|
867
|
-
|
|
901
|
+
i9.SkyHrefModule,
|
|
868
902
|
]] });
|
|
869
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
903
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutModule, decorators: [{
|
|
870
904
|
type: i0.NgModule,
|
|
871
905
|
args: [{
|
|
872
|
-
declarations: [
|
|
873
|
-
SkyFlyoutComponent,
|
|
874
|
-
SkyFlyoutIteratorComponent
|
|
875
|
-
],
|
|
906
|
+
declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent],
|
|
876
907
|
imports: [
|
|
877
908
|
i7.CommonModule,
|
|
878
|
-
|
|
909
|
+
forms.FormsModule,
|
|
879
910
|
i2$2.RouterModule,
|
|
880
911
|
i2.SkyI18nModule,
|
|
881
912
|
i1$1.SkyIconModule,
|
|
882
913
|
SkyFlyoutResourcesModule,
|
|
883
914
|
i2$1.SkyThemeModule,
|
|
884
|
-
|
|
885
|
-
],
|
|
886
|
-
exports: [
|
|
887
|
-
SkyFlyoutComponent
|
|
915
|
+
i9.SkyHrefModule,
|
|
888
916
|
],
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
]
|
|
917
|
+
exports: [SkyFlyoutComponent],
|
|
918
|
+
entryComponents: [SkyFlyoutComponent],
|
|
892
919
|
}]
|
|
893
920
|
}] });
|
|
894
921
|
|
|
@@ -920,16 +947,13 @@
|
|
|
920
947
|
if (this.host && !this.isOpening) {
|
|
921
948
|
this.removeAfterClosed = true;
|
|
922
949
|
this.host.instance.messageStream.next({
|
|
923
|
-
type: exports.SkyFlyoutMessageType.Close
|
|
950
|
+
type: exports.SkyFlyoutMessageType.Close,
|
|
924
951
|
});
|
|
925
952
|
}
|
|
926
953
|
};
|
|
927
954
|
/**
|
|
928
955
|
* Opens a flyout and displays the specified component.
|
|
929
|
-
* @param component Specifies the component to render.
|
|
930
|
-
* with HTML selectors, you must register it with the `entryComponents` property in the
|
|
931
|
-
* `app-extras.module.ts` file. For more information, see the
|
|
932
|
-
* [entry components tutorial](https://developer.blackbaud.com/skyux/learn/get-started/advanced/entry-components).
|
|
956
|
+
* @param component Specifies the component to render.
|
|
933
957
|
* @param config Specifies the flyout configuration passed to the specified component's constructor.
|
|
934
958
|
*/
|
|
935
959
|
SkyFlyoutService.prototype.open = function (component, config) {
|
|
@@ -954,7 +978,8 @@
|
|
|
954
978
|
return flyout;
|
|
955
979
|
};
|
|
956
980
|
SkyFlyoutService.prototype.createHostComponent = function () {
|
|
957
|
-
this.host =
|
|
981
|
+
this.host =
|
|
982
|
+
this.dynamicComponentService.createComponent(SkyFlyoutComponent);
|
|
958
983
|
return this.host;
|
|
959
984
|
};
|
|
960
985
|
SkyFlyoutService.prototype.removeHostComponent = function () {
|
|
@@ -986,7 +1011,9 @@
|
|
|
986
1011
|
if (flyoutInstance_1.flyoutRef.nativeElement.contains(event.target)) {
|
|
987
1012
|
return;
|
|
988
1013
|
}
|
|
989
|
-
var isAbove = event.target === document
|
|
1014
|
+
var isAbove = event.target === document
|
|
1015
|
+
? false
|
|
1016
|
+
: _this.coreAdapter.isTargetAboveElement(event.target, flyoutInstance_1.flyoutRef.nativeElement);
|
|
990
1017
|
/* istanbul ignore else */
|
|
991
1018
|
if (!isAbove) {
|
|
992
1019
|
doClose_1 = true;
|
|
@@ -1029,12 +1056,12 @@
|
|
|
1029
1056
|
};
|
|
1030
1057
|
return SkyFlyoutService;
|
|
1031
1058
|
}());
|
|
1032
|
-
SkyFlyoutService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
1033
|
-
SkyFlyoutService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
1034
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
1059
|
+
SkyFlyoutService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutService, deps: [{ token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyAppWindowRef }, { token: i1__namespace.SkyDynamicComponentService }, { token: i2__namespace$2.Router }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
1060
|
+
SkyFlyoutService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutService, providedIn: 'any' });
|
|
1061
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutService, decorators: [{
|
|
1035
1062
|
type: i0.Injectable,
|
|
1036
1063
|
args: [{
|
|
1037
|
-
providedIn: '
|
|
1064
|
+
providedIn: 'any',
|
|
1038
1065
|
}]
|
|
1039
1066
|
}], ctorParameters: function () { return [{ type: i1__namespace.SkyCoreAdapterService }, { type: i1__namespace.SkyAppWindowRef }, { type: i1__namespace.SkyDynamicComponentService }, { type: i2__namespace$2.Router }]; } });
|
|
1040
1067
|
|
|
@@ -1045,9 +1072,9 @@
|
|
|
1045
1072
|
exports.SkyFlyoutInstance = SkyFlyoutInstance;
|
|
1046
1073
|
exports.SkyFlyoutModule = SkyFlyoutModule;
|
|
1047
1074
|
exports.SkyFlyoutService = SkyFlyoutService;
|
|
1048
|
-
exports
|
|
1075
|
+
exports["λ1"] = SkyFlyoutComponent;
|
|
1049
1076
|
|
|
1050
1077
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
1051
1078
|
|
|
1052
|
-
}))
|
|
1079
|
+
}));
|
|
1053
1080
|
//# sourceMappingURL=skyux-flyout.umd.js.map
|