krl-alfred 2.20.6 → 2.21.0
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/components/AddressCard/AddressCard.styled.js +1 -1
- package/dist/components/CouponCode/CouponCode.js +1 -1
- package/dist/components/CouponCode/CouponCode.styled.d.ts +3 -1
- package/dist/components/CouponCode/CouponCode.styled.js +5 -3
- package/dist/components/CouponCode/props.d.ts +1 -0
- package/dist/components/DescriptionCard/DescriptionCard.d.ts +1 -1
- package/dist/components/DescriptionCard/DescriptionCard.js +3 -3
- package/dist/components/DescriptionCard/DescriptionCard.styled.d.ts +2 -0
- package/dist/components/DescriptionCard/DescriptionCard.styled.js +30 -26
- package/dist/components/DescriptionCard/props.d.ts +6 -0
- package/dist/components/DescriptionCard/props.js +3 -0
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.d.ts +42 -1
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js +9 -1
- package/dist/components/Icon/iconList/ArrowLeftXl.d.ts +3 -0
- package/dist/components/Icon/iconList/ArrowLeftXl.js +40 -0
- package/dist/components/Icon/iconList/PlusMd.d.ts +3 -0
- package/dist/components/Icon/iconList/PlusMd.js +40 -0
- package/dist/components/Icon/iconList/index.d.ts +9 -1
- package/dist/components/Icon/iconList/index.js +18 -6
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Input/Input.js +76 -35
- package/dist/components/Input/Input.styled.d.ts +5 -0
- package/dist/components/Input/Input.styled.js +10 -5
- package/dist/components/Input/props.d.ts +2 -0
- package/dist/components/Input/props.js +2 -0
- package/dist/components/Input/stories/Input.stories.d.ts +17 -0
- package/dist/components/Input/stories/Input.stories.js +20 -1
- package/dist/components/ProductCardCheckbox/ProductCardCheckbox.styled.js +1 -1
- package/dist/components/ProductCardHorizontal/ProductCardHorizontal.styled.js +1 -1
- package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.d.ts +1 -1
- package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.js +6 -4
- package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.styled.d.ts +17 -2
- package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.styled.js +12 -11
- package/dist/components/ProductCardHorizontalMd/props.d.ts +1 -0
- package/dist/components/ProductCardHorizontalMd/props.js +1 -0
- package/dist/components/ProductCardHorizontalMd/stories/ProductCardHorizontalMd.stories.d.ts +47 -1
- package/dist/components/ProductCardHorizontalMd/stories/ProductCardHorizontalMd.stories.js +20 -1
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.js +1 -0
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js +1 -1
- package/dist/components/ProductCardHorizontalSm/props.d.ts +2 -1
- package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.d.ts +4 -0
- package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.js +4 -0
- package/dist/components/ProductCardVertical/ProductCardVertical.js +2 -1
- package/dist/components/ProductCardVertical/ProductCardVertical.styled.js +29 -6
- package/dist/components/ProductCardVertical/props.d.ts +1 -0
- package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.d.ts +37 -0
- package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.js +5 -1
- package/dist/components/SelectBox/SelectBox.js +4 -3
- package/dist/components/SelectBox/props.d.ts +1 -0
- package/dist/components/SelectBox/props.js +2 -1
- package/dist/components/SelectBox/stories/SelectBox.stories.d.ts +39 -0
- package/dist/components/SelectBox/stories/SelectBox.stories.js +5 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js +2 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.d.ts +1 -6
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js +13 -14
- package/dist/components/Textarea/Textarea.d.ts +1 -1
- package/dist/components/Textarea/Textarea.js +5 -2
- package/dist/components/Textarea/Textarea.styled.d.ts +2 -0
- package/dist/components/Textarea/Textarea.styled.js +8 -2
- package/dist/components/Textarea/props.d.ts +3 -0
- package/dist/components/Textarea/props.js +3 -0
- package/dist/components/Textarea/stories/Textarea.stories.d.ts +24 -2
- package/dist/components/Textarea/stories/Textarea.stories.js +24 -1
- package/dist/components/Uploader/Uploader.d.ts +4 -0
- package/dist/components/Uploader/Uploader.js +116 -0
- package/dist/components/Uploader/Uploader.styled.d.ts +39 -0
- package/dist/components/Uploader/Uploader.styled.js +55 -0
- package/dist/components/Uploader/index.d.ts +1 -0
- package/dist/components/Uploader/index.js +8 -0
- package/dist/components/Uploader/props.d.ts +34 -0
- package/dist/components/Uploader/props.js +14 -0
- package/dist/components/Uploader/stories/Uploader.stories.d.ts +64 -0
- package/dist/components/Uploader/stories/Uploader.stories.js +100 -0
- package/package.json +1 -1
|
@@ -38,6 +38,9 @@ export namespace iconList {
|
|
|
38
38
|
function ArrowLeftSquare({ ...props }: {
|
|
39
39
|
[x: string]: any;
|
|
40
40
|
}): import("react").JSX.Element;
|
|
41
|
+
function ArrowLeftXl({ ...props }: {
|
|
42
|
+
[x: string]: any;
|
|
43
|
+
}): import("react").JSX.Element;
|
|
41
44
|
function ArrowRight({ ...props }: {
|
|
42
45
|
[x: string]: any;
|
|
43
46
|
}): import("react").JSX.Element;
|
|
@@ -485,6 +488,9 @@ export namespace iconList {
|
|
|
485
488
|
function PlusCircle({ ...props }: {
|
|
486
489
|
[x: string]: any;
|
|
487
490
|
}): import("react").JSX.Element;
|
|
491
|
+
function PlusMd({ ...props }: {
|
|
492
|
+
[x: string]: any;
|
|
493
|
+
}): import("react").JSX.Element;
|
|
488
494
|
function PlusSmall({ ...props }: {
|
|
489
495
|
[x: string]: any;
|
|
490
496
|
}): import("react").JSX.Element;
|
|
@@ -802,6 +808,7 @@ import { default as ArrowLeftAnimate } from "./ArrowLeftAnimate";
|
|
|
802
808
|
import { default as ArrowLeftBig } from "./ArrowLeftBig";
|
|
803
809
|
import { default as ArrowLeftCircle } from "./ArrowLeftCircle";
|
|
804
810
|
import { default as ArrowLeftSquare } from "./ArrowLeftSquare";
|
|
811
|
+
import { default as ArrowLeftXl } from "./ArrowLeftXl";
|
|
805
812
|
import { default as ArrowRight } from "./ArrowRight";
|
|
806
813
|
import { default as ArrowRightAnimate } from "./ArrowRightAnimate";
|
|
807
814
|
import { default as ArrowRightBig } from "./ArrowRightBig";
|
|
@@ -951,6 +958,7 @@ import { default as PauseMd } from "./PauseMd";
|
|
|
951
958
|
import { default as PlayMd } from "./PlayMd";
|
|
952
959
|
import { default as PlusBig } from "./PlusBig";
|
|
953
960
|
import { default as PlusCircle } from "./PlusCircle";
|
|
961
|
+
import { default as PlusMd } from "./PlusMd";
|
|
954
962
|
import { default as PlusSmall } from "./PlusSmall";
|
|
955
963
|
import { default as PlusSquare } from "./PlusSquare";
|
|
956
964
|
import { default as PriceTag } from "./PriceTag";
|
|
@@ -1052,4 +1060,4 @@ import { default as UserPlusLg } from "./UserPlusLg";
|
|
|
1052
1060
|
import { default as Wphk } from "./Wphk";
|
|
1053
1061
|
import { default as Youtubehk } from "./Youtubehk";
|
|
1054
1062
|
import { default as Youtubewithfooter } from "./Youtubewithfooter";
|
|
1055
|
-
export { Activity, Announcement, ArrowDown, ArrowDownAnimate, ArrowDownBig, ArrowDownCircle, ArrowDownSquare, ArrowGoSmall, ArrowLeft, ArrowLeftAnimate, ArrowLeftBig, ArrowLeftCircle, ArrowLeftSquare, ArrowRight, ArrowRightAnimate, ArrowRightBig, ArrowRightCircle, ArrowRightSquare, ArrowShare, ArrowSharemini, ArrowSmallDown, ArrowSmallDownStroke, ArrowSmallLeft, ArrowSmallLeftStroke, ArrowSmallRight, ArrowSmallRightBackground, ArrowSmallRightStroke, ArrowSmallUp, ArrowUp, ArrowUpAnimate, ArrowUpBig, ArrowUpCircle, ArrowUpSquare, AskedQuestions, Baby, BackCargo2, BackCargosmall, Backcargo, Bag2, Bag, BagCircleFilled, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckMarkMd, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Coffee, Completed, Copy, CreditCard, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, DownloadMini, Dublearrrowrightbig, Edit, EditSquare, ElSatis, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, ForwardMd, Game, Gift, Graph, Heart, HeartLg, Hide, Home, House, Image, InfoCircle, InfoSquare, InfoSquareSmall, Instagram, InstagramNegative, Instagramwithfooter, Keyboard, KeyboardClose, Language2, Laptop, Like, LikeV1, Likesmall, Link, LinkSm, LinkedIn, Loading, LoadingDefault, Loadingsmall, Location, Lock, Login, Logout, MasterCard, Message, Minus, Money, MoneyBig, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PauseMd, PlayMd, PlusBig, PlusCircle, PlusSmall, PlusSquare, PriceTag, Profile, RadioButtonElementChecked, RadioButtonElementDisabled, RadioButtonElementInvalid, RadioButtonElementUnchecked, Rectangle, RectanglePurple, RotateBig, Sandwatch, Scan, Search, Searchsmall, Security, Send, Setting, SettingCircle, ShieldDone, ShieldDoneLg, ShieldFail, Show, ShufflePlay, SignLanguage, Star, StarCircle, Starfull, StarfullSmall, StarfullXSmall, Subcategory, Swap, SwitchPassive, Tamamlarsin, ThumbCircleFilled, Tick, TickMd, TickSquare, TicketStar, Ticket, TimeCircle, TimeCircleMd, TimeSquare, Trash, Twitter, TwitterFilled, Twitterhk, Twitterwithfooter, Unlock, Upload, User2, User3, Valentine, Video, Visa, Voice, Voice2, VolumeDown, VolumeOff, VolumeOffSm, VolumeUp, VolumeUpSm, Wallet, Wallet2, Watch, WaveArrowDown, WaveArrowUp, Whatsapp, Work, Wp, Wpfooter, Youtube, CircleFilled, Clab1, ClabFilled, ClabHands, Dislikesmall, Dublearrowleftbig, Facebookhk, Facebookwithfooter, GiftCard, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, Subscription, TextLoading, Tiktok, UserPlus, UserPlusLg, Wphk, Youtubehk, Youtubewithfooter };
|
|
1063
|
+
export { Activity, Announcement, ArrowDown, ArrowDownAnimate, ArrowDownBig, ArrowDownCircle, ArrowDownSquare, ArrowGoSmall, ArrowLeft, ArrowLeftAnimate, ArrowLeftBig, ArrowLeftCircle, ArrowLeftSquare, ArrowLeftXl, ArrowRight, ArrowRightAnimate, ArrowRightBig, ArrowRightCircle, ArrowRightSquare, ArrowShare, ArrowSharemini, ArrowSmallDown, ArrowSmallDownStroke, ArrowSmallLeft, ArrowSmallLeftStroke, ArrowSmallRight, ArrowSmallRightBackground, ArrowSmallRightStroke, ArrowSmallUp, ArrowUp, ArrowUpAnimate, ArrowUpBig, ArrowUpCircle, ArrowUpSquare, AskedQuestions, Baby, BackCargo2, BackCargosmall, Backcargo, Bag2, Bag, BagCircleFilled, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckMarkMd, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Coffee, Completed, Copy, CreditCard, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, DownloadMini, Dublearrrowrightbig, Edit, EditSquare, ElSatis, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, ForwardMd, Game, Gift, Graph, Heart, HeartLg, Hide, Home, House, Image, InfoCircle, InfoSquare, InfoSquareSmall, Instagram, InstagramNegative, Instagramwithfooter, Keyboard, KeyboardClose, Language2, Laptop, Like, LikeV1, Likesmall, Link, LinkSm, LinkedIn, Loading, LoadingDefault, Loadingsmall, Location, Lock, Login, Logout, MasterCard, Message, Minus, Money, MoneyBig, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PauseMd, PlayMd, PlusBig, PlusCircle, PlusMd, PlusSmall, PlusSquare, PriceTag, Profile, RadioButtonElementChecked, RadioButtonElementDisabled, RadioButtonElementInvalid, RadioButtonElementUnchecked, Rectangle, RectanglePurple, RotateBig, Sandwatch, Scan, Search, Searchsmall, Security, Send, Setting, SettingCircle, ShieldDone, ShieldDoneLg, ShieldFail, Show, ShufflePlay, SignLanguage, Star, StarCircle, Starfull, StarfullSmall, StarfullXSmall, Subcategory, Swap, SwitchPassive, Tamamlarsin, ThumbCircleFilled, Tick, TickMd, TickSquare, TicketStar, Ticket, TimeCircle, TimeCircleMd, TimeSquare, Trash, Twitter, TwitterFilled, Twitterhk, Twitterwithfooter, Unlock, Upload, User2, User3, Valentine, Video, Visa, Voice, Voice2, VolumeDown, VolumeOff, VolumeOffSm, VolumeUp, VolumeUpSm, Wallet, Wallet2, Watch, WaveArrowDown, WaveArrowUp, Whatsapp, Work, Wp, Wpfooter, Youtube, CircleFilled, Clab1, ClabFilled, ClabHands, Dislikesmall, Dublearrowleftbig, Facebookhk, Facebookwithfooter, GiftCard, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, Subscription, TextLoading, Tiktok, UserPlus, UserPlusLg, Wphk, Youtubehk, Youtubewithfooter };
|
|
@@ -25,12 +25,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
25
25
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
26
|
};
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
-
exports.
|
|
29
|
-
exports.
|
|
30
|
-
exports.
|
|
31
|
-
exports.
|
|
32
|
-
exports.
|
|
33
|
-
exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.Subscription = exports.RotateRight = exports.Play = exports.NewYear = exports.More = exports.Live = void 0;
|
|
28
|
+
exports.Calenderarrowrightsmall = exports.CalenderArrowleftsmall = exports.Calendar = exports.BuyXl = exports.Buy = exports.Box = exports.Bookmark = exports.BagStar = exports.BagCircleFilled = exports.Bag = exports.Bag2 = exports.Backcargo = exports.BackCargosmall = exports.BackCargo2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeft = exports.ArrowSmallDownStroke = exports.ArrowSmallDown = exports.ArrowSharemini = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowLeftXl = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGoSmall = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.Announcement = exports.Activity = void 0;
|
|
29
|
+
exports.FilterUp = exports.FilterSmall = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.ElSatis = exports.EditSquare = exports.Edit = exports.Dublearrrowrightbig = exports.DownloadMini = exports.Download = exports.Document = exports.DislikeLg = exports.Dislike = exports.Discovery = exports.Discount = exports.DeleteSmall = exports.Delete = exports.DarkBadge = exports.Danger = exports.CreditCard = exports.Copy = exports.Completed = exports.Coffee = exports.Closebig = exports.CloseSquare = exports.CloseSmall = exports.CloseMedium = exports.ClickOnclick = exports.CihazTeslimAlindi = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMarkMd = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.CarbonNautral = exports.CampaignColorful = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = exports.Call = void 0;
|
|
30
|
+
exports.Operation = exports.NotificationSmallwith24 = exports.NotificationSmallwith16 = exports.NotificationBigwith24 = exports.NotificationBigwith16 = exports.Notification = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.MoneyBig = exports.Money = exports.Minus = exports.Message = exports.MasterCard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loadingsmall = exports.LoadingDefault = exports.Loading = exports.LinkedIn = exports.LinkSm = exports.Link = exports.Likesmall = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.Instagramwithfooter = exports.InstagramNegative = exports.Instagram = exports.InfoSquareSmall = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.HeartLg = exports.Heart = exports.Graph = exports.Gift = exports.Game = exports.ForwardMd = exports.Folder = exports.Flash = void 0;
|
|
31
|
+
exports.Tick = exports.ThumbCircleFilled = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.Subcategory = exports.StarfullXSmall = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDoneLg = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.RotateBig = exports.RectanglePurple = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = exports.PlusMd = exports.PlusCircle = exports.PlusBig = exports.PlayMd = exports.PauseMd = exports.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = void 0;
|
|
32
|
+
exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.GiftCard = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUpSm = exports.VolumeUp = exports.VolumeOffSm = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Valentine = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircleMd = exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.TickMd = void 0;
|
|
33
|
+
exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.Subscription = exports.RotateRight = exports.Play = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = void 0;
|
|
34
34
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
35
35
|
var Activity_1 = __importDefault(require("./Activity"));
|
|
36
36
|
Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
|
|
@@ -58,6 +58,8 @@ var ArrowLeftCircle_1 = __importDefault(require("./ArrowLeftCircle"));
|
|
|
58
58
|
Object.defineProperty(exports, "ArrowLeftCircle", { enumerable: true, get: function () { return ArrowLeftCircle_1.default; } });
|
|
59
59
|
var ArrowLeftSquare_1 = __importDefault(require("./ArrowLeftSquare"));
|
|
60
60
|
Object.defineProperty(exports, "ArrowLeftSquare", { enumerable: true, get: function () { return ArrowLeftSquare_1.default; } });
|
|
61
|
+
var ArrowLeftXl_1 = __importDefault(require("./ArrowLeftXl"));
|
|
62
|
+
Object.defineProperty(exports, "ArrowLeftXl", { enumerable: true, get: function () { return ArrowLeftXl_1.default; } });
|
|
61
63
|
var ArrowRight_1 = __importDefault(require("./ArrowRight"));
|
|
62
64
|
Object.defineProperty(exports, "ArrowRight", { enumerable: true, get: function () { return ArrowRight_1.default; } });
|
|
63
65
|
var ArrowRightAnimate_1 = __importDefault(require("./ArrowRightAnimate"));
|
|
@@ -356,6 +358,8 @@ var PlusBig_1 = __importDefault(require("./PlusBig"));
|
|
|
356
358
|
Object.defineProperty(exports, "PlusBig", { enumerable: true, get: function () { return PlusBig_1.default; } });
|
|
357
359
|
var PlusCircle_1 = __importDefault(require("./PlusCircle"));
|
|
358
360
|
Object.defineProperty(exports, "PlusCircle", { enumerable: true, get: function () { return PlusCircle_1.default; } });
|
|
361
|
+
var PlusMd_1 = __importDefault(require("./PlusMd"));
|
|
362
|
+
Object.defineProperty(exports, "PlusMd", { enumerable: true, get: function () { return PlusMd_1.default; } });
|
|
359
363
|
var PlusSmall_1 = __importDefault(require("./PlusSmall"));
|
|
360
364
|
Object.defineProperty(exports, "PlusSmall", { enumerable: true, get: function () { return PlusSmall_1.default; } });
|
|
361
365
|
var PlusSquare_1 = __importDefault(require("./PlusSquare"));
|
|
@@ -611,6 +615,10 @@ exports.iconList = {
|
|
|
611
615
|
var props = __rest(_a, []);
|
|
612
616
|
return (0, jsx_runtime_1.jsx)(ArrowLeftSquare_1.default, __assign({}, props));
|
|
613
617
|
},
|
|
618
|
+
ArrowLeftXl: function (_a) {
|
|
619
|
+
var props = __rest(_a, []);
|
|
620
|
+
return (0, jsx_runtime_1.jsx)(ArrowLeftXl_1.default, __assign({}, props));
|
|
621
|
+
},
|
|
614
622
|
ArrowRight: function (_a) {
|
|
615
623
|
var props = __rest(_a, []);
|
|
616
624
|
return (0, jsx_runtime_1.jsx)(ArrowRight_1.default, __assign({}, props));
|
|
@@ -1207,6 +1215,10 @@ exports.iconList = {
|
|
|
1207
1215
|
var props = __rest(_a, []);
|
|
1208
1216
|
return (0, jsx_runtime_1.jsx)(PlusCircle_1.default, __assign({}, props));
|
|
1209
1217
|
},
|
|
1218
|
+
PlusMd: function (_a) {
|
|
1219
|
+
var props = __rest(_a, []);
|
|
1220
|
+
return (0, jsx_runtime_1.jsx)(PlusMd_1.default, __assign({}, props));
|
|
1221
|
+
},
|
|
1210
1222
|
PlusSmall: function (_a) {
|
|
1211
1223
|
var props = __rest(_a, []);
|
|
1212
1224
|
return (0, jsx_runtime_1.jsx)(PlusSmall_1.default, __assign({}, props));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { InputProps } from "./props";
|
|
3
|
-
declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, onCalendarOpen, maxLength, ...other }: InputProps) => React.JSX.Element;
|
|
3
|
+
declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, onCalendarOpen, maxLength, showMaxLengthCounter, description, ...other }: InputProps) => React.JSX.Element;
|
|
4
4
|
export default Input;
|
|
@@ -29,7 +29,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
29
29
|
var react_1 = require("react");
|
|
30
30
|
var props_1 = require("./props");
|
|
31
31
|
var Input_styled_1 = require("./Input.styled");
|
|
32
|
-
var classnames_1 = __importDefault(require("classnames"));
|
|
33
32
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
34
33
|
var TextLink_1 = __importDefault(require("../TextLink"));
|
|
35
34
|
var react_number_format_1 = require("react-number-format");
|
|
@@ -40,13 +39,12 @@ var i18n_1 = __importDefault(require("../../i18n/i18n"));
|
|
|
40
39
|
var locale_1 = require("date-fns/locale");
|
|
41
40
|
var date_fns_1 = require("date-fns");
|
|
42
41
|
var Input = function (_a) {
|
|
43
|
-
var _b;
|
|
44
|
-
var
|
|
45
|
-
var
|
|
46
|
-
var
|
|
47
|
-
var
|
|
48
|
-
var
|
|
49
|
-
var _11 = (0, react_1.useState)(function () {
|
|
42
|
+
var _b = _a.hasError, hasError = _b === void 0 ? props_1.InputDefault.hasError : _b, _c = _a.disabled, disabled = _c === void 0 ? props_1.InputDefault.disabled : _c, _d = _a.label, label = _d === void 0 ? props_1.InputDefault.label : _d, _e = _a.customLinkText, customLinkText = _e === void 0 ? props_1.InputDefault.customLinkText : _e, _f = _a.customLinkHref, customLinkHref = _f === void 0 ? props_1.InputDefault.customLinkHref : _f, _g = _a.onCustomLinkClick, onCustomLinkClick = _g === void 0 ? props_1.InputDefault.onCustomLinkClick : _g, _h = _a.onChange, onChange = _h === void 0 ? props_1.InputDefault.onChange : _h, _j = _a.errorMessage, errorMessage = _j === void 0 ? props_1.InputDefault.errorMessage : _j, _k = _a.type, type = _k === void 0 ? props_1.InputDefault.type : _k, _l = _a.name, name = _l === void 0 ? props_1.InputDefault.name : _l, _m = _a.width, width = _m === void 0 ? props_1.InputDefault.width : _m, _o = _a.mask, mask = _o === void 0 ? props_1.InputDefault.mask : _o, _p = _a.placeholder, placeholder = _p === void 0 ? props_1.InputDefault.placeholder : _p, _q = _a.hasCopyButton, hasCopyButton = _q === void 0 ? props_1.InputDefault.hasCopyButton : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.InputDefault.readOnly : _r, _s = _a.autoFocus, autoFocus = _s === void 0 ? props_1.InputDefault.autoFocus : _s, value = _a.value, _t = _a.format, format = _t === void 0 ? props_1.InputDefault.format : _t, _u = _a.visible, visible = _u === void 0 ? props_1.InputDefault.visible : _u, _v = _a.infoText, infoText = _v === void 0 ? props_1.InputDefault.infoText : _v, _w = _a.id, id = _w === void 0 ? props_1.InputDefault.id : _w, _x = _a.isClearable, isClearable = _x === void 0 ? props_1.InputDefault.isClearable : _x, _y = _a.onClear, onClear = _y === void 0 ? props_1.InputDefault.onClear : _y, _z = _a.hasNumericFormat, hasNumericFormat = _z === void 0 ? props_1.InputDefault.hasNumericFormat : _z, _0 = _a.inline, inline = _0 === void 0 ? props_1.InputDefault.inline : _0, _1 = _a.minDate, minDate = _1 === void 0 ? props_1.InputDefault.minDate : _1, _2 = _a.maxDate, maxDate = _2 === void 0 ? props_1.InputDefault.maxDate : _2, _3 = _a.filterDate, filterDate = _3 === void 0 ? props_1.InputDefault.filterDate : _3, _4 = _a.onCalendarOpen, onCalendarOpen = _4 === void 0 ? props_1.InputDefault.onCalendarOpen : _4, _5 = _a.maxLength, maxLength = _5 === void 0 ? props_1.InputDefault.maxLength : _5, _6 = _a.showMaxLengthCounter, showMaxLengthCounter = _6 === void 0 ? props_1.InputDefault.showMaxLengthCounter : _6, _7 = _a.description, description = _7 === void 0 ? props_1.InputDefault.description : _7, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate", "onCalendarOpen", "maxLength", "showMaxLengthCounter", "description"]);
|
|
43
|
+
var _8 = (0, react_1.useState)(type), inputType = _8[0], setInputType = _8[1];
|
|
44
|
+
var _9 = (0, react_1.useState)(false), alert = _9[0], setAlert = _9[1];
|
|
45
|
+
var _10 = (0, react_1.useState)(value), inputValue = _10[0], setInputValue = _10[1];
|
|
46
|
+
var _11 = (0, react_1.useState)(false), isCalendarOpen = _11[0], setIsCalendarOpen = _11[1];
|
|
47
|
+
var _12 = (0, react_1.useState)(function () {
|
|
50
48
|
if (!value)
|
|
51
49
|
return null;
|
|
52
50
|
// Eğer format "dd.MM.yyyy" gibi bir format ise, parse et
|
|
@@ -59,8 +57,11 @@ var Input = function (_a) {
|
|
|
59
57
|
}
|
|
60
58
|
}
|
|
61
59
|
return new Date(value);
|
|
62
|
-
}), startDate =
|
|
60
|
+
}), startDate = _12[0], setStartDate = _12[1];
|
|
63
61
|
var inputRef = (0, react_1.useRef)(null);
|
|
62
|
+
var datePickerRef = (0, react_1.useRef)(null);
|
|
63
|
+
var dateInputRef = (0, react_1.useRef)(null);
|
|
64
|
+
var dateBlurTimeoutRef = (0, react_1.useRef)([]);
|
|
64
65
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
65
66
|
var language = i18n_1.default.language;
|
|
66
67
|
(0, react_1.useEffect)(function () {
|
|
@@ -103,26 +104,62 @@ var Input = function (_a) {
|
|
|
103
104
|
setAlert(true);
|
|
104
105
|
inputRef.current.blur();
|
|
105
106
|
};
|
|
106
|
-
var
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
107
|
+
var mergeInputRefs = function () {
|
|
108
|
+
var refs = [];
|
|
109
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
110
|
+
refs[_i] = arguments[_i];
|
|
111
|
+
}
|
|
112
|
+
return function (node) {
|
|
113
|
+
refs.forEach(function (ref) {
|
|
114
|
+
if (!ref)
|
|
115
|
+
return;
|
|
116
|
+
if (typeof ref === "function") {
|
|
117
|
+
ref(node);
|
|
118
|
+
}
|
|
119
|
+
else {
|
|
120
|
+
ref.current = node;
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
};
|
|
124
|
+
};
|
|
125
|
+
var clearScheduledDateBlur = function () {
|
|
126
|
+
dateBlurTimeoutRef.current.forEach(function (timeoutId) { return window.clearTimeout(timeoutId); });
|
|
127
|
+
dateBlurTimeoutRef.current = [];
|
|
128
|
+
};
|
|
129
|
+
var blurDateInputAfterSelect = (0, react_1.useCallback)(function () {
|
|
130
|
+
if (inline)
|
|
131
|
+
return;
|
|
132
|
+
clearScheduledDateBlur();
|
|
133
|
+
var blur = function () {
|
|
134
|
+
var _a, _b, _c, _d, _e, _f;
|
|
135
|
+
(_b = (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setBlur) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
136
|
+
(_c = dateInputRef.current) === null || _c === void 0 ? void 0 : _c.blur();
|
|
137
|
+
(_f = (_e = (_d = datePickerRef.current) === null || _d === void 0 ? void 0 : _d.input) === null || _e === void 0 ? void 0 : _e.blur) === null || _f === void 0 ? void 0 : _f.call(_e);
|
|
138
|
+
};
|
|
139
|
+
[0, 10, 50].forEach(function (delay) {
|
|
140
|
+
var timeoutId = window.setTimeout(blur, delay);
|
|
141
|
+
dateBlurTimeoutRef.current.push(timeoutId);
|
|
142
|
+
});
|
|
143
|
+
}, [inline]);
|
|
144
|
+
(0, react_1.useEffect)(function () { return function () { return clearScheduledDateBlur(); }; }, []);
|
|
145
|
+
var CustomDateInput = (0, react_1.useMemo)(function () {
|
|
146
|
+
return (0, react_1.forwardRef)(function (props, ref) {
|
|
147
|
+
var displayValue = '';
|
|
148
|
+
if (props.value && format) {
|
|
149
|
+
try {
|
|
150
|
+
var date = (0, date_fns_1.parse)(props.value, "yyyy-MM-dd", new Date());
|
|
151
|
+
displayValue = (0, date_fns_1.format)(date, format);
|
|
152
|
+
}
|
|
153
|
+
catch (_a) {
|
|
154
|
+
displayValue = inputValue || '';
|
|
155
|
+
}
|
|
115
156
|
}
|
|
116
|
-
|
|
117
|
-
// Parse edilemezse inputValue'yu kullan
|
|
157
|
+
else {
|
|
118
158
|
displayValue = inputValue || '';
|
|
119
159
|
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
}
|
|
124
|
-
return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: ref, "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText, "$isCalendarOpen": isCalendarOpen }, props, { value: displayValue })));
|
|
125
|
-
});
|
|
160
|
+
return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: mergeInputRefs(ref, dateInputRef), "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText, "$isCalendarOpen": isCalendarOpen }, props, { value: displayValue })));
|
|
161
|
+
});
|
|
162
|
+
}, [format, hasCopyButton, hasError, infoText, inputValue, isCalendarOpen, isClearable, type]);
|
|
126
163
|
var handleClearValue = function () {
|
|
127
164
|
setInputValue(null);
|
|
128
165
|
inputRef.current.value = null;
|
|
@@ -131,8 +168,11 @@ var Input = function (_a) {
|
|
|
131
168
|
if (onClear)
|
|
132
169
|
onClear();
|
|
133
170
|
};
|
|
134
|
-
|
|
135
|
-
|
|
171
|
+
var currentLength = (inputValue !== null && inputValue !== void 0 ? inputValue : '').length;
|
|
172
|
+
var showCharCount = showMaxLengthCounter && maxLength != null;
|
|
173
|
+
var showTopRow = Boolean(label || customLinkText || showCharCount);
|
|
174
|
+
return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [showTopRow && ((0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTop, { children: [label ? (0, jsx_runtime_1.jsx)(Input_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })) : (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTopActions, { children: [showCharCount && ((0, jsx_runtime_1.jsxs)(Input_styled_1.CharCount, { children: [currentLength, "/", maxLength] })), customLinkText && ((0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText })))] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { customInput: Input_styled_1.InputStyled, id: id }))) : ((mask && format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id })))
|
|
175
|
+
: type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, { placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: function (date) {
|
|
136
176
|
if (date) {
|
|
137
177
|
setStartDate(date);
|
|
138
178
|
// DatePicker'dan gelen Date objesini format'a göre formatla
|
|
@@ -145,23 +185,24 @@ var Input = function (_a) {
|
|
|
145
185
|
setInputValue(null);
|
|
146
186
|
onChange(null);
|
|
147
187
|
}
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
}, 10);
|
|
152
|
-
}, selected: startDate, ref: inputRef, dateFormat: "yyyy-MM-dd", locale: language === "tr" ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}),
|
|
188
|
+
}, onSelect: function () {
|
|
189
|
+
blurDateInputAfterSelect();
|
|
190
|
+
}, selected: startDate, ref: datePickerRef, dateFormat: "yyyy-MM-dd", locale: language === "tr" ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}),
|
|
153
191
|
//customInput={<InputStyled $hasError={hasError} id={id}/>}
|
|
154
192
|
inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, onCalendarOpen: function () {
|
|
155
193
|
setIsCalendarOpen(true);
|
|
156
194
|
if (onCalendarOpen) {
|
|
157
195
|
onCalendarOpen();
|
|
158
196
|
}
|
|
159
|
-
}, onCalendarClose: function () {
|
|
197
|
+
}, onCalendarClose: function () {
|
|
198
|
+
setIsCalendarOpen(false);
|
|
199
|
+
blurDateInputAfterSelect();
|
|
200
|
+
}, onBlur: function () { return setIsCalendarOpen(false); }, renderCustomHeader: function (_a) {
|
|
160
201
|
var monthDate = _a.monthDate, customHeaderCount = _a.customHeaderCount, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, nextYearButtonDisabled = _a.nextYearButtonDisabled;
|
|
161
202
|
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "headerTopContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Year", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseYear, type: "button", disabled: prevYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CalenderArrowleftsmall" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Month", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseMonth, type: "button", disabled: prevMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) }))] })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "react-datepicker__current-month" }, { children: [monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { month: "long" }), ", ", monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { year: "numeric" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Month", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseMonth, type: "button", disabled: nextMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Year", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseYear, type: "button", disabled: nextYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Calenderarrowrightsmall" }) }))] }))] })));
|
|
162
203
|
} }) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
|
|
163
204
|
onChange(e);
|
|
164
205
|
setInputValue(e.currentTarget.value);
|
|
165
|
-
}, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other)))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
|
|
206
|
+
}, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, other)))), (isClearable && inputValue) ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : (type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : (type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })))))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)("div", { className: "popupText", dangerouslySetInnerHTML: { __html: infoText } }) })) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description }), hasError && errorMessage && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))] }));
|
|
166
207
|
};
|
|
167
208
|
exports.default = Input;
|
|
@@ -2,5 +2,10 @@
|
|
|
2
2
|
import { ContainerProps, InputStyledProps } from "./props";
|
|
3
3
|
export declare const AlertStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never>>> & string;
|
|
4
4
|
export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never>>> & string;
|
|
5
|
+
export declare const FieldTop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
6
|
+
export declare const FieldTopActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
7
|
+
export declare const FieldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
|
|
8
|
+
export declare const CharCount: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
|
|
9
|
+
export declare const FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
|
|
5
10
|
export declare const InputStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputStyledProps> & InputStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputStyledProps> & InputStyledProps, never>>> & string;
|
|
6
11
|
export declare const DatePickerWrapperStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof InputStyledProps> & InputStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof InputStyledProps> & InputStyledProps, never>>> & string;
|
|
@@ -7,11 +7,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.DatePickerWrapperStyled = exports.InputStyled = exports.Container = exports.AlertStyled = void 0;
|
|
10
|
+
exports.DatePickerWrapperStyled = exports.InputStyled = exports.FieldDescription = exports.CharCount = exports.FieldLabel = exports.FieldTopActions = exports.FieldTop = exports.Container = exports.AlertStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font: var(--caption-medium-10-12);\n"], ["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font: var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
|
|
13
|
-
exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n
|
|
14
|
-
exports.
|
|
13
|
+
exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n &.hasNoCursor {\n user-select: none;\n pointer-events: none;\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 16px;\n right: 1rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n\n .popupText {\n font: var(--caption-semi-bold-11-13);\n text-align: center;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n &.hasNoCursor {\n user-select: none;\n pointer-events: none;\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 16px;\n right: 1rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n\n .popupText {\n font: var(--caption-semi-bold-11-13);\n text-align: center;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n"])), function (props) { return props.$width || '370px'; });
|
|
14
|
+
exports.FieldTop = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n margin-bottom: 16px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n margin-bottom: 16px;\n"])));
|
|
15
|
+
exports.FieldTopActions = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 1rem;\n margin-left: auto;\n"], ["\n display: flex;\n align-items: center;\n gap: 1rem;\n margin-left: auto;\n"])));
|
|
16
|
+
exports.FieldLabel = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n font: var(--caption-bold-12-15);\n"], ["\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n font: var(--caption-bold-12-15);\n"])));
|
|
17
|
+
exports.CharCount = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: 0;\n color: var(--dark-opacity-50);\n font: var(--caption-bold-12-15);\n white-space: nowrap;\n"], ["\n margin: 0;\n color: var(--dark-opacity-50);\n font: var(--caption-bold-12-15);\n white-space: nowrap;\n"])));
|
|
18
|
+
exports.FieldDescription = styled_components_1.default.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin: 0.5rem 0 0;\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n"], ["\n margin: 0.5rem 0 0;\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n"])));
|
|
19
|
+
exports.InputStyled = styled_components_1.default.input(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) {
|
|
15
20
|
if (props.disabled)
|
|
16
21
|
return 'var(--dark-opacity-5)';
|
|
17
22
|
if (props.$isCalendarOpen || props.$hasError)
|
|
@@ -27,5 +32,5 @@ exports.InputStyled = styled_components_1.default.input(templateObject_3 || (tem
|
|
|
27
32
|
return '18.5px 23px';
|
|
28
33
|
return '19.5px 24px';
|
|
29
34
|
}, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasIcon ? 'padding-right: 45px !important;' : ''; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
|
|
30
|
-
exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n margin-bottom: 1.5rem;\n background-color: white;\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n text-align: center;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n padding: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n text-align: center;\n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"], [";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n margin-bottom: 1.5rem;\n background-color: white;\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n text-align: center;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n padding: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n text-align: center;\n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
|
|
31
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
35
|
+
exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject([";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n margin-bottom: 1.5rem;\n background-color: white;\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n text-align: center;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n padding: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n text-align: center;\n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"], [";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n margin-bottom: 1.5rem;\n background-color: white;\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n text-align: center;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n padding: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n text-align: center;\n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
|
|
36
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
@@ -35,6 +35,12 @@ declare const _default: {
|
|
|
35
35
|
maxLength: {
|
|
36
36
|
control: string;
|
|
37
37
|
};
|
|
38
|
+
showMaxLengthCounter: {
|
|
39
|
+
control: string;
|
|
40
|
+
};
|
|
41
|
+
description: {
|
|
42
|
+
control: string;
|
|
43
|
+
};
|
|
38
44
|
};
|
|
39
45
|
};
|
|
40
46
|
export default _default;
|
|
@@ -399,3 +405,14 @@ export declare const ErrorWithCustomLink: {
|
|
|
399
405
|
onChange: (e: any) => void;
|
|
400
406
|
};
|
|
401
407
|
};
|
|
408
|
+
export declare const WithMaxLengthAndDescription: {
|
|
409
|
+
render: (args: any) => React.JSX.Element;
|
|
410
|
+
args: {
|
|
411
|
+
label: string;
|
|
412
|
+
placeholder: string;
|
|
413
|
+
maxLength: number;
|
|
414
|
+
showMaxLengthCounter: boolean;
|
|
415
|
+
description: string;
|
|
416
|
+
id: string;
|
|
417
|
+
};
|
|
418
|
+
};
|
|
@@ -14,8 +14,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.NumericFormat = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.Default = void 0;
|
|
17
|
+
exports.WithMaxLengthAndDescription = exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.NumericFormat = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.Default = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
var react_1 = __importDefault(require("react"));
|
|
19
20
|
var Input_1 = __importDefault(require("../Input"));
|
|
20
21
|
exports.default = {
|
|
21
22
|
title: 'Components/Input',
|
|
@@ -32,6 +33,8 @@ exports.default = {
|
|
|
32
33
|
onCustomLinkClick: { action: 'clicked' },
|
|
33
34
|
type: { control: 'select', options: ["text", "number", "password", "date", "email", "tel"] },
|
|
34
35
|
maxLength: { control: 'number' },
|
|
36
|
+
showMaxLengthCounter: { control: 'boolean' },
|
|
37
|
+
description: { control: 'text' },
|
|
35
38
|
}
|
|
36
39
|
};
|
|
37
40
|
exports.Default = {
|
|
@@ -445,3 +448,19 @@ exports.ErrorWithCustomLink = {
|
|
|
445
448
|
}
|
|
446
449
|
},
|
|
447
450
|
};
|
|
451
|
+
var InputWithMaxLengthStory = function (args) {
|
|
452
|
+
var _a;
|
|
453
|
+
var _b = react_1.default.useState((_a = args.value) !== null && _a !== void 0 ? _a : ""), value = _b[0], setValue = _b[1];
|
|
454
|
+
return ((0, jsx_runtime_1.jsx)(Input_1.default, __assign({}, args, { value: value, onChange: function (e) { return setValue(e.target.value); } })));
|
|
455
|
+
};
|
|
456
|
+
exports.WithMaxLengthAndDescription = {
|
|
457
|
+
render: function (args) { return (0, jsx_runtime_1.jsx)(InputWithMaxLengthStory, __assign({}, args)); },
|
|
458
|
+
args: {
|
|
459
|
+
label: "Kısa açıklama gir",
|
|
460
|
+
placeholder: "Kısa açıklama yaz",
|
|
461
|
+
maxLength: 60,
|
|
462
|
+
showMaxLengthCounter: true,
|
|
463
|
+
description: "Ürün adının altında, ürün kartlarında ve sepete ekleme modalında görünür.",
|
|
464
|
+
id: "input_max_length_description",
|
|
465
|
+
},
|
|
466
|
+
};
|
|
@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
13
|
exports.BadgeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n"], ["\n margin: 0 auto 1rem 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n text-align: right;\n height: 17px;\n\n > * {\n vertical-align: super;\n display: inline-block;\n }\n"])));
|
|
14
14
|
exports.ProductCardCheckboxContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n ", "\n\n > label > div {\n margin-right: 24px;\n\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n"], ["\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n ", "\n\n > label > div {\n margin-right: 24px;\n\n @media only screen and ", " {\n margin-right: 8px;\n width: 16px;\n height: 16px;\n }\n }\n"])), function (props) { return props.$hidden && "display: none;"; }, devices_1.devices.md);
|
|
15
|
-
exports.ProductCardImg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100
|
|
15
|
+
exports.ProductCardImg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0.375rem;\n width: calc(100% - 0.75rem);\n height: calc(100% - 0.75rem);\n object-fit: cover;\n object-position: center center;\n border-radius: 0.5rem;\n }\n"], ["\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0.375rem;\n width: calc(100% - 0.75rem);\n height: calc(100% - 0.75rem);\n object-fit: cover;\n object-position: center center;\n border-radius: 0.5rem;\n }\n"])));
|
|
16
16
|
exports.ProductCardText = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
17
17
|
exports.ProductCardTitle = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n"], ["\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n\n @media only screen and ", " {\n font: var(--body-semi-bold-14-17);\n }\n"])), function (props) { return props.$size === "small" ? "var(--body-semi-bold-14-17)" : "var(--title-semi-bold-16-19)"; }, devices_1.devices.md);
|
|
18
18
|
exports.TooltipWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n"], ["\n user-select: initial !important;\n pointer-events: initial !important;\n padding-left: 1rem;\n"])));
|