diff --git a/api-generator/api-generator.js b/api-generator/api-generator.js index f2916734..37ee776c 100644 --- a/api-generator/api-generator.js +++ b/api-generator/api-generator.js @@ -46,6 +46,7 @@ async function main() { if (project) { let doc = {}; + let typesMap = {}; const parseText = (text) => { return text.replace(/{/g, '{').replace(/}/g, '}'); @@ -350,47 +351,15 @@ async function main() { doc[name]['templates'] = templates; } - if (isProcessable(module_interface_group)) { - const interfaces = { - description: staticMessages['interfaces'], - values: [] - }; - - module_interface_group.children.forEach((int) => { - interfaces.values.push({ - name: int.name, - description: - int.comment && - int.comment.summary.map((s) => s.text || '').join(' '), - props: - int.children && - int.children.map((child) => ({ - name: child.name, - optional: child.flags.isOptional, - readonly: child.flags.isReadonly, - type: child.type - ? child.type.toString() - : extractParameter(int), - description: - child.comment && - child.comment.summary - .map((s) => s.text || '') - .join(' '), - deprecated: getDeprecatedText(child) - })) - }); - }); - - doc[name]['interfaces'] = interfaces; - } - if (isProcessable(module_service_group)) { doc[name] = { + ...doc[name] // description: staticMessages['service'] }; module_service_group.children.forEach((service) => { doc[name] = { + ...doc[name], name: service.name, description: service.comment && service.comment.summary @@ -435,6 +404,55 @@ async function main() { }); } + if (isProcessable(module_interface_group)) { + const interfaces = { + description: staticMessages['interfaces'], + values: [] + }; + + module_interface_group.children.forEach((int) => { + interfaces.values.push({ + name: int.name, + description: + int.comment && + int.comment.summary.map((s) => s.text || '').join(' '), + props: + int.children && + int.children.map((child) => ({ + name: child.name, + optional: child.flags.isOptional, + readonly: child.flags.isReadonly, + type: child.type + ? child.type.toString() + : extractParameter(int), + description: + child.comment && + child.comment.summary + .map((s) => s.text || '') + .join(' '), + deprecated: getDeprecatedText(child) + })) + }); + typesMap[int.name] = int.comment.blockTags?.find( + tag => tag.tag === "@customPath" + )?.content?.map((s) => s.text || '').join(' ') + ?? name.replace("cps-", ""); + }); + + if (doc[name]?.interfaces) { + doc[name]['interfaces'] = { + ...doc[name]['interfaces'], + values: [ + ...doc[name]['interfaces'].values, + ...interfaces.values + ] + }; + } else { + doc[name]['interfaces'] = interfaces; + } + } + + if (isProcessable(module_types_group)) { const types = { description: staticMessages['types'], @@ -449,9 +467,23 @@ async function main() { t.comment.summary && t.comment.summary.map((s) => s.text || '').join(' ') }); + typesMap[t.name] = t.comment.blockTags?.find( + tag => tag.tag === "@customPath" + )?.content?.map((s) => s.text || '').join(' ') + ?? name.replace("cps-", ""); }); - doc[name]['types'] = types; + if (doc[name]?.types) { + doc[name]['types'] = { + ...doc[name]['types'], + values: [ + ...doc[name]['types'].values, + ...types.values + ] + }; + } else { + doc[name]['types'] = types; + } } } } @@ -488,6 +520,12 @@ async function main() { fs.writeFileSync(path.resolve(outputPath, `${key}.json`), typedocJSON); } + if (Object.entries(typesMap).length) { + const typesMapJSON = JSON.stringify(typesMap, null, 4); + !fs.existsSync(outputPath) && fs.mkdirSync(outputPath); + fs.writeFileSync(path.resolve(outputPath, `types_map.json`), typesMapJSON); + } + // const typedocJSON = JSON.stringify(mergedDocs, null, 4); // !fs.existsSync(outputPath) && fs.mkdirSync(outputPath); // fs.writeFileSync(path.resolve(outputPath, 'index.json'), typedocJSON); @@ -557,6 +595,8 @@ const getTypesValue = (typeobj) => { return JSON.stringify(Object.assign({}, ...values), null, 4); } + // TODO: Handle "typeof iconNames[number] properly + return type.toString(); } }; diff --git a/projects/composition/src/app/api-data/cps-autocomplete.json b/projects/composition/src/app/api-data/cps-autocomplete.json index 7f25ee35..212359ca 100644 --- a/projects/composition/src/app/api-data/cps-autocomplete.json +++ b/projects/composition/src/app/api-data/cps-autocomplete.json @@ -345,5 +345,15 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "CpsAutocompleteAppearanceType", + "value": "\"outlined\" | \"underlined\" | \"borderless\"", + "description": "CpsAutocompleteAppearanceType is used to define the border of the autocomplete input." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-button-toggle.json b/projects/composition/src/app/api-data/cps-button-toggle.json index 882ee83a..3fdba500 100644 --- a/projects/composition/src/app/api-data/cps-button-toggle.json +++ b/projects/composition/src/app/api-data/cps-button-toggle.json @@ -127,5 +127,15 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "CpsButtonToggleOption", + "value": "{\n \"value\": \"any\",\n \"label\": \"string\",\n \"icon\": \"string\",\n \"disabled\": \"boolean\",\n \"tooltip\": \"string\"\n}", + "description": "CpsButtonToggleOption is used to define the options of the CpsButtonToggleComponent." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-datepicker.json b/projects/composition/src/app/api-data/cps-datepicker.json index 3acd7655..96a1764e 100644 --- a/projects/composition/src/app/api-data/cps-datepicker.json +++ b/projects/composition/src/app/api-data/cps-datepicker.json @@ -172,5 +172,15 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "CpsDatepickerAppearanceType", + "value": "\"outlined\" | \"underlined\" | \"borderless\"", + "description": "CpsDatepickerAppearanceType is used to define the border of the datepicker input." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-dialog.json b/projects/composition/src/app/api-data/cps-dialog.json index b1fe3bd0..3a58a08e 100644 --- a/projects/composition/src/app/api-data/cps-dialog.json +++ b/projects/composition/src/app/api-data/cps-dialog.json @@ -1,4 +1,5 @@ { + "components": {}, "name": "CpsDialogService", "description": "Service for showing CpsDialog.", "methods": { diff --git a/projects/composition/src/app/api-data/cps-icon.json b/projects/composition/src/app/api-data/cps-icon.json index 025cc3ad..36efb14e 100644 --- a/projects/composition/src/app/api-data/cps-icon.json +++ b/projects/composition/src/app/api-data/cps-icon.json @@ -32,5 +32,20 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "IconType", + "value": "typeof iconNames[number]", + "description": "IconType is used to define the type of the icon." + }, + { + "name": "iconSizeType", + "value": "number | string | \"fill\" | \"xsmall\" | \"small\" | \"normal\" | \"large\"", + "description": "iconSizeType is used to define the size of the icon." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-input.json b/projects/composition/src/app/api-data/cps-input.json index 17b4c4e2..84e3eab6 100644 --- a/projects/composition/src/app/api-data/cps-input.json +++ b/projects/composition/src/app/api-data/cps-input.json @@ -264,5 +264,15 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "CpsInputAppearanceType", + "value": "\"outlined\" | \"underlined\" | \"borderless\"", + "description": "CpsInputAppearanceType is used to define the border of the input field." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-menu.json b/projects/composition/src/app/api-data/cps-menu.json index 1ebb46ac..66985024 100644 --- a/projects/composition/src/app/api-data/cps-menu.json +++ b/projects/composition/src/app/api-data/cps-menu.json @@ -125,5 +125,20 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "CpsMenuItem", + "value": "{\n \"title\": \"string\",\n \"action\": \"Function\",\n \"icon\": \"string\",\n \"desc\": \"string\",\n \"url\": \"string\",\n \"target\": \"string\",\n \"disabled\": \"boolean\",\n \"loading\": \"boolean\"\n}", + "description": "CpsMenuItem is used to define the items of the CpsMenuComponent." + }, + { + "name": "CpsMenuAttachPosition", + "value": "\"tr\" | \"br\" | \"tl\" | \"bl\" | \"default\"", + "description": "CpsMenuAttachPosition is used to define attachment position of the CpsMenuComponent." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-notification.json b/projects/composition/src/app/api-data/cps-notification.json index 0758263c..5c4e6dce 100644 --- a/projects/composition/src/app/api-data/cps-notification.json +++ b/projects/composition/src/app/api-data/cps-notification.json @@ -1,4 +1,5 @@ { + "components": {}, "name": "CpsNotificationService", "description": "Service for showing notifications.", "methods": { @@ -99,5 +100,85 @@ "description": "Clears all notifications." } ] + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "values": [ + { + "name": "CpsNotificationConfig", + "description": "Configuration for the notification service.", + "props": [ + { + "name": "position", + "optional": true, + "readonly": false, + "type": "CpsNotificationPosition", + "description": "Position of the notification, options are \"center\", \"top\", \"bottom\", \"left\", \"right\", \"top-left\", \"top-right\", \"bottom-left\" or \"bottom-right\"." + }, + { + "name": "appearance", + "optional": true, + "readonly": false, + "type": "CpsNotificationAppearance", + "description": "Appearance of the notification, options are \"filled\" or \"outlined\"." + }, + { + "name": "timeout", + "optional": true, + "readonly": false, + "type": "number", + "description": "The duration (in milliseconds) that the notification will be displayed before automatically closing.\nValue 0 means that the notification is persistent and will not be automatically closed." + }, + { + "name": "allowDuplicates", + "optional": true, + "readonly": false, + "type": "boolean", + "description": "Whether to allow duplicates of the same notification to be displayed within a positioned container." + }, + { + "name": "maxAmount", + "optional": true, + "readonly": false, + "type": "number", + "description": "Max amount of notifications that can be simultaneously visualized within a positioned container." + }, + { + "name": "maxWidth", + "optional": true, + "readonly": false, + "type": "string", + "description": "Max width of the notification of type number denoting pixels or string." + } + ] + }, + { + "name": "CpsNotificationData", + "description": "Defines data type for the notification data.", + "props": [ + { + "name": "message", + "optional": true, + "readonly": false, + "type": "string", + "description": "Message to be displayed in the notification." + }, + { + "name": "details", + "optional": true, + "readonly": false, + "type": "string", + "description": "Details to be displayed in the notification." + }, + { + "name": "type", + "optional": true, + "readonly": false, + "type": "CpsNotificationType", + "description": "Type of the notification, options are \"warning\", \"success\", \"error\" or \"info\"." + } + ] + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-radio-group.json b/projects/composition/src/app/api-data/cps-radio-group.json index 76d25f0d..b10da572 100644 --- a/projects/composition/src/app/api-data/cps-radio-group.json +++ b/projects/composition/src/app/api-data/cps-radio-group.json @@ -219,5 +219,15 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "CpsRadioOption", + "value": "{\n \"value\": \"any\",\n \"label\": \"string\",\n \"disabled\": \"boolean\",\n \"tooltip\": \"string\"\n}", + "description": "CpsRadioOption is used to define the options of the CpsRadioGroupComponent." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-select.json b/projects/composition/src/app/api-data/cps-select.json index 8ac0629a..00f57384 100644 --- a/projects/composition/src/app/api-data/cps-select.json +++ b/projects/composition/src/app/api-data/cps-select.json @@ -279,5 +279,15 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "CpsSelectAppearanceType", + "value": "\"outlined\" | \"underlined\" | \"borderless\"", + "description": "CpsSelectAppearanceType is used to define the border of the select input." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-sidebar-menu.json b/projects/composition/src/app/api-data/cps-sidebar-menu.json index 072505fc..9cd9a961 100644 --- a/projects/composition/src/app/api-data/cps-sidebar-menu.json +++ b/projects/composition/src/app/api-data/cps-sidebar-menu.json @@ -40,5 +40,15 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "CpsSidebarMenuItem", + "value": "{\n \"title\": \"string\",\n \"icon\": \"string\",\n \"url\": \"string\",\n \"target\": \"string\",\n \"disabled\": \"boolean\",\n \"items\": \"CpsMenuItem[]\"\n}", + "description": "CpsSidebarMenuItem is used to define the items of the CpsSidebarMenuComponent." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-tab-group.json b/projects/composition/src/app/api-data/cps-tab-group.json index 76be8ef5..c161654d 100644 --- a/projects/composition/src/app/api-data/cps-tab-group.json +++ b/projects/composition/src/app/api-data/cps-tab-group.json @@ -184,5 +184,45 @@ ] } } + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "values": [ + { + "name": "CpsTabChangeEvent", + "description": "CpsTabChangeEvent is used to define the tab change event.", + "props": [ + { + "name": "previousIndex", + "optional": false, + "readonly": false, + "type": "number", + "description": "Index of the previous tab." + }, + { + "name": "newIndex", + "optional": false, + "readonly": false, + "type": "number", + "description": "Index of the new tab." + } + ] + } + ] + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "CpsTabsAnimationType", + "value": "\"slide\" | \"fade\"", + "description": "CpsTabsAnimationType is used to define the transition options of how content appears." + }, + { + "name": "CpsTabsAlignmentType", + "value": "\"left\" | \"center\" | \"right\"", + "description": "CpsTabsAlignmentType is used to define the horizontal alignment of tabs." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-table.json b/projects/composition/src/app/api-data/cps-table.json index 3b42b59d..6f8ed799 100644 --- a/projects/composition/src/app/api-data/cps-table.json +++ b/projects/composition/src/app/api-data/cps-table.json @@ -910,5 +910,40 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "CpsColumnFilterCategoryOption", + "value": "{\n \"value\": \"any\",\n \"label\": \"string\",\n \"icon\": \"string\",\n \"disabled\": \"boolean\",\n \"tooltip\": \"string\"\n}", + "description": "CpsColumnFilterCategoryOption is used to define the options of the CpsColumnFilterCategoryComponent." + }, + { + "name": "CpsColumnFilterType", + "value": "\"text\" | \"number\" | \"date\" | \"boolean\" | \"category\"", + "description": "CpsColumnFilterType is used to define the type of the column filter." + }, + { + "name": "CpsTableExportFormat", + "value": "\"csv\" | \"xlsx\"", + "description": "CpsTableExportFormat is used to define the format of the exported file." + }, + { + "name": "CpsTableSize", + "value": "\"small\" | \"normal\" | \"large\"", + "description": "CpsTableAppearanceType is used to define the border of the table." + }, + { + "name": "CpsTableToolbarSize", + "value": "\"small\" | \"normal\"", + "description": "CpsTableToolbarSize is used to define the size of the toolbar." + }, + { + "name": "CpsTableSortMode", + "value": "\"single\" | \"multiple\"", + "description": "CpsTableSortMode is used to define the sorting mode of the table." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-timepicker.json b/projects/composition/src/app/api-data/cps-timepicker.json index 46870c6e..46d288ef 100644 --- a/projects/composition/src/app/api-data/cps-timepicker.json +++ b/projects/composition/src/app/api-data/cps-timepicker.json @@ -126,5 +126,40 @@ ] } } + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "values": [ + { + "name": "CpsTime", + "description": "CpsTime is used to define the time format.", + "props": [ + { + "name": "hours", + "optional": false, + "readonly": false, + "type": "string" + }, + { + "name": "minutes", + "optional": false, + "readonly": false, + "type": "string" + }, + { + "name": "seconds", + "optional": true, + "readonly": false, + "type": "string" + }, + { + "name": "dayPeriod", + "optional": true, + "readonly": false, + "type": "\"AM\" | \"PM\"" + } + ] + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-tooltip.json b/projects/composition/src/app/api-data/cps-tooltip.json index 92aa47a8..5aad0e0e 100644 --- a/projects/composition/src/app/api-data/cps-tooltip.json +++ b/projects/composition/src/app/api-data/cps-tooltip.json @@ -79,5 +79,20 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "CpsTooltipPosition", + "value": "\"top\" | \"bottom\" | \"left\" | \"right\"", + "description": "CpsTooltipPosition is used to define the position of the tooltip." + }, + { + "name": "CpsTooltipOpenOn", + "value": "\"hover\" | \"click\" | \"focus\"", + "description": "CpsTooltipOpenOn is used to define the event on which the tooltip should open." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-tree-autocomplete.json b/projects/composition/src/app/api-data/cps-tree-autocomplete.json index f8128bc7..b97147db 100644 --- a/projects/composition/src/app/api-data/cps-tree-autocomplete.json +++ b/projects/composition/src/app/api-data/cps-tree-autocomplete.json @@ -262,5 +262,15 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "CpsTreeAutocompleteAppearanceType", + "value": "\"outlined\" | \"underlined\" | \"borderless\"", + "description": "CpsTreeAutocompleteAppearanceType is used to define the border of the tree autocomplete input field." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-tree-select.json b/projects/composition/src/app/api-data/cps-tree-select.json index 7ba5070e..14aa8ace 100644 --- a/projects/composition/src/app/api-data/cps-tree-select.json +++ b/projects/composition/src/app/api-data/cps-tree-select.json @@ -254,5 +254,15 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "CpsTreeSelectAppearanceType", + "value": "\"outlined\" | \"underlined\" | \"borderless\"", + "description": "CpsTreeSelectAppearanceType is used to define the border of the tree select input field." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/cps-tree-table.json b/projects/composition/src/app/api-data/cps-tree-table.json index faf5287b..7bde6384 100644 --- a/projects/composition/src/app/api-data/cps-tree-table.json +++ b/projects/composition/src/app/api-data/cps-tree-table.json @@ -652,5 +652,25 @@ ] } } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": [ + { + "name": "CpsTreeTableSize", + "value": "\"small\" | \"normal\" | \"large\"", + "description": "CpsTreeTableSize is used to define the size of the tree table." + }, + { + "name": "CpsTreeTableToolbarSize", + "value": "\"small\" | \"normal\"", + "description": "CpsTreeTableToolbarSize is used to define the size of the tree table toolbar." + }, + { + "name": "CpsTreeTableSortMode", + "value": "\"single\" | \"multiple\"", + "description": "CpsTreeTableSortMode is used to define the sorting mode of the tree table." + } + ] } } \ No newline at end of file diff --git a/projects/composition/src/app/api-data/types_map.json b/projects/composition/src/app/api-data/types_map.json new file mode 100644 index 00000000..6e714739 --- /dev/null +++ b/projects/composition/src/app/api-data/types_map.json @@ -0,0 +1,32 @@ +{ + "CpsAutocompleteAppearanceType": "autocomplete", + "CpsButtonToggleOption": "button-toggle", + "CpsDatepickerAppearanceType": "datepicker", + "IconType": "icon", + "iconSizeType": "icon", + "CpsInputAppearanceType": "input", + "CpsMenuItem": "menu", + "CpsMenuAttachPosition": "menu", + "CpsRadioOption": "radio-group", + "CpsSelectAppearanceType": "select", + "CpsSidebarMenuItem": "sidebar-menu", + "CpsTabChangeEvent": "tab-group", + "CpsTabsAnimationType": "tab-group", + "CpsTabsAlignmentType": "tab-group", + "CpsColumnFilterCategoryOption": "table", + "CpsColumnFilterType": "table", + "CpsTableExportFormat": "table", + "CpsTableSize": "table", + "CpsTableToolbarSize": "table", + "CpsTableSortMode": "table", + "CpsTime": "timepicker", + "CpsTreeAutocompleteAppearanceType": "tree-autocomplete", + "CpsTreeSelectAppearanceType": "tree-select", + "CpsTreeTableSize": "tree-table", + "CpsTreeTableToolbarSize": "tree-table", + "CpsTreeTableSortMode": "tree-table", + "CpsTooltipPosition": "tooltip", + "CpsTooltipOpenOn": "tooltip", + "CpsNotificationConfig": "notification", + "CpsNotificationData": "notification" +} \ No newline at end of file diff --git a/projects/composition/src/app/app-routing.module.ts b/projects/composition/src/app/app-routing.module.ts index fcfcb7d2..f8124a0f 100644 --- a/projects/composition/src/app/app-routing.module.ts +++ b/projects/composition/src/app/app-routing.module.ts @@ -1,5 +1,27 @@ import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import { RouterModule, Routes, UrlMatcher, UrlSegment } from '@angular/router'; + +const pathMatcher: (path: string) => UrlMatcher = (path: string) => (url) => { + if (url.length === 1) { + if (url[0].path === path) { + return { consumed: url }; + } + } + + if (url.length === 2) { + if ( + url[0].path === path && + (url[1].path === 'api' || url[1].path === 'examples') + ) { + return { + consumed: url, + posParams: { type: new UrlSegment(url[1].path, {}) } + }; + } + } + + return null; +}; const routes: Routes = [ { @@ -11,7 +33,7 @@ const routes: Routes = [ ) }, { - path: 'icon', + matcher: pathMatcher('icon'), title: 'Icon', loadComponent: () => import('./pages/icons-page/icons-page/icons-page.component').then( @@ -19,7 +41,7 @@ const routes: Routes = [ ) }, { - path: 'input', + matcher: pathMatcher('input'), title: 'Input', loadComponent: () => import('./pages/input-page/input-page.component').then( @@ -27,7 +49,7 @@ const routes: Routes = [ ) }, { - path: 'select', + matcher: pathMatcher('select'), title: 'Select', loadComponent: () => import('./pages/select-page/select-page.component').then( @@ -35,7 +57,7 @@ const routes: Routes = [ ) }, { - path: 'sidebar-menu', + matcher: pathMatcher('sidebar-menu'), title: 'Sidebar menu', loadComponent: () => import('./pages/sidebar-menu-page/sidebar-menu-page.component').then( @@ -43,7 +65,7 @@ const routes: Routes = [ ) }, { - path: 'tabs', + matcher: pathMatcher('tab-group'), title: 'Tabs', loadComponent: () => import('./pages/tab-group-page/tab-group-page.component').then( @@ -51,7 +73,7 @@ const routes: Routes = [ ) }, { - path: 'tree-select', + matcher: pathMatcher('tree-select'), title: 'Tree select', loadComponent: () => import('./pages/tree-select-page/tree-select-page.component').then( @@ -59,7 +81,7 @@ const routes: Routes = [ ) }, { - path: 'autocomplete', + matcher: pathMatcher('autocomplete'), title: 'Autocomplete', loadComponent: () => import('./pages/autocomplete-page/autocomplete-page.component').then( @@ -67,7 +89,7 @@ const routes: Routes = [ ) }, { - path: 'tree-autocomplete', + matcher: pathMatcher('tree-autocomplete'), title: 'Tree autocomplete', loadComponent: () => import( @@ -75,7 +97,7 @@ const routes: Routes = [ ).then((mod) => mod.TreeAutocompletePageComponent) }, { - path: 'button', + matcher: pathMatcher('button'), title: 'Button', loadComponent: () => import('./pages/button-page/button-page.component').then( @@ -83,15 +105,15 @@ const routes: Routes = [ ) }, { - path: 'button-toggles', - title: 'Button toggles', + matcher: pathMatcher('button-toggle'), + title: 'Button toggle', loadComponent: () => import('./pages/button-toggle-page/button-toggle-page.component').then( (mod) => mod.ButtonTogglePageComponent ) }, { - path: 'checkbox', + matcher: pathMatcher('checkbox'), title: 'Checkbox', loadComponent: () => import('./pages/checkbox-page/checkbox-page.component').then( @@ -99,7 +121,7 @@ const routes: Routes = [ ) }, { - path: 'radio', + matcher: pathMatcher('radio-group'), title: 'Radio', loadComponent: () => import('./pages/radio-page/radio-page.component').then( @@ -107,7 +129,7 @@ const routes: Routes = [ ) }, { - path: 'table', + matcher: pathMatcher('table'), title: 'Table', loadComponent: () => import('./pages/table-page/table-page.component').then( @@ -115,7 +137,7 @@ const routes: Routes = [ ) }, { - path: 'tree-table', + matcher: pathMatcher('tree-table'), title: 'Tree table', loadComponent: () => import('./pages/tree-table-page/tree-table-page.component').then( @@ -123,7 +145,7 @@ const routes: Routes = [ ) }, { - path: 'tag', + matcher: pathMatcher('tag'), title: 'Tag', loadComponent: () => import('./pages/tag-page/tag-page.component').then( @@ -131,7 +153,7 @@ const routes: Routes = [ ) }, { - path: 'chip', + matcher: pathMatcher('chip'), title: 'Chip', loadComponent: () => import('./pages/chip-page/chip-page.component').then( @@ -139,7 +161,7 @@ const routes: Routes = [ ) }, { - path: 'loader', + matcher: pathMatcher('loader'), title: 'Loader', loadComponent: () => import('./pages/loader-page/loader-page.component').then( @@ -147,7 +169,7 @@ const routes: Routes = [ ) }, { - path: 'expansion-panel', + matcher: pathMatcher('expansion-panel'), title: 'Expansion panel', loadComponent: () => import( @@ -155,7 +177,7 @@ const routes: Routes = [ ).then((mod) => mod.ExpansionPanelPageComponent) }, { - path: 'file-upload', + matcher: pathMatcher('file-upload'), title: 'File upload', loadComponent: () => import('./pages/file-upload-page/file-upload-page.component').then( @@ -163,7 +185,7 @@ const routes: Routes = [ ) }, { - path: 'progress-circular', + matcher: pathMatcher('progress-circular'), title: 'Progress circular', loadComponent: () => import( @@ -171,7 +193,7 @@ const routes: Routes = [ ).then((mod) => mod.ProgressCircularPageComponent) }, { - path: 'progress-linear', + matcher: pathMatcher('progress-linear'), title: 'Progress linear', loadComponent: () => import( @@ -179,7 +201,7 @@ const routes: Routes = [ ).then((mod) => mod.ProgressLinearPageComponent) }, { - path: 'info-circle', + matcher: pathMatcher('info-circle'), title: 'Info circle', loadComponent: () => import('./pages/info-circle-page/info-circle-page.component').then( @@ -187,7 +209,7 @@ const routes: Routes = [ ) }, { - path: 'datepicker', + matcher: pathMatcher('datepicker'), title: 'Datepicker', loadComponent: () => import('./pages/datepicker-page/datepicker-page.component').then( @@ -195,7 +217,7 @@ const routes: Routes = [ ) }, { - path: 'dialog', + matcher: pathMatcher('dialog'), title: 'Dialog', loadComponent: () => import('./pages/dialog-page/dialog-page.component').then( @@ -203,7 +225,7 @@ const routes: Routes = [ ) }, { - path: 'menu', + matcher: pathMatcher('menu'), title: 'Menu', loadComponent: () => import('./pages/menu-page/menu-page.component').then( @@ -211,7 +233,7 @@ const routes: Routes = [ ) }, { - path: 'notifications', + matcher: pathMatcher('notifications'), title: 'Notifications', loadComponent: () => import('./pages/notification-page/notification-page.component').then( @@ -219,7 +241,7 @@ const routes: Routes = [ ) }, { - path: 'paginator', + matcher: pathMatcher('paginator'), title: 'Paginator', loadComponent: () => import('./pages/paginator-page/paginator-page.component').then( @@ -227,7 +249,7 @@ const routes: Routes = [ ) }, { - path: 'textarea', + matcher: pathMatcher('textarea'), title: 'Textarea', loadComponent: () => import('./pages/textarea-page/textarea-page.component').then( @@ -235,7 +257,7 @@ const routes: Routes = [ ) }, { - path: 'timepicker', + matcher: pathMatcher('timepicker'), title: 'Timepicker', loadComponent: () => import('./pages/timepicker-page/timepicker-page.component').then( @@ -243,7 +265,7 @@ const routes: Routes = [ ) }, { - path: 'tooltip', + matcher: pathMatcher('tooltip'), title: 'Tooltip directive', loadComponent: () => import('./pages/tooltip-page/tooltip-page.component').then( @@ -251,7 +273,7 @@ const routes: Routes = [ ) }, { - path: 'scheduler', + matcher: pathMatcher('scheduler'), title: 'Scheduler', loadComponent: () => import('./pages/scheduler-page/scheduler-page.component').then( diff --git a/projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.html b/projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.html index 3f56a265..0f41313a 100644 --- a/projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.html +++ b/projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.html @@ -1,71 +1,184 @@ - +
- -
-

{{ data[0] }}

-

{{ data[1].description }}

-
-

Properties

-

{{ data[1].props.description }}

+ + +
+

{{ data[0] }}

+

{{ data[1].description }}

+
- - - - - - - - - - - - - - - -
NameTypeDefault valueDescription
- {{ prop.name }} - {{ prop.type }} - {{ - (prop.default === '' ? "''" : prop.default) ?? 'undefined' - }} - {{ prop.description }}
-
-
-

Events

-

{{ data[1].emits.description }}

+

Properties

+

{{ data[1].props.description }}

- + + - + - + +
NameParametersTypeDefault value Description
- {{ event.name }} + {{ prop.name }} - {{ event.parameters[0].type }} + {{ prop.type }} + + {{ prop.type }} + {{ event.description }} + {{ + (prop.default === '' ? "''" : prop.default) ?? + 'undefined' + }} + {{ prop.description }}
+ +
+

Events

+

{{ data[1].emits.description }}

+
+ + + + + + + + + + + + + +
NameParametersDescription
+ {{ event.name }} + + {{ event.parameters[0].type }} + + {{ event.parameters[0].type }} + + {{ event.description }}
+
+
+ +
+

Types

+

{{ componentData.types.description }}

+
+ + + + + + + + + + + + + +
NameValuesDescription
+ {{ type.name }} + + {{ type.value }} + {{ type.description }}
+
+
+ + +
+

Interfaces

+

{{ componentData.interfaces.description }}

+ @for ( + interface of componentData.interfaces.values; + track interface.name + ) { +
+

{{ interface.name }}

+

{{ interface.description }}

+ + + + + + + + + + + + + +
NameTypeDescription
+ {{ prop.name }} + + {{ prop.type }} + + {{ prop.type }} + + {{ prop.description }}
+
+ }
diff --git a/projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.scss b/projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.scss index 1687cfd6..670f1258 100644 --- a/projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.scss +++ b/projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.scss @@ -10,6 +10,10 @@ border-bottom: 1px solid var(--cps-color-line-light); } + tr { + transition: background-color 0.5s ease-in; + } + td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--cps-color-line-light); @@ -32,6 +36,14 @@ &.highlighted-text { color: var(--cps-color-calm); + + a { + color: var(--cps-color-calm); + + &:hover { + text-decoration: none; + } + } } &.value-style { @@ -52,4 +64,8 @@ } } } + + .interface { + transition: background-color 0.5s ease-in; + } } diff --git a/projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.ts b/projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.ts index 62c44db4..45c8b612 100644 --- a/projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.ts +++ b/projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.ts @@ -1,22 +1,45 @@ import { CommonModule } from '@angular/common'; -import { Component, Input, OnInit } from '@angular/core'; -import { ComponentAPI } from '../../models/component-api.model'; +import { Component, Input } from '@angular/core'; +import { + ComponentAPI, + InterfaceAPI, + TypesAPI +} from '../../models/component-api.model'; import { CpsTabComponent, CpsTabGroupComponent } from 'cps-ui-kit'; +import { ObjectEntriesPipe } from '../../pipes/object-entries.pipe'; + +import TypesMap from '../../api-data/types_map.json'; +import { RouterModule } from '@angular/router'; +import { ViewerComponent } from '../viewer/viewer.component'; +import { DetectTypePipe } from '../../pipes/detect-type.pipe'; @Component({ selector: 'app-component-docs-viewer', templateUrl: './component-docs-viewer.component.html', styleUrl: './component-docs-viewer.component.scss', - imports: [CommonModule, CpsTabComponent, CpsTabGroupComponent], + imports: [ + CommonModule, + CpsTabComponent, + CpsTabGroupComponent, + ObjectEntriesPipe, + RouterModule, + DetectTypePipe + ], standalone: true }) -export class ComponentDocsViewerComponent implements OnInit { - @Input() componentData?: { components: { [key: string]: ComponentAPI } }; - objectEntries = Object.entries; +export class ComponentDocsViewerComponent extends ViewerComponent { + @Input() componentData?: { + components: { [key: string]: ComponentAPI }; + types?: TypesAPI; + interfaces?: InterfaceAPI; + }; + + TypesMap: Record = TypesMap; - ngOnInit(): void { + override ngOnInit(): void { if (!this.componentData) { throw new Error('Input property componentData is required'); } + super.ngOnInit(); } } diff --git a/projects/composition/src/app/components/navigation-sidebar/navigation-sidebar.component.ts b/projects/composition/src/app/components/navigation-sidebar/navigation-sidebar.component.ts index 9e81c3f4..767f87df 100644 --- a/projects/composition/src/app/components/navigation-sidebar/navigation-sidebar.component.ts +++ b/projects/composition/src/app/components/navigation-sidebar/navigation-sidebar.component.ts @@ -32,8 +32,8 @@ export class NavigationSidebarComponent implements OnInit { url: '/button' }, { - title: 'Button toggles', - url: '/button-toggles' + title: 'Button toggle', + url: '/button-toggle' }, { title: 'Checkbox', @@ -97,7 +97,7 @@ export class NavigationSidebarComponent implements OnInit { }, { title: 'Radio', - url: '/radio' + url: '/radio-group' }, { title: 'Scheduler', @@ -117,7 +117,7 @@ export class NavigationSidebarComponent implements OnInit { }, { title: 'Tabs', - url: '/tabs' + url: '/tab-group' }, { title: 'Tag', diff --git a/projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.html b/projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.html index 5f8c0ae3..7ef2e84e 100644 --- a/projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.html +++ b/projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.html @@ -1,4 +1,8 @@ - +
@@ -9,6 +13,7 @@

{{ serviceData.name }}

{{ serviceData.description }}

+
{{ parseParameters(method.parameters) || 'null' }} - {{ method.returnType }} + + {{ method.returnType }} + + {{ method.returnType }} + + {{ method.description }}
+ +
+

Types

+

{{ serviceData.types.description }}

+
+ + + + + + + + + + + + + +
NameValuesDescription
+ {{ type.name }} + + {{ type.value }} + {{ type.description }}
+
+
+
+ +
+

Interfaces

+

{{ serviceData.interfaces.description }}

+ @for ( + interface of serviceData.interfaces.values; + track interface.name + ) { +
+

{{ interface.name }}

+

{{ interface.description }}

+ + + + + + + + + + + + + +
NameTypeDescription
+ {{ prop.name }} + + {{ prop.type }} + + {{ prop.type }} + + {{ prop.description }}
+
+ }
diff --git a/projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.scss b/projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.scss index 5c6c8ea5..320ebaa4 100644 --- a/projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.scss +++ b/projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.scss @@ -10,6 +10,10 @@ border-bottom: 1px solid var(--cps-color-line-light); } + tr { + transition: background-color 0.5s ease-in; + } + td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--cps-color-line-light); @@ -32,17 +36,35 @@ &.highlighted-text { color: var(--cps-color-calm); + + a { + color: var(--cps-color-calm); + + &:hover { + text-decoration: none; + } + } } &.value-style { span { padding: 0.25rem; border-radius: 6px; - font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, - Liberation Mono, monospace; + font-family: + ui-monospace, + SFMono-Regular, + SF Mono, + Menlo, + Consolas, + Liberation Mono, + monospace; background-color: var(--cps-color-bg-mid); border: 1px solid var(--cps-color-line-light); } } } } + +.interface { + transition: background-color 0.5s ease-in; +} diff --git a/projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.ts b/projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.ts index 8071afb7..ba29dbd0 100644 --- a/projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.ts +++ b/projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.ts @@ -1,23 +1,34 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input } from '@angular/core'; import { ServiceAPI } from '../../models/service-api.model'; import { CommonModule } from '@angular/common'; import { CpsTabComponent, CpsTabGroupComponent } from 'cps-ui-kit'; +import { ViewerComponent } from '../viewer/viewer.component'; +import TypesMap from '../../api-data/types_map.json'; +import { RouterLink } from '@angular/router'; +import { DetectTypePipe } from '../../pipes/detect-type.pipe'; @Component({ selector: 'app-service-docs-viewer', templateUrl: './service-docs-viewer.component.html', styleUrl: './service-docs-viewer.component.scss', standalone: true, - imports: [CommonModule, CpsTabComponent, CpsTabGroupComponent] + imports: [ + CommonModule, + CpsTabComponent, + CpsTabGroupComponent, + RouterLink, + DetectTypePipe + ] }) -export class ServiceDocsViewerComponent implements OnInit { +export class ServiceDocsViewerComponent extends ViewerComponent { @Input() serviceData?: ServiceAPI; - objectEntries = Object.entries; + TypesMap: Record = TypesMap; - ngOnInit(): void { + override ngOnInit(): void { if (!this.serviceData) { throw new Error('Input property serviceData is required'); } + super.ngOnInit(); } parseParameters( diff --git a/projects/composition/src/app/components/viewer/viewer.component.ts b/projects/composition/src/app/components/viewer/viewer.component.ts new file mode 100644 index 00000000..2eecf7b4 --- /dev/null +++ b/projects/composition/src/app/components/viewer/viewer.component.ts @@ -0,0 +1,55 @@ +import { AfterViewInit, Component, OnInit, inject } from '@angular/core'; +import { ActivatedRoute, Router, Scroll } from '@angular/router'; +import { CpsTabChangeEvent } from 'cps-ui-kit'; + +@Component({ + template: '' +}) +export abstract class ViewerComponent implements OnInit, AfterViewInit { + private _route = inject(ActivatedRoute); + private _router = inject(Router); + protected selectedTabIndex = 0; + + ngOnInit(): void { + if (!this._route.snapshot.params.type) { + this._router.navigate(['./examples'], { relativeTo: this._route }); + } + + if (this._route.snapshot.params.type === 'examples') { + this.selectedTabIndex = 0; + } else if (this._route.snapshot.params.type === 'api') { + this.selectedTabIndex = 1; + } + } + + changeTab(change: CpsTabChangeEvent): void { + if (change.newIndex === 0) { + this._router.navigate(['../examples'], { relativeTo: this._route }); + } else if (change.newIndex === 1) { + this._router.navigate(['../api'], { relativeTo: this._route }); + } + } + + ngAfterViewInit(): void { + this._router.events.subscribe((event: any) => { + if (event instanceof Scroll && event.anchor) { + setTimeout(() => { + this._scroll('#' + event.anchor); + }); + } + }); + } + + private _scroll(query: string) { + const targetElement = document.querySelector(query); + if (!targetElement) { + window.scrollTo(0, 0); + } else { + targetElement.scrollIntoView(); + targetElement.classList.add('anchor-highlight'); + setTimeout(() => { + targetElement.classList.remove('anchor-highlight'); + }, 500); + } + } +} diff --git a/projects/composition/src/app/models/component-api.model.ts b/projects/composition/src/app/models/component-api.model.ts index b5cda40b..807f4574 100644 --- a/projects/composition/src/app/models/component-api.model.ts +++ b/projects/composition/src/app/models/component-api.model.ts @@ -28,3 +28,22 @@ export interface ComponentAPI { values: PropAPI[]; }; } + +export interface TypesAPI { + description: string; + values: { + name: string; + description: string; + value?: string; + }[]; +} + +export interface InterfaceAPI { + description: string; + values: { + name: string; + description: string; + value?: string; + props?: PropAPI[]; + }[]; +} diff --git a/projects/composition/src/app/models/service-api.model.ts b/projects/composition/src/app/models/service-api.model.ts index b0445ca7..c8070e53 100644 --- a/projects/composition/src/app/models/service-api.model.ts +++ b/projects/composition/src/app/models/service-api.model.ts @@ -1,3 +1,5 @@ +import { InterfaceAPI, TypesAPI } from './component-api.model'; + export interface MethodAPI { name: string; description: string; @@ -16,4 +18,6 @@ export interface ServiceAPI { description: string; values: MethodAPI[]; }; + types?: TypesAPI; + interfaces?: InterfaceAPI; } diff --git a/projects/composition/src/app/pages/colors-page/colors-page/colors-page.component.ts b/projects/composition/src/app/pages/colors-page/colors-page/colors-page.component.ts index caa7af05..84b4a17c 100644 --- a/projects/composition/src/app/pages/colors-page/colors-page/colors-page.component.ts +++ b/projects/composition/src/app/pages/colors-page/colors-page/colors-page.component.ts @@ -1,6 +1,12 @@ import { CommonModule } from '@angular/common'; import { Component, OnInit } from '@angular/core'; -import { CpsInputComponent, getCpsColors, getTextColor } from 'cps-ui-kit'; +import { + CpsInputComponent, + CpsNotificationPosition, + CpsNotificationService, + getCpsColors, + getTextColor +} from 'cps-ui-kit'; type colorGroupsType = { name: string; @@ -44,6 +50,9 @@ export class ColorsPageComponent implements OnInit { colorNameColor: { [key: string]: string } = {}; + // eslint-disable-next-line no-useless-constructor + constructor(private _notificationService: CpsNotificationService) {} + ngOnInit(): void { const customColors = getCpsColors(); customColors.forEach((clr) => { @@ -174,10 +183,21 @@ export class ColorsPageComponent implements OnInit { onCopyColor(color: string) { navigator.clipboard.writeText(color).then( () => { - console.log('Color copied to clipboard'); + this._notificationService.success( + `Color ${color} copied to clipboard`, + undefined, + { position: CpsNotificationPosition.BOTTOM, timeout: 1000 } + ); }, () => { - console.error('Failed to copy color to clickboard'); + this._notificationService.error( + 'Failed to copy color to clickboard', + undefined, + { + position: CpsNotificationPosition.BOTTOM, + timeout: 1000 + } + ); } ); } diff --git a/projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.ts b/projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.ts index 837f12fe..d1ac8e59 100644 --- a/projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.ts +++ b/projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.ts @@ -1,7 +1,13 @@ import { CommonModule } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { CpsIconComponent, CpsInputComponent, iconNames } from 'cps-ui-kit'; +import { + CpsIconComponent, + CpsInputComponent, + CpsNotificationPosition, + CpsNotificationService, + iconNames +} from 'cps-ui-kit'; import ComponentData from '../../../api-data/cps-icon.json'; import { ComponentDocsViewerComponent } from '../../../components/component-docs-viewer/component-docs-viewer.component'; @@ -24,6 +30,9 @@ export class IconsPageComponent implements OnInit { filteredIconsList: string[] = []; componentData = ComponentData; + // eslint-disable-next-line no-useless-constructor + constructor(private _notificationService: CpsNotificationService) {} + ngOnInit() { this.filteredIconsList = iconNames; } @@ -42,10 +51,17 @@ export class IconsPageComponent implements OnInit { onCopyIconName(name: string) { navigator.clipboard.writeText(name).then( () => { - console.log('Icon name copied to clipboard'); + this._notificationService.success( + `Icon ${name} copied to clipboard`, + undefined, + { position: CpsNotificationPosition.BOTTOM, timeout: 1000 } + ); }, () => { - console.error('Failed to copy icon name to clickboard'); + this._notificationService.error('Failed to copy icon name', undefined, { + position: CpsNotificationPosition.BOTTOM, + timeout: 1000 + }); } ); } diff --git a/projects/composition/src/app/pipes/detect-type.pipe.ts b/projects/composition/src/app/pipes/detect-type.pipe.ts new file mode 100644 index 00000000..eac4a491 --- /dev/null +++ b/projects/composition/src/app/pipes/detect-type.pipe.ts @@ -0,0 +1,20 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'detectType', + pure: true, + standalone: true +}) +export class DetectTypePipe implements PipeTransform { + public transform( + value: string, + types: Record + ): undefined | string { + if (value.endsWith('[]')) { + const baseType = value.slice(0, -2); + return baseType in types ? baseType : undefined; + } else { + return value in types ? value : undefined; + } + } +} diff --git a/projects/composition/src/app/pipes/object-entries.pipe.ts b/projects/composition/src/app/pipes/object-entries.pipe.ts new file mode 100644 index 00000000..1cbb303e --- /dev/null +++ b/projects/composition/src/app/pipes/object-entries.pipe.ts @@ -0,0 +1,12 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'objectEntries', + pure: true, + standalone: true +}) +export class ObjectEntriesPipe implements PipeTransform { + transform(value: any): any { + return Object.entries(value); + } +} diff --git a/projects/composition/src/styles.scss b/projects/composition/src/styles.scss index 44265191..a79ff839 100644 --- a/projects/composition/src/styles.scss +++ b/projects/composition/src/styles.scss @@ -27,3 +27,7 @@ body { .example-content { padding-top: 24px; } + +.anchor-highlight { + background-color: var(--cps-color-energy-lighten5); +} diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts index 38caac01..feb909dd 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts @@ -33,6 +33,10 @@ import { import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive'; import { CpsMenuComponent } from '../cps-menu/cps-menu.component'; +/** + * CpsAutocompleteAppearanceType is used to define the border of the autocomplete input. + * @group Types + */ export type CpsAutocompleteAppearanceType = | 'outlined' | 'underlined' diff --git a/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts b/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts index ccf20cc0..83bd52f8 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts @@ -19,6 +19,10 @@ import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive'; +/** + * CpsButtonToggleOption is used to define the options of the CpsButtonToggleComponent. + * @group Types + */ export type CpsButtonToggleOption = { value: any; label?: string; diff --git a/projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.ts b/projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.ts index 429ce5bf..754677b4 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.ts @@ -18,6 +18,10 @@ import { convertSize } from '../../utils/internal/size-utils'; import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive'; import { CpsMenuComponent } from '../cps-menu/cps-menu.component'; +/** + * CpsDatepickerAppearanceType is used to define the border of the datepicker input. + * @group Types + */ export type CpsDatepickerAppearanceType = | 'outlined' | 'underlined' diff --git a/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts b/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts index 94a95d9e..b51707c8 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts @@ -122,8 +122,16 @@ export const iconNames = [ 'xls' ]; -export type IconType = (typeof iconNames)[number]; +/** + * IconType is used to define the type of the icon. + * @group Types + */ +export type IconType = (typeof iconNames)[number]; // Todo: Fix api generator to handle this type properly +/** + * iconSizeType is used to define the size of the icon. + * @group Types + */ export type iconSizeType = | number | string diff --git a/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.ts b/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.ts index f34a2452..aba5ab33 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.ts @@ -25,6 +25,10 @@ import { CpsProgressLinearComponent } from '../cps-progress-linear/cps-progress- import { CpsInfoCircleComponent } from '../cps-info-circle/cps-info-circle.component'; import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive'; +/** + * CpsInputAppearanceType is used to define the border of the input field. + * @group Types + */ export type CpsInputAppearanceType = 'outlined' | 'underlined' | 'borderless'; /** diff --git a/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.ts b/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.ts index 51c81ba9..72096a3a 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.ts @@ -37,6 +37,10 @@ import { CpsProgressCircularComponent } from '../cps-progress-circular/cps-progr type Nullable = T | null | undefined; type VoidListener = () => void | null | undefined; +/** + * CpsMenuItem is used to define the items of the CpsMenuComponent. + * @group Types + */ export type CpsMenuItem = { title?: string; action?: (event?: any) => void; @@ -48,6 +52,10 @@ export type CpsMenuItem = { loading?: boolean; }; +/** + * CpsMenuAttachPosition is used to define attachment position of the CpsMenuComponent. + * @group Types + */ export type CpsMenuAttachPosition = 'tr' | 'br' | 'tl' | 'bl' | 'default'; /** diff --git a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.ts b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.ts index de59abe2..635bd378 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.ts @@ -20,6 +20,10 @@ import { import { CpsRadioButtonComponent } from './cps-radio-button/cps-radio-button.component'; import { Subscription } from 'rxjs'; +/** + * CpsRadioOption is used to define the options of the CpsRadioGroupComponent. + * @group Types + */ export type CpsRadioOption = { value: any; label?: string; diff --git a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts index 173dc27b..b4c4bddd 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.ts @@ -34,6 +34,10 @@ import { import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive'; import { CpsMenuComponent } from '../cps-menu/cps-menu.component'; +/** + * CpsSelectAppearanceType is used to define the border of the select input. + * @group Types + */ export type CpsSelectAppearanceType = 'outlined' | 'underlined' | 'borderless'; /** diff --git a/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.ts b/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.ts index f75f4ded..dea24ff8 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.ts @@ -18,6 +18,10 @@ import { trigger } from '@angular/animations'; +/** + * CpsSidebarMenuItem is used to define the items of the CpsSidebarMenuComponent. + * @group Types + */ export type CpsSidebarMenuItem = { title: string; icon: string; diff --git a/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.ts index 833cbcca..17cfb352 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.ts @@ -34,12 +34,31 @@ import { fromEvent } from 'rxjs'; +/** + * CpsTabChangeEvent is used to define the tab change event. + * @group Interface + */ export interface CpsTabChangeEvent { + /** + * Index of the previous tab. + */ previousIndex: number; + /** + * Index of the new tab. + */ newIndex: number; } +/** + * CpsTabsAnimationType is used to define the transition options of how content appears. + * @group Types + */ export type CpsTabsAnimationType = 'slide' | 'fade'; + +/** + * CpsTabsAlignmentType is used to define the horizontal alignment of tabs. + * @group Types + */ export type CpsTabsAlignmentType = 'left' | 'center' | 'right'; /** diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/cps-column-filter-types.ts b/projects/cps-ui-kit/src/lib/components/cps-table/cps-column-filter-types.ts index 3d0ec518..6853ea39 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-table/cps-column-filter-types.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-table/cps-column-filter-types.ts @@ -22,6 +22,10 @@ export enum CpsColumnFilterMatchMode { DATE_AFTER = 'dateAfter' } +/** + * CpsColumnFilterCategoryOption is used to define the options of the CpsColumnFilterCategoryComponent. + * @group Types + */ export type CpsColumnFilterCategoryOption = { value: any; label?: string; @@ -30,6 +34,10 @@ export type CpsColumnFilterCategoryOption = { tooltip?: string; }; +/** + * CpsColumnFilterType is used to define the type of the column filter. + * @group Types + */ export type CpsColumnFilterType = | 'text' | 'number' diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts index 7e588007..290f159c 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts @@ -36,9 +36,28 @@ export function tableFactory(tableComponent: CpsTableComponent) { return tableComponent.primengTable; } +/** + * CpsTableExportFormat is used to define the format of the exported file. + * @group Types + */ export type CpsTableExportFormat = 'csv' | 'xlsx'; // | 'pdf'; + +/** + * CpsTableAppearanceType is used to define the border of the table. + * @group Types + */ export type CpsTableSize = 'small' | 'normal' | 'large'; + +/** + * CpsTableToolbarSize is used to define the size of the toolbar. + * @group Types + */ export type CpsTableToolbarSize = 'small' | 'normal'; + +/** + * CpsTableSortMode is used to define the sorting mode of the table. + * @group Types + */ export type CpsTableSortMode = 'single' | 'multiple'; /** diff --git a/projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.ts b/projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.ts index 70492723..978b2e00 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-timepicker/cps-timepicker.component.ts @@ -21,6 +21,10 @@ import { CpsAutocompleteComponent } from '../cps-autocomplete/cps-autocomplete.c import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive'; import { CpsInfoCircleComponent } from '../cps-info-circle/cps-info-circle.component'; +/** + * CpsTime is used to define the time format. + * @group Interface + */ export interface CpsTime { hours: string; minutes: string; diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts index 88f93696..a41cc632 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts @@ -19,6 +19,10 @@ import { TreeNode } from 'primeng/api'; import { CpsMenuComponent } from '../cps-menu/cps-menu.component'; import { CpsBaseTreeDropdownComponent } from '../internal/cps-base-tree-dropdown/cps-base-tree-dropdown.component'; +/** + * CpsTreeAutocompleteAppearanceType is used to define the border of the tree autocomplete input field. + * @group Types + */ export type CpsTreeAutocompleteAppearanceType = | 'outlined' | 'underlined' diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.ts index b3116c25..81d3b0b5 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.ts @@ -18,6 +18,10 @@ import { TreeModule } from 'primeng/tree'; import { CpsMenuComponent } from '../cps-menu/cps-menu.component'; import { CpsBaseTreeDropdownComponent } from '../internal/cps-base-tree-dropdown/cps-base-tree-dropdown.component'; +/** + * CpsTreeSelectAppearanceType is used to define the border of the tree select input field. + * @group Types + */ export type CpsTreeSelectAppearanceType = | 'outlined' | 'underlined' diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts index 9aaf62a4..67025679 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts @@ -51,8 +51,22 @@ export function treeTableFactory(tableComponent: CpsTreeTableComponent) { return tableComponent.primengTreeTable; } +/** + * CpsTreeTableSize is used to define the size of the tree table. + * @group Types + */ export type CpsTreeTableSize = 'small' | 'normal' | 'large'; + +/** + * CpsTreeTableToolbarSize is used to define the size of the tree table toolbar. + * @group Types + */ export type CpsTreeTableToolbarSize = 'small' | 'normal'; + +/** + * CpsTreeTableSortMode is used to define the sorting mode of the tree table. + * @group Types + */ export type CpsTreeTableSortMode = 'single' | 'multiple'; /** diff --git a/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts b/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts index c4341765..57381fa9 100644 --- a/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts +++ b/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts @@ -7,7 +7,16 @@ import { } from '@angular/core'; import { convertSize } from '../../utils/internal/size-utils'; +/** + * CpsTooltipPosition is used to define the position of the tooltip. + * @group Types + */ export type CpsTooltipPosition = 'top' | 'bottom' | 'left' | 'right'; + +/** + * CpsTooltipOpenOn is used to define the event on which the tooltip should open. + * @group Types + */ export type CpsTooltipOpenOn = 'hover' | 'click' | 'focus'; /** diff --git a/projects/cps-ui-kit/src/lib/services/cps-notification/utils/cps-notification-config.ts b/projects/cps-ui-kit/src/lib/services/cps-notification/utils/cps-notification-config.ts index 1df134be..4866401f 100644 --- a/projects/cps-ui-kit/src/lib/services/cps-notification/utils/cps-notification-config.ts +++ b/projects/cps-ui-kit/src/lib/services/cps-notification/utils/cps-notification-config.ts @@ -23,6 +23,10 @@ export enum CpsNotificationPosition { BOTTOMRIGHT = 'bottom-right' } +/** + * Configuration for the notification service. + * @group Interface + */ export interface CpsNotificationConfig { /** * Position of the notification, options are "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" or "bottom-right". diff --git a/projects/cps-ui-kit/src/lib/services/cps-notification/utils/internal/cps-notification-data.ts b/projects/cps-ui-kit/src/lib/services/cps-notification/utils/internal/cps-notification-data.ts index cf40e601..180a58ef 100644 --- a/projects/cps-ui-kit/src/lib/services/cps-notification/utils/internal/cps-notification-data.ts +++ b/projects/cps-ui-kit/src/lib/services/cps-notification/utils/internal/cps-notification-data.ts @@ -10,6 +10,10 @@ export enum CpsNotificationType { INFO = 'info' } +/** + * Defines data type for the notification data. + * @group Interface + */ export interface CpsNotificationData { /** * Message to be displayed in the notification.