@indice/ng-components 0.2.160-beta.1 → 0.2.160-beta.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/_styles.css +578 -3
- package/bundles/indice-ng-components.umd.js +165 -35
- package/bundles/indice-ng-components.umd.js.map +1 -1
- package/esm2015/lib/controls/notifications-indicator/notifications-indicator.component.js +19 -13
- package/esm2015/lib/controls/stepper/lib-step.component.js +3 -5
- package/esm2015/lib/controls/stepper/lib-stepper.component.js +35 -10
- package/esm2015/lib/controls/user-profile-menu/user-profile-menu.component.js +2 -2
- package/esm2015/lib/layouts/shell/shell-header/shell-header.component.js +10 -11
- package/esm2015/lib/layouts/shell/shell-layout/shell-layout.component.js +4 -6
- package/esm2015/lib/layouts/shell/shell-sidebar/shell-sidebar.component.js +2 -2
- package/esm2015/lib/layouts/shell/shell-sidebar-header/shell-sidebar-header.component.js +48 -0
- package/esm2015/lib/layouts/shell/shell-sidebar-layout/shell-sidebar-layout.component.js +28 -0
- package/esm2015/lib/layouts/shell/shell-stacked-layout/shell-stacked-layout.component.js +24 -0
- package/esm2015/lib/ng-components.module.js +12 -3
- package/esm2015/lib/pages/auth/auth-callback/auth-callback.component.js +1 -2
- package/esm2015/public-api.js +3 -1
- package/fesm2015/indice-ng-components.js +144 -36
- package/fesm2015/indice-ng-components.js.map +1 -1
- package/lib/controls/notifications-indicator/notifications-indicator.component.d.ts +3 -3
- package/lib/controls/stepper/lib-stepper.component.d.ts +15 -4
- package/lib/layouts/shell/shell-header/shell-header.component.d.ts +2 -3
- package/lib/layouts/shell/shell-sidebar-header/shell-sidebar-header.component.d.ts +14 -0
- package/lib/layouts/shell/shell-sidebar-layout/shell-sidebar-layout.component.d.ts +12 -0
- package/lib/layouts/shell/shell-stacked-layout/shell-stacked-layout.component.d.ts +10 -0
- package/lib/ng-components.module.d.ts +7 -4
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -2210,8 +2210,7 @@
|
|
|
2210
2210
|
Object.defineProperty(LibStepComponent.prototype, "index", {
|
|
2211
2211
|
/** Indicates the index of the step. */
|
|
2212
2212
|
get: function () {
|
|
2213
|
-
|
|
2214
|
-
return (_a = this._stepper) === null || _a === void 0 ? void 0 : _a.steps.toArray().indexOf(this);
|
|
2213
|
+
return this._stepper ? this._stepper.steps.toArray().indexOf(this) : -1;
|
|
2215
2214
|
},
|
|
2216
2215
|
enumerable: false,
|
|
2217
2216
|
configurable: true
|
|
@@ -2219,8 +2218,7 @@
|
|
|
2219
2218
|
Object.defineProperty(LibStepComponent.prototype, "isLast", {
|
|
2220
2219
|
/** Indicates whether this step is the last step. */
|
|
2221
2220
|
get: function () {
|
|
2222
|
-
|
|
2223
|
-
return ((_a = this._stepper) === null || _a === void 0 ? void 0 : _a.steps.length) - 1 === this.index;
|
|
2221
|
+
return this._stepper ? this._stepper.steps.length - 1 === this.index : false;
|
|
2224
2222
|
},
|
|
2225
2223
|
enumerable: false,
|
|
2226
2224
|
configurable: true
|
|
@@ -2299,11 +2297,15 @@
|
|
|
2299
2297
|
})(exports.StepperType || (exports.StepperType = {}));
|
|
2300
2298
|
|
|
2301
2299
|
var LibStepperComponent = /** @class */ (function () {
|
|
2302
|
-
function LibStepperComponent() {
|
|
2300
|
+
function LibStepperComponent(_changeDetectorRef) {
|
|
2301
|
+
this._changeDetectorRef = _changeDetectorRef;
|
|
2303
2302
|
// Private properties.
|
|
2304
2303
|
this._currentStepIndex = 0;
|
|
2304
|
+
this._isCompleted = false;
|
|
2305
2305
|
/** Emmited when a step change occurs. */
|
|
2306
2306
|
this.stepChanged = new i0.EventEmitter();
|
|
2307
|
+
/** Emmited when the stepper navigates away from the final step. Only emits once. */
|
|
2308
|
+
this.completed = new i0.EventEmitter();
|
|
2307
2309
|
/** Indicates whether each step has to be validated before proceeding to the next. */
|
|
2308
2310
|
this.linear = false;
|
|
2309
2311
|
/** The type of the stepper. */
|
|
@@ -2328,19 +2330,50 @@
|
|
|
2328
2330
|
enumerable: false,
|
|
2329
2331
|
configurable: true
|
|
2330
2332
|
});
|
|
2333
|
+
Object.defineProperty(LibStepperComponent.prototype, "canGoBack", {
|
|
2334
|
+
/** Indicates whether stepper can go a step back. */
|
|
2335
|
+
get: function () {
|
|
2336
|
+
return this._currentStepIndex > 0;
|
|
2337
|
+
},
|
|
2338
|
+
enumerable: false,
|
|
2339
|
+
configurable: true
|
|
2340
|
+
});
|
|
2341
|
+
Object.defineProperty(LibStepperComponent.prototype, "canGoForward", {
|
|
2342
|
+
/** Indicates whether stepper can go a step forward. */
|
|
2343
|
+
get: function () {
|
|
2344
|
+
var _a;
|
|
2345
|
+
return this._currentStepIndex < ((_a = this.steps) === null || _a === void 0 ? void 0 : _a.length) - 1;
|
|
2346
|
+
},
|
|
2347
|
+
enumerable: false,
|
|
2348
|
+
configurable: true
|
|
2349
|
+
});
|
|
2350
|
+
Object.defineProperty(LibStepperComponent.prototype, "isCompleted", {
|
|
2351
|
+
/** Indicates whether */
|
|
2352
|
+
get: function () {
|
|
2353
|
+
return this._isCompleted;
|
|
2354
|
+
},
|
|
2355
|
+
enumerable: false,
|
|
2356
|
+
configurable: true
|
|
2357
|
+
});
|
|
2331
2358
|
LibStepperComponent.prototype.ngOnInit = function () { };
|
|
2359
|
+
LibStepperComponent.prototype.ngAfterViewChecked = function () {
|
|
2360
|
+
this._changeDetectorRef.detectChanges();
|
|
2361
|
+
};
|
|
2332
2362
|
/** Proceeds to the next step, if any. */
|
|
2333
2363
|
LibStepperComponent.prototype.goToNextStep = function () {
|
|
2334
|
-
|
|
2335
|
-
if (this.
|
|
2364
|
+
var _a;
|
|
2365
|
+
if (((_a = this.currentStep) === null || _a === void 0 ? void 0 : _a.isLast) && !this._isCompleted) {
|
|
2366
|
+
this._isCompleted = true;
|
|
2367
|
+
this.completed.emit();
|
|
2368
|
+
}
|
|
2369
|
+
if (!this.canGoForward) {
|
|
2336
2370
|
return;
|
|
2337
2371
|
}
|
|
2338
2372
|
this.updateCurrentStepIndex(this._currentStepIndex + 1);
|
|
2339
2373
|
};
|
|
2340
2374
|
/** Proceeds to the previous step, if any. */
|
|
2341
2375
|
LibStepperComponent.prototype.goToPreviousStep = function () {
|
|
2342
|
-
|
|
2343
|
-
if (this._currentStepIndex === 0) {
|
|
2376
|
+
if (!this.canGoBack) {
|
|
2344
2377
|
return;
|
|
2345
2378
|
}
|
|
2346
2379
|
this.updateCurrentStepIndex(this._currentStepIndex - 1);
|
|
@@ -2367,10 +2400,10 @@
|
|
|
2367
2400
|
};
|
|
2368
2401
|
return LibStepperComponent;
|
|
2369
2402
|
}());
|
|
2370
|
-
LibStepperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LibStepperComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2371
|
-
LibStepperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LibStepperComponent, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged" }, providers: [
|
|
2403
|
+
LibStepperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LibStepperComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2404
|
+
LibStepperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LibStepperComponent, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged", completed: "completed" }, providers: [
|
|
2372
2405
|
{ provide: LIBSTEPPER_ACCESSOR, useExisting: i0.forwardRef(function () { return LibStepperComponent; }) }
|
|
2373
|
-
], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0__namespace, template: "<ng-container [ngSwitch]=\"type\">\r\n <!-- Bullets -->\r\n <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\r\n <p class=\"text-sm font-medium\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n <ol role=\"list\" class=\"ml-8 flex items-center space-x-5\">\r\n <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n <!-- Completed Step -->\r\n <div class=\"block w-2.5 h-2.5 bg-blue-600 rounded-full hover:bg-blue-900\" *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"sr-only\">Step {{ step.index }}</span>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"relative flex items-center justify-center\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"absolute w-5 h-5 p-px flex\" aria-hidden=\"true\">\r\n <span class=\"w-full h-full rounded-full bg-blue-200\"></span>\r\n </span>\r\n <span class=\"relative block w-2.5 h-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Step {{ step.index }}</span>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div href=\"#\" class=\"block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400\" *ngIf=\"step.state === StepState.Upcoming\">\r\n <span class=\"sr-only\">Step {{ step.index }}</span>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Bullets & Text -->\r\n <div class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n <nav aria-label=\"Progress\">\r\n <ol role=\"list\" class=\"space-y-6\">\r\n <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n <!-- Complete Step -->\r\n <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"flex items-start\">\r\n <span class=\"flex-shrink-0 relative h-5 w-5 flex items-center justify-center\">\r\n <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n <span class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"flex items-start\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\r\n <span class=\"absolute h-4 w-4 rounded-full bg-blue-200\"></span>\r\n <span class=\"relative block w-2 h-2 bg-blue-600 rounded-full\"></span>\r\n </span>\r\n <span class=\"ml-3 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"flex items-start\">\r\n <div class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\r\n <div class=\"h-2 w-2 bg-gray-300 rounded-full group-hover:bg-gray-400\"></div>\r\n </div>\r\n <p class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </p>\r\n </div>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n </div>\r\n <!-- Circles -->\r\n <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\r\n <ol class=\"flex items-center\" role=\"list\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\r\n <!-- Completed Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n <div class=\"h-0.5 w-full bg-blue-600\"></div>\r\n </div>\r\n <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\r\n <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n </div>\r\n </ng-container>\r\n <!-- Active Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Active\">\r\n <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n </div>\r\n <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\r\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n </div>\r\n </ng-container>\r\n <!-- Upcoming Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n </div>\r\n <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\r\n <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n </div>\r\n </ng-container>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Circles With Text -->\r\n <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n <ol role=\"list\" class=\"overflow-hidden\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\r\n <!-- Complete Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n <div class=\"relative flex items-start group\">\r\n <span class=\"h-9 flex items-center\">\r\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n </span>\r\n <span class=\"ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <!-- Active Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Active\">\r\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n <div class=\"relative flex items-start group\" aria-current=\"step\">\r\n <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\r\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\r\n </span>\r\n </span>\r\n <span class=\"ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <!-- Upcoming Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n <div href=\"#\" class=\"relative flex items-start group\">\r\n <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\r\n </span>\r\n </span>\r\n <span class=\"ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Panels -->\r\n <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\r\n <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n <!-- Completed step -->\r\n <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Active step -->\r\n <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\r\n </span>\r\n <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Upcoming step -->\r\n <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\r\n <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\r\n </span>\r\n <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Arrow separator for lg screens and up -->\r\n <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\r\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\r\n <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Panels With Border -->\r\n <div class=\"border-t border-b border-gray-200\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n <nav class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\" aria-label=\"Progress\">\r\n <ol role=\"list\" class=\"rounded-md overflow-hidden flex border-l border-r border-gray-200 lg:rounded-none\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative overflow-hidden lg:flex-1 cursor-pointer\">\r\n <!-- Completed Step -->\r\n <div class=\"border border-gray-200 overflow-hidden border-b-0 rounded-t-md lg:border-0\" *ngIf=\"step.state === StepState.Completed\">\r\n <div class=\"group\">\r\n <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\r\n <span class=\"px-6 py-5 flex items-start text-sm font-medium\">\r\n <span class=\"flex-shrink-0\">\r\n <span class=\"w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full\">\r\n <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n </span>\r\n <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"border border-gray-200 overflow-hidden lg:border-0\" *ngIf=\"step.state === StepState.Active\">\r\n <div aria-current=\"step\">\r\n <span class=\"absolute top-0 left-0 w-1 h-full bg-blue-600 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\r\n <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\r\n <span class=\"flex-shrink-0\">\r\n <span class=\"w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n <span class=\"text-blue-600\">{{ step.index + 1 }}</span>\r\n </span>\r\n </span>\r\n <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold text-blue-600 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Separator -->\r\n <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div class=\"border border-gray-200 overflow-hidden border-t-0 rounded-b-md lg:border-0\" *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"group\">\r\n <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\r\n <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\r\n <span class=\"flex-shrink-0\">\r\n <span class=\"w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full\">\r\n <span class=\"text-gray-500\">{{ step.index + 1 }}</span>\r\n </span>\r\n </span>\r\n <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold text-gray-500 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Separator -->\r\n <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n </div>\r\n <!-- Progress -->\r\n <div *ngSwitchCase=\"StepperType.Progress\">\r\n <div class=\"mt-6\" aria-hidden=\"true\">\r\n <div class=\"bg-gray-200 rounded-full overflow-hidden\">\r\n <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\r\n </div>\r\n <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\r\n <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\r\n <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Simple -->\r\n <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\r\n <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\r\n <!-- Completed Step -->\r\n <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\r\n <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\r\n <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\r\n <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\r\n <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n</ng-container>\r\n<ng-container *ngFor=\"let step of steps\">\r\n <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\r\n</ng-container>", directives: [{ type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
2406
|
+
], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0__namespace, template: "<ng-container [ngSwitch]=\"type\">\r\n <!-- Bullets -->\r\n <nav class=\"stepper-bullets-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\r\n <p class=\"stepper-bullets-counter\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\r\n <ol role=\"list\" class=\"stepper-bullets-ol\">\r\n <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n <!-- Completed Step -->\r\n <div class=\"stepper-bullets-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"sr-only\">Step {{ step.index }}</span>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"stepper-bullets-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"stepper-bullets-active-step-level1\" aria-hidden=\"true\">\r\n <span class=\"stepper-bullets-active-step-level1\"></span>\r\n </span>\r\n <span class=\"stepper-bullets-active-step-bullet\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Step {{ step.index }}</span>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div href=\"#\" class=\"stepper-bullets-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\r\n <span class=\"sr-only\">Step {{ step.index }}</span>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Bullets & Text -->\r\n <div class=\"stepper-bullets-and-text-container\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\r\n <nav aria-label=\"Progress\">\r\n <ol role=\"list\" class=\"stepper-bullets-and-text-ol\">\r\n <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\r\n <!-- Complete Step -->\r\n <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"stepper-bullets-and-text-completed-step\">\r\n <span class=\"stepper-bullets-and-text-completed-step-level1\">\r\n <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n <span class=\"stepper-bullets-and-text-completed-step-container\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"stepper-bullets-and-text-active-step\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"stepper-bullets-and-text-active-step-level1\" aria-hidden=\"true\">\r\n <span class=\"stepper-bullets-and-text-active-step-level11\"></span>\r\n <span class=\"stepper-bullets-and-text-active-step-level12\"></span>\r\n </span>\r\n <span class=\"stepper-bullets-and-text-active-step-container\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"stepper-bullets-and-text-upcoming-step\">\r\n <div class=\"stepper-bullets-and-text-upcoming-step-level1\" aria-hidden=\"true\">\r\n <div class=\"stepper-bullets-and-text-upcoming-step-level2\"></div>\r\n </div>\r\n <p class=\"stepper-bullets-and-text-upcoming-step-container\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </p>\r\n </div>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n </div>\r\n <!-- Circles -->\r\n <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\r\n <ol class=\"flex items-center\" role=\"list\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\r\n <!-- Completed Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n <div class=\"h-0.5 w-full bg-blue-600\"></div>\r\n </div>\r\n <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\r\n <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n </div>\r\n </ng-container>\r\n <!-- Active Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Active\">\r\n <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n </div>\r\n <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\r\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n </div>\r\n </ng-container>\r\n <!-- Upcoming Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\r\n <div class=\"h-0.5 w-full bg-gray-200\"></div>\r\n </div>\r\n <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\r\n <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\r\n </div>\r\n </ng-container>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Circles With Text -->\r\n <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\r\n <ol role=\"list\" class=\"overflow-hidden\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\r\n <!-- Complete Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Completed\">\r\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n <div class=\"relative flex items-start group\">\r\n <span class=\"h-9 flex items-center\">\r\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n </span>\r\n <span class=\"ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <!-- Active Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Active\">\r\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n <div class=\"relative flex items-start group\" aria-current=\"step\">\r\n <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\r\n <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\r\n </span>\r\n </span>\r\n <span class=\"ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <!-- Upcoming Step -->\r\n <ng-container *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\r\n <div href=\"#\" class=\"relative flex items-start group\">\r\n <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\r\n <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\r\n </span>\r\n </span>\r\n <span class=\"ml-4 min-w-0 flex flex-col\">\r\n <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Panels -->\r\n <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\r\n <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\r\n <!-- Completed step -->\r\n <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\r\n <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Active step -->\r\n <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\r\n <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\r\n </span>\r\n <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Upcoming step -->\r\n <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\r\n <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\r\n <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\r\n <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\r\n </span>\r\n <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Arrow separator for lg screens and up -->\r\n <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\r\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\r\n <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n <!-- Panels With Border -->\r\n <div class=\"panels-with-border-container\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\r\n <nav class=\"panels-with-border-nav\" aria-label=\"Progress\">\r\n <ol role=\"list\" class=\"panels-with-border-ol\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"panels-with-border-li\">\r\n <!-- Completed Step -->\r\n <div class=\"panels-with-border-completed-step\" *ngIf=\"step.state === StepState.Completed\">\r\n <div class=\"group\">\r\n <span class=\"panels-with-border-completed-step-level1\" aria-hidden=\"true\"></span>\r\n <span class=\"panels-with-border-completed-step-level2\">\r\n <span class=\"panels-with-border-completed-step-level21\">\r\n <span class=\"panels-with-border-completed-step-level211\">\r\n <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n </svg>\r\n </span>\r\n </span>\r\n <span class=\"panels-with-border-completed-step-level22\">\r\n <span class=\"panels-with-border-completed-step-level221\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"panels-with-border-completed-step-level222\" *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"panels-with-border-active-step\" *ngIf=\"step.state === StepState.Active\">\r\n <div aria-current=\"step\">\r\n <span class=\"panels-with-border-active-step-level1\" aria-hidden=\"true\"></span>\r\n <span class=\"panels-with-border-active-step-level2\">\r\n <span class=\"panels-with-border-active-step-level21\">\r\n <span class=\"panels-with-border-active-step-level211\">\r\n <span class=\"panels-with-border-active-step-level211-text\">{{ step.index + 1 }}</span>\r\n </span>\r\n </span>\r\n <span class=\"panels-with-border-active-step-level22\">\r\n <span class=\"panels-with-border-active-step-level221\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"panels-with-border-active-step-level222\" *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Separator -->\r\n <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n </svg>\r\n </div>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div class=\"panels-with-border-upcoming-step\" *ngIf=\"step.state === StepState.Upcoming\">\r\n <div class=\"group\">\r\n <span class=\"panels-with-border-upcoming-step-level1\" aria-hidden=\"true\"></span>\r\n <span class=\"panels-with-border-upcoming-step-level2\">\r\n <span class=\"panels-with-border-upcoming-step-level21\">\r\n <span class=\"panels-with-border-upcoming-step-level211\">\r\n <span class=\"panels-with-border-upcoming-step-level211-text\">{{ step.index + 1 }}</span>\r\n </span>\r\n </span>\r\n <span class=\"panels-with-border-upcoming-step-level22\">\r\n <span class=\"panels-with-border-upcoming-step-level221\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- Separator -->\r\n <div class=\"panels-with-border-step-separator\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\r\n <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\r\n <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n </div>\r\n <!-- Progress -->\r\n <div *ngSwitchCase=\"StepperType.Progress\">\r\n <div class=\"mt-6\" aria-hidden=\"true\">\r\n <div class=\"bg-gray-200 rounded-full overflow-hidden\">\r\n <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\r\n </div>\r\n <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\r\n <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\r\n <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Simple -->\r\n <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\r\n <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\r\n <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\r\n <!-- Completed Step -->\r\n <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\r\n <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\r\n <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Active Step -->\r\n <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\r\n <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\r\n <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n <!-- Upcoming Step -->\r\n <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\r\n <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\r\n <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\r\n <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\r\n </span>\r\n </div>\r\n </li>\r\n </ol>\r\n </nav>\r\n</ng-container>\r\n<ng-container *ngFor=\"let step of steps\">\r\n <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\r\n</ng-container>", directives: [{ type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
2374
2407
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LibStepperComponent, decorators: [{
|
|
2375
2408
|
type: i0.Component,
|
|
2376
2409
|
args: [{
|
|
@@ -2380,11 +2413,13 @@
|
|
|
2380
2413
|
{ provide: LIBSTEPPER_ACCESSOR, useExisting: i0.forwardRef(function () { return LibStepperComponent; }) }
|
|
2381
2414
|
]
|
|
2382
2415
|
}]
|
|
2383
|
-
}], ctorParameters: function () { return []; }, propDecorators: { steps: [{
|
|
2416
|
+
}], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { steps: [{
|
|
2384
2417
|
type: i0.ContentChildren,
|
|
2385
2418
|
args: [LibStepComponent, { descendants: true }]
|
|
2386
2419
|
}], stepChanged: [{
|
|
2387
2420
|
type: i0.Output
|
|
2421
|
+
}], completed: [{
|
|
2422
|
+
type: i0.Output
|
|
2388
2423
|
}], linear: [{
|
|
2389
2424
|
type: i0.Input
|
|
2390
2425
|
}], type: [{
|
|
@@ -2688,7 +2723,7 @@
|
|
|
2688
2723
|
return UserProfileMenuComponent;
|
|
2689
2724
|
}());
|
|
2690
2725
|
UserProfileMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: UserProfileMenuComponent, deps: [{ token: i2.AuthService }, { token: i1$1.Router }, { token: APP_LINKS }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2691
|
-
UserProfileMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0__namespace, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\"
|
|
2726
|
+
UserProfileMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0__namespace, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n <div class=\"inline-flex\">\r\n <!-- Username -->\r\n <div [ngClass]=\"{'shell-header-profile': showUserName}\">\r\n <div *ngIf=\"user && showUserName\" class=\"shell-header-profile-userName\">\r\n {{ user.profile.name }}\r\n </div>\r\n </div>\r\n\r\n <div [class.ml-2]=\"showUserName\">\r\n <button type=\"button\" \r\n *ngIf=\"user\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\"\r\n (click)=\"userMenuExpanded = !userMenuExpanded\">\r\n <span class=\"sr-only\">Open user menu</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n </span>\r\n </button>\r\n\r\n <button type=\"button\"\r\n *ngIf=\"!user\"\r\n (click)=\"signin($event)\"\r\n class=\"shell-header-profile-dropdown-button\"\r\n id=\"user-menu\"\r\n aria-expanded=\"false\"\r\n aria-haspopup=\"true\">\r\n <span class=\"sr-only\">sign in</span>\r\n <span class=\"avatar-container\">\r\n <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div [class]=\"userMenuExpanded ?\r\n 'transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\r\n :\r\n 'hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'\"\r\n role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"menu-button\" tabindex=\"-1\">\r\n <lib-nav-links-list\r\n [links]=\"links.profile\"\r\n [link-class]=\"'nav-link-profile'\"\r\n [link-active-class]=\"'nav-link-profile-active'\">\r\n </lib-nav-links-list>\r\n </div>\r\n\r\n</div>\r\n\r\n", components: [{ type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }], directives: [{ type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2692
2727
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: UserProfileMenuComponent, decorators: [{
|
|
2693
2728
|
type: i0.Component,
|
|
2694
2729
|
args: [{
|
|
@@ -2728,20 +2763,26 @@
|
|
|
2728
2763
|
};
|
|
2729
2764
|
NotificationsIndicatorComponent.prototype.ngOnInit = function () {
|
|
2730
2765
|
var _this = this;
|
|
2731
|
-
|
|
2732
|
-
|
|
2733
|
-
|
|
2734
|
-
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
|
|
2740
|
-
|
|
2741
|
-
|
|
2766
|
+
var _a;
|
|
2767
|
+
if (this.links && this.links['notifications']) {
|
|
2768
|
+
this.links['notifications'].subscribe(function (notificationsLink) {
|
|
2769
|
+
_this.allNotificationsLink = notificationsLink;
|
|
2770
|
+
});
|
|
2771
|
+
}
|
|
2772
|
+
if (this.notifications) {
|
|
2773
|
+
this.notificationsSub$ = (_a = this.notifications) === null || _a === void 0 ? void 0 : _a.messages.subscribe(function (result) {
|
|
2774
|
+
if (result.items) {
|
|
2775
|
+
_this.newArrival = true;
|
|
2776
|
+
_this.unreadCount = result.count;
|
|
2777
|
+
_this.items = result.items;
|
|
2778
|
+
setTimeout(function () { _this.newArrival = false; }, 1000);
|
|
2779
|
+
}
|
|
2780
|
+
});
|
|
2781
|
+
}
|
|
2742
2782
|
};
|
|
2743
2783
|
NotificationsIndicatorComponent.prototype.doInboxAction = function () {
|
|
2744
|
-
|
|
2784
|
+
var _a;
|
|
2785
|
+
if ((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.inboxAction) {
|
|
2745
2786
|
this.notifications.inboxAction();
|
|
2746
2787
|
}
|
|
2747
2788
|
else {
|
|
@@ -2834,7 +2875,7 @@
|
|
|
2834
2875
|
// tslint:disable-next-line:no-input-rename
|
|
2835
2876
|
this.showAlerts = false;
|
|
2836
2877
|
// tslint:disable-next-line:no-input-rename
|
|
2837
|
-
this.
|
|
2878
|
+
this.showLangs = false;
|
|
2838
2879
|
this.border = true;
|
|
2839
2880
|
this.sectionLinks = rxjs.of([]);
|
|
2840
2881
|
this.mobileMenuExpanded = false;
|
|
@@ -2898,7 +2939,7 @@
|
|
|
2898
2939
|
return ShellHeaderComponent;
|
|
2899
2940
|
}());
|
|
2900
2941
|
ShellHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellHeaderComponent, deps: [{ token: i2.AuthService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2901
|
-
ShellHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"],
|
|
2942
|
+
ShellHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], showAlerts: ["show-alerts", "showAlerts"], showLangs: ["show-langs", "showLangs"], border: "border" }, ngImport: i0__namespace, template: "<nav>\r\n <div class=\"shell-header-paddings\">\r\n <div class=\"shell-header-border\">\r\n <div class=\"shell-header-menu-container\">\r\n <div class=\"shell-header-logo-container\">\r\n <div>\r\n <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n </div>\r\n </div>\r\n\r\n <div class=\"shell-header-link-container\">\r\n <div class=\"shell-header-link-container-inner\">\r\n <lib-nav-links-list\r\n [links]=\"sectionLinks\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'nav-link'\"\r\n [link-active-class]=\"'nav-link-active'\">\r\n </lib-nav-links-list>\r\n </div>\r\n </div>\r\n\r\n <div class=\"shell-header-md-visible\">\r\n\r\n <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n <lib-nav-links-list\r\n [links]=\"links.profileActions\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'shell-header-menu-rounded-button'\"\r\n [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n </lib-nav-links-list>\r\n\r\n\r\n <!-- Profile dropdown -->\r\n <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n </div>\r\n\r\n <!-- Notifications dropdown -->\r\n <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n <lib-notifications-indicator></lib-notifications-indicator>\r\n </div>\r\n\r\n <!-- languages dropdown -->\r\n <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n <lib-language-selection></lib-language-selection>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mobile-menu-button-container\">\r\n <!-- Mobile menu button -->\r\n <button type=\"button\"\r\n (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n class=\"mobile-menu-button\"\r\n aria-controls=\"mobile-menu\"\r\n [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n <span class=\"sr-only\">Open main menu</span>\r\n <!--Heroicon name: outline/menu Menu open: \"hidden\", Menu closed: \"block\"-->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\"\r\n [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\"\r\n [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Mobile menu, show/hide based on menu state. -->\r\n <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n <lib-nav-links-list\r\n [links]=\"sectionLinks\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'nav-link-mobile'\"\r\n [link-active-class]=\"'nav-link-mobile-active'\"\r\n [container-class]=\"'mobile-menu-link-container'\">\r\n </lib-nav-links-list>\r\n\r\n <div *ngIf=\"!user\">\r\n <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n </a>\r\n </div>\r\n\r\n <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n <div class=\"mobile-menu-user-info-container-inner\">\r\n <div class=\"flex-shrink-0\">\r\n <span class=\"mobile-menu-avatar-container\">\r\n <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n </span>\r\n </div>\r\n <div class=\"ml-3\">\r\n <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n </div>\r\n <!--\r\n <button class=\"mobile-menu-rounded-button\">\r\n <span class=\"sr-only\">View notifications</span>\r\n <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n </svg>\r\n </button>\r\n -->\r\n </div>\r\n </div>\r\n\r\n <lib-nav-links-list\r\n [links]=\"links.profile\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'nav-link-mobile'\"\r\n [link-active-class]=\"'nav-link-mobile-active'\"\r\n [container-class]=\"'mobile-menu-link-container'\">\r\n </lib-nav-links-list>\r\n </div>\r\n</nav>\r\n", components: [{ type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }, { type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }, { type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { type: LanguageSelectionComponent, selector: "lib-language-selection" }], directives: [{ type: i1__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2902
2943
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellHeaderComponent, decorators: [{
|
|
2903
2944
|
type: i0.Component,
|
|
2904
2945
|
args: [{
|
|
@@ -2935,9 +2976,9 @@
|
|
|
2935
2976
|
}], showAlerts: [{
|
|
2936
2977
|
type: i0.Input,
|
|
2937
2978
|
args: ['show-alerts']
|
|
2938
|
-
}],
|
|
2979
|
+
}], showLangs: [{
|
|
2939
2980
|
type: i0.Input,
|
|
2940
|
-
args: ['
|
|
2981
|
+
args: ['show-langs']
|
|
2941
2982
|
}], border: [{
|
|
2942
2983
|
type: i0.Input
|
|
2943
2984
|
}] } });
|
|
@@ -2963,6 +3004,25 @@
|
|
|
2963
3004
|
}] }];
|
|
2964
3005
|
} });
|
|
2965
3006
|
|
|
3007
|
+
var ShellStackedLayoutComponent = /** @class */ (function () {
|
|
3008
|
+
function ShellStackedLayoutComponent() {
|
|
3009
|
+
}
|
|
3010
|
+
ShellStackedLayoutComponent.prototype.ngOnInit = function () {
|
|
3011
|
+
};
|
|
3012
|
+
return ShellStackedLayoutComponent;
|
|
3013
|
+
}());
|
|
3014
|
+
ShellStackedLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellStackedLayoutComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3015
|
+
ShellStackedLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: { config: "config" }, ngImport: i0__namespace, template: "<div class=\"shell-header-container\" *ngIf=\"config?.showHeader\">\r\n <div [class]=\"config?.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n <ng-container *ngIf=\"config?.customHeaderComponent\">\r\n <div appDynamicComponentHost =\"Header\"></div>\r\n </ng-container>\r\n <lib-shell-header *ngIf=\"!config?.customHeaderComponent\" [show-userName]=\"config?.showUserNameOnHeader\"\r\n [show-alerts]=\"config?.showAlertsOnHeader\" [show-langs]=\"config?.showLangsOnHeader\">\r\n </lib-shell-header>\r\n </div>\r\n</div>\r\n\r\n<main [class]=\"config?.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n <div [class]=\"config?.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n <router-outlet *ngIf=\"(!config || config.layout === 'Stacked' || !config.layout)\"></router-outlet>\r\n </div>\r\n</main>\r\n\r\n<div class=\"shell-footer-container\" *ngIf=\"config?.showFooter\">\r\n <div [class]=\"config?.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n <ng-container *ngIf=\"config?.customFooterComponent\">\r\n <div appDynamicComponentHost hostName=\"Footer\"></div>\r\n </ng-container>\r\n <lib-shell-footer *ngIf=\"!config?.customFooterComponent\"></lib-shell-footer>\r\n </div>\r\n</div>", components: [{ type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "show-alerts", "show-langs", "border"] }, { type: ShellFooterComponent, selector: "lib-shell-footer" }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { type: i1__namespace$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
|
|
3016
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellStackedLayoutComponent, decorators: [{
|
|
3017
|
+
type: i0.Component,
|
|
3018
|
+
args: [{
|
|
3019
|
+
selector: 'lib-shell-stacked-layout',
|
|
3020
|
+
templateUrl: './shell-stacked-layout.component.html'
|
|
3021
|
+
}]
|
|
3022
|
+
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
3023
|
+
type: i0.Input
|
|
3024
|
+
}] } });
|
|
3025
|
+
|
|
2966
3026
|
var ShellSidebarComponent = /** @class */ (function () {
|
|
2967
3027
|
function ShellSidebarComponent(router, route, links) {
|
|
2968
3028
|
this.router = router;
|
|
@@ -2982,7 +3042,7 @@
|
|
|
2982
3042
|
return ShellSidebarComponent;
|
|
2983
3043
|
}());
|
|
2984
3044
|
ShellSidebarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellSidebarComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: APP_LINKS }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2985
|
-
ShellSidebarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, ngImport: i0__namespace, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\r\n<div class=\"
|
|
3045
|
+
ShellSidebarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], shellConfig: ["config", "shellConfig"] }, ngImport: i0__namespace, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\r\n<div class=\"shell-sidebar-component-container\">\r\n <div class=\"shell-sidebar-component-links-container sidebar\">\r\n <lib-nav-links-list\r\n [show-icons]=\"true\"\r\n [links]=\"sectionLinks\"\r\n [active-fragment]=\"activeFragment\"\r\n [link-class]=\"'sidebar nav-link group'\"\r\n [link-active-class]=\"'sidebar nav-link-active group'\">\r\n </lib-nav-links-list>\r\n </div>\r\n</div>\r\n", components: [{ type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class", "show-icons"] }] });
|
|
2986
3046
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellSidebarComponent, decorators: [{
|
|
2987
3047
|
type: i0.Component,
|
|
2988
3048
|
args: [{
|
|
@@ -3008,6 +3068,69 @@
|
|
|
3008
3068
|
args: ['config']
|
|
3009
3069
|
}] } });
|
|
3010
3070
|
|
|
3071
|
+
var ShellSidebarHeaderComponent = /** @class */ (function (_super) {
|
|
3072
|
+
__extends(ShellSidebarHeaderComponent, _super);
|
|
3073
|
+
function ShellSidebarHeaderComponent(authService, router, route, config, links) {
|
|
3074
|
+
var _this = _super.call(this, authService, router, route, config, links) || this;
|
|
3075
|
+
_this.authService = authService;
|
|
3076
|
+
_this.router = router;
|
|
3077
|
+
_this.route = route;
|
|
3078
|
+
_this.config = config;
|
|
3079
|
+
_this.links = links;
|
|
3080
|
+
return _this;
|
|
3081
|
+
}
|
|
3082
|
+
return ShellSidebarHeaderComponent;
|
|
3083
|
+
}(ShellHeaderComponent));
|
|
3084
|
+
ShellSidebarHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellSidebarHeaderComponent, deps: [{ token: i2.AuthService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3085
|
+
ShellSidebarHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"shell-header-paddings\">\r\n <div class=\"shell-header-border\">\r\n <div class=\"shell-header-menu-container\">\r\n <div class=\"shell-header-md-visible\">\r\n <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n <!-- Profile dropdown -->\r\n <div *ngIf=\"profileMenuVisible\" class=\"ml-4\">\r\n <lib-user-profile-menu [show-user-name]=\"showUserNameOnHeader\"></lib-user-profile-menu>\r\n </div>\r\n <!-- Notifications dropdown -->\r\n <div *ngIf=\"showAlerts && user\" class=\"ml-4\">\r\n <lib-notifications-indicator></lib-notifications-indicator>\r\n </div>\r\n <!-- languages dropdown -->\r\n <div *ngIf=\"showLangs\" class=\"ml-4\">\r\n <lib-language-selection></lib-language-selection>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n \r\n", components: [{ type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: ["show-user-name"] }, { type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }, { type: LanguageSelectionComponent, selector: "lib-language-selection" }], directives: [{ type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
3086
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellSidebarHeaderComponent, decorators: [{
|
|
3087
|
+
type: i0.Component,
|
|
3088
|
+
args: [{
|
|
3089
|
+
selector: 'lib-shell-sidebar-header',
|
|
3090
|
+
templateUrl: './shell-sidebar-header.component.html'
|
|
3091
|
+
}]
|
|
3092
|
+
}], ctorParameters: function () {
|
|
3093
|
+
return [{ type: i2__namespace.AuthService, decorators: [{
|
|
3094
|
+
type: i0.Inject,
|
|
3095
|
+
args: [i2.AuthService]
|
|
3096
|
+
}] }, { type: i1__namespace$1.Router, decorators: [{
|
|
3097
|
+
type: i0.Inject,
|
|
3098
|
+
args: [i1$1.Router]
|
|
3099
|
+
}] }, { type: i1__namespace$1.ActivatedRoute, decorators: [{
|
|
3100
|
+
type: i0.Inject,
|
|
3101
|
+
args: [i1$1.ActivatedRoute]
|
|
3102
|
+
}] }, { type: undefined, decorators: [{
|
|
3103
|
+
type: i0.Inject,
|
|
3104
|
+
args: [SHELL_CONFIG]
|
|
3105
|
+
}] }, { type: undefined, decorators: [{
|
|
3106
|
+
type: i0.Inject,
|
|
3107
|
+
args: [APP_LINKS]
|
|
3108
|
+
}] }];
|
|
3109
|
+
} });
|
|
3110
|
+
|
|
3111
|
+
var ShellSidebarLayoutComponent = /** @class */ (function () {
|
|
3112
|
+
function ShellSidebarLayoutComponent() {
|
|
3113
|
+
this.showMobileSidebar = true;
|
|
3114
|
+
}
|
|
3115
|
+
ShellSidebarLayoutComponent.prototype.ngOnInit = function () {
|
|
3116
|
+
};
|
|
3117
|
+
ShellSidebarLayoutComponent.prototype.toggleMobileSidebar = function () {
|
|
3118
|
+
this.showMobileSidebar = !this.showMobileSidebar;
|
|
3119
|
+
};
|
|
3120
|
+
return ShellSidebarLayoutComponent;
|
|
3121
|
+
}());
|
|
3122
|
+
ShellSidebarLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellSidebarLayoutComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3123
|
+
ShellSidebarLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config" }, ngImport: i0__namespace, template: "<div>\r\n <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->\r\n <div class=\"sidebar-off-canvas-menu-container\" role=\"dialog\" aria-modal=\"true\">\r\n <!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state.-->\r\n <div class=\"sidebar-off-canvas-menu-backdrop\" \r\n [class.sidebar-off-canvas-menu-backdrop-opacity-100]=\"showMobileSidebar\">\r\n </div>\r\n \r\n <div class=\"sidebar-off-canvas-menu-container-inner\" \r\n [class.sidebar-off-canvas-menu-container-inner-active]=\"showMobileSidebar\" \r\n [class.sidebar-off-canvas-menu-container-inner-not-active]=\"!showMobileSidebar\">\r\n <!-- Off-canvas menu, show/hide based on off-canvas menu state.-->\r\n <div class=\"sidebar-off-canvas-layout-container\">\r\n <!--Close button, show/hide based on off-canvas menu state.-->\r\n <div class=\"sidebar-off-canvas-toggle-button-container\">\r\n <button type=\"button\" class=\"sidebar-off-canvas-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n <span class=\"sr-only\">Close sidebar</span>\r\n <!-- Heroicon name: outline/x -->\r\n <svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\r\n \r\n <div class=\"sidebar-off-canvas-app-logo-container\">\r\n <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n </div>\r\n\r\n <lib-shell-sidebar></lib-shell-sidebar>\r\n \r\n </div>\r\n \r\n <div class=\"sidebar-dummy-element\" aria-hidden=\"true\">\r\n <!-- Dummy element to force sidebar to shrink to fit close icon -->\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Static sidebar for desktop -->\r\n <div class=\"sidebar-static-menu-outer-container\">\r\n \r\n <div class=\"sidebar-static-menu-container\" \r\n [class.sidebar-static-menu-container-active]=\"showMobileSidebar\" \r\n [class.sidebar-static-menu-container-not-active]=\"!showMobileSidebar\">\r\n <!-- Sidebar component, swap this element with another sidebar if you like -->\r\n <div class=\"sidebar-static-menu-container-inner\">\r\n <div class=\"sidebar-static-menu-app-logo-container\">\r\n <img class=\"h-8 w-auto\" [src]=\"config?.appLogo\" [alt]=\"config?.appLogoAlt\">\r\n </div>\r\n <lib-shell-sidebar></lib-shell-sidebar>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sidebar-static-menu-wrapper\" [class.sidebar-static-menu-wrapper-active]=\"showMobileSidebar\">\r\n <div class=\"sidebar-static-menu-toggle-button-container\">\r\n <button type=\"button\" class=\"sidebar-static-menu-toggle-button\" (click)=\"showMobileSidebar = !showMobileSidebar\">\r\n <span class=\"sr-only\">Toggle sidebar</span>\r\n <!-- Heroicon name: outline/menu-alt-2 -->\r\n <svg class=\"h-6 w-6\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h7\" />\r\n </svg>\r\n </button>\r\n \r\n <!-- sidebar-static-menu-header-container -->\r\n <div class=\"sidebar-static-menu-header-container\">\r\n <div class=\"sidebar-static-menu-header-near-container\">\r\n \r\n </div>\r\n <div class=\"sidebar-static-menu-header-far-container\">\r\n <lib-shell-sidebar-header \r\n [show-userName]=\"config?.showUserNameOnHeader\"\r\n [show-alerts]=\"config?.showAlertsOnHeader\" \r\n [show-langs]=\"config?.showLangsOnHeader\"></lib-shell-sidebar-header>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div flex-1>\r\n <main class=\"shell-content-container-fluid\">\r\n <div class=\"shell-content-container-inner\">\r\n <!-- YOU NEED TO ADD/REMOVE THIS FROM DOM DEPENDING ON THE SELECTED LAYOUT ESPECIALLY IN THE CASE OF LAYOUT SWITCHING!!! -->\r\n <router-outlet *ngIf=\"(config && config.layout === 'Sidebar')\"></router-outlet>\r\n </div>\r\n </main>\r\n </div>\r\n </div>\r\n </div>", components: [{ type: ShellSidebarComponent, selector: "lib-shell-sidebar", inputs: ["section-links", "config"] }, { type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header" }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
|
|
3124
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellSidebarLayoutComponent, decorators: [{
|
|
3125
|
+
type: i0.Component,
|
|
3126
|
+
args: [{
|
|
3127
|
+
selector: 'lib-shell-sidebar-layout',
|
|
3128
|
+
templateUrl: './shell-sidebar-layout.component.html'
|
|
3129
|
+
}]
|
|
3130
|
+
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
3131
|
+
type: i0.Input
|
|
3132
|
+
}] } });
|
|
3133
|
+
|
|
3011
3134
|
var ShellLayoutComponent = /** @class */ (function () {
|
|
3012
3135
|
function ShellLayoutComponent(document, router, location, config, componentLoaderFactory) {
|
|
3013
3136
|
this.document = document;
|
|
@@ -3083,7 +3206,7 @@
|
|
|
3083
3206
|
return ShellLayoutComponent;
|
|
3084
3207
|
}());
|
|
3085
3208
|
ShellLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellLayoutComponent, deps: [{ token: i1.DOCUMENT }, { token: i1__namespace$1.Router }, { token: i1__namespace.Location }, { token: SHELL_CONFIG }, { token: ComponentLoaderFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3086
|
-
ShellLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0__namespace, template: "<div
|
|
3209
|
+
ShellLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0__namespace, template: "<div [class.none]=\"!loaded\" [class.block]=\"loaded\">\r\n\r\n <!-- STACKED LAYOUT -->\r\n <div *ngIf=\"(activeConfig.layout === 'Stacked' || !activeConfig.layout)\" class=\"shell-container active-side-pane\">\r\n <lib-shell-stacked-layout [config]=\"activeConfig\"></lib-shell-stacked-layout>\r\n </div>\r\n\r\n <!-- SIDEBAR LAYOUT -->\r\n <div *ngIf=\"activeConfig.layout === 'Sidebar'\" class=\"sidebar shell-container active-side-pane\">\r\n <lib-shell-sidebar-layout [config]=\"activeConfig\"></lib-shell-sidebar-layout>\r\n </div>\r\n\r\n <lib-side-pane #rightPane>\r\n <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n </lib-side-pane>\r\n\r\n <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>", components: [{ type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: ["config"] }, { type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: ["config"] }, { type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { type: ToasterContainerComponent, selector: "lib-toaster-container" }], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
|
|
3087
3210
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ShellLayoutComponent, decorators: [{
|
|
3088
3211
|
type: i0.Component,
|
|
3089
3212
|
args: [{
|
|
@@ -3448,7 +3571,6 @@
|
|
|
3448
3571
|
this.authService.signinRedirectCallback().subscribe(function (user) {
|
|
3449
3572
|
var _a;
|
|
3450
3573
|
if (user) {
|
|
3451
|
-
debugger;
|
|
3452
3574
|
_this.router.navigateByUrl(((_a = user.state) === null || _a === void 0 ? void 0 : _a.url) || '/');
|
|
3453
3575
|
}
|
|
3454
3576
|
});
|
|
@@ -4362,7 +4484,10 @@
|
|
|
4362
4484
|
LibStepperComponent,
|
|
4363
4485
|
LibStepComponent,
|
|
4364
4486
|
LibStepLabelDirective,
|
|
4365
|
-
LibStepInfoDirective
|
|
4487
|
+
LibStepInfoDirective,
|
|
4488
|
+
ShellSidebarHeaderComponent,
|
|
4489
|
+
ShellSidebarLayoutComponent,
|
|
4490
|
+
ShellStackedLayoutComponent
|
|
4366
4491
|
], imports: [i1.CommonModule,
|
|
4367
4492
|
i1$1.RouterModule,
|
|
4368
4493
|
i2.IndiceAuthModule], exports: [AddressPipe,
|
|
@@ -4466,7 +4591,10 @@
|
|
|
4466
4591
|
LibStepperComponent,
|
|
4467
4592
|
LibStepComponent,
|
|
4468
4593
|
LibStepLabelDirective,
|
|
4469
|
-
LibStepInfoDirective
|
|
4594
|
+
LibStepInfoDirective,
|
|
4595
|
+
ShellSidebarHeaderComponent,
|
|
4596
|
+
ShellSidebarLayoutComponent,
|
|
4597
|
+
ShellStackedLayoutComponent
|
|
4470
4598
|
],
|
|
4471
4599
|
imports: [
|
|
4472
4600
|
i1.CommonModule,
|
|
@@ -4579,6 +4707,8 @@
|
|
|
4579
4707
|
exports.ShellFooterComponent = ShellFooterComponent;
|
|
4580
4708
|
exports.ShellHeaderComponent = ShellHeaderComponent;
|
|
4581
4709
|
exports.ShellLayoutComponent = ShellLayoutComponent;
|
|
4710
|
+
exports.ShellSidebarComponent = ShellSidebarComponent;
|
|
4711
|
+
exports.ShellSidebarHeaderComponent = ShellSidebarHeaderComponent;
|
|
4582
4712
|
exports.SidePaneComponent = SidePaneComponent;
|
|
4583
4713
|
exports.SideViewLayoutComponent = SideViewLayoutComponent;
|
|
4584
4714
|
exports.SkeletonLoaderComponent = SkeletonLoaderComponent;
|