pds-dev-kit-web 1.4.6 → 1.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/index.js +3 -2
  3. package/dist/src/common/styles/colorSet/UIColor.json +3 -1
  4. package/dist/src/common/styles/colorSet/index.d.ts +233 -231
  5. package/dist/src/common/styles/colorSet/index.js +5 -5
  6. package/dist/src/common/styles/colorSet/ui-type.d.ts +2 -0
  7. package/dist/src/common/types/components.d.ts +1 -1
  8. package/dist/src/desktop/components/Chip/Chip.js +15 -16
  9. package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js +4 -4
  10. package/dist/src/desktop/components/TextButton/TextButton.js +9 -5
  11. package/dist/src/desktop/components/UserDesktopSideTab/UserDesktopSideTab.d.ts +8 -0
  12. package/dist/src/desktop/components/UserDesktopSideTab/UserDesktopSideTab.js +36 -0
  13. package/dist/src/desktop/components/UserDesktopSideTab/index.d.ts +1 -0
  14. package/dist/src/desktop/components/UserDesktopSideTab/index.js +8 -0
  15. package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js +3 -3
  16. package/dist/src/desktop/components/index.d.ts +2 -1
  17. package/dist/src/desktop/components/index.js +3 -1
  18. package/dist/src/desktop/index.d.ts +2 -2
  19. package/dist/src/desktop/index.js +3 -2
  20. package/dist/src/mobile/components/Chip/Chip.js +15 -16
  21. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js +3 -3
  22. package/dist/src/mobile/components/TextButton/TextButton.js +6 -4
  23. package/package.json +1 -1
  24. package/release-note.md +9 -5
package/dist/index.d.ts CHANGED
@@ -5,11 +5,11 @@ export { theme };
5
5
  export { Form };
6
6
  import { Divider, Icon, ImageView, Spacing, Switch } from './src/hybrid';
7
7
  export { Divider, Icon, ImageView, Spacing, Switch };
8
- import { LayoutWF, WFContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar } from './src/desktop';
8
+ import { LayoutWF, WFContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab } from './src/desktop';
9
9
  export { LayoutWF, WFContainersBox };
10
10
  export { LayoutWS, WSGlobalMenuContainer, WSContainersBox };
11
11
  export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
12
- export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates };
12
+ export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_DynamicDesktopNavBar, D_UserDesktopSideTab, D_DynamicDesktopNavBarTemplates };
13
13
  import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton } from './src/mobile';
14
14
  export { LayoutMF, MFContainersBox };
15
15
  export { LayoutMM, MMNavigationContainer, MMContainersBox };
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeadlessModal = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
4
- exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = void 0;
5
- exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = void 0;
4
+ exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_DynamicDesktopNavBarTemplates = exports.D_UserDesktopSideTab = exports.D_DynamicDesktopNavBar = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = void 0;
5
+ exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = void 0;
6
6
  /* eslint-disable import/order */
7
7
  /* eslint-disable import/first */
8
8
  // common
@@ -78,6 +78,7 @@ Object.defineProperty(exports, "D_UploadMainButton", { enumerable: true, get: fu
78
78
  Object.defineProperty(exports, "D_UploadTextButton", { enumerable: true, get: function () { return desktop_1.D_UploadTextButton; } });
79
79
  Object.defineProperty(exports, "D_UserDesktopNavBar", { enumerable: true, get: function () { return desktop_1.D_UserDesktopNavBar; } });
80
80
  Object.defineProperty(exports, "D_UserDesktopTabBar", { enumerable: true, get: function () { return desktop_1.D_UserDesktopTabBar; } });
81
+ Object.defineProperty(exports, "D_UserDesktopSideTab", { enumerable: true, get: function () { return desktop_1.D_UserDesktopSideTab; } });
81
82
  // mobile
82
83
  var mobile_1 = require("./src/mobile");
83
84
  Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return mobile_1.LayoutMF; } });
package/dist/src/common/styles/colorSet/UIColor.json CHANGED
@@ -511,5 +511,7 @@
511
511
  "ui_cpnt_select_base_darktheme_normal": "sys_component_base_darktheme_01",
512
512
  "ui_hero_title_text": "sys_text_white",
513
513
  "ui_hero_description_text": "sys_text_white",
514
- "ui_cpnt_divider_area": "sys_border_area_01"
514
+ "ui_cpnt_divider_area": "sys_border_area_01",
515
+ "ui_cpnt_button_white_base_hover": "sys_component_base_darktheme_01",
516
+ "ui_cpnt_button_white_base_pressed": "sys_component_base_darktheme_03"
515
517
  }
package/dist/src/common/styles/colorSet/index.d.ts CHANGED
@@ -1,4 +1,63 @@
1
1
  declare const colorSet: {
2
+ readonly SemanticColor: {
3
+ blue500: string;
4
+ blue700: string;
5
+ blue300: string;
6
+ green700: string;
7
+ green500: string;
8
+ green300: string;
9
+ red500: string;
10
+ grey900: string;
11
+ grey500: string;
12
+ grey400: string;
13
+ grey100: string;
14
+ grey50: string;
15
+ white: string;
16
+ black: string;
17
+ darkblue500: string;
18
+ grey950: string;
19
+ darkgrey900: string;
20
+ darkgrey500: string;
21
+ darkgrey400: string;
22
+ darkgrey100: string;
23
+ darkgrey50: string;
24
+ darkred500: string;
25
+ darkgreen700: string;
26
+ orange500: string;
27
+ darkorange500: string;
28
+ opacity00: string;
29
+ opacity20: string;
30
+ opacity30: string;
31
+ opacity65: string;
32
+ darkgreen500: string;
33
+ grey70: string;
34
+ navy500: string;
35
+ lightgreen500: string;
36
+ pink500: string;
37
+ darkgrey70: string;
38
+ darknavy500: string;
39
+ darkpink500: string;
40
+ darklightgreen500: string;
41
+ opacity10: string;
42
+ grey600: string;
43
+ darkgrey600: string;
44
+ skyblue500: string;
45
+ skyblue300: string;
46
+ pink300: string;
47
+ lightpink500: string;
48
+ darkblue300: string;
49
+ darkblue700: string;
50
+ darkgreen300: string;
51
+ darkskyblue500: string;
52
+ navy100: string;
53
+ darknavy100: string;
54
+ opacity80: string;
55
+ opacity50: string;
56
+ grey30: string;
57
+ opacity95: string;
58
+ darkgrey30: string;
59
+ opacity40: string;
60
+ };
2
61
  readonly PaletteColor_Dark: {
3
62
  sys_container_background_01: string;
4
63
  sys_container_background_02: string;
@@ -171,6 +230,178 @@ declare const colorSet: {
171
230
  sys_border_line_darktheme_06: string;
172
231
  sys_border_line_darktheme_07: string;
173
232
  };
233
+ readonly PaletteColor_light: {
234
+ sys_container_background_01: string;
235
+ sys_container_background_02: string;
236
+ sys_container_background_03: string;
237
+ sys_background_dimmed: string;
238
+ sys_text_grey_01: string;
239
+ sys_text_grey_02: string;
240
+ sys_text_grey_03: string;
241
+ sys_text_white: string;
242
+ sys_text_brand_primary: string;
243
+ sys_text_error_01: string;
244
+ sys_widget_grey_01: string;
245
+ sys_widget_grey_02: string;
246
+ sys_widget_grey_03: string;
247
+ sys_widget_primary_01: string;
248
+ sys_widget_error_01: string;
249
+ sys_widget_warning_01: string;
250
+ sys_widget_success_01: string;
251
+ sys_widget_white: string;
252
+ sys_border_area_01: string;
253
+ sys_border_line_01: string;
254
+ sys_border_line_02: string;
255
+ sys_border_line_03: string;
256
+ sys_border_line_04: string;
257
+ sys_border_line_05: string;
258
+ sys_component_base_01: string;
259
+ sys_component_base_02: string;
260
+ sys_component_base_03: string;
261
+ sys_component_base_red: string;
262
+ sys_component_base_white: string;
263
+ sys_component_base_white_opacity00: string;
264
+ sys_on_base_white_opacity00: string;
265
+ sys_on_base_white_opacity30: string;
266
+ sys_on_base_black_opacity20: string;
267
+ usr_brand_primary: string;
268
+ usr_brand_secondary: string;
269
+ usr_brand_secondary_variant: string;
270
+ usr_background: string;
271
+ usr_surface: string;
272
+ usr_border: string;
273
+ usr_on_brand_primary: string;
274
+ usr_on_brand_secondary: string;
275
+ usr_on_background: string;
276
+ usr_on_surface: string;
277
+ sys_widget_status_active_01: string;
278
+ sys_text_success_01: string;
279
+ sys_widget_grey_04: string;
280
+ sys_text_active: string;
281
+ sys_component_base_blue: string;
282
+ sys_on_base_black_opacity65: string;
283
+ sys_component_base_04: string;
284
+ sys_component_base_black: string;
285
+ sys_component_base_black_opacity00: string;
286
+ usr_text_brand_secondary_variant: string;
287
+ usr_text_brand_primary: string;
288
+ usr_text_brand_on_primary: string;
289
+ sys_text_brand_secondary_variant: string;
290
+ sys_component_base_navy: string;
291
+ sys_widget_lightgreen: string;
292
+ sys_border_line_06: string;
293
+ sys_background_dimmed_20: string;
294
+ sys_widget_pink: string;
295
+ sys_widget_primary_opacity20: string;
296
+ sys_widget_secondary_variant_01: string;
297
+ usr_component_base_brand_primary_opacity10: string;
298
+ sys_temp_grey_01: string;
299
+ sys_temp_grey_02: string;
300
+ sys_temp_grey_03: string;
301
+ sys_temp_grey_04: string;
302
+ sys_temp_grey_05: string;
303
+ sys_temp_white: string;
304
+ sys_temp_primary_01: string;
305
+ sys_temp_secondary_01: string;
306
+ sys_temp_red: string;
307
+ sys_temp_white_opacity_00: string;
308
+ sys_temp_dimmed: string;
309
+ sys_temp_black: string;
310
+ sys_temp_primary_02: string;
311
+ sys_temp_primary_03: string;
312
+ sys_temp_secondary_02: string;
313
+ sys_temp_lightgreen_01: string;
314
+ sys_text_grey_04: string;
315
+ sys_papp_post_social_background: string;
316
+ sys_papp_post_notice_background: string;
317
+ sys_papp_post_free_background: string;
318
+ sys_papp_vod_background: string;
319
+ sys_papp_vodplus_background: string;
320
+ sys_papp_live_background: string;
321
+ sys_selcontrols_base_off_disabled: string;
322
+ sys_selcontrols_base_on_disabled: string;
323
+ sys_component_base_blue_opacity10: string;
324
+ sys_component_base_05: string;
325
+ sys_background_dimmed_65: string;
326
+ sys_temp_grey_06: string;
327
+ sys_on_base_white_opacity10: string;
328
+ sys_on_base_black_opacity10: string;
329
+ sys_component_base_05_opacity00: string;
330
+ sys_papp_post_notice_link: string;
331
+ sys_component_base_navy_light: string;
332
+ sys_component_base_orange: string;
333
+ sys_component_base_grey: string;
334
+ sys_component_base_black_opacity80: string;
335
+ sys_text_darkgrey_02: string;
336
+ sys_border_line_darktheme_01: string;
337
+ sys_border_line_darktheme_02: string;
338
+ sys_component_base_darktheme_01: string;
339
+ sys_component_base_darktheme_02: string;
340
+ sys_component_base_darktheme_03: string;
341
+ sys_text_grey_darktheme_01: string;
342
+ sys_text_grey_darktheme_02: string;
343
+ sys_text_grey_darktheme_03: string;
344
+ sys_widget_grey_darktheme_01: string;
345
+ sys_widget_grey_darktheme_02: string;
346
+ sys_widget_grey_darktheme_03: string;
347
+ sys_component_base_green: string;
348
+ sys_text_error_darktheme_01: string;
349
+ sys_border_line_darktheme_03: string;
350
+ sys_border_line_darktheme_04: string;
351
+ usr_widget_brand_primary_darktheme_01: string;
352
+ usr_text_brand_primary_darktheme_01: string;
353
+ sys_component_base_black_opacity50: string;
354
+ sys_component_base_card: string;
355
+ sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
356
+ sys_widget_green_01: string;
357
+ sys_component_base_black_opacity30: string;
358
+ sys_area_background: string;
359
+ sys_border_white_opacity30: string;
360
+ sys_container_background_wt: string;
361
+ sys_channeldesc_grey_03: string;
362
+ sys_channeldesc_border_grey_03: string;
363
+ sys_gradient_base_01: string;
364
+ sys_gradient_base_01_opacity00: string;
365
+ sys_channeldesc_background: string;
366
+ sys_channeldesc_bottomsheet_base: string;
367
+ sys_channeldesc_bottomsheet_border: string;
368
+ sys_channeldesc_contents_base: string;
369
+ sys_channeldesc_dimmed: string;
370
+ sys_gradient_base_01_opacity50: string;
371
+ sys_gradient_base_01_opacity75: string;
372
+ sys_gradient_base_01_opacity40: string;
373
+ sys_widget_black: string;
374
+ usr_temp_primary_01: string;
375
+ sys_cpnt_sheet_base_02_opacity50: string;
376
+ usr_menu_primarymenu_main: string;
377
+ usr_menu_primarymenu_sub: string;
378
+ usr_menu_secondarymenu_main: string;
379
+ usr_menu_secondarymenu_sub: string;
380
+ usr_menu_hover: string;
381
+ usr_menu_active: string;
382
+ usr_menu_background: string;
383
+ sys_cpnt_base_white_opacity50: string;
384
+ sys_widget_dark_01: string;
385
+ usr_menu_background_gradient_opacity00: string;
386
+ sys_border_line_white: string;
387
+ sys_component_base_white_opacity10: string;
388
+ sys_cpnt_sheet_base_01: string;
389
+ sys_component_base_white_opacity20: string;
390
+ sys_border_line_07: string;
391
+ sys_border_line_white_opacity50: string;
392
+ sys_background_dimmed_02: string;
393
+ sys_border_line_08: string;
394
+ sys_component_base_06: string;
395
+ sys_component_base_07: string;
396
+ sys_border_line_09: string;
397
+ sys_component_base_darktheme_04: string;
398
+ sys_border_line_10: string;
399
+ sys_component_base_darktheme_05: string;
400
+ sys_border_line_darktheme_05: string;
401
+ sys_component_base_darktheme_06: string;
402
+ sys_border_line_darktheme_06: string;
403
+ sys_border_line_darktheme_07: string;
404
+ };
174
405
  readonly UIColor: {
175
406
  ui_cpnt_button_fill_base_primary: string;
176
407
  ui_cpnt_button_fill_base_default: string;
@@ -685,237 +916,8 @@ declare const colorSet: {
685
916
  ui_hero_title_text: string;
686
917
  ui_hero_description_text: string;
687
918
  ui_cpnt_divider_area: string;
688
- };
689
- readonly SemanticColor: {
690
- blue500: string;
691
- blue700: string;
692
- blue300: string;
693
- green700: string;
694
- green500: string;
695
- green300: string;
696
- red500: string;
697
- grey900: string;
698
- grey500: string;
699
- grey400: string;
700
- grey100: string;
701
- grey50: string;
702
- white: string;
703
- black: string;
704
- darkblue500: string;
705
- grey950: string;
706
- darkgrey900: string;
707
- darkgrey500: string;
708
- darkgrey400: string;
709
- darkgrey100: string;
710
- darkgrey50: string;
711
- darkred500: string;
712
- darkgreen700: string;
713
- orange500: string;
714
- darkorange500: string;
715
- opacity00: string;
716
- opacity20: string;
717
- opacity30: string;
718
- opacity65: string;
719
- darkgreen500: string;
720
- grey70: string;
721
- navy500: string;
722
- lightgreen500: string;
723
- pink500: string;
724
- darkgrey70: string;
725
- darknavy500: string;
726
- darkpink500: string;
727
- darklightgreen500: string;
728
- opacity10: string;
729
- grey600: string;
730
- darkgrey600: string;
731
- skyblue500: string;
732
- skyblue300: string;
733
- pink300: string;
734
- lightpink500: string;
735
- darkblue300: string;
736
- darkblue700: string;
737
- darkgreen300: string;
738
- darkskyblue500: string;
739
- navy100: string;
740
- darknavy100: string;
741
- opacity80: string;
742
- opacity50: string;
743
- grey30: string;
744
- opacity95: string;
745
- darkgrey30: string;
746
- opacity40: string;
747
- };
748
- readonly PaletteColor_light: {
749
- sys_container_background_01: string;
750
- sys_container_background_02: string;
751
- sys_container_background_03: string;
752
- sys_background_dimmed: string;
753
- sys_text_grey_01: string;
754
- sys_text_grey_02: string;
755
- sys_text_grey_03: string;
756
- sys_text_white: string;
757
- sys_text_brand_primary: string;
758
- sys_text_error_01: string;
759
- sys_widget_grey_01: string;
760
- sys_widget_grey_02: string;
761
- sys_widget_grey_03: string;
762
- sys_widget_primary_01: string;
763
- sys_widget_error_01: string;
764
- sys_widget_warning_01: string;
765
- sys_widget_success_01: string;
766
- sys_widget_white: string;
767
- sys_border_area_01: string;
768
- sys_border_line_01: string;
769
- sys_border_line_02: string;
770
- sys_border_line_03: string;
771
- sys_border_line_04: string;
772
- sys_border_line_05: string;
773
- sys_component_base_01: string;
774
- sys_component_base_02: string;
775
- sys_component_base_03: string;
776
- sys_component_base_red: string;
777
- sys_component_base_white: string;
778
- sys_component_base_white_opacity00: string;
779
- sys_on_base_white_opacity00: string;
780
- sys_on_base_white_opacity30: string;
781
- sys_on_base_black_opacity20: string;
782
- usr_brand_primary: string;
783
- usr_brand_secondary: string;
784
- usr_brand_secondary_variant: string;
785
- usr_background: string;
786
- usr_surface: string;
787
- usr_border: string;
788
- usr_on_brand_primary: string;
789
- usr_on_brand_secondary: string;
790
- usr_on_background: string;
791
- usr_on_surface: string;
792
- sys_widget_status_active_01: string;
793
- sys_text_success_01: string;
794
- sys_widget_grey_04: string;
795
- sys_text_active: string;
796
- sys_component_base_blue: string;
797
- sys_on_base_black_opacity65: string;
798
- sys_component_base_04: string;
799
- sys_component_base_black: string;
800
- sys_component_base_black_opacity00: string;
801
- usr_text_brand_secondary_variant: string;
802
- usr_text_brand_primary: string;
803
- usr_text_brand_on_primary: string;
804
- sys_text_brand_secondary_variant: string;
805
- sys_component_base_navy: string;
806
- sys_widget_lightgreen: string;
807
- sys_border_line_06: string;
808
- sys_background_dimmed_20: string;
809
- sys_widget_pink: string;
810
- sys_widget_primary_opacity20: string;
811
- sys_widget_secondary_variant_01: string;
812
- usr_component_base_brand_primary_opacity10: string;
813
- sys_temp_grey_01: string;
814
- sys_temp_grey_02: string;
815
- sys_temp_grey_03: string;
816
- sys_temp_grey_04: string;
817
- sys_temp_grey_05: string;
818
- sys_temp_white: string;
819
- sys_temp_primary_01: string;
820
- sys_temp_secondary_01: string;
821
- sys_temp_red: string;
822
- sys_temp_white_opacity_00: string;
823
- sys_temp_dimmed: string;
824
- sys_temp_black: string;
825
- sys_temp_primary_02: string;
826
- sys_temp_primary_03: string;
827
- sys_temp_secondary_02: string;
828
- sys_temp_lightgreen_01: string;
829
- sys_text_grey_04: string;
830
- sys_papp_post_social_background: string;
831
- sys_papp_post_notice_background: string;
832
- sys_papp_post_free_background: string;
833
- sys_papp_vod_background: string;
834
- sys_papp_vodplus_background: string;
835
- sys_papp_live_background: string;
836
- sys_selcontrols_base_off_disabled: string;
837
- sys_selcontrols_base_on_disabled: string;
838
- sys_component_base_blue_opacity10: string;
839
- sys_component_base_05: string;
840
- sys_background_dimmed_65: string;
841
- sys_temp_grey_06: string;
842
- sys_on_base_white_opacity10: string;
843
- sys_on_base_black_opacity10: string;
844
- sys_component_base_05_opacity00: string;
845
- sys_papp_post_notice_link: string;
846
- sys_component_base_navy_light: string;
847
- sys_component_base_orange: string;
848
- sys_component_base_grey: string;
849
- sys_component_base_black_opacity80: string;
850
- sys_text_darkgrey_02: string;
851
- sys_border_line_darktheme_01: string;
852
- sys_border_line_darktheme_02: string;
853
- sys_component_base_darktheme_01: string;
854
- sys_component_base_darktheme_02: string;
855
- sys_component_base_darktheme_03: string;
856
- sys_text_grey_darktheme_01: string;
857
- sys_text_grey_darktheme_02: string;
858
- sys_text_grey_darktheme_03: string;
859
- sys_widget_grey_darktheme_01: string;
860
- sys_widget_grey_darktheme_02: string;
861
- sys_widget_grey_darktheme_03: string;
862
- sys_component_base_green: string;
863
- sys_text_error_darktheme_01: string;
864
- sys_border_line_darktheme_03: string;
865
- sys_border_line_darktheme_04: string;
866
- usr_widget_brand_primary_darktheme_01: string;
867
- usr_text_brand_primary_darktheme_01: string;
868
- sys_component_base_black_opacity50: string;
869
- sys_component_base_card: string;
870
- sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
871
- sys_widget_green_01: string;
872
- sys_component_base_black_opacity30: string;
873
- sys_area_background: string;
874
- sys_border_white_opacity30: string;
875
- sys_container_background_wt: string;
876
- sys_channeldesc_grey_03: string;
877
- sys_channeldesc_border_grey_03: string;
878
- sys_gradient_base_01: string;
879
- sys_gradient_base_01_opacity00: string;
880
- sys_channeldesc_background: string;
881
- sys_channeldesc_bottomsheet_base: string;
882
- sys_channeldesc_bottomsheet_border: string;
883
- sys_channeldesc_contents_base: string;
884
- sys_channeldesc_dimmed: string;
885
- sys_gradient_base_01_opacity50: string;
886
- sys_gradient_base_01_opacity75: string;
887
- sys_gradient_base_01_opacity40: string;
888
- sys_widget_black: string;
889
- usr_temp_primary_01: string;
890
- sys_cpnt_sheet_base_02_opacity50: string;
891
- usr_menu_primarymenu_main: string;
892
- usr_menu_primarymenu_sub: string;
893
- usr_menu_secondarymenu_main: string;
894
- usr_menu_secondarymenu_sub: string;
895
- usr_menu_hover: string;
896
- usr_menu_active: string;
897
- usr_menu_background: string;
898
- sys_cpnt_base_white_opacity50: string;
899
- sys_widget_dark_01: string;
900
- usr_menu_background_gradient_opacity00: string;
901
- sys_border_line_white: string;
902
- sys_component_base_white_opacity10: string;
903
- sys_cpnt_sheet_base_01: string;
904
- sys_component_base_white_opacity20: string;
905
- sys_border_line_07: string;
906
- sys_border_line_white_opacity50: string;
907
- sys_background_dimmed_02: string;
908
- sys_border_line_08: string;
909
- sys_component_base_06: string;
910
- sys_component_base_07: string;
911
- sys_border_line_09: string;
912
- sys_component_base_darktheme_04: string;
913
- sys_border_line_10: string;
914
- sys_component_base_darktheme_05: string;
915
- sys_border_line_darktheme_05: string;
916
- sys_component_base_darktheme_06: string;
917
- sys_border_line_darktheme_06: string;
918
- sys_border_line_darktheme_07: string;
919
+ ui_cpnt_button_white_base_hover: string;
920
+ ui_cpnt_button_white_base_pressed: string;
919
921
  };
920
922
  };
921
923
  export default colorSet;
package/dist/src/common/styles/colorSet/index.js CHANGED
@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
- var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
8
- var UIColor_json_1 = __importDefault(require("./UIColor.json"));
9
7
  var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
8
+ var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
10
9
  var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
10
+ var UIColor_json_1 = __importDefault(require("./UIColor.json"));
11
11
  var colorSet = {
12
- PaletteColor_Dark: PaletteColor_Dark_json_1.default,
13
- UIColor: UIColor_json_1.default,
14
12
  SemanticColor: SemanticColor_json_1.default,
15
- PaletteColor_light: PaletteColor_light_json_1.default
13
+ PaletteColor_Dark: PaletteColor_Dark_json_1.default,
14
+ PaletteColor_light: PaletteColor_light_json_1.default,
15
+ UIColor: UIColor_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -512,4 +512,6 @@ export interface UITheme {
512
512
  ui_hero_title_text: string;
513
513
  ui_hero_description_text: string;
514
514
  ui_cpnt_divider_area: string;
515
+ ui_cpnt_button_white_base_hover: string;
516
+ ui_cpnt_button_white_base_pressed: string;
515
517
  }
package/dist/src/common/types/components.d.ts CHANGED
@@ -7,6 +7,6 @@ export declare type PDSValueOption = {
7
7
  export declare type PDSTabItemOption = {
8
8
  title: PDSTextType;
9
9
  isActive: boolean;
10
- onClick?: () => void;
10
+ onClick?: (e: React.MouseEvent<HTMLElement>) => void;
11
11
  };
12
12
  export declare type ForwardedRefType<T> = ForwardedRef<T | null>;
package/dist/src/desktop/components/Chip/Chip.js CHANGED
@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importStar(require("react"));
30
30
  var styled_components_1 = __importDefault(require("styled-components"));
31
+ var hybrid_1 = require("../../../hybrid");
31
32
  var Icon_1 = require("../../../hybrid/components/Icon");
32
33
  var TextLabel_1 = require("../TextLabel");
33
34
  function Chip(_a) {
@@ -56,10 +57,12 @@ function Chip(_a) {
56
57
  switch (displayType) {
57
58
  case 'category_choice':
58
59
  return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: isActive, onClick: handleClickChip },
59
- !isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
60
- react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
60
+ !isActive && (react_1.default.createElement(react_1.default.Fragment, null,
61
+ react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }),
62
+ react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
61
63
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
62
- isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
64
+ isActive && (react_1.default.createElement(react_1.default.Fragment, null,
65
+ react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
63
66
  react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
64
67
  case 'information':
65
68
  return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
@@ -101,11 +104,7 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
101
104
  var theme = _a.theme, isActive = _a.isActive;
102
105
  return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
103
106
  });
104
- var S_CategoryIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
105
- var theme = _a.theme, isActive = _a.isActive;
106
- return isActive ? "margin-left: " + theme.spacing.spacingA : "margin-right: " + theme.spacing.spacingA;
107
- });
108
- var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
107
+ var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
109
108
  var theme = _a.theme;
110
109
  return theme.ui_cpnt_chip_fill_base_inactive;
111
110
  }, function (_a) {
@@ -115,7 +114,7 @@ var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateO
115
114
  var theme = _a.theme;
116
115
  return theme.spacing.spacingC;
117
116
  });
118
- var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"])), function (_a) {
117
+ var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"])), function (_a) {
119
118
  var theme = _a.theme;
120
119
  return theme.ui_cpnt_chip_fill_base_inactive;
121
120
  }, function (_a) {
@@ -125,11 +124,11 @@ var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templ
125
124
  var theme = _a.theme;
126
125
  return theme.spacing.spacingC;
127
126
  });
128
- var S_XIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n cursor: pointer;\n margin-left: ", ";\n"], ["\n cursor: pointer;\n margin-left: ", ";\n"])), function (_a) {
127
+ var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n cursor: pointer;\n margin-left: ", ";\n"], ["\n cursor: pointer;\n margin-left: ", ";\n"])), function (_a) {
129
128
  var theme = _a.theme;
130
129
  return theme.spacing.spacingB;
131
130
  });
132
- var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"])), function (_a) {
131
+ var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"])), function (_a) {
133
132
  var theme = _a.theme, isActive = _a.isActive;
134
133
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
135
134
  }, function (_a) {
@@ -139,23 +138,23 @@ var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (te
139
138
  var theme = _a.theme;
140
139
  return theme.spacing.spacingC;
141
140
  });
142
- var S_FilterIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
141
+ var S_FilterIconWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
143
142
  var theme = _a.theme;
144
143
  return theme.spacing.spacingA;
145
144
  });
146
- var S_LabelChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"], ["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"])), function (_a) {
145
+ var S_LabelChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"], ["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"])), function (_a) {
147
146
  var theme = _a.theme;
148
147
  return theme.ui_cpnt_chip_line_border_01;
149
148
  }, function (_a) {
150
149
  var theme = _a.theme;
151
150
  return theme.spacing.spacingB;
152
151
  });
153
- var S_TimeChip = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
152
+ var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
154
153
  var theme = _a.theme;
155
154
  return theme.ui_cpnt_chip_base_playtime;
156
155
  }, function (_a) {
157
156
  var theme = _a.theme;
158
157
  return theme.spacing.spacingB;
159
158
  });
160
- var S_ChipWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: inline-block;\n vertical-align: bottom;\n"], ["\n display: inline-block;\n vertical-align: bottom;\n"])));
161
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
159
+ var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: inline-block;\n vertical-align: bottom;\n"], ["\n display: inline-block;\n vertical-align: bottom;\n"])));
160
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js CHANGED
@@ -35,9 +35,9 @@ function DesktopTabBar(_a) {
35
35
  var history = (0, react_router_dom_1.useHistory)();
36
36
  var pathname = (0, react_router_dom_1.useLocation)().pathname;
37
37
  if (itemArray) {
38
- var handelClickTabItem_1 = function (item) {
38
+ var handelClickTabItem_1 = function (item, e) {
39
39
  if (item.onClick) {
40
- item.onClick();
40
+ item.onClick(e);
41
41
  }
42
42
  };
43
43
  var textLabel_1 = function (item, isSubText) {
@@ -53,8 +53,8 @@ function DesktopTabBar(_a) {
53
53
  };
54
54
  return (react_1.default.createElement(S_TabBox, null,
55
55
  itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme },
56
- react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function () { return handelClickTabItem_1(item); } }, textLabel_1(item, false)),
57
- item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.title, text: subItem.title, onClick: function () { return handelClickTabItem_1(subItem); } }, textLabel_1(subItem, true))); }))))); }),
56
+ react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function (e) { return handelClickTabItem_1(item, e); } }, textLabel_1(item, false)),
57
+ item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.title, text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, textLabel_1(subItem, true))); }))))); }),
58
58
  itemArray.map(function (item) { return item.isActive && item.subArray && react_1.default.createElement(S_SubBackground, { key: item.title }); })));
59
59
  }
60
60
  if (textArray) {
package/dist/src/desktop/components/TextButton/TextButton.js CHANGED
@@ -71,7 +71,7 @@ function TextButton(_a) {
71
71
  onClick();
72
72
  }
73
73
  };
74
- return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state }),
74
+ return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }),
75
75
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" })));
76
76
  }
77
77
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n ", ";\n"], ["\n border-radius: 14px;\n height: 48px;\n ", ";\n"])), function (_a) {
@@ -85,11 +85,15 @@ var S_Button = styled_components_1.default.button(templateObject_5 || (templateO
85
85
  var state = _a.state;
86
86
  return (state === 'normal' ? 'pointer' : 'default');
87
87
  }, function (_a) {
88
- var theme = _a.theme;
89
- return theme.ui_cpnt_button_line_base_hover;
88
+ var theme = _a.theme, colorTheme = _a.colorTheme;
89
+ return colorTheme === 'white'
90
+ ? theme.ui_cpnt_button_white_base_hover
91
+ : theme.ui_cpnt_button_line_base_hover;
90
92
  }, function (_a) {
91
- var theme = _a.theme;
92
- return theme.ui_cpnt_button_line_base_pressed;
93
+ var theme = _a.theme, colorTheme = _a.colorTheme;
94
+ return colorTheme === 'white'
95
+ ? theme.ui_cpnt_button_white_base_pressed
96
+ : theme.ui_cpnt_button_line_base_pressed;
93
97
  }, function (_a) {
94
98
  var size = _a.size;
95
99
  return size &&
package/dist/src/desktop/components/UserDesktopSideTab/UserDesktopSideTab.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ import { PDSTabItemOption } from '../../../common/types';
3
+ export declare type ItemType = PDSTabItemOption;
4
+ declare type UserDesktopSideTabProps = {
5
+ itemArray: ItemType[];
6
+ };
7
+ declare function UserDesktopSideTab({ itemArray }: UserDesktopSideTabProps): JSX.Element;
8
+ export default UserDesktopSideTab;
package/dist/src/desktop/components/UserDesktopSideTab/UserDesktopSideTab.js ADDED
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __importDefault = (this && this.__importDefault) || function (mod) {
7
+ return (mod && mod.__esModule) ? mod : { "default": mod };
8
+ };
9
+ Object.defineProperty(exports, "__esModule", { value: true });
10
+ var react_1 = __importDefault(require("react"));
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ var TextLabel_1 = require("../TextLabel");
13
+ function UserDesktopSideTab(_a) {
14
+ var itemArray = _a.itemArray;
15
+ var handleClickTabItem = function (item, e) {
16
+ if (item.onClick) {
17
+ item.onClick(e);
18
+ }
19
+ };
20
+ return (react_1.default.createElement(react_1.default.Fragment, null, itemArray.map(function (item, index) {
21
+ return (react_1.default.createElement(S_TabWrapper, { key: index, onClick: function (e) { return handleClickTabItem(item, e); } },
22
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, lineLimit: 1, ellipsisMode: "use", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use", wordBreak: "break_all" })));
23
+ })));
24
+ }
25
+ var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n cursor: pointer;\n display: flex;\n height: 56px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n cursor: pointer;\n display: flex;\n height: 56px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
26
+ var theme = _a.theme;
27
+ return theme.ui_cpnt_userdesktopsidetab_base_area;
28
+ }, function (_a) {
29
+ var theme = _a.theme;
30
+ return theme.spacing.spacingE;
31
+ }, function (_a) {
32
+ var theme = _a.theme;
33
+ return theme.spacing.spacingD;
34
+ });
35
+ exports.default = UserDesktopSideTab;
36
+ var templateObject_1;
package/dist/src/desktop/components/UserDesktopSideTab/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as UserDesktopSideTab } from './UserDesktopSideTab';
package/dist/src/desktop/components/UserDesktopSideTab/index.js ADDED
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.UserDesktopSideTab = void 0;
7
+ var UserDesktopSideTab_1 = require("./UserDesktopSideTab");
8
+ Object.defineProperty(exports, "UserDesktopSideTab", { enumerable: true, get: function () { return __importDefault(UserDesktopSideTab_1).default; } });
package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js CHANGED
@@ -35,12 +35,12 @@ function UserDesktopTabBar(_a) {
35
35
  var history = (0, react_router_dom_1.useHistory)();
36
36
  var pathname = (0, react_router_dom_1.useLocation)().pathname;
37
37
  if (itemArray) {
38
- var handleClickTabItem_1 = function (item) {
38
+ var handleClickTabItem_1 = function (item, e) {
39
39
  if (item.onClick) {
40
- item.onClick();
40
+ item.onClick(e);
41
41
  }
42
42
  };
43
- return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function () { return handleClickTabItem_1(item); } },
43
+ return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } },
44
44
  react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })));
45
45
  }
46
46
  if (textArray) {
package/dist/src/desktop/components/index.d.ts CHANGED
@@ -37,5 +37,6 @@ import { UploadIconButton } from './UploadIconButton';
37
37
  import { UploadMainButton } from './UploadMainButton';
38
38
  import { UploadTextButton } from './UploadTextButton';
39
39
  import { UserDesktopNavBar } from './UserDesktopNavBar';
40
+ import { UserDesktopSideTab } from './UserDesktopSideTab';
40
41
  import { UserDesktopTabBar } from './UserDesktopTabBar';
41
- export { AdminList, AdminListHeader, AdminListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar };
42
+ export { AdminList, AdminListHeader, AdminListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };
package/dist/src/desktop/components/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
3
+ exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
4
4
  var AdminList_1 = require("./AdminList");
5
5
  Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
6
6
  var AdminListHeader_1 = require("./AdminListHeader");
@@ -80,5 +80,7 @@ var UploadTextButton_1 = require("./UploadTextButton");
80
80
  Object.defineProperty(exports, "UploadTextButton", { enumerable: true, get: function () { return UploadTextButton_1.UploadTextButton; } });
81
81
  var UserDesktopNavBar_1 = require("./UserDesktopNavBar");
82
82
  Object.defineProperty(exports, "UserDesktopNavBar", { enumerable: true, get: function () { return UserDesktopNavBar_1.UserDesktopNavBar; } });
83
+ var UserDesktopSideTab_1 = require("./UserDesktopSideTab");
84
+ Object.defineProperty(exports, "UserDesktopSideTab", { enumerable: true, get: function () { return UserDesktopSideTab_1.UserDesktopSideTab; } });
83
85
  var UserDesktopTabBar_1 = require("./UserDesktopTabBar");
84
86
  Object.defineProperty(exports, "UserDesktopTabBar", { enumerable: true, get: function () { return UserDesktopTabBar_1.UserDesktopTabBar; } });
package/dist/src/desktop/index.d.ts CHANGED
@@ -9,7 +9,7 @@ import { LayoutWT } from './layout/LayoutWT';
9
9
  import { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
10
10
  import { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
11
11
  export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
12
- import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar } from './components';
13
- export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar };
12
+ import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
13
+ export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
14
14
  import { DesktopBasicModal as D_DesktopBasicModal, DesktopHeadlessModal as D_DesktopHeadlessModal } from './panels';
15
15
  export { D_DesktopBasicModal, D_DesktopHeadlessModal };
package/dist/src/desktop/index.js CHANGED
@@ -2,8 +2,8 @@
2
2
  /* eslint-disable import/order */
3
3
  /* eslint-disable import/first */
4
4
  Object.defineProperty(exports, "__esModule", { value: true });
5
- exports.D_DesktopBasicModal = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
6
- exports.D_DesktopHeadlessModal = void 0;
5
+ exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
6
+ exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = void 0;
7
7
  // layoutWF
8
8
  var LayoutWF_1 = require("./layout/LayoutWF");
9
9
  Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -66,6 +66,7 @@ Object.defineProperty(exports, "D_UploadMainButton", { enumerable: true, get: fu
66
66
  Object.defineProperty(exports, "D_UploadTextButton", { enumerable: true, get: function () { return components_1.UploadTextButton; } });
67
67
  Object.defineProperty(exports, "D_UserDesktopNavBar", { enumerable: true, get: function () { return components_1.UserDesktopNavBar; } });
68
68
  Object.defineProperty(exports, "D_UserDesktopTabBar", { enumerable: true, get: function () { return components_1.UserDesktopTabBar; } });
69
+ Object.defineProperty(exports, "D_UserDesktopSideTab", { enumerable: true, get: function () { return components_1.UserDesktopSideTab; } });
69
70
  // panels
70
71
  var panels_1 = require("./panels");
71
72
  Object.defineProperty(exports, "D_DesktopBasicModal", { enumerable: true, get: function () { return panels_1.DesktopBasicModal; } });
package/dist/src/mobile/components/Chip/Chip.js CHANGED
@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importStar(require("react"));
30
30
  var styled_components_1 = __importDefault(require("styled-components"));
31
+ var hybrid_1 = require("../../../hybrid");
31
32
  var Icon_1 = require("../../../hybrid/components/Icon");
32
33
  var TextLabel_1 = require("../TextLabel");
33
34
  function Chip(_a) {
@@ -56,10 +57,12 @@ function Chip(_a) {
56
57
  switch (displayType) {
57
58
  case 'category_choice':
58
59
  return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: isActive, onClick: handleClickChip },
59
- !isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
60
- react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
60
+ !isActive && (react_1.default.createElement(react_1.default.Fragment, null,
61
+ react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }),
62
+ react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
61
63
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
62
- isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
64
+ isActive && (react_1.default.createElement(react_1.default.Fragment, null,
65
+ react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
63
66
  react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
64
67
  case 'information':
65
68
  return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
@@ -98,11 +101,7 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
98
101
  var theme = _a.theme, isActive = _a.isActive;
99
102
  return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
100
103
  });
101
- var S_CategoryIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
102
- var theme = _a.theme, isActive = _a.isActive;
103
- return isActive ? "margin-left: " + theme.spacing.spacingA : "margin-right: " + theme.spacing.spacingA;
104
- });
105
- var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
104
+ var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 12px;\n box-sizing: border-box;\n display: flex;\n height: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
106
105
  var theme = _a.theme;
107
106
  return theme.ui_cpnt_chip_fill_base_inactive;
108
107
  }, function (_a) {
@@ -112,7 +111,7 @@ var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateO
112
111
  var theme = _a.theme;
113
112
  return theme.spacing.spacingC;
114
113
  });
115
- var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
114
+ var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
116
115
  var theme = _a.theme;
117
116
  return theme.ui_cpnt_chip_fill_base_inactive;
118
117
  }, function (_a) {
@@ -122,11 +121,11 @@ var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templ
122
121
  var theme = _a.theme;
123
122
  return theme.spacing.spacingC;
124
123
  });
125
- var S_XIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
124
+ var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
126
125
  var theme = _a.theme;
127
126
  return theme.spacing.spacingB;
128
127
  });
129
- var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
128
+ var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n background-color: ", ";\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
130
129
  var theme = _a.theme, isActive = _a.isActive;
131
130
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
132
131
  }, function (_a) {
@@ -136,23 +135,23 @@ var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (te
136
135
  var theme = _a.theme;
137
136
  return theme.spacing.spacingC;
138
137
  });
139
- var S_FilterIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
138
+ var S_FilterIconWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
140
139
  var theme = _a.theme;
141
140
  return theme.spacing.spacingA;
142
141
  });
143
- var S_LabelChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"], ["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"])), function (_a) {
142
+ var S_LabelChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"], ["\n border: 1px solid ", ";\n border-radius: 10px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n padding: 0 ", ";\n"])), function (_a) {
144
143
  var theme = _a.theme;
145
144
  return theme.ui_cpnt_chip_line_border_01;
146
145
  }, function (_a) {
147
146
  var theme = _a.theme;
148
147
  return theme.spacing.spacingB;
149
148
  });
150
- var S_TimeChip = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
149
+ var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-radius: 10px;\n box-sizing: border-box;\n height: 20px;\n padding: 0 ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
151
150
  var theme = _a.theme;
152
151
  return theme.ui_cpnt_chip_base_playtime;
153
152
  }, function (_a) {
154
153
  var theme = _a.theme;
155
154
  return theme.spacing.spacingB;
156
155
  });
157
- var S_ChipWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: inline-block;\n vertical-align: bottom;\n"], ["\n display: inline-block;\n vertical-align: bottom;\n"])));
158
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
156
+ var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: inline-block;\n vertical-align: bottom;\n"], ["\n display: inline-block;\n vertical-align: bottom;\n"])));
157
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js CHANGED
@@ -28,12 +28,12 @@ function MobileTabBar(_a) {
28
28
  var history = (0, react_router_dom_1.useHistory)();
29
29
  var pathname = (0, react_router_dom_1.useLocation)().pathname;
30
30
  if (itemArray) {
31
- var handleClickTabItem_1 = function (item) {
31
+ var handleClickTabItem_1 = function (item, e) {
32
32
  if (item.onClick) {
33
- item.onClick();
33
+ item.onClick(e);
34
34
  }
35
35
  };
36
- return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, colorTheme: colorTheme, isActive: item.isActive, onClick: function () { return handleClickTabItem_1(item); } },
36
+ return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } },
37
37
  react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: item.isActive
38
38
  ? mobileTabBarThemes[colorTheme].activeTextColor
39
39
  : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }))); })));
package/dist/src/mobile/components/TextButton/TextButton.js CHANGED
@@ -71,7 +71,7 @@ function TextButton(_a) {
71
71
  onClick();
72
72
  }
73
73
  };
74
- return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled' }),
74
+ return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }),
75
75
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" })));
76
76
  }
77
77
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n ", ";\n"], ["\n border-radius: 14px;\n height: 48px;\n ", ";\n"])), function (_a) {
@@ -81,9 +81,11 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
81
81
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n"], ["\n border-radius: 14px;\n height: 40px;\n"])));
82
82
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n"], ["\n border-radius: 10px;\n height: 32px;\n"])));
83
83
  var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n"], ["\n border-radius: 8px;\n height: 24px;\n"])));
84
- var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:active:enabled {\n background-color: ", ";\n }\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:active:enabled {\n background-color: ", ";\n }\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), function (_a) {
85
- var theme = _a.theme;
86
- return theme.ui_cpnt_button_line_base_pressed;
84
+ var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:active:enabled {\n background-color: ", ";\n }\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n &:active:enabled {\n background-color: ", ";\n }\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), function (_a) {
85
+ var theme = _a.theme, colorTheme = _a.colorTheme;
86
+ return colorTheme === 'white'
87
+ ? theme.ui_cpnt_button_white_base_pressed
88
+ : theme.ui_cpnt_button_line_base_pressed;
87
89
  }, function (_a) {
88
90
  var size = _a.size;
89
91
  return size &&
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.4.6",
3
+ "version": "1.4.7",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,12 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.4.6]
2
+ ## [v1.4.7]
3
3
 
4
4
  ### Component
5
- * DynamicDesktopNavBar
6
- * 내부에서 쓰이는 contextMenu의 스타일 수정
7
- * 템플릿을 내부에서 파싱하는 것으로 변경
8
- * 해당 컴포넌트와 함께 쓰이는 D_DynamicDesktopNavBarTemplates를 export처리
5
+ * Chip
6
+ * Category유형일때 아이콘이 쏠려보이던 현상 수정
7
+ * TextButton
8
+ * colorTheme이 white일 경우 hover나 press했을때 색상 변경
9
+ * UserDesktopSideTab 생성
10
+
11
+ ### Color
12
+ * 컬러 키 값 22.06.16 12시 10분 기준 싱크