### End-to-End Testing Setup with Seed Project

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/CI-build/index.md

This script sets up an end-to-end testing environment using the 'seed' project. It clones the seed project, installs dependencies, replaces the Jigsaw package, copies Jigsaw's e2e demo components and configurations, and then builds and runs the end-to-end tests. This simulates a user's environment and tests all component functionalities comprehensively.

```bash
git clone seed
cd seed
npm install
# Replace Jigsaw package with the newly built version
# Copy Jigsaw e2e demos and configurations
ng build -prod -aot
ng e2e
```

--------------------------------

### Jigsaw Project Setup and Build Script

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/CI-build/index.md

This script automates the installation of dependencies and the building of the Jigsaw project in an integrated environment. It ensures that the latest modifications can be prepared for release by optimizing the code during the packaging process.

```bash
npm install
npm run build
```

--------------------------------

### Install Jigsaw Seed Dependencies

Source: https://github.com/rdkmaster/jigsaw/blob/master/README.md

This script installs all necessary dependencies for the Jigsaw Seed project. It includes commands to set npm registry mirrors for faster downloads (especially for Chinese developers) and optionally installs the Angular CLI. Ensure you have Node.js and npm installed.

```shell
cd d:\jigsaw-seed
npm config set registry=https://registry.npm.taobao.org/                 # for Chinese developers only
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass # for Chinese developers only
npm install -g @angular/cli                                              # optional, but strongly recommended
npm install
npm start
```

--------------------------------

### KLineGraphData JSON Example

Source: https://github.com/rdkmaster/jigsaw/blob/master/src/app/for-internal/demo/pc/graph/k-line/readme.md

This JSON object provides a concrete example of the KLineGraphData format. It includes 'rowDescriptor' for labels, 'header' for time-series or categories, and 'data' which is an array of arrays representing the actual data points.

```json
{
    "rowDescriptor": ["语音感知", "数据感知", "业务体验", "网页浏览", "即时通讯", "社交媒体", "视频", "下载", "其他", "网络接入"],
    "header": ["2016.04.24", "2016.04.25", "2016.04.26", "2016.05.27", "2016.04.28", "2016.04.29", "2016.04.30", "2016.05.01", "2016.05.02", "2016.05.03", "2016.05.04", "2016.05.05", "2016.05.06", "2016.05.07"
        , "2016.05.08", "2016.05.09", "2016.05.10", "2016.05.11", "2016.05.12", "2016.05.13", "2016.05.14", "2016.05.15", "2016.05.16", "2016.05.17", "2016.05.18", "2016.05.19",
        "2016.05.20", "2016.05.21", "2016.05.22", "2016.05.23", "2016.05.24"],
    "data": [
        [20, 32, 10, 13, 9, 30, 10, 20, 32, 10, 13, 9, 30, 10, 32, 10, 13, 9, 30, 10, 13, 9, 30, 10, 32, 10, 13, 9, 30, 10, 58],
        [20, 12, 11, 24, 20, 30, 30, 20, 32, 10, 13, 9, 30, 10, 32, 10, 13, 9, 30, 10, 13, 9, 30, 10, 32, 10, 13, 9, 30, 10, 24],
        [10, 32, 21, 14, 90, 30, 40, 20, 32, 10, 13, 9, 30, 10, 32, 10, 13, 9, 30, 10, 13, 9, 30, 10, 32, 10, 13, 9, 30, 10, 85],
        [10, 32, 21, 14, 90, 30, 40, 20, 32, 10, 13, 9, 30, 80, 32, 10, 13, 66, 5, 10, 13, 9, 30, 50, 32, 10, 13, 9, 30, 10, 85],
        [80, 92, 50, 60, 90, 30, 30, 20, 32, 10, 13, 9, 30, 10, 92, 9, 34, 10, 30, 32, 13, 9, 30, 10, 92, 80, 34, 10, 30, 32, 74],
        [80, 92, 91, 41, 10, 10, 20, 20, 92, 50, 34, 10, 30, 32, 92, 8, 34, 10, 30, 32, 13, 9, 30, 10, 92, 62, 34, 10, 30, 32, 48],
        [20, 92, 35, 34, 10, 30, 32, 20, 92, 33, 34, 10, 30, 32, 92, 8, 34, 10, 30, 32, 13, 9, 30, 10, 92, 42, 34, 10, 30, 32, 87],
        [80, 62, 91, 50, 90, 30, 30, 20, 92, 38, 34, 10, 30, 32, 92, 6, 34, 10, 30, 32, 13, 9, 30, 10, 92, 58, 34, 10, 30, 32, 58],
        [80, 32, 44, 93, 20, 50, 20, 20, 92, 24, 34, 10, 30, 32, 92, 25, 34, 10, 30, 32, 13, 9, 30, 10, 92, 24, 34, 10, 30, 32, 12],
        [80, 32, 29, 34, 50, 10, 20, 20, 92, 42, 34, 10, 30, 32, 92, 29, 34, 10, 30, 32, 13, 9, 30, 10, 92, 38, 34, 10, 30, 32, 97]
    ]
}
```

--------------------------------

### Jigsaw Root Module Setup (HTML)

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/jigsaw-design-concept/index.md

Shows the required markup for setting up the Jigsaw root module in the application's main component view. This is a prerequisite for using the PopupService.

```html
<j-root>
    <!-- 所以其他内容写这里 -->
</j-root>
```

--------------------------------

### Angular Jigsaw Module Setup

Source: https://context7.com/rdkmaster/jigsaw/llms.txt

Provides the necessary imports and module configuration for integrating Jigsaw into an Angular application. This includes standard Angular modules and the JigsawModule itself, along with optional translation support.

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// Import Jigsaw module
import { JigsawModule } from '@rdkmaster/jigsaw';

// Import translation module if using i18n
import { TranslateModule } from '@ngx-translate/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,

    // Add Jigsaw module
    JigsawModule,

    // Optional: Translation support
    TranslateModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

--------------------------------

### Angular LoadingService Demo

Source: https://context7.com/rdkmaster/jigsaw/llms.txt

Demonstrates the Angular LoadingService for displaying global and local loading indicators. It includes examples of showing loading over the entire application, a specific content area, and during HTTP data fetching using both callbacks and async/await patterns.

```typescript
import { Component, ElementRef, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LoadingService } from 'jigsaw/public_api';

@Component({
  selector: 'app-loading-demo',
  template: `
    <button jigsaw-button (click)="showGlobalLoading()">
      Global Loading
    </button>

    <button jigsaw-button (click)="showLocalLoading()">
      Local Loading
    </button>

    <button jigsaw-button (click)="loadData()">
      Load Data
    </button>

    <div #contentArea style="height: 300px; border: 1px solid #ccc; padding: 20px;">
      <h3>Content Area</h3>
      <p>{{ dataStatus }}</p>
      <ul>
        <li *ngFor="let item of items">{{ item.name }}</li>
      </ul>
    </div>
  `
})
export class LoadingDemoComponent {
  @ViewChild('contentArea', { read: ElementRef }) contentArea: ElementRef;

  dataStatus: string = 'No data loaded';
  items: any[] = [];

  constructor(
    private loadingService: LoadingService,
    private http: HttpClient
  ) {}

  showGlobalLoading() {
    // Show loading over entire application
    const loading = this.loadingService.show();

    // Simulate async operation
    setTimeout(() => {
      loading.dispose();
      console.log('Loading complete');
    }, 2000);
  }

  showLocalLoading() {
    // Show loading over specific element
    const loading = this.loadingService.show(this.contentArea);

    setTimeout(() => {
      loading.dispose();
    }, 2000);
  }

  loadData() {
    this.dataStatus = 'Loading...';
    const loading = this.loadingService.show(this.contentArea);

    this.http.get<any[]>('/api/items').subscribe({
      next: (data) => {
        this.items = data;
        this.dataStatus = `Loaded ${data.length} items`;
        loading.dispose();
      },
      error: (error) => {
        this.dataStatus = 'Error loading data';
        loading.dispose();
        console.error('Load error:', error);
      }
    });
  }

  // Using with async/await
  async fetchUserData() {
    const loading = this.loadingService.show();

    try {
      const response = await this.http.get('/api/user').toPromise();
      console.log('User data:', response);
    } catch (error) {
      console.error('Error:', error);
    } finally {
      loading.dispose();
    }
  }
}

```

--------------------------------

### Creating an Empty Object (JavaScript)

Source: https://github.com/rdkmaster/jigsaw/blob/master/build/scripts/doc-generator/wechat-group.html

Creates and returns an empty JavaScript object. This is often a starting point for building objects dynamically.

```javascript
function createEmptyObject(){return {}}
```

--------------------------------

### Tooltip Directive Configuration - TypeScript

Source: https://context7.com/rdkmaster/jigsaw/llms.txt

Illustrates how to use the Jigsaw Tooltip directive to add contextual information to elements. This example showcases various configurations including text content, positioning, delays, HTML rendering, theming, and overflow-only display.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-tooltip-demo',
  template: `
    <!-- Basic tooltip -->
    <button jigsaw-button
      jigsawTooltip="Click to submit the form">
      Submit
    </button>

    <!-- Tooltip with position -->
    <button jigsaw-button
      jigsawTooltip="Tooltip on top"
      jigsawTooltipPosition="top">
      Top
    </button>

    <button jigsaw-button
      jigsawTooltip="Tooltip on right"
      jigsawTooltipPosition="right">
      Right
    </button>

    <!-- Tooltip with delay -->
    <button jigsaw-button
      jigsawTooltip="This tooltip appears after 500ms"
      [jigsawTooltipOpenDelay]="500"
      [jigsawTooltipCloseDelay]="100">
      Delayed Tooltip
    </button>

    <!-- HTML tooltip -->
    <button jigsaw-button
      [jigsawTooltip]="tooltipHtml"
      jigsawTooltipRenderAs="html">
      HTML Tooltip
    </button>

    <!-- Dark theme tooltip -->
    <button jigsaw-button
      jigsawTooltip="Dark themed tooltip"
      jigsawTooltipTheme="dark">
      Dark Tooltip
    </button>

    <!-- Overflow-only tooltip -->
    <div style="width: 200px; overflow: hidden;">
      <span jigsawTooltip="This is a very long text that will overflow"
            [jigsawTooltipOverflowOnly]="true">
        This is a very long text that will overflow the container
      </span>
    </div>
  `
})
export class TooltipDemoComponent {
  tooltipHtml = '<strong>Bold text</strong><br><em>Italic text</em>';
}
```

--------------------------------

### ColumnDefine Structure Example

Source: https://github.com/rdkmaster/jigsaw/blob/master/src/app/for-external/demo/table-renderer/renderer/readme.md

Illustrates the structure of a `ColumnDefine` object, which is used to customize table column properties. All fields are optional, allowing for flexible configuration.

```typescript
{
    target?: number | string | (number | string)[];
    visible?: boolean;
    width?: string | number;
    header?: {
        text?: string;
        renderer?: Type<TableCellRendererBase> | TemplateRef<any>;
        clazz?: string;
        sortable?: boolean;
        sortAs?: SortAs;
        defaultSortOrder?: SortOrder;
    };
    cell?: {
        renderer?: Type<TableCellRendererBase> | TemplateRef<any>;
        clazz?: string;
        editable?: boolean;
        editorRenderer?: Type<TableCellRendererBase>;
        data?: any | TableCellDataGenerator;
        tooltip?: any;
    };
    group?: boolean;
}
```

--------------------------------

### Simulating Real Project Build with Jigsaw Package

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/CI-build/index.md

This process involves cloning a real Angular app (tourist), installing its dependencies, replacing the Jigsaw package with the newly built version, and then performing a production build using Angular CLI. This step detects syntax errors, dependency issues, and potential problems arising from package version compatibility or during user upgrades.

```bash
git clone tourist
cd tourist
npm install
# Replace Jigsaw package with the newly built version
ng build -prod -aot
```

--------------------------------

### Jigsaw Button Component Examples (Angular)

Source: https://context7.com/rdkmaster/jigsaw/llms.txt

Demonstrates the usage of the Jigsaw button component, showcasing various states, sizes, color variants, disabled states, and icon integration. This component is built with Angular and utilizes standard Angular event binding.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-button-demo',
  template: `
    <!-- Basic button -->
    <button jigsaw-button (click)="onClick()">Click Me</button>

    <!-- Button with color types -->
    <jigsaw-button colorType="primary">Primary</jigsaw-button>
    <jigsaw-button colorType="warning">Warning</jigsaw-button>
    <jigsaw-button colorType="error">Error</jigsaw-button>
    <jigsaw-button colorType="danger">Danger</jigsaw-button>

    <!-- Button with sizes -->
    <jigsaw-button preSize="small">Small</jigsaw-button>
    <jigsaw-button preSize="medium">Medium</jigsaw-button>
    <jigsaw-button preSize="large">Large</jigsaw-button>

    <!-- Disabled button -->
    <jigsaw-button [disabled]="true">Disabled</jigsaw-button>

    <!-- Button with icon -->
    <jigsaw-button [icon]="'fa fa-user'" iconPosition="left">
      User Profile
    </jigsaw-button>
  `
})
export class ButtonDemoComponent {
  onClick() {
    console.log('Button clicked!');
    alert('Hello from Jigsaw Button!');
  }
}

```

--------------------------------

### Jigsaw Component Setup and Logic (TypeScript)

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/tourist/03-tileselect.md

This TypeScript code sets up the Jigsaw component, defining properties for date ranges, time periods, and the status of the multi-period setting. It includes a handleChange method to update the displayed date range.

```typescript
import {Component, Renderer2, ViewContainerRef} from '@angular/core';
import {TimeGr, TimeService} from '@rdkmaster/jigsaw';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  beginDate = 'now-1d';
  endDate = 'now';
  rangeTimeComboValue = [
    {label: TimeService.getFormatDate(this.beginDate, TimeGr.date), closable: false},
    {label: TimeService.getFormatDate(this.endDate, TimeGr.date), closable: false}
  ];
  periodTimes = [{label: '1', closable: false}, {label: '2', closable: false}, {label: '3', closable: false},
    {label: '4', closable: false}, {label: '5', closable: false}, {label: '6', closable: false},
    {label: '7', closable: false}, {label: '8', closable: false}, {label: '9', closable: false},
    {label: '10', closable: false}, {label: '11', closable: false}, {label: '12', closable: false}];

  handleChange() {
    this.rangeTimeComboValue = [
      {label: TimeService.getFormatDate(this.beginDate, TimeGr.date), closable: false},
      {label: TimeService.getFormatDate(this.endDate, TimeGr.date), closable: false}
    ];
  }
}
```

--------------------------------

### Jigsaw Component Setup and Imports in TypeScript

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/tourist/05-table.md

This TypeScript snippet shows the necessary imports for using Jigsaw components, including `Component`, `Renderer2`, `ViewContainerRef`, `TableData`, `TimeGr`, and `TimeService`. It also includes the basic Angular component decorator with selector, template, and styles.

```typescript
import {Component, Renderer2, ViewContainerRef} from '@angular/core';
import {TableData, TimeGr, TimeService} from '@rdkmaster/jigsaw';
import {Http} from "@angular/http";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ... component logic ...
}
```

--------------------------------

### Table Pagination Data Request URL Handling (POST)

Source: https://github.com/rdkmaster/jigsaw/wiki/Jigsaw-Usage-FAQ

Demonstrates how PageableTableData handles POST requests for table pagination. It shows the structure of the request body, including paging information, peer parameters, and service details, and how the actual URL is replaced by the Jigsaw service URL. For GET requests, parameters are placed in a map within the params object.

```javascript
this.pageable = new PageableTableData(http, {
            url: 'mock-data/countries',
            body: {aa: 11, bb: 22},
            method: 'post'
        });
```

--------------------------------

### Angular Drag and Drop Directive Example

Source: https://context7.com/rdkmaster/jigsaw/llms.txt

Demonstrates how to implement drag-and-drop functionality between elements in an Angular application using Jigsaw's `jigsawDraggable` and `jigsawDroppable` directives. This snippet requires JigsawModule to be imported.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-dragdrop-demo',
  template: `
    <h3>Available Items</h3>
    <div class="drag-container">
      <div *ngFor="let item of availableItems; let i = index"
           jigsawDraggable
           [jigsawDraggable]="item"
           class="drag-item">
        {{ item.name }}
      </div>
    </div>

    <h3>Selected Items</h3>
    <div jigsawDroppable
         (jigsawDrop)="onDrop($event)"
         class="drop-zone">
      <div *ngFor="let item of selectedItems"
           class="drag-item selected">
        {{ item.name }}
        <button (click)="removeItem(item)">×</button>
      </div>
      <p *ngIf="selectedItems.length === 0">Drop items here</p>
    </div>
  `,
  styles: [
    `.drag-container {
      display: flex;
      gap: 10px;
      padding: 10px;
      border: 1px solid #ddd;
    }

    .drag-item {
      padding: 10px;
      background: #f0f0f0;
      cursor: move;
      border-radius: 4px;
    }

    .drop-zone {
      min-height: 100px;
      padding: 20px;
      border: 2px dashed #ccc;
      margin-top: 20px;
    }

    .drag-item.selected {
      background: #e3f2fd;
    }
  `]
})
export class DragDropDemoComponent {
  availableItems = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' }
  ];

  selectedItems: any[] = [];

  onDrop(event: any) {
    const draggedItem = event.dragDropData;

    // Check if item already selected
    if (!this.selectedItems.find(item => item.id === draggedItem.id)) {
      this.selectedItems.push(draggedItem);
    }
  }

  removeItem(item: any) {
    const index = this.selectedItems.indexOf(item);
    if (index > -1) {
      this.selectedItems.splice(index, 1);
    }
  }
}

```

--------------------------------

### Internationalization: Changing Language

Source: https://github.com/rdkmaster/jigsaw/wiki/Jigsaw-Usage-FAQ

Provides examples of how to change the application's language using `TranslateHelper`. The first snippet shows direct language switching. The subsequent snippets demonstrate how to listen for language change events and manually trigger updates in the component's TypeScript code or access translated values reactively through a getter.

```typescript
TranslateHelper.changeLanguage(this.translateService, lang);
```

```typescript
TranslateHelper.languageChangEvent.subscribe(langInfo => {
    translateService.use(langInfo.curLang);
    this.prop = this.translateService.instant('xxx');
});
```

```typescript
get prop: string{
   return this.translateService.instant('xxx');
}
```

--------------------------------

### Jigsaw Table Component Implementation in Angular

Source: https://context7.com/rdkmaster/jigsaw/llms.txt

This Angular component demonstrates the usage of the Jigsaw Table. It includes examples of a basic table, an advanced table with various configurations (sorting, pagination, editing, custom columns), and event handlers for user interactions. It utilizes Jigsaw's data grid and pagination modules, along with Angular's HttpClient for data fetching.

```typescript
import { Component, TemplateRef, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {
  TableData,
  LocalPageableTableData,
  ColumnDefine,
  AdditionalColumnDefine,
  TableValueGenerators,
  SortAs,
  SortChangeEvent
} from 'jigsaw/public_api';

@Component({
  selector: 'app-table-demo',
  template: `
    <!-- Basic table -->
    <jigsaw-table
      [data]="basicTableData"
      width="100%"
      height="300px">
    </jigsaw-table>

    <!-- Advanced table with all features -->
    <jigsaw-table
      [data]="pageableTableData"
      [columnDefines]="columnDefines"
      [additionalColumnDefines]="additionalColumns"
      [width]="'100%'"
      [height]="'400px'"
      [columnResizable]="true"
      [floatingHeader]="true"
      [(selectedRow)]="selectedRowIndex"
      (sort)="onSort($event)"
      (selectChange)="onRowSelect($event)"
      (edit)="onCellEdit($event)">
    </jigsaw-table>

    <!-- Pagination -->
    <jigsaw-pagination
      [data]="pageableTableData"
      [pageSizeOptions]="[10, 20, 50, 100]">
    </jigsaw-pagination>

    <!-- Operation template -->
    <ng-template #operationCell let-row="row">
      <button jigsaw-button (click)="editRow(row)">Edit</button>
      <button jigsaw-button colorType="danger" (click)="deleteRow(row)">Delete</button>
    </ng-template>

    <p>Selected row: {{ selectedRowIndex }}</p>
  `
})
export class TableDemoComponent {
  @ViewChild('operationCell') operationTemplate: TemplateRef<any>;

  basicTableData: TableData;
  pageableTableData: LocalPageableTableData;
  selectedRowIndex: number = -1;

  constructor(public http: HttpClient) {
    // Basic static table
    this.basicTableData = new TableData(
      [
        ['John Doe', 'Developer', '$80,000'],
        ['Jane Smith', 'Designer', '$75,000'],
        ['Bob Johnson', 'Manager', '$95,000']
      ],
      ['name', 'position', 'salary'],
      ['Name', 'Position', 'Salary']
    );

    // Pageable table with Ajax data
    this.pageableTableData = new LocalPageableTableData();
    this.pageableTableData.pagingInfo.pageSize = 20;
    this.pageableTableData.http = http;
    this.pageableTableData.fromAjax('api/employees');
  }

  // Additional columns (row number, checkbox, operations)
  additionalColumns: AdditionalColumnDefine[] = [
    {
      pos: 0,
      width: '50px',
      header: { text: '#' },
      cell: {
        data: TableValueGenerators.rowIndexGenerator,
        clazz: 'row-number'
      }
    },
    {
      pos: -1, // Last column
      width: '150px',
      header: { text: 'Operations' },
      cell: {
        renderer: () => this.operationTemplate,
        tooltip: 'Edit or delete this row'
      }
    }
  ];

  // Column definitions
  columnDefines: ColumnDefine[] = [
    {
      target: 'name',
      width: '30%',
      header: {
        sortable: true,
        text: 'Employee Name'
      },
      cell: {
        editable: true,
        clazz: 'bold-text'
      }
    },
    {
      target: 'position',
      width: '25%',
      header: {
        sortable: true
      },
      group: true // Enable grouping by this column
    },
    {
      target: 'salary',
      width: '20%',
      header: {
        sortable: true,
        sortAs: SortAs.number
      },
      cell: {
        editable: true,
        tooltip: TableValueGenerators.originCellDataGenerator
      }
    },
    {
      target: 'email',
      width: '25%',
      header: { text: 'Email Address' }
    }
  ];

  onSort(event: SortChangeEvent) {
    console.log('Sort by:', event.field, 'Order:', event.order);
  }

  onRowSelect(rowIndex: number) {
    console.log('Selected row:', rowIndex);
    const rowData = this.pageableTableData.data[rowIndex];
    console.log('Row data:', rowData);
  }

  onCellEdit(event: any) {
    console.log('Cell edited:', {
      field: event.field,
      row: event.row,
      column: event.column,
      newValue: event.cellData,
      oldValue: event.oldCellData
    });
    // Save to backend
    // this.http.put('/api/employee/' + event.row, { ... }).subscribe();
  }

  editRow(rowIndex: number) {
    console.log('Edit row:', rowIndex);
  }

  deleteRow(rowIndex: number) {
    this.pageableTableData.data.splice(rowIndex, 1);
    this.pageableTableData.refresh();
  }
}

```

--------------------------------

### Jigsaw Input Component Examples (Angular)

Source: https://context7.com/rdkmaster/jigsaw/llms.txt

Illustrates the functionality of the Jigsaw input component, including two-way data binding, validation, icon support, password masking, and integration with Angular's Reactive Forms. It supports input customization like maxLength and disabled/readonly states.

```typescript
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-input-demo',
  template: `
    <!-- Basic input with two-way binding -->
    <jigsaw-input
      [(value)]="username"
      placeholder="Enter your name"
      (valueChange)="onValueChange($event)">
    </jigsaw-input>

    <!-- Input with validation -->
    <jigsaw-input
      [(value)]="email"
      [valid]="isEmailValid"
      placeholder="Email address"
      [maxLength]="50">
    </jigsaw-input>

    <!-- Input with icons -->
    <jigsaw-input
      [(value)]="searchText"
      [preIcon]="'fa fa-search'"
      [icon]="'fa fa-times'"
      placeholder="Search..."
      (iconSelect)="clearSearch()">
    </jigsaw-input>

    <!-- Password input -->
    <jigsaw-input
      [(value)]="password"
      [password]="true"
      placeholder="Password">
    </jigsaw-input>

    <!-- Reactive Forms integration -->
    <form [formGroup]="userForm">
      <jigsaw-input
        formControlName="firstName"
        placeholder="First Name">
      </jigsaw-input>
    </form>

    <!-- Disabled and readonly states -->
    <jigsaw-input [disabled]="true" value="Disabled input"></jigsaw-input>
    <jigsaw-input [readonly]="true" value="Readonly input"></jigsaw-input>

    <p>Username: {{ username }}</p>
  `
})
export class InputDemoComponent {
  username: string = '';
  email: string = '';
  searchText: string = '';
  password: string = '';
  isEmailValid: boolean = true;

  userForm = new FormGroup({
    firstName: new FormControl('', Validators.required)
  });

  onValueChange(value: string) {
    console.log('Input value changed:', value);
    this.isEmailValid = this.validateEmail(value);
  }

  clearSearch() {
    this.searchText = '';
  }

  validateEmail(email: string): boolean {
    return /^[^s@]+@[^s@]+.[^s@]+$/.test(email);
  }
}

```

--------------------------------

### Get Image Paths for View Editing - JavaScript

Source: https://github.com/rdkmaster/jigsaw/blob/master/src/app/for-external/assets/design/pattern/视图编辑类.html

These JavaScript functions retrieve paths for essential image and HTML resources used in the view editing components. They are crucial for loading and displaying UI elements correctly. Dependencies include the Axure utility library.

```javascript
$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
$axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
```

--------------------------------

### Renderers and Checkbox State Management in TypeScript

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/tourist/07-dialog.md

This snippet shows the asynchronous setup of rendering components and managing checkbox states. It uses `setTimeout` to delay the execution, ensuring that the DOM is ready. It iterates through renderers and conditionally applies checkbox state logic based on the display type. TypeScript is used for type annotations.

```typescript
    setTimeout(() => {
      this.settingTable.getRenderers(0).forEach(renderer => {
        if (this.displayType.id === '1') {
          this._setCheckBoxState(renderer, this.tableColumnDefine);
        } else {
          this._setCheckBoxState(renderer, this[this.tabDatas[this.tabSelectIndex].id + 'ColumnDefine']);
        }
      });
    })
```

--------------------------------

### 启动 Plunker 服务器脚本

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/how-to-deploy-your-own-plunker-site/index.md

执行 start.sh 脚本来启动整个 Plunker 服务器项目。

```bash
sh start.sh
```

--------------------------------

### 克隆和检出 plunker_www 代码

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/how-to-deploy-your-own-plunker-site/index.md

克隆 plunker_www 仓库并检出指定版本的代码。这是 Plunker 的前端界面。

```bash
git clone https://github.com/filearts/plunker_www.git
cd plunker_www
git checkout 4785ffd0f95450effd0ce8062bce7f22a6f3318b
```

--------------------------------

### 停止 Plunker 服务器进程

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/how-to-deploy-your-own-plunker-site/index.md

通过查找并杀死 Node.js 和 MongoDB 进程来停止 Plunker 服务器。

```bash
ps -ef | grep node 
kill -9 进程号
ps -ef | grep mongo 
kill -9 进程号
```

--------------------------------

### 配置angular quickstart工程的index.html

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/integrate-your-project-with-jigsaw/index.md

在`src/index.html`文件的`<head>`节点中插入Jigsaw及其依赖项的CSS和JavaScript文件引用。此步骤是为了确保Jigsaw在浏览器端能够正确加载所需的样式和脚本。

```html
<!-- 引入Jigsaw的依赖的css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/ztree/css/zTreeStyle/zTreeStyle.css">

<!-- 引入Jigsaw需要的依赖，这些依赖没有出umd包，只能配置在这里 -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="node_modules/moment/min/moment.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/ztree/js/jquery.ztree.all.min.js"></script>
<script src="node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
```

--------------------------------

### Manually Synchronize JigsawTable Size on Parent Resize

Source: https://github.com/rdkmaster/jigsaw/blob/master/src/app/for-external/demo/table-actions/resize/readme.md

Provides an example of how to manually synchronize the JigsawTable's dimensions when its parent element's size changes. This is necessary because table elements do not automatically detect parent size changes. It requires calling the `resize()` method on the JigsawTable instance. The example assumes an Angular component context.

```typescript
@ViewChild('tableCmp') tableCmp: JigsawTable;

changeTableParentWidth() {
    this.tableParent.style.width = '50%';
    this.tableCmp.resize();
}
```

--------------------------------

### 克隆和检出 plunker_api 代码

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/how-to-deploy-your-own-plunker-site/index.md

克隆 plunker_api 仓库并检出指定版本的代码。这是部署 Plunker 服务器的第一步。

```bash
git clone https://github.com/filearts/plunker_api.git
cd plunker_api
git checkout 9370605fa6d73db18a450cb11e02a730633d9b02
```

--------------------------------

### 启动 MongoDB 服务

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/how-to-deploy-your-own-plunker-site/index.md

启动 MongoDB 服务器，并指定数据库路径。用于存储 Plunker 的数据。

```bash
/home/plunker/mongodb-linux-x86_64-2.6.12/bin/mongod --dbpath /home/plunker/mongodb-linux-x86_64-2.6.12/db/
```

--------------------------------

### Python Jigsaw Solver Placeholder Function

Source: https://github.com/rdkmaster/jigsaw/blob/master/build/scripts/doc-generator/wechat-group.html

This Python code snippet defines a placeholder function intended for solving a jigsaw puzzle. Currently, it only includes a print statement indicating that the solving process has started. This function serves as a starting point for implementing a more complex jigsaw puzzle solving algorithm in Python, potentially involving piece matching, rotation, and arrangement.

```python
def solve_jigsaw(puzzle):
    print("Starting jigsaw puzzle solving process...")
    # Placeholder for actual solving logic
    # This function would typically take a puzzle representation as input
    # and return the solved puzzle or its arrangement.
    pass

# Example of how this function might be called (assuming a 'puzzle' object exists):
# solve_jigsaw(my_puzzle_object)
```

--------------------------------

### 配置angular quickstart工程的SystemJS

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/integrate-your-project-with-jigsaw/index.md

编辑`src/systemjs.config.js`文件，在`map`节点下添加Jigsaw及其相关库（如ngx-translate, echarts）的路径映射。这使得SystemJS能够正确解析和加载这些模块。

```javascript
// Jigsaw bundles
'@rdkmaster/jigsaw':                'npm:@rdkmaster/jigsaw/bundles/jigsaw.umd.js',
'@ngx-translate/core/index':        'npm:@ngx-translate/core/bundles/core.umd.js',
'@ngx-translate/http-loader/index': 'npm:@ngx-translate/http-loader/bundles/http-loader.umd.js',
'echarts':                          'npm:echarts/dist/echarts.min.js'
```

--------------------------------

### Getting Element from Array (JavaScript)

Source: https://github.com/rdkmaster/jigsaw/blob/master/build/scripts/doc-generator/wechat-group.html

Retrieves an element from an array at a specific index. Returns undefined if the index is out of bounds.

```javascript
function getElementAtIndex(arr, index){return arr[index]}
```

--------------------------------

### String Padding (JavaScript)

Source: https://github.com/rdkmaster/jigsaw/blob/master/build/scripts/doc-generator/wechat-group.html

Pads a string with a specified character until it reaches a certain length. This example pads with '0' on the left.

```javascript
function padString(str, len, char){return str.padStart(len,char)}
```

--------------------------------

### 安装 plunker_api 依赖

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/how-to-deploy-your-own-plunker-site/index.md

在 plunker_api 目录下安装所需的 Node.js 依赖包。

```bash
npm install
```

--------------------------------

### 克隆和检出 plunker_run 代码

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/how-to-deploy-your-own-plunker-site/index.md

克隆 plunker_run 仓库并检出指定版本的代码。用于运行 Plunker 中的代码示例。

```bash
git clone https://github.com/filearts/plunker_run.git
cd plunker_run
git checkout fd72c304eff55a7b9726803883bd9f9eb0798409
```

--------------------------------

### Creating an Array from an Iterable (JavaScript)

Source: https://github.com/rdkmaster/jigsaw/blob/master/build/scripts/doc-generator/wechat-group.html

Creates a new array instance from an array-like or iterable object. This example converts a Set to an Array.

```javascript
function arrayFromIterable(iterable){return Array.from(iterable)}
```

--------------------------------

### Checking if a String Starts With Substring (JavaScript)

Source: https://github.com/rdkmaster/jigsaw/blob/master/build/scripts/doc-generator/wechat-group.html

Checks if a string begins with the characters of a specified string. Returns true if it does, false otherwise.

```javascript
function startsWith(str, prefix){return str.startsWith(prefix)}
```

--------------------------------

### 修改 plunker_embed 配置文件

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/how-to-deploy-your-own-plunker-site/index.md

修改 plunker_embed 中的 assets/js/controllers/preview.coffee 和 configure.coffee 文件，调整 URL 配置。

```coffeescript
ng-src="{{plunk.raw_url}}"  # 替换为 src="http://{{plunk.raw_url}}"
```

```coffeescript
    unless host = nconf.get("host")
        console.error "The 'host' option is required for Plunker to run."
        process.exit(1)
    
    if nconf.get("nosubdomains")
        nconf.set("url:www", "http://#{host}")
        nconf.set("url:raw", "http://#{host}/raw");
        nconf.set("url:run", "http://#{host}/run");
        nconf.set("url:api", "http://plnkr.co/api");
        nconf.set("url:embed", "http://#{host}/embed");
   
    else
        nconf.set("url:www", "http://#{host}")
        nconf.set("url:run", "http://run.plnkr.co")
        nconf.set("url:api", "http://api.plnkr.co")
        nconf.set("url:embed", "http://embed.plnkr.co")
```

--------------------------------

### Getting Object Values (JavaScript)

Source: https://github.com/rdkmaster/jigsaw/blob/master/build/scripts/doc-generator/wechat-group.html

Retrieves an array containing the values of all enumerable properties of a given object. Useful for accessing all values of an object.

```javascript
function getObjectValues(obj){return Object.values(obj)}
```

--------------------------------

### 克隆和检出 plunker_embed 代码

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/how-to-deploy-your-own-plunker-site/index.md

克隆 plunker_embed 仓库并检出指定版本的代码。用于将 Plunker 嵌入到其他网页中。

```bash
git clone https://github.com/filearts/plunker_embed.git
cd plunker_embed
git checkout c56e3b4aea283d6bed9314dc40c33e869c52f674
```

--------------------------------

### Getting Object Keys (JavaScript)

Source: https://github.com/rdkmaster/jigsaw/blob/master/build/scripts/doc-generator/wechat-group.html

Retrieves an array containing the names of all enumerable properties of a given object. Useful for iterating over object keys.

```javascript
function getObjectKeys(obj){return Object.keys(obj)}
```

--------------------------------

### 创建 MongoDB 用户

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/how-to-deploy-your-own-plunker-site/index.md

在 MongoDB 中创建 plunker 数据库和管理员用户，用于 Plunker API 的认证。

```mongosh
> use plunker
> db.addUser("DB_USERNAME", "DB_PASSWORD")
> exit
```

--------------------------------

### Getting Current Date and Time (JavaScript)

Source: https://github.com/rdkmaster/jigsaw/blob/master/build/scripts/doc-generator/wechat-group.html

Creates a new Date object representing the current date and time. This is used for timestamping or date-related operations.

```javascript
function getCurrentDateTime(){return new Date()}
```

--------------------------------

### 修改AppComponent构造函数以支持PopupService

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/integrate-your-project-with-jigsaw/index.md

在Angular CLI和angular quickstart构建的工程中，需要修改`AppComponent`的构造函数，注入`ViewContainerRef`和`Renderer2`。这是由于Jigsaw的`PopupService`实现上的一个已知问题所必需的。

```typescript
constructor(public viewContainerRef: ViewContainerRef, public renderer: Renderer2, /* 原有其他依赖注入项 */) {
    ...
}
```

--------------------------------

### Consumer Component Using Third-Party Component

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/ahead-of-time-compilation-in-angular/index.md

An example of a consumer component that uses the `ThirdPartyComponent` and directly manipulates its public `initials` property, leading to potential state inconsistency.

```typescript
import {ThirdPartyComponent} from 'third-party-lib';

@Component({
  template: '<third-party [name]="name"></third-party>'
  // ...
})
class Consumer {
  @ViewChild(ThirdPartyComponent) cmp: ThirdPartyComponent;
  name = 'Foo Bar';

  ngAfterViewInit() {
    this.cmp.initials = 'M. D.';
  }
}
```

--------------------------------

### Generating a Range of Numbers (JavaScript)

Source: https://github.com/rdkmaster/jigsaw/blob/master/build/scripts/doc-generator/wechat-group.html

Generates an array of numbers within a specified range (inclusive). It uses a loop to populate the array with numbers from start to end.

```javascript
function range(start, end){let result=[];for(let i=start;i<=end;i++){result.push(i)}return result}
```

--------------------------------

### Getting Current Timestamp (JavaScript)

Source: https://github.com/rdkmaster/jigsaw/blob/master/build/scripts/doc-generator/wechat-group.html

Returns the current timestamp as a number, representing the number of milliseconds elapsed since the Unix epoch. Uses the Date object.

```javascript
function getCurrentTimestamp(){return Date.now()}
```

--------------------------------

### TypeScript: 优化 Jigsaw Import 语句格式

Source: https://github.com/rdkmaster/jigsaw/blob/master/docs/10min-regexp-practice/index.md

此代码片段展示了如何将 Jigsaw 相关的 import 语句从本地源码引用 (`jigsaw/component/...`) 转换为 npm 包引用 (`@rdkmaster/jigsaw`)。它还演示了如何将多个 Jigsaw 模块导入合并，并按照每行三个导入项的格式进行排列，以提高代码的可读性。该过程需要使用正则表达式来匹配和重组 import 语句。

```typescript
import {NgModule} from "@angular/core";
import {TranslateModule, TranslateService} from "@ngx-translate/core";

import {JigsawAlertModule} from "jigsaw/component/alert/alert";
import {JigsawButtonModule} from "jigsaw/component/button/button";
import {PopupService} from "jigsaw/service/popup.service";
import {JigsawTimeModule} from "jigsaw/component/time/index";
import {JigsawRangeTimeModule} from "jigsaw/component/range-time/index";
import {TranslateHelper} from "jigsaw/core/utils/translate-helper";

import {I18nFullDemoComponent} from "./app.component";
```

```typescript
import {
    JigsawAlertModule, JigsawButtonModule, JigsawRangeTimeModule,
    JigsawTimeModule, PopupService, TranslateHelper,
} from "@rdkmaster/jigsaw";

import {NgModule} from "@angular/core";
import {TranslateModule, TranslateService} from "@ngx-translate/core";

import {I18nFullDemoComponent} from "./app.component";
```