@onemrvapublic/design-system-demos 20.3.3-develop.1 → 20.3.3-develop.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/assets/json/chips-input.json +1 -1
  2. package/main.js +1 -1
  3. package/package.json +1 -1
package/assets/json/chips-input.json CHANGED
@@ -1 +1 @@
1
- {"demo-chips-input.component.html":"<mat-form-field class=\"chips-input-field\" [readonly]=\"readonly()\">\n <mat-label>Favorite Fruits</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Fruit selection\">\n @for (fruit of fruits; track fruit) {\n <mat-chip-row\n [color]=\"color()\"\n [disabled]=\"disabled()\"\n (removed)=\"removeFruit(fruit)\"\n [removable]=\"!disabled\"\n >\n {{ fruit.name }}\n @if (!disabled() && !readonly()) {\n <button matChipRemove [attr.aria-label]=\"'remove ' + fruit.name\">\n <mat-icon>cancel</mat-icon>\n </button>\n }\n </mat-chip-row>\n }\n\n @if (!disabled()) {\n <input\n placeholder=\"Add fruit...\"\n [matChipInputFor]=\"chipGrid\"\n [disabled]=\"disabled()\"\n (keydown.enter)=\"addFruit($event)\"\n (blur)=\"addFruit($event)\"\n />\n }\n </mat-chip-grid>\n</mat-form-field>\n","demo-chips-input.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\n\nexport interface Fruit {\n name: string;\n}\n@Component({\n selector: 'app-demo-chips-input',\n standalone: true,\n imports: [\n CommonModule,\n FormsModule,\n MatChipsModule,\n DragDropModule,\n MatIconModule,\n MatFormFieldModule,\n OnemRvaReadonlyDirective,\n ],\n templateUrl: './demo-chips-input.component.html',\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsInputComponent extends DemoComponentBase {\n color = input<OnemrvaMatColor>('');\n disabled = input(false);\n readonly = input(false);\n\n fruits: Fruit[] = [{ name: 'Apple' }, { name: 'Banana' }, { name: 'Orange' }];\n\n addFruit(event: any): void {\n const value = (event.target.value || '').trim();\n if (value) {\n this.fruits.push({ name: value });\n event.target.value = '';\n }\n }\n\n removeFruit(fruit: Fruit): void {\n const index = this.fruits.indexOf(fruit);\n if (index >= 0) {\n this.fruits.splice(index, 1);\n }\n }\n}\n"}
1
+ {"demo-chips-input.component.html":"<mat-form-field class=\"chips-input-field\" [readonly]=\"readonly()\">\n <mat-label>Favorite Fruits</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Fruit selection\">\n @for (fruit of fruits(); track fruit) {\n <mat-chip-row\n [color]=\"color()\"\n [disabled]=\"disabled()\"\n [removable]=\"!disabled()\"\n (removed)=\"remove(fruit)\"\n >\n {{ fruit }}\n @if (!disabled() && !readonly()) {\n <button matChipRemove [attr.aria-label]=\"'remove ' + fruit\">\n <mat-icon>cancel</mat-icon>\n </button>\n }\n </mat-chip-row>\n }\n\n @if (!disabled()) {\n <input\n #fruitInput\n placeholder=\"Add fruit...\"\n [(ngModel)]=\"currentFruit\"\n [matChipInputFor]=\"chipGrid\"\n [matAutocomplete]=\"auto\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (matChipInputTokenEnd)=\"add($event)\"\n />\n }\n </mat-chip-grid>\n\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n @for (fruit of filteredFruits(); track fruit) {\n <mat-option [value]=\"fruit\">{{ fruit }}</mat-option>\n }\n </mat-autocomplete>\n</mat-form-field>\n","demo-chips-input.component.ts":"import {\n Component,\n computed,\n inject,\n input,\n model,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\nimport {\n MatAutocomplete,\n MatAutocompleteSelectedEvent,\n MatAutocompleteTrigger,\n MatOption,\n} from '@angular/material/autocomplete';\nimport { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\n\nexport interface Fruit {\n name: string;\n}\n@Component({\n selector: 'app-demo-chips-input',\n standalone: true,\n imports: [\n CommonModule,\n FormsModule,\n MatChipsModule,\n DragDropModule,\n MatIconModule,\n MatFormFieldModule,\n OnemRvaReadonlyDirective,\n MatAutocomplete,\n MatOption,\n MatAutocompleteTrigger,\n ],\n templateUrl: './demo-chips-input.component.html',\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsInputComponent extends DemoComponentBase {\n color = input<OnemrvaMatColor>('');\n disabled = input(false);\n readonly = input(false);\n\n readonly separatorKeysCodes: number[] = [ENTER, COMMA];\n readonly filteredFruits = computed(() => {\n const currentFruit = this.currentFruit().toLowerCase();\n return currentFruit\n ? this.allFruits.filter(fruit =>\n fruit.toLowerCase().includes(currentFruit),\n )\n : this.allFruits.slice();\n });\n readonly currentFruit = model('');\n readonly announcer = inject(LiveAnnouncer);\n readonly fruits = signal(['Lemon']);\n readonly allFruits: string[] = [\n 'Apple',\n 'Lemon',\n 'Lime',\n 'Orange',\n 'Strawberry',\n ];\n\n add(event: MatChipInputEvent): void {\n const value = (event.value || '').trim();\n\n // Add our fruit\n if (value) {\n this.fruits.update(fruits => [...fruits, value]);\n }\n\n // Clear the input value\n this.currentFruit.set('');\n }\n\n remove(fruit: string): void {\n this.fruits.update(fruits => {\n const index = fruits.indexOf(fruit);\n if (index < 0) {\n return fruits;\n }\n\n fruits.splice(index, 1);\n this.announcer.announce(`Removed ${fruit}`);\n return [...fruits];\n });\n }\n\n selected(event: MatAutocompleteSelectedEvent): void {\n this.fruits.update(fruits => [...fruits, event.option.viewValue]);\n this.currentFruit.set('');\n event.option.deselect();\n }\n}\n"}