npm - @pepperi-addons/ngx-lib - Versions diffs - 0.2.59 → 0.2.61-beta.3 - Mend

@pepperi-addons/ngx-lib 0.2.59 → 0.2.61-beta.3

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.

Files changed (301) hide show

package/fesm2015/pepperi-addons-ngx-lib-query-builder.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pepperi-addons-ngx-lib-query-builder.js","sources":["../../../projects/ngx-lib/query-builder/common/model/operator.ts","../../../projects/ngx-lib/query-builder/common/services/type-convertor.service.ts","../../../projects/ngx-lib/query-builder/query-builder-section/query-builder-section.component.ts","../../../projects/ngx-lib/query-builder/query-builder-item/query-builder-item.component.ts","../../../projects/ngx-lib/query-builder/common/model/type-map.ts","../../../projects/ngx-lib/query-builder/common/model/operator-unit.ts","../../../projects/ngx-lib/query-builder/common/services/output-query.service.ts","../../../projects/ngx-lib/query-builder/common/model/type.ts","../../../projects/ngx-lib/query-builder/query-builder.service.ts","../../../projects/ngx-lib/query-builder/query-builder.component.ts","../../../projects/ngx-lib/query-builder/query-builder.module.ts","../../../projects/ngx-lib/query-builder/public-api.ts","../../../projects/ngx-lib/query-builder/pepperi-addons-ngx-lib-query-builder.ts"],"sourcesContent":["import { PepSmartFilterOperators, IPepSmartFilterOperator } from '@pepperi-addons/ngx-lib/smart-filters';\nimport { PepSmartFilterType } from '@pepperi-addons/ngx-lib/smart-filters';\n\nexport interface IPepQueryBuilderOperator {\n legacy: string, //legacy Operator \n smartFilter: IPepSmartFilterOperator, //smart filter operator \n type: PepSmartFilterType[] | null //smart filter type\n}\n\nconst Equals: IPepQueryBuilderOperator = {\n legacy: 'IsEqual',\n smartFilter: PepSmartFilterOperators.Equals,\n type: ['boolean', 'int', 'text']\n};\n\nconst NotEqual: IPepQueryBuilderOperator = {\n legacy: 'IsNotEqual',\n smartFilter: PepSmartFilterOperators.NotEqual,\n type: null\n};\n\nconst LessThan: IPepQueryBuilderOperator = {\n legacy: '<',\n smartFilter: PepSmartFilterOperators.LessThan,\n type: null\n};\n\nconst GreaterThan: IPepQueryBuilderOperator = {\n legacy: '>',\n smartFilter: PepSmartFilterOperators.GreaterThan,\n type: null\n};\n\n/*\nconst GreaterThanOrEquals: IPepQueryBuilderOperator = {\n legacy: {\n operator: '>=',\n type: 'Integer'\n },\n smartFilter: {\n item: PepSmartFilterOperators.GreaterThanOrEquals,\n type: 'int'\n }\n};\n\nconst LessThanOrEquals: IPepQueryBuilderOperator = {\n legacy: {\n operator: '<=',\n type: 'Integer'\n },\n smartFilter: {\n item: PepSmartFilterOperators.LessThanOrEquals,\n type: 'int',\n type: 'Integer'\n }\n}; */\n\nconst NumberRange: IPepQueryBuilderOperator = {\n legacy: 'Between',\n smartFilter: PepSmartFilterOperators.NumberRange,\n type: ['int']\n};\n\nconst Contains: IPepQueryBuilderOperator = {\n legacy: 'Contains',\n smartFilter: PepSmartFilterOperators.Contains,\n type: null\n};\n\n/*\nconst BeginsWith: IPepQueryBuilderOperator = {\n legacy: {\n operator: 'BeginsWith',\n type: 'String'\n },\n smartFilter: {\n item: PepSmartFilterOperators.BeginsWith,\n type: 'text'\n }\n};\n\nconst EndsWith: IPepQueryBuilderOperator = {\n legacy: {\n operator: 'EndsWith',\n type: 'String'\n },\n smartFilter: {\n item: PepSmartFilterOperators.EndsWith,\n type: 'text'\n }\n};\n\nconst Before: IPepQueryBuilderOperator = {\n legacy: {\n operator: 'Before',\n type: 'Date'\n },\n smartFilter: {\n item: PepSmartFilterOperators.Before,\n type: 'date'\n }\n};\n\nconst After: IPepQueryBuilderOperator = {\n legacy: {\n operator: 'After',\n type: 'Date'\n },\n smartFilter: {\n item: PepSmartFilterOperators.After,\n type: 'date'\n }\n}; */\n\nconst InTheLast: IPepQueryBuilderOperator = {\n legacy: 'InTheLast',\n smartFilter: PepSmartFilterOperators.InTheLast,\n type: null\n};\n\nconst NotInTheLast: IPepQueryBuilderOperator = {\n legacy: 'NotInTheLast',\n smartFilter: PepSmartFilterOperators.NotInTheLast,\n type: null\n};\n\nconst Today: IPepQueryBuilderOperator = {\n legacy: 'Today',\n smartFilter: PepSmartFilterOperators.Today,\n type: null\n};\n\nconst ThisWeek: IPepQueryBuilderOperator = {\n legacy: 'ThisWeek',\n smartFilter: PepSmartFilterOperators.ThisWeek,\n type: null\n};\n\nconst ThisMonth: IPepQueryBuilderOperator = {\n legacy: 'ThisMonth',\n smartFilter: PepSmartFilterOperators.ThisMonth,\n type: null\n};\n\nconst DateRange: IPepQueryBuilderOperator = {\n legacy: 'Between',\n smartFilter: PepSmartFilterOperators.DateRange,\n type: ['date-time']\n};\n\nconst DueIn: IPepQueryBuilderOperator = {\n legacy: 'DueIn',\n smartFilter: PepSmartFilterOperators.DueIn,\n type: null\n};\n\nconst NotDueIn: IPepQueryBuilderOperator = {\n legacy: 'NotDueIn',\n smartFilter: PepSmartFilterOperators.NotDueIn,\n type: null\n};\n\nconst On: IPepQueryBuilderOperator = {\n legacy: 'On',\n smartFilter: PepSmartFilterOperators.On,\n type: null\n};\n\nconst IsEmpty: IPepQueryBuilderOperator = {\n legacy: 'IsEmpty',\n smartFilter: PepSmartFilterOperators.IsEmpty,\n type: null\n};\n\nconst IsNotEmpty: IPepQueryBuilderOperator = {\n legacy: 'IsNotEmpty',\n smartFilter: PepSmartFilterOperators.IsNotEmpty,\n type: null\n};\n\nconst In: IPepQueryBuilderOperator = {\n legacy: 'IsEqual',\n smartFilter: PepSmartFilterOperators.In,\n type: ['multi-select']\n};\n\n\nconst PepQueryBuilderOperators = [\n Equals,\n NotEqual,\n LessThan,\n // LessThanOrEquals,\n GreaterThan,\n // GreaterThanOrEquals,\n NumberRange,\n Contains,\n // BeginsWith,\n // EndsWith,\n // After,\n // Before,\n InTheLast,\n NotInTheLast,\n Today,\n ThisWeek,\n ThisMonth,\n DateRange,\n DueIn,\n NotDueIn,\n On,\n IsEmpty,\n IsNotEmpty,\n In\n]\n\n/**\n * gets a smart filter operator item\n * @param operator legacy operator\n * @param type smart filter's type\n * @returns smart filter operator item\n */\nexport function getSmartBuilderOperator(operator: string, type: PepSmartFilterType): IPepSmartFilterOperator | null {\n const smartFilterOperator = PepQueryBuilderOperators.find(item =>\n item.legacy === operator &&\n (item.type === null || item.type.includes(type))\n );\n return smartFilterOperator ? smartFilterOperator.smartFilter : null;\n}\n\n/**\n * gets a legacy operator value\n * @param operator smart filter operator item\n * @param type smart filter's type\n * @returns legacy operator value\n */\nexport function getLegacyOperator(operator: IPepSmartFilterOperator, type: PepSmartFilterType): string | null {\n const legacyOperator = PepQueryBuilderOperators.find(item =>\n item.smartFilter === operator &&\n (item.type === null || item.type.includes(type))\n );\n return legacyOperator ? legacyOperator.legacy : null;\n}\n","import { Injectable } from '@angular/core';\nimport { IPepOption } from '@pepperi-addons/ngx-lib';\n\n@Injectable()\nexport class PepTypeConvertorService {\n private readonly _operators: IPepOption[] = [];\n private readonly _booleans: IPepOption[] = [];\n\n public get operators(): IPepOption[] {\n return this._operators;\n }\n\n public get booleans(): IPepOption[] {\n return this._booleans;\n }\n\n constructor() {\n this.initOperators();\n this.initBooleans();\n }\n\n private initOperators() {\n this._operators.push({\n key: 'AND',\n value: 'And'\n });\n this._operators.push({\n key: 'OR',\n value: 'Or'\n });\n }\n\n private initBooleans() {\n this._booleans.push({\n key: 'True',\n value: 'True'\n });\n this._booleans.push({\n key: 'False',\n value: 'False'\n });\n }\n\n}","import {\n Component,\n EventEmitter,\n Input,\n Output,\n ViewChild,\n ViewContainerRef\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport {\n IPepButtonClickEvent,\n PepButton,\n} from '@pepperi-addons/ngx-lib/button';\nimport { IPepOption } from '@pepperi-addons/ngx-lib';\nimport { PepTypeConvertorService } from '../common/services/type-convertor.service';\nimport { IPepQueryDepth } from '../common/model/structure';\n\n@Component({\n selector: 'pep-query-builder-section',\n templateUrl: './query-builder-section.component.html',\n styleUrls: ['./query-builder-section.component.scss', './query-builder-section.component.theme.scss'],\n})\nexport class PepQueryBuilderSectionComponent {\n @Input() form: FormGroup;\n @Input() depth: IPepQueryDepth;\n @Input() hasFields = true;\n\n @Output()\n createSection = new EventEmitter();\n @Output()\n createItem = new EventEmitter();\n @Output()\n remove = new EventEmitter();\n @Output()\n operatorChange = new EventEmitter();\n\n @ViewChild('sectionContainer', { read: ViewContainerRef, static: true }) sectionContainer: ViewContainerRef;\n\n toggleButtons: Array<PepButton>;\n\n constructor(private _typeConvertorService: PepTypeConvertorService) {\n }\n\n ngOnInit() {\n this.initOperators();\n }\n\n get f() {\n return this.form.controls;\n }\n\n initOperators() {\n this.toggleButtons = this._typeConvertorService.operators.map((operator: IPepOption) => {\n return {\n key: operator.key,\n value: operator.value,\n callback: (event: IPepButtonClickEvent) =>\n this.onOperatorChanged(event)\n } as PepButton\n });\n }\n\n onOperatorChanged(event) {\n if (event?.source?.key) {\n this.f.operator.setValue(event.source.key);\n this.operatorChange.emit();\n }\n }\n\n onAddRuleClicked() {\n this.createItem.emit();\n }\n\n onAddRuleSetClicked() {\n this.createSection.emit();\n }\n\n onDeleteSectionClicked() {\n this.remove.emit();\n }\n\n\n}\n","import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { FormBuilder, FormGroup } from '@angular/forms';\nimport { PepSmartFilterBaseField, IPepSmartFilterField } from '@pepperi-addons/ngx-lib/smart-filters';\nimport { IPepSmartFilterData } from '@pepperi-addons/ngx-lib/smart-filters';\nimport { IPepOption } from '@pepperi-addons/ngx-lib';\nimport { PepTypeConvertorService } from '../common/services/type-convertor.service';\nimport { IPepQueryBuilderFieldContainer } from '../common/model/field';\n\n@Component({\n selector: 'pep-query-builder-item',\n templateUrl: './query-builder-item.component.html',\n styleUrls: ['./query-builder-item.component.scss'],\n})\nexport class PepQueryBuilderItemComponent {\n @Input() formKey: string;\n _fields: Array<IPepQueryBuilderFieldContainer> = [];\n _options: IPepOption[] = [];\n @Input()\n set fields(list: Array<IPepQueryBuilderFieldContainer>) {\n if (list?.length > 0) {\n this._fields = list;\n this._options = list.map(field => {\n return {\n key: field.smart.id,\n value: field.smart.name\n }\n })\n }\n }\n _selectedField: PepSmartFilterBaseField = null;\n @Input()\n set selected(value: IPepQueryBuilderFieldContainer) {\n if (value) {\n this._selectedField = value.smart;\n this.queryForm.fieldType.setValue(value.query.fieldType);\n }\n }\n _filter: IPepSmartFilterData;\n @Input()\n set filter(value: IPepSmartFilterData) {\n if (value) {\n this._filter = value;\n }\n }\n _parentForm: FormGroup;\n @Input()\n set parentForm(value: FormGroup) {\n if (value) {\n this._parentForm = value;\n this.addToParentForm();\n }\n }\n\n @Output()\n filterChange = new EventEmitter();\n @Output()\n remove = new EventEmitter();\n\n form: FormGroup;\n\n constructor(\n private _fb: FormBuilder,\n public typeConvertorService: PepTypeConvertorService\n ) {\n this.setupForm();\n }\n\n ngOnInit() {\n //\n }\n\n get f() {\n return this.form.controls;\n }\n\n get queryForm() {\n return (this.f.query as FormGroup).controls;\n }\n\n setupForm() {\n this.form = this._fb.group({\n smart: this._fb.group({\n fieldId: this._fb.control(null),\n fieldType: this._fb.control(null),\n operator: this._fb.control(null),\n operatorUnit: this._fb.control(null),\n values: this._fb.group({\n first: this._fb.control(null),\n second: this._fb.control(null)\n })\n }),\n query: this._fb.group({\n fieldType: this._fb.control(null)\n })\n });\n }\n\n addToParentForm() {\n this._parentForm.setControl(this.formKey, this.form);\n }\n\n onFieldChanged(key) {\n const item = this._fields.find(field => field.smart.id === key);\n\n this.setupForm();\n this.queryForm.fieldType.setValue(item.query.fieldType);\n this.addToParentForm();\n\n /**\n * hack due to angular's change detection bug -\n * ERROR Error: There is no FormControl instance attached to form control element with name: [formControlName]\n */\n this._selectedField = null;\n setTimeout(() => {\n this._selectedField = item ? item.smart : null;\n }, 0);\n\n this._filter = null;\n }\n\n onFilterChanged() {\n if (this.form.valid) {\n this.filterChange.emit();\n }\n }\n\n onDeleteItemClicked() {\n this.remove.emit();\n }\n\n\n\n}\n","import { PepSmartFilterType } from '@pepperi-addons/ngx-lib/smart-filters';\n\n\nexport class PepQueryBuilderTypeMap {\n private map: Map<string, PepSmartFilterType>;\n\n constructor() {\n this.loadTypes();\n }\n\n private loadTypes() {\n this.map = new Map<string, PepSmartFilterType>();\n this.map.set('Bool', 'boolean');\n this.map.set('JsonBool', 'boolean');\n this.map.set('Integer', 'int');\n this.map.set('Double', 'int');\n this.map.set('String', 'text');\n this.map.set('Guid', 'text');\n this.map.set('Date', 'date');\n this.map.set('DateTime', 'date-time');\n this.map.set('MultipleStringValues', 'multi-select');\n }\n\n /**\n * Converts legacy field type to smart builder type\n * @param type legacy type\n * @returns smart builder field type\n */\n getSmartBuilderType(key: string): PepSmartFilterType | null {\n const item = this.map.get(key);\n return item ? item : null;\n }\n\n}\n\n","\nimport { IPepSmartFilterOperatorUnit, PepSmartFilterOperatorUnits } from '@pepperi-addons/ngx-lib/smart-filters';\n\ninterface IPepQueryBuilderOperationUnit {\n legacy: string,\n smartFilter: IPepSmartFilterOperatorUnit,\n}\n\nconst Days: IPepQueryBuilderOperationUnit = {\n legacy: 'Days',\n smartFilter: PepSmartFilterOperatorUnits.Days\n};\n\nconst Weeks: IPepQueryBuilderOperationUnit = {\n legacy: 'Weeks',\n smartFilter: PepSmartFilterOperatorUnits.Weeks\n};\n\nconst Months: IPepQueryBuilderOperationUnit = {\n legacy: 'Months',\n smartFilter: PepSmartFilterOperatorUnits.Months\n};\n\nconst Years: IPepQueryBuilderOperationUnit = {\n legacy: 'Years',\n smartFilter: PepSmartFilterOperatorUnits.Years\n};\n\nconst PepQueryBuilderOperationUnit = [\n Days,\n Weeks,\n Months,\n Years,\n];\n\n/**\n * gets a smart filter operation unit item\n * @param operationUnit legacy operation unit\n * @returns smart filter operation unit item\n */\nexport function getSmartBuilderOperationUnit(operationUnit: string): IPepSmartFilterOperatorUnit | null {\n const smartFilterOperationUnit: IPepQueryBuilderOperationUnit = PepQueryBuilderOperationUnit.find(unit => unit.legacy === operationUnit);\n return smartFilterOperationUnit ? smartFilterOperationUnit.smartFilter : null;\n}\n\n/**\n * gets a legacy operation unit value\n * @param operationUnit smart filter operation unit item\n * @returns legacy operation unit value\n */\nexport function getLegacyOperationUnit(operationUnit: IPepSmartFilterOperatorUnit): string | null {\n const legacyOperationUnit: IPepQueryBuilderOperationUnit = PepQueryBuilderOperationUnit.find(unit => unit.smartFilter === operationUnit);\n return legacyOperationUnit ? legacyOperationUnit.legacy : null;\n}\n","import { Injectable } from '@angular/core';\nimport { IPepQuerySection, IPepQueryItem } from '../model/legacy';\nimport { getLegacyOperator } from '../model/operator';\nimport { PepOperatorTypes } from '../model/type';\nimport { getLegacyOperationUnit } from '../model/operator-unit';\nimport { PepSmartFilterOperators } from '@pepperi-addons/ngx-lib/smart-filters';\n\n\n@Injectable()\nexport class PepOutputQueryService {\n private _complexIdCounter: number;\n private _expressionIdCounter: number;\n\n constructor() {\n //\n }\n\n /**\n * generates a legacy query structure \n * @param filters UI smart filters structure \n * @returns legacy query\n */\n generateQuery(filters: any) {\n this.initParams();\n\n return this.sectionWalk(filters);\n }\n\n /**\n * init params\n */\n private initParams() {\n this._complexIdCounter = 1;\n this._expressionIdCounter = 1;\n }\n\n /**\n * a recursive function dynamically builds legacy query structure\n * @param current UI object represents either a section or filter component\n * @returns section query data\n */\n private sectionWalk(current: any) {\n let section: IPepQuerySection | IPepQueryItem = null;\n\n Object.keys(current).forEach(key => {\n if (key.includes('item')) {\n section = this.addToSection(section, {\n ExpressionId: (this._expressionIdCounter++).toString(),\n ApiName: current[key].smart.fieldId,\n FieldType: current[key].query.fieldType,\n Operation: getLegacyOperator(current[key].smart.operator, current[key].smart.fieldType),\n Values: this.getItemValues(current[key].smart)\n } as IPepQueryItem, current.operator);\n } else if (key.includes('section')) {\n const childSection = this.sectionWalk(current[key]);\n if (childSection) {\n section = this.addToSection(section, childSection, current.operator);\n }\n }\n });\n\n return section;\n }\n\n /**\n * adds a legacy filter object to the current query structure\n * @param section section query data\n * @param item filter item\n * @param operator query operator\n * @returns \n */\n private addToSection(section: any, item: any, operator: string): any {\n return section ? this.createSection(section, item, operator) : item;\n }\n\n /**\n * creates a legacy complex object\n * @param left LeftNode object\n * @param right RightNode object\n * @param operator query operator\n * @returns legacy complex object\n */\n private createSection(left: any, right: any, operator: string): IPepQuerySection {\n return {\n ComplexId: (this._complexIdCounter++).toString(),\n LeftNode: left,\n RightNode: right,\n Operation: <PepOperatorTypes>operator\n }\n }\n\n /**\n * gets legacy filter values object\n * @param current UI filter object's values\n * @returns an array represents legacy values\n */\n private getItemValues(current: any) {\n let values: any[] = [];\n\n if (current?.values?.first) {\n if (current.operator === PepSmartFilterOperators.In) { //multi select \n values = current.values.first;\n } else if (\n current.operator === PepSmartFilterOperators.InTheLast ||\n current.operator === PepSmartFilterOperators.NotInTheLast ||\n current.operator === PepSmartFilterOperators.DueIn ||\n current.operator === PepSmartFilterOperators.NotDueIn\n ) { //operation unit \n values.push(current.values.first);\n if (current.operatorUnit) {\n values.push(getLegacyOperationUnit(current.operatorUnit));\n }\n } else {\n values.push(current.values.first);\n if (current.values.second) {\n values.push(current.values.second);\n }\n }\n }\n\n return values;\n }\n\n}","export enum PepOperatorTypes {\n And = 'AND',\n Or = 'OR'\n}\n\n","import { Injectable, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';\nimport { FormBuilder, FormGroup } from '@angular/forms';\nimport { BehaviorSubject } from 'rxjs';\nimport { } from 'lodash';\nimport { IPepQueryBuilderField, IPepQuerySection, IPepQueryItem } from './common/model/legacy';\nimport {\n IPepSmartFilterField,\n IPepSmartFilterData,\n PepSmartFilterOperators,\n IPepSmartFilterOperator,\n PepSmartFilterType,\n createSmartFilter,\n createSmartFilterField,\n PepSmartFilterBaseField\n} from '@pepperi-addons/ngx-lib/smart-filters';\nimport { getSmartBuilderOperator } from './common/model/operator';\nimport { PepQueryBuilderSectionComponent } from './query-builder-section/query-builder-section.component';\nimport { PepQueryBuilderItemComponent } from './query-builder-item/query-builder-item.component';\nimport { IPepQueryBuilderFieldContainer } from './common/model/field';\nimport { PepQueryBuilderTypeMap } from './common/model/type-map';\nimport { getSmartBuilderOperationUnit } from './common/model/operator-unit';\nimport { PepOutputQueryService } from './common/services/output-query.service';\nimport { IPepQueryBuilderValues } from './common/model/filter';\nimport { PepOperatorTypes } from './common/model/type';\n\nconst MAX_STRUCTURE_DEPTH = 3;\n\n@Injectable()\nexport class PepQueryBuilderService {\n private _outputQuery$ = new BehaviorSubject<IPepQuerySection | IPepQueryItem>(null);\n\n private _smartFilterFields: Array<IPepQueryBuilderFieldContainer>;\n private _form: FormGroup;\n private _maxStructureDepth = MAX_STRUCTURE_DEPTH;\n\n public outputQuery$ = this._outputQuery$.asObservable();\n\n constructor(private _fb: FormBuilder, private _resolver: ComponentFactoryResolver, private _outputQueryService: PepOutputQueryService) {\n\n }\n\n set maxDepth(value) {\n this._maxStructureDepth = value;\n }\n\n get maxDepth() {\n return this._maxStructureDepth;\n }\n\n set fields(list: Array<IPepQueryBuilderField>) {\n this._smartFilterFields = this.convertToSmartFilterFields(list);\n }\n\n get hasFields(): boolean {\n return this._smartFilterFields?.length > 0;\n }\n\n set form(value: FormGroup) {\n this._form = value;\n }\n\n get form() {\n return this._form;\n }\n\n /**\n * builds a dynamic UI query structure\n * might has a different structure than the query's due to parent-child elements merge\n * @param query legacy query \n * @param containerRef reference to root element\n */\n buildQueryStructure(\n query: IPepQuerySection | IPepQueryItem,\n containerRef: ViewContainerRef\n ) {\n //update root operator \n if (this.hasProperty(query, 'ComplexId') &&\n query?.Operation &&\n query.Operation !== this._form.get('operator').value) {\n this._form.get('operator').setValue(query.Operation);\n }\n this.flatten(this._form.get('operator').value, query, containerRef, this._form, 0);\n }\n\n /**\n * checks if the object contains property\n * @param obj object\n * @param prop property name\n * @returns true if contains, false otherwise\n */\n private hasProperty(obj, prop) {\n return Object.prototype.hasOwnProperty.call(obj, prop);\n }\n\n /**\n * a recursive function dynamically builds UI filters structure\n * @param parentOperator parent legacy complex operator\n * @param current child legacy object (either another complex or expression type)\n * @param containerRef parent element\n * @param parentForm parent form\n */\n private flatten(parentOperator: string, current: IPepQuerySection | IPepQueryItem, containerRef: ViewContainerRef, parentForm: FormGroup, depth: number) {\n if (this.hasProperty(current, 'ComplexId')) {\n const section = current as IPepQuerySection;\n if (parentOperator === current.Operation) {\n this.flatten(current.Operation, section.LeftNode, containerRef, parentForm, depth);\n this.flatten(current.Operation, section.RightNode, containerRef, parentForm, depth);\n } else {\n const result = this.createSection(section.Operation, containerRef, parentForm, depth);\n this.flatten(section.Operation, section.LeftNode, result.containerRef, result.parentForm, depth + 1);\n this.flatten(section.Operation, section.RightNode, result.containerRef, result.parentForm, depth + 1);\n }\n } else if (this.hasProperty(current, 'ExpressionId')) {\n this.createItem(current as IPepQueryItem, containerRef, parentForm);\n }\n }\n\n /**\n * creates a container object of two or more child filter items\n * @param operator AND/OR operator\n * @param containerRef parent element\n * @param parentForm parent form\n * @param depth\n * @returns an object containing the current element and current form\n */\n createSection(operator: PepOperatorTypes, containerRef: ViewContainerRef, parentForm: FormGroup, depth: number) {\n const factory = this._resolver.resolveComponentFactory(PepQueryBuilderSectionComponent);\n const componentRef = containerRef.createComponent(factory);\n\n const sectionGroup = this._fb.group({\n operator: this._fb.control(operator)\n });\n let counter = 1;\n Object.keys(parentForm.controls).forEach(item => { if (item.includes('section')) { counter++; } });\n const formKey = `section${counter}`;\n parentForm.addControl(formKey, sectionGroup);\n\n componentRef.instance.form = sectionGroup;\n componentRef.instance.depth = {\n current: depth,\n max: this._maxStructureDepth\n };\n componentRef.instance.createSection.subscribe(() => {\n const section = this.createSection(PepOperatorTypes.And, componentRef.instance.sectionContainer, sectionGroup, depth + 1);\n this.createItem(null, section.containerRef, section.parentForm);\n });\n componentRef.instance.createItem.subscribe(() => {\n this.createItem(null, componentRef.instance.sectionContainer, sectionGroup);\n });\n componentRef.instance.remove.subscribe(() => {\n parentForm.removeControl(formKey);\n componentRef.destroy();\n this.createOutputQuery();\n });\n componentRef.instance.operatorChange.subscribe(() => {\n this.createOutputQuery();\n });\n\n return {\n containerRef: componentRef.instance.sectionContainer,\n parentForm: sectionGroup\n };\n }\n\n /**\n * creates a component represents filter item (leaf element - has no childs)\n * @param current filter legacy element\n * @param containerRef parent element\n * @param parentForm parent form\n */\n createItem(current: IPepQueryItem, containerRef: ViewContainerRef, parentForm: FormGroup) {\n const factory = this._resolver.resolveComponentFactory(PepQueryBuilderItemComponent);\n const componentRef = containerRef.createComponent(factory);\n\n let counter = 1;\n Object.keys(parentForm.controls).forEach(item => { if (item.includes('item')) { counter++; } });\n const formKey = `item${counter}`;\n\n componentRef.instance.formKey = formKey;\n componentRef.instance.fields = this._smartFilterFields;\n const selectedField = this.getSelectedField(current);\n if (selectedField) {\n componentRef.instance.selected = selectedField;\n if (current) {\n componentRef.instance.filter = this.getFilter(current, selectedField.smart);\n }\n }\n componentRef.instance.parentForm = parentForm;\n componentRef.instance.filterChange.subscribe(() => {\n this.createOutputQuery();\n });\n componentRef.instance.remove.subscribe(() => {\n parentForm.removeControl(formKey);\n componentRef.destroy();\n this.createOutputQuery();\n });\n }\n\n /**\n * creates a smart filter object\n * @param current filter legacy element\n * @param field filter's selected field\n * @returns smart filter object\n */\n private getFilter(current: IPepQueryItem, field: PepSmartFilterBaseField): IPepSmartFilterData | null {\n const operator: IPepSmartFilterOperator = getSmartBuilderOperator(current.Operation, field.type);\n if (operator) {\n const filterValues: IPepQueryBuilderValues = this.getFilterValues(current, operator, field);\n return createSmartFilter(\n current.ApiName,\n operator,\n filterValues.first,\n filterValues.second,\n filterValues.operationUnit\n );\n } else {\n return null;\n }\n }\n\n /**\n * get smart filter field\n * @param current filter legacy element\n * @returns smart filter field, if not found returns the first field\n */\n private getSelectedField(current: IPepQueryItem): IPepQueryBuilderFieldContainer | null {\n if (current) {\n const item = this._smartFilterFields.find(field => field.smart.id === current.ApiName);\n return item ? item : this._smartFilterFields?.length > 0 ? this._smartFilterFields[0] : null;\n } else {\n return this._smartFilterFields?.length > 0 ? this._smartFilterFields[0] : null;\n }\n }\n\n /**\n * gets smart filter's values data\n * @param current filter legacy element\n * @param operator smart filter operator\n * @param field filter's selected field\n * @returns object contains the filter values data\n */\n private getFilterValues(current: IPepQueryItem, operator: IPepSmartFilterOperator, field: any) {\n const data: IPepQueryBuilderValues = {\n first: null,\n second: null,\n operationUnit: null\n };\n\n if (operator === PepSmartFilterOperators.In) { //multi select \n //filter keys don't exist on field options\n data.first = current?.Values?.length > 0 ? current.Values.filter(item => {\n return field.options.find(option => option.key === item);\n }) : null;\n } else if (\n operator === PepSmartFilterOperators.InTheLast ||\n operator === PepSmartFilterOperators.NotInTheLast ||\n operator === PepSmartFilterOperators.DueIn ||\n operator === PepSmartFilterOperators.NotDueIn\n ) { //operation unit\n data.first = current?.Values?.length > 0 ? current.Values[0] : null;\n if (current?.Values?.length === 2) {\n data.operationUnit = getSmartBuilderOperationUnit(current.Values[1]);\n }\n } else {\n data.first = current?.Values?.length > 0 ? current.Values[0] : null;\n data.second = current?.Values?.length === 2 ? current.Values[1] : null;\n }\n\n return data;\n }\n\n /**\n * converts legacy fields to smart filter fields\n * @param fields legacy fields array\n * @returns smart filter fields array\n */\n private convertToSmartFilterFields(fields: Array<IPepQueryBuilderField>): Array<IPepQueryBuilderFieldContainer> {\n if (fields?.length > 0) {\n const typeMapper = new PepQueryBuilderTypeMap();\n\n return fields.map((field) => {\n return {\n smart: createSmartFilterField(\n {\n id: field.FieldID,\n name: field.Title,\n options: field.OptionalValues?.map(option => {\n return {\n key: option.Key,\n value: option.Value\n }\n })\n }, typeMapper.getSmartBuilderType(field.FieldType) as PepSmartFilterType),\n query: {\n fieldType: field.FieldType\n }\n }\n })\n } else {\n return [];\n }\n }\n\n /**\n * creates a legacy output query \n */\n createOutputQuery() {\n if (this._form.valid) {\n const query = this._outputQueryService.generateQuery(this._form.value);\n this._outputQuery$.next(query);\n }\n }\n\n}","import {\n Component,\n EventEmitter,\n Input,\n Output,\n OnInit,\n OnDestroy,\n ViewChild\n} from '@angular/core';\nimport { FormBuilder } from '@angular/forms';\nimport { PepQueryBuilderSectionComponent } from './query-builder-section/query-builder-section.component';\nimport { IPepQueryBuilderField, IPepQuerySection, IPepQueryItem } from './common/model/legacy';\nimport { PepQueryBuilderService } from './query-builder.service';\nimport { PepTypeConvertorService } from './common/services/type-convertor.service';\nimport { PepOutputQueryService } from './common/services/output-query.service';\nimport { IPepQueryDepth } from './common/model/structure';\nimport { PepOperatorTypes } from './common/model/type';\nimport { Subscription } from 'rxjs';\n\n@Component({\n selector: 'pep-query-builder',\n templateUrl: './query-builder.component.html',\n styleUrls: ['./query-builder.component.scss'],\n providers: [PepQueryBuilderService, PepTypeConvertorService, PepOutputQueryService]\n})\nexport class PepQueryBuilderComponent implements OnInit, OnDestroy {\n _query: IPepQuerySection | IPepQueryItem = null;\n @Input()\n set query(object: IPepQuerySection | IPepQueryItem) {\n this._query = object;\n this.loadQuery()\n }\n @Input()\n set fields(list: Array<IPepQueryBuilderField>) {\n this.queryBuilderService.fields = list;\n this.hasFields = this.queryBuilderService.hasFields;\n this.loadQuery();\n }\n @Input()\n set maxDepth(value: number) {\n this.queryBuilderService.maxDepth = value;\n }\n\n @Output()\n queryChange: EventEmitter<IPepQuerySection | IPepQueryItem> = new EventEmitter<IPepQuerySection | IPepQueryItem>();\n @Output()\n formValidationChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n @ViewChild('rootContainer', { static: true }) root: PepQueryBuilderSectionComponent;\n\n _formSubscription$: Subscription;\n _outputQuerySubscription$: Subscription;\n _lastFormValidStatus = true;\n depth: IPepQueryDepth;\n hasFields = false;\n\n constructor(\n private _fb: FormBuilder,\n public queryBuilderService: PepQueryBuilderService\n ) {\n this.setupForm();\n this.initDepth();\n this._formSubscription$ = this.queryBuilderService.form.valueChanges.subscribe((val) => {\n if (this.queryBuilderService.form.valid !== this._lastFormValidStatus) {\n this._lastFormValidStatus = this.queryBuilderService.form.valid;\n this.formValidationChange.emit(this._lastFormValidStatus);\n }\n });\n this._outputQuerySubscription$ = this.queryBuilderService.outputQuery$.subscribe((outputQuery) => {\n this.queryChange.emit(outputQuery);\n });\n }\n\n ngOnInit() {\n //\n }\n\n setupForm() {\n this.queryBuilderService.form = this._fb.group({\n operator: this._fb.control(PepOperatorTypes.And)\n });\n }\n\n initDepth() {\n this.depth = {\n current: 0,\n max: this.queryBuilderService.maxDepth\n }\n }\n\n /**\n * builds UI query structure as soon as both the fields and query loads\n */\n loadQuery() {\n if (\n this._query &&\n this.queryBuilderService.hasFields &&\n this.root?.sectionContainer\n ) {\n this.queryBuilderService.buildQueryStructure(this._query, this.root.sectionContainer);\n }\n }\n\n onCreateSection() {\n const section = this.queryBuilderService.createSection(PepOperatorTypes.And, this.root.sectionContainer, this.queryBuilderService.form, 1);\n this.queryBuilderService.createItem(null, section.containerRef, section.parentForm);\n }\n\n onCreateItem() {\n this.queryBuilderService.createItem(null, this.root.sectionContainer, this.queryBuilderService.form);\n }\n\n onOperatorChange() {\n this.queryBuilderService.createOutputQuery();\n }\n\n ngOnDestroy() {\n if (this._formSubscription$) {\n this._formSubscription$.unsubscribe();\n }\n if (this._outputQuerySubscription$) {\n this._outputQuerySubscription$.unsubscribe();\n }\n }\n\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FlexLayoutModule } from '@angular/flex-layout';\nimport { PepSmartFiltersModule } from '@pepperi-addons/ngx-lib/smart-filters';\nimport { PepSelectModule } from '@pepperi-addons/ngx-lib/select';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';\n\nimport { PepQueryBuilderComponent } from './query-builder.component';\nimport { PepQueryBuilderSectionComponent } from './query-builder-section/query-builder-section.component';\nimport { PepQueryBuilderItemComponent } from './query-builder-item/query-builder-item.component';\n\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n FlexLayoutModule,\n PepSelectModule,\n PepButtonModule,\n PepGroupButtonsModule,\n PepSmartFiltersModule\n ],\n exports: [\n PepQueryBuilderComponent\n ],\n declarations: [\n PepQueryBuilderComponent,\n PepQueryBuilderSectionComponent,\n PepQueryBuilderItemComponent\n ]\n})\nexport class PepQueryBuilderModule { }\n","/*\n * Public API Surface of ngx-lib/query-builder\n */\nexport * from './query-builder.module';\nexport * from './query-builder.component';\nexport * from './query-builder.service';\nexport * from './common/model/legacy';\n\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n\nexport {PepOutputQueryService as ɵa} from './common/services/output-query.service';\nexport {PepTypeConvertorService as ɵb} from './common/services/type-convertor.service';\nexport {PepQueryBuilderItemComponent as ɵd} from './query-builder-item/query-builder-item.component';\nexport {PepQueryBuilderSectionComponent as ɵc} from './query-builder-section/query-builder-section.component';"],"names":[],"mappings":"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"}

package/fesm2015/pepperi-addons-ngx-lib-rich-html-textarea.js CHANGED Viewed

@@ -36,6 +36,7 @@ class PepRichHtmlTextareaComponent {
         this.form = null;
         this.isActive = false;
         this.showTitle = true;
+        this.renderTitle = true;
         this._layoutType = 'form';
         this.inlineMode = false;
         this.valueChange = new EventEmitter();
@@ -100,6 +101,9 @@ class PepRichHtmlTextareaComponent {
             this.setFieldHeight();
             this.setDefaultForm();
             this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+            if (!this.renderTitle) {
+                this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
+            }
         }
         this.quillContent = this.value;
     }
@@ -194,9 +198,9 @@ class PepRichHtmlTextareaComponent {
 PepRichHtmlTextareaComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-rich-html-textarea',
-                template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container pep-report-textarea\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': !isFormView && rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"isFormView\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n                [maxFieldCharacters]=\"inlineMode && !disabled && !readonly ? maxFieldCharacters : 0\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"quillContent?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table', 'active': active, 'ignore-disabled': disabled }\">\n                <textarea [hidden]=\"true\" matInput [formControlName]=\"key\"></textarea>\n\n                <ng-container *ngIf=\"inlineMode; then inlineBlock; else notInlineBlock\"></ng-container>\n\n                <ng-template #inlineBlock>\n                    <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: false}\"></ng-container>\n                </ng-template>\n                <ng-template #notInlineBlock>\n\n                    <!-- We can use the quill-view-html\n                    <quill-view-html class=\"body-sm rich-text-cont \"\n                    [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\" [content]=\"value | pepSafeHtml\"\n                    theme=\"snow\" [style.height]=\"fieldHeight\"></quill-view-html> \n                -->\n\n                    <div class=\"body-sm rich-text-cont \"\n                        [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                        [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                    </div>\n                </ng-template>\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n                    [disabled]=\"disabled || readonly\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n                    (iconClick)=\"openDialog()\">\n                </pep-textbox-icon>\n                <mat-error>\n                    <span class=\"body-xs\"\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n                </mat-error>\n\n            </mat-form-field>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <div class=\"pep-textarea-card-container card-flex-container\"\n            [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n            [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n            (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n            <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n                }}:&nbsp;</span>\n            <span [id]=\"key\" class=\"body-sm value wrap\" [innerHtml]=\"value | pepSafeHtml\"></span>\n            <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n                [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\n                <mat-icon>\n                    <pep-icon name=\"system_edit\">\n                    </pep-icon>\n                </mat-icon>\n            </button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <div class=\"pep-textarea-card-container card-flex-container one-row\">\n                    <span [id]=\"key\" class=\"wrap\" [innerHtml]=\"value | pepSafeHtml\"></span>\n                </div>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>\n\n<ng-template #richTextEditorDialogTemplate>\n    <div class=\"rich-text-editor-container\">\n        <button mat-button [mat-dialog-close]=\"null\" class=\"pep-button icon-button md weak pull-right flip\">\n            <mat-icon>\n                <pep-icon name=\"system_close\">\n                </pep-icon>\n            </mat-icon>\n        </button>\n        <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: true}\"></ng-container>\n        <div mat-dialog-actions class=\" pep-border-top\">\n            <div class=\"pep-spacing-element-negative\">\n                <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                    {{'ACTIONS.CANCEL' | translate}}\n                </button>\n                <button mat-button [mat-dialog-close]=\"quillContentDialog || ''\" [disabled]=\"disabled\"\n                    class=\"pep-spacing-element pep-button md strong \">\n                    {{'ACTIONS.SAVE' | translate}}\n                </button>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #quilTemplate let-inDialog=\"inDialog\">\n    <quill-editor id=\"{{inDialog ? 'quill-editor-dialog' : 'quill-editor-inline'}}\"\n        [class]=\"inDialog ? 'dialog-quill' : 'inline-quill'\" [ngClass]=\"{ 'rich-text-cont': !inDialog }\"\n        placeholder=\"{{'RICH_TEXTAREA.HINT' | translate}}\" [ngModel]=\"inDialog ? quillContentDialog : quillContent\"\n        [sanitize]=\"true\" [readOnly]=\"disabled\" [maxLength]=\"maxFieldCharacters\" [required]=\"mandatory\"\n        (onEditorCreated)=\"onEditorCreated($event, inDialog)\" (onContentChanged)=\"onContentChanged($event, inDialog)\"\n        (onBlur)=\"onBlur($event, inDialog)\" (onFocus)=\"onFocus($event, inDialog)\" theme=\"\">\n        <div *ngIf=\"!disabled\" quill-editor-toolbar>\n            <div class=\"pep-spacing-element-negative\">\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.font\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-font select-arrow\">\n                        <option selected></option>\n                        <option value=\"serif\"></option>\n                        <option value=\"monospace\"></option>\n                    </select>\n                    <select *ngIf=\"toolbarOptions?.size\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-size select-arrow\">\n                        <option value=\"small\"></option>\n                        <option selected></option>\n                        <option value=\"large\"></option>\n                        <option value=\"huge\"></option>\n                    </select>\n                </span>\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.header\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-header select-arrow\">\n                        <option value=\"1\"></option>\n                        <option value=\"2\"></option>\n                        <option value=\"3\"></option>\n                        <!-- \n                        <option value=\"4\"></option>\n                        <option value=\"5\"></option>\n                        <option value=\"6\"></option> \n                        -->\n                        <option value=\"false\" selected></option>\n                    </select>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.bold\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-bold\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.italic\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-italic\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.underline\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-underline\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.strike\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-strike\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.link\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-link\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.image\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-image\"></button>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.ordered\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"ordered\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.bullet\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"bullet\"></button>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.color\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-color\"></select>\n                    <select *ngIf=\"toolbarOptions?.background\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-background\"></select>\n                </span>\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.align\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-align\">\n                        <option selected></option>\n                        <option value=\"center\"></option>\n                        <option value=\"right\"></option>\n                        <option value=\"justify\"></option>\n                    </select>\n                </span>\n            </div>\n        </div>\n    </quill-editor>\n</ng-template>",
+                template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container pep-report-textarea\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': !isFormView && rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n                [disabled]=\"disabled\"\n                [maxFieldCharacters]=\"inlineMode && !disabled && !readonly ? maxFieldCharacters : 0\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"quillContent?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table', 'active': active, 'ignore-disabled': disabled }\">\n                <textarea [hidden]=\"true\" matInput [formControlName]=\"key\"></textarea>\n\n                <ng-container *ngIf=\"inlineMode; then inlineBlock; else notInlineBlock\"></ng-container>\n\n                <ng-template #inlineBlock>\n                    <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: false}\"></ng-container>\n                </ng-template>\n                <ng-template #notInlineBlock>\n\n                    <!-- We can use the quill-view-html\n                    <quill-view-html class=\"body-sm rich-text-cont \"\n                    [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\" [content]=\"value | pepSafeHtml\"\n                    theme=\"snow\" [style.height]=\"fieldHeight\"></quill-view-html> \n                -->\n\n                    <div class=\"body-sm rich-text-cont \"\n                        [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                        [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                    </div>\n                </ng-template>\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n                    [disabled]=\"disabled || readonly\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n                    (iconClick)=\"openDialog()\">\n                </pep-textbox-icon>\n                <mat-error>\n                    <span class=\"body-xs\"\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n                </mat-error>\n\n            </mat-form-field>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <div class=\"pep-textarea-card-container card-flex-container\"\n            [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n            [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n            (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n            <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n                }}:&nbsp;</span>\n            <span [id]=\"key\" class=\"body-sm value wrap\" [innerHtml]=\"value | pepSafeHtml\"></span>\n            <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n                [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\n                <mat-icon>\n                    <pep-icon name=\"system_edit\">\n                    </pep-icon>\n                </mat-icon>\n            </button>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <div class=\"pep-textarea-card-container card-flex-container one-row\">\n                    <span [id]=\"key\" class=\"wrap\" [innerHtml]=\"value | pepSafeHtml\"></span>\n                </div>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>\n\n<ng-template #richTextEditorDialogTemplate>\n    <div class=\"rich-text-editor-container\">\n        <button mat-button [mat-dialog-close]=\"null\" class=\"pep-button icon-button md weak pull-right flip\">\n            <mat-icon>\n                <pep-icon name=\"system_close\">\n                </pep-icon>\n            </mat-icon>\n        </button>\n        <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: true}\"></ng-container>\n        <div mat-dialog-actions class=\" pep-border-top\">\n            <div class=\"pep-spacing-element-negative\">\n                <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                    {{'ACTIONS.CANCEL' | translate}}\n                </button>\n                <button mat-button [mat-dialog-close]=\"quillContentDialog || ''\" [disabled]=\"disabled\"\n                    class=\"pep-spacing-element pep-button md strong \">\n                    {{'ACTIONS.SAVE' | translate}}\n                </button>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #quilTemplate let-inDialog=\"inDialog\">\n    <quill-editor id=\"{{inDialog ? 'quill-editor-dialog' : 'quill-editor-inline'}}\"\n        [class]=\"inDialog ? 'dialog-quill' : 'inline-quill'\" [ngClass]=\"{ 'rich-text-cont': !inDialog }\"\n        placeholder=\"{{'RICH_TEXTAREA.HINT' | translate}}\" [ngModel]=\"inDialog ? quillContentDialog : quillContent\"\n        [sanitize]=\"true\" [readOnly]=\"disabled\" [maxLength]=\"maxFieldCharacters\" [required]=\"mandatory\"\n        (onEditorCreated)=\"onEditorCreated($event, inDialog)\" (onContentChanged)=\"onContentChanged($event, inDialog)\"\n        (onBlur)=\"onBlur($event, inDialog)\" (onFocus)=\"onFocus($event, inDialog)\" theme=\"\">\n        <div *ngIf=\"!disabled\" quill-editor-toolbar>\n            <div class=\"pep-spacing-element-negative\">\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.font\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-font select-arrow\">\n                        <option selected></option>\n                        <option value=\"serif\"></option>\n                        <option value=\"monospace\"></option>\n                    </select>\n                    <select *ngIf=\"toolbarOptions?.size\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-size select-arrow\">\n                        <option value=\"small\"></option>\n                        <option selected></option>\n                        <option value=\"large\"></option>\n                        <option value=\"huge\"></option>\n                    </select>\n                </span>\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.header\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-header select-arrow\">\n                        <option value=\"1\"></option>\n                        <option value=\"2\"></option>\n                        <option value=\"3\"></option>\n                        <!-- \n                        <option value=\"4\"></option>\n                        <option value=\"5\"></option>\n                        <option value=\"6\"></option> \n                        -->\n                        <option value=\"false\" selected></option>\n                    </select>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.bold\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-bold\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.italic\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-italic\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.underline\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-underline\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.strike\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-strike\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.link\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-link\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.image\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-image\"></button>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.ordered\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"ordered\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.bullet\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"bullet\"></button>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.color\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-color\"></select>\n                    <select *ngIf=\"toolbarOptions?.background\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-background\"></select>\n                </span>\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.align\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-align\">\n                        <option selected></option>\n                        <option value=\"center\"></option>\n                        <option value=\"right\"></option>\n                        <option value=\"justify\"></option>\n                    </select>\n                </span>\n            </div>\n        </div>\n    </quill-editor>\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{height:inherit;display:block}.pep-textarea-container ::ng-deep.mat-form-field-infix,.pepperi-textarea-container ::ng-deep.mat-form-field-infix{margin-left:calc(.75rem * -1);margin-left:calc(var(--pep-spacing-md, .75rem) * -1)}.pep-textarea-container.right-alignment ::ng-deep.mat-form-field-infix,.pepperi-textarea-container.right-alignment ::ng-deep.mat-form-field-infix{margin-left:unset;margin-right:calc(.75rem * -1);margin-right:calc(var(--pep-spacing-md, .75rem) * -1)}.vertical-separator{display:none}"]
+                styles: [".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button{width:1rem!important;height:1rem!important}.pep-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex{padding:0}:host{height:inherit;display:block}.pep-textarea-container ::ng-deep.mat-form-field-infix,.pepperi-textarea-container ::ng-deep.mat-form-field-infix{margin-left:calc(.75rem * -1);margin-left:calc(var(--pep-spacing-md, .75rem) * -1)}.pep-textarea-container.right-alignment ::ng-deep.mat-form-field-infix,.pepperi-textarea-container.right-alignment ::ng-deep.mat-form-field-infix{margin-left:unset;margin-right:calc(.75rem * -1);margin-right:calc(var(--pep-spacing-md, .75rem) * -1)}.vertical-separator{display:none}", ".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button{width:1rem!important;height:1rem!important}.pep-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex{padding:0}.pep-report-textarea ::ng-deep.mat-form-field-flex,.pepperi-report-textarea ::ng-deep.mat-form-field-flex{background:transparent!important}.mat-form-field.mat-form-field-disabled .mat-form-field-flex{color:#1a1a1a;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}.right-alignment quill-editor.inline-quill::ng-deep .ql-container .ql-editor{padding-right:unset;padding-left:calc(.5rem + 1rem);padding-left:calc(var(--pep-spacing-sm, .5rem) + 1rem)}quill-editor.inline-quill::ng-deep .ql-container .ql-editor{width:calc(100% + 1rem);padding-right:calc(.5rem + 1rem);padding-right:calc(var(--pep-spacing-sm, .5rem) + 1rem)}quill-editor ::ng-deep .ql-toolbar{display:flex;padding:0!important;border:unset}quill-editor ::ng-deep .ql-toolbar .ql-transparent{opacity:.9}quill-editor ::ng-deep .ql-toolbar .ql-formats{margin-right:0!important;margin-bottom:.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats button{height:2.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats button svg{width:1.25rem!important;float:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-stroke{stroke:rgba(26,26,26,.8);stroke:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.8)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-fill{fill:rgba(26,26,26,.8);fill:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.8)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item{outline:unset!important;width:100%;height:auto;padding:.25rem .5rem;padding:var(--pep-spacing-xs,.25rem) var(--pep-spacing-sm,.5rem);display:grid}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:hover{background:rgba(26,26,26,.16);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.16)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);background:rgba(26,26,26,.24)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.24)!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled{box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:rgba(26,26,26,.04)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled:after{border:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker,quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-icon-picker{width:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label{outline:none;display:grid;grid-auto-flow:column;align-items:center;line-height:1rem;border:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label svg{width:1.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label:after{content:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjE2IgogICB3aWR0aD0iMTYiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMiIKICAgICBkPSJNNS44MDAzMjE0OCw5LjI4Njc0MzU0IEwxMS4yNTQyODI0LDEzLjIwMjc1ODMgQzExLjY2NjEzMDksMTMuNTg1MDgzIDEyLjMzMzg2OTEsMTMuNTg1MDgzIDEyLjc0NTcxNzYsMTMuMjAyNzU4MyBMMTguMTk5Njc4NSw5LjI4Njc0MzU0IEMxOC42MTE1MjcsOC45MDQ0MTg4MiAxOS4yNzkyNjUyLDguOTA0NDE4ODIgMTkuNjkxMTEzNyw5LjI4Njc0MzU0IEMyMC4xMDI5NjIxLDkuNjY5MDY4MjYgMjAuMTAyOTYyMSwxMC4yODg5MzkxIDE5LjY5MTExMzcsMTAuNjcxMjYzOCBMMTMuNDkxNDM1MSwxNi40MjY1MTI5IEMxMi42Njc3MzgzLDE3LjE5MTE2MjQgMTEuMzMyMjYxNywxNy4xOTExNjI0IDEwLjUwODU2NDksMTYuNDI2NTEyOSBMNC4zMDg4ODYzMywxMC42NzEyNjM4IEMzLjg5NzAzNzg5LDEwLjI4ODkzOTEgMy44OTcwMzc4OSw5LjY2OTA2ODI2IDQuMzA4ODg2MzMsOS4yODY3NDM1NCBDNC43MjA3MzQ3OCw4LjkwNDQxODgyIDUuMzg4NDczMDMsOC45MDQ0MTg4MiA1LjgwMDMyMTQ4LDkuMjg2NzQzNTQgWiIKICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgZmlsbC1vcGFjaXR5PSIuNSIgLz4KPC9zdmc+Cg==\");cursor:pointer;display:grid;height:inherit;justify-content:center;align-content:center}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.select-arrow .ql-picker-label:before{line-height:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.select-arrow .ql-picker-label svg{display:none}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-options{border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);box-sizing:content-box;padding:unset;box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.32);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.32);border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options{padding:.25rem .5rem;padding:var(--pep-spacing-xs,.25rem) var(--pep-spacing-sm,.5rem);width:140px}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options:focus{outline:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options .ql-picker-item:focus{outline:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#1766a6;stroke:hsl(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#1766a6;fill:hsl(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label{border:unset}quill-editor ::ng-deep .ql-toolbar .vertical-separator{border-color:rgba(26,26,26,.24);border-color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)}@media (max-width:568px){quill-editor ::ng-deep .ql-toolbar .ql-list{display:none}}@media (max-width:599px){quill-editor ::ng-deep .ql-toolbar .ql-italic,quill-editor ::ng-deep .ql-toolbar .ql-underline{display:none}}@media (max-width:460px){quill-editor ::ng-deep .ql-toolbar .ql-header,quill-editor ::ng-deep .ql-toolbar .ql-image,quill-editor ::ng-deep .ql-toolbar .ql-italic,quill-editor ::ng-deep .ql-toolbar .ql-list,quill-editor ::ng-deep .ql-toolbar .ql-underline{display:none}}quill-editor ::ng-deep .ql-container{height:16rem;border:unset;border-top:1px solid rgba(26,26,26,.24)!important;border-top:1px solid hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)!important}quill-editor ::ng-deep .ql-container .ql-editor{padding:.5rem 0;padding:var(--pep-spacing-sm,.5rem) 0}quill-editor ::ng-deep .ql-container .ql-editor.ql-blank:before{right:0;left:0}quill-editor ::ng-deep .ql-container .ql-tooltip.ql-flip{left:0!important}"]
             },] }
 ];
 PepRichHtmlTextareaComponent.ctorParameters = () => [
@@ -220,6 +224,7 @@ PepRichHtmlTextareaComponent.propDecorators = {
     form: [{ type: Input }],
     isActive: [{ type: Input }],
     showTitle: [{ type: Input }],
+    renderTitle: [{ type: Input }],
     layoutType: [{ type: Input }],
     inlineMode: [{ type: Input }],
     toolbarOptions: [{ type: Input }],

package/fesm2015/pepperi-addons-ngx-lib-rich-html-textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-rich-html-textarea.js","sources":["../../../projects/ngx-lib/rich-html-textarea/rich-html-textarea.component.ts","../../../projects/ngx-lib/rich-html-textarea/rich-html-textarea.module.ts","../../../projects/ngx-lib/rich-html-textarea/public-api.ts","../../../projects/ngx-lib/rich-html-textarea/pepperi-addons-ngx-lib-rich-html-textarea.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n Input,\n Output,\n EventEmitter,\n ChangeDetectionStrategy,\n OnDestroy,\n ElementRef,\n Renderer2,\n TemplateRef,\n ViewChild,\n OnChanges,\n SimpleChanges,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport {\n PepLayoutType,\n PepCustomizationService,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n PepRichHtmlTextareaField,\n} from '@pepperi-addons/ngx-lib';\nimport {\n PepDialogService,\n PepDialogData,\n} from '@pepperi-addons/ngx-lib/dialog';\nimport { SafeHtml, DomSanitizer } from '@angular/platform-browser';\n\nexport interface IPepRichHtmlTextareaToolbarOptions {\n font?: any;\n size?: any;\n header?: any;\n bold?: any;\n italic?: any;\n underline?: any;\n strike?: any;\n link?: any;\n image?: any;\n ordered?: any;\n bullet?: any;\n color?: any;\n background?: any;\n align?: any;\n}\n\n@Component({\n selector: 'pep-rich-html-textarea',\n templateUrl: './rich-html-textarea.component.html',\n styleUrls: ['./rich-html-textarea.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepRichHtmlTextareaComponent\n implements OnInit, OnChanges, OnDestroy {\n @Input() key = '';\n @Input() value = '';\n @Input() label = '';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() readonly = false;\n @Input() maxFieldCharacters: number;\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n private _rowSpan = 1;\n @Input()\n set rowSpan(value) {\n this._rowSpan = value;\n this.setFieldHeight();\n }\n get rowSpan(): number {\n return this._rowSpan;\n }\n\n private _visible = true;\n @Input()\n set visible(visible: boolean) {\n this._visible = visible;\n if (visible) {\n this.renderer.removeClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n } else {\n this.renderer.addClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n }\n }\n get visible(): boolean {\n return this._visible;\n }\n\n controlType = 'richhtmltextarea';\n\n @Input() form: FormGroup = null;\n @Input() isActive = false;\n @Input() showTitle = true;\n\n private _layoutType: PepLayoutType = 'form';\n @Input()\n set layoutType(value: PepLayoutType) {\n this._layoutType = value;\n this.setFieldHeight();\n }\n get layoutType(): PepLayoutType {\n return this._layoutType;\n }\n\n @Input() inlineMode = false;\n\n protected _toolbarOptions: IPepRichHtmlTextareaToolbarOptions;\n @Input()\n get toolbarOptions(): IPepRichHtmlTextareaToolbarOptions {\n return this._toolbarOptions;\n }\n set toolbarOptions(options: IPepRichHtmlTextareaToolbarOptions) {\n if (options) {\n this._toolbarOptions = options;\n }\n }\n\n @Output()\n valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n @ViewChild('richTextEditorDialogTemplate', { read: TemplateRef })\n richTextEditorDialogTemplate: TemplateRef<any>;\n quillContent = '';\n quillContentDialog = '';\n\n fieldHeight = '';\n standAlone = false;\n active = false;\n\n constructor(\n private sanitizer: DomSanitizer,\n private dialogService: PepDialogService,\n private customizationService: PepCustomizationService,\n private renderer: Renderer2,\n private element: ElementRef\n ) {\n this.toolbarOptions = this.getDefaultToolbarOptions();\n }\n\n private setFieldHeight(): void {\n this.fieldHeight = this.customizationService.calculateFieldHeight(\n this.layoutType,\n this.rowSpan,\n this.standAlone\n );\n }\n\n private setDefaultForm(): void {\n const pepField = new PepRichHtmlTextareaField({\n key: this.key,\n value: this.value,\n mandatory: this.mandatory,\n readonly: this.readonly,\n disabled: this.disabled,\n maxFieldCharacters: this.maxFieldCharacters,\n });\n this.form = this.customizationService.getDefaultFromGroup(pepField);\n }\n\n ngOnInit(): void {\n if (this.form === null) {\n this.standAlone = true;\n this.setFieldHeight();\n this.setDefaultForm();\n\n this.renderer.addClass(\n this.element.nativeElement,\n PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n );\n }\n\n this.quillContent = this.value;\n }\n\n ngOnChanges(): void {\n if (this.standAlone) {\n this.setDefaultForm();\n }\n }\n\n ngOnDestroy(): void {\n //\n }\n\n getDefaultToolbarOptions(): IPepRichHtmlTextareaToolbarOptions {\n return {\n font: false,\n size: false,\n header: true,\n bold: true,\n italic: true,\n underline: true,\n strike: false,\n link: true,\n image: true,\n ordered: true,\n bullet: true,\n color: true,\n background: false,\n align: true,\n };\n }\n\n changeValue(value: any): void {\n if (value !== this.value) {\n this.value = value;\n this.quillContent = value;\n this.customizationService.updateFormFieldValue(\n this.form,\n this.key,\n value\n );\n this.valueChange.emit(value);\n }\n }\n\n cardTemplateClicked(event: any): void {\n this.openDialog();\n }\n\n openDialog(): void {\n const config = this.dialogService.getDialogConfig(\n {\n // minWidth: '50vw',\n // maxWidth: '90vw',\n // maxHeight: '90vh',\n },\n 'large'\n );\n\n // If disabled open regular modal as html mode.\n if (this.disabled \|\| this.readonly) {\n const data = new PepDialogData({\n title: this.label,\n content: this.quillContent,\n showFooter: false,\n });\n this.dialogService.openDefaultDialog(data, config);\n } else {\n this.quillContentDialog = this.quillContent;\n const dialogRef = this.dialogService.openDialog(\n this.richTextEditorDialogTemplate,\n {},\n config\n );\n\n dialogRef.afterClosed().subscribe((value) => {\n if (value !== undefined && value !== null) {\n this.changeValue(value);\n }\n });\n }\n }\n\n // Init quillContent in case that there are html tags...\n onEditorCreated(quill: any, inDialog: boolean): void {\n if (!inDialog) {\n this.quillContent = quill.getText();\n }\n }\n\n onContentChanged(obj: any, inDialog: boolean): void {\n if (inDialog) {\n this.quillContentDialog = obj.html;\n } else {\n this.quillContent = obj.html;\n }\n }\n\n onBlur(obj: any, inDialog: boolean): void {\n if (!inDialog) {\n this.active = false;\n this.changeValue(this.quillContent);\n }\n }\n\n onFocus(obj: any, inDialog: boolean): void {\n if (!inDialog) {\n this.active = true;\n }\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule, FormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatDialogModule } from '@angular/material/dialog';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemEdit,\n pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepTextboxIconModule } from '@pepperi-addons/ngx-lib/textbox-icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\n\nimport { QuillModule } from 'ngx-quill';\n\nimport { PepRichHtmlTextareaComponent } from './rich-html-textarea.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n FormsModule,\n // Material modules,\n MatCommonModule,\n MatButtonModule,\n MatFormFieldModule,\n MatInputModule,\n MatMenuModule,\n MatIconModule,\n MatDialogModule,\n // External modules\n QuillModule.forRoot(),\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n PepFieldTitleModule,\n PepTextboxIconModule,\n PepDialogModule,\n ],\n exports: [PepRichHtmlTextareaComponent],\n declarations: [PepRichHtmlTextareaComponent],\n})\nexport class PepRichHtmlTextareaModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemEdit,\n pepIconSystemClose,\n ]);\n }\n}\n","/\n Public API Surface of ngx-lib/rich-html-textarea\n /\nexport from './rich-html-textarea.module';\nexport * from './rich-html-textarea.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-rich-html-textarea.js","sources":["../../../projects/ngx-lib/rich-html-textarea/rich-html-textarea.component.ts","../../../projects/ngx-lib/rich-html-textarea/rich-html-textarea.module.ts","../../../projects/ngx-lib/rich-html-textarea/public-api.ts","../../../projects/ngx-lib/rich-html-textarea/pepperi-addons-ngx-lib-rich-html-textarea.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n Input,\n Output,\n EventEmitter,\n ChangeDetectionStrategy,\n OnDestroy,\n ElementRef,\n Renderer2,\n TemplateRef,\n ViewChild,\n OnChanges,\n SimpleChanges,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport {\n PepLayoutType,\n PepCustomizationService,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n PepRichHtmlTextareaField,\n} from '@pepperi-addons/ngx-lib';\nimport {\n PepDialogService,\n PepDialogData,\n} from '@pepperi-addons/ngx-lib/dialog';\nimport { SafeHtml, DomSanitizer } from '@angular/platform-browser';\n\nexport interface IPepRichHtmlTextareaToolbarOptions {\n font?: any;\n size?: any;\n header?: any;\n bold?: any;\n italic?: any;\n underline?: any;\n strike?: any;\n link?: any;\n image?: any;\n ordered?: any;\n bullet?: any;\n color?: any;\n background?: any;\n align?: any;\n}\n\n@Component({\n selector: 'pep-rich-html-textarea',\n templateUrl: './rich-html-textarea.component.html',\n styleUrls: ['./rich-html-textarea.component.scss', './rich-html-textarea.component.theme.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepRichHtmlTextareaComponent\n implements OnInit, OnChanges, OnDestroy {\n @Input() key = '';\n @Input() value = '';\n @Input() label = '';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() readonly = false;\n @Input() maxFieldCharacters: number;\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n private _rowSpan = 1;\n @Input()\n set rowSpan(value) {\n this._rowSpan = value;\n this.setFieldHeight();\n }\n get rowSpan(): number {\n return this._rowSpan;\n }\n\n private _visible = true;\n @Input()\n set visible(visible: boolean) {\n this._visible = visible;\n if (visible) {\n this.renderer.removeClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n } else {\n this.renderer.addClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n }\n }\n get visible(): boolean {\n return this._visible;\n }\n\n controlType = 'richhtmltextarea';\n\n @Input() form: FormGroup = null;\n @Input() isActive = false;\n @Input() showTitle = true;\n @Input() renderTitle = true;\n\n private _layoutType: PepLayoutType = 'form';\n @Input()\n set layoutType(value: PepLayoutType) {\n this._layoutType = value;\n this.setFieldHeight();\n }\n get layoutType(): PepLayoutType {\n return this._layoutType;\n }\n\n @Input() inlineMode = false;\n\n protected _toolbarOptions: IPepRichHtmlTextareaToolbarOptions;\n @Input()\n get toolbarOptions(): IPepRichHtmlTextareaToolbarOptions {\n return this._toolbarOptions;\n }\n set toolbarOptions(options: IPepRichHtmlTextareaToolbarOptions) {\n if (options) {\n this._toolbarOptions = options;\n }\n }\n\n @Output()\n valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n @ViewChild('richTextEditorDialogTemplate', { read: TemplateRef })\n richTextEditorDialogTemplate: TemplateRef<any>;\n quillContent = '';\n quillContentDialog = '';\n\n fieldHeight = '';\n standAlone = false;\n active = false;\n\n constructor(\n private sanitizer: DomSanitizer,\n private dialogService: PepDialogService,\n private customizationService: PepCustomizationService,\n private renderer: Renderer2,\n private element: ElementRef\n ) {\n this.toolbarOptions = this.getDefaultToolbarOptions();\n }\n\n private setFieldHeight(): void {\n this.fieldHeight = this.customizationService.calculateFieldHeight(\n this.layoutType,\n this.rowSpan,\n this.standAlone\n );\n }\n\n private setDefaultForm(): void {\n const pepField = new PepRichHtmlTextareaField({\n key: this.key,\n value: this.value,\n mandatory: this.mandatory,\n readonly: this.readonly,\n disabled: this.disabled,\n maxFieldCharacters: this.maxFieldCharacters,\n });\n this.form = this.customizationService.getDefaultFromGroup(pepField);\n }\n\n ngOnInit(): void {\n if (this.form === null) {\n this.standAlone = true;\n this.setFieldHeight();\n this.setDefaultForm();\n\n this.renderer.addClass(\n this.element.nativeElement,\n PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n );\n\n if (!this.renderTitle) {\n this.renderer.addClass(\n this.element.nativeElement,\n PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME\n );\n }\n }\n\n this.quillContent = this.value;\n }\n\n ngOnChanges(): void {\n if (this.standAlone) {\n this.setDefaultForm();\n }\n }\n\n ngOnDestroy(): void {\n //\n }\n\n getDefaultToolbarOptions(): IPepRichHtmlTextareaToolbarOptions {\n return {\n font: false,\n size: false,\n header: true,\n bold: true,\n italic: true,\n underline: true,\n strike: false,\n link: true,\n image: true,\n ordered: true,\n bullet: true,\n color: true,\n background: false,\n align: true,\n };\n }\n\n changeValue(value: any): void {\n if (value !== this.value) {\n this.value = value;\n this.quillContent = value;\n this.customizationService.updateFormFieldValue(\n this.form,\n this.key,\n value\n );\n this.valueChange.emit(value);\n }\n }\n\n cardTemplateClicked(event: any): void {\n this.openDialog();\n }\n\n openDialog(): void {\n const config = this.dialogService.getDialogConfig(\n {\n // minWidth: '50vw',\n // maxWidth: '90vw',\n // maxHeight: '90vh',\n },\n 'large'\n );\n\n // If disabled open regular modal as html mode.\n if (this.disabled \|\| this.readonly) {\n const data = new PepDialogData({\n title: this.label,\n content: this.quillContent,\n showFooter: false,\n });\n this.dialogService.openDefaultDialog(data, config);\n } else {\n this.quillContentDialog = this.quillContent;\n const dialogRef = this.dialogService.openDialog(\n this.richTextEditorDialogTemplate,\n {},\n config\n );\n\n dialogRef.afterClosed().subscribe((value) => {\n if (value !== undefined && value !== null) {\n this.changeValue(value);\n }\n });\n }\n }\n\n // Init quillContent in case that there are html tags...\n onEditorCreated(quill: any, inDialog: boolean): void {\n if (!inDialog) {\n this.quillContent = quill.getText();\n }\n }\n\n onContentChanged(obj: any, inDialog: boolean): void {\n if (inDialog) {\n this.quillContentDialog = obj.html;\n } else {\n this.quillContent = obj.html;\n }\n }\n\n onBlur(obj: any, inDialog: boolean): void {\n if (!inDialog) {\n this.active = false;\n this.changeValue(this.quillContent);\n }\n }\n\n onFocus(obj: any, inDialog: boolean): void {\n if (!inDialog) {\n this.active = true;\n }\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule, FormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatDialogModule } from '@angular/material/dialog';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemEdit,\n pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepTextboxIconModule } from '@pepperi-addons/ngx-lib/textbox-icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\n\nimport { QuillModule } from 'ngx-quill';\n\nimport { PepRichHtmlTextareaComponent } from './rich-html-textarea.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n FormsModule,\n // Material modules,\n MatCommonModule,\n MatButtonModule,\n MatFormFieldModule,\n MatInputModule,\n MatMenuModule,\n MatIconModule,\n MatDialogModule,\n // External modules\n QuillModule.forRoot(),\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n PepFieldTitleModule,\n PepTextboxIconModule,\n PepDialogModule,\n ],\n exports: [PepRichHtmlTextareaComponent],\n declarations: [PepRichHtmlTextareaComponent],\n})\nexport class PepRichHtmlTextareaModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemEdit,\n pepIconSystemClose,\n ]);\n }\n}\n","/\n Public API Surface of ngx-lib/rich-html-textarea\n /\nexport from './rich-html-textarea.module';\nexport * from './rich-html-textarea.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;MAoDa,4BAA4B;IAmFrC,YACY,SAAuB,EACvB,aAA+B,EAC/B,oBAA6C,EAC7C,QAAmB,EACnB,OAAmB;QAJnB,cAAS,GAAT,SAAS,CAAc;QACvB,kBAAa,GAAb,aAAa,CAAkB;QAC/B,yBAAoB,GAApB,oBAAoB,CAAyB;QAC7C,aAAQ,GAAR,QAAQ,CAAW;QACnB,YAAO,GAAP,OAAO,CAAY;QAtFtB,QAAG,GAAG,EAAE,CAAC;QACT,UAAK,GAAG,EAAE,CAAC;QACX,UAAK,GAAG,EAAE,CAAC;QACX,cAAS,GAAG,KAAK,CAAC;QAClB,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QAEjB,eAAU,GAA2B,4BAA4B,CAAC;QAEnE,aAAQ,GAAG,CAAC,CAAC;QAUb,aAAQ,GAAG,IAAI,CAAC;QAoBxB,gBAAW,GAAG,kBAAkB,CAAC;QAExB,SAAI,GAAc,IAAI,CAAC;QACvB,aAAQ,GAAG,KAAK,CAAC;QACjB,cAAS,GAAG,IAAI,CAAC;QACjB,gBAAW,GAAG,IAAI,CAAC;QAEpB,gBAAW,GAAkB,MAAM,CAAC;QAUnC,eAAU,GAAG,KAAK,CAAC;QAc5B,gBAAW,GAAyB,IAAI,YAAY,EAAU,CAAC;QAI/D,iBAAY,GAAG,EAAE,CAAC;QAClB,uBAAkB,GAAG,EAAE,CAAC;QAExB,gBAAW,GAAG,EAAE,CAAC;QACjB,eAAU,GAAG,KAAK,CAAC;QACnB,WAAM,GAAG,KAAK,CAAC;QASX,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;KACzD;IA/ED,IACI,OAAO,CAAC,KAAK;QACb,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,cAAc,EAAE,CAAC;KACzB;IACD,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,QAAQ,CAAC;KACxB;IAGD,IACI,OAAO,CAAC,OAAgB;QACxB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,OAAO,EAAE;YACT,IAAI,CAAC,QAAQ,CAAC,WAAW,CACrB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,gBAAgB,CACnB,CAAC;SACL;aAAM;YACH,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAClB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,gBAAgB,CACnB,CAAC;SACL;KACJ;IACD,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,QAAQ,CAAC;KACxB;IAUD,IACI,UAAU,CAAC,KAAoB;QAC/B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,cAAc,EAAE,CAAC;KACzB;IACD,IAAI,UAAU;QACV,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;IAKD,IACI,cAAc;QACd,OAAO,IAAI,CAAC,eAAe,CAAC;KAC/B;IACD,IAAI,cAAc,CAAC,OAA2C;QAC1D,IAAI,OAAO,EAAE;YACT,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;SAClC;KACJ;IAwBO,cAAc;QAClB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,oBAAoB,CAC7D,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,UAAU,CAClB,CAAC;KACL;IAEO,cAAc;QAClB,MAAM,QAAQ,GAAG,IAAI,wBAAwB,CAAC;YAC1C,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;SAC9C,CAAC,CAAC;QACH,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;KACvE;IAED,QAAQ;QACJ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,cAAc,EAAE,CAAC;YAEtB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAClB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,uBAAuB,CAAC,4BAA4B,CACvD,CAAC;YAEF,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;gBACnB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAClB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,uBAAuB,CAAC,uCAAuC,CAClE,CAAC;aACL;SACJ;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;KAClC;IAED,WAAW;QACP,IAAI,IAAI,CAAC,UAAU,EAAE;YACjB,IAAI,CAAC,cAAc,EAAE,CAAC;SACzB;KACJ;IAED,WAAW;;KAEV;IAED,wBAAwB;QACpB,OAAO;YACH,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,IAAI;YACZ,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,IAAI;YACZ,SAAS,EAAE,IAAI;YACf,MAAM,EAAE,KAAK;YACb,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,IAAI;YACX,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE,IAAI;YACX,UAAU,EAAE,KAAK;YACjB,KAAK,EAAE,IAAI;SACd,CAAC;KACL;IAED,WAAW,CAAC,KAAU;QAClB,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE;YACtB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,oBAAoB,CAAC,oBAAoB,CAC1C,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,GAAG,EACR,KAAK,CACR,CAAC;YACF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAChC;KACJ;IAED,mBAAmB,CAAC,KAAU;QAC1B,IAAI,CAAC,UAAU,EAAE,CAAC;KACrB;IAED,UAAU;QACN,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAC7C;;;;SAIC,EACD,OAAO,CACV,CAAC;;QAGF,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAChC,MAAM,IAAI,GAAG,IAAI,aAAa,CAAC;gBAC3B,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,YAAY;gBAC1B,UAAU,EAAE,KAAK;aACpB,CAAC,CAAC;YACH,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;SACtD;aAAM;YACH,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY,CAAC;YAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,UAAU,CAC3C,IAAI,CAAC,4BAA4B,EACjC,EAAE,EACF,MAAM,CACT,CAAC;YAEF,SAAS,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,CAAC,KAAK;gBACpC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;oBACvC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;iBAC3B;aACJ,CAAC,CAAC;SACN;KACJ;;IAGD,eAAe,CAAC,KAAU,EAAE,QAAiB;QACzC,IAAI,CAAC,QAAQ,EAAE;YACX,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,OAAO,EAAE,CAAC;SACvC;KACJ;IAED,gBAAgB,CAAC,GAAQ,EAAE,QAAiB;QACxC,IAAI,QAAQ,EAAE;YACV,IAAI,CAAC,kBAAkB,GAAG,GAAG,CAAC,IAAI,CAAC;SACtC;aAAM;YACH,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,IAAI,CAAC;SAChC;KACJ;IAED,MAAM,CAAC,GAAQ,EAAE,QAAiB;QAC9B,IAAI,CAAC,QAAQ,EAAE;YACX,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACvC;KACJ;IAED,OAAO,CAAC,GAAQ,EAAE,QAAiB;QAC/B,IAAI,CAAC,QAAQ,EAAE;YACX,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACtB;KACJ;;;YAvPJ,SAAS,SAAC;gBACP,QAAQ,EAAE,wBAAwB;gBAClC,40WAAkD;gBAElD,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAClD;;;YAxBkB,YAAY;YAH3B,gBAAgB;YANhB,uBAAuB;YATvB,SAAS;YADT,UAAU;;;kBA8CT,KAAK;oBACL,KAAK;oBACL,KAAK;wBACL,KAAK;uBACL,KAAK;uBACL,KAAK;iCACL,KAAK;yBACL,KAAK;sBAGL,KAAK;sBAUL,KAAK;mBAqBL,KAAK;uBACL,KAAK;wBACL,KAAK;0BACL,KAAK;yBAGL,KAAK;yBASL,KAAK;6BAGL,KAAK;0BAUL,MAAM;2CAGN,SAAS,SAAC,8BAA8B,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;;;MC1EvD,yBAAyB;IAClC,YAAoB,eAAgC;QAAhC,oBAAe,GAAf,eAAe,CAAiB;QAChD,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC;YAC/B,iBAAiB;YACjB,kBAAkB;SACrB,CAAC,CAAC;KACN;;;YA/BJ,QAAQ,SAAC;gBACN,OAAO,EAAE;oBACL,YAAY;oBACZ,mBAAmB;oBACnB,WAAW;;oBAEX,eAAe;oBACf,eAAe;oBACf,kBAAkB;oBAClB,cAAc;oBACd,aAAa;oBACb,aAAa;oBACb,eAAe;;oBAEf,WAAW,CAAC,OAAO,EAAE;;oBAErB,eAAe;oBACf,aAAa;oBACb,mBAAmB;oBACnB,oBAAoB;oBACpB,eAAe;iBAClB;gBACD,OAAO,EAAE,CAAC,4BAA4B,CAAC;gBACvC,YAAY,EAAE,CAAC,4BAA4B,CAAC;aAC/C;;;YApCG,eAAe;;;ACfnB;;;;ACAA;;;;;;"}

package/fesm2015/pepperi-addons-ngx-lib-select.js CHANGED Viewed

@@ -34,6 +34,7 @@ class PepSelectComponent {
         this.isActive = false;
         this.showTitle = true;
         this.emptyOption = true;
+        this.renderTitle = true;
         this.valueChange = new EventEmitter();
         this.formValidationChange = new EventEmitter();
         this.standAlone = false;
@@ -118,6 +119,9 @@ class PepSelectComponent {
             this.standAlone = true;
             this.setDefaultForm();
             this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+            if (!this.renderTitle) {
+                this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
+            }
         }
     }
     ngOnChanges(changes) {
@@ -183,9 +187,9 @@ class PepSelectComponent {
 PepSelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-select',
-                template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate>\n        <ng-container *ngIf=\"type == 'multi'; then multiSelectBlock; else regularSelectBlock\"></ng-container>\n        <ng-template #regularSelectBlock>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n                <mat-select #select [required]=\"mandatory ? mandatory : undefined\" matInput disableOptionCentering\n                    class=\"body-sm text-align-{{ xAlignment }}\" [id]=\"key\"\n                    [ngClass]=\"{'right-alignment': xAlignment === 'right'}\"\n                    [placeholder]=\"disabled || readonly ? '' : ('SELECT.HINT' | translate)\"\n                    [(ngModel)]=\"selectedValueModel\" [ngModelOptions]=\"{standalone: true}\" [disabled]=\"disabled\"\n                    (selectionChange)=\"selectionChange($event)\" (openedChange)=\"openedChange($event)\"\n                    title=\"{{ fieldFormattedValue }}\">\n                    <mat-option *ngIf=\"emptyOption\" value=\"\" [title]=\"'LIST.NONE' | translate\">{{ 'LIST.NONE' |\n                        translate }}</mat-option>\n                    <mat-option *ngFor=\"let option of options\" [value]=\"option.key\" [title]=\"option.value\">{{\n                        option.value }}</mat-option>\n                </mat-select>\n                <mat-error>\n                    <span class=\"body-xs\" [title]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"\n                        [innerText]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"></span>\n                </mat-error>\n            </mat-form-field>\n        </ng-template>\n        <ng-template #multiSelectBlock>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n                <mat-select #select multiple [required]=\"mandatory ? mandatory : undefined\" matInput\n                    disableOptionCentering class=\"body-sm text-align-{{ xAlignment }}\" [id]=\"key\"\n                    [ngClass]=\"{'right-alignment': xAlignment === 'right'}\"\n                    [placeholder]=\"disabled || readonly ? '' : ('SELECT.HINT' | translate)\"\n                    [(ngModel)]=\"selectedValuesModel\" [ngModelOptions]=\"{standalone: true}\" [disabled]=\"disabled\"\n                    (openedChange)=\"openedChange($event)\" title=\"{{ fieldFormattedValue }}\">\n                    <mat-option *ngFor=\"let option of options\" [value]=\"option.key\" [title]=\"option.value\">{{\n                        option.value }}</mat-option>\n                </mat-select>\n                <mat-error><span class=\"body-xs\" [title]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"\n                        [innerText]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"> </span>\n                </mat-error>\n            </mat-form-field>\n        </ng-template>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title *ngIf=\"!parentFieldKey\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n            [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n        </pep-field-title>\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n                [class]=\"'text-align-' + xAlignment\" (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ fieldFormattedValue }}\" class=\"body-sm value\">{{ fieldFormattedValue\n                    }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{readonly: disabled}\"\n                title=\"{{ fieldFormattedValue }}\">{{ fieldFormattedValue }}</span>\n        </ng-template>\n    </ng-container>\n</ng-container>",
+                template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate>\n        <ng-container *ngIf=\"type == 'multi'; then multiSelectBlock; else regularSelectBlock\"></ng-container>\n        <ng-template #regularSelectBlock>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n                <mat-select #select [required]=\"mandatory ? mandatory : undefined\" matInput disableOptionCentering\n                    class=\"body-sm text-align-{{ xAlignment }}\" [id]=\"key\"\n                    [ngClass]=\"{'right-alignment': xAlignment === 'right'}\"\n                    [placeholder]=\"disabled || readonly ? '' : ('SELECT.HINT' | translate)\"\n                    [(ngModel)]=\"selectedValueModel\" [ngModelOptions]=\"{standalone: true}\" [disabled]=\"disabled\"\n                    (selectionChange)=\"selectionChange($event)\" (openedChange)=\"openedChange($event)\"\n                    title=\"{{ fieldFormattedValue }}\">\n                    <mat-option *ngIf=\"emptyOption\" value=\"\" [title]=\"'LIST.NONE' | translate\">{{ 'LIST.NONE' |\n                        translate }}</mat-option>\n                    <mat-option *ngFor=\"let option of options\" [value]=\"option.key\" [title]=\"option.value\">{{\n                        option.value }}</mat-option>\n                </mat-select>\n                <mat-error>\n                    <span class=\"body-xs\" [title]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"\n                        [innerText]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"></span>\n                </mat-error>\n            </mat-form-field>\n        </ng-template>\n        <ng-template #multiSelectBlock>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n                <mat-select #select multiple [required]=\"mandatory ? mandatory : undefined\" matInput\n                    disableOptionCentering class=\"body-sm text-align-{{ xAlignment }}\" [id]=\"key\"\n                    [ngClass]=\"{'right-alignment': xAlignment === 'right'}\"\n                    [placeholder]=\"disabled || readonly ? '' : ('SELECT.HINT' | translate)\"\n                    [(ngModel)]=\"selectedValuesModel\" [ngModelOptions]=\"{standalone: true}\" [disabled]=\"disabled\"\n                    (openedChange)=\"openedChange($event)\" title=\"{{ fieldFormattedValue }}\">\n                    <mat-option *ngFor=\"let option of options\" [value]=\"option.key\" [title]=\"option.value\">{{\n                        option.value }}</mat-option>\n                </mat-select>\n                <mat-error><span class=\"body-xs\" [title]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"\n                        [innerText]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"> </span>\n                </mat-error>\n            </mat-form-field>\n        </ng-template>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title *ngIf=\"!parentFieldKey && renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n        </pep-field-title>\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n                [class]=\"'text-align-' + xAlignment\" (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ fieldFormattedValue }}\" class=\"body-sm value\">{{ fieldFormattedValue\n                    }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{readonly: disabled}\"\n                title=\"{{ fieldFormattedValue }}\">{{ fieldFormattedValue }}</span>\n        </ng-template>\n    </ng-container>\n</ng-container>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{height:inherit;display:grid}:host>*{align-self:center}"]
+                styles: [":host{height:inherit;display:grid}:host>*{align-self:center}::ng-deep .mat-select-trigger{display:flex;align-content:center;height:inherit}::ng-deep .mat-select-value{max-width:inherit;display:grid;align-self:center}::ng-deep .mat-select-arrow{width:1.5rem;height:1.5rem;margin:0;display:flex;align-items:center;justify-content:center}::ng-deep .mat-select-arrow:after{content:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjE2IgogICB3aWR0aD0iMTYiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMiIKICAgICBkPSJNNS44MDAzMjE0OCw5LjI4Njc0MzU0IEwxMS4yNTQyODI0LDEzLjIwMjc1ODMgQzExLjY2NjEzMDksMTMuNTg1MDgzIDEyLjMzMzg2OTEsMTMuNTg1MDgzIDEyLjc0NTcxNzYsMTMuMjAyNzU4MyBMMTguMTk5Njc4NSw5LjI4Njc0MzU0IEMxOC42MTE1MjcsOC45MDQ0MTg4MiAxOS4yNzkyNjUyLDguOTA0NDE4ODIgMTkuNjkxMTEzNyw5LjI4Njc0MzU0IEMyMC4xMDI5NjIxLDkuNjY5MDY4MjYgMjAuMTAyOTYyMSwxMC4yODg5MzkxIDE5LjY5MTExMzcsMTAuNjcxMjYzOCBMMTMuNDkxNDM1MSwxNi40MjY1MTI5IEMxMi42Njc3MzgzLDE3LjE5MTE2MjQgMTEuMzMyMjYxNywxNy4xOTExNjI0IDEwLjUwODU2NDksMTYuNDI2NTEyOSBMNC4zMDg4ODYzMywxMC42NzEyNjM4IEMzLjg5NzAzNzg5LDEwLjI4ODkzOTEgMy44OTcwMzc4OSw5LjY2OTA2ODI2IDQuMzA4ODg2MzMsOS4yODY3NDM1NCBDNC43MjA3MzQ3OCw4LjkwNDQxODgyIDUuMzg4NDczMDMsOC45MDQ0MTg4MiA1LjgwMDMyMTQ4LDkuMjg2NzQzNTQgWiIKICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgZmlsbC1vcGFjaXR5PSIuNSIgLz4KPC9zdmc+Cg==\");cursor:pointer;width:1rem;height:1rem}::ng-deep .mat-select-disabled{pointer-events:none}::ng-deep .mat-select-disabled .mat-select-arrow:after{content:none}::ng-deep .mat-select-panel .mat-pseudo-checkbox{width:1rem;height:1rem;border-radius:.25rem}::ng-deep .mat-select-panel .mat-pseudo-checkbox:after{width:0;height:0}::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-checked{content:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==\")}.right-alignment{direction:rtl}", "mat-select{outline:none}::ng-deep .mat-select-disabled .mat-select-value{color:rgba(26,26,26,.7);color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.7)}::ng-deep .mat-select-arrow-wrapper{transform:unset!important;vertical-align:unset}::ng-deep .mat-select-arrow-wrapper .mat-select-arrow{border:0}::ng-deep .mat-select-arrow-wrapper .mat-select-arrow:after{color:#1a1a1a;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}::ng-deep .mat-select-panel .mat-option{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-select-panel .mat-option:hover{background:rgba(26,26,26,.16);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.16)}::ng-deep .mat-select-panel .mat-option:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);background:rgba(26,26,26,.24)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.24)!important}::ng-deep .mat-select-panel .mat-option:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-select-panel .mat-option:disabled{box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:rgba(26,26,26,.04)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)!important}::ng-deep .mat-select-panel .mat-option:disabled:after{border:unset}::ng-deep .mat-select-panel .mat-option:disabled .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .mat-select-panel .mat-option:disabled .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .mat-select-panel .mat-option.mat-selected{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}::ng-deep .mat-select-panel .mat-option.mat-selected:hover{background:rgba(26,26,26,.16);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.16)}::ng-deep .mat-select-panel .mat-option.mat-selected:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);background:rgba(26,26,26,.24)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.24)!important}::ng-deep .mat-select-panel .mat-option.mat-selected:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}::ng-deep .mat-select-panel .mat-option.mat-selected:disabled{box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:rgba(26,26,26,.04)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)!important}::ng-deep .mat-select-panel .mat-option.mat-selected:disabled:after{border:unset}::ng-deep .mat-select-panel .mat-option.mat-selected:disabled .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .mat-select-panel .mat-option.mat-selected:disabled .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .mat-select-panel .mat-pseudo-checkbox{background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%))}::ng-deep .mat-select-panel .mat-pseudo-checkbox:hover{background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16);border:1px solid hsl(0,0%,calc(10% + 20%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 20%))}::ng-deep .mat-select-panel .mat-pseudo-checkbox:active{background:#e0e0e0;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),88%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.32);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.32);border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),var(--pep-color-regular-l,10%))}::ng-deep .mat-select-panel .mat-pseudo-checkbox:disabled{box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:#e0e0e0!important;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),88%)!important;box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.04)!important;box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.04)!important;border:1px solid rgba(26,26,26,.08);border:1px solid hsla(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),var(--pep-color-regular-l,10%),.08)}::ng-deep .mat-select-panel .mat-pseudo-checkbox:disabled:after{border:unset}::ng-deep .mat-select-panel .mat-pseudo-checkbox:disabled .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .mat-select-panel .mat-pseudo-checkbox:disabled .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-checked,::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate{background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 20%));border:1px solid hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),calc(var(--pep-color-system-primary-l, 10%) + 20%))}::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-checked:hover,::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate:hover{background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16);border:1px solid hsl(0,0%,calc(10% + 20%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 20%))}::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-checked:active,::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate:active{background:#e0e0e0;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),88%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.32);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.32);border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),var(--pep-color-regular-l,10%))}::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-checked:disabled,::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate:disabled{box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:#e0e0e0!important;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),88%)!important;box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.04)!important;box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.04)!important;border:1px solid rgba(26,26,26,.08);border:1px solid hsla(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),var(--pep-color-regular-l,10%),.08)}::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-checked:disabled:after,::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate:disabled:after{border:unset}::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-checked:disabled .svg-icon,::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate:disabled .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-checked:disabled .svg-icon.stroke,::ng-deep .mat-select-panel .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate:disabled .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}::ng-deep .mat-select-panel .mat-pseudo-checkbox:after{color:#1a1a1a!important;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))!important}"]
             },] }
 ];
 PepSelectComponent.ctorParameters = () => [
@@ -211,6 +215,7 @@ PepSelectComponent.propDecorators = {
     isActive: [{ type: Input }],
     showTitle: [{ type: Input }],
     emptyOption: [{ type: Input }],
+    renderTitle: [{ type: Input }],
     valueChange: [{ type: Output }],
     formValidationChange: [{ type: Output }],
     select: [{ type: ViewChild, args: ['select',] }]

package/fesm2015/pepperi-addons-ngx-lib-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-select.js","sources":["../../../projects/ngx-lib/select/select.component.ts","../../../projects/ngx-lib/select/select.module.ts","../../../projects/ngx-lib/select/public-api.ts","../../../projects/ngx-lib/select/pepperi-addons-ngx-lib-select.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n OnChanges,\n Input,\n Output,\n EventEmitter,\n ViewChild,\n ElementRef,\n ChangeDetectionStrategy,\n OnDestroy,\n Renderer2,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { MatSelect } from '@angular/material/select';\nimport {\n PepLayoutType,\n PepCustomizationService,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n PepSelectFieldType,\n PepSelectField,\n IPepOption,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-select',\n templateUrl: './select.component.html',\n styleUrls: ['./select.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepSelectComponent implements OnChanges, OnInit, OnDestroy {\n @Input() key = '';\n @Input() value = '';\n @Input() label = '';\n @Input() type: PepSelectFieldType = 'select';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() readonly = false;\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n @Input() rowSpan = 1;\n @Input() options: Array<IPepOption> = [];\n\n private _visible = true;\n @Input()\n set visible(visible: boolean) {\n this._visible = visible;\n if (visible) {\n this.renderer.removeClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n } else {\n this.renderer.addClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n }\n }\n get visible(): boolean {\n return this._visible;\n }\n\n controlType = 'select';\n\n // @Input() field: PepFieldBase;\n @Input() form: FormGroup = null;\n @Input() layoutType: PepLayoutType = 'form';\n @Input() parentFieldKey: string = null;\n @Input() isActive = false;\n @Input() showTitle = true;\n @Input() emptyOption = true;\n\n @Output()\n valueChange: EventEmitter<string> = new EventEmitter<string>();\n @Output()\n formValidationChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n @ViewChild('select') select: MatSelect;\n\n standAlone = false;\n isInEditMode = false;\n isMulti = false;\n selectedValuesModel: string[];\n selectedValueModel: string;\n fieldFormattedValue = '';\n\n constructor(\n private customizationService: PepCustomizationService,\n private renderer: Renderer2,\n private element: ElementRef\n ) { }\n\n private addOptionsIfNeeded(): void {\n if (this.isMulti) {\n // Go gor all selected and add to options if not exist\n // for (let i = 0; i < this.selectedValuesModel.length; i++) {\n for (const selectedValue of this.selectedValuesModel) {\n let valueNotExist = false;\n\n if (\n this.options &&\n !this.options.find((opt) => opt.key === selectedValue)\n ) {\n valueNotExist = true;\n }\n\n // Add it to options.\n if (valueNotExist) {\n this.options.push({\n key: selectedValue,\n value: selectedValue,\n });\n }\n }\n } else {\n if (\n this.value &&\n this.value !== '' &&\n this.options &&\n !this.options.find((opt) => opt.key === this.value)\n ) {\n this.options.push({ key: this.value, value: this.value });\n }\n }\n }\n\n private setFieldFormattedValue(value: any): void {\n if (this.isMulti) {\n if (this.selectedValuesModel.length > 0) {\n this.fieldFormattedValue = this.selectedValuesModel\n .map((value) => {\n return this.options.find((opt) => opt.key === value)\n ?.value;\n })\n .join(', ');\n } else {\n this.fieldFormattedValue = '';\n }\n\n // this.fieldFormattedValue = typeof value === 'string' ? value.replace(new RegExp(';', 'g'), ', ') : '';\n } else {\n const selectedOpt = this.options.find((opt) => opt.key === value);\n\n if (selectedOpt) {\n this.fieldFormattedValue = selectedOpt.value;\n }\n }\n }\n\n private setDefaultForm(): void {\n const pepField = new PepSelectField({\n key: this.key,\n value: this.value,\n mandatory: this.mandatory,\n readonly: this.readonly,\n disabled: this.disabled,\n });\n this.form = this.customizationService.getDefaultFromGroup(pepField);\n }\n\n ngOnInit(): void {\n if (this.form === null) {\n this.standAlone = true;\n this.setDefaultForm();\n\n this.renderer.addClass(\n this.element.nativeElement,\n PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n );\n }\n }\n\n ngOnChanges(changes: any): void {\n if (this.standAlone) {\n this.setDefaultForm();\n }\n\n this.isMulti = this.type === 'multi';\n if (this.isMulti) {\n this.selectedValuesModel =\n this.value.length > 0 ? this.value.split(';') : [];\n } else {\n this.selectedValueModel = this.value;\n }\n\n this.addOptionsIfNeeded();\n this.setFieldFormattedValue(this.value);\n }\n\n ngOnDestroy(): void {\n //\n }\n\n selectionChange(event: any): void {\n if (!this.isMulti) {\n this.changeValue(this.selectedValueModel);\n }\n }\n\n openedChange(event: any): void {\n // Only on close.\n if (!event) {\n if (this.isMulti) {\n this.changeValue(this.selectedValuesModel.join(';'));\n }\n\n if (this.isInEditMode) {\n this.isInEditMode = false;\n }\n }\n }\n\n changeValue(value: any): void {\n this.setFieldFormattedValue(value);\n this.customizationService.updateFormFieldValue(\n this.form,\n this.key,\n // value,\n this.fieldFormattedValue,\n this.parentFieldKey\n );\n\n if (this.mandatory) {\n const fieldControl = this.form.controls[this.key];\n if (value) {\n fieldControl.setErrors(null);\n } else {\n fieldControl.setErrors({\n serverError: 'Required',\n });\n }\n this.formValidationChange.emit(this.form.valid);\n }\n\n this.valueChange.emit(value);\n }\n\n cardTemplateClicked(event: any): void {\n this.isInEditMode = true;\n\n setTimeout(() => {\n this.select.open();\n }, 0);\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule, FormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemEdit,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepSelectComponent } from './select.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n FormsModule,\n // Material modules\n MatCommonModule,\n MatButtonModule,\n MatFormFieldModule,\n MatSelectModule,\n MatIconModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n PepFieldTitleModule,\n ],\n exports: [PepSelectComponent],\n declarations: [PepSelectComponent],\n})\nexport class PepSelectModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([pepIconSystemEdit]);\n }\n}\n","/\n Public API Surface of ngx-lib/select\n /\nexport from './select.module';\nexport * from './select.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;MA+Ba,kBAAkB;IAwD3B,YACY,oBAA6C,EAC7C,QAAmB,EACnB,OAAmB;QAFnB,yBAAoB,GAApB,oBAAoB,CAAyB;QAC7C,aAAQ,GAAR,QAAQ,CAAW;QACnB,YAAO,GAAP,OAAO,CAAY;QA1DtB,QAAG,GAAG,EAAE,CAAC;QACT,UAAK,GAAG,EAAE,CAAC;QACX,UAAK,GAAG,EAAE,CAAC;QACX,SAAI,GAAuB,QAAQ,CAAC;QACpC,cAAS,GAAG,KAAK,CAAC;QAClB,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QACjB,eAAU,GAA2B,4BAA4B,CAAC;QAClE,YAAO,GAAG,CAAC,CAAC;QACZ,YAAO,GAAsB,EAAE,CAAC;QAEjC,aAAQ,GAAG,IAAI,CAAC;QAoBxB,gBAAW,GAAG,QAAQ,CAAC;;QAGd,SAAI,GAAc,IAAI,CAAC;QACvB,eAAU,GAAkB,MAAM,CAAC;QACnC,mBAAc,GAAW,IAAI,CAAC;QAC9B,aAAQ,GAAG,KAAK,CAAC;QACjB,cAAS,GAAG,IAAI,CAAC;QACjB,gBAAW,GAAG,IAAI,CAAC;QAG5B,gBAAW,GAAyB,IAAI,YAAY,EAAU,CAAC;QAE/D,yBAAoB,GAA0B,IAAI,YAAY,EAAW,CAAC;QAI1E,eAAU,GAAG,KAAK,CAAC;QACnB,iBAAY,GAAG,KAAK,CAAC;QACrB,YAAO,GAAG,KAAK,CAAC;QAGhB,wBAAmB,GAAG,EAAE,CAAC;KAMpB;IA/CL,IACI,OAAO,CAAC,OAAgB;QACxB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,OAAO,EAAE;YACT,IAAI,CAAC,QAAQ,CAAC,WAAW,CACrB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,gBAAgB,CACnB,CAAC;SACL;aAAM;YACH,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAClB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,gBAAgB,CACnB,CAAC;SACL;KACJ;IACD,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,QAAQ,CAAC;KACxB;IAgCO,kBAAkB;QACtB,IAAI,IAAI,CAAC,OAAO,EAAE;;;YAGd,KAAK,MAAM,aAAa,IAAI,IAAI,CAAC,mBAAmB,EAAE;gBAClD,IAAI,aAAa,GAAG,KAAK,CAAC;gBAE1B,IACI,IAAI,CAAC,OAAO;oBACZ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,aAAa,CAAC,EACxD;oBACE,aAAa,GAAG,IAAI,CAAC;iBACxB;;gBAGD,IAAI,aAAa,EAAE;oBACf,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;wBACd,GAAG,EAAE,aAAa;wBAClB,KAAK,EAAE,aAAa;qBACvB,CAAC,CAAC;iBACN;aACJ;SACJ;aAAM;YACH,IACI,IAAI,CAAC,KAAK;gBACV,IAAI,CAAC,KAAK,KAAK,EAAE;gBACjB,IAAI,CAAC,OAAO;gBACZ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,IAAI,CAAC,KAAK,CAAC,EACrD;gBACE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aAC7D;SACJ;KACJ;IAEO,sBAAsB,CAAC,KAAU;QACrC,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,EAAE;gBACrC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB;qBAC9C,GAAG,CAAC,CAAC,KAAK;;oBACP,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,KAAK,CAAC,0CAC9C,KAAK,CAAC;iBACf,CAAC;qBACD,IAAI,CAAC,IAAI,CAAC,CAAC;aACnB;iBAAM;gBACH,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC;aACjC;;SAGJ;aAAM;YACH,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC;YAElE,IAAI,WAAW,EAAE;gBACb,IAAI,CAAC,mBAAmB,GAAG,WAAW,CAAC,KAAK,CAAC;aAChD;SACJ;KACJ;IAEO,cAAc;QAClB,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC;YAChC,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC,CAAC;QACH,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;KACvE;IAED,QAAQ;QACJ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,cAAc,EAAE,CAAC;YAEtB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAClB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,uBAAuB,CAAC,4BAA4B,CACvD,CAAC;SACL;KACJ;IAED,WAAW,CAAC,OAAY;QACpB,IAAI,IAAI,CAAC,UAAU,EAAE;YACjB,IAAI,CAAC,cAAc,EAAE,CAAC;SACzB;QAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC;QACrC,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,mBAAmB;gBACpB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;SAC1D;aAAM;YACH,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC;SACxC;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAED,WAAW;;KAEV;IAED,eAAe,CAAC,KAAU;QACtB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;SAC7C;KACJ;IAED,YAAY,CAAC,KAAU;;QAEnB,IAAI,CAAC,KAAK,EAAE;YACR,IAAI,IAAI,CAAC,OAAO,EAAE;gBACd,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;aACxD;YAED,IAAI,IAAI,CAAC,YAAY,EAAE;gBACnB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;aAC7B;SACJ;KACJ;IAED,WAAW,CAAC,KAAU;QAClB,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;QACnC,IAAI,CAAC,oBAAoB,CAAC,oBAAoB,CAC1C,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,GAAG;;QAER,IAAI,CAAC,mBAAmB,EACxB,IAAI,CAAC,cAAc,CACtB,CAAC;QAEF,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAClD,IAAI,KAAK,EAAE;gBACP,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;aAChC;iBAAM;gBACH,YAAY,CAAC,SAAS,CAAC;oBACnB,WAAW,EAAE,UAAU;iBAC1B,CAAC,CAAC;aACN;YACD,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACnD;QAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAChC;IAED,mBAAmB,CAAC,KAAU;QAC1B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAEzB,UAAU,CAAC;YACP,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;SACtB,EAAE,CAAC,CAAC,CAAC;KACT;;;YA3NJ,SAAS,SAAC;gBACP,QAAQ,EAAE,YAAY;gBACtB,krKAAsC;gBAEtC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAClD;;;YAbG,uBAAuB;YANvB,SAAS;YAHT,UAAU;;;kBAwBT,KAAK;oBACL,KAAK;oBACL,KAAK;mBACL,KAAK;wBACL,KAAK;uBACL,KAAK;uBACL,KAAK;yBACL,KAAK;sBACL,KAAK;sBACL,KAAK;sBAGL,KAAK;mBAsBL,KAAK;yBACL,KAAK;6BACL,KAAK;uBACL,KAAK;wBACL,KAAK;0BACL,KAAK;0BAEL,MAAM;mCAEN,MAAM;qBAGN,SAAS,SAAC,QAAQ;;;MCvCV,eAAe;IACxB,YAAoB,eAAgC;QAAhC,oBAAe,GAAf,eAAe,CAAiB;QAChD,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC;KAC3D;;;YAtBJ,QAAQ,SAAC;gBACN,OAAO,EAAE;oBACL,YAAY;oBACZ,mBAAmB;oBACnB,WAAW;;oBAEX,eAAe;oBACf,eAAe;oBACf,kBAAkB;oBAClB,eAAe;oBACf,aAAa;;oBAEb,eAAe;oBACf,aAAa;oBACb,mBAAmB;iBACtB;gBACD,OAAO,EAAE,CAAC,kBAAkB,CAAC;gBAC7B,YAAY,EAAE,CAAC,kBAAkB,CAAC;aACrC;;;YAzBG,eAAe;;;ACbnB;;;;ACAA;;;;;;"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-select.js","sources":["../../../projects/ngx-lib/select/select.component.ts","../../../projects/ngx-lib/select/select.module.ts","../../../projects/ngx-lib/select/public-api.ts","../../../projects/ngx-lib/select/pepperi-addons-ngx-lib-select.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n OnChanges,\n Input,\n Output,\n EventEmitter,\n ViewChild,\n ElementRef,\n ChangeDetectionStrategy,\n OnDestroy,\n Renderer2,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { MatSelect } from '@angular/material/select';\nimport {\n PepLayoutType,\n PepCustomizationService,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n PepSelectFieldType,\n PepSelectField,\n IPepOption,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-select',\n templateUrl: './select.component.html',\n styleUrls: ['./select.component.scss', './select.component.theme.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepSelectComponent implements OnChanges, OnInit, OnDestroy {\n @Input() key = '';\n @Input() value = '';\n @Input() label = '';\n @Input() type: PepSelectFieldType = 'select';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() readonly = false;\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n @Input() rowSpan = 1;\n @Input() options: Array<IPepOption> = [];\n\n private _visible = true;\n @Input()\n set visible(visible: boolean) {\n this._visible = visible;\n if (visible) {\n this.renderer.removeClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n } else {\n this.renderer.addClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n }\n }\n get visible(): boolean {\n return this._visible;\n }\n\n controlType = 'select';\n\n // @Input() field: PepFieldBase;\n @Input() form: FormGroup = null;\n @Input() layoutType: PepLayoutType = 'form';\n @Input() parentFieldKey: string = null;\n @Input() isActive = false;\n @Input() showTitle = true;\n @Input() emptyOption = true;\n @Input() renderTitle = true;\n\n @Output()\n valueChange: EventEmitter<string> = new EventEmitter<string>();\n @Output()\n formValidationChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n @ViewChild('select') select: MatSelect;\n\n standAlone = false;\n isInEditMode = false;\n isMulti = false;\n selectedValuesModel: string[];\n selectedValueModel: string;\n fieldFormattedValue = '';\n\n constructor(\n private customizationService: PepCustomizationService,\n private renderer: Renderer2,\n private element: ElementRef\n ) { }\n\n private addOptionsIfNeeded(): void {\n if (this.isMulti) {\n // Go gor all selected and add to options if not exist\n // for (let i = 0; i < this.selectedValuesModel.length; i++) {\n for (const selectedValue of this.selectedValuesModel) {\n let valueNotExist = false;\n\n if (\n this.options &&\n !this.options.find((opt) => opt.key === selectedValue)\n ) {\n valueNotExist = true;\n }\n\n // Add it to options.\n if (valueNotExist) {\n this.options.push({\n key: selectedValue,\n value: selectedValue,\n });\n }\n }\n } else {\n if (\n this.value &&\n this.value !== '' &&\n this.options &&\n !this.options.find((opt) => opt.key === this.value)\n ) {\n this.options.push({ key: this.value, value: this.value });\n }\n }\n }\n\n private setFieldFormattedValue(value: any): void {\n if (this.isMulti) {\n if (this.selectedValuesModel.length > 0) {\n this.fieldFormattedValue = this.selectedValuesModel\n .map((value) => {\n return this.options.find((opt) => opt.key === value)\n ?.value;\n })\n .join(', ');\n } else {\n this.fieldFormattedValue = '';\n }\n\n // this.fieldFormattedValue = typeof value === 'string' ? value.replace(new RegExp(';', 'g'), ', ') : '';\n } else {\n const selectedOpt = this.options.find((opt) => opt.key === value);\n\n if (selectedOpt) {\n this.fieldFormattedValue = selectedOpt.value;\n }\n }\n }\n\n private setDefaultForm(): void {\n const pepField = new PepSelectField({\n key: this.key,\n value: this.value,\n mandatory: this.mandatory,\n readonly: this.readonly,\n disabled: this.disabled,\n });\n this.form = this.customizationService.getDefaultFromGroup(pepField);\n }\n\n ngOnInit(): void {\n if (this.form === null) {\n this.standAlone = true;\n this.setDefaultForm();\n\n this.renderer.addClass(\n this.element.nativeElement,\n PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n );\n\n if (!this.renderTitle) {\n this.renderer.addClass(\n this.element.nativeElement,\n PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME\n );\n }\n }\n }\n\n ngOnChanges(changes: any): void {\n if (this.standAlone) {\n this.setDefaultForm();\n }\n\n this.isMulti = this.type === 'multi';\n if (this.isMulti) {\n this.selectedValuesModel =\n this.value.length > 0 ? this.value.split(';') : [];\n } else {\n this.selectedValueModel = this.value;\n }\n\n this.addOptionsIfNeeded();\n this.setFieldFormattedValue(this.value);\n }\n\n ngOnDestroy(): void {\n //\n }\n\n selectionChange(event: any): void {\n if (!this.isMulti) {\n this.changeValue(this.selectedValueModel);\n }\n }\n\n openedChange(event: any): void {\n // Only on close.\n if (!event) {\n if (this.isMulti) {\n this.changeValue(this.selectedValuesModel.join(';'));\n }\n\n if (this.isInEditMode) {\n this.isInEditMode = false;\n }\n }\n }\n\n changeValue(value: any): void {\n this.setFieldFormattedValue(value);\n this.customizationService.updateFormFieldValue(\n this.form,\n this.key,\n // value,\n this.fieldFormattedValue,\n this.parentFieldKey\n );\n\n if (this.mandatory) {\n const fieldControl = this.form.controls[this.key];\n if (value) {\n fieldControl.setErrors(null);\n } else {\n fieldControl.setErrors({\n serverError: 'Required',\n });\n }\n this.formValidationChange.emit(this.form.valid);\n }\n\n this.valueChange.emit(value);\n }\n\n cardTemplateClicked(event: any): void {\n this.isInEditMode = true;\n\n setTimeout(() => {\n this.select.open();\n }, 0);\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule, FormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemEdit,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepSelectComponent } from './select.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n FormsModule,\n // Material modules\n MatCommonModule,\n MatButtonModule,\n MatFormFieldModule,\n MatSelectModule,\n MatIconModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n PepFieldTitleModule,\n ],\n exports: [PepSelectComponent],\n declarations: [PepSelectComponent],\n})\nexport class PepSelectModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([pepIconSystemEdit]);\n }\n}\n","/\n Public API Surface of ngx-lib/select\n /\nexport from './select.module';\nexport * from './select.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}