Content to print
\n * \n * \n * `);\n * }\n * }\n * ```\n */\n printHtml(htmlContent: string): void {\n if (window.innerWidth <= 796) {\n this.printHtmlUsingWindow(htmlContent);\n return;\n }\n\n this.printHtmlUsingIframe(htmlContent);\n }\n\n /**\n * Prints the provided HTML element.\n *\n * The method copies the current document stylesheets and includes them in the\n * printed document.\n *\n * @param htmlElement HTML element to print.\n * @returns Opens the browser printing dialog with the provided element.\n *\n * @usageNotes\n *\n * #### HTML\n *\n * ```html\n *\n * \n *
\n * ```\n *\n * #### TypeScript\n *\n * ```typescript\n * export class YourComponent {\n * constructor(\n * private readonly htmlPrinterService: DmCmpsHtmlPrinterService,\n * ) {}\n *\n * print(): void {\n * const element = document.getElementById('example-area-to-print');\n *\n * if (!element) {\n * console.error('Element not found');\n * return;\n * }\n *\n * this.htmlPrinterService.printHtmlElement(element);\n * }\n * }\n * ```\n */\n printHtmlElement(htmlElement: HTMLElement): void {\n const styles = this.getDocumentStyles();\n\n const direction =\n this.direction$.value ??\n (document.documentElement.dir || 'ltr');\n\n const html = `\n \n \n \n \n ${styles}\n \n\n \n ${htmlElement.outerHTML}\n \n \n `;\n\n this.printHtml(html);\n }\n\n /**\n * Creates and prints an Angular component dynamically.\n *\n * The component must be available to the application's environment injector.\n * The component instance is destroyed after its rendered HTML is copied for\n * printing.\n *\n * Angular services needed for dynamic component creation are resolved lazily\n * only when this method is called. This prevents circular dependency errors\n * while constructing this service.\n *\n * @param component Angular component type to print.\n *\n * @usageNotes\n *\n * #### TypeScript\n *\n * ```typescript\n * export class YourComponent {\n * constructor(\n * private readonly htmlPrinterService: DmCmpsHtmlPrinterService,\n * ) {}\n *\n * print(): void {\n * this.htmlPrinterService.printComponent(ComponentToPrint);\n * }\n * }\n * ```\n */\n printComponent\n \n {{ label }} \n \n \n \n {{ searchLabel }} \n\n \n cancel\n \n \n \n \n \n {{ selectAllLabel }}\n \n \n \n
\n \n \n \n \n \n \n\n \n {{ additionalTextStyle.additional_text }} \n \n \n \n \n {{ optionName }}\n \n \n \n \n {{ namePart.trim() }}\n {{ colorizeNameBy }} \n \n \n \n \n \n \n {{ iconStyle.icon }} \n \n
\n \n \n \n {{ label }} \n\n \n \n\n \n \n\n \n {{ clearInputIcon }}\n \n\n \n {{ isPasswordType ? \"visibility\" : \"visibility_off\" }}\n \n\n {{ icon }} \n\n \n \n\n \n\n \n \n \n {{ datePickerParseError }}\n \n \n {{\n validator.key == \"required\"\n ? error || customErrors[validator.key]\n : customErrors[validator.key] || validator.value\n }}\n \n \n \n \n
\n","import {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n HostBinding,\n Input,\n OnDestroy,\n OnInit,\n Output,\n QueryList,\n Renderer2,\n ViewChild,\n ViewChildren,\n booleanAttribute,\n numberAttribute,\n} from '@angular/core';\nimport { TooltipPosition } from '@angular/material/tooltip';\nimport { DmTableIndexedDBService } from './dm-table-indexed-db.service';\nimport { FormControl } from '@angular/forms';\nimport { MatOptionSelectionChange } from '@angular/material/core';\nimport { Subject, debounceTime, distinctUntilChanged } from 'rxjs';\nimport { DmCmpsDateService } from '../dm-cmps-input/dm-cmps-date.service';\nimport { MatSlideToggleChange } from '@angular/material/slide-toggle';\nimport { ExcelService } from './excel.service';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { DmCmpsHtmlPrinterService } from '../html-printer/html-printer.service';\nimport { DmCmpsRunOncePipeService } from '../pipes/run-once-pipe.service';\nimport { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';\n\nexport interface DmCmpsTableSettings {\n archiveIcon?: string;\n archiveTooltip?: string;\n archiveColor?: string;\n archiveTooptipPosition?: TooltipPosition;\n nonArchiveIcon?: string;\n nonArchiveTooltip?: string;\n nonArchiveColor?: string;\n addButtonTooltip?: string;\n addButtonTooltipPosition?: TooltipPosition;\n addButtonIcon?: string;\n searchLabel?: string;\n searchPlaceholder?: string;\n addButtonColor?: string;\n filterSelectLabel?: string;\n filterSelectSelectAllLabel?: string;\n filterSelectPlaceholder?: string;\n filterSelectOptionName?: string;\n filterSelectOptionValue?: string;\n filterSelectOutline?: boolean;\n fieldToFilterBy?: string;\n filterSelectOptions?: any[];\n filterSelectBooleanOptions?: boolean;\n filterSelectTrueOptionName?: string;\n filterSelectFalseOptionName?: string;\n outlinedFormFields?: boolean;\n columnsControl?: boolean;\n columnsControlSearchable?: boolean;\n columnsControlLabel?: string;\n columnsControlSearchLabel?: string;\n actionButtonsMenu?: boolean;\n actionButtonsMenuIcon?: string;\n noDataText?: string;\n searchable?: boolean;\n searchOutline?: boolean;\n tableStyle?: DmTableStyle;\n actions?: DmTableActionButton[];\n addButton?: boolean;\n archive?: boolean;\n archiveField?: string;\n archiveValue?: string;\n filterSelect?: boolean;\n filterSelectSearchable?: boolean;\n paginator?: boolean;\n paginatorData?: DmTablePaginator;\n autoPaginatorAbove?: number;\n elementIdField?: string;\n elementStyle?: (element: any) => DmTableElementStyle;\n totalRow?: boolean;\n printable?: boolean;\n printData?: DmTablePrintData;\n printTooltip?: string;\n printTooltipPosition?: TooltipPosition;\n printButtonColor?: string;\n printButtonIcon?: string;\n exportToExcel?: boolean;\n exportToExcelTooltip?: string;\n exportToExcelTooltipPosition?: TooltipPosition;\n exportToExcelButtonColor?: string;\n}\nexport interface DmTableColumn {\n name: string;\n field: string;\n hideIf?: (() => boolean) | boolean;\n searchable?: boolean;\n sortable?: boolean;\n sortFunction?: (\n element1: any,\n element2: any,\n direction: 'asc' | 'desc'\n ) => number;\n minWidthToShow?: number;\n type?: DmTableColumnType;\n actions?: DmTableActionButton[];\n actionsMenuButtonIcon?: string;\n actionsMenuButtonTooltip?: string;\n valueType?: 'string' | 'number' | 'date' | 'boolean';\n listType?: 'ul' | 'ol' | 'comma' | 'newLine';\n imageDetails?: DmTableImageDetails;\n customHtml?: (element: any) => string;\n totalRow?: DmTableTotalRowDetails;\n fixedNumber?: number;\n slideToggleDetails?: DmTableSlideToggleDetails;\n dateFormat?: 'dd/MM/yyyy' | 'dd/MM/yyyy HH:mm';\n valueToShow?: (element: any) => string | string[];\n onHeaderClick?: () => any;\n onHeaderDoubleClick?: () => any;\n onCellClick?: (element: any, index?: number) => any;\n onCellDoubleClick?: (element: any, index?: number) => any;\n onCellContentClick?: (element: any, index?: number) => any;\n onCellContentDoubleClick?: (element: any, index?: number) => any;\n cellStyle?: (element: any) => DmTableElementStyle;\n totalCellStyle?: (elements: any[]) => DmTableElementStyle;\n onTotalCellClick?: () => any;\n onTotalCellDoubleClick?: () => any;\n}\n\nexport interface DmTableTotalRowDetails {\n type?: 'sum' | 'avg' | 'count' | 'max' | 'min' | 'custom';\n label?: string;\n suffix?: string;\n totalFunction?: (data: any[]) => string;\n}\n\nexport interface DmTableSlideToggleDetails {\n trueLabel: string;\n falseLabel: string;\n trueTooltip: string;\n falseTooltip: string;\n trueValue?: any;\n falseValue?: any;\n}\n\nexport interface DmTableColumns {\n columns: DmTableColumn[];\n displayedColumns?: string[];\n actionButtonMenuMaxWidth?: number;\n}\n\nexport interface DmTableActionButton {\n name: string;\n color: string;\n icon: string;\n tooltip: ((element: any) => string) | string;\n action?: (element: any) => void;\n hideIf?: (element: any) => boolean;\n disabled?: (element: any) => boolean;\n showIn?: 'archive' | 'nonArchive' | 'both';\n}\n\nexport interface DmTableElementStyle {\n color?: string;\n background_color?: string;\n font_weight?: string;\n italic?: boolean;\n underline?: boolean;\n font_size?: string;\n}\nexport interface DmTableStyle {\n header?: {\n style?: DmTableElementStyle;\n hover_style?: DmTableElementStyle;\n };\n row_hovered_style?: DmTableElementStyle;\n odd_row?: {\n style?: DmTableElementStyle;\n };\n even_row?: {\n style?: DmTableElementStyle;\n };\n total_row?: {\n style?: DmTableElementStyle;\n hover_style?: DmTableElementStyle;\n };\n paginator?: {\n style?: DmTableElementStyle;\n border_radius?: string;\n };\n max_height?: string;\n table_border_radius?: string;\n scrollbar_width?: string;\n scrollbar_color?: string;\n scrollbar_background_color?: string;\n scrollbar_hover_color?: string;\n}\n\nexport interface DmTablePaginator {\n pageSize: number;\n pageSizeOptions: number[];\n showFirstLastButtons?: boolean;\n outlineSelect?: boolean;\n details?: {\n firstPageLabel?: string;\n lastPageLabel?: string;\n nextPageLabel?: string;\n previousPageLabel?: string;\n chooseElementsPerPageLabel?: string;\n };\n}\n\nexport interface DmTableActionButtonEvent {\n action: string;\n element: any;\n elementIndex: number;\n}\nexport interface DmTableSlideToggleEvent {\n value: boolean;\n element: any;\n elementIndex: number;\n column: DmTableColumn;\n}\n\nexport interface DmTableRowDoubleClickEvent {\n element: any;\n elementIndex: number;\n}\n\nexport interface DmTablePrintData {\n title: string;\n footer?: string;\n documentTitle: string;\n imgSrc?: string;\n}\n\ninterface DmTablePrintPrefs {\n data: DmTableDataToPrint;\n printData: DmTablePrintData;\n}\n\nexport interface DmTableImageDetails {\n width: number;\n height: number;\n}\nexport type DmTableColumnType =\n | 'date'\n | 'tel'\n | 'mail'\n | 'link'\n | 'whatsapp'\n | 'actions'\n | '#'\n | 'list'\n | 'image'\n | 'customHtml'\n | 'slideToggle';\ntype DmTableValuesToShow = Map\n
\n \n \n \n \n `;\n // );\n this.htmlPrintService.printHtml(htmlToPrint);\n // setTimeout(() => {\n // printWindow.document.close();\n // printWindow.focus();\n // printWindow.print();\n // printWindow.close();\n // }, 1500);\n }\n\n getTable(\n columnsToDisplayPrint: DmTableColumn[],\n dataSourcePrint: DmTablePrintPrefs['data'],\n rowCounter: number\n ) {\n return `${\n documnetLogo\n ? `![\"logo\"](\"${this.getImgFromUrl(documnetLogo)}\")
`\n : ''\n }\n \n
\n \n
\n ${this.getTable(columnsToDisplayPrint, dataSourcePrint, rowCounter)}\n \n \n
\n ${title}
\n| ${column.name} | `\n )\n .join('')}\n|
|---|---|
| ${++rowCounter} | `\n : `\n|
| ${\n dataSourcePrint.totalRow![column.field] || ''\n } | `\n : ``\n )\n .join('')}\n |
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {{ _dataSource._firstIndexInPage() + i }}\n \n \n \n \n \n \n \n \n {{\n column.actionsMenuButtonIcon || actionButtonsMenuIcon\n }} \n \n \n \n \n \n \n {{ _getSlideToggleLabel(column, element) }}\n \n \n \n \n \n {{\n _dataSource.getValue(\n element[this._elementIdField],\n column\n ) || element[column.field]\n }}\n \n \n \n {{\n _dataSource.getValue(\n element[this._elementIdField],\n column\n ) || element[column.field]\n }} \n \n \n {{\n _dataSource.getValue(\n element[this._elementIdField],\n column\n ) || element[column.field]\n }} \n \n \n {{\n _dataSource.getValue(\n element[this._elementIdField],\n column\n ) || element[column.field]\n }} \n \n \n {{\n _dataSource.getValue(\n element[this._elementIdField],\n column\n ) || element[column.field]\n }} \n \n \n \n \n \n \n \n \n \n \n {{ item\n }}{{\n i < element[column.field].length - 1 ? \", \" : \"\"\n }}\n \n \n \n \n {{ item }}\n \n
\n \n \n \n \n {{\n column.valueToShow\n ? _dataSource.getValue(\n element[this._elementIdField],\n column\n )\n : element[column.field]\n }}\n \n \n \n \n\n \n \n
\n \n \n \n \n \n {{ column.name }}\n \n \n mobiledata_off \n arrow_upward_alt \n \n \n \n drag_indicator \n \n
\n \n \n \n - \n
- \n
\n \n
\n {{ noDataText }}\n
\n \n {{\n _dataSource._getPaginatorDetails()?.chooseElementsPerPageLabel ||\n \"מספר פריטים בדף:\"\n }}\n
\n\n\n \n \n {{ option }} \n \n \n
\n\n 0\">\n
\n\n \n
\n {{ _dataSource._firstIndexInPage() }}
\n\n-
\n\n{{ _dataSource._lastIndexInPage() }}
\n\nמתוך
\n\n{{ _dataSource._totalElements() }}
\n\n \n keyboard_double_arrow_right \n \n \n chevron_right \n \n \n chevron_left \n \n \n keyboard_double_arrow_left \n \n
\n \n\n {{ text }}\n
\n\n","import { Component } from '@angular/core';\n\n@Component({\n selector: 'lib-dm-cmps-side-nav',\n templateUrl: './dm-cmps-side-nav.component.html',\n styleUrls: ['./dm-cmps-side-nav.component.scss']\n})\nexport class DmCmpsSideNavComponent {\n\n}\n","dm-cmps-side-nav works!
\n","import {\n Component,\n EventEmitter,\n Input,\n OnInit,\n Output,\n ViewChild,\n booleanAttribute,\n forwardRef,\n} from '@angular/core';\nimport {\n ControlValueAccessor,\n FormControl,\n NG_VALUE_ACCESSOR,\n} from '@angular/forms';\nimport { TooltipPosition } from '@angular/material/tooltip';\n\nexport interface DmCmpsColor {\n color: string;\n tooltip?: string;\n}\n\n@Component({\n selector: 'dm-cmps-color-picker',\n templateUrl: './dm-cmps-color-picker.component.html',\n styleUrls: ['./dm-cmps-color-picker.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => DmCmpsColorPickerComponent),\n multi: true,\n },\n ],\n})\nexport class DmCmpsColorPickerComponent\n implements OnInit, ControlValueAccessor\n{\n @Input() colors: DmCmpsColor[] = [\n { color: '#FF0000' },\n { color: '#FFA500' },\n { color: '#FFFF00' },\n { color: '#008000' },\n { color: '#0000FF' },\n { color: '#4B0082' },\n { color: '#EE82EE' },\n { color: '#A9A9A9' },\n { color: '#FFFFFF' },\n { color: '#000000' },\n ];\n @Input() formControl: FormControl | undefined;\n\n @Input() selectedColor: string = '#ffffff';\n\n @Input() tooltip: string = '';\n @Input() tooltipPosition: TooltipPosition = 'above';\n @Input({ transform: booleanAttribute }) customColor: boolean = false;\n\n @Input({ transform: booleanAttribute }) opacitySlider: boolean = false;\n @Input() opacitySliderColor: 'primary' | 'accent' | 'warn' = 'primary';\n @Input() opacitySliderLabel: string = 'שקיפות';\n @Input() customColorTooltip: string = 'צבע מותאם אישית';\n\n @Input() wrapperClass: string = '';\n @Input() wrapperStyle: string = '';\n\n @Output() onColorChange = new EventEmitter\n {{ opacitySliderLabel }}\n \n
\n\n\n\n * \n *
\n * ```\n *\n * #### Use object - with check all\n * ```html\n * \n * \n *
\n * ```\n *\n * #### Use object - returns the items that have some properties from the object\n * ```html\n * \n * \n *
\n * ```\n *\n * @param checkAll - when `filterPredicate` is an object,\n * if `checkAll=true` it will return just the elements that have the `filterPredicate` keys and values,\n * if `checkAll=false` it will return all the elements thet have some properties from the `filterPredicate` with same values,\n * | default is `checkAll=true`\n *\n *\n * @returns (any[]) filterd array\n */\n transform(\n array: any[],\n filterPredicate: ((item: any) => boolean) | { [key: string]: any },\n checkAll: boolean = true,\n ...args: any[]\n ): any[] {\n if (!Array.isArray(array)) {\n return array;\n }\n\n if (typeof filterPredicate === 'function') {\n return array.filter(filterPredicate as (item: any) => boolean);\n }\n\n if (typeof filterPredicate === 'object') {\n return array.filter((item) => {\n if (checkAll) {\n return Object.keys(filterPredicate).every((key) => {\n return item[key] === filterPredicate[key];\n });\n } else {\n return Object.keys(filterPredicate).some((key) => {\n return item[key] === filterPredicate[key];\n });\n }\n });\n }\n\n return array;\n }\n}\n","import {\n booleanAttribute,\n Component,\n EventEmitter,\n Input,\n numberAttribute,\n OnInit,\n Output,\n} from '@angular/core';\n\nexport interface DmCmpsRatingData {}\n\n@Component({\n selector: 'dm-cmps-rating',\n templateUrl: './dm-cmps-rating.component.html',\n styleUrls: ['./dm-cmps-rating.component.scss'],\n})\nexport class DmCmpsRatingComponent implements OnInit {\n @Input({ transform: numberAttribute }) min: number = 1;\n @Input({ transform: numberAttribute }) max: number = 5;\n @Input() set value(selected: number) {\n this._value = selected;\n }\n @Input({ transform: booleanAttribute }) readonly: boolean = false;\n\n @Input() set message(value: string) {\n this._message = value;\n }\n\n @Input() starsColor: string = '#ffee00';\n @Input({ transform: numberAttribute }) starSize: number | string = 25;\n @Input() starTooltip: (value: number) => string = (index: number) =>\n index + 1 + '';\n @Input() direction: 'rtl' | 'ltr' = 'rtl';\n @Output() onRatingSelect: EventEmitter