@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
|
@@ -1749,13 +1749,11 @@ class LibStepComponent {
|
|
|
1749
1749
|
}
|
|
1750
1750
|
/** Indicates the index of the step. */
|
|
1751
1751
|
get index() {
|
|
1752
|
-
|
|
1753
|
-
return (_a = this._stepper) === null || _a === void 0 ? void 0 : _a.steps.toArray().indexOf(this);
|
|
1752
|
+
return this._stepper ? this._stepper.steps.toArray().indexOf(this) : -1;
|
|
1754
1753
|
}
|
|
1755
1754
|
/** Indicates whether this step is the last step. */
|
|
1756
1755
|
get isLast() {
|
|
1757
|
-
|
|
1758
|
-
return ((_a = this._stepper) === null || _a === void 0 ? void 0 : _a.steps.length) - 1 === this.index;
|
|
1756
|
+
return this._stepper ? this._stepper.steps.length - 1 === this.index : false;
|
|
1759
1757
|
}
|
|
1760
1758
|
/** Indicates whether you can navigate to the step or not. */
|
|
1761
1759
|
get isValid() {
|
|
@@ -1828,11 +1826,15 @@ var StepperType;
|
|
|
1828
1826
|
})(StepperType || (StepperType = {}));
|
|
1829
1827
|
|
|
1830
1828
|
class LibStepperComponent {
|
|
1831
|
-
constructor() {
|
|
1829
|
+
constructor(_changeDetectorRef) {
|
|
1830
|
+
this._changeDetectorRef = _changeDetectorRef;
|
|
1832
1831
|
// Private properties.
|
|
1833
1832
|
this._currentStepIndex = 0;
|
|
1833
|
+
this._isCompleted = false;
|
|
1834
1834
|
/** Emmited when a step change occurs. */
|
|
1835
1835
|
this.stepChanged = new EventEmitter();
|
|
1836
|
+
/** Emmited when the stepper navigates away from the final step. Only emits once. */
|
|
1837
|
+
this.completed = new EventEmitter();
|
|
1836
1838
|
/** Indicates whether each step has to be validated before proceeding to the next. */
|
|
1837
1839
|
this.linear = false;
|
|
1838
1840
|
/** The type of the stepper. */
|
|
@@ -1849,19 +1851,38 @@ class LibStepperComponent {
|
|
|
1849
1851
|
get currentStepIndex() {
|
|
1850
1852
|
return this._currentStepIndex;
|
|
1851
1853
|
}
|
|
1854
|
+
/** Indicates whether stepper can go a step back. */
|
|
1855
|
+
get canGoBack() {
|
|
1856
|
+
return this._currentStepIndex > 0;
|
|
1857
|
+
}
|
|
1858
|
+
/** Indicates whether stepper can go a step forward. */
|
|
1859
|
+
get canGoForward() {
|
|
1860
|
+
var _a;
|
|
1861
|
+
return this._currentStepIndex < ((_a = this.steps) === null || _a === void 0 ? void 0 : _a.length) - 1;
|
|
1862
|
+
}
|
|
1863
|
+
/** Indicates whether */
|
|
1864
|
+
get isCompleted() {
|
|
1865
|
+
return this._isCompleted;
|
|
1866
|
+
}
|
|
1852
1867
|
ngOnInit() { }
|
|
1868
|
+
ngAfterViewChecked() {
|
|
1869
|
+
this._changeDetectorRef.detectChanges();
|
|
1870
|
+
}
|
|
1853
1871
|
/** Proceeds to the next step, if any. */
|
|
1854
1872
|
goToNextStep() {
|
|
1855
|
-
|
|
1856
|
-
if (this.
|
|
1873
|
+
var _a;
|
|
1874
|
+
if (((_a = this.currentStep) === null || _a === void 0 ? void 0 : _a.isLast) && !this._isCompleted) {
|
|
1875
|
+
this._isCompleted = true;
|
|
1876
|
+
this.completed.emit();
|
|
1877
|
+
}
|
|
1878
|
+
if (!this.canGoForward) {
|
|
1857
1879
|
return;
|
|
1858
1880
|
}
|
|
1859
1881
|
this.updateCurrentStepIndex(this._currentStepIndex + 1);
|
|
1860
1882
|
}
|
|
1861
1883
|
/** Proceeds to the previous step, if any. */
|
|
1862
1884
|
goToPreviousStep() {
|
|
1863
|
-
|
|
1864
|
-
if (this._currentStepIndex === 0) {
|
|
1885
|
+
if (!this.canGoBack) {
|
|
1865
1886
|
return;
|
|
1866
1887
|
}
|
|
1867
1888
|
this.updateCurrentStepIndex(this._currentStepIndex - 1);
|
|
@@ -1887,10 +1908,10 @@ class LibStepperComponent {
|
|
|
1887
1908
|
this._currentStepIndex = newIndex;
|
|
1888
1909
|
}
|
|
1889
1910
|
}
|
|
1890
|
-
LibStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1891
|
-
LibStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LibStepperComponent, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged" }, providers: [
|
|
1911
|
+
LibStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1912
|
+
LibStepperComponent.ɵcmp = i0.ɵɵ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: [
|
|
1892
1913
|
{ provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
|
|
1893
|
-
], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0, 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
1914
|
+
], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0, 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
1894
1915
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LibStepperComponent, decorators: [{
|
|
1895
1916
|
type: Component,
|
|
1896
1917
|
args: [{
|
|
@@ -1900,11 +1921,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
1900
1921
|
{ provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
|
|
1901
1922
|
]
|
|
1902
1923
|
}]
|
|
1903
|
-
}], ctorParameters: function () { return []; }, propDecorators: { steps: [{
|
|
1924
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { steps: [{
|
|
1904
1925
|
type: ContentChildren,
|
|
1905
1926
|
args: [LibStepComponent, { descendants: true }]
|
|
1906
1927
|
}], stepChanged: [{
|
|
1907
1928
|
type: Output
|
|
1929
|
+
}], completed: [{
|
|
1930
|
+
type: Output
|
|
1908
1931
|
}], linear: [{
|
|
1909
1932
|
type: Input
|
|
1910
1933
|
}], type: [{
|
|
@@ -2201,7 +2224,7 @@ class UserProfileMenuComponent {
|
|
|
2201
2224
|
}
|
|
2202
2225
|
}
|
|
2203
2226
|
UserProfileMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UserProfileMenuComponent, deps: [{ token: AuthService }, { token: Router }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2204
|
-
UserProfileMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0, template: "<div class=\"relative\" (clickOutside)=\"onClickOutside($event)\"
|
|
2227
|
+
UserProfileMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UserProfileMenuComponent, selector: "lib-user-profile-menu", inputs: { showUserName: ["show-user-name", "showUserName"] }, ngImport: i0, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2205
2228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UserProfileMenuComponent, decorators: [{
|
|
2206
2229
|
type: Component,
|
|
2207
2230
|
args: [{
|
|
@@ -2238,20 +2261,26 @@ class NotificationsIndicatorComponent {
|
|
|
2238
2261
|
}
|
|
2239
2262
|
}
|
|
2240
2263
|
ngOnInit() {
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2264
|
+
var _a;
|
|
2265
|
+
if (this.links && this.links['notifications']) {
|
|
2266
|
+
this.links['notifications'].subscribe(notificationsLink => {
|
|
2267
|
+
this.allNotificationsLink = notificationsLink;
|
|
2268
|
+
});
|
|
2269
|
+
}
|
|
2270
|
+
if (this.notifications) {
|
|
2271
|
+
this.notificationsSub$ = (_a = this.notifications) === null || _a === void 0 ? void 0 : _a.messages.subscribe(result => {
|
|
2272
|
+
if (result.items) {
|
|
2273
|
+
this.newArrival = true;
|
|
2274
|
+
this.unreadCount = result.count;
|
|
2275
|
+
this.items = result.items;
|
|
2276
|
+
setTimeout(() => { this.newArrival = false; }, 1000);
|
|
2277
|
+
}
|
|
2278
|
+
});
|
|
2279
|
+
}
|
|
2252
2280
|
}
|
|
2253
2281
|
doInboxAction() {
|
|
2254
|
-
|
|
2282
|
+
var _a;
|
|
2283
|
+
if ((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.inboxAction) {
|
|
2255
2284
|
this.notifications.inboxAction();
|
|
2256
2285
|
}
|
|
2257
2286
|
else {
|
|
@@ -2338,7 +2367,7 @@ class ShellHeaderComponent {
|
|
|
2338
2367
|
// tslint:disable-next-line:no-input-rename
|
|
2339
2368
|
this.showAlerts = false;
|
|
2340
2369
|
// tslint:disable-next-line:no-input-rename
|
|
2341
|
-
this.
|
|
2370
|
+
this.showLangs = false;
|
|
2342
2371
|
this.border = true;
|
|
2343
2372
|
this.sectionLinks = of([]);
|
|
2344
2373
|
this.mobileMenuExpanded = false;
|
|
@@ -2400,7 +2429,7 @@ class ShellHeaderComponent {
|
|
|
2400
2429
|
}
|
|
2401
2430
|
}
|
|
2402
2431
|
ShellHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2403
|
-
ShellHeaderComponent.ɵcmp = i0.ɵɵ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"],
|
|
2432
|
+
ShellHeaderComponent.ɵcmp = i0.ɵɵ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, 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$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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2404
2433
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellHeaderComponent, decorators: [{
|
|
2405
2434
|
type: Component,
|
|
2406
2435
|
args: [{
|
|
@@ -2435,9 +2464,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
2435
2464
|
}], showAlerts: [{
|
|
2436
2465
|
type: Input,
|
|
2437
2466
|
args: ['show-alerts']
|
|
2438
|
-
}],
|
|
2467
|
+
}], showLangs: [{
|
|
2439
2468
|
type: Input,
|
|
2440
|
-
args: ['
|
|
2469
|
+
args: ['show-langs']
|
|
2441
2470
|
}], border: [{
|
|
2442
2471
|
type: Input
|
|
2443
2472
|
}] } });
|
|
@@ -2460,6 +2489,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
2460
2489
|
args: [APP_LINKS]
|
|
2461
2490
|
}] }]; } });
|
|
2462
2491
|
|
|
2492
|
+
class ShellStackedLayoutComponent {
|
|
2493
|
+
constructor() { }
|
|
2494
|
+
ngOnInit() {
|
|
2495
|
+
}
|
|
2496
|
+
}
|
|
2497
|
+
ShellStackedLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellStackedLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2498
|
+
ShellStackedLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellStackedLayoutComponent, selector: "lib-shell-stacked-layout", inputs: { config: "config" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
|
|
2499
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellStackedLayoutComponent, decorators: [{
|
|
2500
|
+
type: Component,
|
|
2501
|
+
args: [{
|
|
2502
|
+
selector: 'lib-shell-stacked-layout',
|
|
2503
|
+
templateUrl: './shell-stacked-layout.component.html'
|
|
2504
|
+
}]
|
|
2505
|
+
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
2506
|
+
type: Input
|
|
2507
|
+
}] } });
|
|
2508
|
+
|
|
2463
2509
|
class ShellSidebarComponent {
|
|
2464
2510
|
constructor(router, route, links) {
|
|
2465
2511
|
this.router = router;
|
|
@@ -2478,7 +2524,7 @@ class ShellSidebarComponent {
|
|
|
2478
2524
|
}
|
|
2479
2525
|
}
|
|
2480
2526
|
ShellSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellSidebarComponent, deps: [{ token: Router }, { token: ActivatedRoute }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2481
|
-
ShellSidebarComponent.ɵcmp = i0.ɵɵ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, template: "<!-- Sidebar component, swap this element with another sidebar if you like -->\r\n<div class=\"
|
|
2527
|
+
ShellSidebarComponent.ɵcmp = i0.ɵɵ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, 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"] }] });
|
|
2482
2528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellSidebarComponent, decorators: [{
|
|
2483
2529
|
type: Component,
|
|
2484
2530
|
args: [{
|
|
@@ -2502,6 +2548,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
2502
2548
|
args: ['config']
|
|
2503
2549
|
}] } });
|
|
2504
2550
|
|
|
2551
|
+
class ShellSidebarHeaderComponent extends ShellHeaderComponent {
|
|
2552
|
+
constructor(authService, router, route, config, links) {
|
|
2553
|
+
super(authService, router, route, config, links);
|
|
2554
|
+
this.authService = authService;
|
|
2555
|
+
this.router = router;
|
|
2556
|
+
this.route = route;
|
|
2557
|
+
this.config = config;
|
|
2558
|
+
this.links = links;
|
|
2559
|
+
}
|
|
2560
|
+
}
|
|
2561
|
+
ShellSidebarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellSidebarHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
|
|
2562
|
+
ShellSidebarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellSidebarHeaderComponent, selector: "lib-shell-sidebar-header", usesInheritance: true, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2563
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellSidebarHeaderComponent, decorators: [{
|
|
2564
|
+
type: Component,
|
|
2565
|
+
args: [{
|
|
2566
|
+
selector: 'lib-shell-sidebar-header',
|
|
2567
|
+
templateUrl: './shell-sidebar-header.component.html'
|
|
2568
|
+
}]
|
|
2569
|
+
}], ctorParameters: function () { return [{ type: i2.AuthService, decorators: [{
|
|
2570
|
+
type: Inject,
|
|
2571
|
+
args: [AuthService]
|
|
2572
|
+
}] }, { type: i1$1.Router, decorators: [{
|
|
2573
|
+
type: Inject,
|
|
2574
|
+
args: [Router]
|
|
2575
|
+
}] }, { type: i1$1.ActivatedRoute, decorators: [{
|
|
2576
|
+
type: Inject,
|
|
2577
|
+
args: [ActivatedRoute]
|
|
2578
|
+
}] }, { type: undefined, decorators: [{
|
|
2579
|
+
type: Inject,
|
|
2580
|
+
args: [SHELL_CONFIG]
|
|
2581
|
+
}] }, { type: undefined, decorators: [{
|
|
2582
|
+
type: Inject,
|
|
2583
|
+
args: [APP_LINKS]
|
|
2584
|
+
}] }]; } });
|
|
2585
|
+
|
|
2586
|
+
class ShellSidebarLayoutComponent {
|
|
2587
|
+
constructor() {
|
|
2588
|
+
this.showMobileSidebar = true;
|
|
2589
|
+
}
|
|
2590
|
+
ngOnInit() {
|
|
2591
|
+
}
|
|
2592
|
+
toggleMobileSidebar() {
|
|
2593
|
+
this.showMobileSidebar = !this.showMobileSidebar;
|
|
2594
|
+
}
|
|
2595
|
+
}
|
|
2596
|
+
ShellSidebarLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellSidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2597
|
+
ShellSidebarLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellSidebarLayoutComponent, selector: "lib-shell-sidebar-layout", inputs: { config: "config" }, ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
|
|
2598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellSidebarLayoutComponent, decorators: [{
|
|
2599
|
+
type: Component,
|
|
2600
|
+
args: [{
|
|
2601
|
+
selector: 'lib-shell-sidebar-layout',
|
|
2602
|
+
templateUrl: './shell-sidebar-layout.component.html'
|
|
2603
|
+
}]
|
|
2604
|
+
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
2605
|
+
type: Input
|
|
2606
|
+
}] } });
|
|
2607
|
+
|
|
2505
2608
|
class ShellLayoutComponent {
|
|
2506
2609
|
constructor(document, router, location, config, componentLoaderFactory) {
|
|
2507
2610
|
this.document = document;
|
|
@@ -2574,7 +2677,7 @@ class ShellLayoutComponent {
|
|
|
2574
2677
|
}
|
|
2575
2678
|
}
|
|
2576
2679
|
ShellLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellLayoutComponent, deps: [{ token: DOCUMENT }, { token: i1$1.Router }, { token: i1.Location }, { token: SHELL_CONFIG }, { token: ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Component });
|
|
2577
|
-
ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div
|
|
2680
|
+
ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
|
|
2578
2681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ShellLayoutComponent, decorators: [{
|
|
2579
2682
|
type: Component,
|
|
2580
2683
|
args: [{
|
|
@@ -2930,7 +3033,6 @@ class AuthCallbackComponent {
|
|
|
2930
3033
|
this.authService.signinRedirectCallback().subscribe((user) => {
|
|
2931
3034
|
var _a;
|
|
2932
3035
|
if (user) {
|
|
2933
|
-
debugger;
|
|
2934
3036
|
this.router.navigateByUrl(((_a = user.state) === null || _a === void 0 ? void 0 : _a.url) || '/');
|
|
2935
3037
|
}
|
|
2936
3038
|
});
|
|
@@ -3813,7 +3915,10 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
|
|
|
3813
3915
|
LibStepperComponent,
|
|
3814
3916
|
LibStepComponent,
|
|
3815
3917
|
LibStepLabelDirective,
|
|
3816
|
-
LibStepInfoDirective
|
|
3918
|
+
LibStepInfoDirective,
|
|
3919
|
+
ShellSidebarHeaderComponent,
|
|
3920
|
+
ShellSidebarLayoutComponent,
|
|
3921
|
+
ShellStackedLayoutComponent], imports: [CommonModule,
|
|
3817
3922
|
RouterModule,
|
|
3818
3923
|
IndiceAuthModule], exports: [AddressPipe,
|
|
3819
3924
|
AuthCallbackComponent,
|
|
@@ -3916,7 +4021,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
3916
4021
|
LibStepperComponent,
|
|
3917
4022
|
LibStepComponent,
|
|
3918
4023
|
LibStepLabelDirective,
|
|
3919
|
-
LibStepInfoDirective
|
|
4024
|
+
LibStepInfoDirective,
|
|
4025
|
+
ShellSidebarHeaderComponent,
|
|
4026
|
+
ShellSidebarLayoutComponent,
|
|
4027
|
+
ShellStackedLayoutComponent
|
|
3920
4028
|
],
|
|
3921
4029
|
imports: [
|
|
3922
4030
|
CommonModule,
|
|
@@ -3973,5 +4081,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
3973
4081
|
* Generated bundle index. Do not edit.
|
|
3974
4082
|
*/
|
|
3975
4083
|
|
|
3976
|
-
export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
|
|
4084
|
+
export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
|
|
3977
4085
|
//# sourceMappingURL=indice-ng-components.js.map
|