| - + |
| Name | -Type | -Optional | -
| val | -
- string
- |
-
- - No - | - - -
| type | -
- "mm" | "ss"
- |
-
- - No - | - - -
void
-
- | Name | +Type | +Optional | +
| val | +
+ string
+ |
+
+ + No + | + + +
| type | +
+ "mm" | "ss"
+ |
+
+ + No + | + + +
void
+
+ import { Component, ElementRef, Input, OnInit, ViewChild } from "@angular/core";
import { FlowTypes } from "data-models";
import {
@@ -508,7 +570,7 @@
import { ITemplateRowProps } from "../../models";
import { AudioService } from "src/app/shared/services/audio/audio.service";
import { AudioPlayer } from "src/app/shared/services/audio/audio.player";
-import { TemplateAssetService } from "../../services/template-asset.service";
+import { PLHAssetPipe } from "../../pipes/plh-asset.pipe";
@Component({
selector: "plh-timer",
@@ -523,6 +585,9 @@
@Input() template: FlowTypes.Template;
@ViewChild("min", { static: false }) minInput: ElementRef;
@ViewChild("sec", { static: false }) secInput: ElementRef;
+ playIcon: string;
+ pauseIcon: string;
+ resetIcon: string;
state: TimerState;
leftButtonAction: string;
leftButtonIcon: string;
@@ -570,7 +635,7 @@
private pickerController: PickerController,
private platform: Platform,
private audioService: AudioService,
- private templateAssetService: TemplateAssetService
+ private plhAssetPipe: PLHAssetPipe
) {
super();
this.changeState(new PausedState(this));
@@ -580,7 +645,7 @@
this.getParams();
this.state.callOnInit();
if (this.ping) {
- const pingSrc = this.templateAssetService.getTranslatedAssetPath(this.ping);
+ const pingSrc = this.plhAssetPipe.transform(this.ping);
this.player = this.audioService.createPlayer(pingSrc);
}
}
@@ -593,6 +658,9 @@
this.title = getStringParamFromTemplateRow(this._row, "title", "Timer");
this.help = getStringParamFromTemplateRow(this._row, "help", null);
this.ping = getStringParamFromTemplateRow(this._row, "ping", null);
+ this.playIcon = this.getAssetParamFromTemplateRow("play_icon_asset", "play-outline");
+ this.pauseIcon = this.getAssetParamFromTemplateRow("pause_icon_asset", "pause-outline");
+ this.resetIcon = this.getAssetParamFromTemplateRow("reset_icon_asset", "sync-outline");
this.timerDurationExtension =
getNumberParamFromTemplateRow(this._row, "duration_extension", 1) * 60;
this.is_editable_on_playing = getBooleanParamFromTemplateRow(
@@ -605,6 +673,11 @@
this.value = this.getDurationFromParams();
}
+ getAssetParamFromTemplateRow(parameterName: string, _default: string | null) {
+ const value = getStringParamFromTemplateRow(this._row, parameterName, null);
+ return value ? this.plhAssetPipe.transform(value) : _default;
+ }
+
getDurationFromParams() {
return this._row.value ? this._row.value : this.starting_minutes * 60 + this.starting_seconds;
}
@@ -736,10 +809,8 @@
constructor(timer: TmplTimerComponent) {
super(timer);
this.timer.leftButtonAction = "pause";
- this.timer.leftButtonIcon = "pause-outline";
this.timer.leftButtonName = "pause_timer";
this.timer.rightButtonAction = "increase";
- this.timer.rightButtonIcon = "reload-outline";
this.timer.rightButtonName = "increase_timer";
this.timer.timerStarted = true;
this.timer.isTimerEditable = this.timer.is_editable_on_playing;
@@ -772,10 +843,8 @@
constructor(timer: TmplTimerComponent) {
super(timer);
this.timer.leftButtonAction = "play";
- this.timer.leftButtonIcon = "play-outline";
this.timer.leftButtonName = "play_timer";
this.timer.rightButtonAction = "refresh";
- this.timer.rightButtonIcon = "sync-outline";
this.timer.rightButtonName = "refresh_timer";
this.timer.timerStarted = false;
this.timer.isTimerEditable = true;
diff --git a/documentation/docs/generated/classes/PlayingState.html b/documentation/docs/generated/classes/PlayingState.html
index 0587311eaf..08c4e5a5bc 100644
--- a/documentation/docs/generated/classes/PlayingState.html
+++ b/documentation/docs/generated/classes/PlayingState.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -44,21 +102,27 @@
- - Classes
- - PlayingState
+ - Classes
+ - PlayingState
-
+
File
@@ -72,12 +136,12 @@ File
Extends
-
+
Index
@@ -135,7 +199,7 @@ Methods
-
+
Constructor
@@ -146,7 +210,7 @@ Constructor
-
+
@@ -184,7 +248,7 @@ Constructor
-
+
Properties
@@ -215,7 +279,7 @@
-
@@ -225,7 +289,7 @@
-
+
Methods
@@ -248,27 +312,27 @@
-
-
-
+
-
@@ -291,27 +355,27 @@
-
-
-
+
-
@@ -334,21 +398,21 @@
-
-
-
-
-
+
+
+
+
+
-
@@ -371,27 +435,27 @@
-
-
-
+
-
@@ -414,27 +478,27 @@
-
-
-
+
-
@@ -457,71 +521,69 @@
-
-
-
+
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- val
-
- string
-
-
-
- No
-
-
-
-
-
- type
-
- "mm" | "ss"
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : void
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ val
+
+ string
+
+
+
+ No
+
+
+
+
+
+ type
+
+ "mm" | "ss"
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : void
+
+
+
+
+
@@ -535,7 +597,7 @@
-
+
import { Component, ElementRef, Input, OnInit, ViewChild } from "@angular/core";
import { FlowTypes } from "data-models";
import {
@@ -548,7 +610,7 @@
import { ITemplateRowProps } from "../../models";
import { AudioService } from "src/app/shared/services/audio/audio.service";
import { AudioPlayer } from "src/app/shared/services/audio/audio.player";
-import { TemplateAssetService } from "../../services/template-asset.service";
+import { PLHAssetPipe } from "../../pipes/plh-asset.pipe";
@Component({
selector: "plh-timer",
@@ -563,6 +625,9 @@
@Input() template: FlowTypes.Template;
@ViewChild("min", { static: false }) minInput: ElementRef;
@ViewChild("sec", { static: false }) secInput: ElementRef;
+ playIcon: string;
+ pauseIcon: string;
+ resetIcon: string;
state: TimerState;
leftButtonAction: string;
leftButtonIcon: string;
@@ -610,7 +675,7 @@
private pickerController: PickerController,
private platform: Platform,
private audioService: AudioService,
- private templateAssetService: TemplateAssetService
+ private plhAssetPipe: PLHAssetPipe
) {
super();
this.changeState(new PausedState(this));
@@ -620,7 +685,7 @@
this.getParams();
this.state.callOnInit();
if (this.ping) {
- const pingSrc = this.templateAssetService.getTranslatedAssetPath(this.ping);
+ const pingSrc = this.plhAssetPipe.transform(this.ping);
this.player = this.audioService.createPlayer(pingSrc);
}
}
@@ -633,6 +698,9 @@
this.title = getStringParamFromTemplateRow(this._row, "title", "Timer");
this.help = getStringParamFromTemplateRow(this._row, "help", null);
this.ping = getStringParamFromTemplateRow(this._row, "ping", null);
+ this.playIcon = this.getAssetParamFromTemplateRow("play_icon_asset", "play-outline");
+ this.pauseIcon = this.getAssetParamFromTemplateRow("pause_icon_asset", "pause-outline");
+ this.resetIcon = this.getAssetParamFromTemplateRow("reset_icon_asset", "sync-outline");
this.timerDurationExtension =
getNumberParamFromTemplateRow(this._row, "duration_extension", 1) * 60;
this.is_editable_on_playing = getBooleanParamFromTemplateRow(
@@ -645,6 +713,11 @@
this.value = this.getDurationFromParams();
}
+ getAssetParamFromTemplateRow(parameterName: string, _default: string | null) {
+ const value = getStringParamFromTemplateRow(this._row, parameterName, null);
+ return value ? this.plhAssetPipe.transform(value) : _default;
+ }
+
getDurationFromParams() {
return this._row.value ? this._row.value : this.starting_minutes * 60 + this.starting_seconds;
}
@@ -776,10 +849,8 @@
constructor(timer: TmplTimerComponent) {
super(timer);
this.timer.leftButtonAction = "pause";
- this.timer.leftButtonIcon = "pause-outline";
this.timer.leftButtonName = "pause_timer";
this.timer.rightButtonAction = "increase";
- this.timer.rightButtonIcon = "reload-outline";
this.timer.rightButtonName = "increase_timer";
this.timer.timerStarted = true;
this.timer.isTimerEditable = this.timer.is_editable_on_playing;
@@ -812,10 +883,8 @@
constructor(timer: TmplTimerComponent) {
super(timer);
this.timer.leftButtonAction = "play";
- this.timer.leftButtonIcon = "play-outline";
this.timer.leftButtonName = "play_timer";
this.timer.rightButtonAction = "refresh";
- this.timer.rightButtonIcon = "sync-outline";
this.timer.rightButtonName = "refresh_timer";
this.timer.timerStarted = false;
this.timer.isTimerEditable = true;
diff --git a/documentation/docs/generated/classes/State.html b/documentation/docs/generated/classes/State.html
index 874f86788d..93551d5cba 100644
--- a/documentation/docs/generated/classes/State.html
+++ b/documentation/docs/generated/classes/State.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -44,21 +102,27 @@
- - Classes
- - State
+ - Classes
+ - State
-
+
File
@@ -71,7 +135,7 @@ File
-
+
Index
@@ -126,7 +190,7 @@ Methods
-
+
Constructor
@@ -137,7 +201,7 @@ Constructor
-
+
@@ -175,7 +239,7 @@ Constructor
-
+
Properties
@@ -200,7 +264,7 @@
-
+
@@ -209,7 +273,7 @@
-
+
Methods
@@ -232,21 +296,21 @@
-
-
-
-
-
+
+
+
+
+
-
@@ -269,21 +333,21 @@
-
-
-
-
-
+
+
+
+
+
-
@@ -306,21 +370,21 @@
-
-
-
-
-
+
+
+
+
+
-
@@ -343,21 +407,21 @@
-
-
-
-
-
+
+
+
+
+
-
@@ -380,65 +444,63 @@
-
-
-
-
-
+
+
+
+
+
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- val
-
- string
-
-
-
- No
-
-
-
-
-
- type
-
- "mm" | "ss"
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : void
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ val
+
+ string
+
+
+
+ No
+
+
+
+
+
+ type
+
+ "mm" | "ss"
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : void
+
+
+
+
+
@@ -452,7 +514,7 @@
-
+
import { Component, ElementRef, Input, OnInit, ViewChild } from "@angular/core";
import { FlowTypes } from "data-models";
import {
@@ -465,7 +527,7 @@
import { ITemplateRowProps } from "../../models";
import { AudioService } from "src/app/shared/services/audio/audio.service";
import { AudioPlayer } from "src/app/shared/services/audio/audio.player";
-import { TemplateAssetService } from "../../services/template-asset.service";
+import { PLHAssetPipe } from "../../pipes/plh-asset.pipe";
@Component({
selector: "plh-timer",
@@ -480,6 +542,9 @@
@Input() template: FlowTypes.Template;
@ViewChild("min", { static: false }) minInput: ElementRef;
@ViewChild("sec", { static: false }) secInput: ElementRef;
+ playIcon: string;
+ pauseIcon: string;
+ resetIcon: string;
state: TimerState;
leftButtonAction: string;
leftButtonIcon: string;
@@ -527,7 +592,7 @@
private pickerController: PickerController,
private platform: Platform,
private audioService: AudioService,
- private templateAssetService: TemplateAssetService
+ private plhAssetPipe: PLHAssetPipe
) {
super();
this.changeState(new PausedState(this));
@@ -537,7 +602,7 @@
this.getParams();
this.state.callOnInit();
if (this.ping) {
- const pingSrc = this.templateAssetService.getTranslatedAssetPath(this.ping);
+ const pingSrc = this.plhAssetPipe.transform(this.ping);
this.player = this.audioService.createPlayer(pingSrc);
}
}
@@ -550,6 +615,9 @@
this.title = getStringParamFromTemplateRow(this._row, "title", "Timer");
this.help = getStringParamFromTemplateRow(this._row, "help", null);
this.ping = getStringParamFromTemplateRow(this._row, "ping", null);
+ this.playIcon = this.getAssetParamFromTemplateRow("play_icon_asset", "play-outline");
+ this.pauseIcon = this.getAssetParamFromTemplateRow("pause_icon_asset", "pause-outline");
+ this.resetIcon = this.getAssetParamFromTemplateRow("reset_icon_asset", "sync-outline");
this.timerDurationExtension =
getNumberParamFromTemplateRow(this._row, "duration_extension", 1) * 60;
this.is_editable_on_playing = getBooleanParamFromTemplateRow(
@@ -562,6 +630,11 @@
this.value = this.getDurationFromParams();
}
+ getAssetParamFromTemplateRow(parameterName: string, _default: string | null) {
+ const value = getStringParamFromTemplateRow(this._row, parameterName, null);
+ return value ? this.plhAssetPipe.transform(value) : _default;
+ }
+
getDurationFromParams() {
return this._row.value ? this._row.value : this.starting_minutes * 60 + this.starting_seconds;
}
@@ -693,10 +766,8 @@
constructor(timer: TmplTimerComponent) {
super(timer);
this.timer.leftButtonAction = "pause";
- this.timer.leftButtonIcon = "pause-outline";
this.timer.leftButtonName = "pause_timer";
this.timer.rightButtonAction = "increase";
- this.timer.rightButtonIcon = "reload-outline";
this.timer.rightButtonName = "increase_timer";
this.timer.timerStarted = true;
this.timer.isTimerEditable = this.timer.is_editable_on_playing;
@@ -729,10 +800,8 @@
constructor(timer: TmplTimerComponent) {
super(timer);
this.timer.leftButtonAction = "play";
- this.timer.leftButtonIcon = "play-outline";
this.timer.leftButtonName = "play_timer";
this.timer.rightButtonAction = "refresh";
- this.timer.rightButtonIcon = "sync-outline";
this.timer.rightButtonName = "refresh_timer";
this.timer.timerStarted = false;
this.timer.isTimerEditable = true;
diff --git a/documentation/docs/generated/components/AccordionSectionComponent.html b/documentation/docs/generated/components/AccordionSectionComponent.html
index 5475c802ab..9a9fb96c4c 100644
--- a/documentation/docs/generated/components/AccordionSectionComponent.html
+++ b/documentation/docs/generated/components/AccordionSectionComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,33 +94,41 @@
- - Components
- - Components
+ -
AccordionSectionComponent
- -
- Info
+
-
+ Info
+
+ -
+ Source
- -
- Source
+
-
+ Template
- -
- Styles
+
-
+ Styles
- -
- DOM Tree
+
-
+ DOM Tree
-
+
File
- src/app/shared/components/template/components/layout/accordion_section.ts
+ src/app/shared/components/template/components/layout/accordion-section/accordion-section.component.ts
@@ -71,18 +137,18 @@ File
Extends
- TemplateBaseComponent
+ TemplateBaseComponent
Implements
- OnInit
+ OnInit
-
+
Metadata
@@ -97,66 +163,24 @@ Metadata
+
selector
plh-tmpl-accordion-section
+
+
styleUrls
- ./accordion.scss,
../tmpl-components-common.scss./accordion-section.component.scss
+
- template
- <div class="accordion-wrapper"> <div
- [ngClass]="{
- completed: completed && !_row.disabled,
- disabled: _row.disabled,
- inProgress: !completed && !_row.disabled && percentComplete > 0,
- notStarted: !completed && !_row.disabled && percentComplete == 0
- }"
- class="accordion-status"
- >
- <img
- *ngIf="completed && !_row.disabled"
- class="tick-icon"
- [src]="'plh_images/icons/tick.svg' | plhAsset"
- />
- <img *ngIf="_row.disabled" [src]="'plh_images/icons/temporarily_disabled.svg' | plhAsset" />
- <img
- *ngIf="!completed && !_row.disabled"
- [src]="'plh_images/icons/in_progress.svg' | plhAsset"
- />
- </div>
- <div
- class="accordion-section"
- [ngClass]="{
- openSection: _row.parameter_list.state === 'open',
- disabled: _row.disabled,
- completed: completed,
- inProgress: !completed && !_row.disabled
- }"
- >
- <div class="progress" [ngStyle]="{ width: percentComplete + '%' }"></div>
- <h2 (click)="toggleOpen()">{{ title }}</h2>
- <div
- class="accordion-section-content"
- [ngClass]="{
- openSection: _row.parameter_list.state === 'open'
- }"
- >
- <plh-template-component
- style="z-index: 2"
- *ngFor="let childRow of _row.rows; trackBy: trackByRow"
- [row]="childRow"
- [parent]="parent"
- >
- </plh-template-component>
- </div>
- </div>
- </div>
templateUrl
+ ./accordion-section.component.html
@@ -166,12 +190,11 @@ Metadata
-
-
+
Index
@@ -187,6 +210,18 @@ Properties
Public
completed
+
+ Public
+ completedIcon
+
+
+ Public
+ disabledIcon
+
+
+ Public
+ inProgressIcon
+
Public
percentComplete
@@ -252,7 +287,7 @@ Outputs
-
+
Inputs
@@ -270,13 +305,13 @@ Inputs
-
+
-
+
Outputs
@@ -288,13 +323,13 @@ Outputs
- Type : EventEmitter
+ Type : EventEmitter
-
+
@@ -308,7 +343,7 @@ Outputs
-
+
Methods
@@ -319,7 +354,7 @@
- Public
+ Public
toggleOpen
@@ -327,33 +362,33 @@
-
+
toggleOpen()
-
-
-
-
-
+
+
+
+
+
-
-
+
Properties
@@ -378,7 +413,88 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Public
+ completedIcon
+
+
+
+
+
+
+ Type : string
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Public
+ disabledIcon
+
+
+
+
+
+
+ Type : string
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Public
+ inProgressIcon
+
+
+
+
+
+
+ Type : string
+
+
+
+
+
+
@@ -405,7 +521,7 @@
-
+
@@ -432,7 +548,7 @@
-
+
@@ -444,71 +560,27 @@
-
+
import { Component, OnInit, Output, EventEmitter, Input } from "@angular/core";
import {
getBooleanParamFromTemplateRow,
getStringParamFromTemplateRow,
} from "src/app/shared/utils";
-import { TemplateBaseComponent } from "../base";
+import { TemplateBaseComponent } from "../../base";
@Component({
selector: "plh-tmpl-accordion-section",
- template: `<div class="accordion-wrapper">
- <div
- [ngClass]="{
- completed: completed && !_row.disabled,
- disabled: _row.disabled,
- inProgress: !completed && !_row.disabled && percentComplete > 0,
- notStarted: !completed && !_row.disabled && percentComplete == 0
- }"
- class="accordion-status"
- >
- <img
- *ngIf="completed && !_row.disabled"
- class="tick-icon"
- [src]="'plh_images/icons/tick.svg' | plhAsset"
- />
- <img *ngIf="_row.disabled" [src]="'plh_images/icons/temporarily_disabled.svg' | plhAsset" />
- <img
- *ngIf="!completed && !_row.disabled"
- [src]="'plh_images/icons/in_progress.svg' | plhAsset"
- />
- </div>
- <div
- class="accordion-section"
- [ngClass]="{
- openSection: _row.parameter_list.state === 'open',
- disabled: _row.disabled,
- completed: completed,
- inProgress: !completed && !_row.disabled
- }"
- >
- <div class="progress" [ngStyle]="{ width: percentComplete + '%' }"></div>
- <h2 (click)="toggleOpen()">{{ title }}</h2>
- <div
- class="accordion-section-content"
- [ngClass]="{
- openSection: _row.parameter_list.state === 'open'
- }"
- >
- <plh-template-component
- style="z-index: 2"
- *ngFor="let childRow of _row.rows; trackBy: trackByRow"
- [row]="childRow"
- [parent]="parent"
- >
- </plh-template-component>
- </div>
- </div>
- </div>`,
- styleUrls: ["./accordion.scss", "../tmpl-components-common.scss"],
+ templateUrl: "./accordion-section.component.html",
+ styleUrls: ["./accordion-section.component.scss"],
})
export class AccordionSectionComponent extends TemplateBaseComponent implements OnInit {
public completed: boolean;
public percentComplete: number;
public title: string;
private launch_when_locked: boolean;
+ public completedIcon: string;
+ public inProgressIcon: string;
+ public disabledIcon: string;
@Input() id: string;
/** Emit output event so parent can respond to open/close events (e.g. close other sections when new section opened) */
@@ -534,12 +606,15 @@
"launch_when_locked",
false
);
+ this.completedIcon = getStringParamFromTemplateRow(this._row, "completed_icon_asset", null);
+ this.inProgressIcon = getStringParamFromTemplateRow(this._row, "in_progress_icon_asset", null);
+ this.disabledIcon = getStringParamFromTemplateRow(this._row, "disabled_icon_asset", null);
this.percentComplete = this._row.value ? this._row.value : 0;
this.updateStatus(this.percentComplete);
}
private updateStatus(value: number) {
- if (value == 100) {
+ if (value === 100) {
this.completed = true;
} else if (value > 0) {
this.completed = false;
@@ -549,29 +624,74 @@
+
+ <div class="accordion-wrapper">
+ <div
+ [ngClass]="{
+ completed: completed && !_row.disabled,
+ disabled: _row.disabled,
+ inProgress: !completed && !_row.disabled && percentComplete > 0,
+ notStarted: !completed && !_row.disabled && percentComplete === 0
+ }"
+ class="accordion-status"
+ >
+ <ion-icon
+ *ngIf="completed && !_row.disabled"
+ name="checkmark-outline"
+ [src]="completedIcon ? (completedIcon | plhAsset) : ''"
+ ></ion-icon>
+ <ion-icon
+ *ngIf="_row.disabled"
+ name="lock-closed-outline"
+ [src]="disabledIcon ? (disabledIcon | plhAsset) : ''"
+ ></ion-icon>
+ <ion-icon
+ *ngIf="!completed && !_row.disabled"
+ name="timer-outline"
+ [src]="inProgressIcon ? (inProgressIcon | plhAsset) : ''"
+ ></ion-icon>
+ </div>
+ <div
+ class="accordion-section"
+ [ngClass]="{
+ openSection: _row.parameter_list?.state === 'open',
+ disabled: _row.disabled,
+ completed: completed,
+ inProgress: !completed && !_row.disabled
+ }"
+ >
+ <div class="progress" [ngStyle]="{ width: percentComplete + '%' }"></div>
+ <h2 (click)="toggleOpen()">{{ title }}</h2>
+ <div
+ class="accordion-section-content"
+ [ngClass]="{
+ openSection: _row.parameter_list?.state === 'open'
+ }"
+ >
+ <plh-template-component
+ style="z-index: 2"
+ *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
+ [row]="childRow"
+ [parent]="parent"
+ >
+ </plh-template-component>
+ </div>
+ </div>
+</div>
+
+
-
+
- ./accordion.scss
+ ./accordion-section.component.scss
@use "/src/theme/mixins";
-$background-highlight: var(--accordion-background-highlight, var(--gradient-primary-light-vertical));
-
-.workshops-accordion {
- position: relative;
- margin-top: var(--large-margin);
- &::after {
- content: "";
- width: 1px;
- height: calc(100% - 35px);
- background: var(--ion-color-primary);
- position: absolute;
- left: 21px;
- top: 0;
- margin-top: var(--regular-margin);
- }
-}
+$background-highlight: var(
+ --accordion-background-highlight,
+ var(--gradient-primary-light-vertical)
+);
+
.accordion-wrapper {
display: flex;
justify-content: space-between;
@@ -586,6 +706,7 @@
background: var(--ion-color-primary-contrast);
display: flex;
justify-content: center;
+ align-items: center;
z-index: 2;
&.inProgress {
background: $background-highlight;
@@ -596,6 +717,10 @@
&.completed {
background: $background-highlight;
}
+ ion-icon {
+ font-size: var(--icon-size-tiny);
+ color: var(--ion-color-primary);
+ }
}
.accordion-section {
display: flex;
@@ -666,47 +791,10 @@
}
}
}
-
-
- ../tmpl-components-common.scss
-
- @use "/src/theme/mixins.scss";
-
-.tmpl-video-container {
- width: 100%;
- display: flex;
- justify-content: center;
-
- video {
- width: 100%;
- max-width: var(--video-max-width);
- border-radius: var(--ion-border-radius-secondary);
- }
-}
-
-.left {
- justify-content: start;
-}
-.right {
- justify-content: flex-end;
-}
-.center {
- justify-content: center;
-}
-.rounded_corners {
- border-radius: var(--ion-border-radius-standard);
-
- img {
- border-radius: var(--ion-border-radius-standard);
- }
-}
-.whiteText {
- color: var(--ion-color-primary-contrast);
-}
-
+
@@ -731,8 +819,8 @@
diff --git a/documentation/docs/generated/components/AnimatedSectionComponent.html b/documentation/docs/generated/components/AnimatedSectionComponent.html
index 3eb539ae3e..fd74f607de 100644
--- a/documentation/docs/generated/components/AnimatedSectionComponent.html
+++ b/documentation/docs/generated/components/AnimatedSectionComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,29 +94,33 @@
- - Components
- - Components
+ -
AnimatedSectionComponent
-
+
File
@@ -71,18 +133,18 @@
File
Extends
- TemplateLayoutComponent
+ TemplateLayoutComponent
Implements
- OnInit
+ OnInit
-
+
Metadata
@@ -97,11 +159,14 @@ Metadata
+
selector
plh-tmpl-animated-section
+
+
styleUrls
./animated-section.scssMetadata
template
<plh-template-component
- *ngFor="let childRow of _row.rows; trackBy: trackByRow"
+ *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
[row]="childRow"
[parent]="parent"
[@fadeSection]="_row?.hidden ? 'out' : 'in'"
@@ -131,7 +196,7 @@ Metadata
-
+
Index
@@ -204,7 +269,7 @@ Inputs
-
+
Inputs
@@ -278,7 +343,7 @@ Inputs
-
+
Methods
@@ -289,7 +354,7 @@
- Public
+ Public
interceptTemplateContainerAction
@@ -297,71 +362,69 @@
-
+
interceptTemplateContainerAction(action: FlowTypes.TemplateRowAction)
-
-
- Inherited from TemplateLayoutComponent
+
+
+ Inherited from TemplateLayoutComponent
-
-
-
-
- Defined in TemplateLayoutComponent:76
+
+
+
+
+ Defined in TemplateLayoutComponent:76
-
-
+
+
- Add any additional methods or function calls to actions that would otherwise be handled by
+
Add any additional methods or function calls to actions that would otherwise be handled by
the template container.
be processed by the template container parent (as it is used as a filter)
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- action
-
- FlowTypes.TemplateRowAction
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : boolean
-
-
-
- true or false to specify if the action should continue to also
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ action
+
+ FlowTypes.TemplateRowAction
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : boolean
+
+
+
+ true or false to specify if the action should continue to also
be processed by the template container parent (as it is used as a filter)
-
+
@@ -372,7 +435,7 @@
- Public
+ Public
modifyRowSetter
@@ -380,67 +443,65 @@
-
+
modifyRowSetter(row: FlowTypes.TemplateRow)
-
-
- Inherited from TemplateLayoutComponent
+
+
+ Inherited from TemplateLayoutComponent
-
-
-
-
- Defined in TemplateLayoutComponent:66
+
+
+
+
+ Defined in TemplateLayoutComponent:66
-
-
+
+
- Apply any changes here to be applied the row @Input() set operation
+ Apply any changes here to be applied the row @Input() set operation
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- row
-
- FlowTypes.TemplateRow
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : FlowTypes.TemplateRow
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ row
+
+ FlowTypes.TemplateRow
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : FlowTypes.TemplateRow
+
+
+
+
+
@@ -451,7 +512,7 @@
- Public
+ Public
scrollToTop
@@ -459,43 +520,43 @@
-
+
scrollToTop()
-
-
- Inherited from TemplateLayoutComponent
+
+
+ Inherited from TemplateLayoutComponent
-
-
-
-
- Defined in TemplateLayoutComponent:49
+
+
+
+
+ Defined in TemplateLayoutComponent:49
-
-
+
+
-
-
+
Properties
@@ -571,7 +632,7 @@
-
+
import { animate, state, style, transition, trigger } from "@angular/animations";
import { Component, OnInit } from "@angular/core";
import { TemplateLayoutComponent } from "./layout";
@@ -580,7 +641,7 @@
selector: "plh-tmpl-animated-section",
template: `
<plh-template-component
- *ngFor="let childRow of _row.rows; trackBy: trackByRow"
+ *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
[row]="childRow"
[parent]="parent"
[@fadeSection]="_row?.hidden ? 'out' : 'in'"
@@ -612,7 +673,7 @@
-
+
./animated-section.scss
@@ -625,7 +686,7 @@
-
+
@@ -650,8 +711,8 @@
diff --git a/documentation/docs/generated/components/AnimatedSectionGroupComponent.html b/documentation/docs/generated/components/AnimatedSectionGroupComponent.html
index f4dadc5772..9e13719d7c 100644
--- a/documentation/docs/generated/components/AnimatedSectionGroupComponent.html
+++ b/documentation/docs/generated/components/AnimatedSectionGroupComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,26 +94,29 @@
- - Components
- - Components
+ -
AnimatedSectionGroupComponent
-
+
File
@@ -68,12 +129,12 @@
File
Extends
- TemplateBaseComponent
+ TemplateBaseComponent
-
+
Metadata
@@ -88,6 +149,7 @@ Metadata
+
selector
plh-tmpl-animated-section-groupMetadata
+
+
template
<div class="animated-section-group"> <plh-template-component
- *ngFor="let childRow of _row.rows; trackBy: trackByRow"
+ *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
[row]="childRow"
[parent]="parent"
></plh-template-component>
@@ -128,7 +192,7 @@ Metadata
-
+
import { Component } from "@angular/core";
import { TemplateBaseComponent } from "../base";
@@ -136,7 +200,7 @@ Metadata
selector: "plh-tmpl-animated-section-group",
template: `<div class="animated-section-group">
<plh-template-component
- *ngFor="let childRow of _row.rows; trackBy: trackByRow"
+ *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
[row]="childRow"
[parent]="parent"
></plh-template-component>
@@ -148,7 +212,7 @@ Metadata
-
+
@@ -173,8 +237,8 @@ Metadata
diff --git a/documentation/docs/generated/components/ComboBoxModalComponent.html b/documentation/docs/generated/components/ComboBoxModalComponent.html
index bdc3b90345..c424bd1b06 100644
--- a/documentation/docs/generated/components/ComboBoxModalComponent.html
+++ b/documentation/docs/generated/components/ComboBoxModalComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,32 +94,37 @@
- - Components
- - Components
+ -
ComboBoxModalComponent
- -
- Info
+
-
+ Info
- -
- Source
+
-
+ Source
- -
- Template
+
-
+ Template
- -
- Styles
+
-
+ Styles
- -
- DOM Tree
+
-
+ DOM Tree
-
+
File
@@ -75,11 +138,11 @@
File
Implements
- OnInit
+ OnInit
-
+
Metadata
@@ -94,11 +157,14 @@ Metadata
+
selector
combo-box-modal
+
+
styleUrls
./combo-box-modal.component.scssMetadata
-
+
Index
@@ -182,9 +248,6 @@ Methods
closeModal
-
- convertToObject
-
enterCustomAnswer
@@ -243,18 +306,18 @@ Accessors
-
+
Constructor
-constructor(fb: FormBuilder, modalController: ModalController)
+constructor(fb: FormBuilder, modalController: ModalController)
-
+
@@ -275,7 +338,7 @@ Constructor
fb
- FormBuilder
+ FormBuilder
@@ -304,7 +367,7 @@ Constructor
-
+
Inputs
@@ -322,7 +385,7 @@ Inputs
-
+
@@ -343,7 +406,7 @@ Inputs
-
+
@@ -364,7 +427,7 @@ Inputs
-
+
@@ -385,7 +448,7 @@ Inputs
-
+
@@ -406,7 +469,7 @@ Inputs
-
+
@@ -415,7 +478,7 @@ Inputs
-
+
Methods
@@ -438,21 +501,21 @@
-
-
-
-
-
+
+
+
+
+
-
@@ -475,21 +538,21 @@
-
-
-
-
-
+
+
+
+
+
-
@@ -512,49 +575,47 @@
-
-
-
-
-
+
+
+
+
+
-
- Parameters :
-
-
-
-
- Name
- Optional
-
-
-
-
- el
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : void
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Optional
+
+
+
+
+ el
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : void
+
+
+
+
+
@@ -577,118 +638,47 @@
-
-
-
-
-
-
-
-
-
-
-
- Parameters :
-
-
-
-
- Name
- Optional
-
-
-
-
- value
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : void
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- convertToObject
-
-
-
-
-
-
-convertToObject(answers_list: string[])
-
-
+
+
+
+
+
-
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Optional
+
+
+
+
+ value
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : void
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- answers_list
-
- string[]
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : AnswerBody[]
-
-
-
-
-
+
+
+
+
@@ -711,21 +701,21 @@
-
-
-
-
-
+
+
+
+
+
-
@@ -748,27 +738,27 @@
-
-
-
-
-
+
+
+
+
+
-
-
+
Properties
@@ -786,13 +776,13 @@
- Type : FormGroup
+ Type : FormGroup
-
+
@@ -812,13 +802,13 @@
- Type : FormGroup | null
+ Type : FormGroup | null
-
+
@@ -849,7 +839,7 @@
-
+
@@ -880,7 +870,7 @@
-
+
@@ -911,7 +901,7 @@
-
+
@@ -942,7 +932,7 @@
-
+
@@ -968,7 +958,7 @@
-
+
@@ -988,13 +978,13 @@
- Type : AnswerBody[]
+ Type : IAnswerListItem[]
-
+
@@ -1003,7 +993,7 @@
-
+
Accessors
@@ -1023,7 +1013,7 @@
-
+
@@ -1033,23 +1023,19 @@
-
+
import { Component, Input, OnInit } from "@angular/core";
import { FlowTypes } from "src/app/shared/model";
import {
+ getAnswerListParamFromTemplateRow,
getBooleanParamFromTemplateRow,
getNumberParamFromTemplateRow,
- getParamFromTemplateRow,
getStringParamFromTemplateRow,
+ IAnswerListItem,
} from "src/app/shared/utils";
import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
import { ModalController } from "@ionic/angular";
-interface AnswerBody {
- name: string | null;
- text: string | null;
-}
-
@Component({
selector: "combo-box-modal",
templateUrl: "./combo-box-modal.component.html",
@@ -1062,7 +1048,7 @@
@Input() customAnswerSelected: boolean;
@Input() style: string;
formData: FormGroup | null;
- valuesFromListAnswers: AnswerBody[];
+ valuesFromListAnswers: IAnswerListItem[];
textTitle: string | null;
inputAllowed: boolean = false;
form: FormGroup;
@@ -1077,9 +1063,7 @@
}
getParams() {
- this.valuesFromListAnswers = this.convertToObject(
- getParamFromTemplateRow(this.row, "answer_list", null)
- );
+ this.valuesFromListAnswers = getAnswerListParamFromTemplateRow(this.row, "answer_list", null);
this.textTitle = getStringParamFromTemplateRow(this.row, "text", null);
this.inputAllowed = getBooleanParamFromTemplateRow(this.row, "input_allowed", false);
this.inputPosition =
@@ -1101,27 +1085,6 @@
}
}
- convertToObject(answers_list: string[]): AnswerBody[] {
- let answers: AnswerBody[] = [];
- if (answers_list) {
- answers_list.map((item) => {
- const obj: AnswerBody = {
- text: null,
- name: null,
- };
- const stringProperties = item.split("|");
- stringProperties.forEach((s) => {
- const [field, value] = s.split(":").map((v) => v.trim());
- if (field && value) {
- obj[field] = value;
- }
- });
- answers.push(obj);
- });
- return answers;
- }
- }
-
buildForm() {
this.form = this.fb.group({
answer: new FormControl(null, []),
@@ -1177,7 +1140,7 @@
-
+
<div class="container-modal">
<div class="header" *ngIf="textTitle">
{{ textTitle }}
@@ -1217,7 +1180,7 @@
-
+
./combo-box-modal.component.scss
@@ -1305,7 +1268,7 @@
-
+
@@ -1331,7 +1294,7 @@
diff --git a/documentation/docs/generated/components/FormComponent.html b/documentation/docs/generated/components/FormComponent.html
index c77b40f741..a038ba8078 100644
--- a/documentation/docs/generated/components/FormComponent.html
+++ b/documentation/docs/generated/components/FormComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,29 +94,33 @@
- - Components
- - Components
+ -
FormComponent
-
+
File
@@ -71,18 +133,18 @@
File
Extends
- TemplateBaseComponent
+ TemplateBaseComponent
Implements
- OnInit
+ OnInit
-
+
Metadata
@@ -97,11 +159,14 @@ Metadata
+
selector
plh-tmpl-form
+
+
styleUrls
./form.scssMetadata
template
<div> <plh-template-component
- *ngFor="let childRow of _row.rows; trackBy: trackByRow"
+ *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
[row]="childRow"
[parent]="parent"
>
@@ -132,7 +197,7 @@ Metadata
-
+
Index
@@ -190,7 +255,7 @@ Inputs
-
+
Constructor
@@ -209,7 +274,7 @@ Constructor
-
+
Inputs
@@ -236,7 +301,7 @@ Inputs
-
+
Methods
@@ -247,7 +312,7 @@
- Public
+ Public
submit
@@ -255,33 +320,33 @@
-
+
submit()
-
-
-
-
-
+
+
+
+
+
-
-
+
Properties
@@ -318,7 +383,7 @@
-
+
import { Component, Input, OnInit } from "@angular/core";
import { TemplateBaseComponent } from "../base";
import { FlowTypes } from "../../models";
@@ -333,7 +398,7 @@
selector: "plh-tmpl-form",
template: ` <div>
<plh-template-component
- *ngFor="let childRow of _row.rows; trackBy: trackByRow"
+ *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
[row]="childRow"
[parent]="parent"
>
@@ -406,7 +471,7 @@
-
+
./form.scss
@@ -428,7 +493,7 @@
-
+
@@ -453,8 +518,8 @@
diff --git a/documentation/docs/generated/components/NavGroupComponent.html b/documentation/docs/generated/components/NavGroupComponent.html
index a932a7e467..cd1134472c 100644
--- a/documentation/docs/generated/components/NavGroupComponent.html
+++ b/documentation/docs/generated/components/NavGroupComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,29 +94,33 @@
- - Components
- - Components
+ -
NavGroupComponent
-
+
File
@@ -71,12 +133,12 @@
File
Extends
- TemplateLayoutComponent
+ TemplateLayoutComponent
-
+
Metadata
@@ -91,12 +153,15 @@ Metadata
+
selector
plh-tmpl-nav-group
+
+
styles
@@ -179,7 +244,7 @@ Metadata
-
+
Index
@@ -269,7 +334,7 @@ Inputs
-
+
Constructor
@@ -318,7 +383,7 @@ Constructor
-
+
Inputs
@@ -392,7 +457,7 @@ Inputs
-
+
Methods
@@ -415,55 +480,53 @@
-
-
-
-
-
+
+
+
+
+
- Function that will return Current Slider Index
+ Function that will return Current Slider Index
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- progressField
-
- string
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : number
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ progressField
+
+ string
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : number
+
+
+
+
+
@@ -474,7 +537,7 @@
- Async
+ Async
goToSection
@@ -482,61 +545,59 @@
-
+
goToSection(index: number)
-
-
-
-
-
+
+
+
+
+
- Function that will move forward or back to Section
+ Function that will move forward or back to Section
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- index
-
- number
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : any
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ index
+
+ number
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : any
+
+
+
+
+
@@ -559,59 +620,57 @@
-
-
- Inherited from TemplateLayoutComponent
+
+
+ Inherited from TemplateLayoutComponent
-
-
-
-
- Defined in TemplateLayoutComponent:132
+
+
+
+
+ Defined in TemplateLayoutComponent:132
-
-
+
+
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- action
-
- FlowTypes.TemplateRowAction
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : boolean
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ action
+
+ FlowTypes.TemplateRowAction
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : boolean
+
+
+
+
+
@@ -634,59 +693,57 @@
-
-
- Inherited from TemplateLayoutComponent
+
+
+ Inherited from TemplateLayoutComponent
-
-
-
-
- Defined in TemplateLayoutComponent:89
+
+
+
+
+ Defined in TemplateLayoutComponent:89
-
-
+
+
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- row
-
- FlowTypes.TemplateRow
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : FlowTypes.TemplateRow
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ row
+
+ FlowTypes.TemplateRow
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : FlowTypes.TemplateRow
+
+
+
+
+
@@ -697,7 +754,7 @@
- Async
+ Async
updateSectionProgress
@@ -705,29 +762,29 @@
-
+
updateSectionProgress()
-
-
-
-
-
+
+
+
+
+
-
@@ -738,7 +795,7 @@
- Public
+ Public
scrollToTop
@@ -746,43 +803,43 @@
-
+
scrollToTop()
-
-
- Inherited from TemplateLayoutComponent
+
+
+ Inherited from TemplateLayoutComponent
-
-
-
-
- Defined in TemplateLayoutComponent:49
+
+
+
+
+ Defined in TemplateLayoutComponent:49
-
-
+
+
-
-
+
Properties
@@ -946,7 +1003,7 @@
-
+
import { Component } from "@angular/core";
import { PLHAnimations } from "src/app/shared/animations";
import { FlowTypes } from "data-models";
@@ -1175,7 +1232,7 @@
-
+
:host {
flex: 1;
@@ -1216,7 +1273,7 @@
-
+
@@ -1242,7 +1299,7 @@
diff --git a/documentation/docs/generated/components/RoundIconButtonComponent.html b/documentation/docs/generated/components/RoundIconButtonComponent.html
index ee0f9e051d..82e3cb04f1 100644
--- a/documentation/docs/generated/components/RoundIconButtonComponent.html
+++ b/documentation/docs/generated/components/RoundIconButtonComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,32 +94,37 @@
- - Components
- - Components
+ -
RoundIconButtonComponent
- -
- Info
+
-
+ Info
- -
- Source
+
-
+ Source
- -
- Template
+
-
+ Template
- -
- Styles
+
-
+ Styles
- -
- DOM Tree
+
-
+ DOM Tree
-
+
File
@@ -74,7 +137,7 @@
File
Extends
- TemplateBaseComponent
+ TemplateBaseComponent
@@ -82,12 +145,12 @@
Implements
ITemplateRowProps
- OnInit
- AfterViewInit
+ OnInit
+ AfterViewInit
-
+
Metadata
@@ -102,11 +165,14 @@ Metadata
+
selector
plh-round-button
+
+
styleUrls
../button/button.component.scss,
./round-icon-button.component.scssMetadata
-
+
Index
@@ -213,13 +279,13 @@ Inputs
-
+
Constructor
-constructor(elRef: ElementRef)
+constructor(elRef: ElementRef)
@@ -245,7 +311,7 @@ Constructor
elRef
- ElementRef
+ ElementRef
@@ -262,7 +328,7 @@ Constructor
-
+
Inputs
@@ -310,7 +376,7 @@ Inputs
-
+
Methods
@@ -333,21 +399,21 @@
-
-
-
-
-
+
+
+
+
+
-
@@ -365,64 +431,62 @@
-onClick(event: Event)
+onClick(event: Event)
-
-
-
-
-
+
+
+
+
+
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- event
-
- Event
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : void
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ event
+
+ Event
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : void
+
+
+
+
+
-
+
Properties
@@ -655,7 +719,7 @@
-
+
import { AfterViewInit, Component, ElementRef, Input, OnInit } from "@angular/core";
import { FlowTypes } from "data-models";
import { ITemplateRowProps } from "../../models";
@@ -717,7 +781,7 @@
-
+
<div class="wrapper" [class.home_screen_wrapper]="isHomeScreen">
<ion-tab-button
[class]="style"
@@ -737,7 +801,7 @@
-
+
../button/button.component.scss
@@ -754,6 +818,10 @@
display: contents;
}
}
+// ensure relative position on parent if absolute position children nested inside
+[data-has-children] {
+ position: relative;
+}
ion-button {
font-size: var(--buttons-font-size-small);
font-weight: var(--font-weight-standard);
@@ -779,22 +847,28 @@
}
/// nested_color style applies semi-transparent background to match container
-ion-button[data-param-style~="nested_color"] {
+ion-button[data-param-style~="nested_color"],
+ion-button[data-variant~="nested_color"] {
--background: linear-gradient(rgb(0 0 0 / 13%) 0%, rgb(0 0 0 / 20%) 100%);
}
-// nested_color style applies semi-transparent background to match container
-ion-button[data-param-style~="card"] {
+ion-button[data-param-style~="card"],
+ion-button[data-variant~="card"] {
--background: white;
--background-activated: var(--ion-color-gray-light);
- --padding-top: 4px;
- --padding-bottom: 4px;
+ --padding-top: var(--tiny-padding);
+ --padding-bottom: var(--tiny-padding);
color: var(--ion-color-primary);
font-weight: var(--font-weight-bold);
border: 1px solid var(--ion-color-gray-light);
border-radius: var(--ion-border-radius-secondary);
min-height: var(--buttons-short-height);
- filter: drop-shadow(var(--ion-default-box-shadow));
+
+ .text ::ng-deep {
+ p {
+ margin: var(--small-margin) 0;
+ }
+ }
ion-icon {
width: 32px;
@@ -810,6 +884,58 @@
}
}
+.button-container[data-variant~="card-portrait"] {
+ background-color: white;
+ color: var(--ion-color-primary);
+ font-size: var(--buttons-font-size-tiny);
+ font-weight: var(--font-weight-bold);
+ border: 1px solid var(--ion-color-gray-light);
+ border-radius: var(--ion-border-radius-standard);
+ min-height: var(--buttons-short-height);
+ filter: drop-shadow(var(--ion-default-box-shadow));
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 1.5rem 0.5rem 0.5rem;
+ // TODO: make a variable
+ width: 160px;
+
+ &:active {
+ background-color: var(--ion-color-gray-light);
+ }
+
+ img {
+ width: 85%;
+ }
+
+ .button-text {
+ width: 100%;
+ padding: 1rem 0 0.5rem;
+ text-align: center;
+ &.right {
+ text-align: right;
+ }
+ &.left {
+ text-align: left;
+ }
+ &.center {
+ text-align: center;
+ }
+ &.centre {
+ text-align: center;
+ }
+ }
+ .children {
+ position: absolute;
+ align-self: flex-end;
+ right: -4px;
+ top: -12px;
+ display: flex;
+ align-items: center;
+ padding: -8px;
+ }
+}
+
/// TODO CC-2021-12-19 - the code below should likely be refactored to param selectors and moved
.navigation {
@@ -857,6 +983,12 @@
margin: 0 2px 0 auto;
text-align: right;
}
+.center {
+ text-align: center;
+}
+.centre {
+ text-align: center;
+}
// width
.full {
@@ -1035,7 +1167,7 @@
-
+
@@ -1061,7 +1193,7 @@
diff --git a/documentation/docs/generated/components/SelectTextComponent.html b/documentation/docs/generated/components/SelectTextComponent.html
index 5ca524505a..e0cf712b73 100644
--- a/documentation/docs/generated/components/SelectTextComponent.html
+++ b/documentation/docs/generated/components/SelectTextComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,32 +94,37 @@
- - Components
- - Components
+ -
SelectTextComponent
- -
- Info
+
-
+ Info
- -
- Source
+
-
+ Source
- -
- Template
+
-
+ Template
- -
- Styles
+
-
+ Styles
- -
- DOM Tree
+
-
+ DOM Tree
-
+
File
@@ -74,19 +137,19 @@
File
Extends
- TemplateBaseComponent
+ TemplateBaseComponent
Implements
- OnInit
+ OnInit
ITemplateRowProps
-
+
Metadata
@@ -101,11 +164,14 @@ Metadata
+
selector
plh-select-text
+
+
styleUrls
./select-text.component.scssMetadata
-
+
Index
@@ -217,7 +283,7 @@ Methods
-
+
Methods
@@ -228,7 +294,7 @@
- Async
+ Async
checkClipboard
@@ -236,27 +302,27 @@
-
+
checkClipboard()
-
-
-
-
-
+
+
+
+
+
-
@@ -279,21 +345,21 @@
-
-
-
-
-
+
+
+
+
+
-
@@ -304,7 +370,7 @@
- Async
+ Async
triggerCopyContent
@@ -312,77 +378,75 @@
-
+
triggerCopyContent($event: MouseEvent, _row: FlowTypes.TemplateRow)
-
-
-
-
-
+
+
+
+
+
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- $event
-
- MouseEvent
-
-
-
- No
-
-
-
-
-
- _row
-
- FlowTypes.TemplateRow
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : any
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ $event
+
+ MouseEvent
+
+
+
+ No
+
+
+
+
+
+ _row
+
+ FlowTypes.TemplateRow
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : any
+
+
+
+
+
-
+
Properties
@@ -639,7 +703,7 @@
-
+
import { Component, OnInit } from "@angular/core";
import { Clipboard } from "@capacitor/clipboard";
import { Subscription, timer } from "rxjs";
@@ -679,7 +743,7 @@
getParams() {
this.placeholder = getStringParamFromTemplateRow(this._row, "placeholder", "");
- this.maxLength = getNumberParamFromTemplateRow(this._row, "max_length", 30);
+ this.maxLength = getNumberParamFromTemplateRow(this._row, "max_length", -1);
this.textAlign = getStringParamFromTemplateRow(this._row, "text_align", "center");
this.style = getStringParamFromTemplateRow(this._row, "style", null);
this.isNumberInput = getBooleanParamFromTemplateRow(this._row, "number_input", false);
@@ -709,8 +773,12 @@
-
- <div class="box-wrapper" [attr.data-toggled]="toggle" (click)="triggerCopyContent($event, _row)">
+
+ <div
+ class="box-wrapper"
+ [attr.data-toggled]="toggle"
+ (click)="triggerCopyContent($event, _row); triggerActions('click')"
+>
<div class="text">{{ _row?.value }}</div>
<div class="copy-button">
<ng-container *ngIf="_row?.parameter_list?.copy_text && _row?.parameter_list.copied_text">
@@ -755,7 +823,7 @@
-
+
./select-text.component.scss
@@ -801,7 +869,7 @@
-
+
@@ -826,8 +894,8 @@
diff --git a/documentation/docs/generated/components/SquareIconButtonComponent.html b/documentation/docs/generated/components/SquareIconButtonComponent.html
index 17cfc1ee61..6ccb198208 100644
--- a/documentation/docs/generated/components/SquareIconButtonComponent.html
+++ b/documentation/docs/generated/components/SquareIconButtonComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,32 +94,37 @@
- - Components
- - Components
+ -
SquareIconButtonComponent
- -
- Info
+
-
+ Info
- -
- Source
+
-
+ Source
- -
- Template
+
-
+ Template
- -
- Styles
+
-
+ Styles
- -
- DOM Tree
+
-
+ DOM Tree
-
+
File
@@ -74,7 +137,7 @@
File
Extends
- TemplateBaseComponent
+ TemplateBaseComponent
@@ -82,12 +145,12 @@
Implements
ITemplateRowProps
- OnInit
- AfterViewInit
+ OnInit
+ AfterViewInit
-
+
Metadata
@@ -102,11 +165,14 @@ Metadata
+
selector
plh-square-icon-button
+
+
styleUrls
./square-icon-button.component.scssMetadata
-
+
Index
@@ -184,13 +250,13 @@ Methods
-
+
Constructor
-constructor(elRef: ElementRef)
+constructor(elRef: ElementRef)
@@ -216,7 +282,7 @@ Constructor
elRef
- ElementRef
+ ElementRef
@@ -237,7 +303,7 @@ Constructor
-
+
Methods
@@ -260,21 +326,21 @@
-
-
-
-
-
+
+
+
+
+
-
@@ -292,64 +358,62 @@
-onClick(event: Event)
+onClick(event: Event)
-
-
-
-
-
+
+
+
+
+
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- event
-
- Event
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : void
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ event
+
+ Event
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : void
+
+
+
+
+
-
+
Properties
@@ -473,7 +537,7 @@
-
+
import { AfterViewInit, Component, ElementRef, OnInit } from "@angular/core";
import {
getStringParamFromTemplateRow,
@@ -529,7 +593,7 @@
-
+
<div class="wrapper">
<ion-button [class]="style" (click)="onClick($event)" [disabled]="_row.disabled">
<ion-icon [name]="icon_src" [src]="isCustomIcon ? (icon_src | plhAsset) : icon_src"></ion-icon>
@@ -538,7 +602,7 @@
-
+
./square-icon-button.component.scss
@@ -583,7 +647,7 @@
-
+
@@ -609,7 +673,7 @@
diff --git a/documentation/docs/generated/components/TemplateBaseComponent.html b/documentation/docs/generated/components/TemplateBaseComponent.html
index 3854e5a6e2..1f09850d73 100644
--- a/documentation/docs/generated/components/TemplateBaseComponent.html
+++ b/documentation/docs/generated/components/TemplateBaseComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,29 +94,33 @@
- - Components
- - Components
+ -
TemplateBaseComponent
-
+
File
@@ -76,7 +138,7 @@
Implements
-
+
Metadata
@@ -92,6 +154,9 @@ Metadata
+
+
+
styleUrls
./tmpl-components-common.scssMetadata
-
+
Constructor
@@ -140,7 +205,7 @@ Constructor
-
+
import { Component, Input } from "@angular/core";
import { FlowTypes, ITemplateRowProps } from "../models";
import { TemplateContainerComponent } from "../template-container.component";
@@ -213,7 +278,7 @@ Constructor
-
+
./tmpl-components-common.scss
@@ -253,7 +318,7 @@ Constructor
-
+
@@ -279,7 +344,7 @@ Constructor
diff --git a/documentation/docs/generated/components/TemplateDebuggerComponent.html b/documentation/docs/generated/components/TemplateDebuggerComponent.html
index 26c077de4f..5feff89aaf 100644
--- a/documentation/docs/generated/components/TemplateDebuggerComponent.html
+++ b/documentation/docs/generated/components/TemplateDebuggerComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,29 +94,33 @@
- - Components
- - Components
+ -
TemplateDebuggerComponent
-
+
File
@@ -71,12 +133,12 @@
File
Extends
- TemplateBaseComponent
+ TemplateBaseComponent
-
+
Metadata
@@ -91,12 +153,15 @@ Metadata
+
selector
plh-template-debugger
+
+
styles
@@ -186,7 +251,7 @@ Metadata
-
+
Index
@@ -234,7 +299,7 @@ Methods
-
+
Constructor
@@ -287,7 +352,7 @@ Constructor
-
+
Methods
@@ -298,7 +363,7 @@
- Public
+ Public
handleSummaryClick
@@ -306,59 +371,57 @@
-
- handleSummaryClick(e: Event)
+
+ handleSummaryClick(e: Event)
-
-
-
-
-
+
+
+
+
+
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- e
-
- Event
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : void
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ e
+
+ Event
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : void
+
+
+
+
+
@@ -369,7 +432,7 @@
- Public
+ Public
logDebugInfo
@@ -377,33 +440,33 @@
-
+
logDebugInfo()
-
-
-
-
-
+
+
+
+
+
-
-
+
Properties
@@ -445,7 +508,7 @@
-
+
import { Component } from "@angular/core";
import { TemplateFieldService } from "../services/template-field.service";
import { TemplateBaseComponent } from "./base";
@@ -554,7 +617,7 @@
-
+
:host {
width: 100%;
@@ -598,7 +661,7 @@
-
+
@@ -624,7 +687,7 @@
diff --git a/documentation/docs/generated/components/TemplateHTMLComponent.html b/documentation/docs/generated/components/TemplateHTMLComponent.html
index c98457e589..7e1a8d48e0 100644
--- a/documentation/docs/generated/components/TemplateHTMLComponent.html
+++ b/documentation/docs/generated/components/TemplateHTMLComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,26 +94,29 @@
- - Components
- - Components
+ -
TemplateHTMLComponent
-
+
File
@@ -68,18 +129,18 @@
File
Extends
- TemplateBaseComponent
+ TemplateBaseComponent
Implements
- OnInit
+ OnInit
-
+
Metadata
@@ -94,6 +155,7 @@ Metadata
+
selector
template-html-componentMetadata
+
+
template
<div [outerHTML]="html"></div>
Metadata
-
+
Index
@@ -146,13 +210,13 @@ Properties
-
+
Constructor
-constructor(domSanitizer: DomSanitizer)
+constructor(domSanitizer: DomSanitizer)
@@ -178,7 +242,7 @@ Constructor
domSanitizer
- DomSanitizer
+ DomSanitizer
@@ -200,7 +264,7 @@ Constructor
-
+
Properties
@@ -218,7 +282,7 @@
- Type : SafeHtml
+ Type : SafeHtml
@@ -236,7 +300,7 @@
-
+
import { Component, OnInit } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
import { TemplateBaseComponent } from "src/app/shared/components/template/components/base";
@@ -262,7 +326,7 @@
-
+
@@ -288,7 +352,7 @@
diff --git a/documentation/docs/generated/components/TemplateLayoutComponent.html b/documentation/docs/generated/components/TemplateLayoutComponent.html
index b869604945..f106b322bc 100644
--- a/documentation/docs/generated/components/TemplateLayoutComponent.html
+++ b/documentation/docs/generated/components/TemplateLayoutComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,29 +94,33 @@
- - Components
- - Components
+ -
TemplateLayoutComponent
-
+
File
@@ -73,11 +135,11 @@
Implements
ITemplateRowProps
- OnInit
+ OnInit
-
+
Metadata
@@ -93,6 +155,9 @@ Metadata
+
+
+
styleUrls
../tmpl-components-common.scssMetadata
-
+
Index
@@ -198,7 +263,7 @@ Accessors
-
+
Constructor
@@ -217,7 +282,7 @@ Constructor
-
+
Inputs
@@ -277,7 +342,7 @@ Inputs
-
+
Methods
@@ -288,7 +353,7 @@
- Public
+ Public
interceptTemplateContainerAction
@@ -296,65 +361,63 @@
-
+
interceptTemplateContainerAction(action: FlowTypes.TemplateRowAction)
-
-
-
-
-
+
+
+
+
+
- Add any additional methods or function calls to actions that would otherwise be handled by
+
Add any additional methods or function calls to actions that would otherwise be handled by
the template container.
be processed by the template container parent (as it is used as a filter)
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- action
-
- FlowTypes.TemplateRowAction
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : boolean
-
-
-
- true or false to specify if the action should continue to also
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ action
+
+ FlowTypes.TemplateRowAction
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : boolean
+
+
+
+ true or false to specify if the action should continue to also
be processed by the template container parent (as it is used as a filter)
-
+
@@ -365,7 +428,7 @@
- Public
+ Public
modifyRowSetter
@@ -373,61 +436,59 @@
-
+
modifyRowSetter(row: FlowTypes.TemplateRow)
-
-
-
-
-
+
+
+
+
+
- Apply any changes here to be applied the row @Input() set operation
+ Apply any changes here to be applied the row @Input() set operation
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- row
-
- FlowTypes.TemplateRow
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : FlowTypes.TemplateRow
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ row
+
+ FlowTypes.TemplateRow
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : FlowTypes.TemplateRow
+
+
+
+
+
@@ -438,7 +499,7 @@
- Public
+ Public
scrollToTop
@@ -446,37 +507,37 @@
-
+
scrollToTop()
-
-
-
-
-
+
+
+
+
+
-
-
+
Properties
@@ -535,7 +596,7 @@
-
+
Accessors
@@ -604,7 +665,7 @@
-
+
import { Component, Input, OnInit } from "@angular/core";
import { FlowTypes, ITemplateRowProps } from "../../models";
import { TemplateContainerComponent } from "../../template-container.component";
@@ -701,7 +762,7 @@
-
+
../tmpl-components-common.scss
@@ -741,7 +802,7 @@
-
+
@@ -767,7 +828,7 @@
diff --git a/documentation/docs/generated/components/TemplatePopupComponent.html b/documentation/docs/generated/components/TemplatePopupComponent.html
index 7da3326494..4915598ade 100644
--- a/documentation/docs/generated/components/TemplatePopupComponent.html
+++ b/documentation/docs/generated/components/TemplatePopupComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,33 +94,37 @@
- - Components
- - Components
+ -
TemplatePopupComponent
-
+
File
- src/app/shared/components/template/components/layout/popup.ts
+ src/app/shared/components/template/components/layout/popup/popup.component.ts
@@ -70,7 +132,7 @@ File
-
+
Metadata
@@ -87,95 +149,22 @@ Metadata
-
- styles
-
- .popup-backdrop {
- height: 100vh;
- width: 100%;
- background: rgba(0, 0, 0, 0.6);
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
- .popup-backdrop[data-fullscreen] {
- background: white;
- }
- .popup-container {
- position: relative;
- width: var(--content-max-width);
- padding: 0 2rem;
- margin: auto;
- }
- .popup-content {
- margin: 30px auto;
- max-height: calc(100vh - 60px);
- background: white;
- border-radius: 20px;
- padding: 20px;
- overflow: auto;
- }
- .popup-content[data-fullscreen] {
- width: 100%;
- height: 100vh;
- max-height: 100vh;
- border-radius: 0;
- margin: 0;
- }
- .popup-content::-webkit-scrollbar {
- display: none;
- }
- .close-button {
- position: absolute;
- top: 16px;
- right: 22px;
- background: white;
- width: 40px;
- height: 40px;
- border-radius: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- border: 1px solid var(--ion-color-primary);
- font-size: 24px;
- z-index: 1;
- box-shadow: var(--ion-default-box-shadow);
- color: var(--ion-color-primary);
- }
-
+
+
+
- template
- <div
- class="popup-backdrop"
- (click)="dismissOnBackdrop($event)"
- [attr.data-fullscreen]="props.fullscreen ? true : null"
->
- <div class="popup-container">
- <div (click)="dismiss()" class="close-button" fill="clear" *ngIf="props.showCloseButton">
- <ion-icon slot="icon-only" name="close"></ion-icon>
- </div>
- <div class="popup-content" [attr.data-fullscreen]="props.fullscreen ? true : null">
- <plh-template-container
- class="template-container"
- [name]="props.name"
- [templatename]="props.templatename"
- [parent]="props.parent"
- [row]="props.row"
- (emittedValue)="handleEmittedValue($event)"
- ></plh-template-container>
- </div>
- </div>
-</div>
-
templateUrl
+ ./popup.component.html
-
+
+ styleUrl
+ ./popup.component.scss
@@ -185,7 +174,7 @@ Metadata
-
+
Index
@@ -233,7 +222,7 @@ Inputs
-
+
Constructor
@@ -244,7 +233,7 @@ Constructor
-
+
@@ -282,7 +271,7 @@ Constructor
-
+
Inputs
@@ -300,7 +289,7 @@ Inputs
-
+
@@ -309,7 +298,7 @@ Inputs
-
+
Methods
@@ -332,53 +321,51 @@
-
-
-
-
-
+
+
+
+
+
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- value
-
- literal type
-
-
-
- Yes
-
-
-
-
-
-
-
-
-
-
- Returns : void
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ value
+
+ literal type
+
+
+
+ Yes
+
+
+
+
+
+
+
+
+ Returns : void
+
+
+
+
+
@@ -401,53 +388,51 @@
-
-
-
-
-
+
+
+
+
+
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- e
-
- MouseEvent
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : void
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ e
+
+ MouseEvent
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : void
+
+
+
+
+
@@ -470,56 +455,54 @@
-
-
-
-
-
+
+
+
+
+
- When templates emit completed/uncompleted value from standalone popup close the popup
+
When templates emit completed/uncompleted value from standalone popup close the popup
NOTE - we do not want to respond to non-standalone templates as this is done through template nav-actions
-
- Parameters :
-
-
-
-
- Name
- Type
- Optional
-
-
-
-
- value
-
- literal type
-
-
-
- No
-
-
-
-
-
-
-
-
-
-
- Returns : void
-
-
-
-
-
+
+ Parameters :
+
+
+
+
+ Name
+ Type
+ Optional
+
+
+
+
+ value
+
+ literal type
+
+
+
+ No
+
+
+
+
+
+
+
+
+ Returns : void
+
+
+
+
+
@@ -529,94 +512,15 @@
-
+
import { Component, Input } from "@angular/core";
import { ModalController } from "@ionic/angular";
-import { FlowTypes, ITemplateContainerProps } from "../../models";
-import { TemplateContainerComponent } from "../../template-container.component";
+import { FlowTypes, ITemplateContainerProps } from "../../../models";
+import { TemplateContainerComponent } from "../../../template-container.component";
@Component({
- template: `
- <div
- class="popup-backdrop"
- (click)="dismissOnBackdrop($event)"
- [attr.data-fullscreen]="props.fullscreen ? true : null"
- >
- <div class="popup-container">
- <div (click)="dismiss()" class="close-button" fill="clear" *ngIf="props.showCloseButton">
- <ion-icon slot="icon-only" name="close"></ion-icon>
- </div>
- <div class="popup-content" [attr.data-fullscreen]="props.fullscreen ? true : null">
- <plh-template-container
- class="template-container"
- [name]="props.name"
- [templatename]="props.templatename"
- [parent]="props.parent"
- [row]="props.row"
- (emittedValue)="handleEmittedValue($event)"
- ></plh-template-container>
- </div>
- </div>
- </div>
- `,
- styles: [
- `
- .popup-backdrop {
- height: 100vh;
- width: 100%;
- background: rgba(0, 0, 0, 0.6);
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
- .popup-backdrop[data-fullscreen] {
- background: white;
- }
- .popup-container {
- position: relative;
- width: var(--content-max-width);
- padding: 0 2rem;
- margin: auto;
- }
-
- .popup-content {
- margin: 30px auto;
- max-height: calc(100vh - 60px);
- background: white;
- border-radius: 20px;
- padding: 20px;
- overflow: auto;
- }
- .popup-content[data-fullscreen] {
- width: 100%;
- height: 100vh;
- max-height: 100vh;
- border-radius: 0;
- margin: 0;
- }
- .popup-content::-webkit-scrollbar {
- display: none;
- }
- .close-button {
- position: absolute;
- top: 16px;
- right: 22px;
- background: white;
- width: 40px;
- height: 40px;
- border-radius: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- border: 1px solid var(--ion-color-primary);
- font-size: 24px;
- z-index: 1;
- box-shadow: var(--ion-default-box-shadow);
- color: var(--ion-color-primary);
- }
- `,
- ],
+ templateUrl: "./popup.component.html",
+ styleUrl: "./popup.component.scss",
})
/**
* When opening a template as a popup, provide a minimal interface and load
@@ -668,68 +572,33 @@
-
-
-
- .popup-backdrop {
- height: 100vh;
- width: 100%;
- background: rgba(0, 0, 0, 0.6);
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
- .popup-backdrop[data-fullscreen] {
- background: white;
- }
- .popup-container {
- position: relative;
- width: var(--content-max-width);
- padding: 0 2rem;
- margin: auto;
- }
-
- .popup-content {
- margin: 30px auto;
- max-height: calc(100vh - 60px);
- background: white;
- border-radius: 20px;
- padding: 20px;
- overflow: auto;
- }
- .popup-content[data-fullscreen] {
- width: 100%;
- height: 100vh;
- max-height: 100vh;
- border-radius: 0;
- margin: 0;
- }
- .popup-content::-webkit-scrollbar {
- display: none;
- }
- .close-button {
- position: absolute;
- top: 16px;
- right: 22px;
- background: white;
- width: 40px;
- height: 40px;
- border-radius: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- border: 1px solid var(--ion-color-primary);
- font-size: 24px;
- z-index: 1;
- box-shadow: var(--ion-default-box-shadow);
- color: var(--ion-color-primary);
- }
-
+
+ <div
+ class="popup-backdrop"
+ (click)="dismissOnBackdrop($event)"
+ [attr.data-fullscreen]="props.fullscreen ? true : null"
+>
+ <div class="popup-container">
+ <div (click)="dismiss()" class="close-button" fill="clear" *ngIf="props.showCloseButton">
+ <ion-icon slot="icon-only" name="close"></ion-icon>
+ </div>
+ <div class="popup-content" [attr.data-fullscreen]="props.fullscreen ? true : null">
+ <plh-template-container
+ class="template-container"
+ [name]="props.name"
+ [templatename]="props.templatename"
+ [parent]="props.parent"
+ [row]="props.row"
+ (emittedValue)="handleEmittedValue($event)"
+ ></plh-template-container>
+ </div>
+ </div>
+</div>
-
+
+
@@ -755,7 +624,7 @@
diff --git a/documentation/docs/generated/components/TmplAccordionComponent.html b/documentation/docs/generated/components/TmplAccordionComponent.html
index 03e51a7bfa..9d5a378947 100644
--- a/documentation/docs/generated/components/TmplAccordionComponent.html
+++ b/documentation/docs/generated/components/TmplAccordionComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,32 +94,37 @@
- - Components
- - Components
+ -
TmplAccordionComponent
- -
- Info
+
-
+ Info
- -
- Source
+
-
+ Source
- -
- Template
+
-
+ Template
- -
- Styles
+
-
+ Styles
- -
- DOM Tree
+
-
+ DOM Tree
-
+
File
@@ -74,18 +137,18 @@
File
Extends
- TemplateBaseComponent
+ TemplateBaseComponent
Implements
- OnInit
+ OnInit
-
+
Metadata
@@ -100,11 +163,14 @@ Metadata
+
selector
plh-accordion-component
+
+
styleUrls
./accordion.component.scssMetadata
-
+
Index
@@ -163,7 +229,7 @@ Properties
-
+
Properties
@@ -205,7 +271,7 @@
-
+
import { Component, OnInit } from "@angular/core";
import { TemplateBaseComponent } from "../base";
@@ -226,7 +292,7 @@
-
+
<ion-accordion-group
[multiple]="_row.parameter_list?.open_multiple"
[value]="openSections"
@@ -234,12 +300,14 @@
>
<ion-accordion
[value]="childRow.name"
- *ngFor="let childRow of _row.rows; index as i"
+ *ngFor="let childRow of _row.rows | filterDisplayComponent; index as i"
toggle-icon="arrow-down-circle"
[style.z-index]="_row.rows.length - i"
>
<ion-item slot="header" class="accordion-header clear" lines="none">
- <ion-label class="accordion-section-title">{{ childRow.value || "" }}</ion-label>
+ <ion-label class="accordion-section-title ion-text-wrap">{{
+ childRow.value || ""
+ }}</ion-label>
<!-- If custom icon supplied override. Otherwise default will be arrow -->
<ng-template [ngIf]="_row.parameter_list?.open_icon_src" let-open_icon_src="ngIf">
<ng-container
@@ -278,7 +346,7 @@
-
+
./accordion.component.scss
@@ -305,7 +373,7 @@
-
+
@@ -330,8 +398,8 @@
diff --git a/documentation/docs/generated/components/TmplAdvancedDashedBoxComponent.html b/documentation/docs/generated/components/TmplAdvancedDashedBoxComponent.html
index 05af84b5cb..64485fd8cb 100644
--- a/documentation/docs/generated/components/TmplAdvancedDashedBoxComponent.html
+++ b/documentation/docs/generated/components/TmplAdvancedDashedBoxComponent.html
@@ -13,8 +13,66 @@
-
-
+
+
+
@@ -36,32 +94,37 @@
- - Components
- - Components
+ -
TmplAdvancedDashedBoxComponent
- -
- Info
+
-
+ Info
- -
- Source
+
-
+ Source
- -
- Template
+
-
+ Template
- -
- Styles
+
-
+ Styles
- -
- DOM Tree
+
-
+ DOM Tree
-
+
File
@@ -74,18 +137,18 @@
File
Extends
- TemplateBaseComponent
+ TemplateBaseComponent
Implements
- OnInit
+ OnInit
-
+
Metadata
@@ -100,11 +163,14 @@ Metadata
+
selector
plh-advanced-dashed-box
+
+
styleUrls
./advanced-dashed-box.component.scssMetadata
-
+
Index
@@ -190,7 +256,7 @@ Inputs
-
+
Constructor
@@ -209,7 +275,7 @@ Constructor
-
+
Inputs
@@ -236,7 +302,7 @@ Inputs
-
+
Methods
@@ -259,27 +325,27 @@
-
-
-