@skyux/inline-form 5.7.2 → 6.0.0-beta.2
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 +1 -1
- package/esm2020/index.mjs +10 -0
- package/esm2020/lib/modules/inline-form/animations/slide-dissolve.mjs +26 -0
- package/esm2020/lib/modules/inline-form/inline-form-adapter.service.mjs +62 -0
- package/esm2020/lib/modules/inline-form/inline-form.component.mjs +220 -0
- package/esm2020/lib/modules/inline-form/inline-form.module.mjs +19 -0
- package/esm2020/lib/modules/inline-form/types/inline-form-button-action.mjs +2 -0
- package/esm2020/lib/modules/inline-form/types/inline-form-button-config.mjs +2 -0
- package/esm2020/lib/modules/inline-form/types/inline-form-button-layout.mjs +9 -0
- package/esm2020/lib/modules/inline-form/types/inline-form-close-args.mjs +2 -0
- package/esm2020/lib/modules/inline-form/types/inline-form-config.mjs +2 -0
- package/esm2020/lib/modules/shared/sky-inline-form-resources.module.mjs +50 -0
- package/esm2020/skyux-inline-form.mjs +5 -0
- package/fesm2015/{skyux-inline-form.js → skyux-inline-form.mjs} +17 -24
- package/fesm2015/skyux-inline-form.mjs.map +1 -0
- package/fesm2020/skyux-inline-form.mjs +379 -0
- package/fesm2020/skyux-inline-form.mjs.map +1 -0
- package/package.json +28 -12
- package/bundles/skyux-inline-form.umd.js +0 -433
- package/esm2015/index.js +0 -10
- package/esm2015/index.js.map +0 -1
- package/esm2015/lib/modules/inline-form/animations/slide-dissolve.js +0 -26
- package/esm2015/lib/modules/inline-form/animations/slide-dissolve.js.map +0 -1
- package/esm2015/lib/modules/inline-form/inline-form-adapter.service.js +0 -62
- package/esm2015/lib/modules/inline-form/inline-form-adapter.service.js.map +0 -1
- package/esm2015/lib/modules/inline-form/inline-form.component.js +0 -227
- package/esm2015/lib/modules/inline-form/inline-form.component.js.map +0 -1
- package/esm2015/lib/modules/inline-form/inline-form.module.js +0 -19
- package/esm2015/lib/modules/inline-form/inline-form.module.js.map +0 -1
- package/esm2015/lib/modules/inline-form/types/inline-form-button-action.js +0 -2
- package/esm2015/lib/modules/inline-form/types/inline-form-button-action.js.map +0 -1
- package/esm2015/lib/modules/inline-form/types/inline-form-button-config.js +0 -2
- package/esm2015/lib/modules/inline-form/types/inline-form-button-config.js.map +0 -1
- package/esm2015/lib/modules/inline-form/types/inline-form-button-layout.js +0 -9
- package/esm2015/lib/modules/inline-form/types/inline-form-button-layout.js.map +0 -1
- package/esm2015/lib/modules/inline-form/types/inline-form-close-args.js +0 -2
- package/esm2015/lib/modules/inline-form/types/inline-form-close-args.js.map +0 -1
- package/esm2015/lib/modules/inline-form/types/inline-form-config.js +0 -2
- package/esm2015/lib/modules/inline-form/types/inline-form-config.js.map +0 -1
- package/esm2015/lib/modules/shared/sky-inline-form-resources.module.js +0 -50
- package/esm2015/lib/modules/shared/sky-inline-form-resources.module.js.map +0 -1
- package/esm2015/skyux-inline-form.js +0 -5
- package/esm2015/skyux-inline-form.js.map +0 -1
- package/fesm2015/skyux-inline-form.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/inline-form",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0-beta.2",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -15,21 +15,37 @@
|
|
|
15
15
|
"url": "https://github.com/blackbaud/skyux/issues"
|
|
16
16
|
},
|
|
17
17
|
"homepage": "https://github.com/blackbaud/skyux#readme",
|
|
18
|
+
"exports": {
|
|
19
|
+
"./package.json": {
|
|
20
|
+
"default": "./package.json"
|
|
21
|
+
},
|
|
22
|
+
".": {
|
|
23
|
+
"types": "./skyux-inline-form.d.ts",
|
|
24
|
+
"esm2020": "./esm2020/skyux-inline-form.mjs",
|
|
25
|
+
"es2020": "./fesm2020/skyux-inline-form.mjs",
|
|
26
|
+
"es2015": "./fesm2015/skyux-inline-form.mjs",
|
|
27
|
+
"node": "./fesm2015/skyux-inline-form.mjs",
|
|
28
|
+
"default": "./fesm2020/skyux-inline-form.mjs"
|
|
29
|
+
},
|
|
30
|
+
"./documentation.json": {
|
|
31
|
+
"default": "./documentation.json"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
18
34
|
"peerDependencies": {
|
|
19
|
-
"@angular/animations": "^
|
|
20
|
-
"@angular/common": "^
|
|
21
|
-
"@angular/core": "^
|
|
22
|
-
"@skyux/core": "
|
|
23
|
-
"@skyux/i18n": "
|
|
35
|
+
"@angular/animations": "^13.2.7",
|
|
36
|
+
"@angular/common": "^13.2.7",
|
|
37
|
+
"@angular/core": "^13.2.7",
|
|
38
|
+
"@skyux/core": "6.0.0-beta.2",
|
|
39
|
+
"@skyux/i18n": "6.0.0-beta.2"
|
|
24
40
|
},
|
|
25
41
|
"dependencies": {
|
|
26
42
|
"tslib": "^2.3.1"
|
|
27
43
|
},
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"fesm2015": "fesm2015/skyux-inline-form.
|
|
44
|
+
"module": "fesm2015/skyux-inline-form.mjs",
|
|
45
|
+
"es2020": "fesm2020/skyux-inline-form.mjs",
|
|
46
|
+
"esm2020": "esm2020/skyux-inline-form.mjs",
|
|
47
|
+
"fesm2020": "fesm2020/skyux-inline-form.mjs",
|
|
48
|
+
"fesm2015": "fesm2015/skyux-inline-form.mjs",
|
|
33
49
|
"typings": "skyux-inline-form.d.ts",
|
|
34
50
|
"sideEffects": false
|
|
35
|
-
}
|
|
51
|
+
}
|
|
@@ -1,433 +0,0 @@
|
|
|
1
|
-
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@skyux/i18n'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@skyux/core')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define('@skyux/inline-form', ['exports', '@angular/common', '@angular/core', '@skyux/i18n', 'rxjs', 'rxjs/operators', '@angular/animations', '@skyux/core'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux["inline-form"] = {}), global.ng.common, global.ng.core, global.i2, global.rxjs, global.rxjs.operators, global.ng.animations, global.i3));
|
|
5
|
-
})(this, (function (exports, i4, i0, i2, rxjs, operators, animations, i3) { 'use strict';
|
|
6
|
-
|
|
7
|
-
function _interopNamespace(e) {
|
|
8
|
-
if (e && e.__esModule) return e;
|
|
9
|
-
var n = Object.create(null);
|
|
10
|
-
if (e) {
|
|
11
|
-
Object.keys(e).forEach(function (k) {
|
|
12
|
-
if (k !== 'default') {
|
|
13
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
-
enumerable: true,
|
|
16
|
-
get: function () { return e[k]; }
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
n["default"] = e;
|
|
22
|
-
return Object.freeze(n);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
|
|
26
|
-
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
|
|
27
|
-
var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
|
|
28
|
-
var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
32
|
-
* The contents of this file were automatically generated by
|
|
33
|
-
* the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-inline-form' schematic.
|
|
34
|
-
* To update this file, simply rerun the command.
|
|
35
|
-
*/
|
|
36
|
-
var RESOURCES = {
|
|
37
|
-
'EN-US': {
|
|
38
|
-
skyux_inline_form_button_cancel: { message: 'Cancel' },
|
|
39
|
-
skyux_inline_form_button_delete: { message: 'Delete' },
|
|
40
|
-
skyux_inline_form_button_done: { message: 'Done' },
|
|
41
|
-
skyux_inline_form_button_save: { message: 'Save' },
|
|
42
|
-
},
|
|
43
|
-
};
|
|
44
|
-
var SkyInlineFormResourcesProvider = /** @class */ (function () {
|
|
45
|
-
function SkyInlineFormResourcesProvider() {
|
|
46
|
-
}
|
|
47
|
-
SkyInlineFormResourcesProvider.prototype.getString = function (localeInfo, name) {
|
|
48
|
-
return i2.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
49
|
-
};
|
|
50
|
-
return SkyInlineFormResourcesProvider;
|
|
51
|
-
}());
|
|
52
|
-
/**
|
|
53
|
-
* Import into any component library module that needs to use resource strings.
|
|
54
|
-
*/
|
|
55
|
-
var SkyInlineFormResourcesModule = /** @class */ (function () {
|
|
56
|
-
function SkyInlineFormResourcesModule() {
|
|
57
|
-
}
|
|
58
|
-
return SkyInlineFormResourcesModule;
|
|
59
|
-
}());
|
|
60
|
-
SkyInlineFormResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
61
|
-
SkyInlineFormResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormResourcesModule, exports: [i2.SkyI18nModule] });
|
|
62
|
-
SkyInlineFormResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormResourcesModule, providers: [
|
|
63
|
-
{
|
|
64
|
-
provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
|
|
65
|
-
useClass: SkyInlineFormResourcesProvider,
|
|
66
|
-
multi: true,
|
|
67
|
-
},
|
|
68
|
-
], imports: [i2.SkyI18nModule] });
|
|
69
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormResourcesModule, decorators: [{
|
|
70
|
-
type: i0.NgModule,
|
|
71
|
-
args: [{
|
|
72
|
-
exports: [i2.SkyI18nModule],
|
|
73
|
-
providers: [
|
|
74
|
-
{
|
|
75
|
-
provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
|
|
76
|
-
useClass: SkyInlineFormResourcesProvider,
|
|
77
|
-
multi: true,
|
|
78
|
-
},
|
|
79
|
-
],
|
|
80
|
-
}]
|
|
81
|
-
}] });
|
|
82
|
-
|
|
83
|
-
var skySlideDissolve = animations.trigger('skySlideDissolve', [
|
|
84
|
-
animations.transition('* <=> *', [
|
|
85
|
-
// Expand animations
|
|
86
|
-
animations.query('.sky-slide-dissolve-last:enter', [
|
|
87
|
-
animations.style({ height: 0, opacity: 0 }),
|
|
88
|
-
animations.animate('200ms ease-in', animations.style({ height: '*', opacity: 0 })),
|
|
89
|
-
], { optional: true }),
|
|
90
|
-
animations.query('.sky-slide-dissolve-last:enter', [
|
|
91
|
-
animations.style({ opacity: 0 }),
|
|
92
|
-
animations.animate('200ms ease-in', animations.style({ opacity: 1 })),
|
|
93
|
-
], { optional: true }),
|
|
94
|
-
// Collapse animations
|
|
95
|
-
// The expanded content should fade out immediately to prevent
|
|
96
|
-
// any overlap with the read-only content that's returning to the screen.
|
|
97
|
-
animations.query('.sky-slide-dissolve-last:leave', [animations.animate('0ms', animations.style({ opacity: 0 }))], { optional: true }),
|
|
98
|
-
animations.group([
|
|
99
|
-
animations.query('.sky-slide-dissolve-first:enter', [
|
|
100
|
-
animations.style({ opacity: 0, height: 0 }),
|
|
101
|
-
animations.animate('100ms ease-in', animations.style({ opacity: 1, height: '*' })),
|
|
102
|
-
], { optional: true }),
|
|
103
|
-
animations.query('.sky-slide-dissolve-last:leave', [animations.animate('200ms ease-in', animations.style({ height: 0 }))], { optional: true }),
|
|
104
|
-
]),
|
|
105
|
-
]),
|
|
106
|
-
]);
|
|
107
|
-
|
|
108
|
-
/* tslint:disable */
|
|
109
|
-
var SKY_TABBABLE_SELECTOR = [
|
|
110
|
-
'a[href]',
|
|
111
|
-
'area[href]',
|
|
112
|
-
"input:not([disabled]):not([tabindex='-1'])",
|
|
113
|
-
"button:not([disabled]):not([tabindex='-1'])",
|
|
114
|
-
"select:not([disabled]):not([tabindex='-1'])",
|
|
115
|
-
"textarea:not([disabled]):not([tabindex='-1'])",
|
|
116
|
-
'iframe',
|
|
117
|
-
'object',
|
|
118
|
-
'embed',
|
|
119
|
-
"*[tabindex]:not([tabindex='-1'])",
|
|
120
|
-
'*[contenteditable=true]',
|
|
121
|
-
].join(', ');
|
|
122
|
-
/* tslint:enable */
|
|
123
|
-
/**
|
|
124
|
-
* @internal
|
|
125
|
-
*/
|
|
126
|
-
var SkyInlineFormAdapterService = /** @class */ (function () {
|
|
127
|
-
function SkyInlineFormAdapterService() {
|
|
128
|
-
}
|
|
129
|
-
SkyInlineFormAdapterService.prototype.applyAutofocus = function (inlineFormElementRef) {
|
|
130
|
-
var inputWithAutofocus = inlineFormElementRef.nativeElement.querySelector('[autofocus]');
|
|
131
|
-
if (inputWithAutofocus) {
|
|
132
|
-
inputWithAutofocus.focus();
|
|
133
|
-
}
|
|
134
|
-
else {
|
|
135
|
-
var focusEl = inlineFormElementRef.nativeElement.querySelector('.sky-inline-form-content');
|
|
136
|
-
var focusableChildren = this.loadFocusableChildren(focusEl);
|
|
137
|
-
this.focusFirstElement(focusableChildren);
|
|
138
|
-
}
|
|
139
|
-
};
|
|
140
|
-
SkyInlineFormAdapterService.prototype.loadFocusableChildren = function (elem) {
|
|
141
|
-
var _this = this;
|
|
142
|
-
var elements = Array.prototype.slice.call(elem.querySelectorAll(SKY_TABBABLE_SELECTOR));
|
|
143
|
-
return elements.filter(function (element) {
|
|
144
|
-
return _this.isVisible(element);
|
|
145
|
-
});
|
|
146
|
-
};
|
|
147
|
-
SkyInlineFormAdapterService.prototype.isVisible = function (element) {
|
|
148
|
-
var style = window.getComputedStyle(element);
|
|
149
|
-
var isHidden = style.display === 'none' || style.visibility === 'hidden';
|
|
150
|
-
if (isHidden) {
|
|
151
|
-
return false;
|
|
152
|
-
}
|
|
153
|
-
/* istanbul ignore next */
|
|
154
|
-
var hasBounds = !!(element.offsetWidth ||
|
|
155
|
-
element.offsetHeight ||
|
|
156
|
-
element.getClientRects().length);
|
|
157
|
-
return hasBounds;
|
|
158
|
-
};
|
|
159
|
-
SkyInlineFormAdapterService.prototype.focusFirstElement = function (list) {
|
|
160
|
-
if (list.length > 0) {
|
|
161
|
-
list[0].focus();
|
|
162
|
-
}
|
|
163
|
-
};
|
|
164
|
-
return SkyInlineFormAdapterService;
|
|
165
|
-
}());
|
|
166
|
-
SkyInlineFormAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
167
|
-
SkyInlineFormAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormAdapterService });
|
|
168
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormAdapterService, decorators: [{
|
|
169
|
-
type: i0.Injectable
|
|
170
|
-
}] });
|
|
171
|
-
|
|
172
|
-
exports.SkyInlineFormButtonLayout = void 0;
|
|
173
|
-
(function (SkyInlineFormButtonLayout) {
|
|
174
|
-
SkyInlineFormButtonLayout[SkyInlineFormButtonLayout["Custom"] = 0] = "Custom";
|
|
175
|
-
SkyInlineFormButtonLayout[SkyInlineFormButtonLayout["DoneCancel"] = 1] = "DoneCancel";
|
|
176
|
-
SkyInlineFormButtonLayout[SkyInlineFormButtonLayout["DoneDeleteCancel"] = 2] = "DoneDeleteCancel";
|
|
177
|
-
SkyInlineFormButtonLayout[SkyInlineFormButtonLayout["SaveCancel"] = 3] = "SaveCancel";
|
|
178
|
-
SkyInlineFormButtonLayout[SkyInlineFormButtonLayout["SaveDeleteCancel"] = 4] = "SaveDeleteCancel";
|
|
179
|
-
})(exports.SkyInlineFormButtonLayout || (exports.SkyInlineFormButtonLayout = {}));
|
|
180
|
-
|
|
181
|
-
/**
|
|
182
|
-
* Renders form content in the current view instead of a separate modal.
|
|
183
|
-
*/
|
|
184
|
-
var SkyInlineFormComponent = /** @class */ (function () {
|
|
185
|
-
function SkyInlineFormComponent(adapter, elementRef, resourcesService, skyAppWindowRef, changeDetectorRef) {
|
|
186
|
-
this.adapter = adapter;
|
|
187
|
-
this.elementRef = elementRef;
|
|
188
|
-
this.resourcesService = resourcesService;
|
|
189
|
-
this.skyAppWindowRef = skyAppWindowRef;
|
|
190
|
-
this.changeDetectorRef = changeDetectorRef;
|
|
191
|
-
/**
|
|
192
|
-
* Fires when users close the inline form.
|
|
193
|
-
*/
|
|
194
|
-
this.close = new i0.EventEmitter();
|
|
195
|
-
this._showForm = false;
|
|
196
|
-
}
|
|
197
|
-
Object.defineProperty(SkyInlineFormComponent.prototype, "config", {
|
|
198
|
-
get: function () {
|
|
199
|
-
return this._config;
|
|
200
|
-
},
|
|
201
|
-
/**
|
|
202
|
-
* Specifies configuration options for the buttons to display with the inline form.
|
|
203
|
-
* @required
|
|
204
|
-
*/
|
|
205
|
-
set: function (value) {
|
|
206
|
-
if (value !== this._config) {
|
|
207
|
-
this._config = value;
|
|
208
|
-
this.setupButtons();
|
|
209
|
-
}
|
|
210
|
-
},
|
|
211
|
-
enumerable: false,
|
|
212
|
-
configurable: true
|
|
213
|
-
});
|
|
214
|
-
Object.defineProperty(SkyInlineFormComponent.prototype, "showForm", {
|
|
215
|
-
get: function () {
|
|
216
|
-
return this._showForm;
|
|
217
|
-
},
|
|
218
|
-
/**
|
|
219
|
-
* Indicates whether to display the inline form. Users can toggle between displaying
|
|
220
|
-
* and hiding the inline form.
|
|
221
|
-
* @default false
|
|
222
|
-
*/
|
|
223
|
-
set: function (value) {
|
|
224
|
-
var _this = this;
|
|
225
|
-
this._showForm = value;
|
|
226
|
-
/* istanbul ignore else */
|
|
227
|
-
if (value) {
|
|
228
|
-
// setTimeout() prevents applyAutofocus() from firing
|
|
229
|
-
// until after *ngIf has added the form element to the DOM.
|
|
230
|
-
this.skyAppWindowRef.nativeWindow.setTimeout(function () {
|
|
231
|
-
_this.adapter.applyAutofocus(_this.elementRef);
|
|
232
|
-
});
|
|
233
|
-
}
|
|
234
|
-
},
|
|
235
|
-
enumerable: false,
|
|
236
|
-
configurable: true
|
|
237
|
-
});
|
|
238
|
-
SkyInlineFormComponent.prototype.ngOnInit = function () {
|
|
239
|
-
this.setupButtons();
|
|
240
|
-
};
|
|
241
|
-
SkyInlineFormComponent.prototype.ngOnDestroy = function () {
|
|
242
|
-
this.close.complete();
|
|
243
|
-
};
|
|
244
|
-
SkyInlineFormComponent.prototype.closeInlineForm = function (event) {
|
|
245
|
-
var args = {
|
|
246
|
-
reason: event.action,
|
|
247
|
-
};
|
|
248
|
-
this.close.emit(args);
|
|
249
|
-
};
|
|
250
|
-
SkyInlineFormComponent.prototype.setupButtons = function () {
|
|
251
|
-
var _this = this;
|
|
252
|
-
if (this.isValidCustomConfig(this.config)) {
|
|
253
|
-
this.buttons = this.getCustomButtons(this.config.buttons);
|
|
254
|
-
this.changeDetectorRef.markForCheck();
|
|
255
|
-
return;
|
|
256
|
-
}
|
|
257
|
-
this.getPresetButtons().then(function (buttons) {
|
|
258
|
-
_this.buttons = buttons;
|
|
259
|
-
_this.changeDetectorRef.markForCheck();
|
|
260
|
-
});
|
|
261
|
-
};
|
|
262
|
-
SkyInlineFormComponent.prototype.getPresetButtons = function () {
|
|
263
|
-
var buttonType = this.config
|
|
264
|
-
? this.config.buttonLayout
|
|
265
|
-
: exports.SkyInlineFormButtonLayout.DoneCancel;
|
|
266
|
-
var promise;
|
|
267
|
-
switch (buttonType) {
|
|
268
|
-
/* istanbul ignore next */
|
|
269
|
-
default:
|
|
270
|
-
case exports.SkyInlineFormButtonLayout.DoneCancel:
|
|
271
|
-
rxjs.zip(this.resourcesService.getString('skyux_inline_form_button_done'), this.resourcesService.getString('skyux_inline_form_button_cancel'))
|
|
272
|
-
.pipe(operators.take(1))
|
|
273
|
-
.subscribe(function (values) {
|
|
274
|
-
promise = new Promise(function (resolve) {
|
|
275
|
-
resolve([
|
|
276
|
-
{
|
|
277
|
-
text: values[0],
|
|
278
|
-
styleType: 'primary',
|
|
279
|
-
action: 'done',
|
|
280
|
-
},
|
|
281
|
-
{
|
|
282
|
-
text: values[1],
|
|
283
|
-
styleType: 'link',
|
|
284
|
-
action: 'cancel',
|
|
285
|
-
},
|
|
286
|
-
]);
|
|
287
|
-
});
|
|
288
|
-
});
|
|
289
|
-
break;
|
|
290
|
-
case exports.SkyInlineFormButtonLayout.SaveCancel:
|
|
291
|
-
rxjs.zip(this.resourcesService.getString('skyux_inline_form_button_save'), this.resourcesService.getString('skyux_inline_form_button_cancel'))
|
|
292
|
-
.pipe(operators.take(1))
|
|
293
|
-
.subscribe(function (values) {
|
|
294
|
-
promise = new Promise(function (resolve) {
|
|
295
|
-
resolve([
|
|
296
|
-
{
|
|
297
|
-
text: values[0],
|
|
298
|
-
styleType: 'primary',
|
|
299
|
-
action: 'save',
|
|
300
|
-
},
|
|
301
|
-
{
|
|
302
|
-
text: values[1],
|
|
303
|
-
styleType: 'link',
|
|
304
|
-
action: 'cancel',
|
|
305
|
-
},
|
|
306
|
-
]);
|
|
307
|
-
});
|
|
308
|
-
});
|
|
309
|
-
break;
|
|
310
|
-
case exports.SkyInlineFormButtonLayout.DoneDeleteCancel:
|
|
311
|
-
rxjs.zip(this.resourcesService.getString('skyux_inline_form_button_done'), this.resourcesService.getString('skyux_inline_form_button_delete'), this.resourcesService.getString('skyux_inline_form_button_cancel'))
|
|
312
|
-
.pipe(operators.take(1))
|
|
313
|
-
.subscribe(function (values) {
|
|
314
|
-
promise = new Promise(function (resolve) {
|
|
315
|
-
resolve([
|
|
316
|
-
{
|
|
317
|
-
text: values[0],
|
|
318
|
-
styleType: 'primary',
|
|
319
|
-
action: 'done',
|
|
320
|
-
},
|
|
321
|
-
{
|
|
322
|
-
text: values[1],
|
|
323
|
-
styleType: 'default',
|
|
324
|
-
action: 'delete',
|
|
325
|
-
},
|
|
326
|
-
{
|
|
327
|
-
text: values[2],
|
|
328
|
-
styleType: 'link',
|
|
329
|
-
action: 'cancel',
|
|
330
|
-
},
|
|
331
|
-
]);
|
|
332
|
-
});
|
|
333
|
-
});
|
|
334
|
-
break;
|
|
335
|
-
case exports.SkyInlineFormButtonLayout.SaveDeleteCancel:
|
|
336
|
-
rxjs.zip(this.resourcesService.getString('skyux_inline_form_button_save'), this.resourcesService.getString('skyux_inline_form_button_delete'), this.resourcesService.getString('skyux_inline_form_button_cancel'))
|
|
337
|
-
.pipe(operators.take(1))
|
|
338
|
-
.subscribe(function (values) {
|
|
339
|
-
promise = new Promise(function (resolve) {
|
|
340
|
-
resolve([
|
|
341
|
-
{
|
|
342
|
-
text: values[0],
|
|
343
|
-
styleType: 'primary',
|
|
344
|
-
action: 'save',
|
|
345
|
-
},
|
|
346
|
-
{
|
|
347
|
-
text: values[1],
|
|
348
|
-
styleType: 'default',
|
|
349
|
-
action: 'delete',
|
|
350
|
-
},
|
|
351
|
-
{
|
|
352
|
-
text: values[2],
|
|
353
|
-
styleType: 'link',
|
|
354
|
-
action: 'cancel',
|
|
355
|
-
},
|
|
356
|
-
]);
|
|
357
|
-
});
|
|
358
|
-
});
|
|
359
|
-
break;
|
|
360
|
-
}
|
|
361
|
-
return promise;
|
|
362
|
-
};
|
|
363
|
-
SkyInlineFormComponent.prototype.getCustomButtons = function (buttonConfigs) {
|
|
364
|
-
var buttons = [];
|
|
365
|
-
buttonConfigs.forEach(function (config) {
|
|
366
|
-
/* istanbul ignore next */
|
|
367
|
-
var styleType = config.styleType || 'default';
|
|
368
|
-
buttons.push({
|
|
369
|
-
action: config.action,
|
|
370
|
-
disabled: config.disabled,
|
|
371
|
-
styleType: styleType,
|
|
372
|
-
text: config.text,
|
|
373
|
-
});
|
|
374
|
-
});
|
|
375
|
-
return buttons;
|
|
376
|
-
};
|
|
377
|
-
SkyInlineFormComponent.prototype.isValidCustomConfig = function (config) {
|
|
378
|
-
return (config &&
|
|
379
|
-
config.buttonLayout === exports.SkyInlineFormButtonLayout.Custom &&
|
|
380
|
-
config.buttons.length > 0);
|
|
381
|
-
};
|
|
382
|
-
return SkyInlineFormComponent;
|
|
383
|
-
}());
|
|
384
|
-
SkyInlineFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormComponent, deps: [{ token: SkyInlineFormAdapterService }, { token: i0__namespace.ElementRef }, { token: i2__namespace.SkyLibResourcesService }, { token: i3__namespace.SkyAppWindowRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
385
|
-
SkyInlineFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyInlineFormComponent, selector: "sky-inline-form", inputs: { config: "config", template: "template", showForm: "showForm" }, outputs: { close: "close" }, providers: [SkyInlineFormAdapterService], ngImport: i0__namespace, template: "<div [@skySlideDissolve]=\"showForm\">\n <div *ngIf=\"!showForm\" class=\"sky-slide-dissolve-first\">\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"template && showForm\" class=\"sky-slide-dissolve-last\">\n <div class=\"sky-inline-form sky-shadow sky-box sky-elevation-3\">\n <div class=\"sky-inline-form-content\">\n <ng-container [ngTemplateOutlet]=\"template\"> </ng-container>\n </div>\n <div class=\"sky-inline-form-footer\">\n <button\n *ngFor=\"let button of buttons\"\n class=\"sky-btn {{ 'sky-btn-' + button.styleType }}\"\n type=\"button\"\n [disabled]=\"button.disabled ? true : null\"\n [ngClass]=\"{ 'sky-btn-disabled': button.disabled }\"\n (click)=\"closeInlineForm(button)\"\n >\n {{ button.text }}\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".sky-inline-form{background:#eeeeef;border:1px solid #cdcfd2;padding:10px;width:100%}.sky-inline-form .sky-inline-form-footer{margin-top:20px}.sky-inline-form .sky-inline-form-footer button{margin:0 5px 0 0}:host-context(.sky-theme-modern) .sky-inline-form{background-color:#fff;border:none;padding:15px}:host-context(.sky-theme-modern) .sky-inline-form .sky-inline-form-footer{margin-top:30px}:host-context(.sky-theme-modern) .sky-inline-form .sky-inline-form-footer button{margin-right:10px}.sky-theme-modern .sky-inline-form{background-color:#fff;border:none;padding:15px}.sky-theme-modern .sky-inline-form .sky-inline-form-footer{margin-top:30px}.sky-theme-modern .sky-inline-form .sky-inline-form-footer button{margin-right:10px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-inline-form{background-color:#232427}.sky-theme-modern.sky-theme-mode-dark .sky-inline-form{background-color:#232427}\n"], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [skySlideDissolve], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
386
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormComponent, decorators: [{
|
|
387
|
-
type: i0.Component,
|
|
388
|
-
args: [{
|
|
389
|
-
selector: 'sky-inline-form',
|
|
390
|
-
template: "template",
|
|
391
|
-
styles: [".sky-inline-form{background:#eeeeef;border:1px solid #cdcfd2;padding:10px;width:100%}.sky-inline-form .sky-inline-form-footer{margin-top:20px}.sky-inline-form .sky-inline-form-footer button{margin:0 5px 0 0}:host-context(.sky-theme-modern) .sky-inline-form{background-color:#fff;border:none;padding:15px}:host-context(.sky-theme-modern) .sky-inline-form .sky-inline-form-footer{margin-top:30px}:host-context(.sky-theme-modern) .sky-inline-form .sky-inline-form-footer button{margin-right:10px}.sky-theme-modern .sky-inline-form{background-color:#fff;border:none;padding:15px}.sky-theme-modern .sky-inline-form .sky-inline-form-footer{margin-top:30px}.sky-theme-modern .sky-inline-form .sky-inline-form-footer button{margin-right:10px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-inline-form{background-color:#232427}.sky-theme-modern.sky-theme-mode-dark .sky-inline-form{background-color:#232427}\n"],
|
|
392
|
-
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
393
|
-
providers: [SkyInlineFormAdapterService],
|
|
394
|
-
animations: [skySlideDissolve],
|
|
395
|
-
}]
|
|
396
|
-
}], ctorParameters: function () { return [{ type: SkyInlineFormAdapterService }, { type: i0__namespace.ElementRef }, { type: i2__namespace.SkyLibResourcesService }, { type: i3__namespace.SkyAppWindowRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { config: [{
|
|
397
|
-
type: i0.Input
|
|
398
|
-
}], template: [{
|
|
399
|
-
type: i0.Input
|
|
400
|
-
}], showForm: [{
|
|
401
|
-
type: i0.Input
|
|
402
|
-
}], close: [{
|
|
403
|
-
type: i0.Output
|
|
404
|
-
}] } });
|
|
405
|
-
|
|
406
|
-
var SkyInlineFormModule = /** @class */ (function () {
|
|
407
|
-
function SkyInlineFormModule() {
|
|
408
|
-
}
|
|
409
|
-
return SkyInlineFormModule;
|
|
410
|
-
}());
|
|
411
|
-
SkyInlineFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
412
|
-
SkyInlineFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormModule, declarations: [SkyInlineFormComponent], imports: [i4.CommonModule, SkyInlineFormResourcesModule], exports: [SkyInlineFormComponent] });
|
|
413
|
-
SkyInlineFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormModule, imports: [[i4.CommonModule, SkyInlineFormResourcesModule]] });
|
|
414
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyInlineFormModule, decorators: [{
|
|
415
|
-
type: i0.NgModule,
|
|
416
|
-
args: [{
|
|
417
|
-
declarations: [SkyInlineFormComponent],
|
|
418
|
-
imports: [i4.CommonModule, SkyInlineFormResourcesModule],
|
|
419
|
-
exports: [SkyInlineFormComponent],
|
|
420
|
-
}]
|
|
421
|
-
}] });
|
|
422
|
-
|
|
423
|
-
/**
|
|
424
|
-
* Generated bundle index. Do not edit.
|
|
425
|
-
*/
|
|
426
|
-
|
|
427
|
-
exports.SkyInlineFormModule = SkyInlineFormModule;
|
|
428
|
-
exports["λ1"] = SkyInlineFormComponent;
|
|
429
|
-
|
|
430
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
431
|
-
|
|
432
|
-
}));
|
|
433
|
-
//# sourceMappingURL=skyux-inline-form.umd.js.map
|
package/esm2015/index.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export * from './lib/modules/inline-form/inline-form.module';
|
|
2
|
-
export * from './lib/modules/inline-form/types/inline-form-button-action';
|
|
3
|
-
export * from './lib/modules/inline-form/types/inline-form-button-config';
|
|
4
|
-
export * from './lib/modules/inline-form/types/inline-form-close-args';
|
|
5
|
-
export * from './lib/modules/inline-form/types/inline-form-config';
|
|
6
|
-
export * from './lib/modules/inline-form/types/inline-form-button-layout';
|
|
7
|
-
// Components and directives must be exported to support Angular’s “partial” Ivy compiler.
|
|
8
|
-
// Obscure names are used to indicate types are not part of the public API.
|
|
9
|
-
export { SkyInlineFormComponent as λ1 } from './lib/modules/inline-form/inline-form.component';
|
|
10
|
-
//# sourceMappingURL=index.js.map
|
package/esm2015/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/components/inline-form/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,8CAA8C,CAAC;AAC7D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,oDAAoD,CAAC;AACnE,cAAc,2DAA2D,CAAC;AAE1E,0FAA0F;AAC1F,2EAA2E;AAC3E,OAAO,EAAE,sBAAsB,IAAI,EAAE,EAAE,MAAM,iDAAiD,CAAC","sourcesContent":["export * from './lib/modules/inline-form/inline-form.module';\nexport * from './lib/modules/inline-form/types/inline-form-button-action';\nexport * from './lib/modules/inline-form/types/inline-form-button-config';\nexport * from './lib/modules/inline-form/types/inline-form-close-args';\nexport * from './lib/modules/inline-form/types/inline-form-config';\nexport * from './lib/modules/inline-form/types/inline-form-button-layout';\n\n// Components and directives must be exported to support Angular’s “partial” Ivy compiler.\n// Obscure names are used to indicate types are not part of the public API.\nexport { SkyInlineFormComponent as λ1 } from './lib/modules/inline-form/inline-form.component';\n"]}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { animate, group, query, style, transition, trigger, } from '@angular/animations';
|
|
2
|
-
export const skySlideDissolve = trigger('skySlideDissolve', [
|
|
3
|
-
transition('* <=> *', [
|
|
4
|
-
// Expand animations
|
|
5
|
-
query('.sky-slide-dissolve-last:enter', [
|
|
6
|
-
style({ height: 0, opacity: 0 }),
|
|
7
|
-
animate('200ms ease-in', style({ height: '*', opacity: 0 })),
|
|
8
|
-
], { optional: true }),
|
|
9
|
-
query('.sky-slide-dissolve-last:enter', [
|
|
10
|
-
style({ opacity: 0 }),
|
|
11
|
-
animate('200ms ease-in', style({ opacity: 1 })),
|
|
12
|
-
], { optional: true }),
|
|
13
|
-
// Collapse animations
|
|
14
|
-
// The expanded content should fade out immediately to prevent
|
|
15
|
-
// any overlap with the read-only content that's returning to the screen.
|
|
16
|
-
query('.sky-slide-dissolve-last:leave', [animate('0ms', style({ opacity: 0 }))], { optional: true }),
|
|
17
|
-
group([
|
|
18
|
-
query('.sky-slide-dissolve-first:enter', [
|
|
19
|
-
style({ opacity: 0, height: 0 }),
|
|
20
|
-
animate('100ms ease-in', style({ opacity: 1, height: '*' })),
|
|
21
|
-
], { optional: true }),
|
|
22
|
-
query('.sky-slide-dissolve-last:leave', [animate('200ms ease-in', style({ height: 0 }))], { optional: true }),
|
|
23
|
-
]),
|
|
24
|
-
]),
|
|
25
|
-
]);
|
|
26
|
-
//# sourceMappingURL=slide-dissolve.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"slide-dissolve.js","sourceRoot":"","sources":["../../../../../../../../../libs/components/inline-form/src/lib/modules/inline-form/animations/slide-dissolve.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,OAAO,EACP,KAAK,EACL,KAAK,EACL,KAAK,EACL,UAAU,EACV,OAAO,GACR,MAAM,qBAAqB,CAAC;AAE7B,MAAM,CAAC,MAAM,gBAAgB,GAA6B,OAAO,CAC/D,kBAAkB,EAClB;IACE,UAAU,CAAC,SAAS,EAAE;QACpB,oBAAoB;QACpB,KAAK,CACH,gCAAgC,EAChC;YACE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;SAC7D,EACD,EAAE,QAAQ,EAAE,IAAI,EAAE,CACnB;QACD,KAAK,CACH,gCAAgC,EAChC;YACE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;YACrB,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;SAChD,EACD,EAAE,QAAQ,EAAE,IAAI,EAAE,CACnB;QAED,sBAAsB;QACtB,8DAA8D;QAC9D,yEAAyE;QACzE,KAAK,CACH,gCAAgC,EAChC,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EACvC,EAAE,QAAQ,EAAE,IAAI,EAAE,CACnB;QAED,KAAK,CAAC;YACJ,KAAK,CACH,iCAAiC,EACjC;gBACE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;gBAChC,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;aAC7D,EACD,EAAE,QAAQ,EAAE,IAAI,EAAE,CACnB;YACD,KAAK,CACH,gCAAgC,EAChC,CAAC,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAChD,EAAE,QAAQ,EAAE,IAAI,EAAE,CACnB;SACF,CAAC;KACH,CAAC;CACH,CACF,CAAC","sourcesContent":["import {\n AnimationTriggerMetadata,\n animate,\n group,\n query,\n style,\n transition,\n trigger,\n} from '@angular/animations';\n\nexport const skySlideDissolve: AnimationTriggerMetadata = trigger(\n 'skySlideDissolve',\n [\n transition('* <=> *', [\n // Expand animations\n query(\n '.sky-slide-dissolve-last:enter',\n [\n style({ height: 0, opacity: 0 }),\n animate('200ms ease-in', style({ height: '*', opacity: 0 })),\n ],\n { optional: true }\n ),\n query(\n '.sky-slide-dissolve-last:enter',\n [\n style({ opacity: 0 }),\n animate('200ms ease-in', style({ opacity: 1 })),\n ],\n { optional: true }\n ),\n\n // Collapse animations\n // The expanded content should fade out immediately to prevent\n // any overlap with the read-only content that's returning to the screen.\n query(\n '.sky-slide-dissolve-last:leave',\n [animate('0ms', style({ opacity: 0 }))],\n { optional: true }\n ),\n\n group([\n query(\n '.sky-slide-dissolve-first:enter',\n [\n style({ opacity: 0, height: 0 }),\n animate('100ms ease-in', style({ opacity: 1, height: '*' })),\n ],\n { optional: true }\n ),\n query(\n '.sky-slide-dissolve-last:leave',\n [animate('200ms ease-in', style({ height: 0 }))],\n { optional: true }\n ),\n ]),\n ]),\n ]\n);\n"]}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import { Injectable } from '@angular/core';
|
|
2
|
-
import * as i0 from "@angular/core";
|
|
3
|
-
/* tslint:disable */
|
|
4
|
-
const SKY_TABBABLE_SELECTOR = [
|
|
5
|
-
'a[href]',
|
|
6
|
-
'area[href]',
|
|
7
|
-
"input:not([disabled]):not([tabindex='-1'])",
|
|
8
|
-
"button:not([disabled]):not([tabindex='-1'])",
|
|
9
|
-
"select:not([disabled]):not([tabindex='-1'])",
|
|
10
|
-
"textarea:not([disabled]):not([tabindex='-1'])",
|
|
11
|
-
'iframe',
|
|
12
|
-
'object',
|
|
13
|
-
'embed',
|
|
14
|
-
"*[tabindex]:not([tabindex='-1'])",
|
|
15
|
-
'*[contenteditable=true]',
|
|
16
|
-
].join(', ');
|
|
17
|
-
/* tslint:enable */
|
|
18
|
-
/**
|
|
19
|
-
* @internal
|
|
20
|
-
*/
|
|
21
|
-
export class SkyInlineFormAdapterService {
|
|
22
|
-
applyAutofocus(inlineFormElementRef) {
|
|
23
|
-
const inputWithAutofocus = inlineFormElementRef.nativeElement.querySelector('[autofocus]');
|
|
24
|
-
if (inputWithAutofocus) {
|
|
25
|
-
inputWithAutofocus.focus();
|
|
26
|
-
}
|
|
27
|
-
else {
|
|
28
|
-
const focusEl = inlineFormElementRef.nativeElement.querySelector('.sky-inline-form-content');
|
|
29
|
-
const focusableChildren = this.loadFocusableChildren(focusEl);
|
|
30
|
-
this.focusFirstElement(focusableChildren);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
loadFocusableChildren(elem) {
|
|
34
|
-
const elements = Array.prototype.slice.call(elem.querySelectorAll(SKY_TABBABLE_SELECTOR));
|
|
35
|
-
return elements.filter((element) => {
|
|
36
|
-
return this.isVisible(element);
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
isVisible(element) {
|
|
40
|
-
const style = window.getComputedStyle(element);
|
|
41
|
-
const isHidden = style.display === 'none' || style.visibility === 'hidden';
|
|
42
|
-
if (isHidden) {
|
|
43
|
-
return false;
|
|
44
|
-
}
|
|
45
|
-
/* istanbul ignore next */
|
|
46
|
-
const hasBounds = !!(element.offsetWidth ||
|
|
47
|
-
element.offsetHeight ||
|
|
48
|
-
element.getClientRects().length);
|
|
49
|
-
return hasBounds;
|
|
50
|
-
}
|
|
51
|
-
focusFirstElement(list) {
|
|
52
|
-
if (list.length > 0) {
|
|
53
|
-
list[0].focus();
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
SkyInlineFormAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInlineFormAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
58
|
-
SkyInlineFormAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInlineFormAdapterService });
|
|
59
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInlineFormAdapterService, decorators: [{
|
|
60
|
-
type: Injectable
|
|
61
|
-
}] });
|
|
62
|
-
//# sourceMappingURL=inline-form-adapter.service.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"inline-form-adapter.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/inline-form/src/lib/modules/inline-form/inline-form-adapter.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,UAAU,EAAE,MAAM,eAAe,CAAC;;AAEvD,oBAAoB;AACpB,MAAM,qBAAqB,GAAG;IAC5B,SAAS;IACT,YAAY;IACZ,4CAA4C;IAC5C,6CAA6C;IAC7C,6CAA6C;IAC7C,+CAA+C;IAC/C,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,kCAAkC;IAClC,yBAAyB;CAC1B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACb,mBAAmB;AAEnB;;GAEG;AAEH,MAAM,OAAO,2BAA2B;IAC/B,cAAc,CAAC,oBAAgC;QACpD,MAAM,kBAAkB,GACtB,oBAAoB,CAAC,aAAa,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAElE,IAAI,kBAAkB,EAAE;YACtB,kBAAkB,CAAC,KAAK,EAAE,CAAC;SAC5B;aAAM;YACL,MAAM,OAAO,GACX,oBAAoB,CAAC,aAAa,CAAC,aAAa,CAC9C,0BAA0B,CAC3B,CAAC;YACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;YAE9D,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;SAC3C;IACH,CAAC;IAEO,qBAAqB,CAAC,IAAiB;QAC7C,MAAM,QAAQ,GAAuB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAC7D,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAC7C,CAAC;QAEF,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE;YACjC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,SAAS,CAAC,OAAoB;QACpC,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QAC/C,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,KAAK,MAAM,IAAI,KAAK,CAAC,UAAU,KAAK,QAAQ,CAAC;QAC3E,IAAI,QAAQ,EAAE;YACZ,OAAO,KAAK,CAAC;SACd;QAED,0BAA0B;QAC1B,MAAM,SAAS,GAAG,CAAC,CAAC,CAClB,OAAO,CAAC,WAAW;YACnB,OAAO,CAAC,YAAY;YACpB,OAAO,CAAC,cAAc,EAAE,CAAC,MAAM,CAChC,CAAC;QACF,OAAO,SAAS,CAAC;IACnB,CAAC;IAEO,iBAAiB,CAAC,IAAwB;QAChD,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACnB,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;SACjB;IACH,CAAC;;yHAhDU,2BAA2B;6HAA3B,2BAA2B;4FAA3B,2BAA2B;kBADvC,UAAU","sourcesContent":["import { ElementRef, Injectable } from '@angular/core';\n\n/* tslint:disable */\nconst SKY_TABBABLE_SELECTOR = [\n 'a[href]',\n 'area[href]',\n \"input:not([disabled]):not([tabindex='-1'])\",\n \"button:not([disabled]):not([tabindex='-1'])\",\n \"select:not([disabled]):not([tabindex='-1'])\",\n \"textarea:not([disabled]):not([tabindex='-1'])\",\n 'iframe',\n 'object',\n 'embed',\n \"*[tabindex]:not([tabindex='-1'])\",\n '*[contenteditable=true]',\n].join(', ');\n/* tslint:enable */\n\n/**\n * @internal\n */\n@Injectable()\nexport class SkyInlineFormAdapterService {\n public applyAutofocus(inlineFormElementRef: ElementRef): void {\n const inputWithAutofocus =\n inlineFormElementRef.nativeElement.querySelector('[autofocus]');\n\n if (inputWithAutofocus) {\n inputWithAutofocus.focus();\n } else {\n const focusEl: HTMLElement =\n inlineFormElementRef.nativeElement.querySelector(\n '.sky-inline-form-content'\n );\n const focusableChildren = this.loadFocusableChildren(focusEl);\n\n this.focusFirstElement(focusableChildren);\n }\n }\n\n private loadFocusableChildren(elem: HTMLElement): HTMLElement[] {\n const elements: Array<HTMLElement> = Array.prototype.slice.call(\n elem.querySelectorAll(SKY_TABBABLE_SELECTOR)\n );\n\n return elements.filter((element) => {\n return this.isVisible(element);\n });\n }\n\n private isVisible(element: HTMLElement): boolean {\n const style = window.getComputedStyle(element);\n const isHidden = style.display === 'none' || style.visibility === 'hidden';\n if (isHidden) {\n return false;\n }\n\n /* istanbul ignore next */\n const hasBounds = !!(\n element.offsetWidth ||\n element.offsetHeight ||\n element.getClientRects().length\n );\n return hasBounds;\n }\n\n private focusFirstElement(list: Array<HTMLElement>): void {\n if (list.length > 0) {\n list[0].focus();\n }\n }\n}\n"]}
|