@onemrvapublic/design-system-demos 22.4.0-develop.1 → 22.4.0-develop.2
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.
- package/browser/assets/json/panel.json +1 -1
- package/browser/main.js +89 -89
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-panel.component.html":"<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n }\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n class=\"mt-m\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n }\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\">\n 840126/999-89 Mandelovics Maika\n </onemrva-mat-panel-block>\n </div>\n\n <onemrva-mat-sticker [color]=\"'success'\">Traité</onemrva-mat-sticker>\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <div class=\"grid\">\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span> </onemrva-mat-panel-block\n ><onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n </div>\n\n <button mat-stroked-button color=\"primary\" class=\"small mt-m\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-content\n [hasBlocks]=\"true\"\n customNgClass=\"remove-margin-empty\"\n >\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <onemrva-mat-sticker class=\"mat-info\">\n Wordt geïmporteerd\n </onemrva-mat-sticker>\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n","demo-panel.component.scss":"onemrva-mat-panel {\n .first-part {\n display: flex;\n }\n\n .remove-margin-empty {\n margin-top: 0 !important;\n }\n\n .grid {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: var(--spacer) var(--quad-spacer);\n }\n\n p {\n margin-top: 0;\n }\n}\n","demo-panel.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\n\nimport { OnemrvaMatStickerComponent } from '@onemrvapublic/design-system/mat-sticker';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n/*\n TODO: Check with designers the following items\n - responsiveness (awareness)\n - Colors or not\n - New block component\n - Show difference between expandable and not\n */\n\n@Component({\n selector: 'app-demo-panel',\n\n standalone: true,\n imports: [\n OnemrvaMatPanelModule,\n MatButtonModule,\n MatIconModule,\n OnemRvaColorDirective,\n OnemrvaMatStickerComponent,\n ],\n styleUrls: ['./demo-panel.component.scss'],\n styles: [],\n templateUrl: 'demo-panel.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPanelComponent extends DemoComponentBase {\n color = input<OnemrvaMatColor>(OnemrvaMatColor.NONE);\n expandable = input(true);\n\n expanded = false;\n\n onExpandedChange(expanded: boolean) {\n console.log('expanded logged:', expanded);\n }\n}\n"}
|
|
1
|
+
{"demo-panel.component.html":"@if (color() === 'primary') {\n <onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mb-m\">\n <onemrva-mat-panel-title>\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n 840126/999-89 First name Last name\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-title>\n </onemrva-mat-panel>\n}\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n }\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n class=\"mt-m\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n }\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\">\n 840126/999-89 Mandelovics Maika\n </onemrva-mat-panel-block>\n </div>\n\n <onemrva-mat-sticker [color]=\"'success'\">Traité</onemrva-mat-sticker>\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <div class=\"grid\">\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span> </onemrva-mat-panel-block\n ><onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n </div>\n\n <button mat-stroked-button color=\"primary\" class=\"small mt-m\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-content\n [hasBlocks]=\"true\"\n customNgClass=\"remove-margin-empty\"\n >\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <onemrva-mat-sticker class=\"mat-info\">\n Wordt geïmporteerd\n </onemrva-mat-sticker>\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n","demo-panel.component.scss":"onemrva-mat-panel {\n .first-part {\n display: flex;\n }\n\n .remove-margin-empty {\n margin-top: 0 !important;\n }\n\n .grid {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: var(--spacer) var(--quad-spacer);\n }\n\n p {\n margin-top: 0;\n }\n}\n","demo-panel.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\n\nimport { OnemrvaMatStickerComponent } from '@onemrvapublic/design-system/mat-sticker';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n/*\n TODO: Check with designers the following items\n - responsiveness (awareness)\n - Colors or not\n - New block component\n - Show difference between expandable and not\n */\n\n@Component({\n selector: 'app-demo-panel',\n\n standalone: true,\n imports: [\n OnemrvaMatPanelModule,\n MatButtonModule,\n MatIconModule,\n OnemRvaColorDirective,\n OnemrvaMatStickerComponent,\n ],\n styleUrls: ['./demo-panel.component.scss'],\n styles: [],\n templateUrl: 'demo-panel.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPanelComponent extends DemoComponentBase {\n color = input<OnemrvaMatColor>(OnemrvaMatColor.NONE);\n expandable = input(true);\n\n expanded = false;\n\n onExpandedChange(expanded: boolean) {\n console.log('expanded logged:', expanded);\n }\n}\n"}
|