src/app/shared/components/template/components/base.ts
ITemplateRowProps
styleUrls | ./tmpl-components-common.scss |
constructor()
|
import { Component, Input } from "@angular/core";
import { FlowTypes, ITemplateRowProps } from "../models";
import { TemplateContainerComponent } from "../template-container.component";
@Component({
template: ``,
styleUrls: ["./tmpl-components-common.scss"],
})
/**
* Common methods and data made available to all other components
* By default it provides input setters, and mapping to local variables
*
* Other components can either extend this one, or implement ITemplateRowProps
* in their own way.
* Note, if extending the base component access to data is provided by the declared properties,
* e.g. `_row`
*/
export class TemplateBaseComponent implements ITemplateRowProps {
/** @ignore */
_row: FlowTypes.TemplateRow;
/**
* @ignore
* specific data used in component rendering
**/
@Input() set row(row: FlowTypes.TemplateRow) {
this._row = row;
}
/**
* @ignore
* reference to parent template container - does not have setter as should remain static
**/
@Input() parent: TemplateContainerComponent;
constructor() {}
/**
* Whenever actions are triggered handle in the parent template component
* Actions are grouped by trigger, only emitting specific event handler (e.g. click)
* @ignore
*/
triggerActions(trigger: FlowTypes.TemplateRowAction["trigger"] = "click") {
if (this._row.disabled && this._row.type !== "accordion_section") {
console.log("Click action disabled for ", this._row.name);
return;
}
const action_list = this._row.action_list || [];
const actionsForTrigger = action_list.filter((a) => a.trigger === trigger);
return this.parent.handleActions(actionsForTrigger, this._row);
}
/**
* Update the current value of the row by setting a local variable that matches
* @ignore
**/
setValue(value: any) {
// console.log("setting value", value);
const action: FlowTypes.TemplateRowAction = {
action_id: "set_local",
args: [this._row._nested_name, value],
trigger: "click",
};
return this.parent.handleActions([action], this._row);
}
/** @ignore */
trackByRow = (index: number, row: FlowTypes.TemplateRow) => this.parent.trackByRow(index, row);
}
./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);
}