@iamgld/ui 21.2.0 → 21.3.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/fesm2022/iamgld-ui.mjs +198 -198
- package/fesm2022/iamgld-ui.mjs.map +1 -1
- package/package.json +6 -6
package/fesm2022/iamgld-ui.mjs
CHANGED
|
@@ -205,9 +205,9 @@ class Icon {
|
|
|
205
205
|
constructor() {
|
|
206
206
|
this.IconsSpace = IconsSpace;
|
|
207
207
|
this.Icons = Icons;
|
|
208
|
-
this.icon = input.required(
|
|
209
|
-
this.size = input(IconsSize.normal,
|
|
210
|
-
this.space = input(IconsSpace.none,
|
|
208
|
+
this.icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
209
|
+
this.size = input(IconsSize.normal, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
210
|
+
this.space = input(IconsSpace.none, ...(ngDevMode ? [{ debugName: "space" }] : []));
|
|
211
211
|
this.moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
|
|
212
212
|
this.moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
|
|
213
213
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
@@ -220,10 +220,10 @@ class Icon {
|
|
|
220
220
|
keyup() {
|
|
221
221
|
this.emitClick();
|
|
222
222
|
}
|
|
223
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
224
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: Icon, isStandalone: true, selector: "gld-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span\n tabindex=\"-1\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n class=\"icon icon--{{ size() }}\"\n [class.icon--left]=\"space() === IconsSpace.left\"\n [class.icon--right]=\"space() === IconsSpace.right\"\n [style.right.px]=\"moveLeftToRight()\"\n [style.top.px]=\"moveTopToBottom()\">\n @switch (icon()) {\n @case (Icons.arrowDownSLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"></path>\n </svg>\n }\n @case (Icons.arrowUpSLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"></path>\n </svg>\n }\n @case (Icons.checkboxCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z\"></path>\n </svg>\n }\n @case (Icons.checkboxBlankCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z\"></path>\n </svg>\n }\n @case (Icons.loader4Fill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z\"></path>\n </svg>\n }\n @case (Icons.logoutCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 11H13V13H5V16L0 12L5 8V11ZM3.99927 18H6.70835C8.11862 19.2447 9.97111 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.97111 4 8.11862 4.75527 6.70835 6H3.99927C5.82368 3.57111 8.72836 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.72836 22 5.82368 20.4289 3.99927 18Z\"></path>\n </svg>\n }\n @case (Icons.loginCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M10 11V8L15 12L10 16V13H1V11H10ZM2.4578 15H4.58152C5.76829 17.9318 8.64262 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C8.64262 4 5.76829 6.06817 4.58152 9H2.4578C3.73207 4.94289 7.52236 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C7.52236 22 3.73207 19.0571 2.4578 15Z\"></path>\n </svg>\n }\n @case (Icons.gitRepositoryLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13 21V23.5L10 21.5L7 23.5V21H6.5C4.567 21 3 19.433 3 17.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V20C21 20.5523 20.5523 21 20 21H13ZM13 19H19V16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19H7V17H13V19ZM19 14V4H6V14.0354C6.1633 14.0121 6.33024 14 6.5 14H19ZM7 5H9V7H7V5ZM7 8H9V10H7V8ZM7 11H9V13H7V11Z\"></path>\n </svg>\n }\n @case (Icons.fileList3Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V15H22V19C22 20.6569 20.6569 22 19 22ZM18 17V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V17H18ZM16 20V4H4V19C4 19.5523 4.44772 20 5 20H16ZM6 7H14V9H6V7ZM6 11H14V13H6V11ZM6 15H11V17H6V15Z\"></path>\n </svg>\n }\n @case (Icons.menuLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z\"></path>\n </svg>\n }\n @case (Icons.sunLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z\"></path>\n </svg>\n }\n @case (Icons.moonClearLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M10 6C10 10.4183 13.5817 14 18 14C19.4386 14 20.7885 13.6203 21.9549 12.9556C21.4738 18.0302 17.2005 22 12 22C6.47715 22 2 17.5228 2 12C2 6.79948 5.9698 2.52616 11.0444 2.04507C10.3797 3.21152 10 4.56142 10 6ZM4 12C4 16.4183 7.58172 20 12 20C14.9654 20 17.5757 18.3788 18.9571 15.9546C18.6407 15.9848 18.3214 16 18 16C12.4772 16 8 11.5228 8 6C8 5.67863 8.01524 5.35933 8.04536 5.04293C5.62119 6.42426 4 9.03458 4 12ZM18.1642 2.29104L19 2.5V3.5L18.1642 3.70896C17.4476 3.8881 16.8881 4.4476 16.709 5.16417L16.5 6H15.5L15.291 5.16417C15.1119 4.4476 14.5524 3.8881 13.8358 3.70896L13 3.5V2.5L13.8358 2.29104C14.5524 2.1119 15.1119 1.5524 15.291 0.835829L15.5 0H16.5L16.709 0.835829C16.8881 1.5524 17.4476 2.1119 18.1642 2.29104ZM23.1642 7.29104L24 7.5V8.5L23.1642 8.70896C22.4476 8.8881 21.8881 9.4476 21.709 10.1642L21.5 11H20.5L20.291 10.1642C20.1119 9.4476 19.5524 8.8881 18.8358 8.70896L18 8.5V7.5L18.8358 7.29104C19.5524 7.1119 20.1119 6.5524 20.291 5.83583L20.5 5H21.5L21.709 5.83583C21.8881 6.5524 22.4476 7.1119 23.1642 7.29104Z\"></path>\n </svg>\n }\n @case (Icons.englishInput) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M14 10H16L16.0005 10.7574C16.7154 10.279 17.5751 10 18.5 10C20.9853 10 23 12.0147 23 14.5V20H21V14.5C21 13.07 19.8255 12 18.5 12C17.1745 12 16 13.07 16 14.5V20H14V10ZM12 4V6H4V11H12V13H4V18H12V20H2V4H12Z\"></path>\n </svg>\n }\n @case (Icons.translate) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 15V17C5 18.0544 5.81588 18.9182 6.85074 18.9945L7 19H10V21H7C4.79086 21 3 19.2091 3 17V15H5ZM18 10L22.4 21H20.245L19.044 18H14.954L13.755 21H11.601L16 10H18ZM17 12.8852L15.753 16H18.245L17 12.8852ZM8 2V4H12V11H8V14H6V11H2V4H6V2H8ZM17 3C19.2091 3 21 4.79086 21 7V9H19V7C19 5.89543 18.1046 5 17 5H14V3H17ZM6 6H4V9H6V6ZM10 6H8V9H10V6Z\"></path>\n </svg>\n }\n @case (Icons.user4Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 20H19V22H5V20ZM12 18C7.58172 18 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 14.4183 16.4183 18 12 18ZM12 16C15.3137 16 18 13.3137 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 13.3137 8.68629 16 12 16Z\"></path>\n </svg>\n }\n @case (Icons.shapesLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9998 1L6 11H18L11.9998 1ZM11.9998 4.8873L14.4676 9H9.53232L11.9998 4.8873ZM6.75 20C5.23122 20 4 18.7688 4 17.25C4 15.7312 5.23122 14.5 6.75 14.5C8.26878 14.5 9.5 15.7312 9.5 17.25C9.5 18.7688 8.26878 20 6.75 20ZM6.75 22C9.37335 22 11.5 19.8734 11.5 17.25C11.5 14.6266 9.37335 12.5 6.75 12.5C4.12665 12.5 2 14.6266 2 17.25C2 19.8734 4.12665 22 6.75 22ZM15 15.5V19.5H19V15.5H15ZM13 21.5V13.5H21V21.5H13Z\"></path>\n </svg>\n }\n @case (Icons.closeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z\"></path>\n </svg>\n }\n @case (Icons.eyeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"></path>\n </svg>\n }\n @case (Icons.eyeCloseLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M9.34268 18.7819L7.41083 18.2642L8.1983 15.3254C7.00919 14.8874 5.91661 14.2498 4.96116 13.4534L2.80783 15.6067L1.39362 14.1925L3.54695 12.0392C2.35581 10.6103 1.52014 8.87466 1.17578 6.96818L3.14386 6.61035C3.90289 10.8126 7.57931 14.0001 12.0002 14.0001C16.4211 14.0001 20.0976 10.8126 20.8566 6.61035L22.8247 6.96818C22.4803 8.87466 21.6446 10.6103 20.4535 12.0392L22.6068 14.1925L21.1926 15.6067L19.0393 13.4534C18.0838 14.2498 16.9912 14.8874 15.8021 15.3254L16.5896 18.2642L14.6578 18.7819L13.87 15.8418C13.2623 15.9459 12.6376 16.0001 12.0002 16.0001C11.3629 16.0001 10.7381 15.9459 10.1305 15.8418L9.34268 18.7819Z\"></path>\n </svg>\n }\n @case (Icons.linkedinBoxFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z\"></path>\n </svg>\n }\n @case (Icons.githubFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z\"></path>\n </svg>\n }\n @case (Icons.instagramFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13.0281 2.00073C14.1535 2.00259 14.7238 2.00855 15.2166 2.02322L15.4107 2.02956C15.6349 2.03753 15.8561 2.04753 16.1228 2.06003C17.1869 2.1092 17.9128 2.27753 18.5503 2.52503C19.2094 2.7792 19.7661 3.12253 20.3219 3.67837C20.8769 4.2342 21.2203 4.79253 21.4753 5.45003C21.7219 6.0867 21.8903 6.81337 21.9403 7.87753C21.9522 8.1442 21.9618 8.3654 21.9697 8.58964L21.976 8.78373C21.9906 9.27647 21.9973 9.84686 21.9994 10.9723L22.0002 11.7179C22.0003 11.809 22.0003 11.903 22.0003 12L22.0002 12.2821L21.9996 13.0278C21.9977 14.1532 21.9918 14.7236 21.9771 15.2163L21.9707 15.4104C21.9628 15.6347 21.9528 15.8559 21.9403 16.1225C21.8911 17.1867 21.7219 17.9125 21.4753 18.55C21.2211 19.2092 20.8769 19.7659 20.3219 20.3217C19.7661 20.8767 19.2069 21.22 18.5503 21.475C17.9128 21.7217 17.1869 21.89 16.1228 21.94C15.8561 21.9519 15.6349 21.9616 15.4107 21.9694L15.2166 21.9757C14.7238 21.9904 14.1535 21.997 13.0281 21.9992L12.2824 22C12.1913 22 12.0973 22 12.0003 22L11.7182 22L10.9725 21.9993C9.8471 21.9975 9.27672 21.9915 8.78397 21.9768L8.58989 21.9705C8.36564 21.9625 8.14444 21.9525 7.87778 21.94C6.81361 21.8909 6.08861 21.7217 5.45028 21.475C4.79194 21.2209 4.23444 20.8767 3.67861 20.3217C3.12278 19.7659 2.78028 19.2067 2.52528 18.55C2.27778 17.9125 2.11028 17.1867 2.06028 16.1225C2.0484 15.8559 2.03871 15.6347 2.03086 15.4104L2.02457 15.2163C2.00994 14.7236 2.00327 14.1532 2.00111 13.0278L2.00098 10.9723C2.00284 9.84686 2.00879 9.27647 2.02346 8.78373L2.02981 8.58964C2.03778 8.3654 2.04778 8.1442 2.06028 7.87753C2.10944 6.81253 2.27778 6.08753 2.52528 5.45003C2.77944 4.7917 3.12278 4.2342 3.67861 3.67837C4.23444 3.12253 4.79278 2.78003 5.45028 2.52503C6.08778 2.27753 6.81278 2.11003 7.87778 2.06003C8.14444 2.04816 8.36564 2.03847 8.58989 2.03062L8.78397 2.02433C9.27672 2.00969 9.8471 2.00302 10.9725 2.00086L13.0281 2.00073ZM12.0003 7.00003C9.23738 7.00003 7.00028 9.23956 7.00028 12C7.00028 14.7629 9.23981 17 12.0003 17C14.7632 17 17.0003 14.7605 17.0003 12C17.0003 9.23713 14.7607 7.00003 12.0003 7.00003ZM12.0003 9.00003C13.6572 9.00003 15.0003 10.3427 15.0003 12C15.0003 13.6569 13.6576 15 12.0003 15C10.3434 15 9.00028 13.6574 9.00028 12C9.00028 10.3431 10.3429 9.00003 12.0003 9.00003ZM17.2503 5.50003C16.561 5.50003 16.0003 6.05994 16.0003 6.74918C16.0003 7.43843 16.5602 7.9992 17.2503 7.9992C17.9395 7.9992 18.5003 7.4393 18.5003 6.74918C18.5003 6.05994 17.9386 5.49917 17.2503 5.50003Z\"></path>\n </svg>\n }\n @case (Icons.twitterXFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17.6874 3.0625L12.6907 8.77425L8.37045 3.0625H2.11328L9.58961 12.8387L2.50378 20.9375H5.53795L11.0068 14.6886L15.7863 20.9375H21.8885L14.095 10.6342L20.7198 3.0625H17.6874ZM16.6232 19.1225L5.65436 4.78217H7.45745L18.3034 19.1225H16.6232Z\"></path>\n </svg>\n }\n @case (Icons.downloadCloud2Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13 13V18.585L14.8284 16.7574L16.2426 18.1716L12 22.4142L7.75736 18.1716L9.17157 16.7574L11 18.585V13H13ZM12 2C15.5934 2 18.5544 4.70761 18.9541 8.19395C21.2858 8.83154 23 10.9656 23 13.5C23 16.3688 20.8036 18.7246 18.0006 18.9776L18.0009 16.9644C19.6966 16.7214 21 15.2629 21 13.5C21 11.567 19.433 10 17.5 10C17.2912 10 17.0867 10.0183 16.8887 10.054C16.9616 9.7142 17 9.36158 17 9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9C7 9.36158 7.03838 9.7142 7.11205 10.0533C6.91331 10.0183 6.70879 10 6.5 10C4.567 10 3 11.567 3 13.5C3 15.2003 4.21241 16.6174 5.81986 16.934L6.00005 16.9646L6.00039 18.9776C3.19696 18.7252 1 16.3692 1 13.5C1 10.9656 2.71424 8.83154 5.04648 8.19411C5.44561 4.70761 8.40661 2 12 2Z\"></path>\n </svg>\n }\n @case (Icons.globeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13.0003 21H18.0003V23H6.00032V21H11.0003V19.9506C7.70689 19.6236 4.88351 17.6987 3.31641 14.9622L5.05319 13.9697C6.43208 16.3776 9.02674 18 12.0003 18C16.4186 18 20.0003 14.4182 20.0003 9.99995C20.0003 7.02637 18.378 4.43171 15.9701 3.05282L16.9626 1.31604C19.9724 3.03965 22.0003 6.28297 22.0003 9.99995C22.0003 15.1853 18.0536 19.4489 13.0003 19.9506V21ZM12.0003 17C8.13433 17 5.00032 13.8659 5.00032 9.99995C5.00032 6.13396 8.13433 2.99995 12.0003 2.99995C15.8663 2.99995 19.0003 6.13396 19.0003 9.99995C19.0003 13.8659 15.8663 17 12.0003 17ZM12.0003 15C14.7617 15 17.0003 12.7614 17.0003 9.99995C17.0003 7.23853 14.7617 4.99995 12.0003 4.99995C9.2389 4.99995 7.00032 7.23853 7.00032 9.99995C7.00032 12.7614 9.2389 15 12.0003 15Z\"></path>\n </svg>\n }\n @case (Icons.mailSendLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M21 3C21.5523 3 22 3.44772 22 4V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V19H20V7.3L12 14.5L2 5.5V4C2 3.44772 2.44772 3 3 3H21ZM8 15V17H0V15H8ZM5 10V12H0V10H5ZM19.5659 5H4.43414L12 11.8093L19.5659 5Z\"></path>\n </svg>\n }\n @case (Icons.pagesLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 8V20H19V8H5ZM5 6H19V4H5V6ZM20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM7 10H11V14H7V10ZM7 16H17V18H7V16ZM13 11H17V13H13V11Z\"></path>\n </svg>\n }\n @case (Icons.gitForkLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5ZM3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.30622 8.16519 8.41746 7 8.82929V9C7 10.1046 7.89543 11 9 11H15C16.1046 11 17 10.1046 17 9V8.82929C15.8348 8.41746 15 7.30622 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.30622 20.1652 8.41746 19 8.82929V9C19 11.2091 17.2091 13 15 13H13V15.1707C14.1652 15.5825 15 16.6938 15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18C9 16.6938 9.83481 15.5825 11 15.1707V13H9C6.79086 13 5 11.2091 5 9V8.82929C3.83481 8.41746 3 7.30622 3 6ZM18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5ZM12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17Z\"></path>\n </svg>\n }\n @case (Icons.gitRepositoryPrivateLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6 10V20H19V10H6ZM18 8H20C20.5523 8 21 8.44772 21 9V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V9C3 8.44772 3.44772 8 4 8H6V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V8ZM16 8V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8H16ZM7 11H9V13H7V11ZM7 14H9V16H7V14ZM7 17H9V19H7V17Z\"></path>\n </svg>\n }\n @case (Icons.starLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z\"></path>\n </svg>\n }\n @case (Icons.calendar2Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM8 13V15H6V13H8ZM13 13V15H11V13H13ZM18 13V15H16V13H18ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z\"></path>\n </svg>\n }\n @case (Icons.macLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M14 18V20L16 21V22H8L7.99639 21.0036L10 20V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H14ZM4 5V14H20V5H4Z\"></path>\n </svg>\n }\n @case (Icons.more2Fill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5C14 3.9 13.1 3 12 3ZM12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19C14 17.9 13.1 17 12 17ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z\"></path>\n </svg>\n }\n @case (Icons.editLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z\"></path>\n </svg>\n }\n @case (Icons.deleteBinLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z\"></path>\n </svg>\n }\n }\n</span>\n", styles: [":host{color:inherit;display:inline-flex}:host:has(.icon--left){margin-left:var(--gld-spacing--xxxs)}:host:has(.icon--right){margin-right:var(--gld-spacing--xxxs)}.icon{--gld-icon-size: var(--gld-icon-size--normal);position:relative;color:inherit;font-weight:400;width:var(--gld-icon-size);height:var(--gld-icon-size);margin:auto}.icon--tiny{--gld-icon-size: var(--gld-icon-size--tiny)}.icon--small{--gld-icon-size: var(--gld-icon-size--small)}.icon--medium{--gld-icon-size: var(--gld-icon-size--medium)}.icon--large{--gld-icon-size: var(--gld-icon-size--large)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
223
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Icon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
224
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Icon, isStandalone: true, selector: "gld-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span\n tabindex=\"-1\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n class=\"icon icon--{{ size() }}\"\n [class.icon--left]=\"space() === IconsSpace.left\"\n [class.icon--right]=\"space() === IconsSpace.right\"\n [style.right.px]=\"moveLeftToRight()\"\n [style.top.px]=\"moveTopToBottom()\">\n @switch (icon()) {\n @case (Icons.arrowDownSLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"></path>\n </svg>\n }\n @case (Icons.arrowUpSLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"></path>\n </svg>\n }\n @case (Icons.checkboxCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z\"></path>\n </svg>\n }\n @case (Icons.checkboxBlankCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z\"></path>\n </svg>\n }\n @case (Icons.loader4Fill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z\"></path>\n </svg>\n }\n @case (Icons.logoutCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 11H13V13H5V16L0 12L5 8V11ZM3.99927 18H6.70835C8.11862 19.2447 9.97111 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.97111 4 8.11862 4.75527 6.70835 6H3.99927C5.82368 3.57111 8.72836 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.72836 22 5.82368 20.4289 3.99927 18Z\"></path>\n </svg>\n }\n @case (Icons.loginCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M10 11V8L15 12L10 16V13H1V11H10ZM2.4578 15H4.58152C5.76829 17.9318 8.64262 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C8.64262 4 5.76829 6.06817 4.58152 9H2.4578C3.73207 4.94289 7.52236 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C7.52236 22 3.73207 19.0571 2.4578 15Z\"></path>\n </svg>\n }\n @case (Icons.gitRepositoryLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13 21V23.5L10 21.5L7 23.5V21H6.5C4.567 21 3 19.433 3 17.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V20C21 20.5523 20.5523 21 20 21H13ZM13 19H19V16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19H7V17H13V19ZM19 14V4H6V14.0354C6.1633 14.0121 6.33024 14 6.5 14H19ZM7 5H9V7H7V5ZM7 8H9V10H7V8ZM7 11H9V13H7V11Z\"></path>\n </svg>\n }\n @case (Icons.fileList3Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V15H22V19C22 20.6569 20.6569 22 19 22ZM18 17V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V17H18ZM16 20V4H4V19C4 19.5523 4.44772 20 5 20H16ZM6 7H14V9H6V7ZM6 11H14V13H6V11ZM6 15H11V17H6V15Z\"></path>\n </svg>\n }\n @case (Icons.menuLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z\"></path>\n </svg>\n }\n @case (Icons.sunLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z\"></path>\n </svg>\n }\n @case (Icons.moonClearLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M10 6C10 10.4183 13.5817 14 18 14C19.4386 14 20.7885 13.6203 21.9549 12.9556C21.4738 18.0302 17.2005 22 12 22C6.47715 22 2 17.5228 2 12C2 6.79948 5.9698 2.52616 11.0444 2.04507C10.3797 3.21152 10 4.56142 10 6ZM4 12C4 16.4183 7.58172 20 12 20C14.9654 20 17.5757 18.3788 18.9571 15.9546C18.6407 15.9848 18.3214 16 18 16C12.4772 16 8 11.5228 8 6C8 5.67863 8.01524 5.35933 8.04536 5.04293C5.62119 6.42426 4 9.03458 4 12ZM18.1642 2.29104L19 2.5V3.5L18.1642 3.70896C17.4476 3.8881 16.8881 4.4476 16.709 5.16417L16.5 6H15.5L15.291 5.16417C15.1119 4.4476 14.5524 3.8881 13.8358 3.70896L13 3.5V2.5L13.8358 2.29104C14.5524 2.1119 15.1119 1.5524 15.291 0.835829L15.5 0H16.5L16.709 0.835829C16.8881 1.5524 17.4476 2.1119 18.1642 2.29104ZM23.1642 7.29104L24 7.5V8.5L23.1642 8.70896C22.4476 8.8881 21.8881 9.4476 21.709 10.1642L21.5 11H20.5L20.291 10.1642C20.1119 9.4476 19.5524 8.8881 18.8358 8.70896L18 8.5V7.5L18.8358 7.29104C19.5524 7.1119 20.1119 6.5524 20.291 5.83583L20.5 5H21.5L21.709 5.83583C21.8881 6.5524 22.4476 7.1119 23.1642 7.29104Z\"></path>\n </svg>\n }\n @case (Icons.englishInput) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M14 10H16L16.0005 10.7574C16.7154 10.279 17.5751 10 18.5 10C20.9853 10 23 12.0147 23 14.5V20H21V14.5C21 13.07 19.8255 12 18.5 12C17.1745 12 16 13.07 16 14.5V20H14V10ZM12 4V6H4V11H12V13H4V18H12V20H2V4H12Z\"></path>\n </svg>\n }\n @case (Icons.translate) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 15V17C5 18.0544 5.81588 18.9182 6.85074 18.9945L7 19H10V21H7C4.79086 21 3 19.2091 3 17V15H5ZM18 10L22.4 21H20.245L19.044 18H14.954L13.755 21H11.601L16 10H18ZM17 12.8852L15.753 16H18.245L17 12.8852ZM8 2V4H12V11H8V14H6V11H2V4H6V2H8ZM17 3C19.2091 3 21 4.79086 21 7V9H19V7C19 5.89543 18.1046 5 17 5H14V3H17ZM6 6H4V9H6V6ZM10 6H8V9H10V6Z\"></path>\n </svg>\n }\n @case (Icons.user4Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 20H19V22H5V20ZM12 18C7.58172 18 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 14.4183 16.4183 18 12 18ZM12 16C15.3137 16 18 13.3137 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 13.3137 8.68629 16 12 16Z\"></path>\n </svg>\n }\n @case (Icons.shapesLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9998 1L6 11H18L11.9998 1ZM11.9998 4.8873L14.4676 9H9.53232L11.9998 4.8873ZM6.75 20C5.23122 20 4 18.7688 4 17.25C4 15.7312 5.23122 14.5 6.75 14.5C8.26878 14.5 9.5 15.7312 9.5 17.25C9.5 18.7688 8.26878 20 6.75 20ZM6.75 22C9.37335 22 11.5 19.8734 11.5 17.25C11.5 14.6266 9.37335 12.5 6.75 12.5C4.12665 12.5 2 14.6266 2 17.25C2 19.8734 4.12665 22 6.75 22ZM15 15.5V19.5H19V15.5H15ZM13 21.5V13.5H21V21.5H13Z\"></path>\n </svg>\n }\n @case (Icons.closeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z\"></path>\n </svg>\n }\n @case (Icons.eyeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"></path>\n </svg>\n }\n @case (Icons.eyeCloseLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M9.34268 18.7819L7.41083 18.2642L8.1983 15.3254C7.00919 14.8874 5.91661 14.2498 4.96116 13.4534L2.80783 15.6067L1.39362 14.1925L3.54695 12.0392C2.35581 10.6103 1.52014 8.87466 1.17578 6.96818L3.14386 6.61035C3.90289 10.8126 7.57931 14.0001 12.0002 14.0001C16.4211 14.0001 20.0976 10.8126 20.8566 6.61035L22.8247 6.96818C22.4803 8.87466 21.6446 10.6103 20.4535 12.0392L22.6068 14.1925L21.1926 15.6067L19.0393 13.4534C18.0838 14.2498 16.9912 14.8874 15.8021 15.3254L16.5896 18.2642L14.6578 18.7819L13.87 15.8418C13.2623 15.9459 12.6376 16.0001 12.0002 16.0001C11.3629 16.0001 10.7381 15.9459 10.1305 15.8418L9.34268 18.7819Z\"></path>\n </svg>\n }\n @case (Icons.linkedinBoxFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z\"></path>\n </svg>\n }\n @case (Icons.githubFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z\"></path>\n </svg>\n }\n @case (Icons.instagramFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13.0281 2.00073C14.1535 2.00259 14.7238 2.00855 15.2166 2.02322L15.4107 2.02956C15.6349 2.03753 15.8561 2.04753 16.1228 2.06003C17.1869 2.1092 17.9128 2.27753 18.5503 2.52503C19.2094 2.7792 19.7661 3.12253 20.3219 3.67837C20.8769 4.2342 21.2203 4.79253 21.4753 5.45003C21.7219 6.0867 21.8903 6.81337 21.9403 7.87753C21.9522 8.1442 21.9618 8.3654 21.9697 8.58964L21.976 8.78373C21.9906 9.27647 21.9973 9.84686 21.9994 10.9723L22.0002 11.7179C22.0003 11.809 22.0003 11.903 22.0003 12L22.0002 12.2821L21.9996 13.0278C21.9977 14.1532 21.9918 14.7236 21.9771 15.2163L21.9707 15.4104C21.9628 15.6347 21.9528 15.8559 21.9403 16.1225C21.8911 17.1867 21.7219 17.9125 21.4753 18.55C21.2211 19.2092 20.8769 19.7659 20.3219 20.3217C19.7661 20.8767 19.2069 21.22 18.5503 21.475C17.9128 21.7217 17.1869 21.89 16.1228 21.94C15.8561 21.9519 15.6349 21.9616 15.4107 21.9694L15.2166 21.9757C14.7238 21.9904 14.1535 21.997 13.0281 21.9992L12.2824 22C12.1913 22 12.0973 22 12.0003 22L11.7182 22L10.9725 21.9993C9.8471 21.9975 9.27672 21.9915 8.78397 21.9768L8.58989 21.9705C8.36564 21.9625 8.14444 21.9525 7.87778 21.94C6.81361 21.8909 6.08861 21.7217 5.45028 21.475C4.79194 21.2209 4.23444 20.8767 3.67861 20.3217C3.12278 19.7659 2.78028 19.2067 2.52528 18.55C2.27778 17.9125 2.11028 17.1867 2.06028 16.1225C2.0484 15.8559 2.03871 15.6347 2.03086 15.4104L2.02457 15.2163C2.00994 14.7236 2.00327 14.1532 2.00111 13.0278L2.00098 10.9723C2.00284 9.84686 2.00879 9.27647 2.02346 8.78373L2.02981 8.58964C2.03778 8.3654 2.04778 8.1442 2.06028 7.87753C2.10944 6.81253 2.27778 6.08753 2.52528 5.45003C2.77944 4.7917 3.12278 4.2342 3.67861 3.67837C4.23444 3.12253 4.79278 2.78003 5.45028 2.52503C6.08778 2.27753 6.81278 2.11003 7.87778 2.06003C8.14444 2.04816 8.36564 2.03847 8.58989 2.03062L8.78397 2.02433C9.27672 2.00969 9.8471 2.00302 10.9725 2.00086L13.0281 2.00073ZM12.0003 7.00003C9.23738 7.00003 7.00028 9.23956 7.00028 12C7.00028 14.7629 9.23981 17 12.0003 17C14.7632 17 17.0003 14.7605 17.0003 12C17.0003 9.23713 14.7607 7.00003 12.0003 7.00003ZM12.0003 9.00003C13.6572 9.00003 15.0003 10.3427 15.0003 12C15.0003 13.6569 13.6576 15 12.0003 15C10.3434 15 9.00028 13.6574 9.00028 12C9.00028 10.3431 10.3429 9.00003 12.0003 9.00003ZM17.2503 5.50003C16.561 5.50003 16.0003 6.05994 16.0003 6.74918C16.0003 7.43843 16.5602 7.9992 17.2503 7.9992C17.9395 7.9992 18.5003 7.4393 18.5003 6.74918C18.5003 6.05994 17.9386 5.49917 17.2503 5.50003Z\"></path>\n </svg>\n }\n @case (Icons.twitterXFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17.6874 3.0625L12.6907 8.77425L8.37045 3.0625H2.11328L9.58961 12.8387L2.50378 20.9375H5.53795L11.0068 14.6886L15.7863 20.9375H21.8885L14.095 10.6342L20.7198 3.0625H17.6874ZM16.6232 19.1225L5.65436 4.78217H7.45745L18.3034 19.1225H16.6232Z\"></path>\n </svg>\n }\n @case (Icons.downloadCloud2Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13 13V18.585L14.8284 16.7574L16.2426 18.1716L12 22.4142L7.75736 18.1716L9.17157 16.7574L11 18.585V13H13ZM12 2C15.5934 2 18.5544 4.70761 18.9541 8.19395C21.2858 8.83154 23 10.9656 23 13.5C23 16.3688 20.8036 18.7246 18.0006 18.9776L18.0009 16.9644C19.6966 16.7214 21 15.2629 21 13.5C21 11.567 19.433 10 17.5 10C17.2912 10 17.0867 10.0183 16.8887 10.054C16.9616 9.7142 17 9.36158 17 9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9C7 9.36158 7.03838 9.7142 7.11205 10.0533C6.91331 10.0183 6.70879 10 6.5 10C4.567 10 3 11.567 3 13.5C3 15.2003 4.21241 16.6174 5.81986 16.934L6.00005 16.9646L6.00039 18.9776C3.19696 18.7252 1 16.3692 1 13.5C1 10.9656 2.71424 8.83154 5.04648 8.19411C5.44561 4.70761 8.40661 2 12 2Z\"></path>\n </svg>\n }\n @case (Icons.globeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13.0003 21H18.0003V23H6.00032V21H11.0003V19.9506C7.70689 19.6236 4.88351 17.6987 3.31641 14.9622L5.05319 13.9697C6.43208 16.3776 9.02674 18 12.0003 18C16.4186 18 20.0003 14.4182 20.0003 9.99995C20.0003 7.02637 18.378 4.43171 15.9701 3.05282L16.9626 1.31604C19.9724 3.03965 22.0003 6.28297 22.0003 9.99995C22.0003 15.1853 18.0536 19.4489 13.0003 19.9506V21ZM12.0003 17C8.13433 17 5.00032 13.8659 5.00032 9.99995C5.00032 6.13396 8.13433 2.99995 12.0003 2.99995C15.8663 2.99995 19.0003 6.13396 19.0003 9.99995C19.0003 13.8659 15.8663 17 12.0003 17ZM12.0003 15C14.7617 15 17.0003 12.7614 17.0003 9.99995C17.0003 7.23853 14.7617 4.99995 12.0003 4.99995C9.2389 4.99995 7.00032 7.23853 7.00032 9.99995C7.00032 12.7614 9.2389 15 12.0003 15Z\"></path>\n </svg>\n }\n @case (Icons.mailSendLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M21 3C21.5523 3 22 3.44772 22 4V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V19H20V7.3L12 14.5L2 5.5V4C2 3.44772 2.44772 3 3 3H21ZM8 15V17H0V15H8ZM5 10V12H0V10H5ZM19.5659 5H4.43414L12 11.8093L19.5659 5Z\"></path>\n </svg>\n }\n @case (Icons.pagesLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 8V20H19V8H5ZM5 6H19V4H5V6ZM20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM7 10H11V14H7V10ZM7 16H17V18H7V16ZM13 11H17V13H13V11Z\"></path>\n </svg>\n }\n @case (Icons.gitForkLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5ZM3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.30622 8.16519 8.41746 7 8.82929V9C7 10.1046 7.89543 11 9 11H15C16.1046 11 17 10.1046 17 9V8.82929C15.8348 8.41746 15 7.30622 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.30622 20.1652 8.41746 19 8.82929V9C19 11.2091 17.2091 13 15 13H13V15.1707C14.1652 15.5825 15 16.6938 15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18C9 16.6938 9.83481 15.5825 11 15.1707V13H9C6.79086 13 5 11.2091 5 9V8.82929C3.83481 8.41746 3 7.30622 3 6ZM18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5ZM12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17Z\"></path>\n </svg>\n }\n @case (Icons.gitRepositoryPrivateLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6 10V20H19V10H6ZM18 8H20C20.5523 8 21 8.44772 21 9V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V9C3 8.44772 3.44772 8 4 8H6V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V8ZM16 8V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8H16ZM7 11H9V13H7V11ZM7 14H9V16H7V14ZM7 17H9V19H7V17Z\"></path>\n </svg>\n }\n @case (Icons.starLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z\"></path>\n </svg>\n }\n @case (Icons.calendar2Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM8 13V15H6V13H8ZM13 13V15H11V13H13ZM18 13V15H16V13H18ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z\"></path>\n </svg>\n }\n @case (Icons.macLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M14 18V20L16 21V22H8L7.99639 21.0036L10 20V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H14ZM4 5V14H20V5H4Z\"></path>\n </svg>\n }\n @case (Icons.more2Fill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5C14 3.9 13.1 3 12 3ZM12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19C14 17.9 13.1 17 12 17ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z\"></path>\n </svg>\n }\n @case (Icons.editLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z\"></path>\n </svg>\n }\n @case (Icons.deleteBinLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z\"></path>\n </svg>\n }\n }\n</span>\n", styles: [":host{color:inherit;display:inline-flex}:host:has(.icon--left){margin-left:var(--gld-spacing--xxxs)}:host:has(.icon--right){margin-right:var(--gld-spacing--xxxs)}.icon{--gld-icon-size: var(--gld-icon-size--normal);position:relative;color:inherit;font-weight:400;width:var(--gld-icon-size);height:var(--gld-icon-size);margin:auto}.icon--tiny{--gld-icon-size: var(--gld-icon-size--tiny)}.icon--small{--gld-icon-size: var(--gld-icon-size--small)}.icon--medium{--gld-icon-size: var(--gld-icon-size--medium)}.icon--large{--gld-icon-size: var(--gld-icon-size--large)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
225
225
|
}
|
|
226
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
226
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Icon, decorators: [{
|
|
227
227
|
type: Component,
|
|
228
228
|
args: [{ selector: 'gld-icon', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n tabindex=\"-1\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n class=\"icon icon--{{ size() }}\"\n [class.icon--left]=\"space() === IconsSpace.left\"\n [class.icon--right]=\"space() === IconsSpace.right\"\n [style.right.px]=\"moveLeftToRight()\"\n [style.top.px]=\"moveTopToBottom()\">\n @switch (icon()) {\n @case (Icons.arrowDownSLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"></path>\n </svg>\n }\n @case (Icons.arrowUpSLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"></path>\n </svg>\n }\n @case (Icons.checkboxCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z\"></path>\n </svg>\n }\n @case (Icons.checkboxBlankCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z\"></path>\n </svg>\n }\n @case (Icons.loader4Fill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z\"></path>\n </svg>\n }\n @case (Icons.logoutCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 11H13V13H5V16L0 12L5 8V11ZM3.99927 18H6.70835C8.11862 19.2447 9.97111 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.97111 4 8.11862 4.75527 6.70835 6H3.99927C5.82368 3.57111 8.72836 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.72836 22 5.82368 20.4289 3.99927 18Z\"></path>\n </svg>\n }\n @case (Icons.loginCircleLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M10 11V8L15 12L10 16V13H1V11H10ZM2.4578 15H4.58152C5.76829 17.9318 8.64262 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C8.64262 4 5.76829 6.06817 4.58152 9H2.4578C3.73207 4.94289 7.52236 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C7.52236 22 3.73207 19.0571 2.4578 15Z\"></path>\n </svg>\n }\n @case (Icons.gitRepositoryLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13 21V23.5L10 21.5L7 23.5V21H6.5C4.567 21 3 19.433 3 17.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V20C21 20.5523 20.5523 21 20 21H13ZM13 19H19V16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19H7V17H13V19ZM19 14V4H6V14.0354C6.1633 14.0121 6.33024 14 6.5 14H19ZM7 5H9V7H7V5ZM7 8H9V10H7V8ZM7 11H9V13H7V11Z\"></path>\n </svg>\n }\n @case (Icons.fileList3Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V15H22V19C22 20.6569 20.6569 22 19 22ZM18 17V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V17H18ZM16 20V4H4V19C4 19.5523 4.44772 20 5 20H16ZM6 7H14V9H6V7ZM6 11H14V13H6V11ZM6 15H11V17H6V15Z\"></path>\n </svg>\n }\n @case (Icons.menuLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z\"></path>\n </svg>\n }\n @case (Icons.sunLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z\"></path>\n </svg>\n }\n @case (Icons.moonClearLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M10 6C10 10.4183 13.5817 14 18 14C19.4386 14 20.7885 13.6203 21.9549 12.9556C21.4738 18.0302 17.2005 22 12 22C6.47715 22 2 17.5228 2 12C2 6.79948 5.9698 2.52616 11.0444 2.04507C10.3797 3.21152 10 4.56142 10 6ZM4 12C4 16.4183 7.58172 20 12 20C14.9654 20 17.5757 18.3788 18.9571 15.9546C18.6407 15.9848 18.3214 16 18 16C12.4772 16 8 11.5228 8 6C8 5.67863 8.01524 5.35933 8.04536 5.04293C5.62119 6.42426 4 9.03458 4 12ZM18.1642 2.29104L19 2.5V3.5L18.1642 3.70896C17.4476 3.8881 16.8881 4.4476 16.709 5.16417L16.5 6H15.5L15.291 5.16417C15.1119 4.4476 14.5524 3.8881 13.8358 3.70896L13 3.5V2.5L13.8358 2.29104C14.5524 2.1119 15.1119 1.5524 15.291 0.835829L15.5 0H16.5L16.709 0.835829C16.8881 1.5524 17.4476 2.1119 18.1642 2.29104ZM23.1642 7.29104L24 7.5V8.5L23.1642 8.70896C22.4476 8.8881 21.8881 9.4476 21.709 10.1642L21.5 11H20.5L20.291 10.1642C20.1119 9.4476 19.5524 8.8881 18.8358 8.70896L18 8.5V7.5L18.8358 7.29104C19.5524 7.1119 20.1119 6.5524 20.291 5.83583L20.5 5H21.5L21.709 5.83583C21.8881 6.5524 22.4476 7.1119 23.1642 7.29104Z\"></path>\n </svg>\n }\n @case (Icons.englishInput) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M14 10H16L16.0005 10.7574C16.7154 10.279 17.5751 10 18.5 10C20.9853 10 23 12.0147 23 14.5V20H21V14.5C21 13.07 19.8255 12 18.5 12C17.1745 12 16 13.07 16 14.5V20H14V10ZM12 4V6H4V11H12V13H4V18H12V20H2V4H12Z\"></path>\n </svg>\n }\n @case (Icons.translate) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 15V17C5 18.0544 5.81588 18.9182 6.85074 18.9945L7 19H10V21H7C4.79086 21 3 19.2091 3 17V15H5ZM18 10L22.4 21H20.245L19.044 18H14.954L13.755 21H11.601L16 10H18ZM17 12.8852L15.753 16H18.245L17 12.8852ZM8 2V4H12V11H8V14H6V11H2V4H6V2H8ZM17 3C19.2091 3 21 4.79086 21 7V9H19V7C19 5.89543 18.1046 5 17 5H14V3H17ZM6 6H4V9H6V6ZM10 6H8V9H10V6Z\"></path>\n </svg>\n }\n @case (Icons.user4Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 20H19V22H5V20ZM12 18C7.58172 18 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 14.4183 16.4183 18 12 18ZM12 16C15.3137 16 18 13.3137 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 13.3137 8.68629 16 12 16Z\"></path>\n </svg>\n }\n @case (Icons.shapesLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9998 1L6 11H18L11.9998 1ZM11.9998 4.8873L14.4676 9H9.53232L11.9998 4.8873ZM6.75 20C5.23122 20 4 18.7688 4 17.25C4 15.7312 5.23122 14.5 6.75 14.5C8.26878 14.5 9.5 15.7312 9.5 17.25C9.5 18.7688 8.26878 20 6.75 20ZM6.75 22C9.37335 22 11.5 19.8734 11.5 17.25C11.5 14.6266 9.37335 12.5 6.75 12.5C4.12665 12.5 2 14.6266 2 17.25C2 19.8734 4.12665 22 6.75 22ZM15 15.5V19.5H19V15.5H15ZM13 21.5V13.5H21V21.5H13Z\"></path>\n </svg>\n }\n @case (Icons.closeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z\"></path>\n </svg>\n }\n @case (Icons.eyeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"></path>\n </svg>\n }\n @case (Icons.eyeCloseLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M9.34268 18.7819L7.41083 18.2642L8.1983 15.3254C7.00919 14.8874 5.91661 14.2498 4.96116 13.4534L2.80783 15.6067L1.39362 14.1925L3.54695 12.0392C2.35581 10.6103 1.52014 8.87466 1.17578 6.96818L3.14386 6.61035C3.90289 10.8126 7.57931 14.0001 12.0002 14.0001C16.4211 14.0001 20.0976 10.8126 20.8566 6.61035L22.8247 6.96818C22.4803 8.87466 21.6446 10.6103 20.4535 12.0392L22.6068 14.1925L21.1926 15.6067L19.0393 13.4534C18.0838 14.2498 16.9912 14.8874 15.8021 15.3254L16.5896 18.2642L14.6578 18.7819L13.87 15.8418C13.2623 15.9459 12.6376 16.0001 12.0002 16.0001C11.3629 16.0001 10.7381 15.9459 10.1305 15.8418L9.34268 18.7819Z\"></path>\n </svg>\n }\n @case (Icons.linkedinBoxFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z\"></path>\n </svg>\n }\n @case (Icons.githubFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z\"></path>\n </svg>\n }\n @case (Icons.instagramFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13.0281 2.00073C14.1535 2.00259 14.7238 2.00855 15.2166 2.02322L15.4107 2.02956C15.6349 2.03753 15.8561 2.04753 16.1228 2.06003C17.1869 2.1092 17.9128 2.27753 18.5503 2.52503C19.2094 2.7792 19.7661 3.12253 20.3219 3.67837C20.8769 4.2342 21.2203 4.79253 21.4753 5.45003C21.7219 6.0867 21.8903 6.81337 21.9403 7.87753C21.9522 8.1442 21.9618 8.3654 21.9697 8.58964L21.976 8.78373C21.9906 9.27647 21.9973 9.84686 21.9994 10.9723L22.0002 11.7179C22.0003 11.809 22.0003 11.903 22.0003 12L22.0002 12.2821L21.9996 13.0278C21.9977 14.1532 21.9918 14.7236 21.9771 15.2163L21.9707 15.4104C21.9628 15.6347 21.9528 15.8559 21.9403 16.1225C21.8911 17.1867 21.7219 17.9125 21.4753 18.55C21.2211 19.2092 20.8769 19.7659 20.3219 20.3217C19.7661 20.8767 19.2069 21.22 18.5503 21.475C17.9128 21.7217 17.1869 21.89 16.1228 21.94C15.8561 21.9519 15.6349 21.9616 15.4107 21.9694L15.2166 21.9757C14.7238 21.9904 14.1535 21.997 13.0281 21.9992L12.2824 22C12.1913 22 12.0973 22 12.0003 22L11.7182 22L10.9725 21.9993C9.8471 21.9975 9.27672 21.9915 8.78397 21.9768L8.58989 21.9705C8.36564 21.9625 8.14444 21.9525 7.87778 21.94C6.81361 21.8909 6.08861 21.7217 5.45028 21.475C4.79194 21.2209 4.23444 20.8767 3.67861 20.3217C3.12278 19.7659 2.78028 19.2067 2.52528 18.55C2.27778 17.9125 2.11028 17.1867 2.06028 16.1225C2.0484 15.8559 2.03871 15.6347 2.03086 15.4104L2.02457 15.2163C2.00994 14.7236 2.00327 14.1532 2.00111 13.0278L2.00098 10.9723C2.00284 9.84686 2.00879 9.27647 2.02346 8.78373L2.02981 8.58964C2.03778 8.3654 2.04778 8.1442 2.06028 7.87753C2.10944 6.81253 2.27778 6.08753 2.52528 5.45003C2.77944 4.7917 3.12278 4.2342 3.67861 3.67837C4.23444 3.12253 4.79278 2.78003 5.45028 2.52503C6.08778 2.27753 6.81278 2.11003 7.87778 2.06003C8.14444 2.04816 8.36564 2.03847 8.58989 2.03062L8.78397 2.02433C9.27672 2.00969 9.8471 2.00302 10.9725 2.00086L13.0281 2.00073ZM12.0003 7.00003C9.23738 7.00003 7.00028 9.23956 7.00028 12C7.00028 14.7629 9.23981 17 12.0003 17C14.7632 17 17.0003 14.7605 17.0003 12C17.0003 9.23713 14.7607 7.00003 12.0003 7.00003ZM12.0003 9.00003C13.6572 9.00003 15.0003 10.3427 15.0003 12C15.0003 13.6569 13.6576 15 12.0003 15C10.3434 15 9.00028 13.6574 9.00028 12C9.00028 10.3431 10.3429 9.00003 12.0003 9.00003ZM17.2503 5.50003C16.561 5.50003 16.0003 6.05994 16.0003 6.74918C16.0003 7.43843 16.5602 7.9992 17.2503 7.9992C17.9395 7.9992 18.5003 7.4393 18.5003 6.74918C18.5003 6.05994 17.9386 5.49917 17.2503 5.50003Z\"></path>\n </svg>\n }\n @case (Icons.twitterXFill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17.6874 3.0625L12.6907 8.77425L8.37045 3.0625H2.11328L9.58961 12.8387L2.50378 20.9375H5.53795L11.0068 14.6886L15.7863 20.9375H21.8885L14.095 10.6342L20.7198 3.0625H17.6874ZM16.6232 19.1225L5.65436 4.78217H7.45745L18.3034 19.1225H16.6232Z\"></path>\n </svg>\n }\n @case (Icons.downloadCloud2Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13 13V18.585L14.8284 16.7574L16.2426 18.1716L12 22.4142L7.75736 18.1716L9.17157 16.7574L11 18.585V13H13ZM12 2C15.5934 2 18.5544 4.70761 18.9541 8.19395C21.2858 8.83154 23 10.9656 23 13.5C23 16.3688 20.8036 18.7246 18.0006 18.9776L18.0009 16.9644C19.6966 16.7214 21 15.2629 21 13.5C21 11.567 19.433 10 17.5 10C17.2912 10 17.0867 10.0183 16.8887 10.054C16.9616 9.7142 17 9.36158 17 9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9C7 9.36158 7.03838 9.7142 7.11205 10.0533C6.91331 10.0183 6.70879 10 6.5 10C4.567 10 3 11.567 3 13.5C3 15.2003 4.21241 16.6174 5.81986 16.934L6.00005 16.9646L6.00039 18.9776C3.19696 18.7252 1 16.3692 1 13.5C1 10.9656 2.71424 8.83154 5.04648 8.19411C5.44561 4.70761 8.40661 2 12 2Z\"></path>\n </svg>\n }\n @case (Icons.globeLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M13.0003 21H18.0003V23H6.00032V21H11.0003V19.9506C7.70689 19.6236 4.88351 17.6987 3.31641 14.9622L5.05319 13.9697C6.43208 16.3776 9.02674 18 12.0003 18C16.4186 18 20.0003 14.4182 20.0003 9.99995C20.0003 7.02637 18.378 4.43171 15.9701 3.05282L16.9626 1.31604C19.9724 3.03965 22.0003 6.28297 22.0003 9.99995C22.0003 15.1853 18.0536 19.4489 13.0003 19.9506V21ZM12.0003 17C8.13433 17 5.00032 13.8659 5.00032 9.99995C5.00032 6.13396 8.13433 2.99995 12.0003 2.99995C15.8663 2.99995 19.0003 6.13396 19.0003 9.99995C19.0003 13.8659 15.8663 17 12.0003 17ZM12.0003 15C14.7617 15 17.0003 12.7614 17.0003 9.99995C17.0003 7.23853 14.7617 4.99995 12.0003 4.99995C9.2389 4.99995 7.00032 7.23853 7.00032 9.99995C7.00032 12.7614 9.2389 15 12.0003 15Z\"></path>\n </svg>\n }\n @case (Icons.mailSendLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M21 3C21.5523 3 22 3.44772 22 4V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V19H20V7.3L12 14.5L2 5.5V4C2 3.44772 2.44772 3 3 3H21ZM8 15V17H0V15H8ZM5 10V12H0V10H5ZM19.5659 5H4.43414L12 11.8093L19.5659 5Z\"></path>\n </svg>\n }\n @case (Icons.pagesLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M5 8V20H19V8H5ZM5 6H19V4H5V6ZM20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM7 10H11V14H7V10ZM7 16H17V18H7V16ZM13 11H17V13H13V11Z\"></path>\n </svg>\n }\n @case (Icons.gitForkLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5ZM3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.30622 8.16519 8.41746 7 8.82929V9C7 10.1046 7.89543 11 9 11H15C16.1046 11 17 10.1046 17 9V8.82929C15.8348 8.41746 15 7.30622 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.30622 20.1652 8.41746 19 8.82929V9C19 11.2091 17.2091 13 15 13H13V15.1707C14.1652 15.5825 15 16.6938 15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18C9 16.6938 9.83481 15.5825 11 15.1707V13H9C6.79086 13 5 11.2091 5 9V8.82929C3.83481 8.41746 3 7.30622 3 6ZM18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5ZM12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17Z\"></path>\n </svg>\n }\n @case (Icons.gitRepositoryPrivateLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6 10V20H19V10H6ZM18 8H20C20.5523 8 21 8.44772 21 9V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V9C3 8.44772 3.44772 8 4 8H6V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V8ZM16 8V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8H16ZM7 11H9V13H7V11ZM7 14H9V16H7V14ZM7 17H9V19H7V17Z\"></path>\n </svg>\n }\n @case (Icons.starLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z\"></path>\n </svg>\n }\n @case (Icons.calendar2Line) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM8 13V15H6V13H8ZM13 13V15H11V13H13ZM18 13V15H16V13H18ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z\"></path>\n </svg>\n }\n @case (Icons.macLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M14 18V20L16 21V22H8L7.99639 21.0036L10 20V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H14ZM4 5V14H20V5H4Z\"></path>\n </svg>\n }\n @case (Icons.more2Fill) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5C14 3.9 13.1 3 12 3ZM12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19C14 17.9 13.1 17 12 17ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z\"></path>\n </svg>\n }\n @case (Icons.editLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z\"></path>\n </svg>\n }\n @case (Icons.deleteBinLine) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path\n d=\"M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z\"></path>\n </svg>\n }\n }\n</span>\n", styles: [":host{color:inherit;display:inline-flex}:host:has(.icon--left){margin-left:var(--gld-spacing--xxxs)}:host:has(.icon--right){margin-right:var(--gld-spacing--xxxs)}.icon{--gld-icon-size: var(--gld-icon-size--normal);position:relative;color:inherit;font-weight:400;width:var(--gld-icon-size);height:var(--gld-icon-size);margin:auto}.icon--tiny{--gld-icon-size: var(--gld-icon-size--tiny)}.icon--small{--gld-icon-size: var(--gld-icon-size--small)}.icon--medium{--gld-icon-size: var(--gld-icon-size--medium)}.icon--large{--gld-icon-size: var(--gld-icon-size--large)}\n"] }]
|
|
229
229
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], space: [{ type: i0.Input, args: [{ isSignal: true, alias: "space", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
@@ -233,10 +233,10 @@ class Button {
|
|
|
233
233
|
constructor() {
|
|
234
234
|
this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `button-id-${value.trim().split(' ').join('-')}` });
|
|
235
235
|
this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `button-name-${value.trim().split(' ').join('-')}` });
|
|
236
|
-
this.color = input(ButtonColor.pink,
|
|
237
|
-
this.size = input(ButtonSize.normal,
|
|
238
|
-
this.icon = input(null,
|
|
239
|
-
this.iconSize = input(
|
|
236
|
+
this.color = input(ButtonColor.pink, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
237
|
+
this.size = input(ButtonSize.normal, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
238
|
+
this.icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
239
|
+
this.iconSize = input(...(ngDevMode ? [undefined, { debugName: "iconSize" }] : []));
|
|
240
240
|
this.moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
|
|
241
241
|
this.moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
|
|
242
242
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
@@ -250,10 +250,10 @@ class Button {
|
|
|
250
250
|
keyup() {
|
|
251
251
|
this.emitClick();
|
|
252
252
|
}
|
|
253
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
254
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
253
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
254
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Button, isStandalone: true, selector: "gld-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }} button--{{ size() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--full]=\"full()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize() ?? size()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content>no content</ng-content>\n </span>\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;height:inherit;max-width:inherit}:host:has(.button--full){width:100%}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:0;padding:var(--gld-padding);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--pink{--gld-color: var(--gld-pink);--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple);--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard);--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange);--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue);--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green);--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--tiny{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs)}.button--small{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxs)}.button--normal{--gld-font-size: var(--gld-font-size--normal);--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs)}.button--medium{--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--m)}.button--large{--gld-font-size: var(--gld-font-size--heading-three);--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--l)}.button--disabled{--gld-color: var(--gld-gray);--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020);pointer-events:none;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
255
255
|
}
|
|
256
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
256
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Button, decorators: [{
|
|
257
257
|
type: Component,
|
|
258
258
|
args: [{ selector: 'gld-button', imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }} button--{{ size() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--full]=\"full()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize() ?? size()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content>no content</ng-content>\n </span>\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;height:inherit;max-width:inherit}:host:has(.button--full){width:100%}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:0;padding:var(--gld-padding);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--pink{--gld-color: var(--gld-pink);--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple);--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard);--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange);--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue);--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green);--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--tiny{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs)}.button--small{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxs)}.button--normal{--gld-font-size: var(--gld-font-size--normal);--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs)}.button--medium{--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--m)}.button--large{--gld-font-size: var(--gld-font-size--heading-three);--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--l)}.button--disabled{--gld-color: var(--gld-gray);--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020);pointer-events:none;cursor:not-allowed}\n"] }]
|
|
259
259
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
@@ -262,18 +262,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
262
262
|
const components$7 = [Icon];
|
|
263
263
|
class DropdownButton {
|
|
264
264
|
constructor() {
|
|
265
|
-
this.value = input.required(
|
|
266
|
-
this.icon = input(null,
|
|
267
|
-
this.iconSize = input(IconsSize.normal,
|
|
268
|
-
this.iconSpace = input(IconsSpace.none,
|
|
265
|
+
this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
266
|
+
this.icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
267
|
+
this.iconSize = input(IconsSize.normal, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
|
|
268
|
+
this.iconSpace = input(IconsSpace.none, ...(ngDevMode ? [{ debugName: "iconSpace" }] : []));
|
|
269
269
|
this.moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
|
|
270
270
|
this.moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
|
|
271
|
-
this.direction = input(DropdownDirection.left,
|
|
271
|
+
this.direction = input(DropdownDirection.left, ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
272
272
|
this.changeValue = output();
|
|
273
|
-
this.current = signal(null,
|
|
274
|
-
this.disabled = signal(false,
|
|
275
|
-
this.error = signal(false,
|
|
276
|
-
this.selected = computed(() => Boolean(this.current() === this.value()),
|
|
273
|
+
this.current = signal(null, ...(ngDevMode ? [{ debugName: "current" }] : []));
|
|
274
|
+
this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
275
|
+
this.error = signal(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
276
|
+
this.selected = computed(() => Boolean(this.current() === this.value()), ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
277
277
|
this.buttonChild = viewChild('buttonChild', { ...(ngDevMode ? { debugName: "buttonChild" } : {}), read: ElementRef });
|
|
278
278
|
}
|
|
279
279
|
select(value) {
|
|
@@ -283,20 +283,20 @@ class DropdownButton {
|
|
|
283
283
|
keyup(value) {
|
|
284
284
|
this.select(value);
|
|
285
285
|
}
|
|
286
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
287
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
286
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DropdownButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
287
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DropdownButton, isStandalone: true, selector: "gld-dropdown-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconSpace: { classPropertyName: "iconSpace", publicName: "iconSpace", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue" }, viewQueries: [{ propertyName: "buttonChild", first: true, predicate: ["buttonChild"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n #buttonChild\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button button--direction-{{ direction() }}\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize()\"\n [space]=\"iconSpace()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content> no content </ng-content>\n </span>\n</button>\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);--gld-height: 40px;padding:var(--gld-spacing--xxs) var(--gld-spacing--xs);width:100%;height:var(--gld-height);background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);text-align:left;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--gld-spacing--xxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover);--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--direction-left{justify-content:flex-start}.button--direction-right{justify-content:flex-end}.button--selected,.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
288
288
|
}
|
|
289
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
289
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DropdownButton, decorators: [{
|
|
290
290
|
type: Component,
|
|
291
291
|
args: [{ selector: 'gld-dropdown-button', imports: [...components$7], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #buttonChild\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button button--direction-{{ direction() }}\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <!-- Icon -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [icon]=\"innerIcon\"\n [size]=\"iconSize()\"\n [space]=\"iconSpace()\"\n [disabled]=\"disabled()\" />\n }\n <!-- Content -->\n <span>\n <ng-content> no content </ng-content>\n </span>\n</button>\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);--gld-height: 40px;padding:var(--gld-spacing--xxs) var(--gld-spacing--xs);width:100%;height:var(--gld-height);background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);text-align:left;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--gld-spacing--xxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover);--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--direction-left{justify-content:flex-start}.button--direction-right{justify-content:flex-end}.button--selected,.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"] }]
|
|
292
292
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSpace", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], buttonChild: [{ type: i0.ViewChild, args: ['buttonChild', { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
293
293
|
|
|
294
294
|
// Angular Imports
|
|
295
295
|
class DropdownMenuTemplate {
|
|
296
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
297
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
296
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DropdownMenuTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
297
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: DropdownMenuTemplate, isStandalone: true, selector: "[gldDropdownMenuTemplate]", ngImport: i0 }); }
|
|
298
298
|
}
|
|
299
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
299
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DropdownMenuTemplate, decorators: [{
|
|
300
300
|
type: Directive,
|
|
301
301
|
args: [{
|
|
302
302
|
selector: '[gldDropdownMenuTemplate]',
|
|
@@ -305,10 +305,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
305
305
|
|
|
306
306
|
// Angular Imports
|
|
307
307
|
class InputErrorMessage {
|
|
308
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
309
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
308
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputErrorMessage, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
309
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: InputErrorMessage, isStandalone: true, selector: "[gldInputErrorMessage]", ngImport: i0 }); }
|
|
310
310
|
}
|
|
311
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputErrorMessage, decorators: [{
|
|
312
312
|
type: Directive,
|
|
313
313
|
args: [{
|
|
314
314
|
selector: '[gldInputErrorMessage]',
|
|
@@ -318,16 +318,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
318
318
|
// Angular Imports
|
|
319
319
|
class IconButton {
|
|
320
320
|
constructor() {
|
|
321
|
-
this.icon = input.required(
|
|
321
|
+
this.icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
322
322
|
this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `button-id-${value.trim().split(' ').join('-')}` });
|
|
323
323
|
this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `button-name-${value.trim().split(' ').join('-')}` });
|
|
324
|
-
this.iconSize = input(IconsSize.normal,
|
|
325
|
-
this.space = input(IconsSpace.none,
|
|
324
|
+
this.iconSize = input(IconsSize.normal, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
|
|
325
|
+
this.space = input(IconsSpace.none, ...(ngDevMode ? [{ debugName: "space" }] : []));
|
|
326
326
|
this.moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
|
|
327
327
|
this.moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
|
|
328
328
|
this.background = input(false, { ...(ngDevMode ? { debugName: "background" } : {}), transform: booleanAttribute });
|
|
329
329
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
330
|
-
this.color = input(ButtonColor.pink,
|
|
330
|
+
this.color = input(ButtonColor.pink, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
331
331
|
this.clicked = output();
|
|
332
332
|
}
|
|
333
333
|
emitClick() {
|
|
@@ -337,10 +337,10 @@ class IconButton {
|
|
|
337
337
|
keyup() {
|
|
338
338
|
this.emitClick();
|
|
339
339
|
}
|
|
340
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
341
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0
|
|
340
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
341
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: IconButton, isStandalone: true, selector: "gld-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--background]=\"background()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n <gld-icon\n [icon]=\"icon()\"\n [size]=\"iconSize()\"\n [space]=\"space()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.98)}.button--pink{--gld-color: var(--gld-pink)}.button--pink.button--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple)}.button--purple.button--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard)}.button--mustard.button--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange)}.button--orange.button--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue)}.button--blue.button--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red)}.button--red.button--background{--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green)}.button--green.button--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--disabled{--gld-color: var(--gld-gray-transparent--060);pointer-events:none;cursor:not-allowed}.button--disabled.button--background{--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
342
342
|
}
|
|
343
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
343
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconButton, decorators: [{
|
|
344
344
|
type: Component,
|
|
345
345
|
args: [{ selector: 'gld-icon-button', imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"button button--{{ color() }}\"\n [class.button--disabled]=\"disabled()\"\n [class.button--background]=\"background()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <!-- Icon -->\n <gld-icon\n [icon]=\"icon()\"\n [size]=\"iconSize()\"\n [space]=\"space()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.98)}.button--pink{--gld-color: var(--gld-pink)}.button--pink.button--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple)}.button--purple.button--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard)}.button--mustard.button--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange)}.button--orange.button--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue)}.button--blue.button--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red)}.button--red.button--background{--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green)}.button--green.button--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--disabled{--gld-color: var(--gld-gray-transparent--060);pointer-events:none;cursor:not-allowed}.button--disabled.button--background{--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020)}\n"] }]
|
|
346
346
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], space: [{ type: i0.Input, args: [{ isSignal: true, alias: "space", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
@@ -353,22 +353,22 @@ class DropdownMenu {
|
|
|
353
353
|
this.DropdownType = DropdownType;
|
|
354
354
|
this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `dropdown-id-${value.trim().split(' ').join('-')}` });
|
|
355
355
|
this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `dropdown-name-${value.trim().split(' ').join('-')}` });
|
|
356
|
-
this.type = input.required(
|
|
357
|
-
this.color = input(ButtonColor.pink,
|
|
358
|
-
this.size = input(ButtonSize.normal,
|
|
359
|
-
this.icon = input(null,
|
|
360
|
-
this.iconSize = input(
|
|
356
|
+
this.type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
357
|
+
this.color = input(ButtonColor.pink, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
358
|
+
this.size = input(ButtonSize.normal, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
359
|
+
this.icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
360
|
+
this.iconSize = input(...(ngDevMode ? [undefined, { debugName: "iconSize" }] : []));
|
|
361
361
|
this.moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
|
|
362
362
|
this.moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
|
|
363
363
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
364
364
|
this.full = input(false, { ...(ngDevMode ? { debugName: "full" } : {}), transform: booleanAttribute });
|
|
365
|
-
this.direction = input(DropdownDirection.right,
|
|
365
|
+
this.direction = input(DropdownDirection.right, ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
366
366
|
this.background = input(false, { ...(ngDevMode ? { debugName: "background" } : {}), transform: booleanAttribute });
|
|
367
367
|
this.selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: booleanAttribute });
|
|
368
|
-
this.initialValue = input(null,
|
|
368
|
+
this.initialValue = input(null, ...(ngDevMode ? [{ debugName: "initialValue" }] : []));
|
|
369
369
|
this.changeValue = output();
|
|
370
370
|
this.changeFocus = output();
|
|
371
|
-
this.dropdownButtonChildren = contentChildren(DropdownButton,
|
|
371
|
+
this.dropdownButtonChildren = contentChildren(DropdownButton, ...(ngDevMode ? [{ debugName: "dropdownButtonChildren" }] : []));
|
|
372
372
|
effect(() => {
|
|
373
373
|
const initialValue = this.initialValue();
|
|
374
374
|
if (initialValue)
|
|
@@ -392,10 +392,10 @@ class DropdownMenu {
|
|
|
392
392
|
updateErrorInChildren(error) {
|
|
393
393
|
this.dropdownButtonChildren().map((dropdownButton) => dropdownButton.error.set(error));
|
|
394
394
|
}
|
|
395
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
396
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
395
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
396
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: DropdownMenu, isStandalone: true, selector: "gld-dropdown-menu", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, queries: [{ propertyName: "dropdownButtonChildren", predicate: DropdownButton, isSignal: true }], ngImport: i0, template: "<!-- Button -->\n@if (type() === DropdownType.button) {\n <gld-button\n #buttonChild\n [id]=\"id()\"\n [name]=\"name()\"\n [color]=\"color()\"\n [size]=\"size()\"\n [icon]=\"icon()\"\n [iconSize]=\"iconSize()\"\n [disabled]=\"disabled()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [full]=\"full()\">\n <ng-content />\n\n <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n </gld-button>\n} @else {\n <!-- Icon Button -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon-button\n #buttonChild\n [id]=\"id()\"\n [name]=\"name()\"\n [color]=\"color()\"\n [icon]=\"innerIcon\"\n [iconSize]=\"iconSize() ?? size()\"\n [disabled]=\"disabled()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [background]=\"background()\">\n <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n </gld-icon-button>\n }\n}\n\n<ng-template #dropdownMenu>\n <!-- Menu -->\n <section\n class=\"dropdown-menu dropdown-menu--{{ type() }} dropdown-menu--{{ size() }}\n dropdown-menu--direction-{{ direction() }}\">\n <ng-content select=\"gld-dropdown-button\">no buttons</ng-content>\n </section>\n</ng-template>\n", styles: [":host{max-width:inherit}.dropdown-menu{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);--gld-dropdown-min-width: 100px;--gld-dropdown-bottom-position: 0;padding:var(--gld-spacing--xxxs);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);background:var(--gld-background);display:none;position:absolute;scale:0;z-index:1;min-width:var(--gld-dropdown-min-width);max-width:inherit}.dropdown-menu--direction-right{left:0;transform-origin:top left;transform:translateY(var(--gld-dropdown-bottom-position))}.dropdown-menu--direction-left{transform-origin:top right;transform:translate(-100%,var(--gld-dropdown-bottom-position))}.dropdown-menu--tiny{--gld-dropdown-bottom-position: 26px}.dropdown-menu--small{--gld-dropdown-bottom-position: 34px}.dropdown-menu--normal{--gld-dropdown-bottom-position: 39px}.dropdown-menu--normal.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 42px}.dropdown-menu--medium{--gld-dropdown-bottom-position: 47px}.dropdown-menu--medium.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 50px}.dropdown-menu--large{--gld-dropdown-bottom-position: 52px}.dropdown-menu--large.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 58px}gld-button:focus-within .dropdown-menu,gld-icon-button:focus-within .dropdown-menu{display:initial;scale:1;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "gld-button", inputs: ["id", "name", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full"], outputs: ["clicked"] }, { kind: "component", type: IconButton, selector: "gld-icon-button", inputs: ["icon", "id", "name", "iconSize", "space", "moveTopToBottom", "moveLeftToRight", "background", "disabled", "color"], outputs: ["clicked"] }, { kind: "directive", type: DropdownMenuTemplate, selector: "[gldDropdownMenuTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
397
397
|
}
|
|
398
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DropdownMenu, decorators: [{
|
|
399
399
|
type: Component,
|
|
400
400
|
args: [{ selector: 'gld-dropdown-menu', imports: [NgTemplateOutlet, ...components$6, directives], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Button -->\n@if (type() === DropdownType.button) {\n <gld-button\n #buttonChild\n [id]=\"id()\"\n [name]=\"name()\"\n [color]=\"color()\"\n [size]=\"size()\"\n [icon]=\"icon()\"\n [iconSize]=\"iconSize()\"\n [disabled]=\"disabled()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [full]=\"full()\">\n <ng-content />\n\n <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n </gld-button>\n} @else {\n <!-- Icon Button -->\n @let innerIcon = icon();\n @if (innerIcon) {\n <gld-icon-button\n #buttonChild\n [id]=\"id()\"\n [name]=\"name()\"\n [color]=\"color()\"\n [icon]=\"innerIcon\"\n [iconSize]=\"iconSize() ?? size()\"\n [disabled]=\"disabled()\"\n [moveTopToBottom]=\"moveTopToBottom()\"\n [moveLeftToRight]=\"moveLeftToRight()\"\n [background]=\"background()\">\n <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n </gld-icon-button>\n }\n}\n\n<ng-template #dropdownMenu>\n <!-- Menu -->\n <section\n class=\"dropdown-menu dropdown-menu--{{ type() }} dropdown-menu--{{ size() }}\n dropdown-menu--direction-{{ direction() }}\">\n <ng-content select=\"gld-dropdown-button\">no buttons</ng-content>\n </section>\n</ng-template>\n", styles: [":host{max-width:inherit}.dropdown-menu{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);--gld-dropdown-min-width: 100px;--gld-dropdown-bottom-position: 0;padding:var(--gld-spacing--xxxs);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);background:var(--gld-background);display:none;position:absolute;scale:0;z-index:1;min-width:var(--gld-dropdown-min-width);max-width:inherit}.dropdown-menu--direction-right{left:0;transform-origin:top left;transform:translateY(var(--gld-dropdown-bottom-position))}.dropdown-menu--direction-left{transform-origin:top right;transform:translate(-100%,var(--gld-dropdown-bottom-position))}.dropdown-menu--tiny{--gld-dropdown-bottom-position: 26px}.dropdown-menu--small{--gld-dropdown-bottom-position: 34px}.dropdown-menu--normal{--gld-dropdown-bottom-position: 39px}.dropdown-menu--normal.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 42px}.dropdown-menu--medium{--gld-dropdown-bottom-position: 47px}.dropdown-menu--medium.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 50px}.dropdown-menu--large{--gld-dropdown-bottom-position: 52px}.dropdown-menu--large.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 58px}gld-button:focus-within .dropdown-menu,gld-icon-button:focus-within .dropdown-menu{display:initial;scale:1;z-index:1}\n"] }]
|
|
401
401
|
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }], dropdownButtonChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DropdownButton), { isSignal: true }] }] } });
|
|
@@ -406,11 +406,11 @@ class Link {
|
|
|
406
406
|
this.LinkType = LinkType;
|
|
407
407
|
this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
|
|
408
408
|
this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
|
|
409
|
-
this.redirect = input('',
|
|
409
|
+
this.redirect = input('', ...(ngDevMode ? [{ debugName: "redirect" }] : []));
|
|
410
410
|
this.active = input(false, { ...(ngDevMode ? { debugName: "active" } : {}), transform: booleanAttribute });
|
|
411
411
|
this.external = input(false, { ...(ngDevMode ? { debugName: "external" } : {}), transform: booleanAttribute });
|
|
412
|
-
this.type = input(LinkType.default,
|
|
413
|
-
this.align = input(LinkAlign.center,
|
|
412
|
+
this.type = input(LinkType.default, ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
413
|
+
this.align = input(LinkAlign.center, ...(ngDevMode ? [{ debugName: "align" }] : []));
|
|
414
414
|
this.clicked = output();
|
|
415
415
|
}
|
|
416
416
|
emitClick() {
|
|
@@ -419,10 +419,10 @@ class Link {
|
|
|
419
419
|
keyup() {
|
|
420
420
|
this.emitClick();
|
|
421
421
|
}
|
|
422
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
423
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
422
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Link, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
423
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Link, isStandalone: true, selector: "gld-link", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, redirect: { classPropertyName: "redirect", publicName: "redirect", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "@if (external()) {\n <!-- It's external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n <!-- It isn't external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n @switch (buttonType) {\n @case ('anchor') {\n <a\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n [href]=\"redirect()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n target=\"_blank\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </a>\n }\n @case ('button') {\n @if (redirect()) {\n <!-- It has path to redirect -->\n <button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n [routerLink]=\"redirect()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n } @else {\n <!-- It doesn't have path to redirect -->\n <button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n }\n }\n }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-foreground-color);position:relative;display:inline-flex;align-items:center;padding:0;font:600 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);color:var(--gld-color);background:none;border:none;cursor:pointer;text-decoration:underline;will-change:color;transition:color var(--gld-animation-time--150)}.link--active,.link:active,.link:hover{--gld-color: var(--gld-purple)}.link--left{text-align:left}.link--right{text-align:right}.link--center{text-align:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
424
424
|
}
|
|
425
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
425
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Link, decorators: [{
|
|
426
426
|
type: Component,
|
|
427
427
|
args: [{ selector: 'gld-link', imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (external()) {\n <!-- It's external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n <!-- It isn't external link -->\n <ng-container\n [ngTemplateOutlet]=\"buttonTemplate\"\n [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n @switch (buttonType) {\n @case ('anchor') {\n <a\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n [href]=\"redirect()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n target=\"_blank\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </a>\n }\n @case ('button') {\n @if (redirect()) {\n <!-- It has path to redirect -->\n <button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\"\n [routerLink]=\"redirect()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n } @else {\n <!-- It doesn't have path to redirect -->\n <button\n id=\"{{ id() }}\"\n attr.aria-label=\"{{ name() }}\"\n class=\"link link--{{ align() }}\"\n [class.link--active]=\"active()\"\n (click)=\"emitClick()\"\n (keyup.enter)=\"keyup()\">\n <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n </button>\n }\n }\n }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-foreground-color);position:relative;display:inline-flex;align-items:center;padding:0;font:600 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);color:var(--gld-color);background:none;border:none;cursor:pointer;text-decoration:underline;will-change:color;transition:color var(--gld-animation-time--150)}.link--active,.link:active,.link:hover{--gld-color: var(--gld-purple)}.link--left{text-align:left}.link--right{text-align:right}.link--center{text-align:center}\n"] }]
|
|
428
428
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], redirect: [{ type: i0.Input, args: [{ isSignal: true, alias: "redirect", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], external: [{ type: i0.Input, args: [{ isSignal: true, alias: "external", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
@@ -430,12 +430,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
430
430
|
// Angular Imports
|
|
431
431
|
class ToggleButton {
|
|
432
432
|
constructor() {
|
|
433
|
-
this.value = input.required(
|
|
433
|
+
this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
434
434
|
this.changeValue = output();
|
|
435
|
-
this.current = signal(null,
|
|
436
|
-
this.disabled = signal(false,
|
|
437
|
-
this.error = signal(false,
|
|
438
|
-
this.selected = computed(() => Boolean(this.current() === this.value()),
|
|
435
|
+
this.current = signal(null, ...(ngDevMode ? [{ debugName: "current" }] : []));
|
|
436
|
+
this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
437
|
+
this.error = signal(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
438
|
+
this.selected = computed(() => Boolean(this.current() === this.value()), ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
439
439
|
}
|
|
440
440
|
select(value) {
|
|
441
441
|
this.changeValue.emit(value);
|
|
@@ -443,10 +443,10 @@ class ToggleButton {
|
|
|
443
443
|
keyup(value) {
|
|
444
444
|
this.select(value);
|
|
445
445
|
}
|
|
446
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
447
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0
|
|
446
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToggleButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
447
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: ToggleButton, isStandalone: true, selector: "gld-toggle-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changeValue: "changeValue" }, ngImport: i0, template: "<button\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <ng-content> empty button </ng-content>\n</button>\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xxxs);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover)}.button:active{transform:scale(.95)}.button--selected{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--selected)}.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
448
448
|
}
|
|
449
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
449
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToggleButton, decorators: [{
|
|
450
450
|
type: Component,
|
|
451
451
|
args: [{ selector: 'gld-toggle-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [tabindex]=\"disabled() ? '-1' : '0'\"\n class=\"button\"\n [class.button--selected]=\"selected()\"\n (keyup.enter)=\"keyup(value())\"\n (click)=\"select(value())\">\n <ng-content> empty button </ng-content>\n</button>\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xxxs);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover)}.button:active{transform:scale(.95)}.button--selected{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--selected)}.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"] }]
|
|
452
452
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }] } });
|
|
@@ -456,10 +456,10 @@ class ToggleGroup {
|
|
|
456
456
|
constructor() {
|
|
457
457
|
this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `toggle-id-${value.trim().split(' ').join('-')}` });
|
|
458
458
|
this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `toggle-name-${value.trim().split(' ').join('-')}` });
|
|
459
|
-
this.initialValue = input(null,
|
|
459
|
+
this.initialValue = input(null, ...(ngDevMode ? [{ debugName: "initialValue" }] : []));
|
|
460
460
|
this.changeValue = output();
|
|
461
461
|
this.changeFocus = output();
|
|
462
|
-
this.toggleButtonChildren = contentChildren(ToggleButton,
|
|
462
|
+
this.toggleButtonChildren = contentChildren(ToggleButton, ...(ngDevMode ? [{ debugName: "toggleButtonChildren" }] : []));
|
|
463
463
|
effect(() => {
|
|
464
464
|
const initialValue = this.initialValue();
|
|
465
465
|
if (initialValue)
|
|
@@ -482,10 +482,10 @@ class ToggleGroup {
|
|
|
482
482
|
updateErrorInChildren(error) {
|
|
483
483
|
this.toggleButtonChildren().map((toggleButton) => toggleButton.error.set(error));
|
|
484
484
|
}
|
|
485
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
486
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0
|
|
485
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
486
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: ToggleGroup, isStandalone: true, selector: "gld-toggle-group", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, queries: [{ propertyName: "toggleButtonChildren", predicate: ToggleButton, isSignal: true }], ngImport: i0, template: "<section class=\"toggle\" id=\"{{ id() }}\" [attr.name]=\"name()\">\n <ng-content select=\"gld-toggle-button\" />\n</section>\n", styles: [":host{display:inline-block}.toggle{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);padding:2px;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
487
487
|
}
|
|
488
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
488
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToggleGroup, decorators: [{
|
|
489
489
|
type: Component,
|
|
490
490
|
args: [{ selector: 'gld-toggle-group', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"toggle\" id=\"{{ id() }}\" [attr.name]=\"name()\">\n <ng-content select=\"gld-toggle-button\" />\n</section>\n", styles: [":host{display:inline-block}.toggle{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);padding:2px;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);display:flex}\n"] }]
|
|
491
491
|
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }], toggleButtonChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ToggleButton), { isSignal: true }] }] } });
|
|
@@ -808,11 +808,11 @@ function mustUnmatch({ controlName, mustUnmatchControlName, errorMessage, }) {
|
|
|
808
808
|
class InputError {
|
|
809
809
|
constructor() {
|
|
810
810
|
this.Boolean = Boolean;
|
|
811
|
-
this.errors = input.required(
|
|
811
|
+
this.errors = input.required(...(ngDevMode ? [{ debugName: "errors" }] : []));
|
|
812
812
|
this.border = input(false, { ...(ngDevMode ? { debugName: "border" } : {}), transform: booleanAttribute });
|
|
813
813
|
this.content = contentChildren(InputErrorMessage, { ...(ngDevMode ? { debugName: "content" } : {}), descendants: true });
|
|
814
|
-
this.hasContent = signal(false,
|
|
815
|
-
this.firstErrorKey = signal(null,
|
|
814
|
+
this.hasContent = signal(false, ...(ngDevMode ? [{ debugName: "hasContent" }] : []));
|
|
815
|
+
this.firstErrorKey = signal(null, ...(ngDevMode ? [{ debugName: "firstErrorKey" }] : []));
|
|
816
816
|
effect(() => this.hasContent.set(this.content()?.length ? true : false), {
|
|
817
817
|
allowSignalWrites: true,
|
|
818
818
|
});
|
|
@@ -821,10 +821,10 @@ class InputError {
|
|
|
821
821
|
#resolveFirstErrorKey(errors) {
|
|
822
822
|
this.firstErrorKey.set(Object.keys(errors || {})[0] ?? null);
|
|
823
823
|
}
|
|
824
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
825
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
824
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputError, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
825
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: InputError, isStandalone: true, selector: "gld-input-error", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: true, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "content", predicate: InputErrorMessage, descendants: true, isSignal: true }], ngImport: i0, template: "<section class=\"error\" [class.error--with-border]=\"border()\">\n <span class=\"error__message\">\n @if (hasContent()) {\n <ng-content />\n } @else {\n <ng-container [ngTemplateOutlet]=\"errorsMessageDefault\" />\n }\n </span>\n</section>\n\n<ng-template #errorsMessageDefault>\n @switch (firstErrorKey()) {\n @case ('required') {\n This field is required!\n }\n @case ('email') {\n {{ this.errors()?.['email'] }}\n }\n @case ('maxlength') {\n This field must have a maximum of\n {{ this.errors()?.['maxlength'].requiredLength }}\n characters!\n }\n @case ('minlength') {\n This field must have a minimum of\n {{ this.errors()?.['minlength'].requiredLength }}\n characters!\n }\n @case ('isDate') {\n {{ this.errors()?.['isDate'] }}\n }\n @case ('minimumAge') {\n This field must meet the minimum age requirement of\n {{ this.errors()?.['minimumAge'].requiredAge }} years\n }\n @case ('isNaturalNumber') {\n {{ this.errors()?.['isNaturalNumber'] }}\n }\n @case ('mustMatch') {\n {{ this.errors()?.['mustMatch'] }}\n }\n @case ('mustUnmatch') {\n {{ this.errors()?.['mustUnmatch'] }}\n }\n @case ('isString') {\n {{ this.errors()?.['isString'] }}\n }\n @default {\n empty error message\n }\n }\n</ng-template>\n", styles: [".error{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-radius: var(--gld-radius--xxs);--gld-border-color: var(--gld-red);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.error__icon{display:flex;align-items:center}.error__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.error__message:first-letter{text-transform:uppercase}.error--with-border{border-top:var(--gld-border-size) solid var(--gld-border-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
826
826
|
}
|
|
827
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
827
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputError, decorators: [{
|
|
828
828
|
type: Component,
|
|
829
829
|
args: [{ selector: 'gld-input-error', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"error\" [class.error--with-border]=\"border()\">\n <span class=\"error__message\">\n @if (hasContent()) {\n <ng-content />\n } @else {\n <ng-container [ngTemplateOutlet]=\"errorsMessageDefault\" />\n }\n </span>\n</section>\n\n<ng-template #errorsMessageDefault>\n @switch (firstErrorKey()) {\n @case ('required') {\n This field is required!\n }\n @case ('email') {\n {{ this.errors()?.['email'] }}\n }\n @case ('maxlength') {\n This field must have a maximum of\n {{ this.errors()?.['maxlength'].requiredLength }}\n characters!\n }\n @case ('minlength') {\n This field must have a minimum of\n {{ this.errors()?.['minlength'].requiredLength }}\n characters!\n }\n @case ('isDate') {\n {{ this.errors()?.['isDate'] }}\n }\n @case ('minimumAge') {\n This field must meet the minimum age requirement of\n {{ this.errors()?.['minimumAge'].requiredAge }} years\n }\n @case ('isNaturalNumber') {\n {{ this.errors()?.['isNaturalNumber'] }}\n }\n @case ('mustMatch') {\n {{ this.errors()?.['mustMatch'] }}\n }\n @case ('mustUnmatch') {\n {{ this.errors()?.['mustUnmatch'] }}\n }\n @case ('isString') {\n {{ this.errors()?.['isString'] }}\n }\n @default {\n empty error message\n }\n }\n</ng-template>\n", styles: [".error{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-radius: var(--gld-radius--xxs);--gld-border-color: var(--gld-red);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.error__icon{display:flex;align-items:center}.error__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.error__message:first-letter{text-transform:uppercase}.error--with-border{border-top:var(--gld-border-size) solid var(--gld-border-color)}\n"] }]
|
|
830
830
|
}], ctorParameters: () => [], propDecorators: { errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: true }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], content: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => InputErrorMessage), { ...{
|
|
@@ -839,21 +839,21 @@ class Input {
|
|
|
839
839
|
constructor() {
|
|
840
840
|
this.#destroyRef = inject(DestroyRef);
|
|
841
841
|
this.#changeDetectorRef = inject(ChangeDetectorRef);
|
|
842
|
-
this.control = input.required(
|
|
842
|
+
this.control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
843
843
|
this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
|
|
844
844
|
this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
|
|
845
|
-
this.label = input('',
|
|
846
|
-
this.placeholder = input('',
|
|
847
|
-
this.type = input('text',
|
|
848
|
-
this.mask = input('',
|
|
845
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
846
|
+
this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
847
|
+
this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
848
|
+
this.mask = input('', ...(ngDevMode ? [{ debugName: "mask" }] : []));
|
|
849
849
|
this.suffix = input(false, { ...(ngDevMode ? { debugName: "suffix" } : {}), transform: booleanAttribute });
|
|
850
|
-
this.innerControl = signal(new FormControl('', { nonNullable: true }),
|
|
850
|
+
this.innerControl = signal(new FormControl('', { nonNullable: true }), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
|
|
851
851
|
this.hasValidators = signal({
|
|
852
852
|
required: false,
|
|
853
853
|
naturalNumber: false,
|
|
854
854
|
string: false,
|
|
855
855
|
maxLength: null,
|
|
856
|
-
},
|
|
856
|
+
}, ...(ngDevMode ? [{ debugName: "hasValidators" }] : []));
|
|
857
857
|
this.onChange = (value) => { };
|
|
858
858
|
this.onTouched = () => { };
|
|
859
859
|
this.innerControl()
|
|
@@ -955,8 +955,8 @@ class Input {
|
|
|
955
955
|
});
|
|
956
956
|
// console.log('hasValidators', this.hasValidators())
|
|
957
957
|
}
|
|
958
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
959
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
958
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
959
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Input, isStandalone: true, selector: "gld-input", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
960
960
|
{
|
|
961
961
|
provide: NG_VALUE_ACCESSOR,
|
|
962
962
|
useExisting: forwardRef(() => Input),
|
|
@@ -964,7 +964,7 @@ class Input {
|
|
|
964
964
|
},
|
|
965
965
|
], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n\n <!-- Input -->\n <input\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onTouched()\"\n (keyup.escape)=\"onBlur()\" />\n\n <!-- Suffix -->\n @if (suffix()) {\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n }\n</section>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n <ng-content select=\"[inputSuffix]\" />\n </span>\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputError, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
966
966
|
}
|
|
967
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
967
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Input, decorators: [{
|
|
968
968
|
type: Component,
|
|
969
969
|
args: [{ selector: 'gld-input', imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$5], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
970
970
|
{
|
|
@@ -983,22 +983,22 @@ class InputDate {
|
|
|
983
983
|
constructor() {
|
|
984
984
|
this.#destroyRef = inject(DestroyRef);
|
|
985
985
|
this.#changeDetectorRef = inject(ChangeDetectorRef);
|
|
986
|
-
this.control = input.required(
|
|
986
|
+
this.control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
987
987
|
this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
|
|
988
988
|
this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
|
|
989
|
-
this.label = input('',
|
|
989
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
990
990
|
this.min = input('', { ...(ngDevMode ? { debugName: "min" } : {}), transform: (value) => formatISODateToDDMMYYYY({ date: value }) });
|
|
991
991
|
this.max = input('', { ...(ngDevMode ? { debugName: "max" } : {}), transform: (value) => formatISODateToDDMMYYYY({ date: value }) });
|
|
992
|
-
this.placeholder = input('',
|
|
993
|
-
this.mask = input('',
|
|
992
|
+
this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
993
|
+
this.mask = input('', ...(ngDevMode ? [{ debugName: "mask" }] : []));
|
|
994
994
|
this.suffix = input(false, { ...(ngDevMode ? { debugName: "suffix" } : {}), transform: booleanAttribute });
|
|
995
|
-
this.innerControl = signal(new FormControl('', { nonNullable: true }),
|
|
995
|
+
this.innerControl = signal(new FormControl('', { nonNullable: true }), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
|
|
996
996
|
this.hasValidators = signal({
|
|
997
997
|
required: false,
|
|
998
998
|
naturalNumber: false,
|
|
999
999
|
string: false,
|
|
1000
1000
|
maxLength: null,
|
|
1001
|
-
},
|
|
1001
|
+
}, ...(ngDevMode ? [{ debugName: "hasValidators" }] : []));
|
|
1002
1002
|
this.onChange = (value) => { };
|
|
1003
1003
|
this.onTouched = () => { };
|
|
1004
1004
|
this.innerControl()
|
|
@@ -1085,8 +1085,8 @@ class InputDate {
|
|
|
1085
1085
|
});
|
|
1086
1086
|
// console.log('hasValidators', this.hasValidators())
|
|
1087
1087
|
}
|
|
1088
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1089
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1088
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputDate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1089
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: InputDate, isStandalone: true, selector: "gld-input-date", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1090
1090
|
{
|
|
1091
1091
|
provide: NG_VALUE_ACCESSOR,
|
|
1092
1092
|
useExisting: forwardRef(() => InputDate),
|
|
@@ -1094,7 +1094,7 @@ class InputDate {
|
|
|
1094
1094
|
},
|
|
1095
1095
|
], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n\n <!-- Input -->\n <input\n type=\"date\"\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onTouched()\"\n (keyup.escape)=\"onBlur()\" />\n\n <!-- Suffix -->\n @if (suffix()) {\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n }\n</section>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n <ng-content select=\"[inputSuffix]\" />\n </span>\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputError, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1096
1096
|
}
|
|
1097
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1097
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputDate, decorators: [{
|
|
1098
1098
|
type: Component,
|
|
1099
1099
|
args: [{ selector: 'gld-input-date', imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$4], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1100
1100
|
{
|
|
@@ -1107,10 +1107,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
1107
1107
|
|
|
1108
1108
|
// Angular Imports
|
|
1109
1109
|
class InputHint {
|
|
1110
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1111
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0
|
|
1110
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputHint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: InputHint, isStandalone: true, selector: "gld-input-hint", ngImport: i0, template: "<section class=\"hint\">\n <span class=\"hint__message\">\n <ng-content>hint empty</ng-content>\n </span>\n</section>\n", styles: [".hint{--gld-color: var(--gld-foreground-color);--gld-background: var(--gld-gray-transparent--020);--gld-radius: var(--gld-radius--xxs);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.hint__icon{display:flex;align-items:center}.hint__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.hint__message:first-letter{text-transform:uppercase}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1112
1112
|
}
|
|
1113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InputHint, decorators: [{
|
|
1114
1114
|
type: Component,
|
|
1115
1115
|
args: [{ selector: 'gld-input-hint', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"hint\">\n <span class=\"hint__message\">\n <ng-content>hint empty</ng-content>\n </span>\n</section>\n", styles: [".hint{--gld-color: var(--gld-foreground-color);--gld-background: var(--gld-gray-transparent--020);--gld-radius: var(--gld-radius--xxs);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.hint__icon{display:flex;align-items:center}.hint__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.hint__message:first-letter{text-transform:uppercase}\n"] }]
|
|
1116
1116
|
}] });
|
|
@@ -1118,13 +1118,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
1118
1118
|
// Angular Imports
|
|
1119
1119
|
class RadioButton {
|
|
1120
1120
|
constructor() {
|
|
1121
|
-
this.value = input.required(
|
|
1121
|
+
this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
1122
1122
|
this.changeValue = output();
|
|
1123
1123
|
this.changeFocus = output();
|
|
1124
|
-
this.current = signal(null,
|
|
1125
|
-
this.disabled = signal(false,
|
|
1126
|
-
this.error = signal(false,
|
|
1127
|
-
this.selected = computed(() => Boolean(this.current() === this.value()),
|
|
1124
|
+
this.current = signal(null, ...(ngDevMode ? [{ debugName: "current" }] : []));
|
|
1125
|
+
this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1126
|
+
this.error = signal(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1127
|
+
this.selected = computed(() => Boolean(this.current() === this.value()), ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
1128
1128
|
}
|
|
1129
1129
|
select(value) {
|
|
1130
1130
|
this.changeValue.emit(value);
|
|
@@ -1138,10 +1138,10 @@ class RadioButton {
|
|
|
1138
1138
|
onBlur() {
|
|
1139
1139
|
this.changeFocus.emit(false);
|
|
1140
1140
|
}
|
|
1141
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1142
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0
|
|
1141
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadioButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1142
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: RadioButton, isStandalone: true, selector: "gld-radio-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, ngImport: i0, template: "<button\n class=\"radio\"\n [tabindex]=\"disabled() ? '-1' : '0'\"\n [class.radio--selected]=\"selected()\"\n [class.radio--disabled]=\"disabled()\"\n [class.radio--error]=\"error()\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keyup.enter)=\"keyup(value())\"\n (keyup.escape)=\"onBlur()\"\n (click)=\"select(value())\">\n <span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\n\n <span class=\"radio__label\">\n <ng-content>empty radio button</ng-content>\n </span>\n</button>\n", styles: [":host{display:inline-flex;color:inherit;width:inherit;height:inherit}.radio{--gld-height: 26px;--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-dot-color: var(--gld-blue);--gld-dot-color--outer: var(--gld-gray-transparent--060);--gld-dot-color--outer-hover: var(--gld-blue);--gld-dot-color--outer-selected: var(--gld-blue);--gld-dot-color--outer-error: var(--gld-red);display:inline-flex;justify-content:center;align-items:center;border:none;background:none;gap:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-color);height:var(--gld-height);padding:var(--gld-spacing--xxxs);cursor:pointer;-webkit-user-select:none;user-select:none}.radio:hover .radio__icon,.radio:focus .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-hover)}.radio:focus{outline:none}.radio__icon{--gld-size: 20px;width:var(--gld-size);height:var(--gld-size);border-radius:50%;border:var(--gld-border-size) solid var(--gld-dot-color--outer);position:relative;display:flex;justify-content:center;align-items:center}.radio__icon--selected:before{content:\"\";position:absolute;width:calc(var(--gld-size) / 2);height:calc(var(--gld-size) / 2);background:var(--gld-dot-color);border-radius:inherit}.radio__label:first-letter{text-transform:uppercase}.radio--selected{--gld-dot-color--outer: var(--gld-dot-color--outer-selected)}.radio--disabled{--gld-color: var(--gld-color--disabled);--gld-dot-color--outer: var(--gld-color--disabled);pointer-events:none}.radio--error .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-error)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1143
1143
|
}
|
|
1144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadioButton, decorators: [{
|
|
1145
1145
|
type: Component,
|
|
1146
1146
|
args: [{ selector: 'gld-radio-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"radio\"\n [tabindex]=\"disabled() ? '-1' : '0'\"\n [class.radio--selected]=\"selected()\"\n [class.radio--disabled]=\"disabled()\"\n [class.radio--error]=\"error()\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keyup.enter)=\"keyup(value())\"\n (keyup.escape)=\"onBlur()\"\n (click)=\"select(value())\">\n <span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\n\n <span class=\"radio__label\">\n <ng-content>empty radio button</ng-content>\n </span>\n</button>\n", styles: [":host{display:inline-flex;color:inherit;width:inherit;height:inherit}.radio{--gld-height: 26px;--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-dot-color: var(--gld-blue);--gld-dot-color--outer: var(--gld-gray-transparent--060);--gld-dot-color--outer-hover: var(--gld-blue);--gld-dot-color--outer-selected: var(--gld-blue);--gld-dot-color--outer-error: var(--gld-red);display:inline-flex;justify-content:center;align-items:center;border:none;background:none;gap:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-color);height:var(--gld-height);padding:var(--gld-spacing--xxxs);cursor:pointer;-webkit-user-select:none;user-select:none}.radio:hover .radio__icon,.radio:focus .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-hover)}.radio:focus{outline:none}.radio__icon{--gld-size: 20px;width:var(--gld-size);height:var(--gld-size);border-radius:50%;border:var(--gld-border-size) solid var(--gld-dot-color--outer);position:relative;display:flex;justify-content:center;align-items:center}.radio__icon--selected:before{content:\"\";position:absolute;width:calc(var(--gld-size) / 2);height:calc(var(--gld-size) / 2);background:var(--gld-dot-color);border-radius:inherit}.radio__label:first-letter{text-transform:uppercase}.radio--selected{--gld-dot-color--outer: var(--gld-dot-color--outer-selected)}.radio--disabled{--gld-color: var(--gld-color--disabled);--gld-dot-color--outer: var(--gld-color--disabled);pointer-events:none}.radio--error .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-error)}\n"] }]
|
|
1147
1147
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }] } });
|
|
@@ -1154,16 +1154,16 @@ class RadioGroup {
|
|
|
1154
1154
|
constructor() {
|
|
1155
1155
|
this.#destroyRef = inject(DestroyRef);
|
|
1156
1156
|
this.#changeDetectorRef = inject(ChangeDetectorRef);
|
|
1157
|
-
this.control = input.required(
|
|
1157
|
+
this.control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
1158
1158
|
this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
|
|
1159
1159
|
this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
|
|
1160
|
-
this.label = input('',
|
|
1161
|
-
this.direction = input(RadioDirection.horizontal,
|
|
1162
|
-
this.radioButtonChildren = contentChildren(RadioButton,
|
|
1163
|
-
this.innerControl = signal(new FormControl('', { nonNullable: true }),
|
|
1160
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1161
|
+
this.direction = input(RadioDirection.horizontal, ...(ngDevMode ? [{ debugName: "direction" }] : []));
|
|
1162
|
+
this.radioButtonChildren = contentChildren(RadioButton, ...(ngDevMode ? [{ debugName: "radioButtonChildren" }] : []));
|
|
1163
|
+
this.innerControl = signal(new FormControl('', { nonNullable: true }), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
|
|
1164
1164
|
this.hasValidators = signal({
|
|
1165
1165
|
required: false,
|
|
1166
|
-
},
|
|
1166
|
+
}, ...(ngDevMode ? [{ debugName: "hasValidators" }] : []));
|
|
1167
1167
|
this.onChange = (value) => { };
|
|
1168
1168
|
this.onTouched = () => { };
|
|
1169
1169
|
this.innerControl()
|
|
@@ -1247,8 +1247,8 @@ class RadioGroup {
|
|
|
1247
1247
|
});
|
|
1248
1248
|
// console.log('hasValidators', this.hasValidators())
|
|
1249
1249
|
}
|
|
1250
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1251
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1250
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1251
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: RadioGroup, isStandalone: true, selector: "gld-radio-group", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1252
1252
|
{
|
|
1253
1253
|
provide: NG_VALUE_ACCESSOR,
|
|
1254
1254
|
useExisting: forwardRef(() => RadioGroup),
|
|
@@ -1256,7 +1256,7 @@ class RadioGroup {
|
|
|
1256
1256
|
},
|
|
1257
1257
|
], queries: [{ propertyName: "radioButtonChildren", predicate: RadioButton, isSignal: true }], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<article class=\"radio\" [class.radio--disabled]=\"disabled\" id=\"{{ id() }}\" [attr.name]=\"name()\">\n <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n <section class=\"radio__items radio__items--{{ direction() }}\">\n <ng-content select=\"gld-radio-button\" />\n </section>\n</article>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error border [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n", styles: [".radio{--gld-color: var(--gld-foreground-color);--gld-label-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);margin-bottom:var(--gld-spacing--xxxs)}.radio label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text;margin-bottom:var(--gld-spacing--xxxs)}.radio label:first-letter{text-transform:uppercase}.radio--disabled .radio__label{--gld-color: var(--gld-color--disabled);pointer-events:none}.radio__items{display:flex;gap:var(--gld-spacing--xxs)}.radio__items--horizontal{align-items:center}.radio__items--vertical{flex-direction:column}\n"], dependencies: [{ kind: "component", type: InputError, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1258
1258
|
}
|
|
1259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RadioGroup, decorators: [{
|
|
1260
1260
|
type: Component,
|
|
1261
1261
|
args: [{ selector: 'gld-radio-group', imports: [...components$3], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1262
1262
|
{
|
|
@@ -1270,7 +1270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
1270
1270
|
// Angular Imports
|
|
1271
1271
|
class SelectOption {
|
|
1272
1272
|
constructor() {
|
|
1273
|
-
this.value = input.required(
|
|
1273
|
+
this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
1274
1274
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
1275
1275
|
this.selected = output();
|
|
1276
1276
|
this.changeFocus = output();
|
|
@@ -1288,10 +1288,10 @@ class SelectOption {
|
|
|
1288
1288
|
onBlur() {
|
|
1289
1289
|
this.changeFocus.emit(false);
|
|
1290
1290
|
}
|
|
1291
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1292
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0
|
|
1291
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1292
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: SelectOption, isStandalone: true, selector: "gld-select-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", changeFocus: "changeFocus" }, ngImport: i0, template: "<button\n [tabindex]=\"disabled() ? '-1' : '0'\"\n (keyup.enter)=\"keyup()\"\n (click)=\"select()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keyup.escape)=\"onBlur()\">\n <span><ng-content> an option </ng-content></span>\n</button>\n", styles: [":host{height:var(--gld-height)}button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xs) var(--gld-spacing--s);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;display:flex;align-items:center;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer}button:hover,button:focus{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--hover)}button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1293
1293
|
}
|
|
1294
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1294
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectOption, decorators: [{
|
|
1295
1295
|
type: Component,
|
|
1296
1296
|
args: [{ selector: 'gld-select-option', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [tabindex]=\"disabled() ? '-1' : '0'\"\n (keyup.enter)=\"keyup()\"\n (click)=\"select()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keyup.escape)=\"onBlur()\">\n <span><ng-content> an option </ng-content></span>\n</button>\n", styles: [":host{height:var(--gld-height)}button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xs) var(--gld-spacing--s);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;display:flex;align-items:center;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer}button:hover,button:focus{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--hover)}button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
|
|
1297
1297
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }] } });
|
|
@@ -1305,23 +1305,23 @@ class Select {
|
|
|
1305
1305
|
this.#destroyRef = inject(DestroyRef);
|
|
1306
1306
|
this.#changeDetectorRef = inject(ChangeDetectorRef);
|
|
1307
1307
|
this.Icons = Icons;
|
|
1308
|
-
this.control = input.required(
|
|
1308
|
+
this.control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
1309
1309
|
this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
|
|
1310
1310
|
this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
|
|
1311
|
-
this.label = input('',
|
|
1312
|
-
this.placeholder = input('',
|
|
1313
|
-
this.mask = input('',
|
|
1314
|
-
this.transform = input((value) => String(value),
|
|
1315
|
-
this.selectElement = viewChild('selectElement',
|
|
1316
|
-
this.selectOptionChildren = contentChildren(SelectOption,
|
|
1317
|
-
this.innerControl = signal(new FormControl('', { nonNullable: true }),
|
|
1311
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1312
|
+
this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
1313
|
+
this.mask = input('', ...(ngDevMode ? [{ debugName: "mask" }] : []));
|
|
1314
|
+
this.transform = input((value) => String(value), ...(ngDevMode ? [{ debugName: "transform" }] : []));
|
|
1315
|
+
this.selectElement = viewChild('selectElement', ...(ngDevMode ? [{ debugName: "selectElement" }] : []));
|
|
1316
|
+
this.selectOptionChildren = contentChildren(SelectOption, ...(ngDevMode ? [{ debugName: "selectOptionChildren" }] : []));
|
|
1317
|
+
this.innerControl = signal(new FormControl('', { nonNullable: true }), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
|
|
1318
1318
|
this.hasValidators = signal({
|
|
1319
1319
|
required: false,
|
|
1320
1320
|
naturalNumber: false,
|
|
1321
1321
|
string: false,
|
|
1322
1322
|
maxLength: null,
|
|
1323
|
-
},
|
|
1324
|
-
this.isMenuOpen = signal(false,
|
|
1323
|
+
}, ...(ngDevMode ? [{ debugName: "hasValidators" }] : []));
|
|
1324
|
+
this.isMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMenuOpen" }] : []));
|
|
1325
1325
|
this.onChange = (value) => { };
|
|
1326
1326
|
this.onTouched = () => { };
|
|
1327
1327
|
effect(() => {
|
|
@@ -1471,8 +1471,8 @@ class Select {
|
|
|
1471
1471
|
});
|
|
1472
1472
|
// console.log('hasValidators', this.hasValidators())
|
|
1473
1473
|
}
|
|
1474
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1475
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1474
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1475
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Select, isStandalone: true, selector: "gld-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1476
1476
|
{
|
|
1477
1477
|
provide: NG_VALUE_ACCESSOR,
|
|
1478
1478
|
useExisting: forwardRef(() => Select),
|
|
@@ -1480,7 +1480,7 @@ class Select {
|
|
|
1480
1480
|
},
|
|
1481
1481
|
], queries: [{ propertyName: "selectOptionChildren", predicate: SelectOption, isSignal: true }], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section #selectElement class=\"select\">\n <section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n <!-- Input -->\n <input\n type=\"text\"\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keyup.escape)=\"onBlur()\" />\n\n <!-- Suffix -->\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\n <!-- Menu -->\n <ng-container [ngTemplateOutlet]=\"menuTemplate\" />\n </section>\n <!-- Errors -->\n @if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n } @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n }\n</section>\n\n<!-- Menu Template -->\n<ng-template #menuTemplate>\n <section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\n <ng-content select=\"gld-select-option\" />\n </section>\n</ng-template>\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n @if (control().pending) {\n <gld-icon\n size=\"small\"\n class=\"input-icon input-icon--animated\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"Icons.loader4Fill\"\n [disabled]=\"disabled\" />\n } @else {\n <gld-icon\n size=\"small\"\n class=\"input-icon\"\n [class.input-icon--rotated]=\"isMenuOpen()\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"Icons.arrowDownSLine\"\n [disabled]=\"disabled\"\n (clicked)=\"arrowIconClicked()\" />\n }\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n\n<!-- FIXME: Verify why this element is here -->\n<!-- Suffix Template -->\n<!-- <ng-template #suffixTemplate>\n <gld-icon\n size=\"small\"\n class=\"input-icon\"\n [class.input-icon--error]=\"errors\"\n [icon]=\"Icons.arrowDownSLine\" />\n</ng-template> -->\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Icon, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }, { kind: "component", type: InputError, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1482
1482
|
}
|
|
1483
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Select, decorators: [{
|
|
1484
1484
|
type: Component,
|
|
1485
1485
|
args: [{ selector: 'gld-select', imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$2], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1486
1486
|
{
|
|
@@ -1499,22 +1499,22 @@ class Textarea {
|
|
|
1499
1499
|
constructor() {
|
|
1500
1500
|
this.#destroyRef = inject(DestroyRef);
|
|
1501
1501
|
this.#changeDetectorRef = inject(ChangeDetectorRef);
|
|
1502
|
-
this.control = input.required(
|
|
1502
|
+
this.control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
1503
1503
|
this.id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
|
|
1504
1504
|
this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
|
|
1505
|
-
this.label = input('',
|
|
1506
|
-
this.placeholder = input('',
|
|
1507
|
-
this.type = input('text',
|
|
1505
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
1506
|
+
this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
1507
|
+
this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
1508
1508
|
this.suffix = input(false, { ...(ngDevMode ? { debugName: "suffix" } : {}), transform: booleanAttribute });
|
|
1509
1509
|
this.onChange = (value) => { };
|
|
1510
1510
|
this.onTouched = () => { };
|
|
1511
|
-
this.innerControl = signal(new FormControl('', { nonNullable: true }),
|
|
1511
|
+
this.innerControl = signal(new FormControl('', { nonNullable: true }), ...(ngDevMode ? [{ debugName: "innerControl" }] : []));
|
|
1512
1512
|
this.hasValidators = signal({
|
|
1513
1513
|
required: false,
|
|
1514
1514
|
naturalNumber: false,
|
|
1515
1515
|
string: false,
|
|
1516
1516
|
maxLength: null,
|
|
1517
|
-
},
|
|
1517
|
+
}, ...(ngDevMode ? [{ debugName: "hasValidators" }] : []));
|
|
1518
1518
|
this.innerControl()
|
|
1519
1519
|
.valueChanges.pipe(takeUntilDestroyed(this.#destroyRef))
|
|
1520
1520
|
.subscribe((value) => {
|
|
@@ -1606,8 +1606,8 @@ class Textarea {
|
|
|
1606
1606
|
});
|
|
1607
1607
|
// console.log('hasValidators', this.hasValidators())
|
|
1608
1608
|
}
|
|
1609
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1610
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1609
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Textarea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1610
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Textarea, isStandalone: true, selector: "gld-textarea", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1611
1611
|
{
|
|
1612
1612
|
provide: NG_VALUE_ACCESSOR,
|
|
1613
1613
|
useExisting: forwardRef(() => Textarea),
|
|
@@ -1615,7 +1615,7 @@ class Textarea {
|
|
|
1615
1615
|
},
|
|
1616
1616
|
], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n <!-- Label -->\n @if (label()) {\n <label for=\"{{ id() }}\">\n <span>{{ label() }}</span>\n @if (hasValidators().required) {\n <span>*</span>\n }\n </label>\n }\n\n <!-- Input -->\n <textarea\n id=\"{{ id() }}\"\n name=\"{{ name() }}\"\n [tabindex]=\"disabled ? '-1' : '0'\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"innerControl()\"\n [attr.maxlength]=\"hasValidators().maxLength\"\n (focus)=\"onFocus()\"\n (blur)=\"onTouched()\"\n (keyup.escape)=\"onBlur()\"></textarea>\n\n <!-- Suffix -->\n @if (suffix()) {\n <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n }\n</section>\n<!-- Errors -->\n@if (errors) {\n <ng-content select=\"gld-input-error\">\n <gld-input-error [errors]=\"control().errors\" />\n </ng-content>\n} @else {\n <!-- Hint -->\n <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix emplate -->\n<ng-template #suffixTemplate>\n <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n <ng-content select=\"[inputSuffix]\" />\n </span>\n</ng-template>\n\n<!-- <h3>Debugging</h3>\n<section>errors: {{ errors }}</section>\n<section>invalid: {{ control().invalid }}</section>\n<section>dirty: {{ control().dirty }}</section>\n<section>touched: {{ control().touched }}</section>\n<section>disable: {{ control().disabled }}</section> -->\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-min-height: 120px;--gld-max-height: 240px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input textarea{display:flex;width:100%;min-width:var(--gld-min-with);min-height:var(--gld-min-height);max-height:var(--gld-max-height);padding:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;resize:vertical;form-sizing:content;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input textarea:focus{--gld-border-color: var(--gld-blue)}.input textarea::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputError, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1617
1617
|
}
|
|
1618
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1618
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Textarea, decorators: [{
|
|
1619
1619
|
type: Component,
|
|
1620
1620
|
args: [{ selector: 'gld-textarea', imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$1], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
1621
1621
|
{
|
|
@@ -1629,16 +1629,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
1629
1629
|
// Angular Imports
|
|
1630
1630
|
class Image {
|
|
1631
1631
|
constructor() {
|
|
1632
|
-
this.src = input.required(
|
|
1633
|
-
this.alt = input.required(
|
|
1632
|
+
this.src = input.required(...(ngDevMode ? [{ debugName: "src" }] : []));
|
|
1633
|
+
this.alt = input.required(...(ngDevMode ? [{ debugName: "alt" }] : []));
|
|
1634
1634
|
// srcset = input<string>('')
|
|
1635
1635
|
// sizes = input<string>('')
|
|
1636
1636
|
this.priority = input(false, { ...(ngDevMode ? { debugName: "priority" } : {}), transform: booleanAttribute });
|
|
1637
1637
|
}
|
|
1638
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1639
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1638
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Image, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1639
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Image, isStandalone: true, selector: "gld-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- @if (srcset() && sizes()) {\n @if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" [ngSrcset]=\"srcset()\" [sizes]=\"sizes()\" />\n } @else {\n <img\n fill\n alt=\"{{ alt() }}\"\n [ngSrc]=\"src()\"\n [ngSrcset]=\"srcset()\"\n [sizes]=\"sizes()\"\n loading=\"lazy\" />\n }\n} @else {\n @if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\n } @else {\n <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\n }\n} -->\n\n@if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\n} @else {\n <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\n}\n", styles: [":host{position:relative;aspect-ratio:1/1;overflow:hidden;display:inline-block;object-fit:inherit;width:inherit;height:inherit}img{width:inherit;height:inherit;max-width:100%;max-height:100%;display:inherit;aspect-ratio:inherit;z-index:inherit;object-fit:inherit;border-radius:inherit;border:inherit;background-color:inherit;-webkit-user-select:none;user-select:none;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1640
1640
|
}
|
|
1641
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1641
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Image, decorators: [{
|
|
1642
1642
|
type: Component,
|
|
1643
1643
|
args: [{ selector: 'gld-image', imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- @if (srcset() && sizes()) {\n @if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" [ngSrcset]=\"srcset()\" [sizes]=\"sizes()\" />\n } @else {\n <img\n fill\n alt=\"{{ alt() }}\"\n [ngSrc]=\"src()\"\n [ngSrcset]=\"srcset()\"\n [sizes]=\"sizes()\"\n loading=\"lazy\" />\n }\n} @else {\n @if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\n } @else {\n <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\n }\n} -->\n\n@if (priority()) {\n <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\n} @else {\n <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\n}\n", styles: [":host{position:relative;aspect-ratio:1/1;overflow:hidden;display:inline-block;object-fit:inherit;width:inherit;height:inherit}img{width:inherit;height:inherit;max-width:100%;max-height:100%;display:inherit;aspect-ratio:inherit;z-index:inherit;object-fit:inherit;border-radius:inherit;border:inherit;background-color:inherit;-webkit-user-select:none;user-select:none;pointer-events:none}\n"] }]
|
|
1644
1644
|
}], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }] } });
|
|
@@ -1649,12 +1649,12 @@ class CircleLoader {
|
|
|
1649
1649
|
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
|
|
1650
1650
|
this.background = input(false, { ...(ngDevMode ? { debugName: "background" } : {}), transform: booleanAttribute });
|
|
1651
1651
|
this.radius = input(false, { ...(ngDevMode ? { debugName: "radius" } : {}), transform: booleanAttribute });
|
|
1652
|
-
this.minHeight = input('auto',
|
|
1652
|
+
this.minHeight = input('auto', ...(ngDevMode ? [{ debugName: "minHeight" }] : []));
|
|
1653
1653
|
}
|
|
1654
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1655
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1654
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CircleLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1655
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CircleLoader, isStandalone: true, selector: "gld-circle-loader", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n class=\"loader\"\n [class.loader--loading]=\"loading()\"\n [class.loader--background]=\"background()\"\n [class.loader--radius]=\"radius()\"\n [style.minHeight]=\"minHeight()\">\n <!-- Content -->\n <ng-content />\n\n <!-- Loader -->\n @if (loading()) {\n <section class=\"loader-loading\">\n <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\n <circle\n class=\"track\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n <circle\n class=\"car\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n </svg>\n </section>\n }\n</article>\n", styles: [":host{width:100%}.loader{--gld-color: var(--gld-foreground-color);--gld-background: light-dark( var(--gld-whitelight-transparent--080), var(--gld-darkblue-transparent--080) );position:relative;color:var(--color)}.loader--radius{border-radius:var(--gld-spacing--xxxs)}.loader-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1}.loader--background .loader-loading{background:var(--gld-background)}.container{--uib-size: 40px;--uib-color: var(--gld-orange);--uib-speed: .8s;--uib-bg-opacity: .1;width:var(--uib-size);height:var(--uib-size);transform-origin:center;animation:rotate var(--uib-speed) linear infinite;will-change:transform;overflow:visible}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .5s ease}.track{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes rotate{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1656
1656
|
}
|
|
1657
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1657
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CircleLoader, decorators: [{
|
|
1658
1658
|
type: Component,
|
|
1659
1659
|
args: [{ selector: 'gld-circle-loader', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n class=\"loader\"\n [class.loader--loading]=\"loading()\"\n [class.loader--background]=\"background()\"\n [class.loader--radius]=\"radius()\"\n [style.minHeight]=\"minHeight()\">\n <!-- Content -->\n <ng-content />\n\n <!-- Loader -->\n @if (loading()) {\n <section class=\"loader-loading\">\n <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\n <circle\n class=\"track\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n <circle\n class=\"car\"\n cx=\"20\"\n cy=\"20\"\n r=\"17.5\"\n pathlength=\"100\"\n stroke-width=\"5px\"\n fill=\"none\" />\n </svg>\n </section>\n }\n</article>\n", styles: [":host{width:100%}.loader{--gld-color: var(--gld-foreground-color);--gld-background: light-dark( var(--gld-whitelight-transparent--080), var(--gld-darkblue-transparent--080) );position:relative;color:var(--color)}.loader--radius{border-radius:var(--gld-spacing--xxxs)}.loader-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1}.loader--background .loader-loading{background:var(--gld-background)}.container{--uib-size: 40px;--uib-color: var(--gld-orange);--uib-speed: .8s;--uib-bg-opacity: .1;width:var(--uib-size);height:var(--uib-size);transform-origin:center;animation:rotate var(--uib-speed) linear infinite;will-change:transform;overflow:visible}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .5s ease}.track{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes rotate{to{transform:rotate(360deg)}}\n"] }]
|
|
1660
1660
|
}], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }] } });
|
|
@@ -1664,17 +1664,17 @@ const components = [DropdownButton, DropdownMenu, CircleLoader];
|
|
|
1664
1664
|
class Table {
|
|
1665
1665
|
constructor() {
|
|
1666
1666
|
this.Icons = Icons;
|
|
1667
|
-
this.tableColumns = input.required(
|
|
1668
|
-
this.emptyMessage = input('',
|
|
1669
|
-
this.tableHeight = input('auto',
|
|
1667
|
+
this.tableColumns = input.required(...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
|
|
1668
|
+
this.emptyMessage = input('', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
|
|
1669
|
+
this.tableHeight = input('auto', ...(ngDevMode ? [{ debugName: "tableHeight" }] : []));
|
|
1670
1670
|
this.loading = input(true, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
|
|
1671
1671
|
this.selects = input(false, { ...(ngDevMode ? { debugName: "selects" } : {}), transform: booleanAttribute });
|
|
1672
1672
|
this.selectsAll = input(false, { ...(ngDevMode ? { debugName: "selectsAll" } : {}), transform: booleanAttribute });
|
|
1673
1673
|
this.search = input(false, { ...(ngDevMode ? { debugName: "search" } : {}), transform: booleanAttribute });
|
|
1674
1674
|
this.pagination = input(false, { ...(ngDevMode ? { debugName: "pagination" } : {}), transform: booleanAttribute });
|
|
1675
1675
|
this.tableColumnAction = output();
|
|
1676
|
-
this.tableColumnsToShow = computed(() => this.tableColumns().filter((column) => !column.hide),
|
|
1677
|
-
this.tableColumnActions = signal([],
|
|
1676
|
+
this.tableColumnsToShow = computed(() => this.tableColumns().filter((column) => !column.hide), ...(ngDevMode ? [{ debugName: "tableColumnsToShow" }] : []));
|
|
1677
|
+
this.tableColumnActions = signal([], ...(ngDevMode ? [{ debugName: "tableColumnActions" }] : []));
|
|
1678
1678
|
}
|
|
1679
1679
|
tableActionFunction({ tableColumnActionAsEvent, tableColumns, index }) {
|
|
1680
1680
|
const tableColumnAction = tableColumnActionAsEvent;
|
|
@@ -1792,10 +1792,10 @@ class Table {
|
|
|
1792
1792
|
return { ...previous, [current.name]: current.values[index] };
|
|
1793
1793
|
}, {});
|
|
1794
1794
|
}
|
|
1795
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1796
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: Table, isStandalone: true, selector: "gld-table", inputs: { tableColumns: { classPropertyName: "tableColumns", publicName: "tableColumns", isSignal: true, isRequired: true, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selects: { classPropertyName: "selects", publicName: "selects", isSignal: true, isRequired: false, transformFunction: null }, selectsAll: { classPropertyName: "selectsAll", publicName: "selectsAll", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableColumnAction: "tableColumnAction" }, ngImport: i0, template: "<!-- Search -->\n@if (search()) {\n <section class=\"table-search\">\n <ng-content select=\"gld-table-search\" />\n </section>\n}\n\n<!-- Table -->\n<article\n class=\"table\"\n [class.table--empty]=\"!tableColumnsToShow().length\"\n [style.height]=\"tableHeight()\">\n <!-- Table Content -->\n <section\n class=\"table-content\"\n [class.table-content--actions]=\"tableColumnActions().length\"\n [class.table-content--selects]=\"selects()\">\n <!-- Loading -->\n @if (loading()) {\n <gld-circle-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n id=\"more button of table cell\"\n name=\"more button of table cell\"\n type=\"iconButton\"\n color=\"blue\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"Icons.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"Icons.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n", styles: [":host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden}.table-content{display:flex;flex-wrap:nowrap}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButton, selector: "gld-dropdown-button", inputs: ["value", "icon", "iconSize", "iconSpace", "moveTopToBottom", "moveLeftToRight", "direction"], outputs: ["changeValue"] }, { kind: "component", type: DropdownMenu, selector: "gld-dropdown-menu", inputs: ["id", "name", "type", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full", "direction", "background", "selected", "initialValue"], outputs: ["changeValue", "changeFocus"] }, { kind: "component", type: CircleLoader, selector: "gld-circle-loader", inputs: ["loading", "background", "radius", "minHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1795
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1796
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: Table, isStandalone: true, selector: "gld-table", inputs: { tableColumns: { classPropertyName: "tableColumns", publicName: "tableColumns", isSignal: true, isRequired: true, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selects: { classPropertyName: "selects", publicName: "selects", isSignal: true, isRequired: false, transformFunction: null }, selectsAll: { classPropertyName: "selectsAll", publicName: "selectsAll", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableColumnAction: "tableColumnAction" }, ngImport: i0, template: "<!-- Search -->\n@if (search()) {\n <section class=\"table-search\">\n <ng-content select=\"gld-table-search\" />\n </section>\n}\n\n<!-- Table -->\n<article\n class=\"table\"\n [class.table--empty]=\"!tableColumnsToShow().length\"\n [style.height]=\"tableHeight()\">\n <!-- Table Content -->\n <section\n class=\"table-content\"\n [class.table-content--actions]=\"tableColumnActions().length\"\n [class.table-content--selects]=\"selects()\">\n <!-- Loading -->\n @if (loading()) {\n <gld-circle-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n id=\"more button of table cell\"\n name=\"more button of table cell\"\n type=\"iconButton\"\n color=\"blue\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"Icons.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"Icons.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n", styles: [":host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden}.table-content{display:flex;flex-wrap:nowrap}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButton, selector: "gld-dropdown-button", inputs: ["value", "icon", "iconSize", "iconSpace", "moveTopToBottom", "moveLeftToRight", "direction"], outputs: ["changeValue"] }, { kind: "component", type: DropdownMenu, selector: "gld-dropdown-menu", inputs: ["id", "name", "type", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full", "direction", "background", "selected", "initialValue"], outputs: ["changeValue", "changeFocus"] }, { kind: "component", type: CircleLoader, selector: "gld-circle-loader", inputs: ["loading", "background", "radius", "minHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1797
1797
|
}
|
|
1798
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1798
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Table, decorators: [{
|
|
1799
1799
|
type: Component,
|
|
1800
1800
|
args: [{ selector: 'gld-table', imports: [NgTemplateOutlet, ...components], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Search -->\n@if (search()) {\n <section class=\"table-search\">\n <ng-content select=\"gld-table-search\" />\n </section>\n}\n\n<!-- Table -->\n<article\n class=\"table\"\n [class.table--empty]=\"!tableColumnsToShow().length\"\n [style.height]=\"tableHeight()\">\n <!-- Table Content -->\n <section\n class=\"table-content\"\n [class.table-content--actions]=\"tableColumnActions().length\"\n [class.table-content--selects]=\"selects()\">\n <!-- Loading -->\n @if (loading()) {\n <gld-circle-loader loading background minHeight=\"100px\" />\n } @else {\n <!-- Table Columns -->\n @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n <section\n class=\"table-column\"\n [style.flexBasis]=\"tableColumn.width\"\n [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n [style.minWidth]=\"tableColumn.minWidth\"\n [style.maxWidth]=\"tableColumn.maxWidth\">\n <section class=\"table-header\">\n <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n </section>\n @for (value of tableColumn.values; track $index) {\n <section\n class=\"table-cell\"\n [style.justifyContent]=\"tableColumn.justify\"\n [style.textAlign]=\"tableColumn.justify\">\n @if (tableColumn.transform(value) !== undefined) {\n @switch (true) {\n @case (tableColumn.template !== undefined) {\n <ng-container\n [ngTemplateOutlet]=\"tableColumn.template\"\n [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n }\n @default {\n <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n }\n }\n } @else {\n <span>-</span>\n }\n </section>\n }\n </section>\n } @empty {\n <!-- Empty -->\n <section class=\"table-empty\">\n <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n </section>\n }\n }\n </section>\n\n <!-- Table Actions -->\n @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n <section\n class=\"table-column\"\n [class.table-column--actions]=\"tableColumnActions().length\"\n [class.table-column--selects]=\"selects()\">\n <!-- Header -->\n <section\n class=\"table-header\"\n [class.table-header--actions]=\"tableColumnActions().length\"\n [class.table-header--selects]=\"selects()\">\n <!-- Select All Checkbox -->\n @if (selectsAll()) {\n <!-- <mat-checkbox\n color=\"primary\"\n matTooltip=\"Todo\"\n matTooltipClass=\"Tooltip\"\n class=\"Checkbox\"\n [checked]=\"\n dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n \"\n [indeterminate]=\"\n !!dragAndDropColumnSelected().length &&\n dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n \"\n (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n /> -->\n }\n </section>\n @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n <!-- Cell -->\n <section class=\"table-cell table-cell--actions\">\n <!-- Select Checkbox -->\n @if (selects()) {\n <!-- <mat-checkbox\n color=\"primary\"\n class=\"Checkbox\"\n matTooltip=\"Seleccionar\"\n matTooltipClass=\"Tooltip\"\n [checked]=\"isSelected(dragAndDropColumns(), index)\"\n (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n }\n @if (tableColumnActions()) {\n <!-- Dropdown Menu -->\n <gld-dropdown-menu\n background\n id=\"more button of table cell\"\n name=\"more button of table cell\"\n type=\"iconButton\"\n color=\"blue\"\n iconSize=\"small\"\n direction=\"left\"\n [icon]=\"Icons.more2Fill\"\n (changeValue)=\"\n tableActionFunction({\n tableColumnActionAsEvent: $event,\n tableColumns: tableColumns(),\n index,\n })\n \">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <gld-dropdown-button\n [value]=\"tableColumnAction\"\n [icon]=\"tableColumnAction.icon\"\n iconSize=\"tiny\">\n {{ tableColumnAction.label }}\n </gld-dropdown-button>\n }\n </gld-dropdown-menu>\n <!-- <gld-icon-button\n background\n name=\"more button of table cell\"\n iconSize=\"small\"\n [icon]=\"Icons.more2Fill\"> -->\n <!-- <gld-tile color=\"blue-to-green\" class=\"Menu\">\n <section class=\"Menu-content\">\n @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n <button\n class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n [class.Menu-button--hidden]=\"\n !tableColumnAction.showWhen(buildDataStructure({ index }))\n \"\n (click)=\"\n tableActionFunction({\n tableColumnAction,\n tableColumns: tableColumns(),\n index,\n })\n \">\n <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n </button>\n }\n </section>\n </gld-tile> -->\n <!-- </gld-icon-button> -->\n }\n </section>\n }\n </section>\n }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n <section class=\"table-pagination\">\n <ng-content select=\"gld-table-pagination\" />\n </section>\n}\n", styles: [":host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden}.table-content{display:flex;flex-wrap:nowrap}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"] }]
|
|
1801
1801
|
}], propDecorators: { tableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableColumns", required: true }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], tableHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableHeight", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selects: [{ type: i0.Input, args: [{ isSignal: true, alias: "selects", required: false }] }], selectsAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectsAll", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], tableColumnAction: [{ type: i0.Output, args: ["tableColumnAction"] }] } });
|
|
@@ -1804,17 +1804,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
1804
1804
|
class TablePagination {
|
|
1805
1805
|
constructor() {
|
|
1806
1806
|
this.Icons = Icons;
|
|
1807
|
-
this.pagination = input.required(
|
|
1807
|
+
this.pagination = input.required(...(ngDevMode ? [{ debugName: "pagination" }] : []));
|
|
1808
1808
|
this.page = output();
|
|
1809
1809
|
this.changeToNext = output();
|
|
1810
1810
|
this.changeToPrevious = output();
|
|
1811
|
-
this.currentPage = signal(0,
|
|
1811
|
+
this.currentPage = signal(0, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
|
|
1812
1812
|
this.maxPages = computed(() => {
|
|
1813
1813
|
if (this.pagination().itemsPerPage > this.pagination().maxItems)
|
|
1814
1814
|
return 1;
|
|
1815
1815
|
else
|
|
1816
1816
|
return Math.ceil(this.pagination().maxItems / this.pagination().itemsPerPage);
|
|
1817
|
-
},
|
|
1817
|
+
}, ...(ngDevMode ? [{ debugName: "maxPages" }] : []));
|
|
1818
1818
|
effect(() => this.page.emit(this.currentPage()));
|
|
1819
1819
|
effect(() => {
|
|
1820
1820
|
const initialPage = this.pagination().initialPage;
|
|
@@ -1840,10 +1840,10 @@ class TablePagination {
|
|
|
1840
1840
|
}
|
|
1841
1841
|
this.changeToPrevious.emit(this.currentPage());
|
|
1842
1842
|
}
|
|
1843
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1844
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0
|
|
1843
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TablePagination, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1844
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: TablePagination, isStandalone: true, selector: "gld-table-pagination", inputs: { pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { page: "page", changeToNext: "changeToNext", changeToPrevious: "changeToPrevious" }, ngImport: i0, template: "<article class=\"Pagination\">\n <section class=\"Pagination-info\">\n <p class=\"Pagination-label\">P\u00E1gina {{ currentPage() }} de {{ maxPages() }}</p>\n </section>\n <section class=\"Pagination-actions\">\n <!-- <gld-icon-button\n class=\"\"\n name=\"button-next\"\n iconSize=\"small\"\n [icon]=\"Icons.arrowLeftSLine\"\n (clicked)=\"previousPage()\" />\n <gld-icon-button\n class=\"\"\n name=\"button-previous\"\n iconSize=\"small\"\n [icon]=\"Icons.arrowRightSLine\"\n (clicked)=\"nextPage()\" /> -->\n </section>\n</article>\n", styles: [".Pagination{--color: var(--darkblue);--height: 40px;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing--s);margin:var(--spacing--s) 0;height:var(--height);padding-left:var(--spacing--s)}.Pagination.Theme--dark{--color: var(--whitelight)}.Pagination-label{margin:0;font:600 var(--font-size--normal) var(--font--poppins);color:var(--color)}.Pagination-actions{display:flex;gap:var(--spacing--xxxs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1845
1845
|
}
|
|
1846
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1846
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TablePagination, decorators: [{
|
|
1847
1847
|
type: Component,
|
|
1848
1848
|
args: [{ selector: 'gld-table-pagination', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"Pagination\">\n <section class=\"Pagination-info\">\n <p class=\"Pagination-label\">P\u00E1gina {{ currentPage() }} de {{ maxPages() }}</p>\n </section>\n <section class=\"Pagination-actions\">\n <!-- <gld-icon-button\n class=\"\"\n name=\"button-next\"\n iconSize=\"small\"\n [icon]=\"Icons.arrowLeftSLine\"\n (clicked)=\"previousPage()\" />\n <gld-icon-button\n class=\"\"\n name=\"button-previous\"\n iconSize=\"small\"\n [icon]=\"Icons.arrowRightSLine\"\n (clicked)=\"nextPage()\" /> -->\n </section>\n</article>\n", styles: [".Pagination{--color: var(--darkblue);--height: 40px;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing--s);margin:var(--spacing--s) 0;height:var(--height);padding-left:var(--spacing--s)}.Pagination.Theme--dark{--color: var(--whitelight)}.Pagination-label{margin:0;font:600 var(--font-size--normal) var(--font--poppins);color:var(--color)}.Pagination-actions{display:flex;gap:var(--spacing--xxxs)}\n"] }]
|
|
1849
1849
|
}], ctorParameters: () => [], propDecorators: { pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], page: [{ type: i0.Output, args: ["page"] }], changeToNext: [{ type: i0.Output, args: ["changeToNext"] }], changeToPrevious: [{ type: i0.Output, args: ["changeToPrevious"] }] } });
|
|
@@ -1854,9 +1854,9 @@ class TableSearch {
|
|
|
1854
1854
|
constructor() {
|
|
1855
1855
|
this.#formBuilder = inject(FormBuilder);
|
|
1856
1856
|
this.Icons = Icons;
|
|
1857
|
-
this.placeholder = input('buscar',
|
|
1858
|
-
this.width = input('auto',
|
|
1859
|
-
this.debounceTime = input(250,
|
|
1857
|
+
this.placeholder = input('buscar', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
1858
|
+
this.width = input('auto', ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
1859
|
+
this.debounceTime = input(250, ...(ngDevMode ? [{ debugName: "debounceTime" }] : []));
|
|
1860
1860
|
this.searching = output();
|
|
1861
1861
|
this.control = this.#formBuilder.control('');
|
|
1862
1862
|
this.control.valueChanges
|
|
@@ -1872,10 +1872,10 @@ class TableSearch {
|
|
|
1872
1872
|
});
|
|
1873
1873
|
});
|
|
1874
1874
|
}
|
|
1875
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1876
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0
|
|
1875
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableSearch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1876
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: TableSearch, isStandalone: true, selector: "gld-table-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searching: "searching" }, ngImport: i0, template: "<article class=\"Search\">\n <section class=\"Input\" [style.width]=\"width()\">\n <!-- <gld-icon [icon]=\"Icons.search2Line\" /> -->\n\n <input\n id=\"search\"\n name=\"search\"\n type=\"search\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"control\" />\n </section>\n</article>\n", styles: [".Search{margin-bottom:24px}.Input{--radius: 100px;--background: var(--whitelight);--color: var(--darkblue);--placeholder-color: var(--gray);--border-color: var(--gray);--outline-color: var(--blue);--label-color: var(--darkblue);--height: 40px;--min-with: 350px;--icon-size: 20px;--animation-time: var(--animation-time--150);position:relative}.Input input{position:relative;width:100%;min-width:var(--min-with);height:var(--height);padding:12px 24px 12px calc(24px + var(--icon-size) + 12px);font-size:16px;font-family:inherit;color:var(--color);background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius)}.Input input:focus{outline-color:var(--outline-color)}.Input input::placeholder{color:var(--color)}.Input gld-icon{position:absolute;left:24px;top:calc(50% - 11px);z-index:1;color:var(--border-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1877
1877
|
}
|
|
1878
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1878
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableSearch, decorators: [{
|
|
1879
1879
|
type: Component,
|
|
1880
1880
|
args: [{ selector: 'gld-table-search', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"Search\">\n <section class=\"Input\" [style.width]=\"width()\">\n <!-- <gld-icon [icon]=\"Icons.search2Line\" /> -->\n\n <input\n id=\"search\"\n name=\"search\"\n type=\"search\"\n [placeholder]=\"placeholder()\"\n [formControl]=\"control\" />\n </section>\n</article>\n", styles: [".Search{margin-bottom:24px}.Input{--radius: 100px;--background: var(--whitelight);--color: var(--darkblue);--placeholder-color: var(--gray);--border-color: var(--gray);--outline-color: var(--blue);--label-color: var(--darkblue);--height: 40px;--min-with: 350px;--icon-size: 20px;--animation-time: var(--animation-time--150);position:relative}.Input input{position:relative;width:100%;min-width:var(--min-with);height:var(--height);padding:12px 24px 12px calc(24px + var(--icon-size) + 12px);font-size:16px;font-family:inherit;color:var(--color);background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius)}.Input input:focus{outline-color:var(--outline-color)}.Input input::placeholder{color:var(--color)}.Input gld-icon{position:absolute;left:24px;top:calc(50% - 11px);z-index:1;color:var(--border-color)}\n"] }]
|
|
1881
1881
|
}], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], searching: [{ type: i0.Output, args: ["searching"] }] } });
|
|
@@ -1883,15 +1883,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
1883
1883
|
// Angular Imports
|
|
1884
1884
|
class Tile {
|
|
1885
1885
|
constructor() {
|
|
1886
|
-
this.color = input(TileColor.default,
|
|
1887
|
-
this.paddingSize = input(TilePaddingSize.zero,
|
|
1886
|
+
this.color = input(TileColor.default, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
1887
|
+
this.paddingSize = input(TilePaddingSize.zero, ...(ngDevMode ? [{ debugName: "paddingSize" }] : []));
|
|
1888
1888
|
this.background = input(false, { ...(ngDevMode ? { debugName: "background" } : {}), transform: booleanAttribute });
|
|
1889
1889
|
this.hover = input(false, { ...(ngDevMode ? { debugName: "hover" } : {}), transform: booleanAttribute });
|
|
1890
1890
|
}
|
|
1891
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1892
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0
|
|
1891
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Tile, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1892
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: Tile, isStandalone: true, selector: "gld-tile", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, paddingSize: { classPropertyName: "paddingSize", publicName: "paddingSize", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\n [class.tile--background]=\"background()\"\n [class.tile--hover]=\"hover()\">\n <section class=\"tile-content\">\n <ng-content />\n </section>\n</article>\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxs);width:inherit;height:inherit;position:relative;padding:var(--gld-padding-size);background:var(--gld-background);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);overflow:hidden;will-change:background;transition:background var(--gld-animation-time--150)}.tile--hover:hover,.tile--hover:focus{background:var(--gld-background--hover)}.tile.tile--hover{cursor:pointer}.tile--default{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) )}.tile--default.tile--background{--gld-background: var(--gld-gray-transparent--010)}.tile--default.tile--hover{--gld-background--hover: var(--gld-gray-transparent--020)}.tile--blue{--gld-border-color: var(--gld-blue-transparent--020)}.tile--blue.tile--background{--gld-background: var(--gld-blue-transparent--005)}.tile--blue.tile--hover{--gld-background--hover: var(--gld-blue-transparent--010)}.tile--green{--gld-border-color: var(--gld-green-transparent--020)}.tile--green.tile--background{--gld-background: var(--gld-green-transparent--005)}.tile--green.tile--hover{--gld-background--hover: var(--gld-green-transparent--010)}.tile--purple{--gld-border-color: var(--gld-purple-transparent--020)}.tile--purple.tile--background{--gld-background: var(--gld-purple-transparent--005)}.tile--purple.tile--hover{--gld-background--hover: var(--gld-purple-transparent--010)}.tile--mustard{--gld-border-color: var(--gld-mustard-transparent--020)}.tile--mustard.tile--background{--gld-background: var(--gld-mustard-transparent--005)}.tile--mustard.tile--hover{--gld-background--hover: var(--gld-mustard-transparent--010)}.tile--orange{--gld-border-color: var(--gld-orange-transparent--020)}.tile--orange.tile--background{--gld-background: var(--gld-orange-transparent--005)}.tile--orange.tile--hover{--gld-background--hover: var(--gld-orange-transparent--010)}.tile--pink{--gld-border-color: var(--gld-pink-transparent--020)}.tile--pink.tile--background{--gld-background: var(--gld-pink-transparent--005)}.tile--pink.tile--hover{--gld-background--hover: var(--gld-pink-transparent--010)}.tile--red{--gld-border-color: var(--gld-red-transparent--020)}.tile--red.tile--background{--gld-background: var(--gld-red-transparent--005)}.tile--red.tile--hover{--gld-background--hover: var(--gld-red-transparent--010)}.tile--padding-tiny{--gld-padding-size: var(--gld-spacing--xxxs)}.tile--padding-small{--gld-padding-size: var(--gld-spacing--xs)}.tile--padding-normal{--gld-padding-size: var(--gld-spacing--s)}.tile--padding-medium{--gld-padding-size: var(--gld-spacing--l)}.tile--padding-large{--gld-padding-size: var(--gld-spacing--xl)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1893
1893
|
}
|
|
1894
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1894
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Tile, decorators: [{
|
|
1895
1895
|
type: Component,
|
|
1896
1896
|
args: [{ selector: 'gld-tile', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\n [class.tile--background]=\"background()\"\n [class.tile--hover]=\"hover()\">\n <section class=\"tile-content\">\n <ng-content />\n </section>\n</article>\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxs);width:inherit;height:inherit;position:relative;padding:var(--gld-padding-size);background:var(--gld-background);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);overflow:hidden;will-change:background;transition:background var(--gld-animation-time--150)}.tile--hover:hover,.tile--hover:focus{background:var(--gld-background--hover)}.tile.tile--hover{cursor:pointer}.tile--default{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) )}.tile--default.tile--background{--gld-background: var(--gld-gray-transparent--010)}.tile--default.tile--hover{--gld-background--hover: var(--gld-gray-transparent--020)}.tile--blue{--gld-border-color: var(--gld-blue-transparent--020)}.tile--blue.tile--background{--gld-background: var(--gld-blue-transparent--005)}.tile--blue.tile--hover{--gld-background--hover: var(--gld-blue-transparent--010)}.tile--green{--gld-border-color: var(--gld-green-transparent--020)}.tile--green.tile--background{--gld-background: var(--gld-green-transparent--005)}.tile--green.tile--hover{--gld-background--hover: var(--gld-green-transparent--010)}.tile--purple{--gld-border-color: var(--gld-purple-transparent--020)}.tile--purple.tile--background{--gld-background: var(--gld-purple-transparent--005)}.tile--purple.tile--hover{--gld-background--hover: var(--gld-purple-transparent--010)}.tile--mustard{--gld-border-color: var(--gld-mustard-transparent--020)}.tile--mustard.tile--background{--gld-background: var(--gld-mustard-transparent--005)}.tile--mustard.tile--hover{--gld-background--hover: var(--gld-mustard-transparent--010)}.tile--orange{--gld-border-color: var(--gld-orange-transparent--020)}.tile--orange.tile--background{--gld-background: var(--gld-orange-transparent--005)}.tile--orange.tile--hover{--gld-background--hover: var(--gld-orange-transparent--010)}.tile--pink{--gld-border-color: var(--gld-pink-transparent--020)}.tile--pink.tile--background{--gld-background: var(--gld-pink-transparent--005)}.tile--pink.tile--hover{--gld-background--hover: var(--gld-pink-transparent--010)}.tile--red{--gld-border-color: var(--gld-red-transparent--020)}.tile--red.tile--background{--gld-background: var(--gld-red-transparent--005)}.tile--red.tile--hover{--gld-background--hover: var(--gld-red-transparent--010)}.tile--padding-tiny{--gld-padding-size: var(--gld-spacing--xxxs)}.tile--padding-small{--gld-padding-size: var(--gld-spacing--xs)}.tile--padding-normal{--gld-padding-size: var(--gld-spacing--s)}.tile--padding-medium{--gld-padding-size: var(--gld-spacing--l)}.tile--padding-large{--gld-padding-size: var(--gld-spacing--xl)}\n"] }]
|
|
1897
1897
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], paddingSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingSize", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }] } });
|
|
@@ -1941,7 +1941,7 @@ class Authentication {
|
|
|
1941
1941
|
this.router = inject(Router);
|
|
1942
1942
|
this.http = inject(HttpClient);
|
|
1943
1943
|
this.authenticationStore = inject(AuthenticationStore);
|
|
1944
|
-
this.iamgldApi = computed(() => this.environment.iamgldApi,
|
|
1944
|
+
this.iamgldApi = computed(() => this.environment.iamgldApi, ...(ngDevMode ? [{ debugName: "iamgldApi" }] : []));
|
|
1945
1945
|
}
|
|
1946
1946
|
signin(parameters) {
|
|
1947
1947
|
const { email, password } = parameters;
|
|
@@ -1994,10 +1994,10 @@ class Authentication {
|
|
|
1994
1994
|
}
|
|
1995
1995
|
}));
|
|
1996
1996
|
}
|
|
1997
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1998
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
1997
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Authentication, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1998
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Authentication }); }
|
|
1999
1999
|
}
|
|
2000
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2000
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Authentication, decorators: [{
|
|
2001
2001
|
type: Injectable
|
|
2002
2002
|
}] });
|
|
2003
2003
|
|
|
@@ -2011,10 +2011,10 @@ class CustomPreloadingStrategy {
|
|
|
2011
2011
|
}
|
|
2012
2012
|
return of(null);
|
|
2013
2013
|
}
|
|
2014
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
2015
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
2014
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CustomPreloadingStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2015
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CustomPreloadingStrategy, providedIn: 'root' }); }
|
|
2016
2016
|
}
|
|
2017
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2017
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CustomPreloadingStrategy, decorators: [{
|
|
2018
2018
|
type: Injectable,
|
|
2019
2019
|
args: [{ providedIn: 'root' }]
|
|
2020
2020
|
}] });
|
|
@@ -2030,10 +2030,10 @@ class Environments {
|
|
|
2030
2030
|
getEnvironmentLabel() {
|
|
2031
2031
|
return this.environment.environmentType;
|
|
2032
2032
|
}
|
|
2033
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
2034
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
2033
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Environments, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2034
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Environments }); }
|
|
2035
2035
|
}
|
|
2036
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2036
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Environments, decorators: [{
|
|
2037
2037
|
type: Injectable
|
|
2038
2038
|
}] });
|
|
2039
2039
|
|
|
@@ -2052,10 +2052,10 @@ class Theme {
|
|
|
2052
2052
|
this.renderer.addClass(document.body, theme);
|
|
2053
2053
|
}
|
|
2054
2054
|
}
|
|
2055
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
2056
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
2055
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Theme, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2056
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Theme }); }
|
|
2057
2057
|
}
|
|
2058
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Theme, decorators: [{
|
|
2059
2059
|
type: Injectable
|
|
2060
2060
|
}], ctorParameters: () => [] });
|
|
2061
2061
|
|
|
@@ -2070,10 +2070,10 @@ class Transloco {
|
|
|
2070
2070
|
getLanguage() {
|
|
2071
2071
|
return this.translocoService.getActiveLang();
|
|
2072
2072
|
}
|
|
2073
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
2074
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
2073
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Transloco, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2074
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Transloco }); }
|
|
2075
2075
|
}
|
|
2076
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2076
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Transloco, decorators: [{
|
|
2077
2077
|
type: Injectable
|
|
2078
2078
|
}] });
|
|
2079
2079
|
class TranslocoHttpLoader {
|
|
@@ -2083,10 +2083,10 @@ class TranslocoHttpLoader {
|
|
|
2083
2083
|
getTranslation(lang) {
|
|
2084
2084
|
return this.httpClient.get(`public/i18n/${lang}.json`);
|
|
2085
2085
|
}
|
|
2086
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
2087
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
2086
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TranslocoHttpLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2087
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TranslocoHttpLoader }); }
|
|
2088
2088
|
}
|
|
2089
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2089
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TranslocoHttpLoader, decorators: [{
|
|
2090
2090
|
type: Injectable
|
|
2091
2091
|
}] });
|
|
2092
2092
|
|
|
@@ -2139,8 +2139,8 @@ const isLogged = () => {
|
|
|
2139
2139
|
// Angular Imports
|
|
2140
2140
|
const addToken = (request, next) => {
|
|
2141
2141
|
const authenticationStore = inject(AuthenticationStore);
|
|
2142
|
-
const logged = computed(() => authenticationStore.logged(),
|
|
2143
|
-
const accessToken = computed(() => authenticationStore.accessToken(),
|
|
2142
|
+
const logged = computed(() => authenticationStore.logged(), ...(ngDevMode ? [{ debugName: "logged" }] : []));
|
|
2143
|
+
const accessToken = computed(() => authenticationStore.accessToken(), ...(ngDevMode ? [{ debugName: "accessToken" }] : []));
|
|
2144
2144
|
let cloneRequest = request;
|
|
2145
2145
|
if (logged() && request.headers.has('Authorization')) {
|
|
2146
2146
|
cloneRequest = request.clone({
|
|
@@ -2180,10 +2180,10 @@ const changeLanguage = (request, next) => {
|
|
|
2180
2180
|
const refreshToken = (request, next) => {
|
|
2181
2181
|
const authenticationStore = inject(AuthenticationStore);
|
|
2182
2182
|
const authentication = inject(Authentication);
|
|
2183
|
-
const logged = computed(() => authenticationStore.logged(),
|
|
2184
|
-
const accessToken = computed(() => authenticationStore.accessToken(),
|
|
2185
|
-
const refreshToken = computed(() => authenticationStore.refreshToken(),
|
|
2186
|
-
const refreshAccessTokenInProgress = signal(false,
|
|
2183
|
+
const logged = computed(() => authenticationStore.logged(), ...(ngDevMode ? [{ debugName: "logged" }] : []));
|
|
2184
|
+
const accessToken = computed(() => authenticationStore.accessToken(), ...(ngDevMode ? [{ debugName: "accessToken" }] : []));
|
|
2185
|
+
const refreshToken = computed(() => authenticationStore.refreshToken(), ...(ngDevMode ? [{ debugName: "refreshToken" }] : []));
|
|
2186
|
+
const refreshAccessTokenInProgress = signal(false, ...(ngDevMode ? [{ debugName: "refreshAccessTokenInProgress" }] : []));
|
|
2187
2187
|
const doSameRequestCallStack = new Subject();
|
|
2188
2188
|
const handlerRefreshAccessToken = (request, next) => {
|
|
2189
2189
|
if (refreshAccessTokenInProgress()) {
|