style(examples): enabled eslint prefer-on-push rule (#DS-2920)

.commitlintrc.js

@@ -30,6 +30,7 @@ const config = {
                 'experimental',
                 'schematics',
                 'dev',
+                'examples',
 
                 // data-grid
                 'ag-grid',

.eslintrc.js

@@ -245,7 +245,8 @@ const componentsExamplesRules = {
     files: ['packages/docs-examples/**/*.ts'],
     rules: {
         '@angular-eslint/prefer-standalone': 1,
-        '@angular-eslint/use-component-selector': 1
+        '@angular-eslint/use-component-selector': 1,
+        '@angular-eslint/prefer-on-push-component-change-detection': 1
     }
 };
 

packages/docs-examples/components/accordion/accordion-content/accordion-content-example.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqAccordionModule } from '@koobiq/components/accordion';
 import { KbqCheckboxModule } from '@koobiq/components/checkbox';
 
 /**
  * @title Accordion content
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'accordion-content-example',
     templateUrl: 'accordion-content-example.html',

packages/docs-examples/components/accordion/accordion-header/accordion-header-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqAccordionModule } from '@koobiq/components/accordion';
 import { KbqBadgeModule } from '@koobiq/components/badge';
 import { KbqCheckboxModule } from '@koobiq/components/checkbox';
@@ -8,6 +8,7 @@ import { KbqIcon, KbqIconButton } from '@koobiq/components/icon';
  * @title Accordion header
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'accordion-header-example',
     templateUrl: 'accordion-header-example.html',

packages/docs-examples/components/accordion/accordion-in-panel/accordion-in-panel-example.ts

@@ -1,4 +1,4 @@
-import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild } from '@angular/core';
 import { KbqAccordionModule } from '@koobiq/components/accordion';
 import { KbqButtonModule } from '@koobiq/components/button';
 import {
@@ -12,6 +12,7 @@ import {
  * @title Accordion in panel
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'accordion-in-panel-example',
     templateUrl: 'accordion-in-panel-example.html',

packages/docs-examples/components/accordion/accordion-in-section/accordion-in-section-example.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqAccordionModule } from '@koobiq/components/accordion';
 
 /**
  * @title Accordion in section
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'accordion-in-section-example',
     templateUrl: 'accordion-in-section-example.html',

packages/docs-examples/components/accordion/accordion-inactive-section/accordion-inactive-section-example.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqAccordionModule } from '@koobiq/components/accordion';
 
 /**
  * @title Accordion inactive section
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'accordion-inactive-section-example',
     templateUrl: 'accordion-inactive-section-example.html',

packages/docs-examples/components/accordion/accordion-overview/accordion-overview-example.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqAccordionModule } from '@koobiq/components/accordion';
 
 /**
  * @title Accordion
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'accordion-overview-example',
     templateUrl: 'accordion-overview-example.html',

packages/docs-examples/components/accordion/accordion-sections/accordion-sections-example.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqAccordionModule } from '@koobiq/components/accordion';
 import { KbqButtonToggleModule } from '@koobiq/components/button-toggle';
 
 /**
  * @title Accordion sections
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'accordion-sections-example',
     templateUrl: 'accordion-sections-example.html',

packages/docs-examples/components/accordion/accordion-states/accordion-states-example.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqAccordionModule, KbqAccordionVariant } from '@koobiq/components/accordion';
 import { KbqButtonToggleModule } from '@koobiq/components/button-toggle';
 
 /**
  * @title Accordion states
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'accordion-states-example',
     templateUrl: 'accordion-states-example.html',

packages/docs-examples/components/alert/alert-close/alert-close-example.ts

@@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqAlertModule } from '@koobiq/components/alert';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors } from '@koobiq/components/core';
@@ -9,6 +9,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
  * @title Alert close
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'alert-close-example',
     animations: [

packages/docs-examples/components/alert/alert-content/alert-content-example.ts

@@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqAlertColors, KbqAlertModule, KbqAlertStyles } from '@koobiq/components/alert';
 import { KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors } from '@koobiq/components/core';
@@ -10,6 +10,7 @@ import { KbqLinkModule } from '@koobiq/components/link';
  * @title Alert content
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'alert-content-example',
     templateUrl: 'alert-content-example.html',

packages/docs-examples/components/alert/alert-size/alert-size-example.ts

@@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqAlertModule } from '@koobiq/components/alert';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors } from '@koobiq/components/core';
@@ -9,6 +9,7 @@ import { KbqLinkModule } from '@koobiq/components/link';
  * @title Alert size
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'alert-size-example',
     templateUrl: 'alert-size-example.html',

packages/docs-examples/components/alert/alert-status/alert-status-example.ts

@@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqAlertColors, KbqAlertModule, KbqAlertStyles } from '@koobiq/components/alert';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors } from '@koobiq/components/core';
@@ -9,6 +9,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
  * @title Alert status
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'alert-status-example',
     templateUrl: 'alert-status-example.html',

packages/docs-examples/components/alert/alert-variants/alert-variants-example.ts

@@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqAlertColors, KbqAlertModule, KbqAlertStyles } from '@koobiq/components/alert';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors } from '@koobiq/components/core';
@@ -9,6 +9,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
  * @title Alert variants
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'alert-variants-example',
     styleUrls: ['alert-variants-example.css'],

packages/docs-examples/components/autocomplete/autocomplete-overview/autocomplete-overview-example.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { KbqAutocompleteModule } from '@koobiq/components/autocomplete';
 import { KbqFormsModule } from '@koobiq/components/core';
@@ -12,6 +12,7 @@ import { map, startWith } from 'rxjs/operators';
  * @title Autocomplete
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'autocomplete-overview-example',
     imports: [

packages/docs-examples/components/badge/badge-content/badge-content-example.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqBadgeColors, KbqBadgeModule } from '@koobiq/components/badge';
 import { KbqIconModule } from '@koobiq/components/icon';
 
 /**
  * @title Badge content
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'badge-content-example',
     imports: [

packages/docs-examples/components/badge/badge-fill-and-style/badge-fill-and-style-example.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqBadgeColors, KbqBadgeModule } from '@koobiq/components/badge';
 
 /**
  * @title Badge fill and style
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'badge-fill-and-style-example',
     templateUrl: 'badge-fill-and-style-example.html',

packages/docs-examples/components/badge/badge-list/badge-list-example.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqBadgeColors, KbqBadgeModule } from '@koobiq/components/badge';
 
 /**
  * @title Badge list
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'badge-list-example',
     styleUrls: ['badge-list-example.css'],

packages/docs-examples/components/badge/badge-size/badge-size-example.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqBadgeColors, KbqBadgeModule } from '@koobiq/components/badge';
 
 /**
  * @title Badge size
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'badge-size-example',
     imports: [

packages/docs-examples/components/badge/badge-table/badge-table-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqBadgeColors, KbqBadgeModule } from '@koobiq/components/badge';
 import { KbqLinkModule } from '@koobiq/components/link';
 import { KbqTableModule } from '@koobiq/components/table';
@@ -7,6 +7,7 @@ import { KbqTableModule } from '@koobiq/components/table';
  * @title Badge table
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'badge-table-example',
     templateUrl: 'badge-table-example.html',

packages/docs-examples/components/badge/badge-tooltip/badge-tooltip-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqBadgeColors, KbqBadgeModule } from '@koobiq/components/badge';
 import { PopUpPlacements } from '@koobiq/components/core';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
@@ -7,6 +7,7 @@ import { KbqToolTipModule } from '@koobiq/components/tooltip';
  * @title Badge tooltip
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'badge-tooltip-example',
     styleUrls: ['badge-tooltip-example.css'],

packages/docs-examples/components/button-toggle/button-toggle-alignment-overview/button-toggle-alignment-overview-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { KbqButtonToggleModule } from '@koobiq/components/button-toggle';
 import { KbqIconModule } from '@koobiq/components/icon';
@@ -7,6 +7,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
  * @title Button toggle alignment
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'button-toggle-alignment-overview-example',
     templateUrl: 'button-toggle-alignment-overview-example.html',

packages/docs-examples/components/button-toggle/button-toggle-disabled-all-overview/button-toggle-disabled-all-overview-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { KbqButtonToggleModule } from '@koobiq/components/button-toggle';
 import { KbqIconModule } from '@koobiq/components/icon';
@@ -7,6 +7,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
  * @title Button toggle disabled all
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'button-toggle-disabled-all-overview-example',
     templateUrl: 'button-toggle-disabled-all-overview-example.html',

packages/docs-examples/components/button-toggle/button-toggle-disabled-partial-overview/button-toggle-disabled-partial-overview-example.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqButtonToggleModule } from '@koobiq/components/button-toggle';
 import { KbqIconModule } from '@koobiq/components/icon';
 
 /**
  * @title Button toggle disabled partial
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'button-toggle-disabled-partial-overview-example',
     templateUrl: 'button-toggle-disabled-partial-overview-example.html',

packages/docs-examples/components/button-toggle/button-toggle-overview/button-toggle-overview-example.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqButtonToggleModule } from '@koobiq/components/button-toggle';
 import { KbqIconModule } from '@koobiq/components/icon';
 
 /**
  * @title Button toggle
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'button-toggle-overview-example',
     templateUrl: 'button-toggle-overview-example.html',

packages/docs-examples/components/button-toggle/button-toggle-tooltip-overview/button-toggle-tooltip-overview-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { KbqButtonToggleModule } from '@koobiq/components/button-toggle';
 import { KbqIconModule } from '@koobiq/components/icon';
@@ -7,6 +7,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
  * @title Button toggle tooltip
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'button-toggle-tooltip-overview-example',
     styleUrls: ['button-toggle-tooltip-overview-example.css'],

packages/docs-examples/components/button/button-content/button-content-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqButtonModule } from '@koobiq/components/button';
 import { KbqComponentColors } from '@koobiq/components/core';
 import { KbqIconModule } from '@koobiq/components/icon';
@@ -7,6 +7,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
  * @title Button content
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'button-content-example',
     styleUrls: ['button-content-example.css'],

packages/docs-examples/components/button/button-fill-and-style-only-icon/button-fill-and-style-only-icon-example.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { KbqButtonModule, KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors } from '@koobiq/components/core';
 import { KbqIconModule } from '@koobiq/components/icon';
@@ -7,6 +7,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
  * @title button-fill-and-style-only-icon
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     selector: 'button-fill-and-style-only-icon-example',
     templateUrl: 'button-fill-and-style-only-icon-example.html',