@asdp/ferryui 0.1.22-dev.9152 → 0.1.22-dev.9165
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +13 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +155 -61
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +155 -61
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -438,6 +438,7 @@ interface CardTicketProps {
|
|
|
438
438
|
* Callback when select ticket button is clicked
|
|
439
439
|
*/
|
|
440
440
|
onSelectTicket?: () => void;
|
|
441
|
+
isLoading?: boolean;
|
|
441
442
|
}
|
|
442
443
|
interface DepartureItem {
|
|
443
444
|
departureDay: string;
|
|
@@ -562,6 +563,16 @@ interface CardServiceMenuProps {
|
|
|
562
563
|
* Menu items
|
|
563
564
|
*/
|
|
564
565
|
menuItems?: CardServiceMenuItem[];
|
|
566
|
+
/**
|
|
567
|
+
* Whether the menu is in a loading state
|
|
568
|
+
* @default false
|
|
569
|
+
*/
|
|
570
|
+
isLoading?: boolean;
|
|
571
|
+
/**
|
|
572
|
+
* Number of skeleton items to display while loading
|
|
573
|
+
* @default 4
|
|
574
|
+
*/
|
|
575
|
+
skeletonCount?: number;
|
|
565
576
|
}
|
|
566
577
|
interface CardServiceMenuItem {
|
|
567
578
|
id: number;
|
|
@@ -681,6 +692,7 @@ interface CardTicketSearchProps {
|
|
|
681
692
|
showPassengerField?: boolean;
|
|
682
693
|
showRoundTrip?: boolean;
|
|
683
694
|
menuItems?: CardServiceMenuItem[];
|
|
695
|
+
isLoadingServiceMenu?: boolean;
|
|
684
696
|
}
|
|
685
697
|
|
|
686
698
|
declare const CardTicketSearch: React$1.FC<CardTicketSearchProps>;
|
|
@@ -1951,6 +1963,7 @@ interface DateFilterProps {
|
|
|
1951
1963
|
* Optional custom labels
|
|
1952
1964
|
*/
|
|
1953
1965
|
labels?: Partial<DateFilterLabels>;
|
|
1966
|
+
isLoading?: boolean;
|
|
1954
1967
|
}
|
|
1955
1968
|
interface DateFilterLabels {
|
|
1956
1969
|
prevButtonAriaLabel: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -438,6 +438,7 @@ interface CardTicketProps {
|
|
|
438
438
|
* Callback when select ticket button is clicked
|
|
439
439
|
*/
|
|
440
440
|
onSelectTicket?: () => void;
|
|
441
|
+
isLoading?: boolean;
|
|
441
442
|
}
|
|
442
443
|
interface DepartureItem {
|
|
443
444
|
departureDay: string;
|
|
@@ -562,6 +563,16 @@ interface CardServiceMenuProps {
|
|
|
562
563
|
* Menu items
|
|
563
564
|
*/
|
|
564
565
|
menuItems?: CardServiceMenuItem[];
|
|
566
|
+
/**
|
|
567
|
+
* Whether the menu is in a loading state
|
|
568
|
+
* @default false
|
|
569
|
+
*/
|
|
570
|
+
isLoading?: boolean;
|
|
571
|
+
/**
|
|
572
|
+
* Number of skeleton items to display while loading
|
|
573
|
+
* @default 4
|
|
574
|
+
*/
|
|
575
|
+
skeletonCount?: number;
|
|
565
576
|
}
|
|
566
577
|
interface CardServiceMenuItem {
|
|
567
578
|
id: number;
|
|
@@ -681,6 +692,7 @@ interface CardTicketSearchProps {
|
|
|
681
692
|
showPassengerField?: boolean;
|
|
682
693
|
showRoundTrip?: boolean;
|
|
683
694
|
menuItems?: CardServiceMenuItem[];
|
|
695
|
+
isLoadingServiceMenu?: boolean;
|
|
684
696
|
}
|
|
685
697
|
|
|
686
698
|
declare const CardTicketSearch: React$1.FC<CardTicketSearchProps>;
|
|
@@ -1951,6 +1963,7 @@ interface DateFilterProps {
|
|
|
1951
1963
|
* Optional custom labels
|
|
1952
1964
|
*/
|
|
1953
1965
|
labels?: Partial<DateFilterLabels>;
|
|
1966
|
+
isLoading?: boolean;
|
|
1954
1967
|
}
|
|
1955
1968
|
interface DateFilterLabels {
|
|
1956
1969
|
prevButtonAriaLabel: string;
|
package/dist/index.js
CHANGED
|
@@ -1315,7 +1315,8 @@ var CardTicket = ({
|
|
|
1315
1315
|
buttonText,
|
|
1316
1316
|
onPriceDetailClick,
|
|
1317
1317
|
onPolicyClick,
|
|
1318
|
-
onSelectTicket
|
|
1318
|
+
onSelectTicket,
|
|
1319
|
+
isLoading = false
|
|
1319
1320
|
}) => {
|
|
1320
1321
|
const styles = useStyles5();
|
|
1321
1322
|
const { width } = useWindowSize();
|
|
@@ -1338,7 +1339,23 @@ var CardTicket = ({
|
|
|
1338
1339
|
xxxl: 3,
|
|
1339
1340
|
style: { padding: 0, margin: 0 },
|
|
1340
1341
|
children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.ticketLeftCard, children: [
|
|
1341
|
-
/* @__PURE__ */ jsxRuntime.
|
|
1342
|
+
isLoading ? /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1343
|
+
reactGridSystem.Col,
|
|
1344
|
+
{
|
|
1345
|
+
xs: 12,
|
|
1346
|
+
style: {
|
|
1347
|
+
display: "flex",
|
|
1348
|
+
flexDirection: "column",
|
|
1349
|
+
alignItems: "center",
|
|
1350
|
+
justifyContent: "center",
|
|
1351
|
+
gap: "1rem"
|
|
1352
|
+
},
|
|
1353
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
|
|
1354
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "60px", borderRadius: "50%" } }),
|
|
1355
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100px", height: "20px", marginTop: "1rem" } })
|
|
1356
|
+
] })
|
|
1357
|
+
}
|
|
1358
|
+
) }) : /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%" }, children: [
|
|
1342
1359
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1343
1360
|
reactGridSystem.Col,
|
|
1344
1361
|
{
|
|
@@ -1484,7 +1501,29 @@ var CardTicket = ({
|
|
|
1484
1501
|
xxl: 4.5,
|
|
1485
1502
|
xxxl: 4.5,
|
|
1486
1503
|
style: { padding: 0, margin: 0 },
|
|
1487
|
-
children: /* @__PURE__ */ jsxRuntime.
|
|
1504
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.ticketMiddleCard, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }, children: [
|
|
1505
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "28px", borderRadius: "4px" } }) }) }),
|
|
1506
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketInfo, children: [
|
|
1507
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ticketTime, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
|
|
1508
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "14px" } }),
|
|
1509
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "28px" } }),
|
|
1510
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "120px", height: "14px" } })
|
|
1511
|
+
] }) }),
|
|
1512
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketDuration, children: [
|
|
1513
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "16px", marginBottom: "8px" } }) }),
|
|
1514
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "120px", height: "2px" } }) }) })
|
|
1515
|
+
] }),
|
|
1516
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ticketTime, style: { alignItems: "flex-end" }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "8px" }, children: [
|
|
1517
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60px", height: "14px" } }),
|
|
1518
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "28px" } }),
|
|
1519
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "120px", height: "14px" } })
|
|
1520
|
+
] }) })
|
|
1521
|
+
] }) }),
|
|
1522
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ticketButtons, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", gap: "1rem", width: "100%" }, children: [
|
|
1523
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { flex: 1, height: "32px", borderRadius: "16px" } }),
|
|
1524
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { flex: 1, height: "32px", borderRadius: "16px" } })
|
|
1525
|
+
] }) })
|
|
1526
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1488
1527
|
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1489
1528
|
reactComponents.Badge,
|
|
1490
1529
|
{
|
|
@@ -1562,7 +1601,7 @@ var CardTicket = ({
|
|
|
1562
1601
|
}
|
|
1563
1602
|
)
|
|
1564
1603
|
] })
|
|
1565
|
-
] })
|
|
1604
|
+
] }) })
|
|
1566
1605
|
}
|
|
1567
1606
|
),
|
|
1568
1607
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1577,54 +1616,68 @@ var CardTicket = ({
|
|
|
1577
1616
|
xxxl: 4.5,
|
|
1578
1617
|
style: { padding: 0, margin: 0 },
|
|
1579
1618
|
children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.ticketRightCard, children: [
|
|
1580
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1581
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1582
|
-
"
|
|
1583
|
-
|
|
1584
|
-
style: {
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1619
|
+
isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1620
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceCard, children: [
|
|
1621
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", flexDirection: "column", gap: "8px", flex: 1 }, children: [
|
|
1622
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "20px" } }),
|
|
1623
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "140px", height: "32px", borderRadius: "16px" } })
|
|
1624
|
+
] }),
|
|
1625
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "120px", height: "40px", borderRadius: "20px" } }) })
|
|
1626
|
+
] }),
|
|
1627
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilitiesSection, children: [
|
|
1628
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80px", height: "20px", marginBottom: "8px" } }) }),
|
|
1629
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.facilitiesList, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100px", height: "20px" } }) }, i)) })
|
|
1630
|
+
] })
|
|
1631
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1632
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.priceCard, children: [
|
|
1633
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1634
|
+
"div",
|
|
1635
|
+
{
|
|
1636
|
+
style: {
|
|
1637
|
+
display: "flex",
|
|
1638
|
+
flexDirection: "column",
|
|
1639
|
+
gap: "0.25rem"
|
|
1640
|
+
},
|
|
1641
|
+
children: [
|
|
1642
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.totalPriceLabel }),
|
|
1643
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1644
|
+
reactComponents.Title3,
|
|
1645
|
+
{
|
|
1646
|
+
style: {
|
|
1647
|
+
display: "flex",
|
|
1648
|
+
flex: "column",
|
|
1649
|
+
justifyContent: "end"
|
|
1650
|
+
},
|
|
1651
|
+
children: [
|
|
1652
|
+
mergedLabels.currencySymbol,
|
|
1653
|
+
"\xA0",
|
|
1654
|
+
departureItem?.billingDetail?.total?.formatted
|
|
1655
|
+
]
|
|
1656
|
+
}
|
|
1657
|
+
)
|
|
1658
|
+
]
|
|
1659
|
+
}
|
|
1660
|
+
),
|
|
1661
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1662
|
+
reactComponents.Button,
|
|
1663
|
+
{
|
|
1664
|
+
onClick: onSelectTicket,
|
|
1665
|
+
appearance: "primary",
|
|
1666
|
+
style: { backgroundColor: brandColors2["60"] },
|
|
1667
|
+
size: "medium",
|
|
1668
|
+
shape: "circular",
|
|
1669
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
|
|
1670
|
+
children: buttonText || mergedLabels.selectTicketButton
|
|
1671
|
+
}
|
|
1672
|
+
)
|
|
1673
|
+
] }),
|
|
1674
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilitiesSection, children: [
|
|
1675
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.facilitiesLabel }),
|
|
1676
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.facilitiesList, children: departureItem?.provider?.facilities.map((facility, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilityItem, children: [
|
|
1677
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:checkmark-circle-24-filled" }),
|
|
1678
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Strong, { children: facility })
|
|
1679
|
+
] }, idx)) })
|
|
1680
|
+
] })
|
|
1628
1681
|
] }),
|
|
1629
1682
|
/* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { xl: true, xxl: true, xxxl: true, children: Array.from({ length: circularVerticalConfig.count }).map(
|
|
1630
1683
|
(_, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -2034,6 +2087,13 @@ var useStyles6 = reactComponents.makeStyles({
|
|
|
2034
2087
|
display: "none"
|
|
2035
2088
|
}
|
|
2036
2089
|
},
|
|
2090
|
+
skeletonOverride: {
|
|
2091
|
+
cursor: "default",
|
|
2092
|
+
backgroundColor: "transparent",
|
|
2093
|
+
"&:hover": {
|
|
2094
|
+
backgroundColor: "transparent"
|
|
2095
|
+
}
|
|
2096
|
+
},
|
|
2037
2097
|
// Dividers
|
|
2038
2098
|
dividerVertical: {
|
|
2039
2099
|
// Only visible on tablet (horizontal layout)
|
|
@@ -2058,7 +2118,9 @@ var CardServiceMenu = ({
|
|
|
2058
2118
|
showDescriptions = true,
|
|
2059
2119
|
className,
|
|
2060
2120
|
labels,
|
|
2061
|
-
menuItems = ALIAS_MENU_ITEMS
|
|
2121
|
+
menuItems = ALIAS_MENU_ITEMS,
|
|
2122
|
+
isLoading = false,
|
|
2123
|
+
skeletonCount = 4
|
|
2062
2124
|
}) => {
|
|
2063
2125
|
const styles = useStyles6();
|
|
2064
2126
|
({ ...DEFAULT_LABELS6[language], ...labels });
|
|
@@ -2066,7 +2128,19 @@ var CardServiceMenu = ({
|
|
|
2066
2128
|
const isActive = activeServiceId === serviceId;
|
|
2067
2129
|
return reactComponents.mergeClasses(styles.menuItem, isActive && styles.menuItemActive);
|
|
2068
2130
|
};
|
|
2069
|
-
return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: reactComponents.mergeClasses(styles.card, className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.menuList, children:
|
|
2131
|
+
return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: reactComponents.mergeClasses(styles.card, className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.menuList, children: isLoading ? Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
|
|
2132
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: reactComponents.mergeClasses(styles.menuItem, styles.skeletonOverride), children: [
|
|
2133
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { className: styles.logo, style: { borderRadius: "50%" } }) }) }),
|
|
2134
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
|
|
2135
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60%", height: "16px" } }) }),
|
|
2136
|
+
showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { className: styles.description, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "90%", height: "12px", marginTop: "4px" } }) })
|
|
2137
|
+
] })
|
|
2138
|
+
] }),
|
|
2139
|
+
index < skeletonCount - 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2140
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.dividerHorizontal }),
|
|
2141
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { vertical: true, className: styles.dividerVertical })
|
|
2142
|
+
] })
|
|
2143
|
+
] }, `skeleton-${index}`)) : menuItems.map((item, index) => {
|
|
2070
2144
|
return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
|
|
2071
2145
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2072
2146
|
reactComponents.Button,
|
|
@@ -3538,7 +3612,13 @@ var InputDynamic = ({
|
|
|
3538
3612
|
className: reactComponents.mergeClasses(
|
|
3539
3613
|
styles.inputWithAutocomplete,
|
|
3540
3614
|
classNameSize
|
|
3541
|
-
)
|
|
3615
|
+
),
|
|
3616
|
+
style: inputStyle,
|
|
3617
|
+
input: {
|
|
3618
|
+
style: {
|
|
3619
|
+
textOverflow: "ellipsis"
|
|
3620
|
+
}
|
|
3621
|
+
}
|
|
3542
3622
|
}
|
|
3543
3623
|
);
|
|
3544
3624
|
}
|
|
@@ -3882,7 +3962,8 @@ var CardTicketSearch = ({
|
|
|
3882
3962
|
showPassengerField = false,
|
|
3883
3963
|
showRoundTrip = true,
|
|
3884
3964
|
onServiceClick,
|
|
3885
|
-
menuItems
|
|
3965
|
+
menuItems,
|
|
3966
|
+
isLoadingServiceMenu
|
|
3886
3967
|
}) => {
|
|
3887
3968
|
const styles = useStyles8();
|
|
3888
3969
|
const labels = React__default.default.useMemo(
|
|
@@ -3977,7 +4058,8 @@ var CardTicketSearch = ({
|
|
|
3977
4058
|
activeServiceId,
|
|
3978
4059
|
language,
|
|
3979
4060
|
onServiceClick,
|
|
3980
|
-
menuItems
|
|
4061
|
+
menuItems,
|
|
4062
|
+
isLoading: isLoadingServiceMenu
|
|
3981
4063
|
}
|
|
3982
4064
|
)
|
|
3983
4065
|
}
|
|
@@ -4294,6 +4376,7 @@ var CardTicketSearch = ({
|
|
|
4294
4376
|
{
|
|
4295
4377
|
name: "typeOfService",
|
|
4296
4378
|
label: labels.typeOfServiceLabel,
|
|
4379
|
+
style: { textOverflow: "ellipsis" },
|
|
4297
4380
|
control,
|
|
4298
4381
|
type: "text",
|
|
4299
4382
|
contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5072,7 +5155,13 @@ var ModalSearchHarbor = ({
|
|
|
5072
5155
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
|
|
5073
5156
|
] }),
|
|
5074
5157
|
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
|
|
5075
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.harborList, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
5158
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.harborList, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: [1, 2, 3, 4, 5].map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.harborItem, children: [
|
|
5159
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", alignItems: "center", gap: "0.5rem", width: "70%" }, children: [
|
|
5160
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "24px", height: "24px", borderRadius: "4px" } }),
|
|
5161
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100%", height: "20px", borderRadius: "4px" } })
|
|
5162
|
+
] }),
|
|
5163
|
+
showButtonFavorite && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "24px", height: "24px", borderRadius: "4px" } }) })
|
|
5164
|
+
] }, item)) }) : harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.harborItem, children: [
|
|
5076
5165
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5077
5166
|
"div",
|
|
5078
5167
|
{
|
|
@@ -6629,7 +6718,8 @@ var useStyles16 = reactComponents.makeStyles({
|
|
|
6629
6718
|
paddingRight: reactComponents.tokens.spacingHorizontalSNudge,
|
|
6630
6719
|
paddingBottom: reactComponents.tokens.spacingHorizontalXL,
|
|
6631
6720
|
maxHeight: "70vh",
|
|
6632
|
-
overflowY: "auto"
|
|
6721
|
+
overflowY: "auto",
|
|
6722
|
+
overflowX: "hidden"
|
|
6633
6723
|
},
|
|
6634
6724
|
closeButton: {
|
|
6635
6725
|
minWidth: "32px",
|
|
@@ -7128,7 +7218,8 @@ var DateFilter = ({
|
|
|
7128
7218
|
showCalendarButton = true,
|
|
7129
7219
|
scrollAmount = DEFAULT_SCROLL_AMOUNT,
|
|
7130
7220
|
language = "id",
|
|
7131
|
-
labels
|
|
7221
|
+
labels,
|
|
7222
|
+
isLoading = false
|
|
7132
7223
|
}) => {
|
|
7133
7224
|
const styles = useStyles17();
|
|
7134
7225
|
const scrollRef = React.useRef(null);
|
|
@@ -7153,7 +7244,10 @@ var DateFilter = ({
|
|
|
7153
7244
|
"aria-label": mergedLabels.prevButtonAriaLabel
|
|
7154
7245
|
}
|
|
7155
7246
|
) }) }),
|
|
7156
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: styles.scrollContainer, children:
|
|
7247
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: styles.scrollContainer, children: isLoading ? Array.from({ length: 7 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.item, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.compoundButton, style: { borderRadius: reactComponents.tokens.borderRadiusMedium, border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}` }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px", padding: "8px" }, children: [
|
|
7248
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "14px" } }),
|
|
7249
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60%", height: "14px" } })
|
|
7250
|
+
] }) }) }, index)) : dates.map((date, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.item, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7157
7251
|
reactComponents.Button,
|
|
7158
7252
|
{
|
|
7159
7253
|
appearance: "outline",
|