Progress® Kendo UI® for Angular Feedback Portal

Declined

Last Updated: 22 Oct 2026 06:50 by ADMIN

Column chooser(from column menu) allows hiding all columns when columns are added asynchronously

Created by: Svitlana

Comments: 1

Category: Kendo UI for Angular

Type: Bug Report

Column chooser(from column menu) allows hiding all columns when columns are added asynchronously

With the built-in chooser’s default `allowHideAll: false`, the last visible unlocked column’s checkbox is disabled.

But when columns are added after the Grid has initialized, the chooser can leave that checkbox enabled. Reopening the chooser and unchecking it allows all data columns to be hidden.

Proposed fix: Recalculate the chooser’s checked/disabled state after the column list and checkbox views are updated, and when that list changes - not only once during component initialization. In Kendo 25.3, `ColumnListComponent` runs `updateDisabled()` from a `ngZone.onStable.pipe(take(1))` subscription, which isn't sufficient when columns render lazily/asynchronously.

Repro example: https://stackblitz.com/edit/xln5kn79-fu5vxdax?file=src%2fapp%2fapp.component.ts

Pending Review

Last Updated: 21 Oct 2026 10:02 by Holger

ZonedDate.fromLocalDate returns the wrong Berlin hour before the autumn DST transition

Created by: Holger

Comments: 0

Category: Kendo UI for Angular

Type: Bug Report

ZonedDate.fromLocalDate returns the wrong Berlin hour before the autumn DST transition

`ZonedDate.fromLocalDate(new Date('2025-10-26T00:00:00.000Z'), TIME_ZONE_ID_EUROPE_BERLIN)`returns hour **1**, although the correct local hour is **2** (CEST, UTC+2). Berlin switches back at **2025-10-26T01:00:00Z**, not at midnight UTC. The two consecutive UTC instants `00:00Z` and `01:00Z` must both display `02:00`, with different offsets.

I tested the behavior with time zones 'Europe/Berlin' and 'Australia/Hobart'.

I tried to attach a Markdown file here, but upload failed for whatever reason. You wiil find the detailed description in the Markdown below:

# ZonedDate.fromLocalDate returns the wrong Berlin hour before the autumn DST transition
## Affected package and environment
- `@progress/kendo-date-math`: **1.5.17**.
- Reproduced with Node.js **24.18.0** on Linux.
- Reproduced with host timezones **UTC** and **Europe/Berlin**.
- The required Berlin timezone data is loaded explicitly in the reproduction.
- Angular is not required to reproduce this issue.
## Summary
`ZonedDate.fromLocalDate(new Date('2025-10-26T00:00:00.000Z'), TIME_ZONE_ID_EUROPE_BERLIN)`
returns hour **1**, although the correct local hour is **2** (CEST, UTC+2).
Berlin switches back at **2025-10-26T01:00:00Z**, not at midnight UTC.
The two consecutive UTC instants `00:00Z` and `01:00Z` must both display
`02:00`, with different offsets.
## Minimal reproduction
In an empty directory, install the affected version:
```sh
npm init -y
npm install @progress/kendo-date-math@1.5.17
```
Run the following as `repro.cjs` using `node repro.cjs`:
```javascript
const assert = require('node:assert/strict');
const { ZonedDate } = require('@progress/kendo-date-math');
require('@progress/kendo-date-math/tz/Europe/Berlin');
const inputs = [
    '2025-10-25T22:00:00.000Z',
    '2025-10-25T23:00:00.000Z',
    '2025-10-26T00:00:00.000Z',
    '2025-10-26T01:00:00.000Z',
    '2025-10-26T02:00:00.000Z',
];
const hours = inputs.map((iso) =>
    ZonedDate.fromLocalDate(new Date(iso), 'Europe/Berlin').getHours());
console.log('Actual Berlin hours:', hours);
assert.deepEqual(hours, [0, 1, 2, 2, 3]);
```
Actual output: `[0, 1, 1, 2, 3]`, followed by an assertion failure.
Expected output: `[0, 1, 2, 2, 3]`.
On Linux, both `TZ=UTC node repro.cjs` and
`TZ=Europe/Berlin node repro.cjs` reproduce the failure.
| Input UTC instant | Expected Berlin time | Actual hour |
| --- | --- | --- |
| 2025-10-25 22:00 | 2025-10-26 00:00 CEST | 0 |
| 2025-10-25 23:00 | 2025-10-26 01:00 CEST | 1 |
| 2025-10-26 00:00 | 2025-10-26 02:00 CEST | **1** |
| 2025-10-26 01:00 | 2025-10-26 02:00 CET | 2 |
| 2025-10-26 02:00 | 2025-10-26 03:00 CET | 3 |
## Diagnosis
In the installed `dist/npm/tz/zoned-date.js`, `fromLocalDate()` calls
`convertTimezoneUTC(date, 'Etc/UTC', timezone)`.
For `2025-10-26T00:00:00Z`, that function:
1. Calculates a base shift of +120 minutes.
2. Creates an intermediate date of `2025-10-26T02:00:00Z`.
3. Looks up the target offset again at that intermediate date.
4. Finds a different offset and applies a -60-minute correction.
The intermediate date encodes wall-clock fields; it is not the original
instant. Looking up its offset as another instant causes the wrong hour.
Simply deleting the second lookup is not a verified general fix. Additional
probes show that Kendo's internal `offset()` lookup itself disagrees with
`Intl` at some transition instants: for Berlin it returns -60 at
`2025-03-30T01:00:00Z` (expected -120), and -120 at
`2025-10-26T01:00:00Z` (expected -60). Existing corrections compensate for
some of these cases. The UTC-instant-to-wall-clock operation should not
depend on resolving an ambiguous wall-clock time back into an instant.
## Proposed upstream changes
The following is a source-level proposal, not a released Telerik patch.
It uses the runtime's IANA timezone implementation through `Intl`.
Please adapt it to the package's source layout and supported-browser policy.
### 1. Preserve a known instant in the constructor
Add an optional third parameter to the existing constructor. Insert this
branch before its existing `timezone === ''` branch; leave the existing
floating-date and wall-clock-input branches unchanged:
```diff
-constructor(utcDate: Date, timezone: string) {
+constructor(utcDate: Date, timezone: string, instant?: Date) {
     this._utcDate = cloneDate(utcDate);
     this.timezone = timezone;
-    if (timezone === '') {
+    if (instant && timezone !== '') {
+        this.timezoneOffset = (instant.getTime() - utcDate.getTime()) / MS_PER_MINUTE;
+        this._localDate = cloneDate(instant);
+    } else if (timezone === '') {
```
This also preserves the distinct instants behind the two occurrences of
`02:00`, instead of attempting to infer the instant from ambiguous fields.
`MS_PER_MINUTE` and `cloneDate` already exist in the implementation.
### 2. Replace the explicit-timezone path in fromLocalDate
Retain the existing `timezone === ''` path. Replace the remainder of
`fromLocalDate()` with the following code:
```typescript
const formatter: Intl.DateTimeFormat = new Intl.DateTimeFormat('en-GB', {
    timeZone: timezone,
    calendar: 'gregory',
    numberingSystem: 'latn',
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hourCycle: 'h23',
});
const parts: Array<Intl.DateTimeFormatPart> = formatter.formatToParts(date);
const getPart: (type: Intl.DateTimeFormatPartTypes) => number =
    (type: Intl.DateTimeFormatPartTypes): number =>
        Number(parts.find((part: Intl.DateTimeFormatPart): boolean => part.type === type)?.value);
const utcDate: Date = new Date(0);
utcDate.setUTCFullYear(getPart('year'), getPart('month') - 1, getPart('day'));
utcDate.setUTCHours(getPart('hour'), getPart('minute'), getPart('second'), date.getUTCMilliseconds());
return new ZonedDate(utcDate, timezone, date);
```
Here, `utcDate` is deliberately a carrier of wall-clock fields in its UTC
components, matching Kendo's existing internal representation. It is not
the original UTC instant. No browser-local `Date` setters are used.
The use of `hourCycle: 'h23'` prevents midnight from being encoded as hour 24.
Milliseconds are preserved directly from the original instant.
## Regression coverage and review scope
Please verify:
- The five expected hours in the reproduction, under UTC and Berlin hosts.
- Full calendar fields and milliseconds around both spring and autumn transitions.
- `toLocalDate().getTime()` and `getTime()` still equal the input instant.
- `getTimezoneOffset()` distinguishes the two occurrences of Berlin `02:00`:
  -120 for `00:00Z`, and -60 for `01:00Z`.
- Zones with negative offsets and southern-hemisphere DST.
- Existing behavior when the timezone argument is omitted or empty.
The constructor/factory proposal addresses conversion from a known instant.
It is not a complete redesign of ambiguous/nonexistent wall-clock input.
Please also audit `clone()` and `toTimezone()`: the current implementation
reconstructs values from wall-clock fields and can lose repeated-hour identity.
Other arithmetic and `fromUTCDate()` paths require the vendor's full regression
suite before release. Formatter caching may be appropriate after correctness
and browser-support requirements are established.
### Validation performed
The reproduction above fails on the installed package with exactly the
documented hours and passes with the proposed changes applied in memory.
The proposal also passed 11,580 conversion checks: five target zones
(`Europe/Berlin`, `Europe/Athens`, `America/New_York`, `Australia/Hobart`,
`Etc/UTC`), two host timezones (UTC and Berlin), and 15-minute samples within
24 hours either side of six 2025 spring/autumn transition instants.
These checks compared full calendar fields against `Intl`, verified
milliseconds and instant round trips, and checked offset consistency.
Separate checks verified the two Berlin repeated-hour offsets and unchanged
floating-date conversion for the sampled instant. Installed dependency files
were not modified. This is focused validation, not Telerik's full test suite.
## Application workaround
Our application bypasses `ZonedDate.fromLocalDate()` for its display-date
conversion and obtains calendar fields through `Intl.formatToParts()` instead.
All active timestamp tests pass with UTC and Berlin host timezones.
The original epoch value remains authoritative. A browser-local `Date` used
as a display carrier cannot itself retain an arbitrary timezone or distinguish
both occurrences of a repeated hour, and can normalize nonexistent host-local
times during spring-forward transitions.

Unplanned

Last Updated: 19 Oct 2026 14:46 by ADMIN

Radio buttons inner dot off center on firefox when browser resized to hit a breakpoint or when a bounce animation occurs.

Created by: Isaac

Comments: 3

Category: Kendo UI for Angular

Type: Bug Report

Radio buttons inner dot off center on firefox when browser resized to hit a breakpoint or when a bounce animation occurs.

In firefox, open the Kendo Radio Button documentation and slowly resize the window (https://www.telerik.com/kendo-angular-ui/components/inputs/radiobutton)

The radio button will kind of jiggle around and occasionally the white dot in the radio button will become off-center.

This also seems to happen in response to some material bouncy (cubic-bezier) animation transitions.

Unplanned

Last Updated: 19 Oct 2026 14:44 by ADMIN

Reset the value of DropDownTree and MultiSelectTree with keyboard shortcut

Created by: Rajesh

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

Reset the value of DropDownTree and MultiSelectTree with keyboard shortcut

Provide an option to clear the value of the DropDownTree and MultiSelectTree with a keyboard shortcut (like Esc key for the Combobox).

Unplanned

Last Updated: 19 Oct 2026 14:29 by ADMIN

[Grid] [TreeList] Add option to set the label of inputs in the built-in editor templates

Created by: Kendo UI

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

[Grid] [TreeList] Add option to set the label of inputs in the built-in editor templates

Built-in editors lack the option to set accessible labels. This can be worked around by declaring an editor template.

A built-in setting for the label would be nice to have. The column title can be used as a default.

Unplanned

Last Updated: 19 Oct 2026 14:27 by ADMIN

Support for Standalone Directives

Created by: Diego

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

Support for Standalone Directives

Basically, we have just a limitation that we could not use host directives if the directive is not standalone:

see for example :

https://angular.io/guide/directive-composition-api#adding-directives-to-a-component

and about cdk (they are not ready as well):

https://github.com/angular/components/issues/26036#issuecomment-1588683306

Thanks

Diego

Unplanned

Last Updated: 19 Oct 2026 14:21 by ADMIN

[TileLayout] More flexible columns width configuration

Created by: Kendo UI

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

[TileLayout] More flexible columns width configuration

Currently the TileLayout allows having equal width for all columns, and has a columnWidth option (which is essentially max-width), applying the same value for all columns.

Providing the developers with the options to configure various widths for different columns, as well as min-width, based on the supported features of the CSS Grid Layout, will be a nice enhancement enabling richer customization opportunities.

Unplanned

Last Updated: 19 Oct 2026 14:17 by ADMIN

Add support for automatic horizontal Grid scroll when a grid column is dragged to the edge the visible area

Created by: Shai

Comments: 3

Category: Kendo UI for Angular

Type: Feature Request

Add support for automatic horizontal Grid scroll when a grid column is dragged to the edge the visible area

Hi,

This feature request considers the Kendo Angular UI Grid component.

We use the builtin drag & drop columns reordering functionallity. When we try to drag a column to the edge of the visible part of the grid with a horizontal scroll the scroll does not adjust automatically so we cann't drag to column to a place outside of the horizontal visible area.

It would be nice if you could enable automatic horizontal Grid scroll when a grid column is reordered and dragged to the edge the visible column area.

Thanks,

Shai

Unplanned

Last Updated: 19 Oct 2026 14:16 by ADMIN

[Toolbar] Add PopupSettings interface for the SplitButton and DropDownButton

Created by: Kendo UI

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

[Toolbar] Add PopupSettings interface for the SplitButton and DropDownButton

Current behavior
ToolbarComponent, DropDownButton and SplitButton utilize the PopupSettings of type:

interface PopupSettings { animate?: boolean; appendTo?: 'root' | 'component' | ViewContainerRef; popupClass?: string; anchorAlign?: Align; popupAlign?: Align; width?: number | string; height?: number | string; }

For the overflow popup, they all work fine, but for the buttons:

- popupAlign
- anchorAlign
- height
- width
properties don't work.

https://stackblitz.com/edit/angular-jqhp2d?file=app/app.component.ts

Currently, the DropDownButton and SplitButton popup alignment can be changed, by using the align property of the Buttons PopupSettings type
https://stackblitz.com/edit/angular-jqhp2d-smtyhp?file=app/app.component.ts

Expected behavior
Create separate PopupSettings interface for the DropDownButton and SplitButton components to:

isolate the width and height options
to unify the PopupSettings of the Toolbar SplitBtn and DropDownBtn with the updated Buttons PopupSettings:

interface PopupSettings {
    animate?: boolean;
    appendTo?: 'root' | 'component' | ViewContainerRef;
    popupClass?: string;
    anchorAlign?: Align;
    popupAlign?: Align;
    width?: number | string;
    height?: number | string;
}

Unplanned

Last Updated: 19 Oct 2026 14:06 by ADMIN

Provide support for setting values of input properties programmatically

Created by: Kendo UI

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

Provide support for setting values of input properties programmatically

Currently, the supported approach for setting values for the input properties of the Kendo UI for Angular components is by binding them to a DOM property.

Please provide support for the ability to set values for the input properties programmatically.

Unplanned

Last Updated: 19 Oct 2026 12:18 by ADMIN

Nest lists, paragraphs with Tab key

Created by: Babu

Comments: 3

Category: Kendo UI for Angular

Type: Feature Request

Nest lists, paragraphs with Tab key

Tab Key: When you press the TAB key, the editor loses control of the focus. It is intended to give tab space rather than leave editor control. The indent space actually differs greatly from the tab space.

Unplanned

Last Updated: 19 Oct 2026 12:15 by ADMIN

Template for the Textbox input area

Created by: n/a

Comments: 3

Category: Kendo UI for Angular

Type: Feature Request

Template for the Textbox input area

The TextBox component allows us to specify a template for the prefix and suffix areas by applying the TextBoxPrefixTemplate and TextBoxSufffixTemplate directives to an ng-template.

I would also like to able to specify a template for the actual input area itself.

My use case for this is that I have a directive that I use within my application that I would normally apply to the <input> tag to ensure some custom processing is undertaken during user input. With the current TextBox component I am unable to do this.

Additionally I would like to specify the autocomplete attribute for the <input> tag to alow the browser to autocomplete things such as shipping-address etc. or even to disable the browser autocomplete completely by setting this to "off". Again this is not possible with the current TextBox but would be easily achievable if I could specify the template for the input area.

If this was implemented as requested I would expect my angular HTML to look something like:

 <kendo-textbox>
   <ng-template kendoTextBoxPrefixTemplate>
       <button kendoButton look="clear" icon="image"></button>
   </ng-template>
   <ng-template kendoTextBoxInputTemplate>
       <input myDirective [autocomplete]="myValue" />
   </ng-template>
   <ng-template kendoTextBoxSuffixTemplate>
       <kendo-textbox-separator></kendo-textbox-separator>
       <button kendoButton fillMode="clear" icon="calendar"></button>
       <kendo-icon name="bell"></kendo-icon>
    </ng-template>
 </kendo-textbox>

The input template could be specified using kendoTextBoxInputDirective

Unplanned

Last Updated: 19 Oct 2026 12:13 by ADMIN

[Intl] Support for 'j' input skeleton symbol

Created by: Felix

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

[Intl] Support for 'j' input skeleton symbol

Hi Kendo Angular team,

It will be a good addition to the Kendo UI internalization to add support for the 'j' input skeleton symbol.

https://www.unicode.org/reports/tr35/tr35-dates.html#dfst-hour

Thank you for your consideration.

Unplanned

Last Updated: 19 Oct 2026 12:07 by ADMIN

Configure Filter component by using FilterExpression with predefined list of values for value dropdown list.

Created by: Milan

Comments: 6

Category: Kendo UI for Angular

Type: Feature Request

Configure Filter component by using FilterExpression with predefined list of values for value dropdown list.

Hi

I've started using Filter component since your recent editorTemplate feature makes is more usable when it comes to selecting predefined list of values.

One problem with this is that majority of values for filterable fields are based on predefined list of values that we put in dropdown list.
So our component template has many repeated templates like this

<ng-template let-currentItem #field1 >
    <kendo-dropdownlist
        [data]="valuesForField1"
        (valueChange)="
            currentItem.value = $event; filter.valueChange.emit(filter.value)
        "
    >
    </kendo-dropdownlist>
</ng-template>
<ng-template let-currentItem #field2 >
    <kendo-dropdownlist
        [data]="valuesForField2"
        (valueChange)="
            currentItem.value = $event; filter.valueChange.emit(filter.value)
        "
    >
    </kendo-dropdownlist>
</ng-template>

Writing these editor templates with handlers for valueChange that differs only in the source list and using onInit to set these as editorTemplate seems inefficient.
Our component ended up with mostly filter editor templates just in order to use filter component.
I am aware that this could be all done in markup but using filters property on Filter is more flexible as filters can be driven from server side.

It would be a good that FilterExpression type has some property like valuesListData: {text: string, value: any}[].so that dropdown get generated automatically.
I assume that picking from the dropdown is the mostly used scenario and would satisfy majority use cases.

So this is a feature request:

As a developer I would like to be able to set a list of objects on FilterExpression object so that Filter component create dropdown for value editor with the provided list.

Unplanned

Last Updated: 19 Oct 2026 12:00 by ADMIN

[Dropdowns] MultiColumnDropDownList component

Created by: Pawel

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

[Dropdowns] MultiColumnDropDownList component

Hi team,

It will be a good addition to the library to have a MultiColumnDropDownList component similar to the already existing MultiColumnComboBox.

Thank you.

Unplanned

Last Updated: 19 Oct 2026 11:48 by ADMIN

[Editor] - Expose input to set NodeViews option

Created by: Eran Weiser

Comments: 3

Category: Kendo UI for Angular

Type: Feature Request

[Editor] - Expose input to set NodeViews option

The nodeViews feature of proseMirror can't be used if not exposed as an input as it should be set in construction of the EditorView which is done internally the component.

We would like to supply it as an input to your component

Unplanned

Last Updated: 19 Oct 2026 11:48 by ADMIN

Feature Request: expose individual properties from toODataString to allow for integration with OpenAPI etc

Created by: Adam

Comments: 3

Category: Kendo UI for Angular

Type: Feature Request

Feature Request: expose individual properties from toODataString to allow for integration with OpenAPI etc

Currently toODataString constructs the entire query string used to make a request. When API endpoints are automatically generated (using swagger/OpenAPI for example), this makes toODataString less helpful. I would like a function that exposes the individual properties generated by toODataString

For example, toODataString currently produces something like

'$skip=0&$top=20&$orderby=quantity&$filter=date ge 2020-01-01T00:00:00.000Z'

I'd like something like toODataObject that produces something like

{$skip: 0, $top: 20, $orderby: 'quantity', $filter: 'date ge 2020-01-01T00:00:00.000Z'}

so that I could pass individual properties as parameters to generated API functions.

Thanks.

Unplanned

Last Updated: 19 Oct 2026 11:47 by ADMIN

Add support for a separator line between two menu items in the kendo-splitbutton component's popup.

Created by: Christian

Comments: 3

Category: Kendo UI for Angular

Type: Feature Request

Add support for a separator line between two menu items in the kendo-splitbutton component's popup.

Currently, there is no out-of-the-box approach to add a separator line between two menu items in the kendo-splitbutton component's popup, so we would like request this feature.

Unplanned

Last Updated: 19 Oct 2026 11:43 by ADMIN

[Grid][TreeList] Support touch-scrolling in the locked columns section

Created by: Kendo UI

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

[Grid][TreeList] Support touch-scrolling in the locked columns section

Currently it is not possible to touch-scroll the locked section of the Grid on mobile devices - this is a known limitation:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/locked/#toc-known-limitations

https://www.telerik.com/kendo-angular-ui-develop/components/treelist/columns/locked/#toc-known-limitations

Please provide the opportunity for touch-scrolling the locked section of Grid and TreeList similar to the one available on other devices via the mousewheel.

Unplanned

Last Updated: 19 Oct 2026 11:28 by ADMIN

Trying to convert big IONIC angular html page into PDF.

Created by: Sami

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

Trying to convert big IONIC angular html page into PDF.

Hi

We are planning to purchase Kendo UI angular editor components and we consumed the trail version for the same. During the trial period we encountered the below issue.

Scenario : Trying to convert big IONIC angular html page into PDF. While using the <kendo-pdf-export #pdf > tag big pdf is generated and we want to split the big page into A4 hence we used the <kendo-pdf-export #pdf paperSize="A4"> .After placing the papersize empty pages are getting generated. 7 emty pages are downloaded.Kendo PDF converter not splitting the A4 while using the ionic controls.

Need your help for the above query so that we can proceed the purchase.

Thanks & Regards

Sami

Component.html

<ion-header class="modalHeaderheight">
<ion-row class="modalHeader">
<ion-col size=11>
<span class="modalheaderTitle"> {{'rfwireport.titleptw' | translate}}</span>
</ion-col>
<ion-col class="cursor-pointer">
<div (click)="closeDialog()">
<ion-icon class="modalheaderTitle" title="{{'general.dialogclose' | translate }}" name="close">
</ion-icon>
</div>
</ion-col>
</ion-row>
</ion-header>
<ion-row class="listpage-content ion-no-padding" style="width: 100%;">
<ion-col class="ion-no-padding">
<ion-content class="content-tag" style="height: 530px;--background: white;">
<ion-row>
<ion-col size=1></ion-col>
</ion-row>

<kendo-pdf-export #pdf >
<div id="PDFReportptw" >
<ion-grid class="ion-no-padding grid-bordered">
<ion-row class="ion-align-items-center tableheader tableBorder even-color">
<ion-col size="10" class="ion-text-center com-logo-height md hydrated">
<ion-col class="ion-text-center" style="font-size: 20px;">
{{selProject}} </ion-col>
</ion-col>
<ion-col size="2" class="ion-text-left md hydrated">
<div style="height:60px; width:100%">
<img id="orgimgid" [src]="orgImageUrl" (error)="setDefaultPic()">
</div>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center ">
<ion-col size="12" class="ion-text-center fontsubheader"> DAILY PERMIT TO WORK With PTW No -
{{data.eptwcode}}
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> Excavation </ion-col>
<ion-col size="4" class="ion-text-left fontBold"> {{selTrade}}
</ion-col>
<ion-col size="2" class="ion-text-left value">Form Ref No </ion-col>
<ion-col size="4" class="ion-text-left fontBold"> TBD
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> RA Ref No </ion-col>
<ion-col size="4" class="ion-text-left fontBold">{{data.rareferencenumber}}
</ion-col>
<ion-col size="2" class="ion-text-left value">SWP No </ion-col>
<ion-col size="4" class="ion-text-left fontBold">{{data.swpnumber}}</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> FPP No </ion-col>
<ion-col size="4" class="ion-text-left fontBold">{{data.fppnumber}}
</ion-col>
<ion-col size="2" class="ion-text-left value">Machine ID </ion-col>
<ion-col size="4" class="ion-text-left fontBold">{{data.machineid}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">

<ion-col size="12" class="ion-text-left fontBold">This permit is valid only for the period stated below.
The conditions of issue must be complied with throughout the duration of work. This permit may be
revoked at any time. You are responsible for the copy of this permit to display at work location till
completion of the above work or expiry or revocation of permit and must produce it on request. Ensure
relevant checklists are completed & submitted with this PTW application.
</ion-col>
</ion-row>

</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 1: APPLICATION - BY PERMIT REQUESTER
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="4" class="ion-text-left value"> Contractor Name </ion-col>
<ion-col size="8" class="ion-text-left fontBold">TBD</ion-col>

</ion-row>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="4" class="ion-text-left value"> Location of work </ion-col>
<ion-col size="8" class="ion-text-left fontBold">{{data.levelname}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="4" class="ion-text-left value"> Permit Validity period </ion-col>
<ion-col size="2" class="ion-text-left fontBold">From
</ion-col>
<ion-col size="2" class="ion-text-left fontBold"> {{data.plannedstarttime | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
<ion-col size="2" class="ion-text-left fontBold">To
</ion-col>
<ion-col size="2" class="ion-text-left fontBold"> {{data.plannedendtime | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-row class="tableheader tableBorder" style="padding: 0 !important;"
*ngIf="checkLists[0] && checkLists[0][0]">
<ion-col size="6">
</ion-col>
<ion-col size="6" *ngFor="let stages of checkLists[0]">
<ion-row class="ion-no-padding">
<ion-col *ngFor="let stage of stages.stages" class="ion-text-center tableBorder value">
{{stage.stagecode}}
</ion-col>
</ion-row>
</ion-col>
<ion-col size="6">
<ion-row>
<ion-col class="ion-text-center" style="font-size: 25px;font-weight: bold;">{{'rfwireport.checklist' | translate}}
</ion-col>
</ion-row>
</ion-col>
<ng-container *ngIf="checkLists[0] && checkLists[0][0]">
<ion-col size="6" *ngFor="let chelist of checkLists[0]">
<ion-row class="ion-no-padding">
<ion-col *ngFor="let status of chelist.status" class="ion-text-center tableBorder value">
{{status.name}}
</ion-col>
</ion-row>
</ion-col>
</ng-container>
<ion-col size="6">
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableheader tableBorder" *ngIf="!isQuesExist">
<ion-col size="12">
<ion-row class="ion-no-padding tableheader">
<ion-col class="ion-text-center value"> {{'reports.noques' | translate}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ng-container *ngIf="checkLists[0] &&checkLists[0][0]">
<div *ngFor="let items of checkLists">
<ion-row class="ion-no-padding " *ngFor="let sec of items[0].sections;let secIndex = index">
<ion-col size="12">
<ion-row class="ion-no-padding tableheader even-color ">
<ion-col class="ion-text-center ">{{sec.name}}
</ion-col>
</ion-row>
<ion-col size="12">
<ion-col size="6">
<ion-row class="ion-no-padding " *ngFor="let ques of sec.questions;let quesIdx = index">
<ion-col class="ion-text-left tableheader tableBorder ">
<span class="" style="font-size:15px;">{{ques.label}}</span>
</ion-col>
<ion-col>
<ion-row class="ion-no-padding ">
<ion-col *ngFor="let stage of checkLists[0][0].stages;let stageindex = index"
class="ion-text-center fontBold1">
<span *ngIf="getStatus(secIndex,quesIdx,stageindex) else nozone"
class="add-icon material-icons mdi mdi-check active-status"
style="font-size:25px;"></span>
</ion-col>
</ion-row>
<ng-template #nozone>
<ion-col class="ion-text-center ">
<div class="add-icon material-icons inactive-status" style="font-size:25px;"></div>
</ion-col>
</ng-template>
</ion-col>
</ion-row>
</ion-col>
</ion-col>
</ion-col>
</ion-row>
</div>
</ng-container>

<ion-row class="ion-align-items-left">
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 1 a: PTW APPLICAT DECLARATION
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-left">
I ensure that necessary safety precautions are taken and in place for above mentioned work
activity at all time during the validity period of the permit. I must inform Project
Manager/ Authorized Manager immediately if there is any incompatible work carried out
nearby or significant changes in the work
process or work environment. I shall also display a copy of the approved PTW at the work
location.

</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center">
<ion-card-header class="card-header ">
<ion-card-title class="ion-text-center">Appointed PTW</ion-card-title>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center card-font">
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">

<div>Name & Signature</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
<div style="height:75px; width:100px">
<img *ngIf="regSigPath" id="approverSig" height="75px" width="100px"
[src]="regSigPath" (error)="setDefaultPic1()">
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
{{data.createdAt | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 1 b: DECLARATION BY MAIN CONTRACTOR WORK IN CHARGE
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-left">
I shall also ensure that PART 1a statement is complied with and I will ensure that
housekeeping is carried out before closing the PTW
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center">
<ion-card-header class="card-header ">
<ion-card-title class="ion-text-center">PART 1 CONTRACTOR</ion-card-title>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center card-font">
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">

<div>Name & Signature</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
<div style="height:75px; width:100px">
<img *ngIf="regSigPath" id="approverSig" height="75px" width="100px"
[src]="regSigPath" (error)="setDefaultPic1()">
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
{{data.createdAt | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 2: EVALUATION AND ASSESSMENT OF HSE COMPLIANCE - BY SAFETY ASSESSORS
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-left">
I have inspected & assessed the location and its surroundings together with the permit
requester and ensured that all reasonable, practicable measures have been taken and are
put in place to carry out the hazardous work safely. The said location is safe for the
intended work at height.
▪ I have informed the contractor that a stop work order will be implemented immediately
should any of the conditions change.

</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center">
<ion-card-header class="card-header ">
<ion-card-title class="ion-text-center">PART 2 CONTRACTOR</ion-card-title>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center card-font">
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">

<div>Name & Signature</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
<div style="height:75px; width:100px">
<img *ngIf="regSigPath" id="approverSig" height="75px" width="100px"
[src]="regSigPath" (error)="setDefaultPic1()">
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
{{data.createdAt | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 3a: REVIEW AND APPROVAL- BY PROJECT MANAGER / AUTHORISED MANAGER
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-left">
I am satisfied that there has been a proper evaluation of the risks involved, that there
will be no incompatible work running concurrently in the vicinity which may pose a risk to
personnel, that all reasonably practicable measures will be taken to ensure the safety,
health of personnel, and that all personnel have
been made aware of the hazards associated with the work.
</ion-col>
</ion-row>

</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="4" class="ion-text-left value"> The permit to work is </ion-col>
<ion-col size="3" class="ion-text-left fontBold">Approved
</ion-col>
<ion-col size="1" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">Rejected
</ion-col>
<ion-col size="1" class="ion-text-left fontBold">
</ion-col>
</ion-row>
<ion-row class="ion-no-padding ">
<ion-col size="4" class="ion-text-left value"> The Reason for rejecttion </ion-col>
<ion-col size="8" class="ion-text-left fontBold">
</ion-col>
</ion-row>
</ion-col>
</ion-row>

</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center">
<ion-card-header class="card-header ">
<ion-card-title class="ion-text-center">PART 3 CONTRACTOR</ion-card-title>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center card-font">
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">

<div>Name & Signature</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
<div style="height:75px; width:100px">
<img *ngIf="regSigPath" id="approverSig" height="75px" width="100px"
[src]="regSigPath" (error)="setDefaultPic1()">
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
{{data.createdAt | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 3b: REVOCATION AFTER APPROVAL - BY PROJECT MANAGER / AUTHORISED MANAGER (if required)
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-left">
I have determined that the permit should be revoked for the following reasons:
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center">
<ion-card-header class="card-header ">
<ion-card-title class="ion-text-center">PART 3b CONTRACTOR</ion-card-title>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center card-font">
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">

<div>Name & Signature</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
<div style="height:75px; width:100px">
<img *ngIf="regSigPath" id="approverSig" height="75px" width="100px"
[src]="regSigPath" (error)="setDefaultPic1()">
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
{{data.createdAt | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 4: NOTIFICATION OF COMPLETION OF WORK BY CONTRACTOR PTW APPLICANT
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-left">
Work completed & housekeeping has been carried out.
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center">
<ion-card-header class="card-header ">
<ion-card-title class="ion-text-center">PART 4 CONTRACTOR</ion-card-title>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center card-font">
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">

<div>Name & Signature</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
<div style="height:75px; width:100px">
<img *ngIf="regSigPath" id="approverSig" height="75px" width="100px"
[src]="regSigPath" (error)="setDefaultPic1()">
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
{{data.createdAt | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 5: Closing of PTW by Project Manager
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center">
<ion-card-header class="card-header ">
<ion-card-title class="ion-text-center">PART 5 CONTRACTOR</ion-card-title>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center card-font">
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">

<div>Name & Signature</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
<div style="height:75px; width:100px">
<img *ngIf="regSigPath" id="approverSig" height="75px" width="100px"
[src]="regSigPath" (error)="setDefaultPic1()">
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
{{data.createdAt | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
Personal Involved in this activity
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> S.No </ion-col>
<ion-col size="4" class="ion-text-left fontBold">Name of Employee
</ion-col>
<ion-col size="3" class="ion-text-left fontBold"> NRIC/ FIN / WP No
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">Designation
</ion-col>
</ion-row>
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> </ion-col>
<ion-col size="4" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
</ion-row>
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> </ion-col>
<ion-col size="4" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
</ion-row>
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> </ion-col>
<ion-col size="4" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
</ion-row>
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> </ion-col>
<ion-col size="4" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-grid>
</div>
</kendo-pdf-export>
</ion-content>
</ion-col>
</ion-row>
<ion-footer class="modalHeaderheight modalfooterheight">
<div class="paddingLetf5px modalFooter">
<ion-row>
<ion-col size-md="6"></ion-col>
<ion-col size-md="2" class="ion-no-padding ion-text-end">
<ion-button class="submitbutton button-highlight" (click)="pdf.saveAs('demo-content.pdf')" expand="block">
Kendo
</ion-button>
</ion-col>
<ion-col size-md="2" class="ion-no-padding ion-text-end">
<ion-button class="submitbutton button-highlight" (click)="generatePdfLarge()" expand="block">
Large
</ion-button>
</ion-col>
<ion-col size-md="2" class="ion-no-padding ion-text-end btnpadding30">
<ion-button class="cancelButton button-highlight" (click)="closeDialog()">
{{'general.dialogclose' | translate}}
</ion-button>
</ion-col>
</ion-row>
</div>
</ion-footer>

Technology Used : (package.json)

{
"name": "IonicApp",
"productName": "IONICApp",
"version": "1.0.0",
"FileVersion": "1.0.0",
"buildVersion": "1.0.0",
"launchUiVersion": "1.0.0",
"author": "Sami",
"private": true,
"scripts": {
"ng": "node --max_old_space_size=8192 ng",
"start": "node --max_old_space_size=8192 ng serve",
"build": "node --max_old_space_size=8192 ng build --prod",
"test": "node --max_old_space_size=8192 ng test",
"lint": "node --max_old_space_size=8192 ng lint",
"e2e": "node --max_old_space_size=8192 ng e2e"
},
"typings": "./dist/definitions/index.d.ts",
"browser": {
"zlib": false,
"crypto": false
},
"dependencies": {
"@angular/animations": "^11.0.9",
"@angular/cdk": "^7.0.3",
"@angular/common": "~10.0.0",
"@angular/forms": "~10.0.0",
"@angular/platform-browser": "~10.0.0",
"@angular/platform-browser-dynamic": "~10.0.0",
"@angular/router": "~10.0.0",
"@ionic-native/core": "^5.32.1",
"@ionic-native/file": "^5.32.1",
"@ionic/angular": "^5.0.0",
"@ionic/storage": "^2.2.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@progress/kendo-angular-pdf-export": "^3.0.3",
"@techiediaries/ngx-qrcode": "^9.1.0",
"@types/html2canvas": "0.0.36",
"@types/jspdf": "^1.3.3",
"angular-image-annotator": "0.0.10",
"angularx-qrcode": "^10.0.12",
"buffer": "^5.4.3",
"chart.js": "^2.9.3",
"core-js": "^2.5.4",
"crypto-js": "^4.0.0",
"dom-to-image": "^2.6.0",
"es6-promise-plugin": "^4.2.2",
"exceljs": "4.2.1",
"file-saver": "^2.0.5",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.7",
"image-to-base64": "^2.2.0",
"jquery": "^3.4.1",
"jspdf": "^2.3.1",
"lodash": "^4.17.15",
"moment": "^2.29.1",
"ng-circle-progress": "^1.6.0",
"ng2-charts": "^2.4.3",
"ngx-tableau": "^1.2.0",
"node-jose": "1.0.0",
"process": "^0.11.10",
"quill": "^1.3.7",
"randombytes": "^2.1.0",
"rxjs-compat": "^6.5.4",
"signature_pad": "^3.0.0-beta.4",
"stream": "0.0.2",
"temp": "^0.8.3",
"tslib": "^2.0.0",
"underscore": "^1.9.2",
"xlsx": "^0.16.9",
"xml-js": "^1.6.11",
"@progress/kendo-angular-common": "^2.0.0",
"@progress/kendo-drawing": "^1.2.0",
"@progress/kendo-licensing": "^1.0.2",
"@angular/localize": null,
"@progress/kendo-theme-default": "^5.0.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.0",
"@angular/cli": "^11.2.11",
"@angular/compiler": "~10.0.0",
"@angular/compiler-cli": "~10.0.0",
"@angular/core": "^11.0.9",
"@angular/language-service": "~10.0.0",
"@ionic/angular-toolkit": "^2.3.0",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.20.33",
"codelyzer": "^6.0.0",
"node-loader": "^0.6.0",
"node-sass": "^4.13.1",
"rxjs": "^6.6.3",
"sass": "^1.26.3",
"ts-node": "~8.3.0",
"typescript": "~3.9.5",
"zone.js": "^0.11.3"
},
"description": "OnSiteTracking"
}