@ship-ui/core 0.19.3 → 0.19.4
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/assets/mcp/components.json +137 -350
- package/bin/mcp/index.js +14 -3
- package/bin/ship-fg-scanner +0 -0
- package/bin/ship-fg.mjs +7 -2
- package/bin/src/ship-fg.ts +8 -2
- package/fesm2022/ship-ui-core.mjs +513 -126
- package/fesm2022/ship-ui-core.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/components/ship-datepicker.scss +35 -3
- package/styles/components/ship-form-field.scss +1 -0
- package/types/ship-ui-core.d.ts +108 -72
- package/snippets/ship-ui.code-snippets +0 -536
|
@@ -17,34 +17,19 @@
|
|
|
17
17
|
"name": "color",
|
|
18
18
|
"type": "ShipColor | null",
|
|
19
19
|
"description": "",
|
|
20
|
-
"defaultValue": "null"
|
|
21
|
-
"options": [
|
|
22
|
-
"primary",
|
|
23
|
-
"accent",
|
|
24
|
-
"warn",
|
|
25
|
-
"error",
|
|
26
|
-
"success"
|
|
27
|
-
]
|
|
20
|
+
"defaultValue": "null"
|
|
28
21
|
},
|
|
29
22
|
{
|
|
30
23
|
"name": "variant",
|
|
31
24
|
"type": "ShipButtonGroupVariant | null",
|
|
32
25
|
"description": "",
|
|
33
|
-
"defaultValue": "null"
|
|
34
|
-
"options": [
|
|
35
|
-
"type-a",
|
|
36
|
-
"type-b"
|
|
37
|
-
]
|
|
26
|
+
"defaultValue": "null"
|
|
38
27
|
},
|
|
39
28
|
{
|
|
40
29
|
"name": "size",
|
|
41
30
|
"type": "ShipSize | null",
|
|
42
31
|
"description": "",
|
|
43
|
-
"defaultValue": "null"
|
|
44
|
-
"options": [
|
|
45
|
-
"small",
|
|
46
|
-
"xsmall"
|
|
47
|
-
]
|
|
32
|
+
"defaultValue": "null"
|
|
48
33
|
}
|
|
49
34
|
],
|
|
50
35
|
"outputs": [],
|
|
@@ -367,26 +352,13 @@
|
|
|
367
352
|
"name": "color",
|
|
368
353
|
"type": "ShipColor | null",
|
|
369
354
|
"description": "",
|
|
370
|
-
"defaultValue": "null"
|
|
371
|
-
"options": [
|
|
372
|
-
"primary",
|
|
373
|
-
"accent",
|
|
374
|
-
"warn",
|
|
375
|
-
"error",
|
|
376
|
-
"success"
|
|
377
|
-
]
|
|
355
|
+
"defaultValue": "null"
|
|
378
356
|
},
|
|
379
357
|
{
|
|
380
358
|
"name": "variant",
|
|
381
359
|
"type": "ShipSheetVariant | null",
|
|
382
360
|
"description": "",
|
|
383
|
-
"defaultValue": "null"
|
|
384
|
-
"options": [
|
|
385
|
-
"simple",
|
|
386
|
-
"outlined",
|
|
387
|
-
"flat",
|
|
388
|
-
"raised"
|
|
389
|
-
]
|
|
361
|
+
"defaultValue": "null"
|
|
390
362
|
},
|
|
391
363
|
{
|
|
392
364
|
"name": "readonly",
|
|
@@ -571,26 +543,13 @@
|
|
|
571
543
|
"name": "color",
|
|
572
544
|
"type": "ShipColor | null",
|
|
573
545
|
"description": "",
|
|
574
|
-
"defaultValue": "null"
|
|
575
|
-
"options": [
|
|
576
|
-
"primary",
|
|
577
|
-
"accent",
|
|
578
|
-
"warn",
|
|
579
|
-
"error",
|
|
580
|
-
"success"
|
|
581
|
-
]
|
|
546
|
+
"defaultValue": "null"
|
|
582
547
|
},
|
|
583
548
|
{
|
|
584
549
|
"name": "variant",
|
|
585
550
|
"type": "ShipSheetVariant | null",
|
|
586
551
|
"description": "",
|
|
587
|
-
"defaultValue": "null"
|
|
588
|
-
"options": [
|
|
589
|
-
"simple",
|
|
590
|
-
"outlined",
|
|
591
|
-
"flat",
|
|
592
|
-
"raised"
|
|
593
|
-
]
|
|
552
|
+
"defaultValue": "null"
|
|
594
553
|
}
|
|
595
554
|
],
|
|
596
555
|
"outputs": [],
|
|
@@ -880,34 +839,19 @@
|
|
|
880
839
|
"name": "color",
|
|
881
840
|
"type": "ShipColor | null",
|
|
882
841
|
"description": "",
|
|
883
|
-
"defaultValue": "null"
|
|
884
|
-
"options": [
|
|
885
|
-
"primary",
|
|
886
|
-
"accent",
|
|
887
|
-
"warn",
|
|
888
|
-
"error",
|
|
889
|
-
"success"
|
|
890
|
-
]
|
|
842
|
+
"defaultValue": "null"
|
|
891
843
|
},
|
|
892
844
|
{
|
|
893
845
|
"name": "variant",
|
|
894
846
|
"type": "ShipFormFieldVariant | null",
|
|
895
847
|
"description": "",
|
|
896
|
-
"defaultValue": "null"
|
|
897
|
-
"options": [
|
|
898
|
-
"base",
|
|
899
|
-
"horizontal"
|
|
900
|
-
]
|
|
848
|
+
"defaultValue": "null"
|
|
901
849
|
},
|
|
902
850
|
{
|
|
903
851
|
"name": "size",
|
|
904
852
|
"type": "ShipSize | null",
|
|
905
853
|
"description": "",
|
|
906
|
-
"defaultValue": "null"
|
|
907
|
-
"options": [
|
|
908
|
-
"small",
|
|
909
|
-
"xsmall"
|
|
910
|
-
]
|
|
854
|
+
"defaultValue": "null"
|
|
911
855
|
},
|
|
912
856
|
{
|
|
913
857
|
"name": "readonly",
|
|
@@ -1006,8 +950,7 @@
|
|
|
1006
950
|
"name": "variant",
|
|
1007
951
|
"type": "ShipVariant | null",
|
|
1008
952
|
"description": "",
|
|
1009
|
-
"defaultValue": "null"
|
|
1010
|
-
"options": []
|
|
953
|
+
"defaultValue": "null"
|
|
1011
954
|
},
|
|
1012
955
|
{
|
|
1013
956
|
"name": "size",
|
|
@@ -1052,8 +995,8 @@
|
|
|
1052
995
|
"examples": [
|
|
1053
996
|
{
|
|
1054
997
|
"name": "sandbox-accordion",
|
|
1055
|
-
"html": "<div class=\"controls\">\n <p>Controls</p>\n <header>\n <div class=\"row\">\n <sh-toggle [(checked)]=\"allowMultiple\" class=\"primary raised\">Allow Multiple Open</sh-toggle>\n <sh-select
|
|
1056
|
-
"ts": "import { ChangeDetectionStrategy, Component, effect, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipAccordion, ShipButton, ShipFormField, ShipSelect, ShipToggle } from 'ship-ui';\n\n@Component({\n selector: 'app-sandbox-accordion',\n imports: [FormsModule, ShipAccordion, ShipToggle, ShipSelect, ShipFormField, ShipButton],\n templateUrl: './sandbox-accordion.html',\n styleUrl: './sandbox-accordion.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SandboxAccordion {\n openPanels = signal<string>('panel1');\n allowMultiple = signal<boolean>(false);\n variantType = signal<
|
|
998
|
+
"html": "<div class=\"controls\">\n <p>Controls</p>\n <header>\n <div class=\"row\">\n <sh-toggle [(checked)]=\"allowMultiple\" class=\"primary raised\">Allow Multiple Open</sh-toggle>\n <sh-select color=\"primary\" [selectMultiple]=\"allowMultiple()\" [options]=\"availablePanels\">\n <label>Open Panels</label>\n <input type=\"text\" [(ngModel)]=\"selectedPanelsArray\" style=\"display: none\" />\n </sh-select>\n\n <sh-select color=\"primary\" [options]=\"availableVariants\" label=\"label\" value=\"value\" [isClearable]=\"false\">\n <label>Variant</label>\n <input type=\"text\" [(ngModel)]=\"variantType\" style=\"display: none\" />\n </sh-select>\n </div>\n </header>\n</div>\n\n<div class=\"sandbox\">\n <sh-accordion [(value)]=\"openPanels\" [allowMultiple]=\"allowMultiple()\" [variant]=\"variantType()\">\n <details value=\"panel1\">\n <summary>Personal Information</summary>\n <p>\n This is standard content projected inside native HTML tags! The entire accordion is configured seamlessly with\n DOM structure.\n </p>\n </details>\n\n <details value=\"panel2\">\n <summary>Advanced Settings</summary>\n <sh-form-field>\n <label>Settings A</label>\n <input type=\"text\" value=\"Configuration\" />\n </sh-form-field>\n </details>\n\n <details value=\"panel3\">\n <summary>Danger Zone</summary>\n <button shButton color=\"error\" variant=\"flat\" size=\"small\">Delete Account</button>\n </details>\n </sh-accordion>\n</div>\n",
|
|
999
|
+
"ts": "import { ChangeDetectionStrategy, Component, effect, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipAccordion, ShipButton, ShipFormField, ShipSelect, ShipToggle, ShipVariant } from 'ship-ui';\n\n@Component({\n selector: 'app-sandbox-accordion',\n imports: [FormsModule, ShipAccordion, ShipToggle, ShipSelect, ShipFormField, ShipButton],\n templateUrl: './sandbox-accordion.html',\n styleUrl: './sandbox-accordion.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SandboxAccordion {\n openPanels = signal<string>('panel1');\n allowMultiple = signal<boolean>(false);\n variantType = signal<ShipVariant | null>(null);\n\n availableVariants = [\n { value: '', label: 'Default' },\n { value: 'type-b', label: 'Type B' },\n ];\n\n availablePanels = ['panel1', 'panel2', 'panel3'];\n selectedPanelsArray = signal<string[]>(['panel1']);\n\n constructor() {\n effect(() => {\n const arrStr = this.selectedPanelsArray().join(',');\n if (this.openPanels() !== arrStr) {\n this.openPanels.set(arrStr);\n }\n });\n\n effect(() => {\n const valStr = this.openPanels();\n const currentArr = valStr ? valStr.split(',').filter((x) => x) : [];\n if (currentArr.join(',') !== this.selectedPanelsArray().join(',')) {\n this.selectedPanelsArray.set(currentArr);\n }\n });\n }\n}\n"
|
|
1057
1000
|
},
|
|
1058
1001
|
{
|
|
1059
1002
|
"name": "base-accordion",
|
|
@@ -1150,36 +1093,19 @@
|
|
|
1150
1093
|
"name": "color",
|
|
1151
1094
|
"type": "ShipColor | null",
|
|
1152
1095
|
"description": "",
|
|
1153
|
-
"defaultValue": "null"
|
|
1154
|
-
"options": [
|
|
1155
|
-
"primary",
|
|
1156
|
-
"accent",
|
|
1157
|
-
"warn",
|
|
1158
|
-
"error",
|
|
1159
|
-
"success"
|
|
1160
|
-
]
|
|
1096
|
+
"defaultValue": "null"
|
|
1161
1097
|
},
|
|
1162
1098
|
{
|
|
1163
1099
|
"name": "variant",
|
|
1164
1100
|
"type": "ShipSheetVariant | null",
|
|
1165
1101
|
"description": "",
|
|
1166
|
-
"defaultValue": "null"
|
|
1167
|
-
"options": [
|
|
1168
|
-
"simple",
|
|
1169
|
-
"outlined",
|
|
1170
|
-
"flat",
|
|
1171
|
-
"raised"
|
|
1172
|
-
]
|
|
1102
|
+
"defaultValue": "null"
|
|
1173
1103
|
},
|
|
1174
1104
|
{
|
|
1175
1105
|
"name": "size",
|
|
1176
1106
|
"type": "ShipSize | null",
|
|
1177
1107
|
"description": "",
|
|
1178
|
-
"defaultValue": "null"
|
|
1179
|
-
"options": [
|
|
1180
|
-
"small",
|
|
1181
|
-
"xsmall"
|
|
1182
|
-
]
|
|
1108
|
+
"defaultValue": "null"
|
|
1183
1109
|
},
|
|
1184
1110
|
{
|
|
1185
1111
|
"name": "sharp",
|
|
@@ -1317,24 +1243,13 @@
|
|
|
1317
1243
|
"name": "color",
|
|
1318
1244
|
"type": "ShipColor | null",
|
|
1319
1245
|
"description": "",
|
|
1320
|
-
"defaultValue": "null"
|
|
1321
|
-
"options": [
|
|
1322
|
-
"primary",
|
|
1323
|
-
"accent",
|
|
1324
|
-
"warn",
|
|
1325
|
-
"error",
|
|
1326
|
-
"success"
|
|
1327
|
-
]
|
|
1246
|
+
"defaultValue": "null"
|
|
1328
1247
|
},
|
|
1329
1248
|
{
|
|
1330
1249
|
"name": "variant",
|
|
1331
1250
|
"type": "ShipTableVariant | null",
|
|
1332
1251
|
"description": "",
|
|
1333
|
-
"defaultValue": "null"
|
|
1334
|
-
"options": [
|
|
1335
|
-
"type-a",
|
|
1336
|
-
"type-b"
|
|
1337
|
-
]
|
|
1252
|
+
"defaultValue": "null"
|
|
1338
1253
|
},
|
|
1339
1254
|
{
|
|
1340
1255
|
"name": "sortByColumn",
|
|
@@ -1493,12 +1408,12 @@
|
|
|
1493
1408
|
{
|
|
1494
1409
|
"name": "toggle-row-table",
|
|
1495
1410
|
"html": "<sh-table [data]=\"dataSource()\" [loading]=\"isLoading()\" [variant]=\"variant()\">\n <tr>\n @for (col of displayedColumns(); track col) {\n <th>{{ col }}</th>\n }\n </tr>\n\n @for (row of dataSource(); track $index) {\n <tr (click)=\"toggleRow($index)\">\n @for (col of displayedColumns(); track col) {\n <td>\n @if ($first) {\n <button shButton class=\"small primary raised\">\n @if ($index === openRowIndex()) {\n <sh-icon>caret-up</sh-icon>\n } @else {\n <sh-icon>caret-down</sh-icon>\n }\n </button>\n }\n\n {{ row[col] }}\n </td>\n }\n </tr>\n\n @if ($index === openRowIndex()) {\n <tr>\n <td class=\"span-all\" [style.background-color]=\"'red'\">hi im a secondary row and i can be styled differently</td>\n </tr>\n }\n }\n\n <div table-no-rows>No data available</div>\n</sh-table>\n",
|
|
1496
|
-
"ts": "import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';\nimport { ShipButton, ShipIcon, ShipTable } from 'ship-ui';\n\nconst ELEMENT_DATA = [\n { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },\n { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },\n { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },\n { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },\n { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },\n { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },\n { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },\n { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },\n { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },\n { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },\n];\nconst COLUMNS = ['position', 'name', 'weight', 'symbol'] as const;\n\n@Component({\n selector: 'toggle-row-table',\n standalone: true,\n imports: [ShipTable, ShipIcon, ShipButton],\n templateUrl: './toggle-row-table.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleRowTable {\n variant = input<
|
|
1411
|
+
"ts": "import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';\nimport { ShipButton, ShipIcon, ShipTable, ShipTableVariant } from 'ship-ui';\n\nconst ELEMENT_DATA = [\n { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },\n { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },\n { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },\n { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },\n { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },\n { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },\n { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },\n { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },\n { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },\n { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },\n];\nconst COLUMNS = ['position', 'name', 'weight', 'symbol'] as const;\n\n@Component({\n selector: 'toggle-row-table',\n standalone: true,\n imports: [ShipTable, ShipIcon, ShipButton],\n templateUrl: './toggle-row-table.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleRowTable {\n variant = input<ShipTableVariant | null>(null);\n displayedColumns = signal([...COLUMNS]);\n dataSource = signal([...ELEMENT_DATA]);\n isLoading = signal(true);\n openRowIndex = signal<number | null>(null);\n\n ngOnInit() {\n setTimeout(() => {\n this.isLoading.set(false);\n }, 450);\n }\n\n toggleRow(index: number) {\n this.openRowIndex.set(this.openRowIndex() === index ? null : index);\n }\n}\n"
|
|
1497
1412
|
},
|
|
1498
1413
|
{
|
|
1499
1414
|
"name": "multi-table-header",
|
|
1500
1415
|
"html": "<sh-table [data]=\"dataSource()\" [variant]=\"variant()\">\n <tr thead class=\"sticky\">\n @for (col of displayedColumns(); track col) {\n <th>{{ col }}</th>\n }\n </tr>\n\n <tr thead class=\"sticky\">\n @for (col of displayedColumns(); track col) {\n <th>{{ col }}</th>\n }\n </tr>\n\n @for (row of dataSource(); track $index) {\n <tr [class.sticky]=\"$index % 3 === 2\">\n @for (col of displayedColumns(); track col) {\n <td>{{ row[col] }}</td>\n }\n </tr>\n }\n\n <div table-no-rows>No data available</div>\n</sh-table>\n",
|
|
1501
|
-
"ts": "import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';\nimport { ShipTable } from 'ship-ui';\n\nconst ELEMENT_DATA = [\n { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },\n { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },\n { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },\n { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },\n { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },\n { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },\n { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },\n { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },\n { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },\n { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },\n];\nconst COLUMNS = ['position', 'name', 'weight', 'symbol'] as const;\n\n@Component({\n selector: 'multi-table-header',\n standalone: true,\n imports: [ShipTable],\n templateUrl: './multi-table-header.html',\n styleUrl: './multi-table-header.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MultiTableHeader {\n variant = input<
|
|
1416
|
+
"ts": "import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';\nimport { ShipTable, ShipTableVariant } from 'ship-ui';\n\nconst ELEMENT_DATA = [\n { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },\n { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },\n { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },\n { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },\n { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },\n { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },\n { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },\n { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },\n { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },\n { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },\n];\nconst COLUMNS = ['position', 'name', 'weight', 'symbol'] as const;\n\n@Component({\n selector: 'multi-table-header',\n standalone: true,\n imports: [ShipTable],\n templateUrl: './multi-table-header.html',\n styleUrl: './multi-table-header.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MultiTableHeader {\n variant = input<ShipTableVariant | null>(null);\n displayedColumns = signal([...COLUMNS]);\n dataSource = signal([...ELEMENT_DATA]);\n}\n"
|
|
1502
1417
|
},
|
|
1503
1418
|
{
|
|
1504
1419
|
"name": "resizing-table",
|
|
@@ -1689,26 +1604,13 @@
|
|
|
1689
1604
|
"name": "color",
|
|
1690
1605
|
"type": "ShipColor | null",
|
|
1691
1606
|
"description": "",
|
|
1692
|
-
"defaultValue": "null"
|
|
1693
|
-
"options": [
|
|
1694
|
-
"primary",
|
|
1695
|
-
"accent",
|
|
1696
|
-
"warn",
|
|
1697
|
-
"error",
|
|
1698
|
-
"success"
|
|
1699
|
-
]
|
|
1607
|
+
"defaultValue": "null"
|
|
1700
1608
|
},
|
|
1701
1609
|
{
|
|
1702
1610
|
"name": "variant",
|
|
1703
1611
|
"type": "ShipSheetVariant | null",
|
|
1704
1612
|
"description": "",
|
|
1705
|
-
"defaultValue": "null"
|
|
1706
|
-
"options": [
|
|
1707
|
-
"simple",
|
|
1708
|
-
"outlined",
|
|
1709
|
-
"flat",
|
|
1710
|
-
"raised"
|
|
1711
|
-
]
|
|
1613
|
+
"defaultValue": "null"
|
|
1712
1614
|
}
|
|
1713
1615
|
],
|
|
1714
1616
|
"outputs": [],
|
|
@@ -1792,31 +1694,19 @@
|
|
|
1792
1694
|
"name": "color",
|
|
1793
1695
|
"type": "ShipColor | null",
|
|
1794
1696
|
"description": "",
|
|
1795
|
-
"defaultValue": "null"
|
|
1796
|
-
"options": [
|
|
1797
|
-
"primary",
|
|
1798
|
-
"accent",
|
|
1799
|
-
"warn",
|
|
1800
|
-
"error",
|
|
1801
|
-
"success"
|
|
1802
|
-
]
|
|
1697
|
+
"defaultValue": "null"
|
|
1803
1698
|
},
|
|
1804
1699
|
{
|
|
1805
1700
|
"name": "variant",
|
|
1806
|
-
"type": "
|
|
1701
|
+
"type": "ShipRangeSliderVariant | null",
|
|
1807
1702
|
"description": "",
|
|
1808
|
-
"defaultValue": "null"
|
|
1809
|
-
"options": []
|
|
1703
|
+
"defaultValue": "null"
|
|
1810
1704
|
},
|
|
1811
1705
|
{
|
|
1812
1706
|
"name": "size",
|
|
1813
1707
|
"type": "ShipSize | null",
|
|
1814
1708
|
"description": "",
|
|
1815
|
-
"defaultValue": "null"
|
|
1816
|
-
"options": [
|
|
1817
|
-
"small",
|
|
1818
|
-
"xsmall"
|
|
1819
|
-
]
|
|
1709
|
+
"defaultValue": "null"
|
|
1820
1710
|
},
|
|
1821
1711
|
{
|
|
1822
1712
|
"name": "sharp",
|
|
@@ -1932,7 +1822,7 @@
|
|
|
1932
1822
|
{
|
|
1933
1823
|
"name": "range-slider-sandbox",
|
|
1934
1824
|
"html": "<div class=\"controls\">\n <div class=\"row\">\n <sh-toggle class=\"primary raised\" [(checked)]=\"disabled\">Disabled</sh-toggle>\n <sh-toggle class=\"primary raised\" [(checked)]=\"readonly\">Read-only</sh-toggle>\n\n @if (variation() !== 'thick') {\n <sh-toggle class=\"primary raised\" [(checked)]=\"alwaysShow\">Always show value indicator</sh-toggle>\n }\n <sh-toggle class=\"primary raised\" [(checked)]=\"sharp\">Sharp</sh-toggle>\n </div>\n\n <sh-button-group [(value)]=\"color\">\n <button value=\"primary\">Primary</button>\n <button value=\"accent\">Accent</button>\n <button value=\"warn\">Warn</button>\n <button value=\"error\">Error</button>\n <button value=\"success\">Success</button>\n </sh-button-group>\n\n <sh-button-group [(value)]=\"variation\">\n <button value=\"base\">Default</button>\n <button value=\"simple\">Simple</button>\n <button value=\"outlined\">Outlined</button>\n <button value=\"flat\">Flat</button>\n <button value=\"raised\">Raised</button>\n </sh-button-group>\n\n <div class=\"fields\">\n <sh-form-field>\n <label>Unit</label>\n <input type=\"text\" [(ngModel)]=\"unit\" />\n </sh-form-field>\n\n <sh-form-field>\n <label>Min</label>\n <input type=\"text\" [(ngModel)]=\"min\" />\n </sh-form-field>\n\n <sh-form-field>\n <label>Max</label>\n <input type=\"text\" [(ngModel)]=\"max\" />\n </sh-form-field>\n\n <sh-form-field>\n <label>Step</label>\n <input type=\"text\" [(ngModel)]=\"step\" />\n </sh-form-field>\n </div>\n</div>\n\n<div class=\"sandbox-example\">\n <sh-range-slider\n [unit]=\"unit()\"\n [color]=\"color()\"\n [variant]=\"variation()\"\n [sharp]=\"sharp()\"\n [alwaysShow]=\"alwaysShow()\">\n <input\n type=\"range\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\" />\n </sh-range-slider>\n <p>Selected: {{ value() }}</p>\n</div>\n",
|
|
1935
|
-
"ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipFormField, ShipRangeSlider, ShipToggle } from 'ship-ui';\n\n@Component({\n selector: 'app-range-slider-sandbox',\n standalone: true,\n imports: [FormsModule, ShipRangeSlider, ShipButtonGroup, ShipToggle, ShipFormField],\n templateUrl: './range-slider-sandbox.html',\n styleUrl: './range-slider-sandbox.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RangeSliderSandbox {\n value = signal(50);\n min = signal(0);\n max = signal(100);\n step = signal(1);\n disabled = signal(false);\n readonly = signal(false);\n alwaysShow = signal(false);\n sharp = signal(false);\n unit = signal('%');\n color = signal<'primary' | 'accent' | 'warn' | 'success' | 'error'>('primary');\n variation = signal<
|
|
1825
|
+
"ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipFormField, ShipRangeSlider, ShipRangeSliderVariant, ShipToggle } from 'ship-ui';\n\n@Component({\n selector: 'app-range-slider-sandbox',\n standalone: true,\n imports: [FormsModule, ShipRangeSlider, ShipButtonGroup, ShipToggle, ShipFormField],\n templateUrl: './range-slider-sandbox.html',\n styleUrl: './range-slider-sandbox.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RangeSliderSandbox {\n value = signal(50);\n min = signal(0);\n max = signal(100);\n step = signal(1);\n disabled = signal(false);\n readonly = signal(false);\n alwaysShow = signal(false);\n sharp = signal(false);\n unit = signal('%');\n color = signal<'primary' | 'accent' | 'warn' | 'success' | 'error'>('primary');\n variation = signal<ShipRangeSliderVariant | null>(null);\n}\n"
|
|
1936
1826
|
},
|
|
1937
1827
|
{
|
|
1938
1828
|
"name": "unit-range-slider",
|
|
@@ -1982,26 +1872,13 @@
|
|
|
1982
1872
|
"name": "color",
|
|
1983
1873
|
"type": "ShipColor | null",
|
|
1984
1874
|
"description": "",
|
|
1985
|
-
"defaultValue": "null"
|
|
1986
|
-
"options": [
|
|
1987
|
-
"primary",
|
|
1988
|
-
"accent",
|
|
1989
|
-
"warn",
|
|
1990
|
-
"error",
|
|
1991
|
-
"success"
|
|
1992
|
-
]
|
|
1875
|
+
"defaultValue": "null"
|
|
1993
1876
|
},
|
|
1994
1877
|
{
|
|
1995
1878
|
"name": "variant",
|
|
1996
1879
|
"type": "ShipSheetVariant | null",
|
|
1997
1880
|
"description": "",
|
|
1998
|
-
"defaultValue": "null"
|
|
1999
|
-
"options": [
|
|
2000
|
-
"simple",
|
|
2001
|
-
"outlined",
|
|
2002
|
-
"flat",
|
|
2003
|
-
"raised"
|
|
2004
|
-
]
|
|
1881
|
+
"defaultValue": "null"
|
|
2005
1882
|
},
|
|
2006
1883
|
{
|
|
2007
1884
|
"name": "readonly",
|
|
@@ -2156,26 +2033,13 @@
|
|
|
2156
2033
|
"name": "color",
|
|
2157
2034
|
"type": "ShipColor | null",
|
|
2158
2035
|
"description": "",
|
|
2159
|
-
"defaultValue": "null"
|
|
2160
|
-
"options": [
|
|
2161
|
-
"primary",
|
|
2162
|
-
"accent",
|
|
2163
|
-
"warn",
|
|
2164
|
-
"error",
|
|
2165
|
-
"success"
|
|
2166
|
-
]
|
|
2036
|
+
"defaultValue": "null"
|
|
2167
2037
|
},
|
|
2168
2038
|
{
|
|
2169
2039
|
"name": "variant",
|
|
2170
2040
|
"type": "ShipSheetVariant | null",
|
|
2171
2041
|
"description": "",
|
|
2172
|
-
"defaultValue": "null"
|
|
2173
|
-
"options": [
|
|
2174
|
-
"simple",
|
|
2175
|
-
"outlined",
|
|
2176
|
-
"flat",
|
|
2177
|
-
"raised"
|
|
2178
|
-
]
|
|
2042
|
+
"defaultValue": "null"
|
|
2179
2043
|
},
|
|
2180
2044
|
{
|
|
2181
2045
|
"name": "alertService",
|
|
@@ -2330,21 +2194,14 @@
|
|
|
2330
2194
|
"name": "color",
|
|
2331
2195
|
"type": "ShipColor | null",
|
|
2332
2196
|
"description": "",
|
|
2333
|
-
"defaultValue": "null"
|
|
2334
|
-
"options": [
|
|
2335
|
-
"primary",
|
|
2336
|
-
"accent",
|
|
2337
|
-
"warn",
|
|
2338
|
-
"error",
|
|
2339
|
-
"success"
|
|
2340
|
-
]
|
|
2197
|
+
"defaultValue": "null"
|
|
2341
2198
|
}
|
|
2342
2199
|
],
|
|
2343
2200
|
"outputs": [],
|
|
2344
2201
|
"methods": [
|
|
2345
2202
|
{
|
|
2346
2203
|
"name": "super",
|
|
2347
|
-
"parameters": "'[value], [step], [routerLinkActive], button, a', 'active');\n\n effect(() => {\n this.items().forEach((item) => {\n if (!item.querySelector('.sh-radio')",
|
|
2204
|
+
"parameters": "'[value], [step], [routerLinkActive], button, a', 'active', { hostRole: 'tablist', itemRole: 'tab' });\n\n effect(() => {\n this.items().forEach((item) => {\n if (!item.querySelector('.sh-radio')",
|
|
2348
2205
|
"returnType": "any",
|
|
2349
2206
|
"description": ""
|
|
2350
2207
|
}
|
|
@@ -2421,36 +2278,19 @@
|
|
|
2421
2278
|
"name": "color",
|
|
2422
2279
|
"type": "ShipColor | null",
|
|
2423
2280
|
"description": "",
|
|
2424
|
-
"defaultValue": "null"
|
|
2425
|
-
"options": [
|
|
2426
|
-
"primary",
|
|
2427
|
-
"accent",
|
|
2428
|
-
"warn",
|
|
2429
|
-
"error",
|
|
2430
|
-
"success"
|
|
2431
|
-
]
|
|
2281
|
+
"defaultValue": "null"
|
|
2432
2282
|
},
|
|
2433
2283
|
{
|
|
2434
2284
|
"name": "variant",
|
|
2435
2285
|
"type": "ShipSheetVariant | null",
|
|
2436
2286
|
"description": "",
|
|
2437
|
-
"defaultValue": "null"
|
|
2438
|
-
"options": [
|
|
2439
|
-
"simple",
|
|
2440
|
-
"outlined",
|
|
2441
|
-
"flat",
|
|
2442
|
-
"raised"
|
|
2443
|
-
]
|
|
2287
|
+
"defaultValue": "null"
|
|
2444
2288
|
},
|
|
2445
2289
|
{
|
|
2446
2290
|
"name": "size",
|
|
2447
2291
|
"type": "ShipButtonSize | null",
|
|
2448
2292
|
"description": "",
|
|
2449
|
-
"defaultValue": "null"
|
|
2450
|
-
"options": [
|
|
2451
|
-
"small",
|
|
2452
|
-
"xsmall"
|
|
2453
|
-
]
|
|
2293
|
+
"defaultValue": "null"
|
|
2454
2294
|
},
|
|
2455
2295
|
{
|
|
2456
2296
|
"name": "readonly",
|
|
@@ -2537,26 +2377,13 @@
|
|
|
2537
2377
|
"name": "color",
|
|
2538
2378
|
"type": "ShipColor | null",
|
|
2539
2379
|
"description": "",
|
|
2540
|
-
"defaultValue": "null"
|
|
2541
|
-
"options": [
|
|
2542
|
-
"primary",
|
|
2543
|
-
"accent",
|
|
2544
|
-
"warn",
|
|
2545
|
-
"error",
|
|
2546
|
-
"success"
|
|
2547
|
-
]
|
|
2380
|
+
"defaultValue": "null"
|
|
2548
2381
|
},
|
|
2549
2382
|
{
|
|
2550
2383
|
"name": "variant",
|
|
2551
2384
|
"type": "ShipSheetVariant | null",
|
|
2552
2385
|
"description": "",
|
|
2553
|
-
"defaultValue": "null"
|
|
2554
|
-
"options": [
|
|
2555
|
-
"simple",
|
|
2556
|
-
"outlined",
|
|
2557
|
-
"flat",
|
|
2558
|
-
"raised"
|
|
2559
|
-
]
|
|
2386
|
+
"defaultValue": "null"
|
|
2560
2387
|
},
|
|
2561
2388
|
{
|
|
2562
2389
|
"name": "readonly",
|
|
@@ -2648,25 +2475,13 @@
|
|
|
2648
2475
|
"name": "color",
|
|
2649
2476
|
"type": "ShipColor | null",
|
|
2650
2477
|
"description": "",
|
|
2651
|
-
"defaultValue": "null"
|
|
2652
|
-
"options": [
|
|
2653
|
-
"primary",
|
|
2654
|
-
"accent",
|
|
2655
|
-
"warn",
|
|
2656
|
-
"error",
|
|
2657
|
-
"success"
|
|
2658
|
-
]
|
|
2478
|
+
"defaultValue": "null"
|
|
2659
2479
|
},
|
|
2660
2480
|
{
|
|
2661
2481
|
"name": "variant",
|
|
2662
2482
|
"type": "ShipCardVariant | null",
|
|
2663
2483
|
"description": "",
|
|
2664
|
-
"defaultValue": "null"
|
|
2665
|
-
"options": [
|
|
2666
|
-
"type-a",
|
|
2667
|
-
"type-b",
|
|
2668
|
-
"type-c"
|
|
2669
|
-
]
|
|
2484
|
+
"defaultValue": "null"
|
|
2670
2485
|
},
|
|
2671
2486
|
{
|
|
2672
2487
|
"name": "isActive",
|
|
@@ -2725,6 +2540,12 @@
|
|
|
2725
2540
|
}
|
|
2726
2541
|
],
|
|
2727
2542
|
"methods": [
|
|
2543
|
+
{
|
|
2544
|
+
"name": "onDateChange",
|
|
2545
|
+
"parameters": "date: Date | null",
|
|
2546
|
+
"returnType": "any",
|
|
2547
|
+
"description": ""
|
|
2548
|
+
},
|
|
2728
2549
|
{
|
|
2729
2550
|
"name": "close",
|
|
2730
2551
|
"parameters": "",
|
|
@@ -2773,7 +2594,7 @@
|
|
|
2773
2594
|
},
|
|
2774
2595
|
{
|
|
2775
2596
|
"name": "range-input-datepicker",
|
|
2776
|
-
"html": "<sh-daterange-input>\n <label>Date Range (Reactive Form)</label>\n <input type=\"text\" [formControl]=\"startDate\" placeholder=\"Start date\" />\n <input type=\"text\" [formControl]=\"endDate\" placeholder=\"End date\" />\n <sh-icon suffix>calendar</sh-icon>\n</sh-daterange-input>\n<p>Start: {{ startDate.value | date: 'mediumDate' }}</p>\n<p>End: {{ endDate.value | date: 'mediumDate' }}</p>\n",
|
|
2597
|
+
"html": "<sh-daterange-input>\n <label>Date Range (Reactive Form)</label>\n <input type=\"text\" [formControl]=\"startDate\" placeholder=\"Start date\" />\n <input type=\"text\" [formControl]=\"endDate\" placeholder=\"End date\" />\n <sh-icon suffix>calendar</sh-icon>\n</sh-daterange-input>\n<p>Start: {{ startDate.value || null | date: 'mediumDate' }}</p>\n<p>End: {{ endDate.value || null | date: 'mediumDate' }}</p>\n",
|
|
2777
2598
|
"ts": "import { DatePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { ShipDaterangeInput, ShipIcon } from 'ship-ui';\n\n@Component({\n selector: 'app-range-input-datepicker',\n standalone: true,\n imports: [ReactiveFormsModule, ShipDaterangeInput, ShipIcon, DatePipe],\n templateUrl: './range-input-datepicker.html',\n styleUrl: './range-input-datepicker.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RangeInputDatepicker {\n startDate = new FormControl(new Date());\n endDate = new FormControl(new Date(Date.now() + 86400000)); // Tomorrow\n}\n"
|
|
2778
2599
|
},
|
|
2779
2600
|
{
|
|
@@ -2829,18 +2650,18 @@
|
|
|
2829
2650
|
"methods": [
|
|
2830
2651
|
{
|
|
2831
2652
|
"name": "effect",
|
|
2832
|
-
"parameters": "() => {\n
|
|
2653
|
+
"parameters": "() => {\n const inputs = this.#inputObserver() as HTMLInputElement[];\n if (inputs.length === 0) return;\n\n if (inputs[0]) this.setupInput(inputs[0], true);\n if (inputs[1]) this.setupInput(inputs[1], false);\n });\n }\n\n private setupInput(element: HTMLInputElement, isStart: boolean",
|
|
2833
2654
|
"returnType": "any",
|
|
2834
2655
|
"description": ""
|
|
2835
2656
|
},
|
|
2836
2657
|
{
|
|
2837
|
-
"name": "
|
|
2838
|
-
"parameters": "
|
|
2658
|
+
"name": "onFocusOut",
|
|
2659
|
+
"parameters": "event: FocusEvent",
|
|
2839
2660
|
"returnType": "any",
|
|
2840
2661
|
"description": ""
|
|
2841
2662
|
},
|
|
2842
2663
|
{
|
|
2843
|
-
"name": "
|
|
2664
|
+
"name": "onStartDateChange",
|
|
2844
2665
|
"parameters": "date: Date | null",
|
|
2845
2666
|
"returnType": "any",
|
|
2846
2667
|
"description": ""
|
|
@@ -2881,7 +2702,7 @@
|
|
|
2881
2702
|
},
|
|
2882
2703
|
{
|
|
2883
2704
|
"name": "range-input-datepicker",
|
|
2884
|
-
"html": "<sh-daterange-input>\n <label>Date Range (Reactive Form)</label>\n <input type=\"text\" [formControl]=\"startDate\" placeholder=\"Start date\" />\n <input type=\"text\" [formControl]=\"endDate\" placeholder=\"End date\" />\n <sh-icon suffix>calendar</sh-icon>\n</sh-daterange-input>\n<p>Start: {{ startDate.value | date: 'mediumDate' }}</p>\n<p>End: {{ endDate.value | date: 'mediumDate' }}</p>\n",
|
|
2705
|
+
"html": "<sh-daterange-input>\n <label>Date Range (Reactive Form)</label>\n <input type=\"text\" [formControl]=\"startDate\" placeholder=\"Start date\" />\n <input type=\"text\" [formControl]=\"endDate\" placeholder=\"End date\" />\n <sh-icon suffix>calendar</sh-icon>\n</sh-daterange-input>\n<p>Start: {{ startDate.value || null | date: 'mediumDate' }}</p>\n<p>End: {{ endDate.value || null | date: 'mediumDate' }}</p>\n",
|
|
2885
2706
|
"ts": "import { DatePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { ShipDaterangeInput, ShipIcon } from 'ship-ui';\n\n@Component({\n selector: 'app-range-input-datepicker',\n standalone: true,\n imports: [ReactiveFormsModule, ShipDaterangeInput, ShipIcon, DatePipe],\n templateUrl: './range-input-datepicker.html',\n styleUrl: './range-input-datepicker.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RangeInputDatepicker {\n startDate = new FormControl(new Date());\n endDate = new FormControl(new Date(Date.now() + 86400000)); // Tomorrow\n}\n"
|
|
2886
2707
|
},
|
|
2887
2708
|
{
|
|
@@ -2914,6 +2735,12 @@
|
|
|
2914
2735
|
"description": "",
|
|
2915
2736
|
"defaultValue": "false"
|
|
2916
2737
|
},
|
|
2738
|
+
{
|
|
2739
|
+
"name": "activeRangeSelection",
|
|
2740
|
+
"type": "'start' | 'end' | null",
|
|
2741
|
+
"description": "",
|
|
2742
|
+
"defaultValue": "null"
|
|
2743
|
+
},
|
|
2917
2744
|
{
|
|
2918
2745
|
"name": "monthsToShow",
|
|
2919
2746
|
"type": "number",
|
|
@@ -2951,7 +2778,13 @@
|
|
|
2951
2778
|
"defaultValue": "null"
|
|
2952
2779
|
}
|
|
2953
2780
|
],
|
|
2954
|
-
"outputs": [
|
|
2781
|
+
"outputs": [
|
|
2782
|
+
{
|
|
2783
|
+
"name": "tabbedOut",
|
|
2784
|
+
"type": "void",
|
|
2785
|
+
"description": ""
|
|
2786
|
+
}
|
|
2787
|
+
],
|
|
2955
2788
|
"methods": [
|
|
2956
2789
|
{
|
|
2957
2790
|
"name": "getLastVisibleMonth",
|
|
@@ -2991,13 +2824,13 @@
|
|
|
2991
2824
|
},
|
|
2992
2825
|
{
|
|
2993
2826
|
"name": "setDate",
|
|
2994
|
-
"parameters": "newDate: Date, selectedElement:
|
|
2827
|
+
"parameters": "newDate: Date, selectedElement: HTMLElement",
|
|
2995
2828
|
"returnType": "any",
|
|
2996
2829
|
"description": ""
|
|
2997
2830
|
},
|
|
2998
2831
|
{
|
|
2999
2832
|
"name": "setSelectedDateStylePosition",
|
|
3000
|
-
"parameters": "selectedElement:
|
|
2833
|
+
"parameters": "selectedElement: HTMLElement",
|
|
3001
2834
|
"returnType": "any",
|
|
3002
2835
|
"description": ""
|
|
3003
2836
|
},
|
|
@@ -3018,6 +2851,42 @@
|
|
|
3018
2851
|
"parameters": "date: Date, monthOffset: number",
|
|
3019
2852
|
"returnType": "boolean",
|
|
3020
2853
|
"description": ""
|
|
2854
|
+
},
|
|
2855
|
+
{
|
|
2856
|
+
"name": "isSameDay",
|
|
2857
|
+
"parameters": "d1: Date | null | undefined, d2: Date | null | undefined",
|
|
2858
|
+
"returnType": "boolean",
|
|
2859
|
+
"description": ""
|
|
2860
|
+
},
|
|
2861
|
+
{
|
|
2862
|
+
"name": "getTabIndex",
|
|
2863
|
+
"parameters": "date: Date",
|
|
2864
|
+
"returnType": "number",
|
|
2865
|
+
"description": ""
|
|
2866
|
+
},
|
|
2867
|
+
{
|
|
2868
|
+
"name": "isDateSelectedBool",
|
|
2869
|
+
"parameters": "date: Date",
|
|
2870
|
+
"returnType": "boolean",
|
|
2871
|
+
"description": ""
|
|
2872
|
+
},
|
|
2873
|
+
{
|
|
2874
|
+
"name": "onKeydown",
|
|
2875
|
+
"parameters": "event: KeyboardEvent, date: Date",
|
|
2876
|
+
"returnType": "any",
|
|
2877
|
+
"description": ""
|
|
2878
|
+
},
|
|
2879
|
+
{
|
|
2880
|
+
"name": "ensureDateVisible",
|
|
2881
|
+
"parameters": "date: Date",
|
|
2882
|
+
"returnType": "any",
|
|
2883
|
+
"description": ""
|
|
2884
|
+
},
|
|
2885
|
+
{
|
|
2886
|
+
"name": "focusActiveDate",
|
|
2887
|
+
"parameters": "",
|
|
2888
|
+
"returnType": "any",
|
|
2889
|
+
"description": ""
|
|
3021
2890
|
}
|
|
3022
2891
|
],
|
|
3023
2892
|
"cssVariables": [
|
|
@@ -3090,7 +2959,7 @@
|
|
|
3090
2959
|
},
|
|
3091
2960
|
{
|
|
3092
2961
|
"name": "range-input-datepicker",
|
|
3093
|
-
"html": "<sh-daterange-input>\n <label>Date Range (Reactive Form)</label>\n <input type=\"text\" [formControl]=\"startDate\" placeholder=\"Start date\" />\n <input type=\"text\" [formControl]=\"endDate\" placeholder=\"End date\" />\n <sh-icon suffix>calendar</sh-icon>\n</sh-daterange-input>\n<p>Start: {{ startDate.value | date: 'mediumDate' }}</p>\n<p>End: {{ endDate.value | date: 'mediumDate' }}</p>\n",
|
|
2962
|
+
"html": "<sh-daterange-input>\n <label>Date Range (Reactive Form)</label>\n <input type=\"text\" [formControl]=\"startDate\" placeholder=\"Start date\" />\n <input type=\"text\" [formControl]=\"endDate\" placeholder=\"End date\" />\n <sh-icon suffix>calendar</sh-icon>\n</sh-daterange-input>\n<p>Start: {{ startDate.value || null | date: 'mediumDate' }}</p>\n<p>End: {{ endDate.value || null | date: 'mediumDate' }}</p>\n",
|
|
3094
2963
|
"ts": "import { DatePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { ShipDaterangeInput, ShipIcon } from 'ship-ui';\n\n@Component({\n selector: 'app-range-input-datepicker',\n standalone: true,\n imports: [ReactiveFormsModule, ShipDaterangeInput, ShipIcon, DatePipe],\n templateUrl: './range-input-datepicker.html',\n styleUrl: './range-input-datepicker.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RangeInputDatepicker {\n startDate = new FormControl(new Date());\n endDate = new FormControl(new Date(Date.now() + 86400000)); // Tomorrow\n}\n"
|
|
3095
2964
|
},
|
|
3096
2965
|
{
|
|
@@ -3118,24 +2987,13 @@
|
|
|
3118
2987
|
"name": "color",
|
|
3119
2988
|
"type": "ShipColor | null",
|
|
3120
2989
|
"description": "",
|
|
3121
|
-
"defaultValue": "null"
|
|
3122
|
-
"options": [
|
|
3123
|
-
"primary",
|
|
3124
|
-
"accent",
|
|
3125
|
-
"warn",
|
|
3126
|
-
"error",
|
|
3127
|
-
"success"
|
|
3128
|
-
]
|
|
2990
|
+
"defaultValue": "null"
|
|
3129
2991
|
},
|
|
3130
2992
|
{
|
|
3131
2993
|
"name": "size",
|
|
3132
2994
|
"type": "ShipIconSize | null",
|
|
3133
2995
|
"description": "",
|
|
3134
|
-
"defaultValue": "null"
|
|
3135
|
-
"options": [
|
|
3136
|
-
"small",
|
|
3137
|
-
"large"
|
|
3138
|
-
]
|
|
2996
|
+
"defaultValue": "null"
|
|
3139
2997
|
}
|
|
3140
2998
|
],
|
|
3141
2999
|
"outputs": [],
|
|
@@ -3156,8 +3014,8 @@
|
|
|
3156
3014
|
"examples": [
|
|
3157
3015
|
{
|
|
3158
3016
|
"name": "sandbox-icon",
|
|
3159
|
-
"html": "<div class=\"controls\">\n <p>Controls</p>\n <header>\n <div class=\"row\">\n <sh-button-group class=\"small\" [(value)]=\"size\">\n <button value=\"\">Default</button>\n <button value=\"large\">Large</button>\n <button value=\"small\">Small</button>\n <button value=\"inherit\">Inherit</button>\n </sh-button-group>\n\n <sh-button-group class=\"small\" [(value)]=\"colorClass\">\n <button value=\"\">Default</button>\n <button value=\"primary\">Primary</button>\n <button value=\"accent\">Accent</button>\n <button value=\"warn\">Warn</button>\n <button value=\"error\">Error</button>\n <button value=\"success\">Success</button>\n </sh-button-group>\n </div>\n\n @if (size() === '
|
|
3160
|
-
"ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipIcon, ShipRangeSlider } from 'ship-ui';\n\n@Component({\n selector: 'app-sandbox-icon',\n imports: [FormsModule, ShipIcon, ShipButtonGroup, ShipRangeSlider],\n templateUrl: './sandbox-icon.html',\n styleUrl: './sandbox-icon.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SandboxIcon {\n size = signal<
|
|
3017
|
+
"html": "<div class=\"controls\">\n <p>Controls</p>\n <header>\n <div class=\"row\">\n <sh-button-group class=\"small\" [(value)]=\"size\">\n <button value=\"\">Default</button>\n <button value=\"large\">Large</button>\n <button value=\"small\">Small</button>\n <button value=\"inherit\">Inherit</button>\n </sh-button-group>\n\n <sh-button-group class=\"small\" [(value)]=\"colorClass\">\n <button value=\"\">Default</button>\n <button value=\"primary\">Primary</button>\n <button value=\"accent\">Accent</button>\n <button value=\"warn\">Warn</button>\n <button value=\"error\">Error</button>\n <button value=\"success\">Success</button>\n </sh-button-group>\n </div>\n\n @if (size() === '') {\n <div class=\"row\">\n <sh-range-slider>\n <input type=\"range\" [min]=\"10\" [max]=\"64\" [step]=\"2\" [(ngModel)]=\"sizeValue\" />\n </sh-range-slider>\n </div>\n }\n </header>\n</div>\n\n<div class=\"sandbox\" [style.font-size]=\"sizeValue() + 'px'\">\n <section>\n <h4>Cloud-warning</h4>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning</sh-icon>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning-thin</sh-icon>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning-light</sh-icon>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning-fill</sh-icon>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">cloud-warning-bold</sh-icon>\n </section>\n\n <section>\n <h4>Warning</h4>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning</sh-icon>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-thin</sh-icon>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-light</sh-icon>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-fill</sh-icon>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-bold</sh-icon>\n </section>\n\n <section>\n <h4>Warning warning-octagon</h4>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon</sh-icon>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon-thin</sh-icon>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon-light</sh-icon>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon-fill</sh-icon>\n <sh-icon [size]=\"size()\" [color]=\"colorClass()\">warning-octagon-bold</sh-icon>\n </section>\n</div>\n",
|
|
3018
|
+
"ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipColor, ShipIcon, ShipIconSize, ShipRangeSlider } from 'ship-ui';\n\n@Component({\n selector: 'app-sandbox-icon',\n imports: [FormsModule, ShipIcon, ShipButtonGroup, ShipRangeSlider],\n templateUrl: './sandbox-icon.html',\n styleUrl: './sandbox-icon.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SandboxIcon {\n size = signal<ShipIconSize>('');\n sizeValue = signal<number>(10);\n colorClass = signal<ShipColor>('');\n}\n"
|
|
3161
3019
|
}
|
|
3162
3020
|
]
|
|
3163
3021
|
},
|
|
@@ -3278,34 +3136,19 @@
|
|
|
3278
3136
|
"name": "color",
|
|
3279
3137
|
"type": "ShipColor | null",
|
|
3280
3138
|
"description": "",
|
|
3281
|
-
"defaultValue": "null"
|
|
3282
|
-
"options": [
|
|
3283
|
-
"primary",
|
|
3284
|
-
"accent",
|
|
3285
|
-
"warn",
|
|
3286
|
-
"error",
|
|
3287
|
-
"success"
|
|
3288
|
-
]
|
|
3139
|
+
"defaultValue": "null"
|
|
3289
3140
|
},
|
|
3290
3141
|
{
|
|
3291
3142
|
"name": "variant",
|
|
3292
3143
|
"type": "ShipFormFieldVariant | null",
|
|
3293
3144
|
"description": "",
|
|
3294
|
-
"defaultValue": "null"
|
|
3295
|
-
"options": [
|
|
3296
|
-
"base",
|
|
3297
|
-
"horizontal"
|
|
3298
|
-
]
|
|
3145
|
+
"defaultValue": "null"
|
|
3299
3146
|
},
|
|
3300
3147
|
{
|
|
3301
3148
|
"name": "size",
|
|
3302
3149
|
"type": "ShipSize | null",
|
|
3303
3150
|
"description": "",
|
|
3304
|
-
"defaultValue": "null"
|
|
3305
|
-
"options": [
|
|
3306
|
-
"small",
|
|
3307
|
-
"xsmall"
|
|
3308
|
-
]
|
|
3151
|
+
"defaultValue": "null"
|
|
3309
3152
|
},
|
|
3310
3153
|
{
|
|
3311
3154
|
"name": "readonly",
|
|
@@ -3324,7 +3167,7 @@
|
|
|
3324
3167
|
},
|
|
3325
3168
|
{
|
|
3326
3169
|
"name": "afterNextRender",
|
|
3327
|
-
"parameters": "() => {\n const
|
|
3170
|
+
"parameters": "() => {\n const el = this.#selfRef.nativeElement;\n const inputEl = el.querySelector('input') || el.querySelector('textarea');\n const labelEl = el.querySelector('label');\n const errorEl = el.querySelector('[error]');\n const hintEl = el.querySelector('[hint]');\n\n if (inputEl",
|
|
3328
3171
|
"returnType": "any",
|
|
3329
3172
|
"description": ""
|
|
3330
3173
|
}
|
|
@@ -3399,8 +3242,8 @@
|
|
|
3399
3242
|
},
|
|
3400
3243
|
{
|
|
3401
3244
|
"name": "form-field-sandbox",
|
|
3402
|
-
"html": "<div class=\"controls\">\n <div class=\"row\">\n <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showLabel\"
|
|
3403
|
-
"ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipCheckbox, ShipFormField } from 'ship-ui';\n\n@Component({\n selector: 'app-form-field-sandbox',\n standalone: true,\n imports: [FormsModule, ShipFormField, ShipButtonGroup, ShipCheckbox],\n templateUrl: './form-field-sandbox.html',\n styleUrl: './form-field-sandbox.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FormFieldSandbox {\n label = signal<string>('Label');\n showLabel = signal<boolean>(true);\n prefix = signal<string>('');\n showPrefix = signal<boolean>(false);\n suffix = signal<string>('');\n showSuffix = signal<boolean>(false);\n placeholder = signal<string>('Placeholder...');\n hint = signal<string>('');\n showHint = signal<boolean>(false);\n error = signal<string>('');\n showError = signal<boolean>(false);\n disabled = signal<boolean>(false);\n inputType = signal<'text' | 'number' | 'textarea'>('text');\n
|
|
3245
|
+
"html": "<div class=\"controls\">\n <div class=\"row\">\n <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showLabel\">Label</sh-checkbox>\n <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showPrefix\">Prefix</sh-checkbox>\n <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showSuffix\">Suffix</sh-checkbox>\n <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showHint\">Hint</sh-checkbox>\n <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showError\">Error</sh-checkbox>\n <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"disabled\">Disabled</sh-checkbox>\n </div>\n\n <div class=\"row\">\n <sh-button-group class=\"small\" [(value)]=\"inputType\">\n <button type=\"button\" value=\"text\">Text</button>\n <button type=\"button\" value=\"number\">Number</button>\n <button type=\"button\" value=\"textarea\">Textarea</button>\n </sh-button-group>\n\n <sh-button-group class=\"small\" [(value)]=\"variant\">\n <button type=\"button\" value=\"\">Default</button>\n <button type=\"button\" value=\"small\">Small</button>\n <button type=\"button\" value=\"autosize\">Autosize</button>\n <button type=\"button\" value=\"center\">Center</button>\n </sh-button-group>\n </div>\n <div class=\"row\">\n @if (showLabel()) {\n <sh-form-field><input [(ngModel)]=\"label\" placeholder=\"Label text\" /></sh-form-field>\n }\n @if (showPrefix()) {\n <sh-form-field><input [(ngModel)]=\"prefix\" placeholder=\"Prefix content\" /></sh-form-field>\n }\n @if (showSuffix()) {\n <sh-form-field><input [(ngModel)]=\"suffix\" placeholder=\"Suffix content\" /></sh-form-field>\n }\n @if (showHint()) {\n <sh-form-field><input [(ngModel)]=\"hint\" placeholder=\"Hint text\" /></sh-form-field>\n }\n @if (showError()) {\n <sh-form-field><input [(ngModel)]=\"error\" placeholder=\"Error text\" /></sh-form-field>\n }\n <sh-form-field><input [(ngModel)]=\"placeholder\" placeholder=\"Placeholder\" /></sh-form-field>\n </div>\n</div>\n\n<div class=\"sandbox\">\n <sh-form-field [variant]=\"variant()\">\n @if (showLabel()) {\n <label>{{ label() }}</label>\n }\n @if (showPrefix()) {\n <ng-container prefix>{{ prefix() }}</ng-container>\n }\n @if (showSuffix()) {\n <ng-container suffix>{{ suffix() }}</ng-container>\n }\n @if (inputType() === 'text') {\n <input [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\" />\n } @else if (inputType() === 'number') {\n <input type=\"number\" [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\" />\n } @else if (inputType() === 'textarea') {\n <textarea [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\"></textarea>\n }\n @if (showHint()) {\n <span hint>{{ hint() }}</span>\n }\n @if (showError()) {\n <span error>{{ error() }}</span>\n }\n </sh-form-field>\n</div>\n",
|
|
3246
|
+
"ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipCheckbox, ShipFormField, ShipFormFieldVariant } from 'ship-ui';\n\n@Component({\n selector: 'app-form-field-sandbox',\n standalone: true,\n imports: [FormsModule, ShipFormField, ShipButtonGroup, ShipCheckbox],\n templateUrl: './form-field-sandbox.html',\n styleUrl: './form-field-sandbox.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FormFieldSandbox {\n label = signal<string>('Label');\n showLabel = signal<boolean>(true);\n prefix = signal<string>('');\n showPrefix = signal<boolean>(false);\n suffix = signal<string>('');\n showSuffix = signal<boolean>(false);\n placeholder = signal<string>('Placeholder...');\n hint = signal<string>('');\n showHint = signal<boolean>(false);\n error = signal<string>('');\n showError = signal<boolean>(false);\n disabled = signal<boolean>(false);\n inputType = signal<'text' | 'number' | 'textarea'>('text');\n variant = signal<ShipFormFieldVariant>(''); // '', 'small', 'autosize', etc.\n value = signal<string>('');\n}\n"
|
|
3404
3247
|
},
|
|
3405
3248
|
{
|
|
3406
3249
|
"name": "small-form-field",
|
|
@@ -3409,7 +3252,7 @@
|
|
|
3409
3252
|
},
|
|
3410
3253
|
{
|
|
3411
3254
|
"name": "base-form-field",
|
|
3412
|
-
"html": "<sh-form-field>\n <input placeholder=\"Placeholder no label...\" type=\"text\" />\n <div boxPrefix>\n Hello\n <sh-icon>circle</sh-icon>\n </div>\n\n <div boxSuffix>hello 123</div>\n</sh-form-field>\n\n<sh-form-field>\n <input placeholder=\"Placeholder no label...\" />\n <sh-icon prefix>circle</sh-icon>\n\n <ng-container suffix>hello 123</ng-container>\n</sh-form-field>\n\n<sh-form-field variant=\"autosize\">\n <input type=\"time\" />\n <div boxPrefix>\n <sh-icon>clock</sh-icon>\n </div>\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input placeholder=\"Placeholder...\" />\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input placeholder=\"Placeholder...\" />\n <sh-icon prefix>circle</sh-icon>\n <sh-icon>circle</sh-icon>\n</sh-form-field>\n\n<sh-icon>circle</sh-icon>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input [formControl]=\"disabledCtrl\" placeholder=\"Placeholder...\" />\n <sh-icon prefix>circle</sh-icon>\n <sh-icon>circle</sh-icon>\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n <sh-icon class=\"error\" shTooltip=\"hello world\">acorn-bold</sh-icon>\n </label>\n <input [formControl]=\"baseCtrl\" placeholder=\"Placeholder...\" #input />\n <span hint>Hint</span>\n\n <span hint>{{ baseCtrl.value?.length ?? 0 }}/10</span>\n\n @if ((baseCtrl.value?.length ?? 0) > 10) {\n <span error>Write a message in this alert area</span>\n }\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Error without hint\n <sh-icon>question</sh-icon>\n </label>\n\n <input placeholder=\"Placeholder with error ...\" [formControl]=\"errorCtrl1\" />\n\n <sh-icon prefix>circle</sh-icon>\n <sh-icon suffix>circle</sh-icon>\n\n @if (errorCtrl1.invalid && errorCtrl1.touched) {\n <span error>Write a message in this alert area</span>\n }\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n\n <input placeholder=\"Placeholder with error ...\" [formControl]=\"errorCtrl\" />\n\n <sh-icon prefix>circle</sh-icon>\n <sh-icon suffix>circle</sh-icon>\n\n @if (errorCtrl.invalid && errorCtrl.touched) {\n <span error>Write a message in this alert area</span>\n }\n\n <span hint>{{ errorCtrl.value?.length ?? 0 }}/10</span>\n</sh-form-field>\n\n<sh-form-field variant=\"autosize\"
|
|
3255
|
+
"html": "<sh-form-field>\n <input placeholder=\"Placeholder no label...\" type=\"text\" />\n <div boxPrefix>\n Hello\n <sh-icon>circle</sh-icon>\n </div>\n\n <div boxSuffix>hello 123</div>\n</sh-form-field>\n\n<sh-form-field>\n <input placeholder=\"Placeholder no label...\" />\n <sh-icon prefix>circle</sh-icon>\n\n <ng-container suffix>hello 123</ng-container>\n</sh-form-field>\n\n<sh-form-field variant=\"autosize\">\n <input type=\"time\" />\n <div boxPrefix>\n <sh-icon>clock</sh-icon>\n </div>\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input placeholder=\"Placeholder...\" />\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input placeholder=\"Placeholder...\" />\n <sh-icon prefix>circle</sh-icon>\n <sh-icon>circle</sh-icon>\n</sh-form-field>\n\n<sh-icon>circle</sh-icon>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input [formControl]=\"disabledCtrl\" placeholder=\"Placeholder...\" />\n <sh-icon prefix>circle</sh-icon>\n <sh-icon>circle</sh-icon>\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n <sh-icon class=\"error\" shTooltip=\"hello world\">acorn-bold</sh-icon>\n </label>\n <input [formControl]=\"baseCtrl\" placeholder=\"Placeholder...\" #input />\n <span hint>Hint</span>\n\n <span hint>{{ baseCtrl.value?.length ?? 0 }}/10</span>\n\n @if ((baseCtrl.value?.length ?? 0) > 10) {\n <span error>Write a message in this alert area</span>\n }\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Error without hint\n <sh-icon>question</sh-icon>\n </label>\n\n <input placeholder=\"Placeholder with error ...\" [formControl]=\"errorCtrl1\" />\n\n <sh-icon prefix>circle</sh-icon>\n <sh-icon suffix>circle</sh-icon>\n\n @if (errorCtrl1.invalid && errorCtrl1.touched) {\n <span error>Write a message in this alert area</span>\n }\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n\n <input placeholder=\"Placeholder with error ...\" [formControl]=\"errorCtrl\" />\n\n <sh-icon prefix>circle</sh-icon>\n <sh-icon suffix>circle</sh-icon>\n\n @if (errorCtrl.invalid && errorCtrl.touched) {\n <span error>Write a message in this alert area</span>\n }\n\n <span hint>{{ errorCtrl.value?.length ?? 0 }}/10</span>\n</sh-form-field>\n\n<sh-form-field variant=\"autosize\" class=\"center\">\n <label>\n Number without suffix auto\n <sh-icon>question</sh-icon>\n </label>\n <input type=\"number\" placeholder=\"0\" />\n <sh-icon prefix>circle</sh-icon>\n <span textPrefix>Hello</span>\n</sh-form-field>\n\n<sh-form-field variant=\"autosize\" class=\"center\">\n <label>\n Number without suffix\n <sh-icon>question</sh-icon>\n </label>\n <input type=\"number\" placeholder=\"0\" />\n</sh-form-field>\n\n<sh-form-field variant=\"auto-width\">\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input type=\"number\" placeholder=\"0\" />\n <sh-icon prefix>circle</sh-icon>\n <span textPrefix>Hello</span>\n <span textSuffix>.00</span>\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input type=\"number\" placeholder=\"0\" />\n <span textPrefix>$ </span>\n <span textSuffix>.00</span>\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input [formControl]=\"disabledCtrl\" type=\"number\" placeholder=\"0\" />\n <span textPrefix>$ </span>\n <span textSuffix>.00</span>\n</sh-form-field>\n\n<sh-form-field>\n <label>Textarea</label>\n <textarea></textarea>\n</sh-form-field>\n\n<sh-form-field>\n <label>Textarea</label>\n <textarea>\nwith some value very long text with some value very long text with some value very long text with some value very long text with some value very long text </textarea\n >\n</sh-form-field>\n\n<sh-form-field>\n <label>Textarea</label>\n <textarea [formControl]=\"disabledCtrl\"></textarea>\n</sh-form-field>\n",
|
|
3413
3256
|
"ts": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { ShipFormField, ShipIcon, ShipTooltip } from 'ship-ui';\n\n@Component({\n selector: 'app-base-form-field',\n imports: [ShipFormField, ShipIcon, ShipTooltip, FormsModule, ReactiveFormsModule],\n templateUrl: './base-form-field.html',\n styleUrl: './base-form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BaseFormField {\n baseCtrl = new FormControl('');\n disabledCtrl = new FormControl({ value: '', disabled: true });\n errorCtrl = new FormControl('', [Validators.required]);\n errorCtrl1 = new FormControl('', [Validators.required, Validators.minLength(10)]);\n\n ngOnInit() {\n this.errorCtrl.markAsTouched();\n this.errorCtrl.markAsDirty();\n }\n}\n"
|
|
3414
3257
|
}
|
|
3415
3258
|
]
|
|
@@ -3430,34 +3273,19 @@
|
|
|
3430
3273
|
"name": "color",
|
|
3431
3274
|
"type": "ShipColor | null",
|
|
3432
3275
|
"description": "",
|
|
3433
|
-
"defaultValue": "null"
|
|
3434
|
-
"options": [
|
|
3435
|
-
"primary",
|
|
3436
|
-
"accent",
|
|
3437
|
-
"warn",
|
|
3438
|
-
"error",
|
|
3439
|
-
"success"
|
|
3440
|
-
]
|
|
3276
|
+
"defaultValue": "null"
|
|
3441
3277
|
},
|
|
3442
3278
|
{
|
|
3443
3279
|
"name": "variant",
|
|
3444
3280
|
"type": "ShipFormFieldVariant | null",
|
|
3445
3281
|
"description": "",
|
|
3446
|
-
"defaultValue": "null"
|
|
3447
|
-
"options": [
|
|
3448
|
-
"base",
|
|
3449
|
-
"horizontal"
|
|
3450
|
-
]
|
|
3282
|
+
"defaultValue": "null"
|
|
3451
3283
|
},
|
|
3452
3284
|
{
|
|
3453
3285
|
"name": "size",
|
|
3454
3286
|
"type": "ShipSize | null",
|
|
3455
3287
|
"description": "",
|
|
3456
|
-
"defaultValue": "null"
|
|
3457
|
-
"options": [
|
|
3458
|
-
"small",
|
|
3459
|
-
"xsmall"
|
|
3460
|
-
]
|
|
3288
|
+
"defaultValue": "null"
|
|
3461
3289
|
},
|
|
3462
3290
|
{
|
|
3463
3291
|
"name": "readonly",
|
|
@@ -3482,7 +3310,7 @@
|
|
|
3482
3310
|
"methods": [
|
|
3483
3311
|
{
|
|
3484
3312
|
"name": "onClick",
|
|
3485
|
-
"parameters": "",
|
|
3313
|
+
"parameters": "event: MouseEvent",
|
|
3486
3314
|
"returnType": "any",
|
|
3487
3315
|
"description": ""
|
|
3488
3316
|
},
|
|
@@ -3502,8 +3330,8 @@
|
|
|
3502
3330
|
},
|
|
3503
3331
|
{
|
|
3504
3332
|
"name": "form-field-sandbox",
|
|
3505
|
-
"html": "<div class=\"controls\">\n <div class=\"row\">\n <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showLabel\"
|
|
3506
|
-
"ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipCheckbox, ShipFormField } from 'ship-ui';\n\n@Component({\n selector: 'app-form-field-sandbox',\n standalone: true,\n imports: [FormsModule, ShipFormField, ShipButtonGroup, ShipCheckbox],\n templateUrl: './form-field-sandbox.html',\n styleUrl: './form-field-sandbox.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FormFieldSandbox {\n label = signal<string>('Label');\n showLabel = signal<boolean>(true);\n prefix = signal<string>('');\n showPrefix = signal<boolean>(false);\n suffix = signal<string>('');\n showSuffix = signal<boolean>(false);\n placeholder = signal<string>('Placeholder...');\n hint = signal<string>('');\n showHint = signal<boolean>(false);\n error = signal<string>('');\n showError = signal<boolean>(false);\n disabled = signal<boolean>(false);\n inputType = signal<'text' | 'number' | 'textarea'>('text');\n
|
|
3333
|
+
"html": "<div class=\"controls\">\n <div class=\"row\">\n <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showLabel\">Label</sh-checkbox>\n <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showPrefix\">Prefix</sh-checkbox>\n <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showSuffix\">Suffix</sh-checkbox>\n <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showHint\">Hint</sh-checkbox>\n <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"showError\">Error</sh-checkbox>\n <sh-checkbox color=\"primary\" variant=\"raised\" [(checked)]=\"disabled\">Disabled</sh-checkbox>\n </div>\n\n <div class=\"row\">\n <sh-button-group class=\"small\" [(value)]=\"inputType\">\n <button type=\"button\" value=\"text\">Text</button>\n <button type=\"button\" value=\"number\">Number</button>\n <button type=\"button\" value=\"textarea\">Textarea</button>\n </sh-button-group>\n\n <sh-button-group class=\"small\" [(value)]=\"variant\">\n <button type=\"button\" value=\"\">Default</button>\n <button type=\"button\" value=\"small\">Small</button>\n <button type=\"button\" value=\"autosize\">Autosize</button>\n <button type=\"button\" value=\"center\">Center</button>\n </sh-button-group>\n </div>\n <div class=\"row\">\n @if (showLabel()) {\n <sh-form-field><input [(ngModel)]=\"label\" placeholder=\"Label text\" /></sh-form-field>\n }\n @if (showPrefix()) {\n <sh-form-field><input [(ngModel)]=\"prefix\" placeholder=\"Prefix content\" /></sh-form-field>\n }\n @if (showSuffix()) {\n <sh-form-field><input [(ngModel)]=\"suffix\" placeholder=\"Suffix content\" /></sh-form-field>\n }\n @if (showHint()) {\n <sh-form-field><input [(ngModel)]=\"hint\" placeholder=\"Hint text\" /></sh-form-field>\n }\n @if (showError()) {\n <sh-form-field><input [(ngModel)]=\"error\" placeholder=\"Error text\" /></sh-form-field>\n }\n <sh-form-field><input [(ngModel)]=\"placeholder\" placeholder=\"Placeholder\" /></sh-form-field>\n </div>\n</div>\n\n<div class=\"sandbox\">\n <sh-form-field [variant]=\"variant()\">\n @if (showLabel()) {\n <label>{{ label() }}</label>\n }\n @if (showPrefix()) {\n <ng-container prefix>{{ prefix() }}</ng-container>\n }\n @if (showSuffix()) {\n <ng-container suffix>{{ suffix() }}</ng-container>\n }\n @if (inputType() === 'text') {\n <input [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\" />\n } @else if (inputType() === 'number') {\n <input type=\"number\" [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\" />\n } @else if (inputType() === 'textarea') {\n <textarea [placeholder]=\"placeholder()\" [(ngModel)]=\"value\" [disabled]=\"disabled()\"></textarea>\n }\n @if (showHint()) {\n <span hint>{{ hint() }}</span>\n }\n @if (showError()) {\n <span error>{{ error() }}</span>\n }\n </sh-form-field>\n</div>\n",
|
|
3334
|
+
"ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipButtonGroup, ShipCheckbox, ShipFormField, ShipFormFieldVariant } from 'ship-ui';\n\n@Component({\n selector: 'app-form-field-sandbox',\n standalone: true,\n imports: [FormsModule, ShipFormField, ShipButtonGroup, ShipCheckbox],\n templateUrl: './form-field-sandbox.html',\n styleUrl: './form-field-sandbox.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FormFieldSandbox {\n label = signal<string>('Label');\n showLabel = signal<boolean>(true);\n prefix = signal<string>('');\n showPrefix = signal<boolean>(false);\n suffix = signal<string>('');\n showSuffix = signal<boolean>(false);\n placeholder = signal<string>('Placeholder...');\n hint = signal<string>('');\n showHint = signal<boolean>(false);\n error = signal<string>('');\n showError = signal<boolean>(false);\n disabled = signal<boolean>(false);\n inputType = signal<'text' | 'number' | 'textarea'>('text');\n variant = signal<ShipFormFieldVariant>(''); // '', 'small', 'autosize', etc.\n value = signal<string>('');\n}\n"
|
|
3507
3335
|
},
|
|
3508
3336
|
{
|
|
3509
3337
|
"name": "small-form-field",
|
|
@@ -3512,7 +3340,7 @@
|
|
|
3512
3340
|
},
|
|
3513
3341
|
{
|
|
3514
3342
|
"name": "base-form-field",
|
|
3515
|
-
"html": "<sh-form-field>\n <input placeholder=\"Placeholder no label...\" type=\"text\" />\n <div boxPrefix>\n Hello\n <sh-icon>circle</sh-icon>\n </div>\n\n <div boxSuffix>hello 123</div>\n</sh-form-field>\n\n<sh-form-field>\n <input placeholder=\"Placeholder no label...\" />\n <sh-icon prefix>circle</sh-icon>\n\n <ng-container suffix>hello 123</ng-container>\n</sh-form-field>\n\n<sh-form-field variant=\"autosize\">\n <input type=\"time\" />\n <div boxPrefix>\n <sh-icon>clock</sh-icon>\n </div>\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input placeholder=\"Placeholder...\" />\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input placeholder=\"Placeholder...\" />\n <sh-icon prefix>circle</sh-icon>\n <sh-icon>circle</sh-icon>\n</sh-form-field>\n\n<sh-icon>circle</sh-icon>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input [formControl]=\"disabledCtrl\" placeholder=\"Placeholder...\" />\n <sh-icon prefix>circle</sh-icon>\n <sh-icon>circle</sh-icon>\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n <sh-icon class=\"error\" shTooltip=\"hello world\">acorn-bold</sh-icon>\n </label>\n <input [formControl]=\"baseCtrl\" placeholder=\"Placeholder...\" #input />\n <span hint>Hint</span>\n\n <span hint>{{ baseCtrl.value?.length ?? 0 }}/10</span>\n\n @if ((baseCtrl.value?.length ?? 0) > 10) {\n <span error>Write a message in this alert area</span>\n }\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Error without hint\n <sh-icon>question</sh-icon>\n </label>\n\n <input placeholder=\"Placeholder with error ...\" [formControl]=\"errorCtrl1\" />\n\n <sh-icon prefix>circle</sh-icon>\n <sh-icon suffix>circle</sh-icon>\n\n @if (errorCtrl1.invalid && errorCtrl1.touched) {\n <span error>Write a message in this alert area</span>\n }\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n\n <input placeholder=\"Placeholder with error ...\" [formControl]=\"errorCtrl\" />\n\n <sh-icon prefix>circle</sh-icon>\n <sh-icon suffix>circle</sh-icon>\n\n @if (errorCtrl.invalid && errorCtrl.touched) {\n <span error>Write a message in this alert area</span>\n }\n\n <span hint>{{ errorCtrl.value?.length ?? 0 }}/10</span>\n</sh-form-field>\n\n<sh-form-field variant=\"autosize\"
|
|
3343
|
+
"html": "<sh-form-field>\n <input placeholder=\"Placeholder no label...\" type=\"text\" />\n <div boxPrefix>\n Hello\n <sh-icon>circle</sh-icon>\n </div>\n\n <div boxSuffix>hello 123</div>\n</sh-form-field>\n\n<sh-form-field>\n <input placeholder=\"Placeholder no label...\" />\n <sh-icon prefix>circle</sh-icon>\n\n <ng-container suffix>hello 123</ng-container>\n</sh-form-field>\n\n<sh-form-field variant=\"autosize\">\n <input type=\"time\" />\n <div boxPrefix>\n <sh-icon>clock</sh-icon>\n </div>\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input placeholder=\"Placeholder...\" />\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input placeholder=\"Placeholder...\" />\n <sh-icon prefix>circle</sh-icon>\n <sh-icon>circle</sh-icon>\n</sh-form-field>\n\n<sh-icon>circle</sh-icon>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input [formControl]=\"disabledCtrl\" placeholder=\"Placeholder...\" />\n <sh-icon prefix>circle</sh-icon>\n <sh-icon>circle</sh-icon>\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n <sh-icon class=\"error\" shTooltip=\"hello world\">acorn-bold</sh-icon>\n </label>\n <input [formControl]=\"baseCtrl\" placeholder=\"Placeholder...\" #input />\n <span hint>Hint</span>\n\n <span hint>{{ baseCtrl.value?.length ?? 0 }}/10</span>\n\n @if ((baseCtrl.value?.length ?? 0) > 10) {\n <span error>Write a message in this alert area</span>\n }\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Error without hint\n <sh-icon>question</sh-icon>\n </label>\n\n <input placeholder=\"Placeholder with error ...\" [formControl]=\"errorCtrl1\" />\n\n <sh-icon prefix>circle</sh-icon>\n <sh-icon suffix>circle</sh-icon>\n\n @if (errorCtrl1.invalid && errorCtrl1.touched) {\n <span error>Write a message in this alert area</span>\n }\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n\n <input placeholder=\"Placeholder with error ...\" [formControl]=\"errorCtrl\" />\n\n <sh-icon prefix>circle</sh-icon>\n <sh-icon suffix>circle</sh-icon>\n\n @if (errorCtrl.invalid && errorCtrl.touched) {\n <span error>Write a message in this alert area</span>\n }\n\n <span hint>{{ errorCtrl.value?.length ?? 0 }}/10</span>\n</sh-form-field>\n\n<sh-form-field variant=\"autosize\" class=\"center\">\n <label>\n Number without suffix auto\n <sh-icon>question</sh-icon>\n </label>\n <input type=\"number\" placeholder=\"0\" />\n <sh-icon prefix>circle</sh-icon>\n <span textPrefix>Hello</span>\n</sh-form-field>\n\n<sh-form-field variant=\"autosize\" class=\"center\">\n <label>\n Number without suffix\n <sh-icon>question</sh-icon>\n </label>\n <input type=\"number\" placeholder=\"0\" />\n</sh-form-field>\n\n<sh-form-field variant=\"auto-width\">\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input type=\"number\" placeholder=\"0\" />\n <sh-icon prefix>circle</sh-icon>\n <span textPrefix>Hello</span>\n <span textSuffix>.00</span>\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input type=\"number\" placeholder=\"0\" />\n <span textPrefix>$ </span>\n <span textSuffix>.00</span>\n</sh-form-field>\n\n<sh-form-field>\n <label>\n Label\n <sh-icon>question</sh-icon>\n </label>\n <input [formControl]=\"disabledCtrl\" type=\"number\" placeholder=\"0\" />\n <span textPrefix>$ </span>\n <span textSuffix>.00</span>\n</sh-form-field>\n\n<sh-form-field>\n <label>Textarea</label>\n <textarea></textarea>\n</sh-form-field>\n\n<sh-form-field>\n <label>Textarea</label>\n <textarea>\nwith some value very long text with some value very long text with some value very long text with some value very long text with some value very long text </textarea\n >\n</sh-form-field>\n\n<sh-form-field>\n <label>Textarea</label>\n <textarea [formControl]=\"disabledCtrl\"></textarea>\n</sh-form-field>\n",
|
|
3516
3344
|
"ts": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { ShipFormField, ShipIcon, ShipTooltip } from 'ship-ui';\n\n@Component({\n selector: 'app-base-form-field',\n imports: [ShipFormField, ShipIcon, ShipTooltip, FormsModule, ReactiveFormsModule],\n templateUrl: './base-form-field.html',\n styleUrl: './base-form-field.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BaseFormField {\n baseCtrl = new FormControl('');\n disabledCtrl = new FormControl({ value: '', disabled: true });\n errorCtrl = new FormControl('', [Validators.required]);\n errorCtrl1 = new FormControl('', [Validators.required, Validators.minLength(10)]);\n\n ngOnInit() {\n this.errorCtrl.markAsTouched();\n this.errorCtrl.markAsDirty();\n }\n}\n"
|
|
3517
3345
|
}
|
|
3518
3346
|
]
|
|
@@ -3585,25 +3413,13 @@
|
|
|
3585
3413
|
"name": "color",
|
|
3586
3414
|
"type": "ShipColor | null",
|
|
3587
3415
|
"description": "",
|
|
3588
|
-
"defaultValue": "null"
|
|
3589
|
-
"options": [
|
|
3590
|
-
"primary",
|
|
3591
|
-
"accent",
|
|
3592
|
-
"warn",
|
|
3593
|
-
"error",
|
|
3594
|
-
"success"
|
|
3595
|
-
]
|
|
3416
|
+
"defaultValue": "null"
|
|
3596
3417
|
},
|
|
3597
3418
|
{
|
|
3598
3419
|
"name": "variant",
|
|
3599
3420
|
"type": "ShipCardVariant | null",
|
|
3600
3421
|
"description": "",
|
|
3601
|
-
"defaultValue": "null"
|
|
3602
|
-
"options": [
|
|
3603
|
-
"type-a",
|
|
3604
|
-
"type-b",
|
|
3605
|
-
"type-c"
|
|
3606
|
-
]
|
|
3422
|
+
"defaultValue": "null"
|
|
3607
3423
|
}
|
|
3608
3424
|
],
|
|
3609
3425
|
"outputs": [],
|
|
@@ -3699,34 +3515,19 @@
|
|
|
3699
3515
|
"name": "color",
|
|
3700
3516
|
"type": "ShipColor | null",
|
|
3701
3517
|
"description": "",
|
|
3702
|
-
"defaultValue": "null"
|
|
3703
|
-
"options": [
|
|
3704
|
-
"primary",
|
|
3705
|
-
"accent",
|
|
3706
|
-
"warn",
|
|
3707
|
-
"error",
|
|
3708
|
-
"success"
|
|
3709
|
-
]
|
|
3518
|
+
"defaultValue": "null"
|
|
3710
3519
|
},
|
|
3711
3520
|
{
|
|
3712
3521
|
"name": "variant",
|
|
3713
3522
|
"type": "ShipFormFieldVariant | null",
|
|
3714
3523
|
"description": "",
|
|
3715
|
-
"defaultValue": "null"
|
|
3716
|
-
"options": [
|
|
3717
|
-
"base",
|
|
3718
|
-
"horizontal"
|
|
3719
|
-
]
|
|
3524
|
+
"defaultValue": "null"
|
|
3720
3525
|
},
|
|
3721
3526
|
{
|
|
3722
3527
|
"name": "size",
|
|
3723
3528
|
"type": "ShipSize | null",
|
|
3724
3529
|
"description": "",
|
|
3725
|
-
"defaultValue": "null"
|
|
3726
|
-
"options": [
|
|
3727
|
-
"small",
|
|
3728
|
-
"xsmall"
|
|
3729
|
-
]
|
|
3530
|
+
"defaultValue": "null"
|
|
3730
3531
|
},
|
|
3731
3532
|
{
|
|
3732
3533
|
"name": "optionTitle",
|
|
@@ -3884,6 +3685,12 @@
|
|
|
3884
3685
|
"returnType": "any",
|
|
3885
3686
|
"description": ""
|
|
3886
3687
|
},
|
|
3688
|
+
{
|
|
3689
|
+
"name": "toggleOptionByIndex",
|
|
3690
|
+
"parameters": "optionIndex: number, event?: MouseEvent, enterKey = false",
|
|
3691
|
+
"returnType": "any",
|
|
3692
|
+
"description": ""
|
|
3693
|
+
},
|
|
3887
3694
|
{
|
|
3888
3695
|
"name": "removeSelectedOptionByIndex",
|
|
3889
3696
|
"parameters": "$event: MouseEvent, optionRemoveIndex: number",
|
|
@@ -3987,7 +3794,7 @@
|
|
|
3987
3794
|
},
|
|
3988
3795
|
{
|
|
3989
3796
|
"name": "multiple-select",
|
|
3990
|
-
"html": "<sh-select color=\"primary\"
|
|
3797
|
+
"html": "<sh-select color=\"primary\" [options]=\"options()\" label=\"label\" value=\"value\" [selectMultiple]=\"true\">\n <label>\n Favorite foods (multiple)\n <sh-icon class=\"primary\" [shTooltip]=\"'hello im a description'\">question</sh-icon>\n </label>\n\n <input type=\"text\" [(ngModel)]=\"selected\" />\n</sh-select>\n<sh-select color=\"primary\" [options]=\"options()\" label=\"label\" value=\"value\" [selectMultiple]=\"true\">\n <label>\n Favorite foods (multiple) another\n <sh-icon class=\"primary\" [shTooltip]=\"'hello im a description'\">question</sh-icon>\n </label>\n\n <input type=\"text\" [(ngModel)]=\"selected\" />\n</sh-select>\n<p>Selected: {{ selected() | json }}</p>\n",
|
|
3991
3798
|
"ts": "import { JsonPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ShipIcon, ShipSelect, ShipTooltip } from 'ship-ui';\n\n@Component({\n selector: 'app-multiple-select',\n standalone: true,\n imports: [FormsModule, ShipSelect, JsonPipe, ShipIcon, ShipTooltip],\n templateUrl: './multiple-select.html',\n styleUrl: './multiple-select.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MultipleSelect {\n options = signal([\n { value: 'pizza', label: 'Pizza' },\n { value: 'burger', label: 'Burger' },\n { value: 'sushi', label: 'Sushi' },\n ]);\n selected = signal<string[]>(['pizza,burger']);\n}\n"
|
|
3992
3799
|
},
|
|
3993
3800
|
{
|
|
@@ -4278,14 +4085,7 @@
|
|
|
4278
4085
|
"name": "color",
|
|
4279
4086
|
"type": "ShipColor | null",
|
|
4280
4087
|
"description": "",
|
|
4281
|
-
"defaultValue": "null"
|
|
4282
|
-
"options": [
|
|
4283
|
-
"primary",
|
|
4284
|
-
"accent",
|
|
4285
|
-
"warn",
|
|
4286
|
-
"error",
|
|
4287
|
-
"success"
|
|
4288
|
-
]
|
|
4088
|
+
"defaultValue": "null"
|
|
4289
4089
|
}
|
|
4290
4090
|
],
|
|
4291
4091
|
"outputs": [],
|
|
@@ -4463,26 +4263,13 @@
|
|
|
4463
4263
|
"name": "color",
|
|
4464
4264
|
"type": "ShipColor | null",
|
|
4465
4265
|
"description": "",
|
|
4466
|
-
"defaultValue": "null"
|
|
4467
|
-
"options": [
|
|
4468
|
-
"primary",
|
|
4469
|
-
"accent",
|
|
4470
|
-
"warn",
|
|
4471
|
-
"error",
|
|
4472
|
-
"success"
|
|
4473
|
-
]
|
|
4266
|
+
"defaultValue": "null"
|
|
4474
4267
|
},
|
|
4475
4268
|
{
|
|
4476
4269
|
"name": "variant",
|
|
4477
4270
|
"type": "ShipSheetVariant | null",
|
|
4478
4271
|
"description": "",
|
|
4479
|
-
"defaultValue": "null"
|
|
4480
|
-
"options": [
|
|
4481
|
-
"simple",
|
|
4482
|
-
"outlined",
|
|
4483
|
-
"flat",
|
|
4484
|
-
"raised"
|
|
4485
|
-
]
|
|
4272
|
+
"defaultValue": "null"
|
|
4486
4273
|
}
|
|
4487
4274
|
],
|
|
4488
4275
|
"outputs": [],
|